/* ===== GEELY PASSPORT EXPERIENCE — Casa Jaar =====
   Tótem vertical 1080×1920. Todo escala con --u, que es 1/1080 del ancho útil,
   así el arte se ve igual en el tótem, en una laptop o en un celular. */

/* El ?v=2 es por una versión anterior del archivo que salía rota (traía una
   tabla LTSH vacía y OTS rechazaba la fuente entera). Se sirvió marcada
   'immutable' un año, así que sin cambiarle la URL los navegadores que ya la
   tienen nunca vuelven a pedirla. Hoy los .woff2 se revalidan por ETag, o sea
   que este número no hay que volver a tocarlo. */
@font-face{font-family:'Geely';src:url('../fonts/geely-bold.woff2?v=2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --tinta:#2e2e2e;          /* textos e iconos */
  --tinta-suave:#6a6a6a;
  --claro-a:#ddd4cb;        /* fondo claro: arriba cálido */
  --claro-b:#eceef0;        /* fondo claro: abajo frío */
  --oscuro:#616161;         /* fondo oscuro de "cotiza" */
  --pie:#111;
  --ease:cubic-bezier(.22,1,.36,1);
  --u:calc(100vw / 1080);   /* unidad base del arte */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
/* Sin zoom por doble toque: Safari amplia la pagina si se toca dos veces
   seguidas un boton (por ejemplo "Ver specs" para abrir y cerrar). La app no
   hace scroll, asi que no se pierde nada. El pellizco se bloquea en JS. */
html,body,#app{touch-action:manipulation}
/* Las franjas que quedan fuera del lienzo 9:16. El tótem es exactamente
   1080x1920 y ahí no sobra nada, pero un teléfono es más alto y sobra un
   12-13% arriba y abajo. En negro se leía como si la página estuviera
   recortada, así que cada pantalla le pasa a body el color de su borde de
   arriba y el de abajo, y las franjas dejan de notarse. */
body{
  --borde-arriba:var(--claro-a);
  --borde-abajo:var(--claro-b);
  background:linear-gradient(to bottom,
    var(--borde-arriba) 0 50%, var(--borde-abajo) 50% 100%);
  color:var(--tinta);
  font-family:'Inter',system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}

/* El lienzo mantiene 9:16 y se centra; nunca se deforma el arte. */
#app{
  position:fixed;inset:0;margin:auto;
  width:min(100vw, calc(100vh * 1080 / 1920));
  height:min(100vh, calc(100vw * 1920 / 1080));
  overflow:hidden;background:var(--claro-b);
}
@supports (height:100svh){
  #app{width:min(100vw, calc(100svh * 1080 / 1920));height:min(100svh, calc(100vw * 1920 / 1080))}
}
#app{--u:calc(min(100vw, 100svh * 1080 / 1920) / 1080)}

/* estas pantallas terminan en el pie negro; las oscuras van grises enteras */
body[data-p="modelo"], body[data-p="specs"], body[data-p="color"],
body[data-p="experiencia"], body[data-p="final"]{ --borde-abajo:var(--pie) }
body[data-p="cotiza"], body[data-p="gracias"]{
  --borde-arriba:#6b6b6b; --borde-abajo:#646464 }

/* ---------- pantallas ---------- */
.pantalla{
  position:absolute;inset:0;display:none;
  background:linear-gradient(170deg,var(--claro-a) 0%,#e8e6e4 38%,var(--claro-b) 100%);
}
.pantalla.oscura{background:linear-gradient(160deg,#6b6b6b,#5a5a5a 55%,#646464)}
.pantalla.activa{display:block}
/* La que entra se desliza encima mientras la que sale se desvanece debajo:
   un cruce, no un corte. Antes la vieja desaparecía de golpe y solo la nueva
   se animaba, y eso se sentía a tirones. */
.pantalla.entra{animation:entra .72s var(--ease) both;z-index:2}
.pantalla.entra-atras{animation:entraAtras .72s var(--ease) both;z-index:2}
.pantalla.sale,.pantalla.sale-atras{display:block;z-index:1;pointer-events:none}
.pantalla.sale{animation:sale .55s var(--ease) both}
.pantalla.sale-atras{animation:saleAtras .55s var(--ease) both}
@keyframes entra{from{opacity:0;transform:translateX(4%)}to{opacity:1;transform:none}}
@keyframes entraAtras{from{opacity:0;transform:translateX(-4%)}to{opacity:1;transform:none}}
@keyframes sale{to{opacity:0;transform:translateX(-3%)}}
@keyframes saleAtras{to{opacity:0;transform:translateX(3%)}}

/* ---------- carga ---------- */
#carga{position:fixed;inset:0;z-index:99;display:grid;place-items:center;
  background:linear-gradient(170deg,var(--claro-a),var(--claro-b));transition:opacity .5s .1s}
#carga.fuera{opacity:0;pointer-events:none}
.carga-in{display:flex;flex-direction:column;align-items:center;gap:26px}
.marca{width:110px;opacity:.9;animation:latir 1.8s ease-in-out infinite}
@keyframes latir{50%{opacity:.35}}
.carga-barra{width:150px;height:2px;background:rgba(0,0,0,.12);overflow:hidden;border-radius:2px}
.carga-barra i{display:block;height:100%;width:0;background:var(--tinta);transition:width .3s}

/* ---------- barra superior ---------- */
.barra{position:absolute;top:calc(56*var(--u));left:calc(48*var(--u));right:calc(48*var(--u));
  z-index:6;display:flex;align-items:center;justify-content:space-between;gap:calc(20*var(--u))}
.barra.sola{justify-content:flex-start}
.barra-logo{width:calc(300*var(--u));height:auto}
.barra.clara .barra-logo{filter:brightness(0) invert(1)}
.nav{width:calc(64*var(--u));height:calc(64*var(--u));color:var(--tinta);flex:0 0 auto;
  transition:transform .3s var(--ease),opacity .3s}
.barra.clara .nav{color:#fff}
.nav svg{width:100%;height:100%}
.nav.atras{transform:scaleX(-1)}
.nav:active{opacity:.5}
.nav:hover{transform:scale(1.08)}
.nav.atras:hover{transform:scaleX(-1) scale(1.08)}
.nav.hueco{visibility:hidden}

/* ---------- pie ---------- */
.pie{position:absolute;left:0;right:0;bottom:0;z-index:6;height:calc(180*var(--u));
  display:grid;place-items:center;background:var(--pie);color:#fff;text-align:center;
  font-family:'Geely',sans-serif;font-size:calc(34*var(--u));line-height:1.18;letter-spacing:.02em}

/* ---------- indicador de paso ---------- */
/* Medido sobre el PSD: círculo de 109, el número en GEELY Bold de 70 (cap de
   49 px), 25 de aire al texto, texto en Inter Medium de 34 con 1.2 de
   interlínea, y el bloque termina 291 arriba del borde. */
.paso{position:absolute;left:0;right:0;bottom:calc(291*var(--u));z-index:5;text-align:center}
.paso.arriba{bottom:auto;top:calc(176*var(--u))}
.paso-num{display:grid;place-items:center;margin:0 auto calc(25*var(--u));
  width:calc(109*var(--u));height:calc(109*var(--u));border:calc(2.5*var(--u)) solid var(--tinta);
  border-radius:50%;font-family:'Geely',sans-serif;font-size:calc(70*var(--u));line-height:1;
  /* la tinta del "1" queda 5 px alta con el centrado de la caja de línea: el
     padding la baja (cada px de padding la corre medio px) hasta el centro */
  padding-top:calc(14*var(--u))}
.paso p{font-size:calc(34*var(--u));line-height:1.2;color:var(--tinta)}

/* ============ HOME ============ */
[data-p="home"]{background:url(../img/gradients/fondo.webp?v=24942bb) center/cover no-repeat}
/* las dos rayitas que trae el arte arriba: 123×6 en y=99 y 101×6 en y=114 */
/* Las dos rayitas de la portada son un botón: abren el QR al Instagram de
   Geely Honduras. La caja de toque es mucho más grande que las rayitas, que
   siguen en y=99 y y=114 como en el PSD. */
.home-lineas{position:absolute;left:50%;top:calc(50*var(--u));translate:-50% 0;
  width:calc(320*var(--u));height:calc(130*var(--u));z-index:3}
.home-lineas:before,.home-lineas:after{content:'';position:absolute;left:50%;translate:-50% 0;
  height:calc(6*var(--u));background:var(--tinta);border-radius:calc(3*var(--u))}
.home-lineas:before{top:calc(49*var(--u));width:calc(123*var(--u))}
.home-lineas:after{top:calc(64*var(--u));width:calc(101*var(--u))}
.home-lineas:active:before,.home-lineas:active:after{opacity:.5}
.qr{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(236,238,240,.97);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.qr.abierto{opacity:1;pointer-events:auto}
.qr-caja{display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(36*var(--u));
  padding:0 calc(80*var(--u));transform:translateY(calc(30*var(--u)));transition:transform .45s var(--ease)}
.qr.abierto .qr-caja{transform:none}
.qr-caja h2{font-family:'Geely',sans-serif;font-size:calc(60*var(--u));line-height:1.1;letter-spacing:.03em;color:var(--tinta)}
.qr-caja h2 small{display:block;font-size:calc(30*var(--u));letter-spacing:.22em;margin-bottom:calc(20*var(--u));color:var(--tinta-suave)}
.qr-caja img{width:calc(560*var(--u));height:calc(560*var(--u));display:block;background:#fff;
  padding:calc(30*var(--u));border-radius:calc(30*var(--u));box-shadow:0 calc(14*var(--u)) calc(44*var(--u)) rgba(0,0,0,.14)}
.qr-caja p{font-size:calc(30*var(--u));line-height:1.35;color:var(--tinta-suave);max-width:calc(640*var(--u))}
.qr-cuenta{font-family:'Geely',sans-serif;font-size:calc(36*var(--u));letter-spacing:.06em;color:var(--tinta)}
.qr-cerrar{position:absolute;top:calc(76*var(--u));right:calc(64*var(--u));width:calc(84*var(--u));height:calc(84*var(--u));
  border-radius:50%;border:calc(2.5*var(--u)) solid var(--tinta);display:flex;align-items:center;justify-content:center;color:var(--tinta)}
.qr-cerrar svg{width:calc(30*var(--u));height:calc(30*var(--u));stroke:currentColor;stroke-width:3;stroke-linecap:round;fill:none}
.centro{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding-top:calc(302*var(--u))}   /* el arte centra el bloque en y=1111, no en 960 */
.home-marca{width:calc(430*var(--u))}
.home-titulo{font-family:'Geely',sans-serif;font-size:calc(104*var(--u));letter-spacing:.06em;
  margin-top:calc(16*var(--u));line-height:1}
.home-sub{font-family:'Geely',sans-serif;font-size:calc(91*var(--u));line-height:.98;
  letter-spacing:.005em;margin-top:calc(26*var(--u))}
.entrar{margin-top:calc(274*var(--u));display:flex;flex-direction:column;align-items:center;
  gap:calc(26*var(--u));color:var(--tinta)}   /* 274 del título a la flecha, como el PSD */
.entrar svg{width:calc(83*var(--u));height:calc(83*var(--u));animation:respira 2.6s ease-in-out infinite}
@keyframes respira{50%{transform:scale(1.09)}}
.entrar span{font-size:calc(33*var(--u));font-weight:500;line-height:1.28}
.entrar:active{opacity:.55}
.home-jaar{position:absolute;bottom:calc(98*var(--u));left:50%;translate:-50% 0;
  width:calc(237*var(--u))}

/* ============ 1 · MODELOS ============ */
/* El bottom deja libre el indicador de paso: los tres carros tienen que caber
   arriba de el. Si se agrandan las fotos y la suma de los bloques pasa del
   alto del contenedor, space-evenly reparte hueco negativo y el ultimo carro
   se sube encima del circulo. */
.modelos{position:absolute;top:calc(200*var(--u));left:0;right:0;bottom:calc(520*var(--u));
  display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}
.modelo{width:100%;text-align:center;transition:transform .45s var(--ease),opacity .3s}
.modelo:active{transform:scale(.97)}
/* los tres logos van a la misma ALTURA (24 px en el arte), no al mismo ancho:
   cada uno tiene su proporción y con el ancho fijo el GX3 PRO salía enorme */
.modelo img.nombre{height:calc(24*var(--u));width:auto;margin:0 auto calc(14*var(--u))}
.modelo img.foto{margin:0 auto}   /* el ancho lo pone JS, proporcional al largo real */
.modelo.elegido img.foto{animation:saltito .5s var(--ease)}
@keyframes saltito{50%{transform:scale(1.05)}}

/* ============ SPECS ============ */
/* Como en el arte: fondo neutro, el nombre oscuro, el carro grande y un panel
   de color de borde RECTO que arranca en y=939 con el carro montado encima.
   El panel es el gradiente de Geely recortado exactamente como en el PSD. */
[data-p="specs"]{background:url(../img/gradients/fondo.webp?v=24942bb) center/cover no-repeat}
.specs-panel{position:absolute;left:0;right:0;top:calc(695*var(--u));bottom:0;z-index:1;
  background-size:cover;background-position:center top}
.specs-nombre{position:absolute;top:calc(286*var(--u));left:50%;translate:-50% 0;
  width:calc(796*var(--u));z-index:3}
/* El bloque de specs va más arriba que en el PSD (el cliente pidió llenar el
   vacío bajo la cabecera y despegar los textos del pie) y además el carro va
   separado del botón "Ver specs" y este de los textos: logo 286 (PSD 530),
   botón 414, carro 456 (PSD 700), panel 695 (PSD 939), "Ver specs" 1159, y
   textos desde 1248 (PSD 1368). Entre el carro más alto (GX3) y el botón
   quedan 40 px, y 40 entre el botón y los textos.
   En el PSD el logo del GX3 PRO va más chico y un poco más arriba (627 de ancho,
   y=513) que los otros dos, que miden 796 en y=530. */
[data-p="specs"][data-modelo="gx3pro"] .specs-nombre{top:calc(269*var(--u));width:calc(627*var(--u))}
.specs-carro{position:absolute;top:calc(456*var(--u));left:50%;translate:-50% 0;
  width:calc(1130*var(--u));z-index:2}
/* Arranca mostrando el carro; los specs se despliegan con el botón de abajo.
   El llamado a personalizar va en mayúscula y arriba del carro, en el hueco
   entre el logo del modelo y el techo (el cliente lo pidió "arriba del carro"). */
.specs-cta{position:absolute;left:50%;translate:-50% 0;top:calc(414*var(--u));z-index:4;
  background:#fff;color:var(--tinta);border-radius:calc(999*var(--u));
  padding:calc(19*var(--u)) calc(48*var(--u));font-size:calc(24*var(--u));font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 calc(4*var(--u)) calc(16*var(--u)) rgba(0,0,0,.18);
  transition:transform .25s var(--ease)}
.specs-cta{display:inline-flex;align-items:center;gap:calc(16*var(--u))}
.specs-botones{position:absolute;left:0;right:0;top:calc(1159*var(--u));z-index:4;
  display:flex;justify-content:center}
.specs-cta svg{width:calc(38*var(--u));height:calc(38*var(--u))}
.specs-cta:active{transform:scale(.97)}
.specs-ver{display:inline-flex;align-items:center;gap:calc(14*var(--u));color:#fff;
  border:calc(2*var(--u)) solid rgba(255,255,255,.85);border-radius:calc(999*var(--u));
  padding:calc(11*var(--u)) calc(28*var(--u));font-size:calc(19*var(--u));font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}
.specs-ver svg{width:calc(22*var(--u));height:calc(12*var(--u));transition:transform .35s var(--ease)}
.specs-ver [data-abierto]{display:none}
.abierto .specs-ver [data-cerrado]{display:none}
.abierto .specs-ver [data-abierto]{display:inline}
.abierto .specs-ver svg{transform:rotate(180deg)}
.specs-texto{position:absolute;left:calc(70*var(--u));right:calc(70*var(--u));
  top:calc(1248*var(--u));z-index:4;color:#fff}
.specs-fila{display:grid;grid-template-columns:1fr 1fr;gap:calc(46*var(--u))}
/* tamaños del arte: títulos GEELY de 28, cuerpo Inter de 23 */
.specs-texto h3{font-family:'Geely',sans-serif;font-size:calc(28*var(--u));
  letter-spacing:.02em;margin-bottom:calc(8*var(--u))}
.specs-texto p,.specs-texto li{font-size:calc(23*var(--u));line-height:1.4;font-weight:400}
.specs-texto b{font-weight:700}
.specs-texto ul{list-style:none;margin-top:calc(2*var(--u))}
.specs-texto li{position:relative;padding-left:calc(24*var(--u))}
.specs-texto li:before{content:'';position:absolute;left:calc(7*var(--u));top:calc(12*var(--u));
  width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:#fff}
.specs-tech{margin-top:calc(34*var(--u));text-align:center;padding:0 calc(40*var(--u))}
/* los bloques de texto entran escalonados al desplegar */
.specs-texto > *{opacity:0;transform:translateY(calc(26*var(--u)))}
[data-p="specs"].abierto .specs-fila{animation:sube .6s .05s var(--ease) forwards}
[data-p="specs"].abierto .specs-tech{animation:sube .6s .22s var(--ease) forwards}
[data-p="specs"].activa .specs-carro{animation:entraCarro .9s var(--ease) both}
[data-p="specs"].activa .specs-nombre{animation:sube .8s .1s var(--ease) forwards;opacity:0}
[data-p="specs"].activa .specs-cta{animation:sube .8s .3s var(--ease) both}
[data-p="specs"].activa .specs-botones{animation:sube .8s .45s var(--ease) both}
@keyframes sube{to{opacity:1;transform:none}}
@keyframes entraCarro{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

/* ============ 2 · COLOR ============ */
.color-escena{position:absolute;top:calc(520*var(--u));left:0;right:0;height:calc(820*var(--u))}
.color-escena .capa{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:calc(1020*var(--u));opacity:0;transition:opacity .45s linear}
.color-escena .capa.ver{opacity:1}
.muestras{position:absolute;left:0;right:0;bottom:calc(430*var(--u));z-index:5;
  display:flex;justify-content:center;gap:calc(34*var(--u))}
.muestra{width:calc(62*var(--u));height:calc(62*var(--u));border-radius:50%;position:relative;
  transition:transform .35s var(--ease);box-shadow:0 calc(3*var(--u)) calc(10*var(--u)) rgba(0,0,0,.18)}
.muestra:hover{transform:scale(1.12)}
.muestra.sel{transform:scale(1.16)}
.muestra.sel:after{content:'';position:absolute;inset:calc(-11*var(--u));border-radius:50%;
  border:calc(2*var(--u)) solid var(--tinta)}
[data-p="color"].sin-nombres .color-nombre{display:none}
.color-nombre{position:absolute;left:0;right:0;bottom:calc(368*var(--u));z-index:5;
  text-align:center;font-size:calc(27*var(--u));font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-suave)}

/* ============ 3 · EXPERIENCIA ============ */
.terrenos{position:absolute;inset:0}
/* Los fondos son los del arte del cliente, ya compuestos: foto arriba y piso
   limpio abajo. Las tres capas van encimadas y solo cambia la opacidad.
   pointer-events:none porque una capa con opacity:0 igual recibe los toques:
   sin esto, tocar el fondo se lo comia la ultima del DOM y saltaba al ultimo. */
.terreno{position:absolute;inset:0;background-size:cover;background-position:center top;
  opacity:0;pointer-events:none;transition:opacity .75s var(--ease)}
.terreno.ver{opacity:1}
.exp-titulo{position:absolute;top:calc(168*var(--u));left:0;right:0;z-index:5;text-align:center}
.exp-titulo h2{font-family:'Geely',sans-serif;font-size:calc(58*var(--u));letter-spacing:.03em}
.seleccionar{position:absolute;left:50%;translate:-50% 0;top:calc(455*var(--u));z-index:5;
  padding:calc(9*var(--u)) calc(30*var(--u));
  border-radius:calc(8*var(--u));background:rgba(255,255,255,.82);color:var(--tinta);
  font-size:calc(19*var(--u));font-weight:600;letter-spacing:.18em;
  box-shadow:0 calc(3*var(--u)) calc(12*var(--u)) rgba(0,0,0,.12)}
.seleccionar:active{transform:scale(.96)}

/* el carro va donde lo pone el arte: sobre la franja donde la foto se vuelve piso */
.pista{position:absolute;top:calc(880*var(--u));left:0;right:0;height:calc(620*var(--u));
  z-index:4;overflow:hidden}
.coche{position:absolute;top:50%;left:50%;width:calc(980*var(--u));
  transform:translate(-50%,-50%);will-change:transform,filter}
.coche img{width:100%}
/* La rueda es su propia imagen: un recorte circular de la foto, con el borde
   del hule como límite. Al girar, el círculo se mapea sobre sí mismo, así que
   nunca entra en cuadro nada de fuera de la rueda.
   No lleva máscara: el hueco del guardabarros es más grande que la llanta, así
   que la rueda está entera en la foto y no hay nada que recortar ni rellenar. */
.rueda{position:absolute;pointer-events:none}
.rueda b{position:absolute;inset:0;background-repeat:no-repeat;will-change:transform}

/* El selector de terreno. En el tótem la gente llega sin que nadie le
   explique nada, así que va con la foto de cada lugar y su nombre: se
   entiende sin leer, se ve cuántos hay, y el blanco de toque pasa de los
   13 px que medía un punto a 186×116. Va arriba, bajo el nombre, para que el
   carro quede donde lo pone el arte. */
.exp-minis{position:absolute;left:0;right:0;top:calc(262*var(--u));z-index:5;
  display:flex;justify-content:center;gap:calc(30*var(--u))}
.mini{width:calc(186*var(--u));display:flex;flex-direction:column;align-items:center;
  gap:calc(15*var(--u));color:var(--tinta-suave);transition:color .35s var(--ease)}
.mini i{display:block;width:100%;height:calc(116*var(--u));
  border-radius:calc(12*var(--u));background-size:cover;background-position:center;
  /* el velo apaga la miniatura sin depender de lo que tenga detrás, y el anillo
     va de sombra para que no empuje la caja como lo haría un border */
  box-shadow:inset 0 0 0 calc(999*var(--u)) rgba(237,238,238,.52),
             0 0 0 calc(1*var(--u)) rgba(0,0,0,.13);
  transition:box-shadow .35s var(--ease),transform .25s var(--ease)}
.mini span{font-size:calc(18*var(--u));font-weight:600;letter-spacing:.12em;line-height:1}
.mini.sel{color:var(--tinta)}
.mini.sel i{box-shadow:0 0 0 calc(3*var(--u)) var(--tinta)}
.mini:active i{transform:scale(.96)}

/* ============ FINAL ============ */
.final-terreno{position:absolute;inset:0;background-size:cover;background-position:center top}
.final-nombre{position:absolute;top:calc(262*var(--u));left:50%;translate:-50% 0;
  width:calc(640*var(--u));z-index:4}
.final-chips{position:absolute;top:calc(420*var(--u));left:0;right:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:calc(14*var(--u))}
.chip{background:rgba(255,255,255,.78);border-radius:calc(9*var(--u));
  padding:calc(12*var(--u)) calc(34*var(--u));font-size:calc(26*var(--u));
  letter-spacing:.1em;color:var(--tinta-suave);white-space:nowrap}
.chip b{color:var(--tinta);font-weight:700}
.chip .punto{display:inline-block;width:.9em;height:.9em;border-radius:50%;vertical-align:-.1em;
  margin-left:.25em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.final-carro{position:absolute;top:calc(596*var(--u));left:50%;translate:-50% 0;
  width:calc(1080*var(--u));z-index:3}
.final-titulo{position:absolute;left:0;right:0;bottom:calc(400*var(--u));z-index:4;
  text-align:center;font-family:'Geely',sans-serif;font-size:calc(92*var(--u));line-height:1.02;
  letter-spacing:.005em}
.hazlo{position:absolute;left:50%;translate:-50% 0;bottom:calc(272*var(--u));z-index:5;
  background:rgba(150,150,150,.55);color:#fff;border-radius:calc(11*var(--u));
  padding:calc(17*var(--u)) calc(52*var(--u));font-size:calc(31*var(--u));
  font-weight:600;letter-spacing:.1em;backdrop-filter:blur(calc(6*var(--u)))}
.hazlo:active{transform:scale(.97)}
/* la referencia pide que el carro llegue girando hasta su posición final */
[data-p="final"].activa .final-carro{animation:llega 1.05s var(--ease) both}
[data-p="final"].activa .final-nombre{animation:sube .8s .35s var(--ease) both}
[data-p="final"].activa .final-chips{animation:sube .8s .5s var(--ease) both}
[data-p="final"].activa .final-titulo{animation:sube .8s .62s var(--ease) both}
[data-p="final"].activa .hazlo{animation:sube .8s .78s var(--ease) both}
@keyframes llega{
  from{opacity:0;transform:translateX(calc(34*var(--u))) scale(.88) rotate(1.2deg)}
  to{opacity:1;transform:none}}

/* ============ COTIZA ============ */
.cotiza{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;color:#f0f0f0;padding:0 calc(90*var(--u))}
.cotiza h2{font-family:'Geely',sans-serif;font-size:calc(102*var(--u));line-height:1.04;
  letter-spacing:.01em;color:#eee}
.cotiza label{margin-top:calc(62*var(--u));font-size:calc(31*var(--u));letter-spacing:.03em;color:#ddd}
.cotiza label b{font-weight:700;color:#fff}
.baja{width:calc(40*var(--u));margin-top:calc(10*var(--u));color:#e4e4e4}
.cotiza input{margin-top:calc(18*var(--u));width:100%;height:calc(104*var(--u));
  border:calc(2*var(--u)) solid rgba(255,255,255,.85);border-radius:calc(52*var(--u));
  background:transparent;color:#fff;text-align:center;font-size:max(16px, calc(34*var(--u)));outline:none;
  transition:border-color .3s,background .3s}
/* max(16px): con letra menor a 16px Safari hace zoom al enfocar el campo */
.cotiza input:focus{background:rgba(255,255,255,.1)}
.cotiza input.mal{border-color:#ff8f8f;animation:tembleque .4s}
@keyframes tembleque{25%{transform:translateX(calc(-9*var(--u)))}75%{transform:translateX(calc(9*var(--u)))}}
.error{min-height:calc(40*var(--u));margin-top:calc(12*var(--u));font-size:calc(24*var(--u));color:#ffbcbc}
.enviar{margin-top:calc(10*var(--u));background:rgba(255,255,255,.9);color:#3a3a3a;
  border-radius:calc(52*var(--u));padding:calc(19*var(--u)) calc(76*var(--u));
  font-size:calc(31*var(--u));font-weight:700;letter-spacing:.12em}
.enviar:active{transform:scale(.97)}
.cotiza-logo{position:absolute;bottom:calc(120*var(--u));left:50%;translate:-50% 0;
  width:calc(420*var(--u));filter:brightness(0) invert(1);opacity:.92}

/* ============ GRACIAS ============ */
.tick{width:calc(150*var(--u));height:calc(150*var(--u));fill:none;stroke:#fff;
  stroke-width:calc(3*var(--u));stroke-linecap:round;stroke-linejoin:round}
.tick circle{stroke-dasharray:151;stroke-dashoffset:151;opacity:.4}
.tick path{stroke-dasharray:40;stroke-dashoffset:40}
[data-p="gracias"].activa .tick circle{animation:traza .9s .2s var(--ease) forwards}
[data-p="gracias"].activa .tick path{animation:traza .5s .8s var(--ease) forwards}
@keyframes traza{to{stroke-dashoffset:0}}
.gracias-t{font-family:'Geely',sans-serif;font-size:calc(86*var(--u));color:#fff;
  margin-top:calc(30*var(--u))}
.gracias-p{margin-top:calc(18*var(--u));font-size:calc(30*var(--u));line-height:1.6;color:#e6e6e6}
.gracias-p b{font-weight:700;color:#fff}
.gracias-recap{margin-top:calc(34*var(--u));display:flex;flex-direction:column;
  gap:calc(10*var(--u));font-size:calc(26*var(--u));color:#dcdcdc}
.gracias-recap span{letter-spacing:.06em}
.gracias-recap b{color:#fff}
#denuevo{position:static;translate:0;margin-top:calc(46*var(--u))}
#denuevo:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}