/* NexTal — agendar una cita con ventas. Composición de 1619 × 971; en escritorio se escala para ocupar la ventana.
   La escena queda anclada abajo a la derecha: si sobra espacio, arriba y a la izquierda continúan los colores de sus bordes. */
.vt{position:relative;min-height:971px;overflow:hidden;color:#0B1F4D;
  background:url("../img/ventas/borde-arriba.png") right top / 1619px calc(100% - 970px) no-repeat,
             url("../img/ventas/borde-izq.png") left bottom / calc(100% - 1618px) 971px no-repeat,#05325A}
.vt-escena{position:absolute;right:0;bottom:0;width:1619px;height:971px;max-width:none}

/* ------------------------------------------------------------ panel izquierdo (alineado con la escena) */
.vt-lado{position:absolute;left:max(0px,calc(100% - 1619px));bottom:0;display:flex;flex-direction:column;width:404px;height:971px;padding:57px 0 51px 78px;color:#FFF}
.vt-lado>*{flex-shrink:0}
.vt-logo{align-self:flex-start;display:block}
.vt-logo img{display:block;width:200px;height:auto}
.vt-eyebrow{margin:43px 0 0;font-size:14.5px;letter-spacing:.27em;text-transform:uppercase;color:#D6DEF5}
.vt-titulo{margin:8px 0 0;font-size:47.5px;line-height:48px;font-weight:700;letter-spacing:-.018em;color:#FFF}
.vt-titulo>span{display:block;white-space:nowrap}
.vt-titulo em{font-style:normal;color:#1EA0FF}
.vt-lead{max-width:305px;margin:18px 0 0;font-size:16.5px;line-height:28px;color:#E3E9F8}
.vt-rasgos{display:flex;flex-direction:column;gap:18.5px;margin:27px 0 0;padding:0;list-style:none}
.vt-rasgos li{display:flex;align-items:flex-start;gap:22px}
.vt-ico{flex:none;display:grid;place-items:center;width:68px;height:66px;border-radius:9px;background:linear-gradient(160deg,rgb(40 110 230 / .30),rgb(255 255 255 / .05));border:1px solid rgb(120 170 255 / .42);color:#4DA8FF}
.vt-ico svg{width:45px;height:45px}
.vt-rasgos div{display:flex;flex-direction:column;padding-top:3px;max-width:215px}
.vt-rasgos b{font-size:16.5px;line-height:22px;font-weight:600;color:#FFF}
.vt-rasgos div>span{margin-top:2px;font-size:14.5px;line-height:20px;color:#D0DAF2}
.vt-pie{margin:auto 0 0;font-size:15px;color:#D6DEF5}

/* ------------------------------------------------------------ tarjeta del formulario (sobre la tarjeta de la escena) */
.vt-tarjeta{position:absolute;right:15px;bottom:32px;display:flex;flex-direction:column;width:600px;height:900px;padding:33px 39px 30px 42px;
  border-radius:14px;background:#FFF;box-shadow:0 16px 40px rgb(12 30 80 / .14)}
.vt-tarjeta h1{margin:0;font-size:31.5px;line-height:1.25;font-weight:800;letter-spacing:-.02em;color:#0B1F4D}
.vt-sub{max-width:440px;margin:8px 0 0;font-size:16.5px;line-height:24px;color:#5B6478}
.vt-error{display:flex;align-items:center;gap:10px;min-height:48px;margin:8px 0 0;padding:6px 14px;border:1px solid #F3C7C0;border-radius:8px;background:#FDF1EF;color:#9B2C1F;font-size:14px;line-height:1.35}
.vt-error svg{flex:none;width:20px;height:20px}
.vt-form{display:flex;flex-direction:column;gap:15.5px;margin-top:23px}
.vt-fila{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vt-campo{display:block;min-width:0;font-size:14.5px;line-height:20px;font-weight:600;color:#4A5570}
.vt-req{color:#E0453A}
.vt-control{position:relative;display:block;margin-top:7px}
.vt-control>svg{position:absolute;left:17px;top:50%;width:21px;height:21px;margin-top:-10.5px;color:#4A5570;pointer-events:none}
.vt-control input,.vt-control select,.vt-control textarea{width:100%;height:42px;padding:0 14px 0 54px;border:1px solid #D7DEE8;border-radius:7px;background:#FFF;
  font:inherit;font-size:14.5px;font-weight:400;color:#0B1F4D;transition:border-color .15s,box-shadow .15s}
.vt-control input::placeholder,.vt-control textarea::placeholder{color:#7A8497;opacity:1}
.vt-control input:focus,.vt-control select:focus,.vt-control textarea:focus{outline:none;border-color:#1F6BF0;box-shadow:0 0 0 3px rgb(31 107 240 / .14)}
.vt-control input:user-invalid,.vt-control select:user-invalid{border-color:#D2503F}
.vt-control input[type=date]{padding-right:12px;color:#0B1F4D}
.vt-control input[type=date]:invalid{color:#7A8497}
.vt-select select{appearance:none;-webkit-appearance:none;padding-left:44px;padding-right:25px;font-size:13.6px;letter-spacing:-.02em;cursor:pointer;color:#3A4659}
.vt-select>svg{left:14px}
.vt-select select:has(option[value=""]:checked){color:#7A8497}
.vt-select::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.7px solid #3A4659;border-bottom:1.7px solid #3A4659;transform:rotate(45deg);pointer-events:none}
.vt-area>svg{top:12px;margin-top:0}
.vt-control textarea{display:block;height:69px;padding-top:10px;line-height:1.45;resize:vertical}
.vt-trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.vt-enviar{display:flex;align-items:center;justify-content:center;gap:14px;height:50px;margin-top:1px;border:0;border-radius:7px;background:#0A2472;color:#FFF;
  font:inherit;font-size:19px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,box-shadow .15s}
.vt-enviar:hover{background:#071B5C;box-shadow:0 8px 20px rgb(10 36 114 / .25)}
.vt-enviar svg{width:24px;height:24px}
.vt-nota{display:flex;justify-content:center;gap:12px;margin:15px 0 0;font-size:13.3px;line-height:19px;color:#56627A;text-align:center}
.vt-nota>svg{flex:none;width:16px;height:16px;margin-top:1px;color:#56627A}
.vt-salto{display:block}
.vt-nota a{color:inherit;text-decoration:none}
.vt-nota a:hover{text-decoration:underline}

/* ------------------------------------------------------------ confirmación */
.vt-listo{display:block;width:84px;height:84px;margin-bottom:18px}
.vt-listo svg{width:100%;height:100%}
.vt-resumen{display:grid;gap:12px;margin:24px 0 0;padding:18px 20px;border-radius:12px;background:#EEF4FD}
.vt-resumen div{display:flex;justify-content:space-between;gap:16px;font-size:15px}
.vt-resumen dt{color:#56627A}
.vt-resumen dd{margin:0;font-weight:600;color:#0B1F4D;text-align:right;overflow-wrap:anywhere}
.vt-pasos{counter-reset:paso;display:flex;flex-direction:column;gap:18px;margin:28px 0 0;padding:0;list-style:none}
.vt-pasos li{counter-increment:paso;position:relative;display:flex;flex-direction:column;padding-left:50px;font-size:15px;line-height:1.4;color:#56627A}
.vt-pasos li::before{content:counter(paso);position:absolute;left:0;top:0;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#0A2472;color:#FFF;font-weight:700}
.vt-pasos b{color:#0B1F4D;font-size:16px}
.vt-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
.vt-acciones .vt-enviar{flex:1 1 220px;font-size:17px}
.vt-secundario{flex:1 1 200px;height:50px;border:1px solid #C9D6EA;border-radius:7px;background:#FFF;color:#0A2472;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.vt-secundario:hover{background:#F3F7FD;border-color:#0A2472}

/* ------------------------------------------------------------ pantallas medianas y pequeñas (sin escalado): se apila */
@media (max-width:1100px){
  .vt{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:#EEF3FA}
  .vt-escena{display:none}
  .vt-tarjeta{position:static;order:-1;width:calc(100% - 32px);max-width:640px;height:auto;margin:24px auto;padding:28px 24px 24px}
  .vt-lado{position:relative;left:auto;width:auto;height:auto;padding:32px 24px 30px;
    background:linear-gradient(90deg,rgb(3 34 92 / .95) 0,rgb(3 34 92 / .82) 55%,rgb(3 34 92 / .45) 100%),url("../img/ventas/escena-lado.webp") 78% 40% / cover no-repeat}
  .vt-titulo>span{white-space:normal}
  .vt-lead,.vt-rasgos div{max-width:none}
  .vt-rasgos{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
  .vt-pie{margin-top:26px}
  .vt-acciones{margin-top:26px}
}
@media (max-width:600px){
  .vt-tarjeta{width:calc(100% - 20px);margin:12px auto 20px;padding:22px 16px 20px}
  .vt-tarjeta h1{font-size:27px}
  .vt-fila{grid-template-columns:1fr;gap:16px}
  .vt-titulo{font-size:34px;line-height:37px}
  .vt-rasgos{grid-template-columns:1fr}
  .vt-ico{width:52px;height:52px}
  .vt-ico svg{width:26px;height:26px}
  .vt-salto{display:inline}
}