se usa como recurso de énfasis en los titulares (texto en menta),
NO como subrayado. La regla estaba limitada a `.hero h1 u`, así que en
beneficios, personal-shopper y rastrear el navegador aplicaba su subrayado
por defecto — y el espacio entre palabras salía subrayado, apareciendo
como un "_" suelto en medio del titular. */
h1 u,h2 u,h3 u{text-decoration:none;color:var(--mint);}
.hero__sub{margin-top:24px;max-width:480px;color:#CDD5E7;font-size:17px;line-height:1.7;}
.hero__cta{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap;}
/* Curva de transición entre el hero (oscuro) y lo que sigue (claro) */
.hero__wave{position:absolute;left:0;right:0;bottom:-1px;z-index:2;line-height:0;height:clamp(34px,5.2vw,72px);pointer-events:none;}
.hero__wave svg{width:100%;height:100%;display:block;}
.hero__wave path{fill:var(--paper);}
/* -------------------------------------------------------------- Marquee */
/* (marquee de nombres sustituido por la franja de marcas: ver FRANJA DE MARCAS al final) */
/* ---------------------------------------------------- El viaje (firma) */
.journey{background:var(--paper);position:relative;overflow:hidden;}
.journey__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;min-height:66vh;}
.map{position:relative;}
.map svg{width:100%;height:auto;overflow:visible;}
.map__base{fill:none;stroke:var(--line);stroke-width:2.5;stroke-dasharray:7 9;stroke-linecap:round;}
.map__live{fill:none;stroke:var(--mint);stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 3px 10px rgba(47,209,128,.45));}
.map__city{fill:var(--navy-800);}
.map__halo{fill:rgba(47,209,128,.16);}
.map__label{font-family:var(--font-display);font-size:14px;font-weight:600;fill:var(--navy-800);letter-spacing:-.02em;}
.map__sub{font-family:var(--font-body);font-size:11.5px;fill:var(--ink-faint);}
.plane{fill:var(--navy-800);}
.plane--b{fill:var(--navy-600);}
.milestones{display:flex;flex-direction:column;gap:8px;}
.ms{
display:flex;gap:16px;padding:16px 18px;border-radius:var(--radius);
border:1px solid transparent;opacity:1;transition:opacity .5s var(--ease-out),background .5s var(--ease-out),border-color .5s var(--ease-out),transform .5s var(--ease-out);
}
/* Legibilidad: los pasos inactivos NO se apagan casi (antes .34 = ilegible).
La jerarquía la marca la tarjeta activa, no el texto apagado. */
html.js .ms{opacity:.88;}
.ms.is-on{opacity:1;background:#fff;border-color:var(--line);box-shadow:0 14px 40px rgba(12,24,60,.07);transform:translateX(6px);}
.ms__ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--mist);color:var(--ink-faint);font-size:20px;flex-shrink:0;transition:background .5s ease,color .5s ease;}
.ms.is-on .ms__ic{background:var(--navy-800);color:var(--mint);}
.ms h3{margin-bottom:3px;}
.ms p{font-size:14px;color:var(--ink-soft);line-height:1.55;}
/* ================= EL VIAJE — versión NOCHE (Tierra desde el espacio) ==== */
.journey--night{background:var(--navy-900);color:#fff;padding:clamp(60px,7vw,96px) 0;}
.journey--night .journey__inner{grid-template-columns:.95fr 1.05fr;}
/* El panel es vertical (760x900). Lo limitamos por altura de viewport para que
la sección completa quepa en pantalla mientras está fijada (pin). */
.journey--night .earth-wrap{width:100%;max-width:52vh;margin-inline:auto;}
.journey--night .earth{width:100%;}
.journey--night .eyebrow{color:var(--mint);}
.journey--night .eyebrow::before{background:var(--mint);}
.journey--night h2{color:#fff;}
.journey--night .lede{color:#A9B4D2;}
/* Campo de estrellas del fondo */
.journey--night::before{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.75;
background-image:
radial-gradient(1.6px 1.6px at 8% 14%,#fff,transparent),
radial-gradient(1.2px 1.2px at 22% 62%,#CFE0FF,transparent),
radial-gradient(1.4px 1.4px at 15% 88%,#fff,transparent),
radial-gradient(1px 1px at 37% 26%,#BFD4FF,transparent),
radial-gradient(1.5px 1.5px at 52% 9%,#fff,transparent),
radial-gradient(1.1px 1.1px at 64% 74%,#CFE0FF,transparent),
radial-gradient(1.3px 1.3px at 78% 20%,#fff,transparent),
radial-gradient(1px 1px at 88% 55%,#BFD4FF,transparent),
radial-gradient(1.5px 1.5px at 94% 84%,#fff,transparent),
radial-gradient(1.1px 1.1px at 45% 92%,#CFE0FF,transparent),
radial-gradient(1.2px 1.2px at 70% 40%,#fff,transparent),
radial-gradient(1px 1px at 30% 44%,#AFC6F5,transparent);
animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.5;}to{opacity:.9;}}
/* Envoltorio del planeta: aquí viven el halo atmosférico y el anillo orbital,
detrás del panel recortado. isolation:isolate crea un contexto de apilado
propio para que z-index:-1 no se escape detrás del fondo de la sección. */
.earth-wrap{position:relative;isolation:isolate;}
.earth__halo{
position:absolute;inset:-16%;z-index:-1;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(47,209,128,.3),rgba(70,140,255,.12) 55%,transparent 74%);
filter:blur(38px);animation:haloPulse 5.5s ease-in-out infinite;
}
@keyframes haloPulse{0%,100%{opacity:.65;}50%{opacity:1;}}
.orbit{
position:absolute;left:50%;top:50%;width:120%;height:110%;z-index:-1;pointer-events:none;
transform:translate(-50%,-50%);border:1px dashed rgba(159,233,196,.18);border-radius:50%;
animation:orbitSpin 50s linear infinite;
}
.orbit i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 9px 2px rgba(47,209,128,.75);}
.orbit i:nth-child(1){top:-2.5px;left:50%;margin-left:-2.5px;}
.orbit i:nth-child(2){bottom:-2.5px;left:50%;margin-left:-2.5px;opacity:.55;}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
/* Estrella fugaz ocasional: detalle discreto de ambiente, se repite cada ~9s */
.shooting-star{position:absolute;top:14%;left:6%;width:2px;height:2px;z-index:1;pointer-events:none;
background:#fff;border-radius:50%;box-shadow:0 0 6px 2px rgba(255,255,255,.85);
animation:shootAcross 9s ease-in infinite;animation-delay:2.5s;opacity:0;}
.shooting-star::before{
content:"";position:absolute;top:50%;right:0;width:86px;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.9));transform:translateY(-50%);
}
/* Con el mapa real cargado la estrella fugaz cruza por encima de tierra firme
y se lee como un arañazo, no como cielo. Solo se conserva sobre el SVG. */
html.mapa-on .shooting-star{ display:none; }
@keyframes shootAcross{
0%{transform:translate(0,0);opacity:0;}
4%{opacity:1;}
20%{transform:translate(300px,170px);opacity:0;}
100%{transform:translate(300px,170px);opacity:0;}
}
/* Panel del planeta */
.earth{position:relative;border-radius:26px;overflow:hidden;box-shadow:0 44px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);}
.earth svg{width:100%;height:auto;display:block;}
.earth__sheen{
position:absolute;inset:0;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;
background:radial-gradient(120% 90% at 18% 10%,rgba(255,255,255,.16),transparent 55%);
}
.earth__rim{
position:absolute;inset:0;pointer-events:none;border-radius:26px;
box-shadow:inset 0 0 100px rgba(6,12,36,.85),inset 0 0 40px rgba(70,140,255,.14);
}
/* Mapa vectorial: continentes y luces de ciudad (nítido a cualquier tamaño) */
.land path{fill:#14264F;stroke:rgba(126,186,255,.42);stroke-width:1.4;stroke-linejoin:round;}
.lights circle{fill:#FFE3A6;}
/* Nubes: capa atmosférica que se desplaza muy despacio sobre el mapa */
.clouds ellipse{fill-opacity:.14;transform-box:fill-box;transform-origin:center;animation:cloudDrift 55s ease-in-out infinite alternate;}
.clouds ellipse:nth-child(2){animation-duration:70s;animation-direction:alternate-reverse;}
.clouds ellipse:nth-child(3){animation-duration:85s;}
.clouds ellipse:nth-child(4){animation-duration:64s;animation-direction:alternate-reverse;}
@keyframes cloudDrift{from{transform:translateX(-36px);}to{transform:translateX(36px);}}
/* Estela del avión: brillo ancho y difuso justo detrás de la ruta viva */
.map__trail{fill:none;stroke:var(--mint);stroke-width:11;stroke-linecap:round;opacity:.16;filter:blur(7px);}
/* Ruta y ciudades sobre el planeta */
.journey--night .map__base{stroke:rgba(255,255,255,.22);stroke-width:3;stroke-dasharray:8 11;}
.journey--night .map__live{stroke:var(--mint);stroke-width:4.5;filter:drop-shadow(0 0 10px rgba(47,209,128,.85));}
.journey--night .map__city{fill:#fff;}
.journey--night .map__halo{fill:rgba(47,209,128,.22);animation:cityPulse 2.8s ease-out infinite;transform-origin:center;transform-box:fill-box;}
.journey--night .map__halo--b{animation-delay:1.4s;}
@keyframes cityPulse{0%{transform:scale(.62);opacity:.85;}70%{transform:scale(1.5);opacity:0;}100%{transform:scale(1.5);opacity:0;}}
.journey--night .map__label{fill:#fff;font-size:24px;}
/* Blanco al 52 %, no #93A0C2. Ese azul violaceo era el unico color de la
seccion fuera de la paleta; en el mapa real la etiqueta de pais se
retiro entera, y aqui —el respaldo SVG— se neutraliza. */
.journey--night .map__sub{fill:rgba(255,255,255,.52);font-size:17px;}
.journey--night .plane{fill:var(--mint);filter:drop-shadow(0 0 7px rgba(47,209,128,.9));}
.journey--night .plane--b{fill:var(--mint-tint);}
/* Hitos sobre fondo oscuro — legibles siempre */
.journey--night .ms h3{color:#F0F3FA;}
.journey--night .ms p{color:#9FA9C6;}
.journey--night .ms__ic{background:rgba(255,255,255,.08);color:#93A0C2;}
.journey--night .ms.is-on{
background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.journey--night .ms.is-on .ms__ic{background:var(--mint);color:var(--navy-900);}
.journey--night .ms.is-on p{color:#B9C3DC;}
@media(max-width:1000px){
.journey--night .journey__inner{grid-template-columns:1fr;}
/* Antes 420px. En telefono el mapa ya ocupa el ancho util (331px en un
viewport de 375), asi que el tope solo actuaba en tablet. Sin tope
ninguno, medido en 768px, el mapa se iba a 724x857 y estiraba la
seccion 348px: demasiado. 520px deja el telefono igual y corrige la
tablet, que es donde el 420 se quedaba corto. */
.journey--night .earth-wrap{max-width:520px;}
/* ORDEN NARRATIVO: titular -> MAPA -> pasos.
En una sola columna el mapa iba PRIMERO: se veia antes de saber que
era y la animacion arrancaba con el titular aun sin leer. Pero
mandarlo al final tampoco vale —queda detras de las cuatro tarjetas,
tan abajo que cuando aparece el viaje ya va por la mitad—. El sitio
correcto es en medio: primero se explica, luego se ve, luego se
detalla.
La columna de texto es un solo con el titular Y los pasos
dentro, asi que `order` no basta: hace falta `display:contents` para
que sus hijos sean celdas de la rejilla y se puedan reordenar. Ese
div no pinta nada (ni fondo ni borde), asi que disolverlo es seguro.
El HTML no cambia: en lectura lineal el mapa sigue primero, despues
de que su
ya haya dicho de que va. */
.journey--night .journey__inner > div:not(.earth-wrap){display:contents;}
.journey--night .journey__inner > .earth-wrap{order:2;}
.journey--night .journey__inner .eyebrow,
.journey--night .journey__inner h2,
.journey--night .journey__inner .lede{order:1;}
.journey--night .journey__inner .milestones{order:3;}
/* gap:0 porque con display:contents la separacion la siguen dando los
margenes propios de cada bloque; un gap ademas los duplicaria. */
.journey--night .journey__inner{gap:0;}
.journey--night .journey__inner > .earth-wrap{margin-block:6px 30px;}
}
/* El viaje — segunda pasada: geografía abierta, atmósfera estática.
(Ya no hay pin-spacer: el recorrido lo da .journey-pista, ver QA GLOBAL.) */
.journey--night::before{opacity:.18;animation:none;}
.journey--night .orbit,
.journey--night .shooting-star,
.journey--night .earth__sheen,
.journey--night .earth__rim{display:none;}
.journey--night .earth__halo{
inset:8% 0;filter:none;animation:none;
background:radial-gradient(ellipse at 52% 48%,rgba(47,209,128,.055),transparent 68%);
}
.journey--night .earth{border-radius:0;box-shadow:none;overflow:visible;}
.journey--night .earth > svg,
.journey--night .earth > .mapa-real{
-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 89%,transparent);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 89%,transparent);
mask-composite:intersect;
}
.journey--night .land path{fill:#162443;stroke:rgba(228,247,238,.12);}
.journey--night .lights,
.journey--night .clouds{display:none;}
.journey--night .map__halo{animation:none;}
.journey--night .map__live{filter:drop-shadow(0 0 3px rgba(47,209,128,.25));}
.journey--night .plane{filter:none;}
.journey--night .mapa-avion{width:28px;height:28px;filter:drop-shadow(0 2px 3px rgba(47,209,128,.22));}
.journey--night .mapa-avion svg{width:100%;height:100%;}
.journey--night .mapa-credito{bottom:0;right:12px;}
.journey--night .mapa-credito a{color:rgba(255,255,255,.62);}
.journey--night .ms{transform:none;transition:background .2s ease,border-color .2s ease;}
.journey--night .ms.is-on{
transform:none;background:rgba(47,209,128,.055);border-color:rgba(47,209,128,.19);
box-shadow:inset 2px 0 var(--mint);backdrop-filter:none;-webkit-backdrop-filter:none;
}
.journey--night .ms.is-done .ms__ic{color:var(--mint);background:rgba(47,209,128,.075);}
@media(max-width:1000px){
.journey--night .mapa-avion{width:26px;height:26px;}
}
/* ------------------------------------------------------- Personal shopper */
.duo{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center;position:relative;}
.checks{list-style:none;display:flex;flex-direction:column;gap:14px;margin:28px 0 34px;}
.checks li{display:flex;align-items:center;gap:14px;font-size:15.5px;}
.checks .ti{width:38px;height:38px;min-width:38px;min-height:38px;padding:9px;box-sizing:border-box;border-radius:12px;background:var(--mint-tint);color:var(--mint-700);flex:none;}
/* Mancha de color detrás del teléfono, ancla visual de la columna derecha.
right:0, NO -8 %: con -8 % el halo salia del contenedor mas que el margen
del shell y ensanchaba la pagina entre 375 y 1366px (4-70px de scroll
horizontal, tambien en personal-shopper.html). */
.duo::before{
content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:0;
width:min(480px,58vw);height:min(480px,58vw);border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(47,209,128,.15),rgba(47,209,128,.05) 55%,transparent 74%);
filter:blur(6px);
}
.phone{
background:#fff;border-radius:28px;padding:22px 18px;border:1px solid var(--line);
box-shadow:0 30px 70px rgba(12,24,60,.12);max-width:390px;margin-inline:auto;
}
.phone__av{width:34px;height:34px;border-radius:50%;background:var(--navy-800);display:grid;place-items:center;}
.phone__av svg path:first-of-type{fill:var(--mint);}
.phone__av svg path:last-of-type{fill:var(--mint-tint);}
.msgs{display:flex;flex-direction:column;gap:10px;min-height:210px;}
.msg{font-size:14px;padding:11px 15px;border-radius:16px;max-width:82%;line-height:1.5;}
html.js .msg{opacity:0;transform:translateY(12px) scale(.96);}
.msg--in{background:var(--mist);color:var(--ink);align-self:flex-start;border-bottom-left-radius:5px;}
.msg--out{background:var(--mint);color:var(--navy-900);align-self:flex-end;border-bottom-right-radius:5px;font-weight:500;}
/* El "enlace" del chat simulado es un <span>, no un <a>: era enfocable
con teclado sin llevar a ningun sitio. */
.msg a,.msg__link{color:var(--mint-700);font-size:12.5px;}
/* ---------------------------------------------------------------- Bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:54px;}
.tile{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;
display:flex;flex-direction:column; /* para que .tile__foto rellene el sobrante */
position:relative;overflow:hidden;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s ease;
}
.tile:hover{transform:translateY(-5px);box-shadow:0 22px 54px rgba(12,24,60,.1);border-color:transparent;}
.tile::after{
content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:radial-gradient(230px 170px at 100% 0%,var(--tile-accent,rgba(47,209,128,.12)),transparent 70%);
transition:opacity .5s ease;
}
.tile:hover::after{opacity:1;}
.tile .tile__ic{
width:46px;height:46px;min-width:46px;min-height:46px;
padding:12px;box-sizing:border-box;
border-radius:14px;flex:none;
background:var(--mint-tint);color:var(--mint-700);
transition:transform .4s var(--ease-out),background .4s ease,color .4s ease;
}
.tile:hover .tile__ic{transform:scale(1.08) rotate(-4deg);background:var(--mint);color:#fff;}
.tile h3{margin:14px 0 7px;}
.tile p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;}
/* JERARQUIA. Los 6 titulares del bento median exactamente lo mismo, asi que
"Tu casillero gratis en Miami" —que es la conversion principal— pesaba lo
mismo que "Rastreo claro". Se separan en tres niveles: el XL manda, los
anchos son el cuerpo y los pequenos son apoyo. Solo cambia el TAMANO; el
color y el contraste no se tocan, que la legibilidad no se negocia. */
.tile--xl h3{font-size:clamp(21px,1.6vw,26px);letter-spacing:-.025em;}
.tile--xl > p{font-size:15.5px;}
.tile--wide h3{font-size:clamp(18px,1.25vw,20.5px);}
.tile--xl{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;}
.tile--wide{grid-column:span 2;}
.tile--dark{
--tile-accent:rgba(47,209,128,.18);
background:radial-gradient(circle at 2px 2px,rgba(255,255,255,.07) 1.2px,transparent 0) 0 0/18px 18px,var(--navy-800);
border-color:transparent;color:#fff;
}
.tile--dark p{color:#A9B4D2;}
.tile--dark .tile__ic{background:rgba(255,255,255,.09);color:var(--mint);}
.tile--dark:hover .tile__ic{background:var(--mint);color:var(--navy-900);}
.addr{margin-top:auto;background:var(--mist);border:1px dashed var(--line);border-radius:16px;padding:16px 18px;font-size:13.5px;line-height:1.75;}
.addr b{font-family:var(--font-display);display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px;}
.addr span{color:var(--ink);}
.addr em{font-style:normal;color:var(--mint-700);font-weight:600;}
/* ------------------------------------------------- Microinterfaces del bento
Los dos tiles pequenos ("Rastreo claro" y "Precio antes de comprar") eran
los unicos sin nada que mirar en una rejilla donde todo lo demas lleva
fotografia: se leian como huecos aunque estuvieran bien dimensionados.
NO son fotos ni graficos decorativos: son una vista minima del producto
real, hecha con el lenguaje del sitio. Sin datos inventados —ni fechas, ni
dias, ni tracking, ni cifras, ni moneda—, porque nada de eso esta
documentado (ver traigo-business-rules).
`margin-top:auto` las pega al fondo del tile: cualquier altura sobrante de
la fila se convierte en aire entre el parrafo y la microinterfaz, que es
donde se ve deliberado y no como un hueco. */
.mini{
margin-top:auto; padding-top:13px;
border-top:1px solid var(--line-soft);
display:flex; flex-direction:column; gap:7px;
}
/* --- Rastreo: la ruta, no un timeline --- */
.mini__via{display:flex;align-items:center;gap:5px;}
.mini__pt{width:7px;height:7px;border-radius:50%;background:var(--mint-600);flex:none;}
/* El destino aun no se ha alcanzado: hueco, no relleno. */
.mini__pt--off{background:transparent;border:1.5px solid var(--line);}
.mini__lin{flex:1;height:2px;border-radius:2px;background:var(--mint-600);}
.mini__lin--off{background:var(--line);}
.mini__go{width:15px;height:15px;flex:none;color:var(--mint-600);
transform:rotate(41deg); /* la punta del avion de papel mira a 50,9 grados;
girando 41 apunta a lo largo de la linea */}
.mini__pies{display:flex;justify-content:space-between;align-items:center;gap:6px;
font-size:11.5px;line-height:1.2;}
.mini__pies b{font-weight:600;color:var(--ink-soft);}
.mini__pies em{font-style:normal;font-weight:600;color:var(--mint-700);}
/* --- Cotizacion: hereda el aire del bloque .addr del tile grande --- */
.mini--cot b{font-family:var(--font-display);font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-faint);}
.mini__fila{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink-soft);}
/* El puntito guia que lleva del concepto al valor, como en una factura. */
.mini__fila i{flex:1;border-bottom:1px dashed var(--line);transform:translateY(-3px);}
.mini__fila em{font-style:normal;font-weight:600;color:var(--mint-700);white-space:nowrap;}
@media(max-width:400px){
/* En 375px "Costa Rica" y "En camino" se tocaban. */
.mini__pies{font-size:10.5px;gap:4px;}
}
/* -------------------------------------------------------------- Tarjetas */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:52px;}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px;position:relative;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 54px rgba(12,24,60,.1);}
.card .card__ic{font-size:28px;color:var(--navy-800);margin-top:16px;}
.card h3{margin:14px 0 8px;}
.card p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;}
.card__go{position:absolute;top:26px;right:26px;color:#C7CEDD;transition:color .3s ease,transform .3s ease;}
.card:hover .card__go{color:var(--mint-600);transform:translateX(4px);}
/* ----------------------------------------------------------------- CTA */
.cta{position:relative;overflow:hidden;background:var(--navy-900);color:#fff;padding:clamp(80px,9vw,120px) 0;text-align:center;}
.cta__in{position:relative;z-index:2;}
.cta h2{color:#fff;}
.cta p{color:#A9B4D2;font-size:17.5px;margin:18px auto 34px;max-width:520px;}
.cta__row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
/* --------------------------------------------------------- Encabezado pág */
.phead{position:relative;overflow:hidden;background:var(--navy-900);color:#fff;padding:170px 0 clamp(70px,8vw,100px);text-align:center;}
.phead__in{position:relative;z-index:2;}
.phead h1{color:#fff;}
.phead p{color:#A9B4D2;font-size:17.5px;max-width:600px;margin:20px auto 0;}
/* -------------------------------------------------------------- Footer */
.footer{background:var(--navy-900);color:#8B96B8;padding:76px 0 30px;position:relative;overflow:hidden;}
.footer__word{
font-family:var(--font-display);font-weight:700;letter-spacing:-.05em;
font-size:clamp(70px,17vw,210px);line-height:.82;color:rgba(255,255,255,.045);
text-align:center;user-select:none;margin-top:52px;
}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;position:relative;z-index:2;}
.footer__tag{margin-top:15px;font-size:14.5px;max-width:250px;line-height:1.6;}
.fcol h3,.fcol h4{font-family:var(--font-display);color:#fff;font-size:13px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px;}
.fcol a{display:flex;align-items:center;gap:9px;font-size:14.5px;padding:6px 0;transition:color .25s ease,transform .25s ease;}
.fcol a:hover{color:var(--mint);transform:translateX(3px);}
.footer__end{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#8B96B8;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;position:relative;z-index:2;}
/* ---------------------------------------------------------- WhatsApp fab */
.fab{
position:fixed;bottom:24px;right:24px;z-index:78;width:58px;height:58px;border-radius:50%;
background:#25D366;color:#fff;display:grid;place-items:center;font-size:29px;
box-shadow:0 12px 32px rgba(37,211,102,.44);transition:transform .35s var(--ease-out);
}
.fab:hover{transform:scale(1.09) rotate(6deg);}
/* --------------------------------------------------------------- Móvil */
@media(max-width:1000px){
.hero__grid,.journey__inner,.duo{grid-template-columns:1fr;gap:46px;}
.footer__grid{grid-template-columns:1fr 1fr;}
.bento{grid-template-columns:1fr 1fr;}
.tile--xl,.tile--wide{grid-column:span 2;grid-row:auto;}
}
@media(max-width:760px){
.nav__links{display:none;}
.nav__burger{display:block;}
.nav .btn{display:none;}
.hero{padding:140px 0 70px;}
.phead{padding:140px 0 70px;}
.bento{grid-template-columns:1fr;}
.tile--xl,.tile--wide{grid-column:span 1;}
.hero__cta .btn,.cta__row .btn{flex:1;justify-content:center;}
.footer__grid{grid-template-columns:1fr;gap:26px;}
}
/* --------------------------------------------- Movimiento reducido (a11y) */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
.rv{opacity:1;transform:none;}
.word i{transform:none;}
.msg{opacity:1;transform:none;}
.ms{opacity:1;}
.loader{display:none;}
}
/* ==========================================================================
BLOQUE 2 — Accesibilidad, cotizador y FAQ
Añadido en la pasada de conversión. Va al final a propósito: así estas
reglas ganan los empates de especificidad sin tocar el CSS original.
========================================================================== */
/* ------------------------------------------------------- Foco visible
Antes solo existía una regla de foco en todo el archivo (el input de
rastreo). Se define un anillo consistente para teclado en TODA la página.
Dos tonos porque el mint puro no llega a 3:1 sobre blanco (WCAG 2.4.11):
mint-700 sobre fondos claros, mint sobre fondos oscuros. */
:root{ --focus:var(--mint-700); }
:focus{ outline:none; }
:focus-visible{
outline:3px solid var(--focus);
outline-offset:3px;
border-radius:6px;
}
.hero,.journey,.cta,.footer,.phead,.nav,.menu,.tile--dark{ --focus:var(--mint); }
.btn:focus-visible{ outline-offset:4px; }
/* --------------------------------------------------- Objetivos táctiles
18 elementos medían menos de 44x44 px. Se corrigen los que son acciones
reales; los enlaces dentro de párrafos se dejan (son texto, no botones). */
.fcol a{ min-height:44px; display:flex; align-items:center; gap:9px; }
.nav__burger{ min-width:44px; min-height:44px; display:none; place-items:center; }
@media(max-width:760px){ .nav__burger{ display:grid; } }
/* 320-359px: marca + menu + CTA pedian 332px en 292 y el CTA se salia del nav.
Queda el Paper Go solo (el enlace ya lleva aria-label "TraiGo inicio"). */
@media(max-width:359px){ .nav .brand b{ display:none; } .nav{ gap:8px; } }
.btn--sm{ min-height:44px; }
/* ============================== COTIZADOR ==============================
No calcula precios: recoge la intención y la pasa a WhatsApp ya escrita.
Tres decisiones nada más — cada campo extra cuesta conversión. */
.quote{
position:relative; background:#fff; border:1px solid var(--line);
border-radius:var(--radius-lg); padding:clamp(24px,3.4vw,42px);
box-shadow:0 26px 70px rgba(12,24,60,.08);
}
.quote__grid{ display:grid; gap:22px; }
.field{ display:grid; gap:9px; }
.field > label{
font-family:var(--font-display); font-weight:600; font-size:14px;
letter-spacing:-.01em; color:var(--ink);
}
.field small{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
.field textarea,.field select{
width:100%; border:1.5px solid var(--line); border-radius:14px;
padding:14px 17px; font-family:inherit; font-size:15px; color:var(--ink);
background:var(--paper); outline:none; min-height:52px;
transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.field textarea{ resize:vertical; min-height:96px; line-height:1.6; }
.field select{
appearance:none; cursor:pointer; padding-right:46px;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235A6482' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 18px center;
}
.field textarea:focus,.field select:focus{
border-color:var(--mint); background:#fff; box-shadow:0 0 0 4px rgba(47,209,128,.15);
}
.field textarea:focus-visible,.field select:focus-visible{ outline:none; }
.field[data-invalid="true"] textarea,.field[data-invalid="true"] select{
border-color:#D94A4A; box-shadow:0 0 0 4px rgba(217,74,74,.12);
}
.field__err{
display:none; font-size:13px; color:#C23B3B; font-weight:500;
align-items:center; gap:6px;
}
.field[data-invalid="true"] .field__err{ display:flex; }
/* Segmentado sí/no — más rápido de tocar que un select en móvil */
.seg{ display:flex; gap:9px; }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg label{
flex:1; min-height:52px; display:flex; align-items:center; justify-content:center; gap:8px;
border:1.5px solid var(--line); border-radius:14px; cursor:pointer;
font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink-soft);
background:var(--paper); transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.seg label:hover{ border-color:var(--mint-600); color:var(--ink); }
/* El check vive en las DOS etiquetas pero solo se ve en la marcada: antes
estaba escrito a mano dentro de "Si" y se dibujaba incluso sin elegirla,
asi que el simbolo de "elegido" caia sobre la opcion no elegida. */
.seg label .ti{ display:none; }
.seg input:checked + label .ti{ display:inline-block; }
.seg input:checked + label{
border-color:var(--mint); background:var(--mint-tint); color:var(--mint-700);
}
.seg input:focus-visible + label{ outline:3px solid var(--focus); outline-offset:3px; }
.quote__send{ margin-top:4px; }
.quote__send .btn{ width:100%; justify-content:center; }
.quote__note{
margin-top:14px; font-size:13px; color:var(--ink-soft);
display:flex; align-items:flex-start; gap:8px; line-height:1.55;
}
.quote__note .ti{ color:var(--mint-700); font-size:16px; flex:none; margin-top:1px; }
/* ================================= FAQ =================================
<details>/<summary> nativo: accesible por teclado sin una línea de JS. */
.faq{ max-width:760px; margin-inline:auto; display:grid; gap:12px; }
.faq__body{ padding:0 22px 21px; font-size:15px; color:var(--ink-soft); line-height:1.7; }
.faq__body a{ color:var(--mint-700); font-weight:600; text-decoration:underline; }
/* ------------------------------------------------------------ Móvil */
@media(max-width:760px){
/* El CTA del nav estaba oculto en móvil: el usuario que llega de Instagram
se quedaba sin acción persistente salvo el botón flotante. Se muestra
compacto en vez de esconderlo. */
.nav .btn{ display:inline-flex; }
.nav{ padding:9px 9px 9px 16px; }
.nav .btn--sm{ padding:10px 15px; font-size:12.5px; }
.seg{ flex-direction:column; }
.quote__grid{ gap:18px; }
}
/* ------------------------------------------- Movimiento reducido (a11y) */
@media(prefers-reduced-motion:reduce){
}
/* El logo del nav y del footer medían 35px de alto (bajo el mínimo táctil) */
.brand{ min-height:44px; }
/* El campo inválido debe ganarle al estado de foco: al fallar la validación
se enfoca el campo, y sin esto el anillo verde de foco tapaba el rojo de
error — feedback contradictorio justo en el momento que más importa. */
.field[data-invalid="true"] textarea:focus,
.field[data-invalid="true"] select:focus{
border-color:#D94A4A;
box-shadow:0 0 0 4px rgba(217,74,74,.16);
}
/* ------------------------------------------------- Arreglos de móvil
Detectados en captura real a 375px, no en las mediciones. */
@media(max-width:760px){
/* Los dos CTAs del hero iban lado a lado con flex:1 y el principal
partía en tres líneas ("Abrir mi / casillero / gratis"). Apilados
ganan ancho completo y el primario recupera jerarquía. */
.hero__cta{ flex-direction:column; align-items:stretch; }
.hero__cta .btn{ flex:none; width:100%; }
/* El botón flotante de WhatsApp tapaba el último chip de confianza
("Tarifas justas") justo en el primer pantallazo. Se le da aire al
hero y se reduce un poco el flotante. */
.hero{ padding-bottom:120px; }
.fab{ width:52px; height:52px; font-size:26px; bottom:18px; right:18px; }
}
/* El nav flotante viaja sobre secciones oscuras (hero, viaje, CTA) y claras
(beneficios, cotizador, FAQ, rastreo). Con 72% de opacidad se lavaba sobre
las claras y el "Trai" blanco del logo se perdía. Se sube a casi opaco:
sobre oscuro sigue leyéndose igual, y sobre claro ya contrasta.
El primer background es el respaldo para navegadores sin backdrop-filter. */
.nav.is-stuck{
background:#0C1332;
background:rgba(10,17,45,.94);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
.nav.is-stuck{ background:rgba(10,17,45,.88); }
}
/* ==========================================================================
BLOQUE 3 — Rendimiento y legibilidad del nav
========================================================================== */
/* ------------------------------------------------------------ Nav sólido
El nav flotante viaja sobre secciones oscuras y claras. Con fondo
translúcido se lavaba sobre las claras y el "Trai" blanco del logo y los
enlaces desaparecían. Un color SÓLIDO no puede lavarse pase lo que pase;
el blur queda solo como decoración, no como responsable de la lectura. */
.nav.is-stuck{
background:#0A112D;
-webkit-backdrop-filter:none;
backdrop-filter:none;
border-color:rgba(255,255,255,.10);
box-shadow:0 14px 40px rgba(4,8,26,.34);
}
.nav.is-stuck .nav__links a{ color:rgba(255,255,255,.86); }
.nav.is-stuck .nav__links a:hover,
.nav.is-stuck .nav__links a.is-active{ color:#fff; }
/* --------------------------------------------------------- Aurora barata
Eran 12 blobs de hasta 56vw con blur(90px) + mix-blend-mode:screen
animando translate Y SCALE en bucle. Escalar una capa desenfocada obliga
a re-rasterizar el blur en cada frame — era el origen del lag.
Se quita el scale (imperceptible bajo 90px de blur) y queda solo el
translate, que el compositor resuelve sin repintar. */
/* En móvil el aurora se congela: bajo el desenfoque el movimiento no se
aprecia, y es justo donde el coste de composición más duele. */
@media(max-width:900px){
.aurora b{
animation:none !important;
will-change:auto;
filter:blur(60px);
}
.aurora b:nth-child(1){width:70vw;height:70vw;}
.aurora b:nth-child(2){width:60vw;height:60vw;}
.aurora b:nth-child(3){width:55vw;height:55vw;}
}
/* Sin movimiento reducido tampoco tiene sentido mantener la capa activa */
@media(prefers-reduced-motion:reduce){
.aurora b{ animation:none !important; will-change:auto; }
}
/* ------------------------------------------- Sección "El viaje": repintado
Dos animaciones obligaban a recalcular un desenfoque en CADA frame, y la
sección está fijada 1700px, así que repintaban durante todo ese scroll. */
/* Las nubes animaban translateX DENTRO del filtro #cloudBlur (stdDeviation
16): mover un elemento dentro de un filtro SVG obliga a re-renderizar
toda la región del filtro cada frame. El desplazamiento son 36px en 55s
bajo 16px de desenfoque — invisible. Se congela. */
.clouds ellipse{ animation:none !important; }
/* El halo del planeta animaba transform:scale(1.07) sobre un elemento con
filter:blur(38px) — mismo problema que el aurora: escalar re-rasteriza el
blur. Se deja solo la opacidad, que el compositor resuelve gratis y que
sobre un resplandor difuso se ve prácticamente igual. */
@media(max-width:900px){
/* En móvil el halo tampoco necesita latir */
.earth__halo{ animation:none !important; }
}
/* ==========================================================================
BLOQUE 4 — Mapa real de "El viaje" (MapLibre + OpenFreeMap)
El mapa se dibuja ENCIMA del SVG y solo aparece cuando MapLibre confirma
que cargó (html.mapa-on). Si no hay red o WebGL, el SVG sigue ahí y no se
nota que falte nada.
========================================================================== */
/* OJO con la especificidad: MapLibre le pone la clase `maplibregl-map` al
contenedor y su CSS aplica `position:relative`. Como ese CSS se carga en
RUNTIME, entra el ultimo en la cascada y ganaba a `.mapa-real` por orden.
Sin `absolute`, `inset:0` no hacia nada y el div quedaba con ALTURA 0:
MapLibre no pedia teselas y su evento `load` no llegaba nunca.
`.earth > .mapa-real` (0,2,0) gana a `.maplibregl-map` (0,1,0). */
.earth > .mapa-real{
position:absolute; inset:0; height:auto;
border-radius:inherit; overflow:hidden;
opacity:0; transition:opacity .8s var(--ease-out);
/* Decorativo: nunca debe capturar el scroll ni el ratón */
pointer-events:none;
}
html.mapa-on .earth > .mapa-real{ opacity:1; }
html.mapa-on .earth > svg{ opacity:0; transition:opacity .8s var(--ease-out); }
/* MapLibre inyecta su propio marcado; se adapta al contenedor y al tono. */
.mapa-real .maplibregl-canvas{ outline:none; }
/* El control de atribucion de MapLibre queda desactivado; el credito va
estatico bajo el mapa. Se ocultan por si alguna version lo reinyecta. */
.mapa-real .maplibregl-ctrl-bottom-right,
.mapa-real .maplibregl-ctrl-attrib{ display:none !important; }
/* Credito de OpenStreetMap: discreto pero legible (obligatorio por licencia) */
.mapa-credito{
position:absolute; right:12px; bottom:8px; z-index:4; margin:0;
font-size:10.5px; letter-spacing:.02em; line-height:1;
}
.mapa-credito a{
color:rgba(255,255,255,.42);
text-shadow:0 1px 4px rgba(4,8,26,.9);
}
.mapa-credito a:hover{ color:rgba(255,255,255,.75); }
/* El avion que recorre la ruta */
.mapa-avion{
width:30px; height:30px; line-height:0;
filter:drop-shadow(0 0 10px rgba(47,209,128,.85));
will-change:transform;
}
@media(prefers-reduced-motion:reduce){
.mapa-real,html.mapa-on .earth > svg{ transition:none; }
}
/* ==========================================================================
BLOQUE 5 — Rellenar las secciones vacías
========================================================================== */
/* ------------------------------------------ Cotizador a dos columnas
Era un formulario angosto centrado en una sección ancha (densidad 0,63).
El panel derecho da algo que mirar mientras se completa y hace tangible
el envío antes de que exista. */
.quote-layout{
display:grid; grid-template-columns:1.05fr .95fr; gap:36px;
align-items:start; max-width:1000px; margin-inline:auto;
}
.quote-side{ position:sticky; top:108px; }
.qcard{
background:var(--navy-800); color:#fff; border-radius:var(--radius-lg);
padding:26px 28px; box-shadow:0 30px 80px rgba(11,18,48,.28);
display:flex; flex-direction:column; gap:20px;
border:1px solid rgba(255,255,255,.08);
}
.qcard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.qcard__tag{
font-family:var(--font-display); font-size:11px; font-weight:600;
letter-spacing:.15em; text-transform:uppercase; color:var(--mint);
}
.qcard__item{
font-family:var(--font-display); font-size:19px; font-weight:600;
line-height:1.3; letter-spacing:-.02em; color:#fff;
min-height:50px; transition:color .3s ease;
}
.qcard__item.is-vacio{ color:rgba(255,255,255,.34); font-weight:500; }
.qcard__rows{ display:grid; gap:11px; margin-top:16px; }
.qcard__rows > div{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding-bottom:11px; border-bottom:1px solid rgba(255,255,255,.09);
}
.qcard__rows span{ font-size:13px; color:rgba(255,255,255,.55); }
.qcard__rows b{ font-family:var(--font-display); font-size:13.5px; font-weight:600; text-align:right; }
.qcard__route{
display:flex; align-items:center; gap:11px;
font-family:var(--font-display); font-size:12.5px; font-weight:600;
color:rgba(255,255,255,.8);
}
.qcard__line{ flex:1; height:2px; background:rgba(255,255,255,.14); border-radius:2px; position:relative; }
.qcard__foot{
display:flex; align-items:center; gap:8px;
font-size:12.5px; color:rgba(255,255,255,.5);
}
.qcard__foot .ti{ color:var(--mint); font-size:15px; }
/* ------------------------------------------------ FAQ a dos columnas */
.faq-layout{
display:grid; grid-template-columns:1.25fr .75fr; gap:40px;
align-items:start; margin-top:44px;
}
.faq{ max-width:none; margin:0; }
.faq-side{ position:sticky; top:108px; }
.faq-help{
background:var(--card,#fff); border:1px solid var(--line); border-radius:var(--radius-lg);
padding:28px 26px; box-shadow:0 20px 60px rgba(12,24,60,.07);
display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.faq-help > .ti{
width:46px; height:46px; min-width:46px; min-height:46px;
padding:12px; box-sizing:border-box; flex:none;
border-radius:14px;
background:var(--mint-tint); color:var(--mint-700); margin-bottom:4px;
}
.faq-help h3{ font-size:19px; }
.faq-help p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; }
.faq-help .btn{ margin-top:6px; }
/* ---------------------------------------------- CTA final con más aire */
.cta{ padding-block:clamp(96px,12vw,150px); }
.cta__in{ position:relative; z-index:2; }
@media(max-width:900px){
.quote-layout,.faq-layout{ grid-template-columns:1fr; gap:26px; }
/* En móvil la tarjeta va ARRIBA del formulario: se ve el resultado antes
de pedir el esfuerzo de rellenar. */
.quote-side{ position:static; order:-1; }
.faq-side{ position:static; }
}
/* ==========================================================================
BLOQUE 6 — Iconos en SVG (sustituyen a la webfont de Tabler)
La webfont pesaba 779 KB de woff2 + 34 KB de CSS para dibujar 56 iconos,
y bloqueaba el render. El sprite en línea pesa 12 KB y no pide red.
Se mantiene la clase .ti para que TODO el CSS existente siga aplicando:
los iconos se siguen dimensionando con font-size, igual que antes.
========================================================================== */
.ti{
width:1em; height:1em;
/* min-* porque flex-shrink solo protege el eje principal: en un contenedor
en columna el ancho se encogía al tamaño intrínseco y el icono colapsaba */
min-width:1em; min-height:1em;
display:inline-block; vertical-align:-.125em;
flex:none;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
/* ==========================================================================
BLOQUE 7 — Fotografía
Las fotos llenan los bloques que quedaban vacíos. Todas van con
width/height en el HTML para reservar su espacio y no provocar saltos
de layout (CLS) al cargar, y con loading="lazy".
========================================================================== */
/* ALTURA DETERMINISTA, no elastica.
Antes: `flex:1` con `flex-basis:0%` y `min-height:170px`. La foto absorbia
TODA la altura sobrante del tile, y como el tile es una celda de rejilla que
se estira, el resultado era circular: el XL acababa en 1208px con una foto
de 870px (relacion 0,48 — mas alto que un movil de pie). Al abarcar 2 filas,
ese exceso se repartia y **estiraba la fila 2 de 190px a 417px**: de ahi los
229px y 206px de hueco vacio en "Rastreo claro" y "Precio antes de comprar".
Con `aspect-ratio` la altura sale del ancho, que si es conocido. Las filas
pasan a depender del contenido y el hueco desaparece por construccion, no
por un numero magico. Ademas deja el hueco EXACTO que cada imagen futura
tiene que rellenar: la proporcion es ahora parte de la especificacion. */
.tile__foto{
margin:20px -26px -26px; /* sangra hasta el borde (padding .tile = 26px) */
border-radius:0 0 var(--radius) var(--radius);
overflow:hidden; line-height:0;
/* `1 1 auto`, NO `flex:1`. El shorthand `flex:1` significa `1 1 0%`: base
CERO, y entonces la foto absorbe toda la altura del tile — que es
exactamente el bucle que inflaba el XL a 1208px. Con base `auto` la
medida de partida es la que dicta `aspect-ratio`, y el `grow` solo sirve
para comerse el sobrante cuando la rejilla estira el tile. Asi la foto
llega SIEMPRE al borde inferior (sin la franja de color que asomaba bajo
la imagen en el tile oscuro) y conserva los 20px de aire de arriba. */
flex:1 1 auto;
aspect-ratio:var(--foto-ratio,16/9);
min-height:0; position:relative;
}
.tile__foto img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .7s var(--ease-out);
}
.tile:hover .tile__foto img{ transform:scale(1.045); }
/* Un velo del azul de marca para que la foto no compita con el texto */
.tile__foto::after{
content:""; position:absolute; inset:0;
background:linear-gradient(to top,rgba(11,18,48,.30),transparent 55%);
pointer-events:none;
}
/* La proporcion de cada hueco, por funcion del tile. Son las MISMAS medidas
que llevan las specs de imagen: si cambia una, cambia la otra. */
.tile__foto--ancha{ --foto-ratio:16/9; }
/* El tile grande recibe una banda apaisada, no un poster vertical: la foto
apoya al texto, no compite con el. */
.tile--xl .tile__foto{ --foto-ratio:3/2; }
@media(max-width:760px){
.tile__foto{ min-height:150px; }
}
@media(prefers-reduced-motion:reduce){
.tile__foto img{ transition:none; }
}
/* ------------------------------------------------ Banda de imagen
Corta el blanco continuo de las páginas internas justo antes del cierre.
Va a sangre (ancho completo) para que se sienta como respiro, no como
una tarjeta más. */
.banda{
position:relative; line-height:0;
height:clamp(240px,34vw,420px); overflow:hidden;
background:var(--navy-900);
}
.banda img{
width:100%; height:100%; object-fit:cover; display:block;
opacity:.82;
}
/* Velo del azul de marca: unifica fotos de origen distinto con la paleta */
.banda::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(to bottom,rgba(8,14,40,.55),rgba(8,14,40,.18) 45%,rgba(8,14,40,.75)),
linear-gradient(120deg,rgba(22,34,79,.45),transparent 60%);
}
.banda__pie{
position:absolute; left:0; right:0; bottom:clamp(20px,3vw,34px); z-index:2;
text-align:center; line-height:1.4;
font-family:var(--font-display); font-weight:600;
font-size:clamp(15px,2vw,21px); letter-spacing:-.015em; color:#fff;
text-shadow:0 2px 18px rgba(4,8,26,.7);
padding-inline:24px;
}
@media(max-width:760px){
.banda{ height:clamp(200px,50vw,300px); }
}
/* ------------------------------------------- Entrada del bento (escalonada)
Estado inicial propio: además del desplazamiento, una escala mínima que
da sensación de que la tarjeta "llega" en vez de solo aparecer. */
html.js .bento .tile{ opacity:0; transform:translateY(34px) scale(.965); }
html.failsafe .bento .tile{ opacity:1 !important; transform:none !important; }
@media(prefers-reduced-motion:reduce){
html.js .bento .tile{ opacity:1; transform:none; }
}
/* Revisión manual: video nativo, dimensiones reservadas y entrada discreta. */
.section.seq{ background:var(--mist); padding-block:88px; }
.seq__lede{ margin:18px auto 32px; }
.seq__marco{
position:relative; max-width:980px; margin-inline:auto;
aspect-ratio:16/9; border-radius:20px; overflow:hidden;
background:#d9cdbc; box-shadow:0 12px 32px rgba(12,24,60,.08);
}
.seq__poster,.seq__poster img,.seq__marco video{
display:block; width:100%; height:100%; object-fit:contain;
}
.seq__marco video{ position:absolute; inset:0; opacity:0; }
.seq--playing-frame video{ opacity:1; }
.seq__toggle{
position:absolute; right:12px; bottom:12px; z-index:2;
min-height:44px; padding:10px 16px; border:0; border-radius:8px;
background:var(--navy-900); color:white; opacity:0; pointer-events:none;
}
.seq__toggle:focus-visible{ opacity:1; pointer-events:auto; outline:2px solid var(--mint); outline-offset:-4px; }
@media(prefers-reduced-motion:no-preference){
.seq--entered .eyebrow{ animation:seqEntrada .4s both; --seq-offset:4px; }
.seq--entered .h-lg{ animation:seqEntrada .45s .05s both; --seq-offset:6px; }
.seq--entered .seq__lede{ animation:seqEntrada .4s .1s both; --seq-offset:0px; }
.seq--entered .seq__marco{ animation:seqEntrada .45s .15s both; --seq-offset:8px; }
}
@keyframes seqEntrada{ from{opacity:0;transform:translateY(var(--seq-offset,0px))} to{opacity:1;transform:none} }
@media(max-width:760px){
.section.seq{ padding-block:64px; }
.seq__marco{ border-radius:14px; }
.seq__lede{ margin-bottom:26px; }
}
/* ------------------------------------------------ Instagram en el menú móvil
Debajo del CTA y con menos peso visual: es un canal de descubrimiento, no
la acción principal. El objetivo táctil llega a 48px de alto. */
.menu__social{ margin-top:26px; }
.menu__social a{
display:inline-flex; align-items:center; gap:11px;
min-height:48px; padding:0 4px;
font-family:var(--font-display); font-weight:600; font-size:15px;
color:rgba(255,255,255,.62);
transition:color .25s ease;
}
.menu__social a:hover,.menu__social a:focus-visible{ color:#fff; }
.menu__social .ti{ font-size:21px; color:var(--mint); }
/* El botón del menú móvil ocupaba todo el ancho y el texto partía en dos
líneas con la flecha descolgada al extremo. Se ajusta al contenido y se
centra, que es como se lee bien. */
.menu__cta .btn{
width:100%; justify-content:center; text-align:center;
gap:12px; padding-inline:22px;
}
@media(max-width:400px){
.menu__cta .btn{ font-size:14px; padding-inline:16px; }
}
/* -------------------------------------------------- Anclas bajo el nav fijo
El nav es fixed y solido, asi que un enlace #cotizar dejaba el titular
tapado. scrollToEl() en script.js ya compensa 80px por Lenis, pero eso no
cubre entrar por URL directa, recargar con hash, ni prefers-reduced-motion.
96px = alto del nav (16px de top + ~62px de pastilla) + aire. */
[id]{ scroll-margin-top:96px; }
/* ------------------------------------------- CTA del nav en pantallas medias
Regla del proyecto: una accion, un solo nombre. El CTA del nav dice lo
mismo que el del hero ("Abrir mi casillero gratis"), asi que se ajusta el
TAMANO segun el ancho, nunca el texto.
⚠️ Estos @media van al final a proposito: escritos junto a las reglas del
nav quedaban ANIDADOS dentro de otro @media y el navegador los ignoraba. */
.nav .btn--sm{ white-space:nowrap; }
@media(max-width:440px){
.nav{ gap:10px; padding-left:14px; }
.nav .btn--sm{ font-size:11.5px; padding:10px 12px; letter-spacing:-.01em; }
}
/* Franja de tablet: aqui conviven los 5 enlaces del nav Y el CTA. Con el
texto completo la pastilla se partia en dos lineas y desbordaba 36px. */
@media(min-width:761px) and (max-width:920px){
.nav{ gap:8px; padding-left:14px; }
.nav__links{ gap:0; }
/* El tamano vive en el <a>, no en el contenedor: .nav__links{font-size}
no heredaba y el nav acababa 47px mas ancho que el hueco disponible. */
.nav__links a{ font-size:12.5px; padding:8px 9px; }
.nav .btn--sm{ font-size:12px; padding:10px 13px; }
}
/* ==========================================================================
BENTO DE LA HOME — microinteracciones por funcion (2026-09-10)
--------------------------------------------------------------------------
Acotado a [data-page="home"]: beneficios.html comparte .tile y queda igual.
Lo que habia antes NO funcionaba como parecia, y esta capa lo sustituye:
1. El "levantar card" nunca se veia. GSAP deja `transform:translate(0,0)`
INLINE en los tiles al terminar su entrada, y un estilo inline gana a
`.tile:hover{transform:...}`. Medido: 0,0px de desplazamiento real.
Aqui se usan las propiedades INDIVIDUALES `translate` y `scale`, que son
independientes de `transform`: se componen con lo que deja GSAP en vez
de pelearse con ello. Sin tocar JS.
2. El hover viejo no tenia `@media(hover:hover)`: en movil un toque dejaba
el tile con sombra grande, icono girado y foto ampliada, pegados.
3. El `:focus-visible` global pone `border-radius:6px`. En el tile de
Personal Shopper —el unico enlace del bento— las esquinas saltaban de
26px a 6px al llegar con el teclado.
4. La flecha de ese tile tenia regla `.card:hover .card__go`, pero el
tile es `.tile`, no `.card`: nunca se habia movido.
Principio: cada tile responde con LO QUE LO HACE UTIL, no con el mismo
gesto para todos. Los de foto respiran; los dos pequenos muestran su
microinterfaz en accion; el enlace senala a donde lleva.
Todo con transform/opacity/color. Nada en bucle. Nada cambia de altura.
========================================================================== */
/* --- 1. Neutralizar el hover generico viejo, en TODOS los dispositivos --- */
[data-page="home"] .bento .tile:hover{ box-shadow:none; border-color:var(--line); }
[data-page="home"] .bento .tile--dark:hover{ border-color:transparent; }
[data-page="home"] .bento .tile:hover::after{ opacity:0; }
[data-page="home"] .bento .tile:hover .tile__ic{ transform:none; background:var(--mint-tint); color:var(--mint-700); }
[data-page="home"] .bento .tile--dark:hover .tile__ic{ background:rgba(255,255,255,.09); color:var(--mint); }
[data-page="home"] .bento .tile:hover .tile__foto img{ transform:none; }
/* Transiciones de lo que SI se anima. `transform` se conserva en la lista para
no alterar la entrada escalonada que hace GSAP. */
[data-page="home"] .bento .tile{
transition:transform .45s var(--ease-out), translate .45s var(--ease-out),
box-shadow .45s var(--ease-out), border-color .3s ease;
}
[data-page="home"] .bento .tile__foto img{ transition:scale .6s var(--ease-out); }
[data-page="home"] .bento .tile__ic{
transition:translate .35s var(--ease-out), background-color .35s ease, color .35s ease;
}
[data-page="home"] .bento .card__go{ transition:translate .35s var(--ease-out), color .3s ease; }
[data-page="home"] .mini__pies em,
[data-page="home"] .mini__fila em{ transition:color .35s ease; }
[data-page="home"] .mini__pt--off{ transition:border-color .45s ease; }
[data-page="home"] .mini__lin{ transition:flex-grow .45s var(--ease-out); }
/* Linea de la cotizacion: un trazo menta que recorre el punteado de izquierda
a derecha. Es el unico elemento nuevo; vive sobre el borde que ya existia. */
[data-page="home"] .mini__fila i{ position:relative; }
[data-page="home"] .mini__fila i::after{
content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
background:var(--mint-600); transform:scaleX(0); transform-origin:0 50%;
transition:transform .5s var(--ease-out);
}
/* --- 2. Solo color y borde: con raton, y tambien con reduced-motion ------ */
@media (hover:hover) and (pointer:fine){
/* Borde apenas mas presente. El tono esta entre --line y --ink-faint. */
[data-page="home"] .bento .tile:hover{ border-color:#D2DAE8; }
[data-page="home"] .bento .tile--dark:hover{ border-color:rgba(255,255,255,.14); }
/* Icono: un punto mas de verde en el fondo. Sin giro ni rebote. */
[data-page="home"] .bento .tile:hover .tile__ic{ background:#D2F1E1; }
[data-page="home"] .bento .tile--dark:hover .tile__ic{ background:rgba(255,255,255,.15); }
/* Enfasis de los estados: #137A47 da 5,2:1 sobre blanco. El menta-700 de
reposo se queda en 4,1:1 — el hover SUBE el contraste, no lo baja. */
[data-page="home"] .bento .tile:hover .mini__pies em,
[data-page="home"] .bento .tile:hover .mini__fila em{ color:#137A47; }
/* El destino "se acerca": su anillo toma algo de menta. */
[data-page="home"] .bento .tile:hover .mini__pt--off{ border-color:rgba(34,184,108,.5); }
[data-page="home"] .bento a.tile:hover .card__go{ color:var(--mint); }
}
/* --- 3. Movimiento: solo con raton Y sin reduced-motion ------------------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
/* Tiles con fotografia: la foto respira, la card sube 2px y proyecta una
sombra corta. 1,02 sobre 580px son 6px por lado: no alcanza a ningun
sujeto, que estan todos lejos del borde. */
/* `!important` a proposito, y SOLO aqui: GSAP 3.12 deja inline no solo
`transform` sino tambien `translate:none; rotate:none; scale:none`,
precisamente para que las propiedades individuales no le interfieran.
Un estilo inline solo lo gana una declaracion !important. La otra via
—`clearProps` en el JS— devolveria los tiles al desplazamiento inicial
de .rv si algun dia ese CSS lo define, asi que es la mas fragil. */
[data-page="home"] .bento .tile:has(.tile__foto):hover{
translate:0 -2px !important;
box-shadow:0 8px 22px rgba(12,24,60,.06);
}
[data-page="home"] .bento .tile:hover .tile__foto img{ scale:1.02; }
/* El icono sube un pixel. Es la unica respuesta "fisica" que comparten. */
[data-page="home"] .bento .tile:hover .tile__ic{ translate:0 -1px; }
/* RASTREO: el progreso avanza hacia Costa Rica. Con flex-grow el avion se
desplaza solo, pegado a su linea, sin calcular posiciones. Es layout,
pero dentro de una fila de ancho y alto fijos: cero salto de pagina.
1,15 / 0,85 mueve el avion ~14px a 1440. */
[data-page="home"] .bento .tile:hover .mini__lin{ flex-grow:1.15; }
[data-page="home"] .bento .tile:hover .mini__lin--off{ flex-grow:.85; }
/* COTIZACION: el concepto y el valor quedan unidos. */
[data-page="home"] .bento .tile:hover .mini__fila i::after{ transform:scaleX(1); }
/* PERSONAL SHOPPER: la flecha apunta a donde lleva el enlace. */
[data-page="home"] .bento a.tile:hover .card__go{ translate:3px 0; }
}
/* --- 4. Teclado ----------------------------------------------------------
Solo el tile de Personal Shopper es interactivo (es un <a>). Los demas son
<article>: darles tabindex para enseñar una animacion crearia paradas de
tabulacion que no hacen nada. Y no le quita informacion a nadie: todo lo
que la microinterfaz muestra al pasar el raton ya esta visible en reposo. */
[data-page="home"] .bento a.tile:focus-visible{ border-radius:var(--radius-lg); }
[data-page="home"] .bento a.tile:focus-visible .card__go{ color:var(--mint); }
[data-page="home"] .bento a.tile:focus-visible .tile__ic{ background:rgba(255,255,255,.15); }
@media (prefers-reduced-motion:no-preference){
[data-page="home"] .bento a.tile:focus-visible{ translate:0 -2px !important; }
[data-page="home"] .bento a.tile:focus-visible .tile__foto img{ scale:1.02; }
[data-page="home"] .bento a.tile:focus-visible .card__go{ translate:3px 0; }
}
/* ==========================================================================
HERO v3 — direccion de arte (2026-09-10)
--------------------------------------------------------------------------
Antes: bloque de texto a la izquierda + tarjeta blanca flotando a la
derecha, con 9 animaciones CSS infinitas y 3 bucles GSAP a la vez (medido).
La tarjeta repetia un codigo de demo inventado, usaba el avion tradicional
—el que el cliente rechazo para el logo— y su etiqueta contradecia al paso
activo en 2 de sus 4 estados.
Ahora: el titular es un enunciado a todo el ancho; debajo, la accion a la
izquierda y la prueba de producto a la derecha. En reposo solo se mueve la
aurora (aprobada por el cliente), y la tarjeta cuenta UN avance y se queda.
========================================================================== */
/* --- Composicion ---------------------------------------------------------- */
.hero{ padding:150px 0 104px; }
.hero__grid{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
column-gap:64px; row-gap:44px; align-items:start;
}
.hero__head{ grid-column:1 / -1; }
.hero .pill{ margin-bottom:22px; }
/* El punto de la pastilla, quieto. Su pulso infinito era un tic de landing. */
.hero .pill em{ animation:none; box-shadow:none; }
/* Tipografia con ritmo: grande, apretada y en DOS lineas que respetan la
frase ("Compra en Estados Unidos," / "recibelo en tu casa."). Antes, a
72px en media columna, partia en 4 y dejaba "casa." viuda en la ultima.
text-wrap:balance reparte las lineas cuando el ancho obliga a partir. */
.hero h1{
font-size:clamp(40px,5.6vw,82px); line-height:.98; letter-spacing:-.038em;
text-wrap:balance;
}
.hero__sub{ margin-top:0; max-width:470px; }
.hero__cta{ margin-top:30px; }
/* --- Beneficios: una lista, no tres botones ------------------------------- */
.hero__meta{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 26px; }
.hero__meta li{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:#C2CBE0; }
.hero .hero__meta .ti{ width:16px; height:16px; min-width:16px; min-height:16px; color:var(--mint); }
/* --- Fondo: la aurora se queda (aprobada), pero un paso por detras -------- */
.hero .aurora b:nth-child(1){ opacity:.5; } /* polish 2026-09-15: el verde daba el tono apagado (.42) */
.hero .aurora b:nth-child(2){ opacity:.30; } /* el azul era el que mas leia "a IA" */
.hero .aurora b:nth-child(3){ opacity:.32; }
/* Profundidad: la aurora y la tarjeta se separan unos pixeles al mover el
raton (script.js escribe --mx/--my entre -1 y 1). Sentidos opuestos: el
fondo se aleja y la tarjeta se acerca. Como mucho 12px y 5px. */
.hero .aurora{ translate:calc(var(--mx,0) * -12px) calc(var(--my,0) * -9px); }
/* --- CTAs ------------------------------------------------------------------ */
/* El glass iba con backdrop-filter:blur ENCIMA de la aurora animada: el
navegador recalculaba ese desenfoque en cada frame. Sobre navy, un fondo
translucido plano se ve igual y no cuesta nada. */
.hero .btn--glass{ backdrop-filter:none; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); }
.hero .btn{
transition:translate .3s var(--ease-out), scale .12s ease, box-shadow .3s var(--ease-out),
background-color .25s ease, border-color .25s ease, color .25s ease;
}
.hero .btn .ti{ transition:translate .3s var(--ease-out); }
/* Se anula el desplazamiento global de la flecha (4px, con transform): aqui
va con translate y en 3px. */
.hero .btn:hover .ti--flecha{ transform:none; }
@media (hover:hover) and (pointer:fine){
/* El glow del CTA es peticion del cliente: se conserva, pero el hover lo
sube UN paso (.36 -> .44), no a .5 como el global. */
.hero .btn--mint:hover{ box-shadow:0 14px 38px rgba(47,209,128,.44); }
.hero .btn--glass:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.36); }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.hero .btn:hover{ translate:0 -1px; }
.hero .btn--mint:hover .ti--flecha{ translate:3px 0; }
.hero .btn--glass:hover .ti{ translate:0 -1px; }
}
/* Teclado: la misma respuesta que el raton. */
.hero .btn--mint:focus-visible{ box-shadow:0 14px 38px rgba(47,209,128,.44); }
.hero .btn--glass:focus-visible{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.36); }
@media (prefers-reduced-motion:no-preference){
.hero .btn:focus-visible{ translate:0 -1px; }
.hero .btn--mint:focus-visible .ti--flecha{ translate:3px 0; }
}
/* Pulsado: se nota y es instantaneo. Va al final para ganar al hover. */
.hero .btn:active{ translate:0 0; scale:.985; transition-duration:.08s; }
.hero .btn--mint:active{ box-shadow:0 6px 18px rgba(47,209,128,.3); }
/* --- La tarjeta del envio --------------------------------------------------
Superficie NAVY, no blanca: una tarjeta blanca sobre fondo navy se leia
como una captura pegada encima. Aqui es parte del mismo mundo. Sin
backdrop-filter; la profundidad la dan el borde fino, el filo de luz de
arriba y una sombra ancha y difusa. */
.hero__stage{ justify-self:end; width:100%; max-width:520px; }
.envio{
position:relative; padding:24px 24px 22px;
background:#0D1535;
border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); /* polish: la tarjeta se separa del fondo */
box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 40px 70px -34px rgba(0,0,0,.72);
translate:calc(var(--mx,0) * 5px) calc(var(--my,0) * 4px);
}
.envio__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.envio__id{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:15px; color:#fff; }
.envio__id svg{ width:20px; height:20px; flex:none; }
.envio__tag{ font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; background:rgba(47,209,128,.14); color:#8FE6BA; white-space:nowrap; }
/* La ruta. --p (0..1) es el progreso: lo usan la linea menta Y el avion,
asi que no pueden desincronizarse. El avion se coloca con 100cqw (el
ancho de la propia via, que es un contenedor): transform puro, sin
calcular pixeles en JS y correcto a cualquier ancho. */
.envio__ruta{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.envio__ruta > span{ flex:none; font-size:12px; font-weight:600; color:rgba(255,255,255,.55); }
.envio__via{ position:relative; flex:1; height:20px; container-type:inline-size; --p:.58; }
.envio__lin{ position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; border-radius:2px; background:rgba(255,255,255,.14); }
.envio__hecho{ position:absolute; inset:0; border-radius:inherit; background:var(--mint); transform-origin:0 50%; transform:scaleX(var(--p)); }
.envio__pt{ position:absolute; top:50%; left:0; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--mint); }
.envio__pt--fin{ left:100%; background:#0D1535; border:1.5px solid rgba(255,255,255,.35); }
/* Paper Go, el avion del logo. Su punta mira a 50,9 grados: girandolo 39
apunta a lo largo de la linea (este). */
/* A 18px el avion no se veia: su ala menta se fundia con la linea menta y la
verde oscura desaparecia sobre el navy. Ahora va a 28px sobre un disco del
color de la tarjeta, que corta la linea bajo el y lo despega. El viewBox
ampliado (-5 -5 42 42) le da margen dentro del disco. */
.envio__go{ position:absolute; top:50%; left:0; width:28px; height:28px;
border-radius:50%; background:#0D1535;
transform:translate(calc(var(--p) * 100cqw - 50%), -50%) rotate(39deg); }
.envio__pasos{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.envio__pasos li{ display:flex; align-items:center; gap:12px; font-size:14px; color:rgba(255,255,255,.5); transition:color .35s ease; }
.envio__dot{
position:relative; width:22px; height:22px; flex:none; border-radius:50%;
display:grid; place-items:center; border:1.5px solid rgba(255,255,255,.18);
transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.envio__dot .ti{ width:12px; height:12px; min-width:12px; min-height:12px; color:var(--navy-900); stroke-width:3;
opacity:0; scale:.5; transition:opacity .2s ease, scale .35s var(--ease-out); }
.envio__dot::after{ content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--mint);
opacity:0; scale:.4; transition:opacity .25s ease, scale .35s var(--ease-out); }
.envio__pasos li.is-hecho{ color:rgba(255,255,255,.78); }
.envio__pasos li.is-hecho .envio__dot{ background:var(--mint); border-color:var(--mint); }
.envio__pasos li.is-hecho .envio__dot .ti{ opacity:1; scale:1; }
.envio__pasos li.is-activo{ color:#fff; }
.envio__pasos li.is-activo .envio__dot{ border-color:var(--mint); box-shadow:0 0 0 4px rgba(47,209,128,.13); }
.envio__pasos li.is-activo .envio__dot::after{ opacity:1; scale:1; }
/* --- Tablet y movil: composicion propia, no el escritorio encogido -------- */
@media (max-width:1000px){
.hero__grid{ grid-template-columns:1fr; row-gap:36px; }
.hero__stage{ justify-self:start; }
}
@media (max-width:760px){
.hero{ padding:128px 0 112px; }
.hero__grid{ row-gap:30px; }
.hero h1{ font-size:clamp(34px,9.6vw,44px); line-height:1.02; }
/* Los tres beneficios en una fila de tres columnas: equilibrados, sin el
2+1 que dejaba el flex al partir. */
.hero__meta{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:26px; }
.hero__meta li{ flex-direction:column; align-items:flex-start; gap:7px; font-size:12.5px; line-height:1.3; }
.hero__stage{ max-width:none; }
.envio{ padding:20px 18px 18px; translate:none; }
.envio__pasos li{ font-size:13.5px; }
}
@media (prefers-reduced-motion:reduce){
.hero .aurora, .envio{ translate:none; }
}
/* ==========================================================================
TELON v2 — introduccion de marca (2026-09-10)
--------------------------------------------------------------------------
Antes: logo pequeno en una pantalla navy, que subia EN BLOQUE (1,85 s) y
dejaba ver primero la franja blanca del marquee; el hero no empezaba a
componerse hasta que el telon se habia ido. Se leia como un loader.
Ahora: dos hojas navy. El Paper Go del logo despega hacia la derecha
dibujando la ruta en menta; por esa misma linea se separan las hojas. El
hero ya se esta componiendo detras, asi que al abrirse la escena el
titular esta subiendo: el telon es el primer segundo del hero, no un
paso previo. ~1,4 s en escritorio, ~1,1 s en movil.
========================================================================== */
html.js .loader{ background:transparent; } /* pintan las hojas */
.loader__hoja{
position:absolute; left:0; right:0; height:50.5%; /* 1 % de solape: sin rendija al cerrar */
background:var(--navy-900); will-change:transform;
}
.loader__hoja--a{ top:0; }
.loader__hoja--b{ bottom:0; }
.loader__ruta{ position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; z-index:1; }
/* La linea arranca donde esta el avion (--ruta-x lo pone el JS) y crece
hacia la derecha a su mismo ritmo: parece que la va dibujando. */
.loader__ruta i{
position:absolute; top:0; bottom:0; left:var(--ruta-x,50%); right:0;
background:var(--mint); transform:scaleX(0); transform-origin:0 50%;
}
.loader__mark{ position:relative; z-index:2; gap:14px; }
/* Marca con presencia, no un logo de "cargando": el texto pasa de 30px a
~40px y el avion de 38 a 46px. */
.loader__mark span{ font-size:clamp(30px,2.8vw,40px); }
.loader__go{ flex:none; width:46px; height:46px; will-change:transform; }
/* ==========================================================================
HERO v4 — foto de campana + producto (2026-09-10)
--------------------------------------------------------------------------
Sobre el v3 (titular a todo el ancho, tarjeta viva) se anade lo que le
faltaba: una imagen. El hero era la unica parte de la home sin campana:
aurora + interfaz, que es exactamente el aspecto de una landing SaaS.
La foto (hoy hero-editorial.webp; prompt original en
GEMINI/prompts/hero-llegada.md) es el paquete ya en casa a la
hora azul. Su 43 % izquierdo es un plano navy casi plano: el panel se
funde con el fondo y el TITULAR se asienta sobre ese plano; la casa se
abre detras. La tarjeta del envio queda sobre el mismo plano, junto al
paquete: promesa -> seguimiento -> paquete en casa, de izquierda a derecha.
========================================================================== */
.hero__foto{ margin:0; }
.hero__foto picture, .hero__foto img{ display:block; width:100%; height:100%; }
.hero__foto img{ object-fit:cover; filter:saturate(1.08) contrast(1.04); } /* polish: la foto tenia poca presencia */
.hero__head, .hero__copy, .hero__stage{ position:relative; z-index:1; }
/* La foto "asienta" al entrar: arranca un 6 % mas grande y se posa en 1,6 s.
Sin JS no hay escala; con failsafe o reduced-motion, tampoco. */
html.js .hero__foto img{ transform:scale(1.06); transform-origin:70% 60%; }
html.failsafe .hero__foto img{ transform:none !important; }
/* --- Escritorio: composicion completa ------------------------------------ */
@media (min-width:1200px){
.hero{ --hero-pt:150px; --hero-pb:104px; padding:var(--hero-pt) 0 var(--hero-pb); }
.hero__grid{
/* 460px deja los dos CTA en fila (241 + 10 + 205). 34px de hueco y una
tarjeta de 320 mantienen al menos 20px libres antes del paquete en
todos los anchos de escritorio (medido: 1200 a 1920). */
grid-template-columns:minmax(0,460px) minmax(0,1fr);
column-gap:34px; row-gap:40px; align-items:end;
}
.hero__cta{ gap:10px; }
/* El titular NO puede pasar del plano navy: detras esta la pared clara de
la casa y el blanco dejaria de leerse. Con la foto alineada a la
derecha, el plano termina en 100vw - 0,57 x (alto del hero, ~830px).
"Compra en Estados Unidos," mide 12,2em: a 4,6vw cabe dentro del plano
en todos los anchos. La 1a version (5,2vw) se salia en 1366 y 1440 y
el final de "Unidos," caia sobre el marco claro de la puerta. */
.hero h1{ font-size:clamp(56px,4.6vw,76px); }
.hero__foto{
/* Por debajo de ~1440 la foto se desliza fuera de pantalla por la
derecha (se pierde lampara y puerta, nunca el paquete) para que el
paquete no quede debajo de la tarjeta. */
--foto-x:max(0px, calc(728px - 50vw), calc(1350px - 100vw));
position:absolute; z-index:0;
top:calc(-1 * var(--hero-pt)); bottom:calc(-1 * var(--hero-pb));
right:calc(50% - 50vw - var(--foto-x)); left:auto;
aspect-ratio:1 / 1; /* ancho = alto del hero */
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16%);
mask-image:linear-gradient(90deg, transparent 0, #000 16%);
/* profundidad: la foto va entre la aurora (lejos) y la tarjeta (cerca) */
translate:calc(var(--mx,0) * -6px) calc(var(--my,0) * -4px);
}
.hero__stage{ justify-self:start; align-self:end; max-width:320px; }
}
/* --- Tablet: apilado, con la foto como banda ----------------------------- */
@media (max-width:1199px){
.hero__grid{ grid-template-columns:1fr; }
.hero{ padding-bottom:64px; }
.hero__foto{
position:relative; overflow:hidden;
margin:6px calc(50% - 50vw) 0; /* a sangre */
/* Altura explicita, no aspect-ratio + max-height: esa pareja recalcula
el ANCHO a partir del tope (en 1024x768 la banda salia de 792px y
dejaba de ir a sangre). 16:9, pero nunca mas del 58 % de la pantalla. */
height:min(56.25vw, 58vh);
}
/* Ventana sobre el paquete; el plano navy queda como marco a la izquierda */
.hero__foto img{ object-position:50% 88%; }
/* ORDEN PROPIO en todo lo apilado: la tarjeta ANTES que la foto. Con la
foto delante, la interfaz caia bajo el fold (y=1030 en 1024x768; y=1027
a 390px). Asi la prueba de producto sigue en el 1er pantallazo y la
foto cierra el hero como imagen emocional antes de la ola. */
.hero__stage{ order:1; justify-self:start; width:100%; max-width:460px; margin-top:0; }
.hero__foto{
order:2; margin-top:30px;
/* entra y sale del navy por arriba y por abajo: sin bordes */
-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
}
}
/* --- Movil: su propio recorte y su propio orden --------------------------- */
@media (max-width:760px){
/* (Recorte original hero-llegada-movil.webp, ya retirado; hoy la foto es
hero-editorial-mobile.webp.) 4:3, solo puerta + paquete, con una franja del
plano navy como marco. Cuesta 15 KB y queda bajo los CTA: el primer
pantallazo sigue siendo titular + boton, y el LCP sigue siendo texto. */
.hero{ padding-bottom:56px; } /* la foto ya se funde en navy: el colchon de 112px sobraba */
.hero__stage{ max-width:none; }
.hero__foto{ height:75vw; margin-top:26px; } /* 4:3 */
.hero__foto img{ object-position:center; }
}
@media (prefers-reduced-motion:reduce){
html.js .hero__foto img{ transform:none; }
.hero__foto{ translate:none !important; }
}
/* ==========================================================================
HERO v4 — MOVIL INTEGRADO (2026-09-10)
--------------------------------------------------------------------------
En lo apilado la foto se leia como un banner aparte: tarjeta -> 56px de
navy vacio -> foto 4:3 -> fundido -> colchon -> ola. Hero de 1389px a 390.
Ahora es UNA composicion: la tarjeta monta sobre el borde superior de la
foto (que nace del navy por detras de ella) y el paquete aparece justo
debajo del paso "Entrega a domicilio". La foto se funde en navy y la ola
corta ese navy: imagen -> navy -> ola, sin colchon entre medias.
Escritorio (>=1200px) no cambia.
========================================================================== */
@media (max-width:1199px){
.hero{ padding-bottom:clamp(20px, 3vw, 30px); } /* la ola pisa el fundido */
.hero__foto{
margin-top:-52px; /* con el row-gap de 36px: 16px bajo la tarjeta */
height:min(50vw, 460px);
/* Dos mascaras que se multiplican: vertical (nace y muere en navy) y
horizontal (el plano oscuro de la foto, 8,20,34, un punto mas verde
que la pagina, se disuelve y deja ver el fondo real). */
--foto-mv:linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
--foto-mh:linear-gradient(to right, transparent 0, #000 42%);
-webkit-mask-image:var(--foto-mv), var(--foto-mh); -webkit-mask-composite:source-in;
mask-image:var(--foto-mv), var(--foto-mh); mask-composite:intersect;
}
/* Ventana sobre el paquete: la tapa asoma donde acaba el fundido de arriba
(~21 %) y la base llega hasta donde empieza el de abajo (~81 %). */
.hero__foto img{ object-position:50% 84%; }
/* Sobre la foto, sombra corta: la tarjeta se apoya, no flota como modal */
.envio{ box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 22px 36px -26px rgba(0,0,0,.65); }
}
@media (max-width:760px){
/* Recorte v2 (hero-llegada-movil, retirado; hoy hero-editorial-mobile.webp):
1000x680 del maestro (200,470)-(1200,1150).
Paquete a la derecha del centro, suelo debajo, puerta solo como senal
arriba a la derecha. A la izquierda, el plano navy de la foto continua
el fondo bajo la tarjeta.
CIERRE (polish final). La foto emerge de la tarjeta, no de un borde:
- Solape de 20px (margin = row-gap 30 + 20). La rampa arranca BAJO la
tarjeta y va en curva suave (0 al 3 %, .16 en el canto, .6, 1 al
22 %): en el canto la foto apenas asoma y termina de aparecer ~30px
mas abajo. Antes el fundido era lineal desde y=0 y a la altura del
canto la foto ya estaba al 50 %: la puerta clara tocaba la esquina.
- La tapa del paquete (y~47px) llega casi opaca, ~27px bajo la tarjeta.
- 58vw (226px a 390, era 234). object-position 38 %: tapa al 21 %, base
al 83 %, justo donde empieza el fundido inferior. */
.hero__foto{ height:58vw; margin-top:-50px;
--foto-mv:linear-gradient(to bottom, transparent 0, transparent 3%, rgba(0,0,0,.16) 9%, rgba(0,0,0,.6) 15%, #000 22%, #000 80%, transparent 100%);
--foto-mh:linear-gradient(to right, transparent 0, #000 31%); } /* aqui el plano acaba al 32 % */
.hero__foto img{ object-position:50% 38%; }
.hero{ padding-bottom:16px; }
/* Ola un 18 % mas plana (34 -> 28px con el mismo trazado): sigue cerrando
el hero pero deja de competir con el paquete. */
.hero__wave{ height:28px; }
/* Tarjeta compacta: mismos estados, copy, orden, badge y Paper Go. Solo
aire interno. La tarjeta es role=img (no tactil): los 20px de los
puntos y el cuerpo de 13,5px se mantienen por lectura. */
.envio{ padding:13px 15px 12px; }
.envio__top{ margin-bottom:10px; }
.envio__tag{ padding:4px 10px; }
.envio__ruta{ margin-bottom:11px; }
.envio__pasos{ gap:6px; }
.envio__pasos li{ line-height:1.3; }
.envio__dot{ width:20px; height:20px; }
}
/* Hero editorial B: recorte móvil propio, sin alterar desktop ni tablet.
Maestro 1200² -> (400,440)-(1200,1160), 800x720. Caja centrada visualmente,
suelo bajo la base y puerta secundaria. Solape existente de 20px. */
@media (max-width:760px){
.hero__foto{
height:72vw;
--foto-mv:linear-gradient(to bottom,transparent 0,transparent 3%,rgba(0,0,0,.16) 9%,rgba(0,0,0,.6) 15%,#000 22%,#000 86%,transparent 100%);
--foto-mh:linear-gradient(to right,transparent 0,#000 15%);
}
.hero__foto img{object-position:50% 38%;}
body.hero-contact-visible > .fab{visibility:hidden;pointer-events:none;}
}
/* ==========================================================================
RASTREO v2 — una sola vista del estado (2026-09-11)
--------------------------------------------------------------------------
Antes: ruta de 8 iconos ARRIBA + tarjeta blanca con input + timeline con
fechas ABAJO (dos representaciones del mismo estado, la ruta encendida
entera aunque el paquete fuese por el paso 4), codigos TG-xxxx que
parecian reales, fechas que implicaban plazos y un radar en bucle.
1621px de alto a 390 (1,92 pantallas).
Ahora: UNA tarjeta navy (la superficie de la tarjeta del hero) con el
input, los ejemplos por ESTADO y la ruta integrada. El paso activo se
dice en texto ("Paso 3 de 5 · ..."); la lista completa, plegada.
Paper Go solo marca "En camino a Costa Rica".
========================================================================== */
.rastreo-sec{ padding:clamp(64px, 8vw, 112px) 0; }
.rastreo-sec__lede{ margin:16px auto 34px; }
.rastreo{
--r-sup:#0D1535; /* = .envio del hero */
--r-soft:#AEB8D3; /* 8,9:1 sobre la superficie */
--r-faint:#8B94AC; /* 5,8:1: el minimo para texto aqui */
--r-line:rgba(255,255,255,.09);
--focus:var(--mint); /* fondo oscuro: anillo menta */
position:relative; max-width:720px; margin-inline:auto;
padding:clamp(20px, 3vw, 32px);
background:var(--r-sup); color:#fff;
border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-lg);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 56px -36px rgba(8,14,40,.45);
}
/* --- Entrada ------------------------------------------------------------ */
.rastreo__label{ display:block; margin:0 0 8px 4px; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--r-soft); }
.rastreo__campo{
display:flex; align-items:center; gap:8px; padding:5px;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:999px;
transition:border-color .2s ease, box-shadow .2s ease;
}
.rastreo__campo:focus-within{ border-color:var(--mint); box-shadow:0 0 0 3px rgba(47,209,128,.22); }
.rastreo__campo input{
flex:1; min-width:0; padding:11px 8px 11px 16px;
background:none; border:0; color:#fff;
font:500 16px/1.2 var(--font-body); /* 16px: iOS no hace zoom */
}
.rastreo__campo input:focus-visible{ outline:none; } /* el anillo lo pinta el campo */
.rastreo__campo input::placeholder{ color:var(--r-faint); opacity:1; }
.rastreo__campo .btn{ flex:none; padding:12px 20px; font-size:14.5px; box-shadow:none; }
.rastreo__campo .btn .ti{ font-size:17px; }
.rastreo__ayuda{ margin:8px 0 0 4px; font-size:13px; color:#DDE3F0; }
/* --- Ejemplos: ESTADOS, no numeros -------------------------------------- */
.rastreo__ejemplos{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }
.rastreo__ejemplos > span{ margin:0 6px 0 4px; font-size:13px; color:var(--r-soft); }
.rastreo__chip{
position:relative;
padding:9px 15px; border-radius:999px; cursor:pointer;
background:transparent; border:1px solid rgba(255,255,255,.18); color:#DDE3F0;
font:600 13px/1 var(--font-display);
transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* Area de toque de 44px sin engordar la pildora: la pastilla sigue midiendo 33
y el dedo acierta igual. Solo crece a lo alto, asi que dos chips vecinos
nunca se pisan y el hueco de arriba y abajo lo absorbe el margen. */
.rastreo__chip::after{
content:""; position:absolute; left:0; right:0; top:50%;
height:44px; transform:translateY(-50%);
}
.rastreo__chip:hover{ border-color:rgba(255,255,255,.34); }
.rastreo__chip[aria-pressed="true"]{ background:rgba(47,209,128,.14); border-color:rgba(47,209,128,.55); color:#8FE6BA; }
.rastreo__chip:focus-visible{ border-radius:999px; }
/* --- La vista: ejemplo y "numero real" en la MISMA celda ------------------
La oculta sale del flujo (absoluta): la tarjeta mide lo que la vista
VISIBLE. Si se apilaran en rejilla, la de "numero real" (mas alta en
movil) dejaba ~90px vacios bajo el ejemplo. El cambio de alto solo pasa
al pulsar, asi que no cuenta como CLS. */
.rastreo__vista{ position:relative; margin-top:20px; padding-top:20px; border-top:1px solid var(--r-line); }
.rastreo .is-oculta{ position:absolute; left:0; right:0; top:20px; visibility:hidden; opacity:0; pointer-events:none; }
.estado__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* "Vista de ejemplo" con borde discontinuo: se lee como muestra, no como dato */
.estado__demo{
padding:6px 11px; border:1px dashed rgba(255,255,255,.3); border-radius:999px;
font:600 11px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--r-soft);
}
.estado__tag{ padding:6px 11px; border-radius:999px; background:rgba(47,209,128,.14); color:#8FE6BA; font:600 12px/1 var(--font-body); white-space:nowrap; }
.estado__tit{ margin:16px 0 22px; font-family:var(--font-display); font-weight:600; font-size:clamp(19px, 2.1vw, 23px); letter-spacing:-.02em; line-height:1.2; color:#fff; text-wrap:balance; }
/* La ruta. --p (0..1) mueve la linea menta Y el Paper Go: no pueden
desincronizarse. Los puntos se reparten con --i / 4 (5 estados). */
.estado__rail{ position:relative; height:30px; margin:0 15px; container-type:inline-size; --p:.5; --pg:.5; }
.estado__lin{ position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; border-radius:2px; background:rgba(255,255,255,.14); }
.estado__hecho{ position:absolute; inset:0; border-radius:inherit; background:var(--mint); transform-origin:0 50%; transform:scaleX(var(--p)); }
.estado__pt{ position:absolute; top:50%; left:calc(var(--i) / 4 * 100%); width:18px; height:18px; margin:-9px 0 0 -9px; display:grid; place-items:center; }
.estado__pt::before{
content:""; width:10px; height:10px; border-radius:50%;
background:var(--r-sup); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42); /* 3,4:1 */
transition:background-color .25s ease, box-shadow .25s ease;
}
.estado__pt.is-hecho::before{ background:var(--mint); box-shadow:none; }
.estado__pt.is-activo::before{ background:var(--mint); box-shadow:0 0 0 3px var(--r-sup), 0 0 0 4.5px var(--mint); }
/* Enfasis del paso activo: UNA vez al cambiar de estado, nunca en bucle */
.estado__pt::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--mint); opacity:0; }
.estado__pt.is-enfasis::after{ animation:estado-enfasis .36s var(--ease-out) 1; }
@keyframes estado-enfasis{ from{ opacity:.8; transform:scale(.7); } to{ opacity:0; transform:scale(2.3); } }
/* Paper Go: el avion del logo, sobre un disco que corta la linea (como en
el hero). Solo en "En camino a Costa Rica", encima del paso activo. */
.estado__go{
position:absolute; top:50%; left:0; width:34px; height:34px; border-radius:50%;
background:var(--r-sup);
/* --pg, no --p: el avion NO viaja con la linea. Marca siempre el paso 3 (En camino)
y se desvanece en su sitio cuando el ejemplo es otro estado. */
transform:translate(calc(var(--pg) * 100cqw - 50%), -50%) rotate(39deg);
transition:opacity .2s ease;
}
.estado[data-ej="entregado"] .estado__go{ opacity:0; }
.estado__paso{ margin:16px 0 0; font-size:14px; line-height:1.5; color:var(--r-soft); }
.estado__paso b{ color:#fff; font-weight:600; }
.estado__ver{
/* 44px de alto real. Es un boton de texto, sin caja: el margen baja de 10 a 5
para que la linea siga cayendo exactamente donde caia. */
display:inline-flex; align-items:center; min-height:44px; margin-top:5px; padding:0 2px;
background:none; border:0; cursor:pointer; color:#8FE6BA; font:600 13.5px/1 var(--font-display);
gap:6px;
}
.estado__ver .ti{ font-size:16px; transition:transform .3s var(--ease-out); }
.estado__ver[aria-expanded="true"] .ti{ transform:rotate(180deg); }
.estado__ver:hover span{ text-decoration:underline; text-underline-offset:3px; }
/* Cada paso: plegado por defecto. Dos columnas en orden de lectura (baja
la primera, luego la segunda); una en movil. */
.estado__pasos{
list-style:none; margin:12px 0 0; padding:16px 0 0; border-top:1px solid var(--r-line);
display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3, auto); grid-auto-flow:column; gap:11px 28px;
}
/* Plegada por defecto CON JS (html.js se pone en el <head>, antes de pintar:
sin salto de layout). SIN JS no hay input que sirva: se esconden
formulario, ejemplos y boton, y la lista queda abierta. */
html.js .estado__pasos:not(.is-abierta){ display:none; }
html:not(.js) .rastreo__form, html:not(.js) .rastreo__ejemplos, html:not(.js) .estado__ver{ display:none; }
html:not(.js) .rastreo__vista{ margin-top:0; padding-top:0; border-top:0; }
.estado__pasos li{ display:flex; align-items:center; gap:10px; font-size:14px; line-height:1.3; color:var(--r-faint); }
.estado__dot{
position:relative; flex:none; width:20px; height:20px; border-radius:50%;
display:grid; place-items:center; border:1.5px solid rgba(255,255,255,.42);
}
.estado__dot .ti, .estado__dot::after{ grid-area:1 / 1; } /* check y punto en la MISMA celda */
.estado__dot .ti{ font-size:12px; color:var(--navy-900); stroke-width:3; opacity:0; }
.estado__pasos li.is-hecho{ color:#DDE3F0; }
.estado__pasos li.is-hecho .estado__dot{ background:var(--mint); border-color:var(--mint); }
.estado__pasos li.is-hecho .estado__dot .ti{ opacity:1; }
.estado__pasos li.is-activo{ color:#fff; font-weight:600; }
.estado__pasos li.is-activo .estado__dot{ border-color:var(--mint); }
.estado__pasos li.is-activo .estado__dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--mint); }
/* --- Numero real sin backend ------------------------------------------- */
.rastreo__real-tit{ margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(19px, 2.1vw, 23px); letter-spacing:-.02em; line-height:1.25; text-wrap:balance; }
.rastreo__real-txt{ margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--r-soft); }
.rastreo__real-cod{ margin:14px 0 0; font-size:13.5px; color:var(--r-soft); overflow-wrap:anywhere; }
.rastreo__real-cod b{ color:#fff; font-family:var(--font-display); font-weight:600; letter-spacing:.02em; }
.rastreo__real-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:20px; }
.rastreo__real-acc .btn{ padding:13px 22px; font-size:14.5px; }
.rastreo__volver{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; background:none; border:0; cursor:pointer; color:#8FE6BA; font:600 13.5px/1 var(--font-display); }
.rastreo__volver:hover{ text-decoration:underline; text-underline-offset:3px; }
/* Solo lectores de pantalla: el aviso de cada cambio y el "Hecho / Paso
actual / Pendiente" de cada fila de la lista (sin esto, solo color). */
.rastreo__aviso, .estado__sr{ position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* --- Movil: su propia composicion --------------------------------------- */
@media (max-width:560px){
.rastreo-sec__lede{ margin:14px auto 26px; }
.rastreo{ padding:18px 16px 16px; border-radius:22px; }
.rastreo__campo .btn{ padding:12px 16px; }
.rastreo__ejemplos{ margin-top:14px; }
.rastreo__ejemplos > span{ flex-basis:100%; margin:0 0 2px 4px; }
.rastreo__vista{ margin-top:16px; padding-top:16px; }
.estado__tit{ margin:14px 0 18px; }
.estado__rail{ margin:0 12px; }
.estado__paso{ margin-top:12px; }
.estado__pasos{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; gap:10px; }
}
@media (max-width:400px){
.rastreo__campo .btn .ti{ display:none; } /* el texto basta; el campo gana ancho */
}
@media (prefers-reduced-motion:reduce){
.estado__pt.is-enfasis::after{ animation:none; }
.estado__ver .ti, .estado__go{ transition:none; }
}
/* ==========================================================================
CTA FINAL — cierre de marca (2026-09-11)
--------------------------------------------------------------------------
Antes: titular + dos botones del MISMO peso (y el mismo destino), una foto
de stock de 670px, tres tarjetas con hover sin enlace, una caja y un AVION
TRADICIONAL flotando en bucle y una aurora de hero. 1423px a 1440; en
movil los botones se partian en 3 lineas (106px de alto).
Ahora: la linea de marca en grande, un CTA dominante, WhatsApp como
enlace, y los tres pasos en una sola fila. Paper Go traza su ruta menta
al entrar: la misma firma que abre el telon. Alineado a la izquierda,
como el hero y como el footer que sigue.
Solo index.html: .cierre es un modificador; el .cta de las otras
paginas no cambia.
========================================================================== */
.cta.cierre{
text-align:left;
padding-block:clamp(88px, 11vw, 150px) clamp(56px, 5.5vw, 80px);
/* Profundidad controlada: UN halo menta muy bajo a la derecha, en el
espacio vacio. Se apaga antes del borde inferior: sin costura con el
footer, que es el mismo navy. */
background:radial-gradient(52% 64% at 86% 36%, rgba(47,209,128,.085), transparent 72%), var(--navy-900);
}
/* Linea final: el cierre termina en un filo, no en un degradado cortado */
.cta.cierre::after{
content:""; position:absolute; bottom:0; left:50%; translate:-50% 0;
width:min(var(--shell), calc(100% - 44px)); height:1px; background:rgba(255,255,255,.08);
}
/* --- Paper Go + ruta ----------------------------------------------------- */
.cierre__marca{ display:flex; align-items:center; gap:14px; max-width:440px; margin-bottom:clamp(22px, 3vw, 34px); }
.cierre__go{ flex:none; width:34px; height:34px; }
.cierre__go path:first-child{ fill:var(--mint); }
.cierre__go path:last-child{ fill:var(--mint-tint); }
.cierre__ruta{ flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--mint), rgba(47,209,128,0)); transform-origin:0 50%; }
html.failsafe .cierre__ruta, html.failsafe .cierre__go{ opacity:1 !important; transform:none !important; }
/* --- Titular: la linea de marca, a escala de cierre ---------------------- */
.cierre__tit{
margin:0; max-width:11.5em; color:#fff;
font-family:var(--font-display); font-weight:700;
font-size:clamp(42px, 7.4vw, 108px); line-height:.98; letter-spacing:-.045em;
text-wrap:balance;
}
/* "hasta tu casa." nunca se parte: en movil queda sola en la 3a linea */
.cierre__tit u{ white-space:nowrap; }
.cierre .cierre__sub{ margin:clamp(20px, 2.4vw, 28px) 0 0; max-width:34ch; font-size:clamp(17px, 1.45vw, 20px); line-height:1.5; color:#AEB8D3; }
/* --- Acciones: una domina, la otra acompana ------------------------------ */
.cierre__acc{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px; margin-top:clamp(28px, 3.2vw, 40px); }
.cierre .cierre__cta{
padding:19px 32px; font-size:16.5px;
transition:translate .3s var(--ease-out), scale .15s ease, box-shadow .3s var(--ease-out), background-color .2s ease;
}
.cierre .btn .ti{ transition:translate .3s var(--ease-out); }
.cierre .btn:hover .ti--flecha{ transform:none; } /* la flecha la mueve translate */
.cierre .btn--mint:hover, .cierre .btn--mint:focus-visible{ box-shadow:0 14px 38px rgba(47,209,128,.44); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.cierre .btn:hover{ translate:0 -1px; }
.cierre .btn:hover .ti--flecha{ translate:3px 0; }
}
@media (prefers-reduced-motion:no-preference){
.cierre .btn:focus-visible .ti--flecha{ translate:3px 0; }
}
.cierre .btn:active{ translate:0 0; scale:.985; transition-duration:.08s; }
.cierre .btn--mint:active{ box-shadow:0 6px 18px rgba(47,209,128,.3); }
.cierre__wa{
display:inline-flex; align-items:center; gap:9px; padding:12px 2px;
color:#DDE3F0; font:600 15px/1.2 var(--font-display); text-decoration:none;
}
.cierre__wa .ti{ font-size:18px; color:var(--mint); }
.cierre__wa span{ background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom:2px; transition:background-size .3s var(--ease-out); }
.cierre__wa:hover span, .cierre__wa:focus-visible span{ background-size:100% 1px; }
/* --- Los tres pasos: una fila que se lee de un vistazo ------------------- */
.cierre__pasos{
list-style:none; margin:clamp(56px, 6vw, 84px) 0 0; padding:22px 0 0;
border-top:1px solid rgba(255,255,255,.09);
display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px 32px;
}
.cierre__pasos li{ display:flex; align-items:baseline; gap:12px; font-size:15px; line-height:1.4; color:#DDE3F0; }
.cierre__pasos span{ flex:none; font:600 13px/1 var(--font-display); letter-spacing:.06em; color:var(--mint); }
/* --- Movil: su propia composicion --------------------------------------- */
@media (max-width:560px){
.cta.cierre{ padding-block:76px 52px; }
.cierre__marca{ max-width:none; }
.cierre__go{ width:30px; height:30px; }
/* 10,6vw: "hasta tu casa." (7,7em) cabe entera desde 360px */
.cierre__tit{ font-size:clamp(38px, 10.6vw, 48px); line-height:1.02; }
.cierre__acc{ gap:6px; }
.cierre .cierre__cta{ width:100%; padding:18px 24px; }
.cierre__wa{ width:100%; justify-content:center; }
.cierre__pasos{ grid-template-columns:1fr; gap:12px; margin-top:40px; padding-top:20px; }
}
/* Reduced-motion: el cierre aparece ya compuesto. La regla global
(".rv{opacity:1}") pierde contra "html.js .rv" por especificidad y el
resto del sitio sigue entrando con fundido; aqui se gana explicitamente. */
@media (prefers-reduced-motion:reduce){
html.js .cierre .rv{ opacity:1; transform:none; }
html.js .cierre .word i{ transform:none; }
}
/* ==========================================================================
COTIZADOR v2 — la solicitud se arma en vivo (2026-09-11)
--------------------------------------------------------------------------
Antes: codigo "TG-4467" derivado del texto (parecia un envio real), caja
3D tipo emoji, ruta en bucle infinito, casillero y peso con respuesta
PRESELECCIONADA (el panel decia "Todavia no" sin que nadie contestara),
aviso en rojo con rebote, y una vista previa del mensaje que repetia el
panel (+240px). En movil el panel iba ARRIBA y el conjunto medía 2,16
pantallas completo.
Ahora: el panel refleja lo que la persona escribe/elige, sin calcular
nada. Estados en data-estado (vacio | producto | parcial | listo) y
data-n (0-3 datos) sobre .quote-layout. Paper Go avanza UNOS pasos: es
una solicitud preparandose, no un envio.
========================================================================== */
@property --qp{ syntax:"<number>"; inherits:true; initial-value:.04; }
/* --- Tarjeta blanca = formulario + envio (el panel es hermano) ---------- */
.quote-layout{ grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); }
.quote-card{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
padding:clamp(24px, 3.4vw, 42px); box-shadow:0 26px 70px rgba(12,24,60,.08);
}
.quote{ background:none; border:0; border-radius:0; padding:0; box-shadow:none; }
.quote-card .quote__send{ margin-top:24px; }
.field > .field__lbl{ font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:-.01em; color:var(--ink); }
/* Aviso humano, no rojo de error: ambar y sin rebote. #8A5A00 = 6,4:1 */
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] textarea:focus{ border-color:#B07515; box-shadow:0 0 0 4px rgba(176,117,21,.14); } /* 3,9:1 */
.field__err{ color:#8A5A00; }
.field__err .ti{ color:#B07515; }
/* CTA: el mismo lenguaje que el resto de la home, sin magnetismo */
.quote__send .btn{ transition:translate .3s var(--ease-out), scale .15s ease, box-shadow .3s var(--ease-out), background-color .2s ease; }
.quote__send .btn--mint:hover, .quote__send .btn--mint:focus-visible{ box-shadow:0 14px 38px rgba(47,209,128,.44); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.quote__send .btn:hover{ translate:0 -1px; }
}
.quote__send .btn:active{ translate:0 0; scale:.985; transition-duration:.08s; }
.quote__aviso{ position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* --- Panel "Tu envio" --------------------------------------------------- */
.qcard{
background:#0D1535; gap:18px; padding:26px 26px 22px;
border:1px solid rgba(255,255,255,.06);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -34px rgba(8,14,40,.5);
}
.qcard__chip{
padding:6px 11px; border-radius:999px; white-space:nowrap;
border:1px solid rgba(255,255,255,.16); color:#AEB8D3; font:600 12px/1 var(--font-body);
transition:color .25s ease, background-color .25s ease, border-color .25s ease;
}
.quote-layout[data-estado="listo"] .qcard__chip{ color:#8FE6BA; background:rgba(47,209,128,.14); border-color:rgba(47,209,128,.45); }
.qcard__lbl{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:#AEB8D3; }
.qcard__lbl > .ti{ font-size:15px; color:#8FE6BA; }
/* El producto tal cual lo escribieron: textContent, dos lineas maximo */
.qcard__item{
margin:8px 0 0; min-height:2.6em;
font-family:var(--font-display); font-size:19px; font-weight:600; line-height:1.3; letter-spacing:-.02em; color:#fff;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere;
}
.qcard__item.is-vacio{ color:#8B94AC; font-weight:500; } /* 5,8:1 */
/* Check discreto por dato completado */
.qcard__ok{
display:grid; place-items:center; flex:none; width:18px; height:18px; margin-left:auto; border-radius:50%;
background:var(--mint); color:var(--navy-900); opacity:0; transform:scale(.6);
transition:opacity .2s ease, transform .3s var(--ease-out);
}
.qcard__ok .ti{ font-size:11px; stroke-width:3; }
[data-listo="true"] > .qcard__ok, [data-listo="true"] > .qcard__lbl > .qcard__ok{ opacity:1; transform:none; }
.qcard__rows{ display:grid; gap:0; margin:0; }
.qcard__rows > div{ display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:0; }
.qcard__rows span{ font-size:13px; color:#AEB8D3; }
.qcard__rows b{ margin-left:auto; font-family:var(--font-display); font-size:14px; font-weight:600; color:#8B94AC; text-align:right; }
.qcard__rows [data-listo="true"] b{ color:#fff; }
.qcard__rows .qcard__ok{ margin-left:0; }
/* Cambio de valor: aparece desde 4px abajo, una vez (no en cada tecla) */
.qcard .is-cambia{ animation:qcard-valor .24s var(--ease-out) 1; }
@keyframes qcard-valor{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
/* Ruta: gana contraste y Paper Go avanza un poco con cada dato */
.qcard__route{ gap:12px; color:#AEB8D3; transition:color .3s ease; }
.qcard__via{ position:relative; flex:1; height:28px; container-type:inline-size; --qp:.04; transition:--qp .5s var(--ease-out); }
.quote-layout[data-n="1"] .qcard__via{ --qp:.12; }
.quote-layout[data-n="2"] .qcard__via{ --qp:.2; }
.quote-layout[data-n="3"] .qcard__via{ --qp:.28; }
.qcard__via .qcard__line{ position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; flex:none; background:rgba(255,255,255,.12); transition:background-color .3s ease; }
.qcard__hecho{ position:absolute; inset:0; border-radius:inherit; background:var(--mint); transform-origin:0 50%; transform:scaleX(var(--qp)); }
.qcard__fin{ position:absolute; right:0; top:50%; width:8px; height:8px; margin:-4px -4px 0 0; border-radius:50%; background:#0D1535; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); }
.qcard__go{ position:absolute; top:50%; left:0; width:28px; height:28px; border-radius:50%; background:#0D1535; transform:translate(calc(var(--qp) * 100cqw - 50%), -50%); }
.qcard__go path:first-child{ fill:var(--mint); }
.qcard__go path:last-child{ fill:var(--mint-tint); }
.quote-layout[data-estado="listo"] .qcard__route{ color:#fff; }
.quote-layout[data-estado="listo"] .qcard__via .qcard__line{ background:rgba(255,255,255,.26); }
.qcard__estado{ margin:0; min-height:1.45em; font-size:13.5px; line-height:1.45; color:#DDE3F0; }
.quote-layout[data-estado="listo"] .qcard__estado{ color:#8FE6BA; font-weight:600; }
.qcard__foot{ margin:0; color:#8B94AC; }
/* --- Tablet y movil: formulario -> panel compacto -> boton ----------------
La tarjeta blanca se "abre" (display:contents: es un div sin semantica)
y sus dos piezas pasan a la rejilla, con el panel entre medias. */
@media (max-width:900px){
.quote-layout{ grid-template-columns:1fr; gap:14px; }
.quote-card{ display:contents; }
.quote{
order:1; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
padding:22px 20px; box-shadow:0 20px 50px rgba(12,24,60,.07);
}
.quote-side{ order:2; }
.quote-card .quote__send{ order:3; margin-top:4px; }
.qcard{ gap:12px; padding:18px 18px 16px; }
.qcard__item{ margin-top:6px; min-height:1.3em; font-size:16.5px; }
.qcard__rows > div{ padding:9px 0; }
}
@media (max-width:760px){
.seg{ flex-direction:row; } /* Si / Todavia no caben en fila */
.quote__grid{ gap:18px; }
#cotizar .lede{ margin:14px auto 28px !important; } /* el margen venia en linea */
.field textarea{ min-height:80px; }
.qcard__foot{ font-size:12px; }
}
@media (prefers-reduced-motion:reduce){
.qcard__via, .qcard__ok, .qcard__chip, .qcard__route{ transition:none; }
.qcard .is-cambia{ animation:none; }
}
/* ==========================================================================
PERSONAL SHOPPER (home) — polish de cierre (2026-09-11)
--------------------------------------------------------------------------
Mismo concepto (texto + chat), afinado. Todo cuelga de .ps-home: el chat
de personal-shopper.html no cambia.
========================================================================== */
.ps-home{ padding-block:clamp(72px, 9vw, 124px); }
.ps-home__lede{ margin-top:18px; max-width:34em; }
/* Pasos: los mismos tres, mas compactos y con un filo que los une */
.ps-home .ps-home__pasos{ gap:10px; margin:26px 0 30px; padding:0; }
.ps-home .ps-home__pasos li{ gap:12px; font-size:15.5px; color:var(--ink); }
.ps-home .ps-home__pasos .ti{ width:34px; height:34px; min-width:34px; min-height:34px; padding:8px; border-radius:11px; }
/* CTA: el lenguaje del resto de la home, sin magnetismo. La entrada (.rv)
va en el contenedor: GSAP escribe translate/scale en linea en lo que
anima y anularia el hover y el pulsado del boton. */
.ps-home__cta{ transition:translate .3s var(--ease-out), scale .15s ease, background-color .2s ease, box-shadow .3s var(--ease-out); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.ps-home__cta:hover{ translate:0 -1px; box-shadow:0 12px 28px rgba(8,14,40,.22); }
}
.ps-home__cta:active{ translate:0 0; scale:.985; transition-duration:.08s; }
/* --- El chat ------------------------------------------------------------ */
.ps-home__chat{ margin:0; position:relative; z-index:1; }
/* Marco del tamano del telefono: los dos badges se colocan respecto al
CHAT, no a la columna. Antes iban a -26px de la columna y a 1024-1200
salian del ancho de la pagina. */
.ps-home__marco{ position:relative; max-width:400px; margin-inline:auto; }
.ps-home .ps-chat{
position:relative; z-index:2; max-width:none; margin:0;
padding:18px 18px 20px; border-radius:26px;
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 28px 60px -28px rgba(12,24,60,.28);
}
.ps-chat__bar{ display:flex; align-items:center; gap:11px; padding:2px 4px 14px; margin-bottom:16px; border-bottom:1px solid var(--line-soft); }
.ps-chat__bar b{ display:block; font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.ps-chat__bar span{ display:block; font-size:12px; color:var(--ink-soft); } /* sin "en linea" */
.ps-home .msgs--home{ min-height:0; gap:8px; }
.ps-home .msgs--home .msg{ max-width:78%; padding:10px 14px; font-size:14.5px; line-height:1.45; border-radius:18px; }
.ps-home .msgs--home .msg--in{ background:var(--mist); color:var(--ink); border-bottom-left-radius:6px; }
/* Las respuestas de TraiGo en su navy, no en el verde de WhatsApp */
.ps-home .msgs--home .msg--out{ background:#0D1535; color:#fff; font-weight:500; border-bottom-right-radius:6px; }
/* Mismo remitente seguido: menos aire entre burbujas */
.ps-home .msgs--home .msg--in + .msg--in, .ps-home .msgs--home .msg--out + .msg--out{ margin-top:-4px; }
.ps-home .msgs--home .msg__link{
display:flex; align-items:center; gap:6px; margin-top:6px; padding-top:6px;
border-top:1px solid rgba(12,24,60,.08); font-size:13px; font-weight:500; color:#12723F; /* 5,5:1 sobre mist (mint-700 daba 3,7) */
}
.ps-home .msgs--home .msg__link .ti{ font-size:14px; }
.ps-home__nota{ margin-top:12px; text-align:center; font-size:12.5px; color:var(--ink-soft); } /* 5,7:1 */
/* Dos badges, pequenos y quietos. Solo entran una vez (JS). */
.ps-badge{
position:absolute; z-index:3; display:grid; place-items:center;
width:44px; height:44px; border-radius:14px; font-size:19px;
background:#fff; border:1px solid var(--line); box-shadow:0 12px 26px -10px rgba(12,24,60,.22);
}
.ps-badge--a{ top:-14px; left:-16px; color:var(--mint-600); }
.ps-badge--b{ bottom:18px; right:-16px; color:var(--navy-700); } /* junto a la ultima burbuja (a la izquierda): no tapa ninguna */
html.js .ps-badge{ opacity:0; transform:translateY(8px); }
html.failsafe .ps-badge{ opacity:1 !important; transform:none !important; }
/* --- Tablet y movil: titular -> chat -> pasos + CTA ---------------------- */
@media (max-width:1000px){
.ps-home__duo{ gap:30px; }
.ps-home__copy{ display:contents; }
.ps-home__intro{ order:1; }
.ps-home__chat{ order:2; }
.ps-home__accion{ order:3; }
.ps-home .ps-home__pasos{ margin-top:0; }
}
@media (max-width:760px){
.ps-home__duo{ gap:26px; }
.ps-badge{ display:none; } /* sin sitio real a los lados del chat */
.ps-home .ps-chat{ padding:16px 14px 18px; }
.ps-home .msgs--home .msg{ max-width:84%; font-size:14px; }
.ps-home__cta{ width:100%; }
.ps-home .ps-home__pasos{ margin-bottom:22px; }
}
@media (prefers-reduced-motion:reduce){
html.js .ps-home .msg, html.js .ps-badge{ opacity:1; transform:none; }
}
/* ==========================================================================
FAQ (home) — polish de cierre (2026-09-11)
--------------------------------------------------------------------------
Antes: <details>/<summary> sin transicion (abria de golpe), mismo borde
abierto que cerrado, y la tarjeta lateral con el CTA menta con glow
compitiendo con la lista y con el CTA final.
Ahora: <button aria-expanded> + panel; la altura se anima con
grid-template-rows (0fr -> 1fr: sin medir en JS, sin saltos), el chevron
gira, el item abierto gana un borde menta discreto. La tarjeta, en navy
y mas callada: acompana, no compite.
========================================================================== */
.faq-sec{ padding-block:clamp(72px, 9vw, 124px); }
.faq-sec .faq-layout{ grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr); gap:32px; margin-top:clamp(28px, 3.5vw, 44px); }
.faq--acc{ display:grid; gap:10px; }
.faq__item{
background:#fff; border:1px solid var(--line); border-radius:16px;
transition:border-color .25s ease, box-shadow .3s var(--ease-out);
}
.faq__item:hover{ border-color:#CFD8E6; }
.faq__item.is-abierta{ border-color:rgba(24,144,85,.4); box-shadow:0 14px 34px -20px rgba(12,24,60,.2); }
.faq__h{ margin:0; font-size:inherit; }
.faq__q{
width:100%; min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:18px 20px 18px 22px; background:none; border:0; border-radius:16px; cursor:pointer; text-align:left;
font-family:var(--font-display); font-weight:600; font-size:16px; line-height:1.35; letter-spacing:-.01em; color:var(--ink);
transition:color .2s ease;
}
/* #12723F: el verde de marca oscurecido hasta AA sobre blanco (mint-700 da 4,07:1) */
.faq__q:hover{ color:#12723F; }
.faq-sec .faq__body a{ color:#12723F; text-underline-offset:2px; }
.faq__q:focus-visible{ border-radius:16px; outline-offset:-3px; }
/* Chevron dentro de un disco: gira media vuelta, corta */
.faq__chev{
flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
background:var(--mist); transition:transform .3s var(--ease-out), background-color .2s ease;
}
.faq__chev::before{
content:""; width:8px; height:8px; margin-top:-3px;
border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:rotate(45deg);
transition:border-color .2s ease;
}
.faq__item.is-abierta .faq__chev{ transform:rotate(180deg); background:var(--mint-tint); }
.faq__item.is-abierta .faq__chev::before{ border-color:var(--mint-700); }
/* Panel: sin JS, abierto. Con JS, plegado por altura de rejilla */
.faq__a{ display:grid; grid-template-rows:1fr; }
.faq__in{ min-height:0; overflow:hidden; }
.faq-sec .faq__body{ max-width:62ch; padding:0 22px 20px; font-size:15px; line-height:1.7; color:var(--ink-soft); }
html.js .faq__a{ grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .32s var(--ease-out), visibility 0s linear .32s; }
html.js .faq__item.is-abierta > .faq__a{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .32s var(--ease-out), visibility 0s; }
html.js .faq-sec .faq__body{ opacity:0; transform:translateY(-4px); transition:opacity .2s ease, transform .3s var(--ease-out); }
html.js .faq-sec .faq__item.is-abierta .faq__body{ opacity:1; transform:none; transition-delay:.06s; }
html:not(.js) .faq__chev{ display:none; }
html.failsafe .faq__a{ grid-template-rows:1fr !important; visibility:visible !important; }
html.failsafe .faq-sec .faq__body{ opacity:1 !important; transform:none !important; }
/* --- Tarjeta lateral: humana, directa y secundaria --------------------- */
.faq-sec .faq-help{ padding:26px 24px 24px; gap:10px; box-shadow:0 16px 40px -26px rgba(12,24,60,.22); }
.faq-sec .faq-help > .ti{ width:40px; height:40px; min-width:40px; min-height:40px; padding:10px; border-radius:12px; margin-bottom:2px; }
.faq-sec .faq-help h3{ font-size:18px; letter-spacing:-.015em; }
.faq-sec .faq-help p{ font-size:14.5px; }
.faq-sec .faq-help .btn{
width:100%; margin-top:8px; padding:14px 20px; font-size:14.5px;
transition:translate .3s var(--ease-out), scale .15s ease, background-color .2s ease, box-shadow .3s var(--ease-out);
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.faq-sec .faq-help .btn:hover{ translate:0 -1px; box-shadow:0 12px 28px rgba(8,14,40,.2); }
}
.faq-sec .faq-help .btn:active{ translate:0 0; scale:.985; transition-duration:.08s; }
/* --- Tablet y movil: la tarjeta va DESPUES de las preguntas ------------ */
@media (max-width:900px){
.faq-sec .faq-layout{ grid-template-columns:1fr; gap:18px; }
.faq-sec .faq-side{ position:static; }
}
@media (max-width:760px){
.faq__q{ min-height:56px; padding:15px 14px 15px 18px; font-size:15.5px; }
.faq-sec .faq__body{ padding:0 18px 18px; font-size:14.5px; }
.faq-sec .faq-help{ padding:22px 20px 20px; }
}
@media (prefers-reduced-motion:reduce){
html.js .faq__a, html.js .faq__item.is-abierta > .faq__a, .faq__chev, html.js .faq-sec .faq__body{ transition:none; }
}
/* ==========================================================================
FRANJA DE MARCAS (home) — SVG reales (2026-09-11)
--------------------------------------------------------------------------
Sustituye al marquee de nombres en gris. Colores oficiales, a opacidad
.78 en reposo (no grita como un banner) y 1 al pasar el raton.
========================================================================== */
.marcas{
--H:30px; /* alto de la ranura comun */
--g:72px; /* hueco entre logos (y al final de cada set) */
--dur:56s; /* un set entero: ~24px/s, editorial */
background:var(--paper); border-block:1px solid var(--line-soft); padding:24px 0;
}
.marcas__sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.marcas__in{ display:flex; align-items:center; gap:40px; }
.marcas__tit{
flex:none; margin:0; font-family:var(--font-display); font-size:12px; font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
/* La ventana difumina los bordes: los logos entran y salen, no se cortan en seco */
.marcas__ventana{
position:relative; flex:1; min-width:0; overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marcas__pista{ display:flex; width:max-content; animation:marcas-mover var(--dur) linear infinite; will-change:transform; }
@keyframes marcas-mover{ to{ transform:translateX(-50%); } }
/* Mismo hueco ENTRE logos y al FINAL de cada set: -50 % cae justo en el
inicio del segundo set y el bucle no da el salto de medio hueco. */
.marcas__set{ display:flex; align-items:center; gap:var(--g); padding:0 var(--g) 0 0; margin:0; list-style:none; }
.marcas__set li{
display:flex; align-items:center; justify-content:center; height:calc(var(--H) * 1.3);
opacity:.78; transition:opacity .3s ease, translate .3s var(--ease-out);
}
/* Compensacion optica. Medido sobre el render: Walmart 79 y eBay 80 de tinta
media frente a 169-178 de Nike, Apple y adidas. Son logos claros a los que
el .78 general les quita la mitad del peso. NO se altera color, forma ni
proporcion de ningun logotipo: solo se les devuelve la opacidad. */
.marcas__set li:has(use[href="#logo-walmart"]),
.marcas__set li:has(use[href="#logo-ebay"]){ opacity:1; filter:saturate(1.10) contrast(1.08); }
/* Respaldo sin :has(). Depende del ORDEN del set (Amazon, Walmart, eBay, ...):
si el orden cambia, hay que revisar esta regla. */
@supports not selector(:has(*)){
.marcas__set li:nth-child(2),
.marcas__set li:nth-child(3){ opacity:1; filter:saturate(1.10) contrast(1.08); }
}
.marca{ display:block; width:auto; height:calc(var(--H) * var(--h)); overflow:visible; }
@media (hover:hover) and (pointer:fine){
.marcas__ventana:hover .marcas__pista{ animation-play-state:paused; }
.marcas__set li:hover{ opacity:1; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.marcas__set li:hover{ translate:0 -1px; }
}
/* --- Movil: etiqueta encima, logos algo mas pequenos y mas lentos ------- */
@media (max-width:760px){
.marcas{ --H:24px; --g:48px; --dur:48s; padding:16px 0 18px; }
.marcas__in{ flex-direction:column; gap:10px; }
.marcas__tit{ font-size:11px; }
.marcas__ventana{ align-self:stretch; margin-inline:-22px; }
.marcas__set li{ opacity:.85; }
}
/* --- Reduced-motion: un solo set, quieto, en filas centradas ------------- */
@media (prefers-reduced-motion:reduce){
.marcas__pista{ animation:none; width:auto; justify-content:center; }
.marcas__set[aria-hidden="true"]{ display:none; }
.marcas{ --g:40px; } /* las nueve caben en una fila en escritorio */
.marcas__set{ flex-wrap:wrap; justify-content:center; row-gap:14px; padding:0; }
.marcas__ventana{ -webkit-mask-image:none; mask-image:none; }
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){
.marcas{ --g:26px; }
}
/* ==========================================================================
QA GLOBAL (2026-09-11) — correcciones de causa
========================================================================== */
/* 1) El primer pantallazo termina en el marquee, no en una franja navy.
En pantallas altas (1440x900: 45px; 1920x1080: 204px) se veia el padding
vacio de "El viaje" bajo las marcas. El hero crece hasta 100svh menos el
marquee (89px). Tope: la foto es cuadrada y su ancho sigue a la altura
del hero; por encima de (50vw + foto-x - 264px) / .56 la tarjeta del
envio tocaria el paquete (5:4 / 4:3, p. ej. 1280x1024). Ahi el hero se
queda en ese tope y la franja se reduce, no desaparece. */
@media (min-width:1200px){
.hero{
display:flex; flex-direction:column;
min-height:min(calc(100svh - 89px), calc((50vw + max(0px, 728px - 50vw, 1350px - 100vw) - 264px) / .56));
}
.hero > .hero__grid{ flex:1 0 auto; align-content:center; }
}
/* 2) "El viaje" fijo con position:sticky en vez del pin "fixed" de
ScrollTrigger (cada cambio static<->fixed contaba como layout shift).
Mismo recorrido: 1250px. Solo escritorio y con movimiento; en movil,
reduced-motion o sin JS la seccion va en el flujo normal. */
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
/* espaciador DENTRO del contenido: un sticky no puede moverse sobre el
padding de su contenedor, solo sobre su content box */
html.js .journey-pista::after{ content:""; display:block; height:1250px; }
/* Fija, ocupa la pantalla entera: con su alto natural (720-905px) dejaba
ver bajo ella 27-175px de la pista vacia (una banda blanca). */
html.js .journey-pista > .journey{
position:sticky; top:0; min-height:100vh; min-height:100svh;
display:flex; flex-direction:column; justify-content:center;
}
}
/* 3) Reduced-motion GLOBAL: todo ya compuesto. La regla antigua
(".rv{opacity:1}") perdia contra "html.js .rv" por especificidad y las
secciones seguian entrando con fundido de 0,9 s. Aqui se anulan TODOS
los estados iniciales ocultos, tambien los que GSAP escribe en linea. */
@media (prefers-reduced-motion:reduce){
html.js .rv, html.js .bento .tile, html.js .msg, html.js .ps-badge{
opacity:1 !important; transform:none !important; translate:none !important;
}
html.js .word i, html.js .hero__foto img{ transform:none !important; }
}
/* 4) Movil: el WhatsApp flotante se aparta mientras pasa por debajo una
seccion con su propio WhatsApp o un formulario (ver script.js). */
@media (max-width:760px){
body.wa-seccion-visible > .fab{ visibility:hidden; pointer-events:none; }
}
/* ==========================================================================
AUDITORIA VISUAL FINAL (2026-09-11)
========================================================================== */
/* 1) Tienda reconocida en el panel del cotizador. Reutiliza el logo real de
la franja de marcas (clonado por JS), sobre un chip blanco: los logos a
color no se leen sobre navy. Solo aparece si la tienda es inequivoca.
La fila reserva la altura del chip para que al aparecer no mueva nada. */
.qcard__lbl{ min-height:22px; }
.qcard__tienda{
--H:13px; margin-left:auto; display:inline-flex; align-items:center; height:22px; padding:0 9px;
border-radius:999px; background:#fff; box-shadow:0 1px 0 rgba(255,255,255,.12);
}
.qcard__tienda[hidden]{ display:none; }
.qcard__tienda .marca{ height:calc(var(--H) * var(--h)); max-height:18px; }
.qcard__tienda:not([hidden]) + .qcard__ok{ margin-left:0; }
@media (prefers-reduced-motion:no-preference){
.qcard__tienda:not([hidden]){ animation:qcard-valor .24s var(--ease-out) 1; }
}
/* ...y en el chat de Personal Shopper, la marca de Amazon en lugar del clip */
.ps-home .msgs--home .msg__tienda{ flex:none; width:auto; height:13px; aspect-ratio:1.1; }
/* 3) Footer: el dato real junto a la etiqueta, sin partirse */
.fcol__dato{ white-space:nowrap; }
/* ==========================================================================
RASTREAR v2 (2026-09-15) — herramienta, no landing
El panel de consulta es el MISMO componente de la home (.rastreo/.estado):
aqui solo se define lo que lo rodea, que es poco a proposito. Sin hero
grande, sin tarjetas, sin foto y sin CTA de marketing.
========================================================================== */
.rt{ background:var(--mist); }
/* Esta pagina no tiene hero oscuro: sin fondo propio, los enlaces del nav se
perdian sobre el gris claro hasta que aparecia el estado is-stuck. */
body[data-page="rastrear"] .nav,
body[data-page="privacidad"] .nav{ background:rgba(10,17,45,.94); border-color:rgba(255,255,255,.09); box-shadow:0 14px 40px rgba(4,8,26,.32); }
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
body[data-page="rastrear"] .nav,
body[data-page="privacidad"] .nav{ background:rgba(10,17,45,.88); backdrop-filter:blur(16px) saturate(170%); -webkit-backdrop-filter:blur(16px) saturate(170%); }
}
.rt-tool{ padding:clamp(104px,11vw,132px) 0 clamp(56px,7vw,88px); }
/* minmax(0,1fr): sin esto la columna toma el min-content del input (~371px)
y la pagina entera desborda a lo ancho por debajo de 430px. */
.rt-tool__in{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; }
.rt-cab{ max-width:620px; margin-bottom:clamp(22px,3vw,30px); text-align:center; }
.rt-cab .eyebrow{ margin-bottom:14px; }
.rt-tit{ font-size:clamp(30px,3.6vw,44px); letter-spacing:-.03em; }
.rt-sub{ margin-top:14px; font-size:clamp(15.5px,1.3vw,17.5px); line-height:1.6; color:var(--ink-soft); }
/* El panel manda: ancho comodo y sombra para separarlo del fondo. */
.rt .rastreo{ width:100%; max-width:660px; box-shadow:0 30px 70px -40px rgba(8,14,40,.55); }
/* Boton Pegar: aparece solo si el navegador deja leer el portapapeles. */
.rastreo__pegar{ flex:none; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(255,255,255,.05); font:600 13.5px/1 var(--font-display); color:#DDE3F0; cursor:pointer; transition:background .2s ease,border-color .2s ease; }
.rastreo__pegar:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }
.rastreo__pegar .ti{ font-size:16px; color:#8FE6BA; }
.rastreo__pegar[hidden]{ display:none; }
/* Pegar y Consultar comparten linea solo aqui, asi que aqui se igualan a 44px. */
.rt .rastreo__campo .btn{ min-height:44px; }
.rt-nota{ max-width:660px; margin-top:14px; font-size:13.5px; line-height:1.5; color:var(--ink-soft); text-align:center; }
/* Significado de los estados: plegado. No repite Como funciona, la enlaza. */
.rt-info{ width:100%; max-width:660px; margin-top:clamp(26px,3vw,34px); border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; }
.rt-info summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding:16px 22px; border-radius:var(--radius-lg); cursor:pointer; list-style:none; font:600 16.5px/1.35 var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.rt-info summary::-webkit-details-marker{ display:none; }
.rt-info__tit{ margin:0; font:inherit; letter-spacing:inherit; color:inherit; }
.rt-info summary .ti{ flex:none; font-size:20px; color:var(--mint-700); transition:transform .3s var(--ease-out); }
.rt-info[open] summary .ti{ transform:rotate(180deg); }
.rt-info__lista{ list-style:none; display:grid; padding:0 22px; }
.rt-info__lista li{ display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; align-items:start; padding:14px 0; border-top:1px dashed var(--line); }
.rt-info__lista .ti{ width:36px; height:36px; padding:9px; border-radius:11px; background:var(--mint-tint); color:var(--mint-700); }
.rt-info__lista b{ display:block; font:600 15.5px/1.35 var(--font-display); color:var(--ink); }
.rt-info__lista span{ display:block; margin-top:2px; font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
.rt-link{ display:inline-flex; align-items:center; gap:8px; min-height:48px; margin:4px 22px 8px; font:600 14.5px/1 var(--font-display); color:#12723F; }
.rt-link .ti{ font-size:16px; transition:transform .3s var(--ease-out); }
.rt-link:hover .ti--flecha{ transform:translateX(3px); }
/* Ayuda humana: una banda corta, no un CTA de cierre. */
.rt-ayuda{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; width:100%; max-width:660px; margin-top:16px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; }
.rt-ayuda__txt{ display:grid; gap:4px; min-width:0; }
.rt-ayuda__tit{ margin:0; font:600 16px/1.3 var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.rt-ayuda__txt p{ font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
.rt-ayuda .btn{ flex:none; }
@media (max-width:760px){
.rt-tool{ padding:96px 0 48px; }
.rt-cab{ text-align:left; justify-self:stretch; }
.rt-nota{ text-align:left; }
.rt-info summary{ min-height:56px; padding:14px 18px; font-size:15.5px; }
.rt-info__lista{ padding:0 18px; }
.rt-link{ margin:4px 18px 8px; }
.rt-ayuda{ padding:18px; }
.rt-ayuda .btn{ width:100%; }
}
@media (max-width:560px){
/* En telefono el tracking manda: con Pegar y Consultar en la misma linea el
campo bajaba a 75px en un iPhone SE. Se apila, el numero ocupa la linea
entera y los botones quedan debajo, mas faciles de tocar. Es el mismo
componente de la home; solo se reacomoda donde no cabe. */
.rt .rastreo__campo{ flex-wrap:wrap; border-radius:26px; padding:6px; }
.rt .rastreo__campo input{ flex:1 0 100%; padding:13px 14px; } /* 45px de alto: objetivo tactil */
.rt .rastreo__pegar{ flex:1 1 auto; justify-content:center; }
.rt .rastreo__campo .btn{ flex:2 1 auto; justify-content:center; }
.rt .rastreo__campo .btn .ti{ display:inline-block; }
}
/* Nota contextual del resultado futuro: la escribe la operacion, es opcional y
no cambia el progreso. Sin nota, el bloque no existe. */
.estado__nota{ display:flex; gap:9px; margin:12px 0 0; padding:11px 14px; border-radius:12px; background:rgba(255,255,255,.06); border-left:3px solid var(--mint); font-size:14px; line-height:1.5; color:#DDE3F0; }
.estado__nota[hidden]{ display:none; }
/* Ranuras del resultado con backend (hoy ocultas en ambos trackers): Tracking,
Última actualización y Peso. Solo se mostrarán con datos reales. */
.estado__datos{ display:grid; gap:10px 26px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--r-line); }
.estado__datos[hidden]{ display:none; }
.estado__datos dt{ font:600 11px/1.4 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--r-faint); }
.estado__datos dd{ margin:2px 0 0; font-size:14.5px; color:#fff; overflow-wrap:anywhere; }
/* ==== FIN RASTREAR v2 ==== */
/* ==========================================================================
BENEFICIOS v2 (2026-09-15)
No explica el proceso: responde POR QUÉ TraiGo, partiendo de las dudas que
frenan una compra. Pieza propia: el MOSTRADOR DE PREGUNTAS (elige la duda,
recibe respuesta + hecho + CTA). Después: lo que sabes en cada momento,
perfiles, costos, transparencia y cobertura. Todo acotado a .bn-*.
========================================================================== */
.bn-hero,.bn-claro,.bn-cierre{ --focus:var(--mint); }
.bn-mostrador,.bn-resp{ --focus:var(--mint-700); }
.bn-hero__tit u,.bn-claro h2 u{ text-decoration:none; color:var(--mint); }
@keyframes bnAsienta{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* ---- Cabeceras ---- */
.bn-cab{ max-width:660px; margin-bottom:clamp(30px,4vw,44px); }
.bn-cab--centro{ margin-inline:auto; text-align:center; }
.bn-cab__lead{ margin-top:16px; font-size:clamp(16px,1.35vw,18px); line-height:1.65; color:var(--ink-soft); }
/* ---- Hero + mostrador ---- */
/* EL ÍNDICE. La pagina se llama "esta lleno de preguntas": las preguntas son
la pagina. Una sola columna centrada — titular, las cinco preguntas como
indice y la respuesta a lo ancho — en vez de titular a la izquierda y
widget a la derecha. El mostrador deja de ser tarjeta lateral y pasa a ser
el cuerpo del hero; su funcionamiento no cambia en nada. */
.bn-hero{
position:relative; overflow:hidden; color:#fff;
padding:clamp(104px,10.5vw,132px) 0 clamp(52px,5.5vw,74px);
background:radial-gradient(58% 46% at 50% -8%,rgba(24,42,104,.5),transparent 68%),var(--navy-900);
box-shadow:0 26px 40px -30px rgba(8,14,40,.9); /* salida hacia Momentos */
}
.bn-hero .aurora{ display:none; }
.bn-hero__in{
position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr);
gap:clamp(22px,2.8vw,36px); justify-items:center; text-align:center;
max-width:1040px; margin-inline:auto;
}
.bn-hero__copy{ max-width:900px; }
.bn-hero__in::after{ /* folio, como en Como funciona */
content:"PLIEGO 03 · LAS RESPUESTAS"; position:absolute; left:50%; translate:-50% 0;
bottom:-26px; font:600 11px/1 var(--font-display); letter-spacing:.24em;
color:rgba(255,255,255,.34);
}
.bn-hero__tit{ font-size:clamp(36px,5vw,64px); letter-spacing:-.035em; line-height:1.04; color:#fff; }
.bn-hero__sub{ max-width:58ch; margin:18px auto 0; text-align:center; font-size:clamp(16.5px,1.35vw,18.5px); line-height:1.6; color:#C6CFE3; }
.bn-mostrador{ display:grid; gap:18px; width:100%; }
/* El rotulo "¿Que te frena?" sobra: el titular ya lo dice. */
.bn-mostrador__tit{ display:none; }
/* Reparto INTENCIONAL 3+2. Con flex-wrap el corte dependia del largo de cada
pregunta y salia un 4+1 accidental; con seis columnas es deterministico.
OJO: si algun dia cambia el numero de preguntas, hay que rehacer esto. */
.bn-preguntas{
display:grid; grid-template-columns:repeat(6,minmax(0,auto));
justify-content:center; align-items:stretch; gap:10px;
padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.12);
}
.bn-preg:nth-child(1){ grid-column:1 / span 2; }
.bn-preg:nth-child(2){ grid-column:3 / span 2; }
.bn-preg:nth-child(3){ grid-column:5 / span 2; }
.bn-preg:nth-child(4){ grid-column:2 / span 2; }
.bn-preg:nth-child(5){ grid-column:4 / span 2; }
.bn-preg{ appearance:none; display:inline-flex; align-items:center; justify-content:center;
gap:8px; min-height:46px; padding:0 18px; border:1px solid rgba(255,255,255,.2);
border-radius:999px; background:transparent; font:600 14.5px/1.2 var(--font-display);
color:#DCE3F2; cursor:pointer;
transition:background .22s ease,border-color .22s ease,color .22s ease,transform .2s var(--ease-out); }
/* El anillo por defecto se perdia sobre navy. */
.bn-preg:focus-visible{ outline:3px solid #8FE6BA; outline-offset:3px; }
.bn-preg .ti{ flex:none; font-size:17px; color:#8FE6BA; transition:color .22s ease; }
.bn-preg:hover{ background:rgba(255,255,255,.08); color:#fff; }
.bn-preg:active{ transform:scale(.97); }
.bn-preg[aria-selected="true"]{ border-color:var(--mint); background:var(--mint); color:var(--navy-900); }
.bn-preg[aria-selected="true"] .ti{ color:var(--navy-900); }
.bn-respuestas{ position:relative; width:100%; min-height:236px; } /* fija el alto: cambiar de pregunta no mueve la página */
.bn-resp{ display:grid; align-content:start; gap:12px; padding:clamp(22px,2.6vw,30px); border-radius:20px; background:#fff; color:var(--ink); text-align:left; max-width:780px; margin-inline:auto; box-shadow:0 20px 44px -30px rgba(0,0,0,.5); }
html.js .bn-resp:not([hidden]){ animation:bnAsienta .3s var(--ease-out); }
.bn-resp[hidden]{ display:none; }
html:not(.js) .bn-resp[hidden]{ display:grid; }
html:not(.js) .bn-respuestas{ display:grid; gap:12px; min-height:0; }
html:not(.js) .bn-preguntas{ display:none; }
.bn-resp__preg{ font:600 11.5px/1.3 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.bn-resp__tit{ font:700 clamp(21px,2.1vw,27px)/1.2 var(--font-display); letter-spacing:-.025em; color:var(--ink); }
.bn-resp__hecho{ padding:14px 16px; border-radius:14px; background:var(--mist); font-size:14.5px; line-height:1.55; color:var(--ink-soft); }
.bn-resp__hecho b{ color:var(--ink); }
.bn-resp__hecho span{ display:inline-block; margin-right:8px; padding:3px 9px; border-radius:999px; background:var(--mint-tint); font:700 10.5px/1.4 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:#12723F; vertical-align:1px; }
.bn-resp__cta{ justify-self:start; margin-top:2px; }
/* ---- 02 · Lo que sabes en cada momento ---- */
/* Bandas editoriales, no tarjetas. El numeral perfilado es el recurso que
Como funciona ya usa en sus pasos: reutilizarlo construye identidad. */
.bn-momentos__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:0;
counter-reset:momento; border-top:1px solid var(--line); }
.bn-momento{ counter-increment:momento; display:grid;
grid-template-columns:clamp(150px,17vw,230px) minmax(0,1fr);
gap:clamp(20px,3vw,48px); align-items:start;
padding:clamp(26px,3.4vw,42px) 0; border-bottom:1px solid var(--line); }
.bn-momento__cab{ position:relative; display:grid; gap:10px; padding-top:4px; }
.bn-momento__cab::before{
content:counter(momento,decimal-leading-zero);
font:700 clamp(38px,4.6vw,60px)/1 var(--font-display); letter-spacing:-.04em;
color:transparent; -webkit-text-stroke:1.5px var(--mint-700); }
.bn-momento__cab .ti{ display:none; } /* el numeral sustituye al icono */
.bn-momento__cab b{ font:700 clamp(19px,2vw,23px)/1.15 var(--font-display); letter-spacing:-.025em; color:var(--ink); }
.bn-momento__lista{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,34px); }
.bn-momento__lista li{ display:grid; gap:5px; padding:0; }
.bn-momento__lista b{ font:600 16px/1.3 var(--font-display); color:var(--ink); }
.bn-momento__lista span{ font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
/* ---- 03 · Según cómo compras ---- */
/* Modulos asimetricos: el primero es el camino por defecto y ocupa el doble. */
.bn-perfiles__grid{ display:grid; gap:14px; grid-template-columns:1.35fr 1fr;
grid-template-areas:"uno dos" "uno tres"; }
.bn-perfil:nth-child(1){ grid-area:uno; }
.bn-perfil:nth-child(2){ grid-area:dos; }
.bn-perfil:nth-child(3){ grid-area:tres; }
.bn-perfil:nth-child(1) h3{ font-size:clamp(22px,2.4vw,30px); letter-spacing:-.03em; }
.bn-perfil:nth-child(1) p{ font-size:16.5px; max-width:36ch; }
.bn-perfil:nth-child(1) .bn-perfil__ir{ margin-top:auto; padding-top:10px; }
.bn-perfil{ display:grid; align-content:start; gap:12px; padding:26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:0 1px 0 rgba(12,24,60,.03),0 18px 40px -34px rgba(12,24,60,.24); transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .25s ease; }
.bn-perfil:hover{ transform:translateY(-4px); border-color:#D3DAE7; box-shadow:0 1px 0 rgba(12,24,60,.03),0 28px 56px -34px rgba(12,24,60,.34); }
.bn-perfil__ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--navy-900); color:var(--mint); }
.bn-perfil__ic .ti{ font-size:21px; }
.bn-perfil h3{ font-size:19px; letter-spacing:-.02em; }
.bn-perfil p{ font-size:15px; line-height:1.55; color:var(--ink-soft); }
.bn-perfil__chip{ justify-self:start; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px dashed #C9D2E3; border-radius:999px; background:var(--mist); font:600 13px/1 var(--font-body); color:var(--ink); }
.bn-perfil__chip em{ font-style:normal; font-weight:700; color:#12723F; }
.bn-perfil__chip .ti{ font-size:15px; color:var(--mint-700); }
.bn-perfil__chip--ps{ border-style:solid; border-color:var(--line); background:#fff; }
.bn-perfil__ir{ display:inline-flex; align-items:center; gap:7px; margin-top:2px; font:600 14.5px/1 var(--font-display); color:#12723F; }
.bn-perfil__ir .ti{ font-size:16px; transition:transform .3s var(--ease-out); }
.bn-perfil:hover .bn-perfil__ir .ti--flecha{ transform:translateX(3px); }
/* ---- 04 · Lo que cuesta y lo que no ---- */
/* Comparacion, no dos tarjetas: un filete central separa sin encajonar. */
.bn-costos__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
max-width:1040px; margin-inline:auto; align-items:start; }
.bn-costos__col{ display:grid; align-content:start; gap:14px; padding:0; border-radius:0; }
.bn-costos__col--si{ padding-right:clamp(22px,3vw,44px); }
.bn-costos__col--dep{ padding-left:clamp(22px,3vw,44px); border-left:1px solid var(--line); }
.bn-costos__tit{ display:flex; align-items:center; gap:10px; font:600 13px/1.25 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.bn-costos__tit .ti{ flex:none; width:22px; height:22px; padding:0; background:none; }
.bn-costos__col--si .bn-costos__tit .ti{ color:var(--mint-700); }
.bn-costos__col--dep .bn-costos__tit .ti{ color:var(--ink-faint); }
.bn-costos__col ul{ list-style:none; display:grid; }
/* Punto lleno = lo que si sabes. Punto hueco = lo que depende. La diferencia
se ve antes de leer, sin sellos ni escudos. */
.bn-costos__col li{ position:relative; display:grid; gap:3px; padding:14px 0 14px 26px; }
.bn-costos__col li::before{ content:""; position:absolute; left:0; top:20px;
width:9px; height:9px; border-radius:50%; }
.bn-costos__col--si li::before{ background:var(--mint); }
.bn-costos__col--dep li::before{ border:1.5px solid var(--ink-faint); }
.bn-costos__col li + li{ border-top:1px dashed var(--line); }
.bn-costos__col b{ font:600 15.5px/1.35 var(--font-display); color:var(--ink); }
.bn-costos__col span{ font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
.bn-costos__cta{ display:flex; justify-content:center; margin-top:28px; }
/* ---- 05 · Lo que no prometemos + responsabilidad ---- */
.bn-claro{ position:relative; overflow:hidden; padding:var(--pad-section) 0; background:var(--navy-900); color:#fff; }
.bn-claro .aurora--soft b:nth-child(1){ opacity:.18; }
.bn-claro .aurora--soft b:nth-child(2){ opacity:.2; }
.bn-claro__in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(36px,5vw,80px); align-items:start; }
.bn-claro h2{ color:#fff; }
.bn-claro__lead{ max-width:480px; margin-top:20px; font-size:clamp(16px,1.35vw,18px); line-height:1.65; color:#C6CFE3; }
.bn-respaldo{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; margin-top:28px; padding:20px; border:1px solid rgba(47,209,128,.35); border-radius:var(--radius-lg); background:rgba(47,209,128,.08); }
.bn-respaldo .ti{ width:42px; height:42px; padding:10px; border-radius:12px; background:var(--mint); color:var(--navy-900); }
.bn-respaldo p{ display:grid; gap:4px; }
.bn-respaldo b{ font:700 16.5px/1.35 var(--font-display); letter-spacing:-.01em; color:#fff; }
.bn-respaldo span{ font-size:14.5px; line-height:1.5; color:#C6CFE3; }
.bn-claro__lista{ list-style:none; display:grid; }
.bn-claro__lista{ counter-reset:claro; }
.bn-claro__lista li{ counter-increment:claro; display:grid;
grid-template-columns:auto minmax(0,1fr); column-gap:18px; row-gap:5px;
align-items:baseline; padding:16px 0; border-top:1px solid rgba(255,255,255,.1); }
.bn-claro__lista li::before{ content:counter(claro,decimal-leading-zero);
grid-row:span 2; font:700 15px/1 var(--font-display); letter-spacing:.04em; color:#8FE6BA; }
.bn-claro__lista li b, .bn-claro__lista li span{ grid-column:2; }
.bn-claro__lista li:first-child{ border-top:0; padding-top:0; }
.bn-claro__lista b{ font:700 17.5px/1.3 var(--font-display); letter-spacing:-.015em; color:#fff; }
.bn-claro__lista span{ font-size:15px; line-height:1.55; color:#C6CFE3; }
/* ---- 06 · Todo Costa Rica + prueba ---- */
.bn-pais__in{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,72px); align-items:center; }
/* Foto de cobertura (Gemini, variante B2 elegida por el dueño 2026-09-15): el fondo tostado
evita un hueco blanco mientras carga (lazy). */
.bn-pais__foto{ margin:0; overflow:hidden; border-radius:var(--radius-lg); background:#CFC6B7; box-shadow:0 30px 60px -38px rgba(12,24,60,.45); }
.bn-pais__foto img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.bn-pais__lead{ margin-top:18px; font-size:clamp(16px,1.35vw,18px); line-height:1.65; color:var(--ink-soft); }
.bn-pais__datos{ list-style:none; display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:28px; }
.bn-pais__datos li{ display:grid; gap:2px; padding-left:16px; border-left:2px solid var(--mint); }
.bn-pais__datos b{ font:700 26px/1.1 var(--font-display); letter-spacing:-.03em; color:var(--ink); }
.bn-pais__datos span{ font-size:14px; color:var(--ink-soft); }
/* ---- Cierre ---- */
.bn-cierre{ position:relative; overflow:hidden; padding:clamp(80px,9vw,120px) 0; border-bottom:1px solid rgba(255,255,255,.08); background:var(--navy-900); color:#fff; text-align:center; }
.bn-cierre .aurora--soft b:nth-child(1){ opacity:.2; }
.bn-cierre .aurora--soft b:nth-child(2){ opacity:.18; }
.bn-cierre__in{ position:relative; z-index:2; display:grid; justify-items:center; }
.bn-cierre h2{ max-width:16ch; color:#fff; }
.bn-cierre__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px; }
.bn-cierre .btn--mint:hover{ box-shadow:0 14px 38px rgba(47,209,128,.44); }
.bn-cierre__ps{ margin-top:26px; font-size:15px; color:#B8C2DB; }
.bn-cierre__ps a{ display:inline-flex; align-items:center; gap:7px; min-height:44px; font-weight:600; color:var(--mint); border-bottom:1.5px solid rgba(47,209,128,.35); }
.bn-cierre__ps .ti{ font-size:16px; transition:transform .3s var(--ease-out); }
.bn-cierre__ps a:hover .ti--flecha{ transform:translateX(3px); }
/* ---- Tablet ---- */
@media (max-width:1000px){
.bn-claro__in,.bn-pais__in{ grid-template-columns:minmax(0,1fr); }
.bn-hero__in{ gap:26px; text-align:left; justify-items:stretch; }
.bn-hero__sub{ text-align:left; margin-inline:0; }
.bn-hero__in::after{ display:none; }
/* Las cinco preguntas se apilan: antes se deslizaban en horizontal y la
mascara cortaba la ultima. Ahora todas se ven y se tocan enteras. */
.bn-preguntas{ grid-template-columns:minmax(0,1fr); gap:8px; }
.bn-preg:nth-child(1),.bn-preg:nth-child(2),.bn-preg:nth-child(3),
.bn-preg:nth-child(4),.bn-preg:nth-child(5){ grid-column:1; }
.bn-preg{ justify-content:flex-start; min-height:48px; padding:0 16px; }
.bn-momentos__grid,.bn-perfiles__grid{ grid-template-columns:minmax(0,1fr); }
.bn-momento{ grid-template-columns:minmax(0,1fr); gap:16px; }
.bn-momento__lista{ grid-template-columns:minmax(0,1fr); gap:0; }
.bn-momento__lista li{ padding:12px 0; }
.bn-momento__lista li + li{ border-top:1px dashed var(--line); }
.bn-momento__cab{ grid-template-columns:auto auto; align-items:center; justify-content:start; gap:14px; }
.bn-momento__cab::before{ font-size:34px; }
.bn-perfiles__grid{ grid-template-areas:"uno" "dos" "tres"; }
.bn-pais__foto{ order:-1; }
.bn-claro__lead{ max-width:none; }
}
/* ---- Móvil ---- */
@media (max-width:760px){
.bn-hero{ padding:108px 0 56px; }
.bn-hero__tit{ font-size:clamp(32px,8.8vw,38px); }
.bn-hero__sub{ margin-top:16px; }
.bn-mostrador{ padding:0; }
.bn-preg{ font-size:14px; }
/* Apiladas, cambiar de pregunta no obliga a fijar un alto grande. */
.bn-respuestas{ min-height:0; }
.bn-resp{ padding:20px 18px; }
.bn-resp__cta{ justify-self:stretch; }
.bn-perfil{ padding:22px 20px; }
.bn-costos__grid{ grid-template-columns:minmax(0,1fr); }
.bn-costos__col--si{ padding-right:0; }
.bn-costos__col--dep{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:18px; margin-top:6px; }
/* Tres tarjetas navy identicas apiladas volvian a ser el patron repetido.
La primera conserva su caja; las otras dos pasan a filas con filete. */
.bn-perfiles__grid{ gap:0; }
.bn-perfil:nth-child(1){ margin-bottom:6px; }
.bn-perfil:nth-child(2),.bn-perfil:nth-child(3){
background:none; border:0; border-top:1px solid var(--line);
border-radius:0; padding:18px 2px; box-shadow:none; }
.bn-perfil:nth-child(2):hover,.bn-perfil:nth-child(3):hover{ transform:none; box-shadow:none; }
.bn-perfil:nth-child(2) .bn-perfil__ic,.bn-perfil:nth-child(3) .bn-perfil__ic{
width:32px; height:32px; border-radius:9px; }
.bn-perfil:nth-child(2) .bn-perfil__ic .ti,.bn-perfil:nth-child(3) .bn-perfil__ic .ti{ font-size:17px; }
.bn-perfil:nth-child(2) h3,.bn-perfil:nth-child(3) h3{ font-size:17px; }
.bn-costos__cta .btn{ width:100%; }
.bn-claro__lista li{ padding:16px 0; }
.bn-claro__lista b{ font-size:16.5px; }
.bn-respaldo{ grid-template-columns:minmax(0,1fr); gap:12px; padding:18px; }
.bn-pais__datos{ gap:12px 20px; }
.bn-pais__datos b{ font-size:23px; }
.bn-cierre__cta{ width:100%; }
.bn-cierre__cta .btn{ width:100%; }
}
@media (max-width:380px){
.bn-pais__datos li{ padding-left:12px; }
}
@media (prefers-reduced-motion:reduce){
.bn-resp{ animation:none !important; }
.bn-preg,.bn-perfil{ transition:none !important; transform:none !important; }
}
/* ==== FIN BENEFICIOS v2 ==== */
/* ==========================================================================
PERSONAL SHOPPER v2 (2026-09-15)
Columna vertebral: la solicitud como objeto. El hero es un armador real
(enlace / captura / descripción) con su boleta en vivo; después, cómo
pedir sin enlace, tú vs. Personal Shopper, sellos, la modalidad
ocasional en EE. UU., tiendas, preguntas y cierre. Todo acotado a .ps-*.
========================================================================== */
.ps-hero,.ps-eeuu,.ps-cierre,.ps-vs__col--ps,.ps-ilus{ --focus:var(--mint); }
.ps-armador,.ps-envio,.ps-boleta,.ps-tel{ --focus:var(--mint-700); }
.ps-hero__tit u,.ps-eeuu h2 u,.ps-cierre h2 u{ text-decoration:none; color:var(--mint); }
.ps-go path:first-of-type{ fill:var(--mint); }
.ps-go path:last-of-type{ fill:var(--mint-tint); }
.ps-go--caja{ flex:none; width:32px; height:32px; padding:7px; border-radius:10px; background:var(--navy-900); }
.ps-go--mini{ flex:none; width:24px; height:24px; padding:5px; border-radius:50%; background:var(--navy-900); }
.ps-go--etq{ width:14px; height:14px; }
.ps-go--av{ width:20px; height:20px; }
.ps-go--av path:first-of-type{ fill:var(--navy-900); }
.ps-go--av path:last-of-type{ fill:var(--navy-600); }
@keyframes psAsienta{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes psAparece{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } }
/* ---- Cabeceras de sección ---- */
.ps-cab{ max-width:640px; margin-bottom:clamp(32px,4vw,48px); }
.ps-cab--centro{ margin-inline:auto; text-align:center; }
.ps-cab__lead{ margin-top:16px; font-size:clamp(16px,1.35vw,18px); line-height:1.65; color:var(--ink-soft); }
.ps-link{ justify-self:start; display:inline-flex; align-items:center; gap:8px; min-height:44px; font:600 15px/1.2 var(--font-display); color:#12723F; border-bottom:1.5px solid rgba(24,144,85,.28); transition:border-color .25s ease,color .25s ease; }
.ps-link:hover{ color:var(--mint-700); border-color:var(--mint-700); }
.ps-link .ti{ font-size:17px; transition:transform .3s var(--ease-out); }
.ps-link:hover .ti--flecha{ transform:translateX(3px); }
/* ---- Hero ---- */
.ps-hero{ position:relative; overflow:hidden; background:radial-gradient(60% 60% at 90% 10%,#15245C 0%,rgba(21,36,92,0) 62%),var(--navy-900); color:#fff; padding:clamp(120px,12vw,150px) 0 clamp(64px,7vw,96px); }
.ps-hero::after{ content:""; position:absolute; inset:auto 0 0; z-index:1; height:clamp(170px,17vw,240px); background:var(--paper); }
.ps-hero .aurora--soft b:nth-child(1){ opacity:.22; }
.ps-hero .aurora--soft b:nth-child(2){ opacity:.24; }
.ps-hero .aurora--soft b:nth-child(3){ opacity:.1; }
.ps-hero__in{ position:relative; z-index:2; }
.ps-hero__cab{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,72px); align-items:end; }
.ps-hero__tit{ font-size:clamp(38px,5.1vw,68px); color:#fff; }
.ps-hero__sub{ max-width:460px; font-size:clamp(16.5px,1.35vw,18.5px); line-height:1.6; color:#C6CFE3; }
.ps-hero__claves{ list-style:none; display:grid; gap:10px; margin-top:22px; font-size:14.5px; color:#DCE3F2; }
.ps-hero__claves li{ display:flex; align-items:center; gap:10px; }
.ps-hero__claves .ti{ flex:none; width:20px; height:20px; padding:4px; border-radius:50%; background:rgba(47,209,128,.14); color:var(--mint); stroke-width:3; }
/* ---- Mesa: armador (izq.) + boleta (der.) + envío (pegado al armador) ---- */
.ps-mesa{ position:relative; display:grid; grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); grid-template-areas:"armador boleta" "envio boleta"; column-gap:28px; align-items:start; margin-top:clamp(40px,5vw,60px); }
.ps-armador{ grid-area:armador; display:grid; gap:22px; padding:28px 28px 10px; border-radius:28px 28px 0 0; background:#fff; color:var(--ink); box-shadow:0 30px 80px -40px rgba(8,14,40,.5); }
.ps-envio{ grid-area:envio; position:relative; display:grid; gap:12px; padding:18px 28px 26px; border-top:1px solid var(--line-soft); border-radius:0 0 28px 28px; background:#fff; color:var(--ink); box-shadow:0 50px 90px -50px rgba(8,14,40,.45); }
.ps-armador__cab{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 12px; }
.ps-armador__tit{ font:700 21px/1.2 var(--font-display); letter-spacing:-.02em; }
.ps-armador__canal{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; background:var(--mint-tint); font:600 12.5px/1 var(--font-display); color:#12723F; }
.ps-armador__canal .ti{ font-size:15px; }
.ps-modos{ min-width:0; margin:0; padding:0; border:0; }
.ps-modos legend{ margin-bottom:10px; padding:0; font:600 13.5px/1.2 var(--font-display); color:var(--ink); }
.ps-modos__opc{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ps-modo{ position:relative; display:grid; align-content:start; gap:10px; min-height:118px; padding:14px; border:1.5px solid var(--line); border-radius:16px; background:var(--paper); cursor:pointer; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s var(--ease-out); }
.ps-modo input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.ps-modo__ic{ display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--mist); color:var(--ink-soft); transition:background .2s ease,color .2s ease; }
.ps-modo__ic .ti{ font-size:19px; }
.ps-modo__txt{ display:grid; gap:3px; }
.ps-modo b{ font:600 14.5px/1.25 var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.ps-modo small{ font-size:12.5px; line-height:1.35; color:var(--ink-soft); }
.ps-modo__corto{ display:none; }
.ps-modo:hover{ border-color:#CDD5E4; }
.ps-modo:active{ transform:scale(.985); }
.ps-modo.is-on{ border-color:var(--mint-600); background:#fff; box-shadow:0 0 0 4px rgba(47,209,128,.16); }
.ps-modo.is-on .ps-modo__ic{ background:var(--mint); color:var(--navy-900); }
.ps-modo:has(input:checked){ border-color:var(--mint-600); background:#fff; box-shadow:0 0 0 4px rgba(47,209,128,.16); }
.ps-modo:has(input:checked) .ps-modo__ic{ background:var(--mint); color:var(--navy-900); }
.ps-modo:has(input:focus-visible){ outline:3px solid var(--mint-700); outline-offset:3px; }
.ps-panel{ display:grid; gap:16px; }
.ps-panel[hidden]{ display:none; }
html.js .ps-panel:not([hidden]){ animation:psAsienta .3s var(--ease-out); }
/* Los paneles inactivos llegan con hidden desde el HTML (sin salto al cargar). Sin JS se
muestran y el radio elegido decide con :has(); con JS, el script sincroniza hidden. */
html:not(.js) .ps-panel[hidden]{ display:grid; }
.ps-armador:has(#ps-modo-enlace:not(:checked)) [data-panel="enlace"]{ display:none; }
.ps-armador:has(#ps-modo-captura:not(:checked)) [data-panel="captura"]{ display:none; }
.ps-armador:has(#ps-modo-buscar:not(:checked)) [data-panel="buscar"]{ display:none; }
.ps-campo{ display:grid; gap:7px; align-content:start; min-width:0; }
.ps-campo label{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; font:600 13.5px/1.25 var(--font-display); color:var(--ink); }
.ps-opc{ font:500 12px/1 var(--font-body); color:var(--ink-faint); }
.ps-campo input,.ps-campo textarea{ width:100%; min-height:50px; padding:0 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font:500 16px/1.3 var(--font-body); transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.ps-campo textarea{ display:block; min-height:84px; padding:12px 14px; line-height:1.5; resize:vertical; }
.ps-campo input::placeholder,.ps-campo textarea::placeholder{ color:#9AA3B8; }
.ps-campo input:hover,.ps-campo textarea:hover{ border-color:#CDD5E4; }
.ps-campo input:focus,.ps-campo textarea:focus{ outline:none; border-color:var(--mint-600); background:#fff; box-shadow:0 0 0 4px rgba(47,209,128,.18); }
.ps-campo [aria-invalid="true"]{ border-color:#C0362C; box-shadow:0 0 0 4px rgba(192,54,44,.12); }
.ps-campo input:-webkit-autofill{ -webkit-text-fill-color:var(--ink); box-shadow:0 0 0 1000px #fff inset; transition:background-color 9999s ease 0s; }
.ps-error{ font-size:12.5px; line-height:1.35; color:#B42318; }
.ps-fila{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:end; } /* si una etiqueta baja a 2 líneas, los campos siguen alineados */
.ps-fila--2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.ps-cant{ display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:stretch; height:50px; overflow:hidden; border:1.5px solid var(--line); border-radius:12px; background:var(--paper); transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.ps-cant:focus-within{ border-color:var(--mint-600); background:#fff; box-shadow:0 0 0 4px rgba(47,209,128,.18); }
.ps-campo .ps-cant input{ min-height:0; height:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; text-align:center; font-weight:600; -moz-appearance:textfield; appearance:textfield; }
.ps-campo .ps-cant input:focus{ box-shadow:none; background:transparent; }
.ps-cant input::-webkit-outer-spin-button,.ps-cant input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ps-cant__btn{ appearance:none; display:grid; place-items:center; border:0; background:transparent; color:var(--ink-soft); cursor:pointer; transition:background .2s ease,color .2s ease; }
.ps-cant__btn:hover{ background:var(--mist); color:var(--ink); }
.ps-cant__btn:active{ background:var(--mint-tint); }
.ps-cant__btn .ti{ font-size:17px; }
.ps-cant__btn:focus-visible{ outline-offset:-4px; }
.ps-tienda{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-height:22px; font-size:12.5px; line-height:1.4; color:var(--ink-soft); }
.ps-tienda b{ font-weight:600; color:var(--ink); }
.ps-tienda__logo{ --H:17px; display:inline-grid; place-items:center; height:30px; padding:0 10px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.ps-tienda__logo .marca{ max-height:17px; }
.ps-tienda.is-nueva .ps-tienda__logo{ animation:psAparece .24s var(--ease-out); }
.ps-items{ display:grid; gap:18px; }
.ps-item{ display:grid; gap:14px; }
.ps-item + .ps-item{ padding-top:18px; border-top:1px dashed var(--line); }
.ps-item__cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; font:700 12px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:#12723F; }
.ps-item__cab[hidden]{ display:none; }
.ps-item__quitar{ appearance:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; border:0; border-radius:999px; background:transparent; font:600 13.5px/1 var(--font-display); letter-spacing:0; text-transform:none; color:var(--ink-soft); cursor:pointer; }
.ps-item__quitar:hover{ background:var(--mist); color:var(--ink); }
.ps-item__quitar .ti{ font-size:15px; }
.ps-agregar{ appearance:none; justify-self:start; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1.5px dashed #C3CCDD; border-radius:999px; background:transparent; font:600 14px/1 var(--font-display); color:var(--ink); cursor:pointer; transition:border-color .2s ease,background .2s ease; }
.ps-agregar:hover{ border-color:var(--mint-600); background:var(--mint-tint); }
.ps-agregar .ti{ font-size:17px; color:var(--mint-700); }
.ps-agregar[hidden]{ display:none; }
.ps-limite{ font-size:13px; line-height:1.45; color:var(--ink-soft); }
.ps-aviso{ display:flex; align-items:flex-start; gap:10px; padding:13px 15px; border-radius:14px; background:var(--mint-tint); font-size:14px; line-height:1.5; color:#1D3A2C; }
.ps-aviso b{ color:var(--ink); }
.ps-aviso .ti{ flex:none; margin-top:2px; font-size:17px; color:var(--mint-700); }
.ps-aviso--suave{ background:var(--mist); color:var(--ink-soft); }
.ps-enviar{ width:100%; padding-block:17px; font-size:16px; }
.ps-enviar .ti{ font-size:20px; }
.ps-envio__nota{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; line-height:1.4; color:var(--ink-soft); text-align:center; }
.ps-envio__nota .ti{ flex:none; font-size:15px; color:var(--mint-700); }
.ps-envio__estado{ padding:12px 14px; border-radius:12px; background:var(--mint-tint); font-size:14px; font-weight:600; line-height:1.45; color:#12723F; }
.ps-envio__estado:empty{ display:none; }
.ps-envio__estado.is-error{ background:#FDECEA; color:#B42318; }
/* Boleta: recibo de papel con borde festoneado y un leve giro de objeto. */
.ps-boleta{ grid-area:boleta; position:sticky; top:108px; align-self:start; }
.ps-boleta__abrir{ display:none; }
.ps-boleta__cuerpo{ position:relative; display:grid; gap:14px; padding:24px 24px 28px; border-radius:20px 20px 6px 6px; background:#FFFEFB; color:var(--ink); box-shadow:0 40px 80px -46px rgba(0,0,0,.6); transform:rotate(.8deg); transform-origin:50% 0; }
.ps-boleta__cuerpo::after{ content:""; position:absolute; left:0; right:0; bottom:-10px; height:11px; background:radial-gradient(circle at 10px -1px,#FFFEFB 9px,rgba(255,254,251,0) 9.5px) 0 0 / 20px 11px repeat-x; }
.ps-boleta__cab{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1.5px dashed #D8DEEA; }
.ps-boleta__cab p,.ps-sellos__cab p{ display:grid; line-height:1.2; }
.ps-boleta__cab small,.ps-sellos__cab small{ font:600 10.5px/1.4 var(--font-display); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.ps-boleta__cab b,.ps-sellos__cab b{ font:700 16px/1.2 var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.ps-boleta__modo{ padding:5px 10px; border-radius:999px; background:var(--mint-tint); font:600 12px/1 var(--font-display); color:#12723F; white-space:nowrap; }
.ps-boleta__lineas{ display:grid; }
.ps-linea{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:12px; margin:0 -6px; padding:9px 6px; border-bottom:1px dashed var(--line); border-radius:6px; transition:background .6s ease; }
.ps-linea dt{ padding-top:2px; font:600 11px/1.45 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.ps-linea dd{ min-width:0; font-size:14.5px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere; }
.ps-linea.is-vacio dd{ color:var(--ink-faint); }
.ps-linea--grupo{ grid-template-columns:minmax(0,1fr); padding:14px 6px 2px; border-bottom:0; }
.ps-linea--grupo dt{ color:#12723F; }
.ps-linea--grupo dd{ display:none; }
.ps-linea.is-cambio{ background:var(--mint-tint); transition:none; }
.ps-linea__tienda{ --H:15px; display:inline-flex; align-items:center; gap:8px; }
.ps-linea__tienda .marca{ max-height:15px; }
.ps-boleta__sig{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px; background:var(--mist); font-size:13.5px; line-height:1.45; color:var(--ink-soft); }
.ps-boleta__sig b{ color:var(--ink); }
.ps-boleta__sig .ti{ flex:none; margin-top:1px; font-size:17px; color:var(--mint-700); }
.ps-boleta__texto summary{ display:inline-flex; align-items:center; min-height:44px; cursor:pointer; list-style:none; font:600 13.5px/1.2 var(--font-display); color:#12723F; text-decoration:underline; text-decoration-color:rgba(24,144,85,.4); text-underline-offset:4px; }
.ps-boleta__texto summary::-webkit-details-marker{ display:none; }
.ps-boleta__texto pre{ max-height:260px; margin-top:6px; padding:12px 14px; overflow:auto; border-radius:12px; background:var(--navy-900); color:#DCE3F2; font:500 12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
/* ---- 02 · Tres formas de pedir ---- */
.ps-formas__tabs{ display:inline-flex; gap:6px; margin-bottom:32px; padding:6px; border:1px solid var(--line); border-radius:999px; background:var(--mist); }
.ps-formas__tabs [role="tab"]{ appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px; border:0; border-radius:999px; background:transparent; font:600 14.5px/1 var(--font-display); color:var(--ink-soft); cursor:pointer; transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .2s var(--ease-out); }
.ps-formas__tabs [role="tab"] .ti{ font-size:18px; }
.ps-formas__tabs [role="tab"]:hover{ color:var(--ink); }
.ps-formas__tabs [role="tab"]:active{ transform:scale(.97); }
.ps-formas__tabs [aria-selected="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(12,24,60,.08),0 6px 16px rgba(12,24,60,.08); }
.ps-formas__tabs [aria-selected="true"] .ti{ color:var(--mint-700); }
html:not(.js) .ps-formas__tabs{ display:none; }
.ps-forma{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(28px,5vw,64px); align-items:center; }
.ps-forma[hidden]{ display:none; }
html:not(.js) .ps-forma[hidden]{ display:grid; }
html:not(.js) .ps-forma + .ps-forma{ margin-top:56px; }
html.js .ps-forma:not([hidden]){ animation:psAsienta .32s var(--ease-out); }
.ps-forma h3{ font-size:clamp(24px,2.4vw,30px); letter-spacing:-.025em; }
.ps-pasos{ list-style:none; counter-reset:paso; display:grid; gap:14px; margin-top:22px; }
.ps-pasos li{ counter-increment:paso; display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; align-items:start; font-size:16.5px; line-height:1.55; color:var(--ink); }
.ps-pasos li::before{ content:counter(paso); display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--navy-900); color:var(--mint); font:700 13px/1 var(--font-display); }
.ps-pasos span{ padding-top:3px; }
.ps-forma__tip{ display:flex; align-items:flex-start; gap:10px; margin-top:22px; padding:13px 15px; border-radius:14px; background:var(--mist); font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
.ps-forma__tip .ti{ flex:none; margin-top:2px; font-size:17px; color:var(--mint-700); }
.ps-forma__cta{ margin-top:24px; }
.ps-ilus{ position:relative; display:grid; place-items:center; min-height:400px; padding:40px 24px; overflow:hidden; border-radius:var(--radius-lg); background:radial-gradient(70% 60% at 50% 30%,rgba(47,209,128,.13),rgba(47,209,128,0) 70%),linear-gradient(160deg,#101A46,var(--navy-900) 60%); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 32px 64px -40px rgba(8,14,40,.55); }
.ps-tel{ display:grid; gap:12px; width:min(252px,100%); padding:14px; border:6px solid #1B2550; border-radius:30px; background:#fff; color:var(--ink); box-shadow:0 34px 60px -30px rgba(0,0,0,.65); }
.ps-tel__barra{ display:flex; align-items:center; gap:8px; height:32px; padding:0 10px; border-radius:10px; background:var(--mist); font-size:11.5px; color:var(--ink-soft); }
.ps-tel__barra i{ flex:none; width:10px; height:10px; border:1.5px solid var(--ink-faint); border-radius:50%; }
.ps-tel__prod{ display:grid; gap:8px; }
.ps-tel__foto{ display:grid; place-items:center; aspect-ratio:16/11; border-radius:12px; background:linear-gradient(145deg,#EEF2F8,#DDE4EF); color:#A6B0C5; }
.ps-tel__foto .ti{ font-size:42px; stroke-width:1.4; }
.ps-tel__l{ display:block; height:8px; border-radius:6px; background:var(--line); }
.ps-tel__l--80{ width:80%; }
.ps-tel__l--50{ width:50%; }
.ps-tel__hoja{ display:grid; gap:6px; padding:10px; border-radius:16px; background:var(--mist); }
.ps-tel__hoja-tit{ padding:2px 4px 4px; font:600 10.5px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.ps-tel__op{ display:flex; align-items:center; gap:9px; height:38px; padding:0 11px; border-radius:10px; background:#fff; font:600 12.5px/1 var(--font-display); color:var(--ink); }
.ps-tel__op .ti{ font-size:16px; color:var(--ink-soft); }
.ps-tel__op.is-on{ box-shadow:0 0 0 2px var(--mint-600); }
.ps-tel__op.is-on .ti{ color:var(--mint-700); }
.ps-tel__chat-cab{ display:flex; align-items:center; gap:9px; padding:2px 4px 10px; border-bottom:1px solid var(--line-soft); font:700 13px/1 var(--font-display); }
.ps-tel__chat-cuerpo{ display:grid; justify-items:end; align-content:end; min-height:150px; padding:8px 2px; border-radius:12px; background:repeating-linear-gradient(135deg,#F7F9FC 0 10px,#F1F4F9 10px 20px); }
.ps-tel__adjunto{ display:block; width:58%; padding:6px; border-radius:14px 14px 4px 14px; background:#DDF5E8; }
.ps-tel__captura{ display:grid; place-items:center; aspect-ratio:3/4; border-radius:10px; background:#fff; color:#9FB4A8; }
.ps-tel__captura .ti{ font-size:28px; stroke-width:1.5; }
.ps-tel__menu{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px; border-radius:14px; background:var(--mist); }
.ps-tel__menu span{ display:grid; justify-items:center; gap:6px; padding:10px 4px; border-radius:10px; background:#fff; font:600 11.5px/1 var(--font-display); color:var(--ink); }
.ps-tel__menu .ti{ font-size:19px; color:var(--ink-soft); }
.ps-tel__menu .is-on{ box-shadow:0 0 0 2px var(--mint-600); }
.ps-tel__menu .is-on .ti{ color:var(--mint-700); }
.ps-tel__nota-tit{ display:flex; align-items:center; gap:8px; padding:4px 4px 10px; border-bottom:1px dashed var(--line); font:700 13px/1 var(--font-display); }
.ps-tel__nota-tit .ti{ font-size:16px; color:var(--mint-700); }
.ps-tel dl{ display:grid; gap:8px; }
.ps-tel dl div{ padding:10px 11px; border-radius:10px; background:var(--mist); }
.ps-tel dt{ font:600 10.5px/1.3 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.ps-tel dd{ font-size:13.5px; font-weight:600; color:var(--ink); }
/* ---- 03 · Tú vs. Personal Shopper ---- */
.ps-vs__toggle{ display:none; }
.ps-vs__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:1000px; margin-inline:auto; }
.ps-vs__col{ display:grid; align-content:start; gap:16px; padding:clamp(24px,3vw,34px); border-radius:var(--radius-lg); }
.ps-vs__col--tu{ border:1px solid var(--line); background:#fff; box-shadow:0 1px 0 rgba(12,24,60,.03),0 22px 44px -34px rgba(12,24,60,.26); }
.ps-vs__col--ps{ background:linear-gradient(160deg,#101A46,var(--navy-900) 60%); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 32px 64px -40px rgba(8,14,40,.6); }
.ps-vs__etq{ justify-self:start; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font:600 12.5px/1 var(--font-display); }
.ps-vs__etq .ti{ font-size:15px; }
.ps-vs__col--tu .ps-vs__etq{ border:1.5px solid var(--navy-600); color:var(--navy-600); }
.ps-vs__col--ps .ps-vs__etq{ background:rgba(47,209,128,.14); color:#8FE6BA; }
.ps-vs__col h3{ font-size:clamp(22px,2.2vw,28px); letter-spacing:-.025em; }
.ps-vs__col--ps h3{ color:#fff; }
.ps-vs__lista{ list-style:none; display:grid; gap:12px; }
.ps-vs__lista li{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:center; font-size:15.5px; line-height:1.45; }
.ps-vs__lista .ti{ width:38px; height:38px; padding:9px; border-radius:11px; }
.ps-vs__col--tu .ps-vs__lista .ti{ background:var(--mist); color:var(--ink-soft); }
.ps-vs__col--ps .ps-vs__lista li{ color:#DCE3F2; }
.ps-vs__col--ps .ps-vs__lista .ti{ background:rgba(47,209,128,.14); color:var(--mint); }
.ps-vs__pie{ display:flex; align-items:center; gap:9px; padding-top:14px; border-top:1px dashed var(--line); font-size:14px; line-height:1.45; color:var(--ink-soft); }
.ps-vs__pie .ti{ flex:none; font-size:17px; color:var(--mint-700); }
.ps-vs__col--ps .ps-vs__pie{ border-color:rgba(255,255,255,.14); color:#C6CFE3; }
.ps-vs__col--ps .ps-vs__pie .ti{ color:var(--mint); }
.ps-vs__cta{ justify-self:start; }
/* ---- 04 · Después de enviar ---- */
.ps-despues__in{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(36px,6vw,80px); align-items:start; }
.ps-despues__copy{ display:grid; gap:24px; }
.ps-despues .ps-cab{ margin-bottom:0; }
.ps-pago{ display:grid; gap:14px; padding:22px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:0 1px 0 rgba(12,24,60,.03),0 22px 44px -34px rgba(12,24,60,.26); }
.ps-pago__tit{ display:flex; align-items:center; gap:10px; font:700 17px/1.2 var(--font-display); letter-spacing:-.01em; }
.ps-pago__tit .ti{ width:34px; height:34px; padding:7px; border-radius:10px; background:var(--mint-tint); color:var(--mint-700); }
.ps-pago__filas{ display:grid; gap:8px; }
.ps-pago__filas p{ display:grid; gap:3px; padding:12px 14px; border-radius:12px; background:var(--mist); }
.ps-pago__filas b{ font:700 13px/1.3 var(--font-display); color:var(--ink); }
.ps-pago__filas span{ font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
.ps-pago__filas p:first-child{ background:var(--navy-900); }
.ps-pago__filas p:first-child b{ color:var(--mint); }
.ps-pago__filas p:first-child span{ color:#DCE3F2; }
.ps-pago__nota{ font-size:13px; color:var(--ink-soft); }
/* Foto de la revision humana: el fondo tostado evita un hueco blanco mientras carga. */
.ps-foto{ margin:0; overflow:hidden; border-radius:var(--radius-lg); background:#CFC6B7; box-shadow:0 30px 60px -38px rgba(12,24,60,.45); }
.ps-foto img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.ps-sellos{ position:relative; display:grid; padding:28px 28px 22px; border-radius:22px 22px 6px 6px; background:#fff; box-shadow:0 1px 0 rgba(12,24,60,.04),0 34px 70px -44px rgba(12,24,60,.4); }
.ps-sellos::after{ content:""; position:absolute; left:0; right:0; bottom:-10px; height:11px; background:radial-gradient(circle at 10px -1px,#fff 9px,rgba(255,255,255,0) 9.5px) 0 0 / 20px 11px repeat-x; }
.ps-sellos__cab{ display:flex; align-items:center; gap:12px; margin-bottom:4px; padding-bottom:16px; border-bottom:1.5px dashed #D8DEEA; }
.ps-sellos__lista{ list-style:none; display:grid; }
.ps-sello{ display:grid; grid-template-columns:46px minmax(0,1fr); gap:16px; align-items:start; padding:15px 0; }
.ps-sello + .ps-sello{ border-top:1px dashed var(--line); }
.ps-sello__marca{ display:grid; place-items:center; width:46px; height:46px; border:2px solid var(--mint-600); border-radius:50%; background:var(--mint-tint); color:#12723F; transition:transform .45s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 110ms),opacity .3s ease calc(var(--i) * 110ms); }
.ps-sello__marca .ti{ font-size:20px; }
.ps-sello--pago .ps-sello__marca{ border-color:var(--navy-900); background:var(--navy-900); color:var(--mint); }
.ps-sello b{ font:700 16.5px/1.3 var(--font-display); letter-spacing:-.01em; }
.ps-sello__tag{ display:inline-block; margin-left:8px; padding:3px 8px; border-radius:999px; background:var(--navy-900); font:600 11px/1.3 var(--font-display); color:var(--mint); vertical-align:2px; white-space:nowrap; }
.ps-sello p{ margin-top:3px; font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
html.js .ps-sellos:not(.is-sellado) .ps-sello__marca{ opacity:0; transform:scale(1.5) rotate(-18deg); }
html.failsafe .ps-sellos .ps-sello__marca{ opacity:1; transform:none; }
.ps-sellos__pie{ display:flex; flex-wrap:wrap; gap:4px 26px; margin-top:4px; padding-top:12px; border-top:1.5px dashed #D8DEEA; }
/* ---- 05 · Cuando estamos en Estados Unidos ---- */
.ps-eeuu{ position:relative; overflow:hidden; padding:var(--pad-section) 0; background:var(--navy-900); color:#fff; }
.ps-eeuu .aurora--soft b:nth-child(1){ opacity:.18; }
.ps-eeuu .aurora--soft b:nth-child(2){ opacity:.2; }
.ps-eeuu__in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(40px,6vw,90px); align-items:center; }
.ps-eeuu h2{ color:#fff; }
.ps-eeuu__lead{ max-width:520px; margin-top:20px; font-size:clamp(16.5px,1.4vw,19px); line-height:1.6; color:#C6CFE3; }
.ps-eeuu__lista{ list-style:none; display:grid; gap:14px; margin-top:28px; }
.ps-eeuu__lista li{ display:grid; grid-template-columns:42px minmax(0,1fr); gap:14px; align-items:center; font-size:15.5px; line-height:1.45; color:#C6CFE3; }
.ps-eeuu__lista b{ font-weight:600; color:#fff; }
.ps-eeuu__lista .ti{ width:42px; height:42px; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.06); color:var(--mint); }
.ps-eeuu__nota{ display:flex; align-items:center; gap:9px; margin-top:24px; font-size:14px; line-height:1.45; color:#A7B1CC; }
.ps-eeuu__nota .ti{ flex:none; font-size:16px; color:var(--mint); }
.ps-eeuu__cta{ margin-top:30px; }
.ps-comu{ display:grid; justify-items:center; gap:14px; margin:0; }
.ps-comu__tel{ width:min(370px,100%); padding:16px; border:1px solid rgba(255,255,255,.14); border-radius:30px; background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -44px rgba(0,0,0,.75); transform:rotate(-1.5deg); }
.ps-comu__cab{ display:flex; align-items:center; gap:12px; padding:4px 6px 14px; border-bottom:1px solid rgba(255,255,255,.1); }
.ps-comu__av{ flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--mint); }
.ps-comu__cab p{ display:grid; line-height:1.25; }
.ps-comu__cab b{ font:700 15px/1.25 var(--font-display); color:#fff; }
.ps-comu__cab small{ font-size:12.5px; color:#A7B1CC; }
.ps-comu__feed{ display:grid; gap:12px; padding-top:14px; }
.ps-post{ display:grid; grid-template-columns:92px minmax(0,1fr); gap:12px; padding:10px; border-radius:18px; background:#fff; color:var(--ink); }
.ps-post__foto{ display:grid; place-items:center; aspect-ratio:1; border-radius:12px; color:rgba(8,14,40,.34); }
.ps-post__foto .ti{ font-size:34px; stroke-width:1.4; }
.ps-post__foto--a{ background:linear-gradient(145deg,#E4F7EE,#C8EAD9); }
.ps-post__foto--b{ background:linear-gradient(145deg,#EEF2F8,#D8E0ED); }
.ps-post__foto--c{ background:linear-gradient(145deg,#F6EFE4,#E8D9C2); }
.ps-post__txt{ display:grid; align-content:center; gap:7px; }
.ps-post__txt i{ display:block; height:8px; border-radius:6px; background:var(--line); }
.ps-post__precio{ justify-self:start; margin-top:3px; padding:4px 9px; border-radius:999px; background:var(--mint-tint); font:600 11.5px/1.25 var(--font-display); color:#12723F; }
.ps-comu__pie{ font-size:12.5px; color:#A7B1CC; }
/* ---- 06 · Tiendas ---- */
.ps-tiendas{ padding:clamp(64px,8vw,104px) 0; }
.ps-tiendas__in{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.ps-tiendas__copy{ display:grid; gap:14px; }
.ps-tiendas__tit{ font-size:clamp(26px,2.8vw,36px); }
.ps-tiendas__copy > p:not([class]){ font-size:16.5px; color:var(--ink-soft); }
.ps-tiendas__aviso{ display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:14px; background:var(--mist); font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
.ps-tiendas__aviso .ti{ flex:none; margin-top:2px; font-size:18px; color:var(--mint-700); }
.ps-tiendas__lista{ --H:26px; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--line); }
.ps-tiendas__lista li{ display:grid; place-items:center; min-height:100px; background:#fff; }
/* ---- 07 · Preguntas ---- */
.ps-faq__in{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(32px,5vw,72px); align-items:start; }
.ps-faq .ps-cab{ margin-bottom:0; }
.ps-faq .ps-cab .ps-link{ margin-top:14px; }
.ps-faq__lista{ display:grid; gap:10px; }
.ps-faq__item{ border:1px solid var(--line); border-radius:18px; background:#fff; transition:border-color .25s ease,box-shadow .25s ease; }
.ps-faq__item[open]{ border-color:#D3DAE7; box-shadow:0 18px 40px -30px rgba(12,24,60,.3); }
.ps-faq__item summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding:16px 20px; border-radius:18px; cursor:pointer; list-style:none; font:600 16.5px/1.35 var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.ps-faq__item summary::-webkit-details-marker{ display:none; }
.ps-faq__item summary .ti{ flex:none; font-size:20px; color:var(--mint-700); transition:transform .3s var(--ease-out); }
.ps-faq__item[open] summary .ti{ transform:rotate(180deg); }
.ps-faq__item p{ padding:0 20px 18px; font-size:15.5px; line-height:1.6; color:var(--ink-soft); }
/* ---- Cierre ---- */
.ps-cierre{ position:relative; overflow:hidden; padding:clamp(80px,9vw,120px) 0; border-bottom:1px solid rgba(255,255,255,.08); background:var(--navy-900); color:#fff; text-align:center; }
.ps-cierre .aurora--soft b:nth-child(1){ opacity:.2; }
.ps-cierre .aurora--soft b:nth-child(2){ opacity:.18; }
.ps-cierre__in{ position:relative; z-index:2; display:grid; justify-items:center; }
.ps-cierre h2{ max-width:17ch; color:#fff; }
.ps-cierre__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; }
.ps-cierre .btn--mint:hover,.ps-eeuu .btn--mint:hover{ box-shadow:0 14px 38px rgba(47,209,128,.44); }
.ps-cierre__datos{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px; }
.ps-cierre__datos li{ padding:8px 14px; border:1px solid rgba(255,255,255,.14); border-radius:999px; font-size:14px; color:#B8C2DB; }
.ps-cierre__datos b{ font-family:var(--font-display); font-weight:700; color:#fff; }
/* En móvil el botón flotante se oculta mientras el armador está en pantalla. */
body[data-page="personal-shopper"] .fab{ transition:transform .35s var(--ease-out),opacity .25s ease,visibility 0s linear 0s; }
body.ps-sin-fab .fab{ opacity:0; visibility:hidden; transform:scale(.8); transition:transform .25s ease,opacity .25s ease,visibility 0s linear .25s; }
/* ---- Tablet ---- */
@media (max-width:1000px){
.ps-hero__cab{ grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; }
.ps-mesa{ grid-template-columns:minmax(0,1fr); grid-template-areas:"armador" "boleta" "envio"; }
.ps-boleta{ position:static; padding:6px 28px 4px; background:#fff; }
.ps-boleta__abrir{ appearance:none; display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:0 16px; border:1.5px dashed #D3DAE7; border-radius:14px; background:var(--paper); font:600 14.5px/1 var(--font-display); color:var(--ink); cursor:pointer; }
.ps-boleta__abrir .ti{ font-size:18px; color:var(--mint-700); }
.ps-boleta__flecha{ margin-left:auto; transition:transform .25s var(--ease-out); }
.ps-boleta__abrir[aria-expanded="true"] .ps-boleta__flecha{ transform:rotate(180deg); }
html:not(.js) .ps-boleta__abrir{ display:none; }
.ps-boleta__cuerpo{ margin:12px 0 10px; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px -30px rgba(12,24,60,.35); transform:none; }
.ps-boleta__cuerpo[hidden]{ display:none; }
/* Plegada desde el CSS para que no haya salto antes de que corra el JS. */
html.js .ps-boleta__abrir[aria-expanded="false"] + .ps-boleta__cuerpo{ display:none; }
.ps-boleta__cuerpo::after{ display:none; }
.ps-envio{ border-top:0; }
.ps-forma{ grid-template-columns:minmax(0,1fr); }
.ps-ilus{ min-height:0; }
.ps-despues__in{ grid-template-columns:minmax(0,1fr); }
.ps-despues__copy{ display:contents; }
.ps-despues .ps-cab{ order:1; }
.ps-sellos{ order:2; margin-bottom:12px; }
.ps-pago{ order:3; }
.ps-foto{ order:4; }
.ps-eeuu__in,.ps-tiendas__in,.ps-faq__in{ grid-template-columns:minmax(0,1fr); }
.ps-comu__tel{ transform:none; }
}
/* ---- Móvil ---- */
@media (max-width:760px){
.ps-hero{ padding:108px 0 44px; }
.ps-hero::after{ height:130px; }
.ps-hero__tit{ font-size:clamp(33px,9.3vw,40px); }
.ps-hero__claves{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:16px; font-size:13.5px; }
.ps-mesa{ margin-top:28px; }
.ps-armador{ gap:18px; padding:20px 18px 8px; border-radius:24px 24px 0 0; }
.ps-envio{ padding:14px 18px 22px; border-radius:0 0 24px 24px; }
.ps-boleta{ padding:6px 18px 2px; }
.ps-boleta__cuerpo{ padding:18px 16px 16px; }
.ps-linea{ grid-template-columns:92px minmax(0,1fr); gap:10px; }
.ps-armador__tit{ font-size:19px; }
.ps-modos__opc{ gap:8px; }
.ps-modo{ justify-items:center; gap:8px; min-height:0; padding:12px 6px 11px; text-align:center; }
.ps-modo small{ display:none; }
.ps-modo__largo{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ps-modo__corto{ display:block; font-size:13.5px; }
.ps-fila{ grid-template-columns:128px minmax(0,1fr); gap:10px; }
.ps-fila--2{ grid-template-columns:minmax(0,1fr); }
.ps-formas__tabs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; margin-bottom:24px; }
.ps-formas__tabs [role="tab"]{ gap:6px; padding:0 6px; font-size:13.5px; }
.ps-formas__tabs [role="tab"] .ti{ font-size:16px; }
.ps-forma{ gap:22px; }
.ps-ilus{ padding:22px 18px; }
.ps-tel{ gap:9px; width:min(206px,100%); padding:11px; border-width:5px; border-radius:26px; }
.ps-tel__chat-cuerpo{ min-height:118px; }
.ps-tel__foto{ aspect-ratio:16/9; }
.ps-pasos li{ font-size:16px; }
.ps-forma__cta{ width:100%; }
.ps-vs__toggle{ display:grid; grid-template-columns:1fr 1fr; gap:4px; max-width:380px; margin:0 auto 18px; padding:5px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.ps-vs__toggle button{ appearance:none; min-height:44px; border:0; border-radius:999px; background:transparent; font:600 14px/1 var(--font-display); color:var(--ink-soft); cursor:pointer; transition:background .25s ease,color .25s ease; }
.ps-vs__toggle [aria-pressed="true"]{ background:var(--navy-900); color:#fff; }
html:not(.js) .ps-vs__toggle{ display:none; }
.ps-vs__cols{ grid-template-columns:minmax(0,1fr); }
html.js .ps-vs[data-vista="ps"] .ps-vs__col--tu{ display:none; }
html.js .ps-vs[data-vista="tu"] .ps-vs__col--ps{ display:none; }
.ps-vs__cta{ justify-self:stretch; }
.ps-sellos{ padding:22px 18px 18px; }
.ps-sello{ grid-template-columns:40px minmax(0,1fr); gap:14px; padding:11px 0; }
/* Movil: las notas de los pasos 1 y 3 repiten el texto de la cabecera. */
.ps-sello__extra{ display:none; }
.ps-sello__marca{ width:40px; height:40px; }
.ps-sello__marca .ti{ font-size:18px; }
.ps-sello b{ font-size:15.5px; }
.ps-pago{ padding:18px; }
.ps-eeuu__cta .btn{ width:100%; }
.ps-post{ grid-template-columns:78px minmax(0,1fr); }
.ps-post:nth-child(3){ display:none; }
.ps-tiendas__lista{ --H:21px; }
.ps-tiendas__lista li{ min-height:78px; }
.ps-faq__item summary{ min-height:56px; padding:14px 16px; font-size:15.5px; }
.ps-faq__item p{ padding:0 16px 16px; font-size:15px; }
.ps-cierre__cta .btn{ width:100%; }
}
@media (max-width:380px){
.ps-fila{ grid-template-columns:minmax(0,1fr); }
.ps-modo__corto{ font-size:12.5px; }
.ps-formas__tabs [role="tab"] .ti{ display:none; }
}
@media (prefers-reduced-motion:reduce){
.ps-panel,.ps-forma,.ps-tienda__logo{ animation:none !important; }
.ps-sello__marca{ transition:none !important; opacity:1 !important; transform:none !important; }
.ps-modo,.ps-formas__tabs [role="tab"]{ transform:none !important; }
}
/* ==== FIN PERSONAL SHOPPER v2 ==== */
/* ==========================================================================
CÓMO FUNCIONA v2 (2026-09-15)
La home cuenta el viaje del paquete; esta página cuenta qué haces tú y qué
hacemos nosotros. Hilo: índice del hero -> vía de progreso -> 6 pasos.
Sin pin de ScrollTrigger (sticky CSS) y todo lo que se mueve va con
transform, para no generar layout shift (lección de §45).
========================================================================== */
.cf-hero,.cf-cierre,.cf-estados,.cf-etiqueta,.cf-pais{ --focus:var(--mint); }
.cf-hero__tit u,.cf-cierre h2 u{ text-decoration:none; color:var(--mint); }
.cf-indice__go path:first-of-type,.cf-via__go path:first-of-type,.cf-etiqueta__go path:first-of-type,.cf-rol__go path:first-of-type{ fill:var(--mint); }
.cf-indice__go path:last-of-type,.cf-etiqueta__go path:last-of-type,.cf-rol__go path:last-of-type{ fill:var(--mint-tint); }
/* ---- Hero ---- */
/* Polish final: la aurora soft sola dejaba el hero plano y algo lavado. Más luz
azul a la derecha (peso detrás de la tarjeta), base más oscura abajo. */
/* PLIEGO. El hero es una hoja de papel navy fotografiada, corregida al token
de marca en el propio archivo (media 8,14,40): no hace falta ningun filtro.
El pliegue cae en el hueco de la rejilla, de modo que separa a la vista lo
que haces tu (izquierda, plano iluminado) de lo que hacemos nosotros
(derecha, plano en sombra), que es justo lo que dice el subtitulo. */
.cf-hero{
position:relative; overflow:hidden; color:#fff;
background:var(--navy-900) url("assets/img/pliego-papel-desktop.webp") 34% center / 128% auto no-repeat;
padding:clamp(124px,13vw,156px) 0 clamp(72px,7.5vw,108px);
}
.cf-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg,rgba(8,14,40,0) 58%,rgba(8,14,40,.55)); }
/* Marca de registro de imprenta en la cabecera del pliegue. */
.cf-hero__in::before{
content:""; position:absolute; z-index:3; left:61.5%; top:-46px;
width:26px; height:26px; translate:-50% 0; opacity:.55; pointer-events:none;
background:
linear-gradient(90deg, transparent 0 calc(50% - .5px), rgba(143,230,186,.95) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
linear-gradient(180deg, transparent 0 calc(50% - .5px), rgba(143,230,186,.95) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
}
/* Folio: numera el pliego y nombra lo que contiene. */
.cf-hero__in::after{
content:"PLIEGO 01 · EL RECORRIDO"; position:absolute; z-index:3; right:0; bottom:-30px;
font:600 11px/1 var(--font-display); letter-spacing:.24em; color:rgba(255,255,255,.42);
}
/* Paper Go apoyado en la arista: marca donde empieza el recorrido. Vive por
encima del carril de los botones para no competir con el CTA. */
.cf-hero__copy{ position:relative; }
.cf-hero__copy::after{
content:""; position:absolute; z-index:3; pointer-events:none;
left:calc(100% + clamp(26px,3.4vw,52px)); top:-4%;
width:44px; height:44px; opacity:.95; transform:rotate(135deg);
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 42 42'%3E%3Cpath d='M27 5 L5 14 L14.5 17.2 Z' fill='%232FD180'/%3E%3Cpath d='M27 5 L14.5 17.2 L9 26.5 Z' fill='%23189055'/%3E%3C/svg%3E") center/contain no-repeat;
filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
/* La aurora del hero se oculta: el papel es ahora la superficie. */
.cf-hero .aurora{ display:none; }
.cf-hero__in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(40px,6vw,88px); align-items:center; }
.cf-hero__tit{ color:#fff; margin-top:4px; }
/* "a tu casa." no se parte: antes la "a" quedaba sola al final de la 2ª línea. */
.cf-hero__tit u{ white-space:nowrap; }
.cf-hero__sub{ color:#C6CFE3; font-size:clamp(16.5px,1.4vw,19px); max-width:500px; margin-top:24px; line-height:1.6; }
.cf-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.cf-hero .btn--mint:hover,.cf-cierre .btn--mint:hover{ box-shadow:0 14px 38px rgba(47,209,128,.44); }
.cf-hero .btn--mint:active,.cf-cierre .btn--mint:active{ box-shadow:0 6px 18px rgba(47,209,128,.3); }
.cf-hero__confianza{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:28px; font-size:14px; color:#C6CFE3; }
.cf-hero__confianza li{ display:inline-flex; align-items:center; gap:9px; }
.cf-hero__confianza .ti{ flex:none; width:20px; height:20px; padding:4px; border-radius:50%; background:rgba(47,209,128,.14); color:var(--mint); stroke-width:3; }
.cf-indice{ position:relative; background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.13); border-radius:var(--radius-lg); padding:26px 26px 20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 80px -44px rgba(0,0,0,.75); }
.cf-indice::before{ content:""; position:absolute; inset:12% -10% -12%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side,rgba(47,209,128,.13),rgba(47,209,128,0)); pointer-events:none; }
.cf-indice::after{ content:""; position:absolute; left:28px; right:28px; top:-1px; height:1px; background:linear-gradient(90deg,rgba(47,209,128,0),rgba(47,209,128,.6),rgba(47,209,128,0)); }
.cf-indice__tit{ font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#97A2C2; margin-bottom:12px; }
.cf-indice__go{ position:absolute; top:20px; right:22px; width:22px; height:22px; }
.cf-indice ol{ list-style:none; position:relative; }
.cf-indice ol::before{ content:""; position:absolute; left:15px; top:24px; bottom:24px; width:2px; border-radius:2px; background:linear-gradient(180deg,var(--mint),rgba(255,255,255,.14) 28%); }
.cf-indice li a{ position:relative; display:flex; align-items:center; gap:14px; min-height:50px; padding:6px 8px 6px 0; border-radius:12px; color:#DCE3F2; transition:color .25s ease; }
.cf-indice__n{ position:relative; z-index:1; flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--navy-800); border:1.5px solid rgba(255,255,255,.22); font-family:var(--font-display); font-size:12px; font-weight:700; color:#B8C2DB; transition:border-color .25s ease,color .25s ease; }
.cf-indice__t{ font-family:var(--font-display); font-size:16px; font-weight:600; letter-spacing:-.01em; }
.cf-indice li a:hover{ color:#fff; }
.cf-indice li a:hover .cf-indice__n,.cf-indice li a:focus-visible .cf-indice__n{ border-color:var(--mint); color:var(--mint); }
.cf-indice .is-inicio .cf-indice__n{ background:var(--mint); border-color:var(--mint); color:var(--navy-900); }
.cf-indice em{ font-style:normal; margin-left:auto; font-size:11.5px; font-weight:600; color:#8FE6BA; background:rgba(47,209,128,.12); border:1px solid rgba(47,209,128,.3); padding:3px 9px; border-radius:999px; white-space:nowrap; }
/* ---- Recorrido + vía de progreso ---- */
.cf-recorrido{ position:relative; display:grid; grid-template-columns:196px minmax(0,1fr); gap:clamp(40px,5vw,72px); width:min(var(--shell),calc(100% - 44px)); margin-inline:auto; padding:clamp(72px,8vw,110px) 0 clamp(40px,5vw,64px); }
.cf-via{ position:sticky; top:124px; align-self:start; }
.cf-via__in{ position:relative; padding:4px 0; }
.cf-via__lista{ list-style:none; display:grid; gap:30px; }
/* Los capitulos pendientes usaban --ink-faint (#8B94AC): 2.95:1 sobre el
papel. Era el peor contraste del sitio. #667089 da 4.82:1 con la misma
familia de gris azulado. NO se toca el token --ink-faint, que vive en
otros diez sitios: el cambio es local a esta via. */
.cf-via__lista li{ position:relative; z-index:1; display:flex; align-items:center; gap:14px; font-family:var(--font-display); font-size:14.5px; font-weight:600; color:#667089; transition:color .3s ease; }
.cf-via__lista i{ flex:none; width:14px; height:14px; border-radius:50%; background:var(--paper); border:2px solid var(--line); transition:border-color .3s ease,background .3s ease,transform .3s var(--ease-out),box-shadow .3s ease; }
/* Pendiente 4.82 · hecho 8.83 · actual 17.89. La escala se ensancha, no se
estrecha: los tres estados se distinguen mejor que antes. */
.cf-via__lista li.is-hecho{ color:#3F4866; }
.cf-via__lista li.is-hecho i{ background:var(--mint-600); border-color:var(--mint-600); }
.cf-via__lista li.is-on{ color:var(--ink); }
.cf-via__lista li.is-on i{ background:#fff; border-color:var(--mint-600); transform:scale(1.25); box-shadow:0 0 0 5px rgba(47,209,128,.16); }
.cf-via__riel{ position:absolute; left:6px; top:11px; bottom:11px; width:2px; border-radius:2px; background:var(--line); }
.cf-via__riel b{ position:absolute; inset:0; border-radius:2px; background:var(--mint-600); transform:scaleY(0); transform-origin:50% 0; }
.cf-via__go{ position:absolute; left:7px; top:0; z-index:2; width:22px; height:22px; margin-top:-11px; transform:translate(-50%,11px) rotate(135deg); filter:drop-shadow(0 4px 8px rgba(12,24,60,.2)); }
.cf-via__go path:last-of-type{ fill:var(--navy-600); }
.cf-via__movil{ display:none; }
/* ---- Pasos ---- */
.cf-caps{ min-width:0; }
.cf-cap{ padding:clamp(56px,6vw,84px) 0; border-top:1px solid var(--line); scroll-margin-top:100px; }
.cf-cap:first-child{ border-top:0; padding-top:0; }
.cf-cap__cab{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:22px; margin-bottom:32px; }
.cf-cap__n{ grid-row:1 / span 2; align-self:end; font-family:var(--font-display); font-weight:700; font-size:clamp(56px,6vw,84px); line-height:.8; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px var(--mint-600); }
.cf-cap__cab .eyebrow{ grid-column:2; margin-bottom:10px; }
.cf-cap__tit{ grid-column:2; font-size:clamp(28px,3.2vw,42px); }
.cf-cap__lead{ grid-column:2; margin-top:12px; font-size:16.5px; color:var(--ink-soft); max-width:560px; }
.cf-cap__cuerpo{ display:grid; gap:26px; }
.cf-sub{ display:flex; align-items:center; gap:14px; margin-top:18px; font:600 12px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.cf-sub::after{ content:""; flex:1; height:1px; background:var(--line); }
.cf-roles{ list-style:none; display:grid; gap:12px; max-width:640px; align-content:start; }
.cf-rol{ display:grid; grid-template-columns:94px minmax(0,1fr); gap:16px; align-items:start; }
.cf-rol p{ padding-top:3px; font-size:17px; line-height:1.55; color:var(--ink); }
.cf-rol__chip{ justify-self:start; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px; padding:0 12px; border-radius:999px; font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.cf-rol__chip--tu{ border:1.5px solid var(--navy-600); color:var(--navy-600); }
.cf-rol__chip--tg{ background:var(--mint-tint); color:#12723F; }
.cf-rol__go{ width:14px; height:14px; }
.cf-rol__chip--tg .cf-rol__go path:first-of-type{ fill:var(--mint-600); }
.cf-rol__chip--tg .cf-rol__go path:last-of-type{ fill:#12723F; }
.cf-enlace{ justify-self:start; display:inline-flex; align-items:center; gap:8px; min-height:44px; font-family:var(--font-display); font-size:15px; font-weight:600; color:#12723F; border-bottom:1.5px solid rgba(24,144,85,.28); transition:border-color .25s ease,color .25s ease; }
.cf-enlace:hover{ color:var(--mint-700); border-color:var(--mint-700); }
.cf-enlace .ti{ font-size:17px; transition:transform .3s var(--ease-out); }
.cf-enlace:hover .ti--flecha{ transform:translateX(3px); }
/* 01 · abrir casillero (formulario -> WhatsApp) */
/* Al llegar con #abrir-casillero el navegador salta al elemento: sin este
margen el titulo del formulario queda debajo del nav fijo. Es el respaldo
sin JavaScript; con JS el salto lo hace scrollToEl con su propio desfase. */
#abrir-casillero{ scroll-margin-top:124px; }
.cf-alta{ position:relative; overflow:hidden; display:grid; gap:14px; padding:26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:0 1px 0 rgba(12,24,60,.03),0 26px 52px -32px rgba(12,24,60,.32); }
.cf-alta::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--mint),rgba(47,209,128,0) 70%); }
.cf-alta__tit{ display:flex; align-items:center; gap:10px; font:700 20px/1.2 var(--font-display); letter-spacing:-.02em; color:var(--ink); }
.cf-alta__tit .ti{ font-size:22px; color:var(--mint-700); }
.cf-alta__intro{ margin-top:-6px; font-size:14.5px; color:var(--ink-soft); }
.cf-alta__campos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.cf-alta__campo{ display:grid; gap:6px; align-content:start; }
.cf-alta__campo--full{ grid-column:1 / -1; }
.cf-alta__campo label{ font:600 13.5px/1.2 var(--font-display); color:var(--ink); }
.cf-alta__campo input{ width:100%; min-height:48px; padding:0 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font:500 16px/1.2 var(--font-body); transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.cf-alta__campo input:hover{ border-color:#CDD5E4; }
/* Autocompletar: sin el amarillo/azul del navegador, con el mismo estado de foco. */
.cf-alta__campo input:-webkit-autofill{ -webkit-text-fill-color:var(--ink); box-shadow:0 0 0 1000px #fff inset; transition:background-color 9999s ease 0s; }
.cf-alta__campo input:-webkit-autofill:focus{ box-shadow:0 0 0 1000px #fff inset,0 0 0 4px rgba(47,209,128,.18); }
.cf-alta__campo input:focus{ outline:none; border-color:var(--mint-600); background:#fff; box-shadow:0 0 0 4px rgba(47,209,128,.18); }
.cf-alta__campo input[aria-invalid="true"]{ border-color:#C0362C; box-shadow:0 0 0 4px rgba(192,54,44,.12); }
/* El ejemplo tiene que leerse como ejemplo, no como dato ya escrito:
gris claro frente al --ink del valor real. */
.cf-alta__campo input::placeholder{ color:#9AA3BB; opacity:1; }
.cf-alta__error{ font-size:12.5px; line-height:1.35; color:#B42318; }
/* Con los cinco errores abiertos a la vez la rejilla crece; el boton se
separa para que ningun mensaje lo toque. */
.cf-alta__campos:has([aria-invalid="true"]) + .cf-alta__enviar{ margin-top:10px; }
.cf-alta__enviar{ justify-self:start; margin-top:4px; }
.cf-alta__enviar .ti{ font-size:19px; }
.cf-alta__nota{ display:flex; align-items:flex-start; gap:8px; font-size:13px;
line-height:1.55; color:var(--ink-soft); }
.cf-alta__nota .ti{ flex:none; font-size:15px; margin-top:2px; color:var(--mint-700); }
.cf-alta__nota b{ color:var(--ink); }
.cf-alta__estado{ font-size:14px; font-weight:600; color:#12723F; }
/* El mismo parrafo sirve para "se abrio WhatsApp" y para "faltan datos".
En verde de exito, el aviso de error decia lo contrario de lo que pasaba. */
.cf-alta__estado[data-error="true"]{ color:#B42318; }
.cf-alta__estado:empty{ display:none; }
/* 01 · dirección -> formulario de ejemplo */
.cf-dir{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:18px; align-items:stretch; }
.cf-etiqueta{ position:relative; display:flex; flex-direction:column; gap:2px; padding:22px 22px 18px; border-radius:var(--radius-lg); background:linear-gradient(160deg,#101A46,var(--navy-900) 58%); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 50px -26px rgba(8,14,40,.6); }
.cf-etiqueta__top{ display:flex; align-items:center; gap:9px; margin-bottom:12px; padding-bottom:14px; border-bottom:1px dashed rgba(255,255,255,.16); font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mint); }
.cf-etiqueta__go{ width:18px; height:18px; }
.cf-linea{ appearance:none; display:flex; align-items:center; gap:10px; min-height:44px; margin-left:-10px; padding:7px 10px; border:1px solid transparent; border-radius:10px; background:transparent; color:#E8EDF7; font:500 15px/1.4 var(--font-body); text-align:left; cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease; }
.cf-linea em{ font-style:normal; color:#8FE6BA; }
.cf-linea i,.cf-campo i{ flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; font:700 11px/1 var(--font-display); font-style:normal; transition:background .2s ease,color .2s ease; }
.cf-linea i{ background:rgba(255,255,255,.1); color:#B8C2DB; }
.cf-linea:hover,.cf-linea.is-on,.cf-linea:focus-visible{ background:rgba(47,209,128,.12); border-color:rgba(47,209,128,.36); color:#fff; }
.cf-linea.is-on i{ background:var(--mint); color:var(--navy-900); }
.cf-etiqueta__fila{ display:flex; flex-wrap:wrap; gap:0 4px; margin-left:-10px; }
.cf-etiqueta__fila .cf-linea{ margin-left:0; }
.cf-etiqueta__nota{ margin-top:auto; padding-top:12px; font-size:12.5px; color:#8B96B8; }
.cf-checkout{ margin:0; display:grid; gap:9px; align-content:start; padding:20px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:0 1px 0 rgba(12,24,60,.03),0 26px 50px -32px rgba(12,24,60,.32); }
.cf-checkout__tit{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; font:600 15px/1.2 var(--font-body); color:var(--ink); }
.cf-checkout__tit span{ padding:5px 9px; border:1px dashed #C3CCDD; border-radius:999px; background:var(--mist); font:600 11px/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.cf-campo{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px; align-items:center; padding:7px 12px 8px; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.cf-campo i{ grid-row:1 / span 2; background:var(--mist); color:var(--ink-soft); }
.cf-campo small{ font-size:11.5px; line-height:1.3; color:var(--ink-soft); }
.cf-campo b{ font-size:14px; font-weight:500; line-height:1.35; color:var(--ink); overflow-wrap:anywhere; }
.cf-campo.is-on{ border-color:var(--mint-600); background:#fff; box-shadow:0 0 0 4px rgba(47,209,128,.16); }
.cf-campo.is-on i{ background:var(--mint); color:var(--navy-900); }
.cf-checkout__fila{ display:grid; grid-template-columns:1fr .95fr .8fr; gap:8px; }
.cf-checkout__nota{ margin:-2px 0 4px; font-size:13px; line-height:1.45; color:var(--ink-soft); }
.cf-checkout mark,.cf-campo b mark{ padding:0 4px; border-radius:4px; background:var(--mint-tint); color:#12723F; font-weight:600; }
/* 02 · compro yo / personal shopper, tiendas, paquetes */
.cf-modo{ display:grid; gap:18px; align-content:start; }
.cf-modo__tabs{ justify-self:start; display:inline-flex; gap:4px; padding:5px; border:1px solid var(--line); border-radius:999px; background:var(--mist); }
.cf-modo__tabs [role="tab"]{ appearance:none; min-height:44px; padding:0 18px; border:0; border-radius:999px; background:transparent; font:600 14.5px/1 var(--font-display); color:var(--ink-soft); cursor:pointer; transition:background .25s ease,color .25s ease,box-shadow .25s ease; }
.cf-modo__tabs [aria-selected="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(12,24,60,.08),0 6px 16px rgba(12,24,60,.08); }
.cf-modo__tabs [aria-selected="false"]:hover{ color:var(--ink); }
.cf-modo__tabs [role="tab"]:active{ transform:scale(.97); }
.cf-modo__panel{ display:grid; gap:14px; }
@keyframes cfAsienta{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
html.js .cf-modo__panel:not([hidden]){ animation:cfAsienta .32s var(--ease-out); }
.cf-modo__panel[hidden]{ display:none; }
html:not(.js) .cf-modo__tabs{ display:none; }
.cf-tiendas{ padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:0 1px 0 rgba(12,24,60,.03),0 22px 44px -34px rgba(12,24,60,.26); }
.cf-tiendas__tit{ margin-bottom:18px; font:600 12px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.cf-tiendas__lista{ --H:24px; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 16px; align-items:center; justify-items:center; }
.cf-orden{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px 26px; align-items:center; padding:18px 22px; border:1px dashed #C9D2E3; border-radius:var(--radius-lg); background:var(--mist); }
.cf-orden__dibujo{ display:flex; align-items:center; }
.cf-orden__pieza{ display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid var(--line); border-radius:10px; background:#fff; font:600 13px/1 var(--font-display); color:var(--ink); white-space:nowrap; }
.cf-orden__pieza .ti{ font-size:16px; color:var(--mint-700); }
.cf-orden__pieza small{ margin-left:2px; padding:3px 6px; border-radius:6px; background:var(--mint-tint); font:600 10.5px/1 var(--font-body); color:#12723F; }
.cf-orden__pieza--orden{ background:var(--navy-900); border-color:var(--navy-900); color:#fff; }
.cf-orden__pieza--orden .ti{ color:var(--mint); }
.cf-orden__rama{ position:relative; width:30px; height:52px; margin:0 6px 0 8px; border:2px solid var(--mint-600); border-left:0; border-radius:0 10px 10px 0; }
.cf-orden__rama::before{ content:""; position:absolute; left:-8px; top:50%; width:8px; height:2px; background:var(--mint-600); }
.cf-orden__paquetes{ display:grid; gap:10px; }
.cf-orden figcaption{ font-size:15px; line-height:1.5; color:var(--ink-soft); }
.cf-orden figcaption b{ color:var(--ink); }
.cf-duda{ display:flex; align-items:flex-start; gap:10px; max-width:640px; font-size:15px; color:var(--ink-soft); }
.cf-duda .ti{ flex:none; margin-top:3px; font-size:18px; color:var(--mint-700); }
.cf-duda a{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:#12723F; text-decoration:underline; text-decoration-color:rgba(24,144,85,.4); text-underline-offset:4px; }
/* 03 · Miami: foto de recepción (opción A de Gemini, elegida 2026-09-15).
El fondo tostado del marco evita un hueco blanco mientras carga (lazy). */
.cf-foto{ position:relative; margin:0; max-width:460px; }
.cf-foto__marco{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius-lg); background:#D8CFC0; box-shadow:0 36px 70px -40px rgba(12,24,60,.55); }
.cf-foto__marco img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.cf-foto__marco::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(8,14,40,.08); pointer-events:none; }
.cf-estadito{ position:absolute; left:18px; bottom:18px; display:flex; align-items:center; gap:10px; padding:9px 14px 9px 9px; border-radius:14px; background:var(--navy-900); color:#fff; box-shadow:0 14px 30px -12px rgba(8,14,40,.5); }
.cf-estadito .ti{ flex:none; width:32px; height:32px; padding:7px; border-radius:9px; background:var(--mint); color:var(--navy-900); }
.cf-estadito span{ display:grid; font:600 14px/1.25 var(--font-display); }
.cf-estadito small{ font:600 10.5px/1.3 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:#8FE6BA; }
/* 04 · aduanas: el tiempo se dibuja, sin días */
.cf-tiempo{ margin:0; padding:30px 30px 22px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:0 1px 0 rgba(12,24,60,.03),0 22px 44px -34px rgba(12,24,60,.26); }
.cf-tiempo__via{ display:flex; align-items:flex-start; }
.cf-tiempo__pt{ flex:none; position:relative; padding-top:26px; font:600 14px/1.2 var(--font-display); color:var(--ink); text-align:center; white-space:nowrap; }
.cf-tiempo__pt::before{ content:""; position:absolute; top:0; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--mint-600); box-shadow:0 0 0 5px rgba(47,209,128,.15); }
.cf-tiempo__pt:last-child::before{ background:#fff; border:2px solid var(--mint-600); }
.cf-tiempo__tramo{ flex:1; position:relative; min-width:56px; height:44px; margin:0 10px; }
.cf-tiempo__tramo b{ position:absolute; left:0; right:0; top:6px; height:2px; border-radius:2px; background:var(--mint-600); transform-origin:0 50%; }
.cf-tiempo__tramo em{ position:absolute; left:50%; top:20px; transform:translateX(-50%); font-style:normal; font-size:13px; color:var(--ink-soft); text-align:center; white-space:nowrap; }
.cf-tiempo__tramo--aduanas{ flex:1.7; }
.cf-tiempo__tramo--aduanas b{ background:repeating-linear-gradient(90deg,var(--mint-600) 0 7px,transparent 7px 13px); transition:transform .9s var(--ease-out) .15s; }
.cf-tiempo__tramo--aduanas em{ top:16px; padding:4px 10px; border-radius:999px; background:var(--mint-tint); color:#12723F; font-weight:600; }
html.js .cf-tiempo:not(.is-visto) .cf-tiempo__tramo--aduanas b{ transform:scaleX(.5); }
html.failsafe .cf-tiempo .cf-tiempo__tramo--aduanas b{ transform:none; }
.cf-tiempo__nota{ display:flex; align-items:center; gap:9px; margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); font-size:14px; color:var(--ink-soft); }
.cf-tiempo__nota .ti{ flex:none; font-size:17px; color:var(--mint-700); }
.cf-plazo{ max-width:640px; font-size:16px; color:var(--ink-soft); }
.cf-plazo b{ font-family:var(--font-display); color:var(--ink); }
/* 05 · los 5 estados */
.cf-estados{ display:grid; gap:18px; padding:28px; border-radius:var(--radius-lg); background:linear-gradient(160deg,#101A46,var(--navy-900) 55%); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 32px 64px -40px rgba(8,14,40,.6); }
.cf-estados__tit{ font:600 12px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--mint); }
.cf-estados__etapas{ display:grid; grid-template-columns:2fr 1fr 2fr; gap:6px; }
.cf-estados__etapas span{ position:relative; padding-top:14px; font:600 12.5px/1.2 var(--font-display); color:#8B96B8; transition:color .3s ease; }
.cf-estados__etapas span::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius:4px; background:rgba(255,255,255,.12); transition:background .3s ease; }
.cf-estados__etapas[data-etapa="miami"] [data-e="miami"],.cf-estados__etapas[data-etapa="envio"] [data-e="envio"],.cf-estados__etapas[data-etapa="entrega"] [data-e="entrega"]{ color:#fff; }
.cf-estados__etapas[data-etapa="miami"] [data-e="miami"]::before,.cf-estados__etapas[data-etapa="envio"] [data-e="envio"]::before,.cf-estados__etapas[data-etapa="entrega"] [data-e="entrega"]::before{ background:var(--mint); }
.cf-estados__lista{ list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.cf-estado{ appearance:none; width:100%; height:100%; min-height:48px; display:grid; grid-template-columns:auto 1fr; align-content:start; gap:10px 8px; padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.03); color:#DCE3F2; font:500 14px/1.3 var(--font-body); text-align:left; cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s var(--ease-out); }
.cf-estado:active{ transform:scale(.98); }
.cf-estado__n{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.1); font:700 11.5px/1 var(--font-display); color:#B8C2DB; }
.cf-estado .ti{ justify-self:end; font-size:18px; color:#8FE6BA; }
.cf-estado__t{ grid-column:1 / -1; font:600 15px/1.25 var(--font-display); letter-spacing:-.005em; color:inherit; }
.cf-estado__desc{ grid-column:1 / -1; font-size:13px; line-height:1.45; color:#B8C2DB; }
.cf-estado__desc small{ display:block; margin-top:4px; font-size:11.5px; color:#8B96B8; }
.cf-estados--js .cf-estado__desc{ display:none; }
.cf-estado:hover{ background:rgba(255,255,255,.07); }
.cf-estado.is-on{ border-color:rgba(47,209,128,.5); background:rgba(47,209,128,.13); color:#fff; }
.cf-estado.is-on .cf-estado__n{ background:var(--mint); color:var(--navy-900); }
.cf-estados__detalle{ display:grid; gap:4px; min-height:96px; padding:18px 20px; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(255,255,255,.05); }
.cf-estados__nombre{ font:700 17px/1.25 var(--font-display); color:#fff; }
.cf-estados__desc{ font-size:15px; line-height:1.5; color:#DCE3F2; }
.cf-estados__aviso{ font-size:12.5px; color:#8B96B8; }
.cf-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; }
/* 06 · todo Costa Rica */
.cf-pais{ position:relative; margin:0; display:grid; gap:22px; padding:34px 26px 26px; overflow:hidden; border-radius:var(--radius-lg); background:radial-gradient(80% 60% at 50% 36%,rgba(47,209,128,.09),rgba(47,209,128,0) 70%),linear-gradient(160deg,#101A46,var(--navy-900) 55%); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 32px 64px -40px rgba(8,14,40,.6); }
.cf-pais__mapa{ display:block; width:100%; max-width:340px; height:auto; margin:0 auto; overflow:visible; }
.cf-pais__mapa path{ fill:rgba(47,209,128,.16); stroke:var(--mint); stroke-width:1.4; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
/* Mapa limpio (sin Paper Go dentro): el territorio entero iluminado y, debajo,
las 7 provincias. "Todo Costa Rica" se lee sin ningun icono encima. */
.cf-pais__pie{ display:grid; gap:12px; justify-items:center; text-align:center; }
.cf-pais__pie b{ font:600 12px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--mint); }
.cf-pais__pie ul{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.cf-pais__pie li{ padding:5px 10px; border:1px solid rgba(47,209,128,.26); border-radius:999px; background:rgba(47,209,128,.06); font-size:12.5px; color:#DCE3F2; }
/* ---- Cierre ---- */
.cf-cierre{ position:relative; overflow:hidden; background:var(--navy-900); color:#fff; padding:clamp(80px,9vw,120px) 0; border-bottom:1px solid rgba(255,255,255,.08); }
.cf-cierre .aurora--soft b:nth-child(1){ opacity:.2; }
.cf-cierre .aurora--soft b:nth-child(2){ opacity:.18; }
.cf-cierre__in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(36px,5vw,72px); align-items:center; }
.cf-cierre h2{ color:#fff; }
.cf-cierre__datos{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.cf-cierre__datos li{ padding:8px 14px; border:1px solid rgba(255,255,255,.14); border-radius:999px; font-size:14px; color:#B8C2DB; }
.cf-cierre__datos b{ font-family:var(--font-display); font-weight:700; color:#fff; }
.cf-resumen{ display:grid; grid-template-columns:1fr 1.25fr; gap:14px; }
.cf-resumen__col{ padding:22px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.cf-resumen ul{ list-style:none; display:grid; gap:10px; margin-top:14px; }
.cf-resumen li{ position:relative; padding-left:20px; font-size:14.5px; line-height:1.45; color:#DCE3F2; }
.cf-resumen li::before{ content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:50%; border:1.5px solid #8B96B8; }
.cf-resumen__col--tg li::before{ background:var(--mint); border-color:var(--mint); }
.cf-cierre .cf-rol__chip--tu{ border-color:rgba(255,255,255,.55); color:#fff; }
/* ---- Escritorio: dos columnas donde el contenido lo pide ---- */
@media (min-width:1001px){
.cf-cap--casillero .cf-cap__cuerpo{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:36px; align-items:start; }
.cf-cap--casillero .cf-sub,.cf-cap--casillero .cf-dir{ grid-column:1 / -1; }
.cf-cap--compra .cf-cap__cuerpo{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:32px; align-items:start; }
.cf-cap--compra .cf-orden,.cf-cap--compra .cf-duda{ grid-column:1 / -1; }
/* El copy se centra respecto a la foto y al mapa: filas 1fr arriba y abajo, contenido en medio. */
.cf-cap--miami .cf-cap__cuerpo,.cf-cap--casa .cf-cap__cuerpo{ grid-template-columns:minmax(0,1fr) minmax(0,.92fr); column-gap:48px; row-gap:0; align-items:start; }
.cf-cap--miami .cf-cap__cuerpo{ grid-template-rows:1fr auto 1fr; }
.cf-cap--casa .cf-cap__cuerpo{ grid-template-rows:1fr auto auto 1fr; }
.cf-cap--miami .cf-roles,.cf-cap--casa .cf-roles{ grid-column:1; grid-row:2; }
.cf-cap--casa .cf-enlace{ grid-column:1; grid-row:3; margin-top:22px; }
.cf-cap--miami .cf-foto,.cf-cap--casa .cf-pais{ grid-column:2; grid-row:1 / -1; }
}
@media (max-width:1180px) and (min-width:1001px){
.cf-estados__lista{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1000px){
.cf-hero__in,.cf-cierre__in{ grid-template-columns:minmax(0,1fr); }
/* Apilada la rejilla, un pliegue vertical no separaria nada. Se sirve el
archivo movil, que trae la arista HORIZONTAL entre el bloque de texto y
la tarjeta del recorrido: la misma idea, girada. No es un recorte. */
.cf-hero{ background-image:url("assets/img/pliego-papel-movil.webp"); background-size:cover; background-position:center 42%; }
.cf-hero::after{ background:linear-gradient(180deg,rgba(8,14,40,.34) 0 28%,transparent 46%,rgba(8,14,40,.62)); }
.cf-hero__in::before,.cf-hero__copy::after{ display:none; }
.cf-hero__in::after{ right:auto; left:0; bottom:-24px; font-size:10px; letter-spacing:.2em; }
.cf-recorrido{ grid-template-columns:minmax(0,1fr); gap:0; padding-top:clamp(40px,6vw,64px); }
.cf-via{ top:86px; z-index:20; margin-bottom:24px; }
.cf-via__in{ display:none; }
.cf-via__movil{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:rgba(251,252,254,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 10px 24px -16px rgba(12,24,60,.4); }
.cf-via__cap{ font:700 13px/1 var(--font-display); color:var(--ink); white-space:nowrap; }
.cf-via__seg{ display:flex; gap:4px; }
.cf-via__seg i{ width:16px; height:4px; border-radius:4px; background:var(--line); transition:background .3s ease; }
.cf-via__seg i.is-on{ background:var(--mint-600); }
.cf-cap:first-child{ padding-top:8px; }
.cf-dir{ grid-template-columns:minmax(0,1fr); }
.cf-estados__lista{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px){
.cf-hero{ padding:112px 0 52px; }
.cf-hero__tit{ font-size:clamp(33px,9.3vw,40px); }
.cf-hero__sub{ margin-top:16px; }
.cf-hero__cta{ margin-top:28px; }
.cf-hero__confianza{ gap:8px 16px; margin-top:22px; font-size:13.5px; }
.cf-hero__cta .btn{ width:100%; }
.cf-indice{ padding:4px 0 0; border:0; background:none; box-shadow:none; }
.cf-indice__go,.cf-indice em,.cf-indice ol::before,.cf-indice::before,.cf-indice::after{ display:none; }
.cf-indice__tit{ margin-bottom:10px; }
.cf-indice ol{ display:flex; gap:8px; margin:0 -22px; padding:0 22px 6px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent); }
.cf-indice ol::-webkit-scrollbar{ display:none; }
.cf-indice li{ flex:none; scroll-snap-align:start; }
.cf-indice li a{ min-height:44px; gap:9px; padding:6px 14px 6px 7px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.06); }
.cf-indice__n{ width:28px; height:28px; font-size:11px; }
.cf-indice__t{ font-size:14px; white-space:nowrap; }
.cf-cap__cab{ column-gap:14px; margin-bottom:24px; }
.cf-cap__lead{ grid-column:1 / -1; }
.cf-rol{ grid-template-columns:80px minmax(0,1fr); gap:12px; }
.cf-rol p{ font-size:16px; }
#abrir-casillero{ scroll-margin-top:96px; }
.cf-alta{ padding:22px 18px 20px; }
.cf-alta__campos{ gap:10px; }
.cf-alta__campo:nth-child(n+4){ grid-column:1 / -1; }
/* Por debajo de 420px las dos columnas dejan sitio para ~13 caracteres y
el ejemplo se corta ("Ej.: Maria Jo"). Un placeholder a medias parece
un dato escrito a medias, asi que ahi se apila todo a ancho completo. */
@media (max-width:420px){ .cf-alta__campo{ grid-column:1 / -1; } }
.cf-alta__enviar{ justify-self:stretch; }
/* Movil: el checkout ya trae cada dato con su campo y la nota de TraiGo 5080;
la tarjeta de direccion repetia los mismos valores (~430px). */
.cf-etiqueta{ display:none; }
.cf-checkout{ gap:7px; padding:16px; }
.cf-campo{ padding:6px 10px 7px; }
.cf-checkout__fila{ grid-template-columns:1fr 1fr; }
.cf-checkout__fila .cf-campo:first-child{ grid-column:1 / -1; }
.cf-tiendas__lista{ --H:21px; }
.cf-orden{ grid-template-columns:minmax(0,1fr); padding:16px; }
.cf-foto{ max-width:none; }
/* 4:3 muestra caja, lector y etiquetas; el chip vuelve sobre la foto (ya no tapa texto). */
.cf-foto__marco{ aspect-ratio:4/3; }
.cf-foto__marco img{ object-position:50% 64%; }
.cf-estadito{ left:12px; bottom:12px; padding:7px 12px 7px 7px; border-radius:12px; }
.cf-estadito .ti{ width:28px; height:28px; padding:6px; }
.cf-tiempo{ padding:24px 16px 18px; }
.cf-tiempo__tramo em{ font-size:12px; }
.cf-tiempo__tramo{ min-width:40px; margin:0 6px; }
.cf-tiempo__pt{ font-size:12px; }
.cf-estados{ padding:22px 18px; }
.cf-estados__etapas span{ font-size:11.5px; }
.cf-estados__lista{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:64%; margin:0 -18px; padding:0 18px 4px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); }
.cf-estados__lista::-webkit-scrollbar{ display:none; }
.cf-estados__lista li{ scroll-snap-align:start; }
.cf-pais{ padding:26px 18px 20px; }
.cf-pais__mapa{ max-width:280px; }
.cf-acciones .btn{ width:100%; }
/* En móvil el resumen repetía lo recién leído (~450px): el cierre queda en titular, CTA y datos. */
.cf-resumen{ display:none; }
}
@media (max-width:380px){
/* En 320 el diagrama "1 compra -> paquetes" pasaba 0,6px del ancho y abría scroll horizontal. */
.cf-orden__rama{ width:18px; margin:0 4px 0 6px; }
.cf-orden__pieza{ gap:5px; padding:6px 8px; font-size:12.5px; }
.cf-orden__pieza small{ padding:3px 5px; }
}
@media (prefers-reduced-motion:reduce){
.cf-tiempo__tramo--aduanas b{ transition:none !important; transform:none !important; }
.cf-modo__panel,.cf-estado,.cf-modo__tabs [role="tab"]{ animation:none !important; transform:none !important; }
}
/* ---------------------------------------------------------- Privacidad
Pagina de texto. Reutiliza .shell, .eyebrow y la tipografia del sitio;
lo unico propio es el aviso de borrador y la marca de lo pendiente,
que tiene que verse a la primera. Un hueco disimulado en una politica
de privacidad es peor que no tenerla. */
.pv{ background:var(--paper); }
.pv-cab{ padding:clamp(118px,12vw,150px) 0 clamp(20px,3vw,32px); }
.pv-cab h1{ font-size:clamp(30px,5vw,46px); margin-top:10px; }
/* Informativo, no una alarma. El recuadro publico cuenta en que punto esta
el aviso formal; no avisa de ningun peligro, asi que no se pinta como si
lo hubiera. Filo esmeralda y fondo frio, en la linea del resto. */
.pv-aviso{
margin-top:26px; max-width:66ch; padding:16px 18px;
border:1px solid var(--line); border-left:3px solid var(--mint-700);
border-radius:12px; background:#F4F7FB; color:var(--ink-soft);
font-size:15px; line-height:1.6;
}
.pv-aviso b{ display:block; margin-bottom:4px; color:var(--ink); }
/* El BORRADOR interno si es una advertencia -"esto no esta en vigor"- y ahi
el rojo esta bien. Esta variante no llega al build publico. */
.pv-aviso--borrador{
border-color:#F3C6C2; border-left-color:#B42318;
background:#FEF3F2; color:#7A1C14;
}
.pv-aviso--borrador b{ color:#B42318; }
.pv-cuerpo{ padding:0 0 clamp(60px,8vw,96px); }
.pv-cuerpo h2{ font-size:clamp(19px,2.2vw,23px); margin:34px 0 10px; }
.pv-cuerpo p{ max-width:66ch; color:var(--ink-soft); line-height:1.7; margin-bottom:12px; }
.pv-datos{ display:grid; grid-template-columns:minmax(0,220px) 1fr; gap:8px 20px;
max-width:66ch; margin:6px 0 4px; }
.pv-datos dt{ font-weight:600; color:var(--ink); }
.pv-datos dd{ color:var(--ink-soft); }
.pv-lista{ max-width:66ch; color:var(--ink-soft); line-height:1.7; padding-left:20px; }
.pv-lista li{ margin-bottom:5px; }
.pv-pend{
display:inline-block; padding:2px 9px; border-radius:999px;
background:#FFFAEB; border:1px solid #F5D38A; color:#92400E;
font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
@media (max-width:640px){ .pv-datos{ grid-template-columns:1fr; gap:2px 0; }
.pv-datos dd{ margin-bottom:10px; } }