/* =====================================================================
   ExtremePaq — Inicio: hero animado y sección de la app (WEB-HOME-EXPERIENCE-01)
   Solo lo carga index.html. Usa los tokens de styles.css (--navy, --orange, --blue…).
   Las piezas de cada escena se colocan en unidades del alto del escenario (--u = 1cqh): la composición escala con
   él y se mantiene centrada en cualquier ancho. Las animaciones solo corren en la escena activa.
   ===================================================================== */

/* ---------- Hero: marco ---------- */
.eh{position:relative; overflow:hidden; color:#EAF0F7; touch-action:pan-y;
  background:
   radial-gradient(900px 520px at 85% 10%, rgba(37,99,235,.30), transparent 62%),
   radial-gradient(760px 420px at 0% 110%, rgba(245,158,11,.16), transparent 58%),
   linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 100%)}
.eh__fondo{position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1.3px, transparent 1.3px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, #000 40%, transparent); mask-image:linear-gradient(180deg, #000 40%, transparent)}
.eh__grid{position:relative; display:grid; align-items:center; column-gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  grid-template-areas:"texto escena" "cta control";
  padding-block:clamp(28px,4vw,48px) 8px}
.eh__texto{grid-area:texto; align-self:end}
.eh__cta{grid-area:cta; display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; align-self:center}
.eh__escenario{grid-area:escena}
.eh__control{grid-area:control; align-self:center; margin-top:18px}

/* Oferta permanente: el courier va primero, la app lo refuerza. */
.eh__oferta{display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:.35em .45em .35em 1em;
  border-radius:var(--radius-pill); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  font-family:var(--font-display); font-weight:600; font-size:.9rem; color:#fff}
.eh__oferta .tarifa-badge__n{font-size:1.45rem}
.eh__h1{margin-top:14px; color:#C9D6E6; font-weight:600; font-size:clamp(1.02rem,1.5vw,1.22rem); letter-spacing:0; line-height:1.35}
.eh__h1 .accent{color:var(--orange)}

/* Texto de las escenas: apiladas en la misma celda → el alto es el de la más larga y no hay saltos. */
.eh__copias{display:grid; margin-top:18px}
.eh__copia{grid-area:1/1; min-width:0; align-self:end}   /* el aire sobrante queda arriba, junto al H1 */
.eh.is-listo .eh__copia{visibility:hidden; opacity:0; transition:opacity .35s ease, visibility 0s linear .35s}
.eh.is-listo .eh__copia.is-activa{visibility:visible; opacity:1; transition:opacity .45s ease .1s}
.eh.is-listo .eh__copia > *{transform:translateY(10px); transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.eh.is-listo .eh__copia.is-activa > *{transform:none}
.eh.is-listo .eh__copia.is-activa > :nth-child(2){transition-delay:.06s}
.eh.is-listo .eh__copia.is-activa > :nth-child(3){transition-delay:.12s}
.eh.is-listo .eh__copia.is-activa > :nth-child(4){transition-delay:.18s}
.eh__chip{display:inline-flex; align-items:center; gap:7px; padding:.3em .8em; border-radius:var(--radius-pill);
  background:rgba(245,158,11,.14); color:#FFD58A; font-family:var(--font-display); font-weight:600; font-size:.82rem}
.eh__chip svg{width:16px; height:16px}
.eh__titulo{margin-top:12px; color:#fff; font-weight:800; font-size:clamp(2rem,3.3vw,2.85rem); line-height:1.08; letter-spacing:-.02em}
.eh__titulo .accent{color:var(--orange)}
.eh__lead{margin-top:14px; color:#B9C6D8; font-size:1.08rem; line-height:1.6; max-width:46ch}
.eh__acciones{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.eh__puntos{list-style:none; padding:0}
.eh__puntos li{display:inline-flex; align-items:center; gap:7px; padding:.42em .85em; border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.16); color:#E7EEF7; font-size:.9rem; font-weight:600}
.eh__puntos li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--orange)}

/* Botón claro sobre navy (el .btn-ghost de styles.css es para fondo blanco). */
.btn-ghost-claro{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.32)}
.btn-ghost-claro:hover{border-color:var(--orange); color:var(--orange)}
.btn-ghost-claro svg{width:1.05em; height:1.05em}

/* Badges oficiales de las tiendas: misma altura, sin alterar el arte. */
.badge-tienda{display:inline-block; border-radius:9px; line-height:0}
.badge-tienda img{height:48px; width:auto}
.badge-tienda:hover{transform:translateY(-2px)}
.badge-tienda{transition:transform .15s ease}

/* ---------- Escenario ---------- */
.eh__escenario{position:relative; width:100%; aspect-ratio:1.18; max-height:540px; container-type:size; --u:min(1cqh, .8cqw); overflow:hidden}
@supports not (height:1cqh){ .eh__escenario{--u:4.6px} }
.eh__ruta-fondo{position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:rgba(255,255,255,.09);
  stroke-linecap:round; vector-effect:non-scaling-stroke}
.eh__ruta-fondo path{stroke-width:2px; stroke-dasharray:0 9; vector-effect:non-scaling-stroke}
.eh__vis{position:absolute; inset:0}
/* Solo la escena activa es visible (sin JS: la primera, que trae is-activa en el HTML). */
.eh__vis{visibility:hidden; opacity:0; transition:opacity .4s ease, visibility 0s linear .4s}
.eh__vis.is-activa{visibility:visible; opacity:1; transition:opacity .35s ease}

/* Pieza: posición en --u desde el centro del escenario; rotación de reposo con `rotate` (no choca con la entrada). */
.eh-p{position:absolute; left:calc(50% + var(--x,0) * var(--u)); top:calc(var(--y,0) * var(--u));
  width:calc(var(--w,20) * var(--u)); rotate:var(--r,0deg); margin:0}
.eh__vis.is-activa .eh-p{animation:var(--a,eh-aparecer) var(--dur,.85s) cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.eh__vis.is-activa .eh-flota{animation:eh-flotar 6s ease-in-out calc(var(--d,0s) + 1s) infinite}
.eh--quieto .eh-flota, .eh--quieto .eh-ruta__onda, .eh--quieto .eh-escudo__onda{animation-play-state:paused !important}

@keyframes eh-aparecer{from{opacity:0}to{opacity:1}}
@keyframes eh-subir{from{opacity:0; transform:translate3d(0,38%,0)}to{opacity:1; transform:none}}
@keyframes eh-izq{from{opacity:0; transform:translate3d(-34%,0,0)}to{opacity:1; transform:none}}
@keyframes eh-der{from{opacity:0; transform:translate3d(30%,0,0)}to{opacity:1; transform:none}}
@keyframes eh-caer{from{opacity:0; transform:translate3d(0,-40%,0) scale(.94)}to{opacity:1; transform:none}}
@keyframes eh-pop{0%{opacity:0; transform:scale(.4)}60%{opacity:1; transform:scale(1.08)}100%{opacity:1; transform:none}}
@keyframes eh-columpio{0%{opacity:0; transform:translateY(-30%) rotate(-16deg)}35%{opacity:1}55%{transform:rotate(7deg)}
  75%{transform:rotate(-3deg)}90%{transform:rotate(1deg)}100%{opacity:1; transform:none}}
@keyframes eh-flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-1.4 * var(--u)))}}

/* Teléfono (marco propio; la captura empieza bajo la barra de estado). */
.eh-tel{background:#0A1322; border-radius:calc(7.5 * var(--u)); padding:calc(1.5 * var(--u));
  box-shadow:0 30px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12)}
.eh-tel__pantalla{position:relative; border-radius:calc(6 * var(--u)); overflow:hidden; background:#F6F6F1}
.eh-tel__barra{display:flex; align-items:center; justify-content:space-between; height:calc(5.6 * var(--u));
  padding:0 calc(4 * var(--u)); color:#0B1B2E; font:600 calc(2.1 * var(--u))/1 var(--font-body)}
.eh-tel__barra > i{width:calc(9 * var(--u)); height:calc(2.6 * var(--u)); border-radius:99px; background:#0A1322}
.eh-tel__iconos{display:flex; gap:calc(.5 * var(--u)); align-items:flex-end}
.eh-tel__iconos b{display:block; width:calc(.7 * var(--u)); background:#0B1B2E; border-radius:1px}
.eh-tel__iconos b:nth-child(1){height:calc(1 * var(--u))} .eh-tel__iconos b:nth-child(2){height:calc(1.5 * var(--u))} .eh-tel__iconos b:nth-child(3){height:calc(2 * var(--u))}
.eh-tel__pantalla > img{width:100%; height:auto}

/* Notificación tipo sistema. */
.eh-aviso{display:flex; gap:calc(2 * var(--u)); align-items:flex-start; padding:calc(2.2 * var(--u)); border-radius:calc(3.4 * var(--u));
  background:rgba(255,255,255,.94); color:#0B1B2E; box-shadow:0 18px 40px rgba(3,10,25,.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:calc(2.2 * var(--u)); line-height:1.3; z-index:3}
.eh-aviso__icono{width:calc(7 * var(--u)); height:calc(7 * var(--u)); border-radius:calc(1.8 * var(--u)); flex:0 0 auto}
.eh-aviso p{margin:0}
.eh-aviso__app{font-size:.82em; color:#5B6675; display:flex; justify-content:space-between; gap:8px}
.eh-aviso__t{font-weight:700; font-family:var(--font-display)}
.eh-aviso__m{color:#344256}

.eh-tarjeta{z-index:2}
.eh-tarjeta img{width:100%; height:auto; filter:drop-shadow(0 20px 30px rgba(3,10,25,.4))}
.eh-burbuja{padding:calc(2 * var(--u)) calc(2.6 * var(--u)); border-radius:calc(3 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)) calc(.8 * var(--u));
  background:#fff; color:#0B1B2E; font-size:calc(2.3 * var(--u)); line-height:1.3; box-shadow:0 14px 30px rgba(3,10,25,.35); z-index:3}
.eh-burbuja span{display:block; margin-top:4px; font-size:.78em; color:#5B6675}

/* Escena 2: ruta Miami → RD. */
.eh-ruta{height:calc(100 * var(--u)); overflow:visible; pointer-events:none}   /* cubre todo el escenario: no cuenta como «encima» */
.eh-ruta__puntos{fill:none; stroke:var(--orange); stroke-width:1.6; stroke-dasharray:0 4; stroke-linecap:round}
.eh-ruta__trazo{fill:none; stroke:#fff; stroke-width:6; stroke-dasharray:1; stroke-dashoffset:1}
.eh__vis.is-activa .eh-ruta__trazo{animation:eh-trazo 2.6s cubic-bezier(.45,0,.2,1) .2s forwards}
@keyframes eh-trazo{to{stroke-dashoffset:0}}
.eh-ruta__avion{fill:#fff}
/* El avión aterriza y se desvanece: en la llegada manda el pin. */
.eh__vis.is-activa .eh-ruta__avion{animation:eh-aterrizar .5s ease 2.75s forwards}
@keyframes eh-aterrizar{to{opacity:0}}
.eh-ruta__pin circle{fill:var(--orange)}
.eh-ruta__pin--rd circle{fill:#FFD58A}
.eh-ruta__onda{fill:none !important; stroke:var(--orange); stroke-width:.8; transform-box:fill-box; transform-origin:center}
.eh-ruta__pin--rd .eh-ruta__onda{stroke:#FFD58A}
.eh__vis.is-activa .eh-ruta__onda{animation:eh-onda 2.4s ease-out 1s infinite}
@keyframes eh-onda{from{transform:scale(1); opacity:.9}to{transform:scale(3.4); opacity:0}}
.eh-lugar{font-family:var(--font-display); font-weight:700; font-size:calc(2.6 * var(--u)); color:#fff; white-space:nowrap; width:auto}
.eh-lugar--rd{color:#FFD58A}
.eh-etiqueta{display:flex; flex-direction:column; align-items:center; padding:calc(3.4 * var(--u)) calc(2 * var(--u)) calc(2.6 * var(--u));
  border-radius:calc(3 * var(--u)); background:var(--orange); color:var(--navy); transform-origin:50% 0;
  box-shadow:0 24px 44px rgba(245,158,11,.28), 0 10px 24px rgba(3,10,25,.35); z-index:2}
.eh-etiqueta__ojal{position:absolute; top:calc(1.3 * var(--u)); width:calc(3 * var(--u)); height:calc(3 * var(--u)); border-radius:50%;
  background:var(--navy-2); box-shadow:inset 0 0 0 calc(.6 * var(--u)) rgba(255,255,255,.55)}
.eh-etiqueta__k{margin-top:calc(1.4 * var(--u)); font-weight:700; font-size:calc(2.3 * var(--u)); letter-spacing:.02em}
.eh-etiqueta__n{font-family:var(--font-display); font-weight:800; font-size:calc(12 * var(--u)); line-height:1; letter-spacing:-.03em}
.eh-etiqueta__n small{font-size:.32em; vertical-align:.95em; margin-right:.12em; letter-spacing:0}
.eh-etiqueta__u{font-weight:600; font-size:calc(2.2 * var(--u))}
.eh-caja{overflow:visible; filter:drop-shadow(0 14px 18px rgba(3,10,25,.4))}
.eh-caja__lado{fill:#C78A3B} .eh-caja__frente{fill:#E2A458} .eh-caja__tapa{fill:#F2C27E} .eh-caja__cinta{fill:#0B1B2E; opacity:.82}
.eh-casillero{padding:calc(2.4 * var(--u)) calc(2.8 * var(--u)); border-radius:calc(3 * var(--u)); background:#fff; color:#0B1B2E;
  box-shadow:0 18px 36px rgba(3,10,25,.35); z-index:3}
.eh-casillero p{margin:0}
.eh-casillero__k{display:flex; align-items:center; gap:6px; color:var(--orange-deep); font-weight:700; font-size:calc(2.2 * var(--u))}
.eh-casillero__k svg{width:1.2em; height:1.2em}
.eh-casillero__v{margin-top:4px; font-family:var(--font-display); font-weight:700; font-size:calc(2.8 * var(--u))}
.eh-casillero__s{color:#5B6675; font-size:calc(2.2 * var(--u))}

/* Escena 3: formulario real de la app, campo a campo. */
.eh-form{padding:calc(3 * var(--u)); border-radius:calc(3.4 * var(--u)); background:#fff; color:#0B1B2E;
  box-shadow:0 22px 44px rgba(3,10,25,.38); font-size:calc(2.1 * var(--u))}
.eh-form p{margin:0}
.eh-form__t{font-family:var(--font-display); font-weight:700; font-size:calc(3.2 * var(--u)); margin-bottom:calc(1.6 * var(--u)) !important}
.eh-form__campo{margin-top:calc(1.3 * var(--u))}
.eh-form__campo span{display:block; color:#5B6675; font-size:.92em}
.eh-form__campo b{display:block; margin-top:3px; padding:calc(1.1 * var(--u)) calc(1.6 * var(--u)); border:1.5px solid #E1E6EE;
  border-radius:calc(1.6 * var(--u)); font-weight:600; white-space:nowrap; overflow:hidden; clip-path:inset(0 100% 0 0)}
.eh__vis.is-activa .eh-form__campo b{animation:eh-escribir .45s steps(14,end) var(--t) forwards}
@keyframes eh-escribir{to{clip-path:inset(0 0 0 0); border-color:var(--orange)}}
.eh-form__btn{margin-top:calc(2 * var(--u)) !important; padding:calc(1.4 * var(--u)); border-radius:calc(1.8 * var(--u)); text-align:center;
  background:var(--orange); color:var(--navy); font-weight:700; font-family:var(--font-display)}
.eh__vis.is-activa .eh-form__btn{animation:eh-pulsar .5s ease 2.45s}
@keyframes eh-pulsar{50%{transform:scale(.94); filter:brightness(.92)}}
.eh-ok{display:inline-flex; align-items:center; gap:6px; width:auto; padding:calc(1.4 * var(--u)) calc(2.4 * var(--u)); border-radius:99px;
  background:var(--ok); color:#fff; font-family:var(--font-display); font-weight:700; font-size:calc(2.5 * var(--u)); white-space:nowrap;
  box-shadow:0 12px 26px rgba(15,157,88,.4); z-index:4}
.eh-ok svg{width:1.2em; height:1.2em}

/* Escena 4: RUA (ilustración genérica). */
.eh-doc, .eh-id{overflow:visible; filter:drop-shadow(0 18px 26px rgba(3,10,25,.4))}
.eh-doc__hoja{fill:#fff} .eh-doc__cab{fill:var(--blue)}
.eh-doc__titulo{fill:#fff; font:700 7px var(--font-display); letter-spacing:.12em}
.eh-doc__fila rect:first-child{fill:#E8EEF8} .eh-doc__fila path{fill:none; stroke:var(--ok); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0}
.eh__vis.is-activa .eh-doc__fila path{animation:eh-aparecer .3s ease var(--t) forwards}
.eh-doc__linea{fill:#C9D3E2} .eh-doc__linea--suave{fill:#E3E8F0}
.eh-id__base{fill:#fff} .eh-id__banda{fill:var(--orange)} .eh-id__foto{fill:#E8EEF8} .eh-id__cara{fill:#9FB0C8}
.eh-id__linea{fill:#C9D3E2} .eh-id__linea--suave{fill:#E3E8F0}
.eh-escudo{z-index:2}
.eh-escudo svg{width:100%; height:auto; overflow:visible; filter:drop-shadow(0 20px 30px rgba(3,10,25,.45))}
.eh-escudo__forma{fill:var(--ok)}
.eh-escudo__check{fill:none; stroke:#fff; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1}
.eh__vis.is-activa .eh-escudo__check{animation:eh-trazo .55s ease-out 2.1s forwards}
.eh-escudo__onda{position:absolute; inset:8% 6% 4%; border-radius:44% 44% 50% 50%; border:2px solid rgba(15,157,88,.7); opacity:0}
.eh__vis.is-activa .eh-escudo__onda{animation:eh-onda-escudo 2.8s ease-out 2.6s infinite}
@keyframes eh-onda-escudo{from{transform:scale(1); opacity:.8}to{transform:scale(1.35); opacity:0}}
.eh-caja--rua{z-index:1}
.eh-pastilla{width:auto; padding:calc(1.2 * var(--u)) calc(2.6 * var(--u)); border-radius:99px; background:var(--orange); color:var(--navy);
  font-family:var(--font-display); font-weight:700; font-size:calc(2.6 * var(--u)); white-space:nowrap; box-shadow:0 10px 24px rgba(3,10,25,.3); z-index:3}
.eh-pastilla--azul{background:#fff; color:var(--navy)}

/* ---------- Controles ---------- */
.eh__control{display:flex; align-items:center; gap:10px}
.eh__tabs{flex:1; min-width:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.eh__tab{min-height:44px; padding:8px 6px 10px; border:0; border-radius:12px; background:transparent; color:#93A3B8;
  font-family:var(--font-display); font-weight:600; font-size:.86rem; display:flex; flex-direction:column; align-items:stretch; gap:7px;
  text-align:center; transition:color .2s ease, background .2s ease}
.eh__tab span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.eh__tab:hover{color:#fff; background:rgba(255,255,255,.06)}
.eh__tab[aria-selected="true"]{color:#fff}
.eh__barra{display:block; height:3px; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden}
.eh__barra > i{display:block; height:100%; width:0; background:var(--orange); border-radius:inherit}
.eh__tab[aria-selected="true"] .eh__barra > i{width:100%}
.eh--auto .eh__tab[aria-selected="true"] .eh__barra > i{width:auto; animation:eh-progreso var(--eh-dur,8s) linear both}
.eh--auto.eh--pausa .eh__tab[aria-selected="true"] .eh__barra > i, .eh--auto.eh--quieto .eh__tab[aria-selected="true"] .eh__barra > i{animation-play-state:paused}
@keyframes eh-progreso{from{width:0}to{width:100%}}

/* Cifras */
.eh__stats{position:relative; display:flex; justify-content:center; gap:clamp(20px,6vw,72px); flex-wrap:wrap;
  padding-block:22px 30px; margin-top:18px; border-top:1px solid rgba(255,255,255,.08)}
.eh__stat{text-align:center}
.eh__stat b{display:block; font-family:var(--font-display); font-weight:800; font-size:1.45rem; color:#fff; font-variant-numeric:tabular-nums}
.eh__stat span{color:#93A3B8; font-size:.84rem}

/* ---------- Responsive del hero: composición propia en columna ---------- */
@media (max-width:959px){
  .eh__grid{grid-template-columns:minmax(0,1fr); grid-template-areas:"texto" "escena" "control" "cta"; padding-top:26px}
  .eh__escenario{aspect-ratio:auto; height:clamp(270px,58vw,430px); margin-top:20px}
  .eh__control{margin-top:12px}
  .eh__cta{margin-top:18px}
  .eh__lead{max-width:60ch}
}
@media (max-width:600px){
  .eh__oferta{font-size:.8rem}
  .eh__oferta .tarifa-badge__n{font-size:1.25rem}
  .eh__h1{font-size:.98rem; margin-top:12px}
  .eh__copias{margin-top:14px}
  .eh__titulo{font-size:clamp(1.6rem,7.4vw,2.05rem); margin-top:10px}
  .eh__lead{font-size:.98rem; margin-top:10px}
  .eh__acciones{margin-top:14px}
  .eh__puntos{display:none}   /* en móvil lo dice el texto; así ninguna escena alarga el hero */
  .badge-tienda img{height:44px}
  .eh__tab{font-size:.78rem; padding-inline:2px}
  .eh__tab > span{white-space:normal; overflow:visible; line-height:1.15; overflow-wrap:normal}
  .eh__tab-u{display:none}
  .eh__cta{gap:10px}
  .eh__cta .btn{flex:1 1 0; min-width:0; justify-content:center; text-align:center; padding:.8em .9em; font-size:.95rem}
  .eh__cta .cta-pulse{animation:none}
  .eh__escenario{height:clamp(250px,68vw,300px)}
  .eh__stats{gap:10px; justify-content:space-between; padding-block:16px 20px; margin-top:14px}
  .eh__stat b{font-size:1.15rem}
  .eh__stat span{font-size:.76rem}
}
/* Teléfono en horizontal: vuelve a dos columnas compactas para que texto e ilustración quepan juntos. */
@media (min-width:640px) and (max-height:520px) and (orientation:landscape){
  .eh__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); grid-template-areas:"texto escena" "cta control"; padding-top:18px}
  .eh__escenario{aspect-ratio:auto; height:min(74vh,320px); margin-top:0}
  .eh__h1{font-size:.95rem; margin-top:8px}
  .eh__copias{margin-top:10px}
  .eh__titulo{font-size:1.55rem; margin-top:8px}
  .eh__lead{font-size:.92rem; margin-top:8px}
  .eh__acciones{margin-top:10px}
  .eh__puntos{display:none}
  .badge-tienda img{height:40px}
  .eh__cta{margin-top:12px}
  .eh__cta .btn{padding:.6em 1em; font-size:.92rem}
  .eh__tab{font-size:.78rem; padding-inline:2px}
  .eh__tab > span{white-space:normal; overflow:visible; line-height:1.15}
  .eh__tab-u{display:none}
}

/* ---------- Movimiento reducido: escenas fijas, sin entradas ni bucles ---------- */
@media (prefers-reduced-motion:reduce){
  .eh .eh-p, .eh .eh-flota, .eh .eh-ruta__onda, .eh .eh-escudo__onda, .eh__barra > i{animation:none !important}
  .eh-ruta__trazo, .eh-escudo__check{stroke-dashoffset:0}
  .eh-form__campo b{clip-path:none; border-color:var(--orange)}
  .eh-doc__fila path{opacity:1}
  .eh-ruta__avion{display:none}
  .eh.is-listo .eh__copia, .eh.is-listo .eh__copia > *, .eh__vis{transition:none}
}

/* =====================================================================
   Sección de la app
   ===================================================================== */
.app7{background:linear-gradient(180deg, var(--bg-cool), #fff 70%); overflow:hidden}
.app7__grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,64px); align-items:center}
.app7__muestra{position:relative; display:flex; justify-content:center; padding-block:10px}
.app7__halo{position:absolute; inset:6% 4%; border-radius:50%; background:radial-gradient(closest-side, rgba(245,158,11,.30), rgba(37,99,235,.12) 60%, transparent)}
.app7__tel{position:relative; width:min(300px,100%); --u:4.6px}
/* La captura incluye la barra inferior de la app: la pantalla toma el alto de la imagen (width/height del <img>). */
.app7__tel .eh-tel__pantalla > img{transition:opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1)}
.app7__tel.is-cambiando .eh-tel__pantalla > img{opacity:0; transform:translateY(10px)}
.app7__capa{position:absolute; left:-9%; right:-9%; opacity:0; transform:translateY(14px) scale(.97); transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); pointer-events:none}
.app7__capa--paquete img, .app7__capa--prealerta img{width:100%; height:auto; filter:drop-shadow(0 18px 28px rgba(11,27,46,.35))}
.app7__capa--paquete, .app7__capa--prealerta{top:34%}
.app7__capa--aviso{top:9%; left:4%; right:4%}
.app7__capa--aviso .eh-aviso{--u:4.2px}
.app7__tel[data-capa="paquete"] .app7__capa--paquete,
.app7__tel[data-capa="prealerta"] .app7__capa--prealerta,
.app7__tel[data-capa="aviso"] .app7__capa--aviso{opacity:1; transform:none}
.app7__tel[data-capa="paquete"] .eh-tel__pantalla > img,
.app7__tel[data-capa="prealerta"] .eh-tel__pantalla > img{filter:brightness(.55)}

.app7__chip{display:inline-flex; align-items:center; gap:7px; padding:.3em .85em; border-radius:var(--radius-pill);
  background:var(--orange-soft); color:var(--orange-deep); font-family:var(--font-display); font-weight:600; font-size:.84rem}
.app7__chip svg{width:16px; height:16px}
.app7__texto h2{margin-top:12px; font-size:clamp(1.7rem,3.2vw,2.45rem); font-weight:800}
.app7__lead{margin-top:12px; color:var(--muted); font-size:1.05rem; max-width:52ch}
.app7__funciones{margin-top:22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.app7__f{position:relative; overflow:hidden; display:flex; gap:12px; align-items:flex-start; text-align:left; padding:12px 14px; border-radius:14px;
  border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; transition:border-color .2s, box-shadow .2s, transform .15s}
.app7__f:hover{border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.app7__f[aria-pressed="true"]{border-color:var(--orange); background:#FFFBF2; box-shadow:0 0 0 3px rgba(245,158,11,.18), var(--shadow-sm)}
.app7__f-ic{flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--navy); color:var(--orange)}
.app7__f[aria-pressed="true"] .app7__f-ic{background:var(--orange); color:var(--navy)}
.app7__f-ic svg{width:20px; height:20px}
.app7__f b{display:block; font-family:var(--font-display); color:var(--navy); font-size:.98rem; line-height:1.25}
.app7__f small{display:block; margin-top:3px; color:var(--muted); font-size:.84rem; line-height:1.4}
/* Badges centrados respecto a las dos columnas de funciones y ~18 % más grandes (48 → 57 px), sin deformar. */
.app7__tiendas{margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px}
.app7__tiendas .badge-tienda img{height:57px; width:auto}
.app7__cuenta{margin-top:16px; color:var(--muted); text-align:center}
.app7__cuenta a{color:var(--orange-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* En columna, el teléfono va justo debajo de las funciones que lo cambian (el texto se «desarma» con display:contents). */
@media (max-width:959px){
  .app7__grid{grid-template-columns:minmax(0,1fr); gap:0}
  .app7__texto{display:contents}
  .app7__chip{justify-self:start}
  .app7__muestra{order:1; margin-top:18px}
  .app7__tiendas{order:2; justify-content:center}
  .app7__cuenta{order:3; text-align:center}
  .app7__tel{width:min(250px,64vw)}
}
/* Móvil: las funciones pasan a una fila deslizable de fichas compactas (sin descripciones). */
@media (max-width:600px){
  .app7__funciones{display:flex; overflow-x:auto; gap:8px; margin-inline:-16px; padding:4px 16px 10px; scroll-snap-type:x proximity;
    scrollbar-width:none}
  .app7__funciones::-webkit-scrollbar{display:none}
  .app7__f{flex:0 0 auto; align-items:center; padding:8px 14px 8px 8px; border-radius:99px; scroll-snap-align:start}
  .app7__f small{display:none}
  .app7__f-ic{width:32px; height:32px; border-radius:50%}
  .app7__f-ic svg{width:17px; height:17px}
  .app7__f b{font-size:.9rem; white-space:nowrap}
  .badge-tienda img{height:44px}
}
@media (prefers-reduced-motion:reduce){
  .app7__capa, .app7__tel .eh-tel__pantalla > img, .app7__f{transition:none}
}

/* =====================================================================
   Servicios junto a la dirección de Miami (WEB-HOME-SERVICIOS-AJUSTE-01): sin el banner de la app, las seis
   tarjetas ocupan la altura del panel de Miami. Solo Inicio usa estas clases (styles.css no se toca).
   ===================================================================== */
@media (min-width:941px){
  .miami-serv{align-items:stretch}
  .serv{display:flex; flex-direction:column}
  .serv__grid{flex:1; grid-template-rows:repeat(2,minmax(0,1fr)); gap:18px}
}
.serv__card{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 20px; border-radius:18px}
.serv__ic{width:68px; height:68px; margin-bottom:16px}
.serv__ic svg{width:32px; height:32px}
.serv__card h3{font-size:1.1rem; margin-bottom:8px}
.serv__card p{font-size:.93rem; line-height:1.55; max-width:24ch}
/* Tableta: columnas según el ancho, nunca más angostas de 210 px. */
@media (max-width:940px){
  .serv__grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
}
/* Móvil: tarjeta horizontal (ícono a la izquierda), más corta y fácil de leer. */
@media (max-width:560px){
  .serv__grid{grid-template-columns:minmax(0,1fr); gap:12px}
  .serv__card{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; align-items:center; padding:18px; text-align:left}
  .serv__ic{grid-row:1 / 3; width:56px; height:56px; margin:0}
  .serv__ic svg{width:27px; height:27px}
  .serv__card h3{align-self:end; font-size:1.04rem; margin-bottom:3px}
  .serv__card p{align-self:start; max-width:none; font-size:.9rem}
}

/* =====================================================================
   Artículos que no transportamos (WEB-HOME-RESTRICCIONES-SOPORTE-01): encabezado navy a todo el ancho y tarjetas
   por categoría que montan sobre él. Sin JS todo queda visible; la entrada animada la pone home.js (.pr--anim).
   ===================================================================== */
.pr{position:relative; overflow:hidden; padding-top:0; background:var(--bg-warm)}
.pr__head{position:relative; isolation:isolate; max-width:760px; margin:0 auto; padding:clamp(52px,7vw,84px) 0 clamp(108px,12vw,138px); text-align:center; color:#DCE6F2}
.pr__head::before{content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  background:radial-gradient(700px 300px at 85% 0%, rgba(37,99,235,.28), transparent 65%), linear-gradient(165deg, var(--navy), var(--navy-2))}
.pr__eyebrow{display:inline-flex; align-items:center; gap:8px; padding:.35em .9em; border-radius:var(--radius-pill); background:rgba(245,158,11,.14);
  color:#FFD58A; font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase}
.pr__eyebrow svg{width:16px; height:16px}
.pr__head h2{margin-top:14px; color:#fff; font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:800}
.pr__head > p:last-child{margin:14px auto 0; max-width:56ch; color:#B9C6D8; font-size:1.05rem}
.pr__grid{position:relative; list-style:none; margin:clamp(-96px,-8vw,-72px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.pr__card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px 22px; box-shadow:var(--shadow-md);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.pr__card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--orange)}
.pr__ic{width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--navy); color:var(--orange)}
.pr__card:nth-child(even) .pr__ic{background:var(--orange); color:var(--navy)}
.pr__ic svg{width:26px; height:26px}
.pr__card h3{margin-top:14px; font-size:1.08rem; font-weight:700}
.pr__items{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:7px}
.pr__items li{position:relative; padding-left:26px; color:var(--ink); font-size:.97rem; line-height:1.45}
.pr__items li::before{content:""; position:absolute; left:0; top:.22em; width:17px; height:17px; border-radius:50%; background:#FDECEC;
  box-shadow:inset 0 0 0 1.5px rgba(220,38,38,.55)}
.pr__items li::after{content:""; position:absolute; left:5px; top:calc(.22em + 8px); width:7px; height:1.6px; background:var(--danger); border-radius:1px}
.pr__ayuda{margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; padding:18px 22px; border-radius:18px;
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--orange); box-shadow:var(--shadow-sm)}
.pr__ayuda-ic{flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--orange-soft); color:var(--orange-deep)}
.pr__ayuda-ic svg{width:24px; height:24px}
.pr__ayuda-txt{flex:1 1 260px; min-width:0}
.pr__ayuda-txt b{display:block; font-family:var(--font-display); color:var(--navy); font-size:1.05rem}
.pr__ayuda-txt span{color:var(--muted)}
.pr__ayuda .btn{flex:0 0 auto}

/* Aviso cuando el chat no está disponible (nunca se simula que se abrió). */
.chat-aviso{flex:1 1 100%; margin:0; color:var(--muted); font-size:.9rem}
.ig-botones .chat-aviso{text-align:center}
button[data-abrir-chat][aria-busy="true"]{opacity:.75; cursor:progress}

/* Botón de chat en la tarjeta de redes (antes, WhatsApp). */
.ig-btn{border:0; cursor:pointer; width:100%}
.ig-btn-chat{background:var(--navy); color:#fff}
.ig-btn-chat:hover{background:var(--orange); color:var(--navy); box-shadow:0 6px 16px rgba(245,158,11,.35)}

/* Entrada por viewport: encabezado y tarjetas escalonadas (~450 ms). */
.pr--anim .pr__head > *, .pr--anim .pr__card, .pr--anim .pr__ayuda{opacity:0; transform:translateY(18px)}
.pr--anim.is-in .pr__head > *, .pr--anim.is-in .pr__card, .pr--anim.is-in .pr__ayuda{opacity:1; transform:none;
  transition:opacity .45s ease var(--d,0s), transform .45s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.pr--anim.is-in .pr__card:hover{transform:translateY(-4px); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}

@media (max-width:940px){
  .pr__grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (max-width:560px){
  .pr__grid{gap:12px}
  /* Móvil: el ícono al lado del título; la tarjeta queda más corta. */
  .pr__card{padding:16px 18px; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; align-items:center}
  .pr__ic{width:44px; height:44px; border-radius:13px}
  .pr__ic svg{width:23px; height:23px}
  .pr__card h3{margin-top:0}
  .pr__items{grid-column:1 / -1; margin-top:12px}
  .pr__ayuda{padding:16px}
  .pr__ayuda .btn{flex:1 1 100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .pr--anim .pr__head > *, .pr--anim .pr__card, .pr--anim .pr__ayuda{opacity:1 !important; transform:none !important; transition:none !important}
  .pr__card{transition:none}
}

/* Rotación de funciones (WEB-HOME-APP-SHOWCASE-AJUSTE-01): la barra de la tarjeta activa marca los 4 s. */
.app7__f{transition:border-color .3s ease, background-color .3s ease, box-shadow .3s ease, transform .15s}
.app7__prog{position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--orange); pointer-events:none}
.app7--auto .app7__f[aria-pressed="true"] .app7__prog{animation:app7-prog var(--app7-dur,4s) linear both}
.app7--auto.app7--pausa .app7__f[aria-pressed="true"] .app7__prog{animation-play-state:paused}
@keyframes app7-prog{from{width:0}to{width:100%}}
@media (max-width:600px){
  .app7__tiendas .badge-tienda img{height:clamp(44px,13vw,54px)}
  .app7__prog{left:14px; right:14px; width:auto; transform-origin:left; transform:scaleX(0)}
  .app7--auto .app7__f[aria-pressed="true"] .app7__prog{animation-name:app7-prog-m}
}
@keyframes app7-prog-m{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .app7__prog{display:none}
  .app7__tel .eh-tel__pantalla > img{transform:none}
}

/* =====================================================================
   Calculadora (WEB-HOME-CALCULADORA-01): tres beneficios bajo el costo estimado. Informativos (no son botones):
   navy algo más claro, ícono amarillo. Jerarquía: peso → costo → beneficios → nota de impuestos.
   ===================================================================== */
.calc-beneficios{width:100%; list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.calc-beneficio{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px 8px; border-radius:12px;
  background:var(--navy-soft); border:1px solid rgba(255,255,255,.08); color:#E7EEF7; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:.74rem; line-height:1.25; letter-spacing:.05em; text-transform:uppercase}
.calc-beneficio__ic{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:rgba(245,158,11,.16); color:var(--orange)}
.calc-beneficio__ic svg{width:19px; height:19px}
/* Entrada discreta, una vez, al llegar a la calculadora (la pone home.js; sin JS o con movimiento reducido, visibles). */
.calc-beneficios--anim .calc-beneficio{opacity:0; transform:translateY(10px)}
.calc-beneficios--anim.is-in .calc-beneficio{opacity:1; transform:none; transition:opacity .4s ease var(--d,0s), transform .4s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
@media (max-width:400px){
  .calc-beneficios{gap:7px}
  .calc-beneficio{padding:12px 4px; font-size:.72rem; letter-spacing:.02em}
  .calc-beneficio__ic{width:32px; height:32px}
}
@media (prefers-reduced-motion:reduce){
  .calc-beneficios--anim .calc-beneficio{opacity:1 !important; transform:none !important; transition:none !important}
}

/* ============ TAX FREE (WEB-HOME-TAX-FREE-01) ============
 * Banda dorada entre «artículos que no transportamos» y la calculadora: texto + pasos + descarga del certificado a la
 * izquierda; ilustración del certificado (decorativa, aria-hidden) a la derecha. En móvil se apila y la hoja se achica. */
.tf{margin-top:calc(-1 * clamp(18px,3.5vw,42px)); padding-top:0; padding-bottom:0; background:linear-gradient(var(--bg-warm) 55%, var(--bg-cool) 55%)}
/* La banda se apoya sobre el cambio de fondo y la calculadora arranca cerca: sin el doble padding entre secciones. */
.tf + .section{padding-top:clamp(28px,4vw,48px)}
.tf__card{position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center; gap:clamp(24px,4vw,56px); padding:clamp(28px,5vw,56px); border-radius:28px; color:var(--navy);
  background:radial-gradient(520px 260px at 92% 8%, rgba(255,255,255,.38), transparent 70%), linear-gradient(135deg, #FFC24A 0%, var(--orange) 52%, var(--orange-deep) 100%);
  box-shadow:0 24px 60px rgba(217,119,6,.28), var(--shadow-md)}
.tf__card::before{content:"TAX FREE"; position:absolute; z-index:-1; right:-2%; bottom:-.22em; font-family:var(--font-display); font-weight:800;
  font-size:clamp(4.5rem,13vw,10rem); line-height:1; letter-spacing:-.04em; color:rgba(255,255,255,.16); white-space:nowrap; pointer-events:none}
.tf__eyebrow{display:inline-flex; align-items:center; gap:8px; margin:0; padding:.38em .95em; border-radius:var(--radius-pill); background:var(--navy);
  color:#FFD58A; font-family:var(--font-display); font-weight:700; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase}
.tf__eyebrow svg{width:16px; height:16px}
.tf h2{margin-top:16px; font-size:clamp(1.75rem,3.6vw,2.7rem); font-weight:800; color:var(--navy)}
.tf__marca{display:inline-block; padding:.02em .32em; border-radius:12px; background:var(--navy); color:var(--orange); transform:rotate(-2deg)}
.tf__lead{margin:16px 0 0; max-width:58ch; font-size:1.08rem; line-height:1.55; color:#2A2410}
.tf__pasos{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px}
.tf__pasos li{display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px; background:rgba(255,255,255,.55);
  font-weight:600; color:var(--navy); line-height:1.4}
.tf__num{flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:var(--orange);
  font-family:var(--font-display); font-weight:800; font-size:.95rem}
.tf__acciones{margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px}
.tf__btn{background:var(--navy); color:#fff; padding:15px 26px; font-size:1.02rem; box-shadow:0 10px 24px rgba(11,27,46,.28)}
.tf__btn svg{width:20px; height:20px; color:var(--orange)}
.tf__btn:hover{background:var(--navy-soft); color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px rgba(11,27,46,.34)}
.tf__btn:focus-visible{outline:3px solid #fff; outline-offset:3px}
.tf__meta{font-size:.88rem; font-weight:600; color:rgba(11,27,46,.72)}

.tf__doc{display:grid; place-items:center}
.tf__hoja{position:relative; width:min(300px,100%); aspect-ratio:.78; padding:24px 22px; border-radius:10px; background:#fff;
  box-shadow:0 26px 50px rgba(11,27,46,.30); transform:rotate(3deg); transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.tf__card:hover .tf__hoja{transform:rotate(0deg) translateY(-4px)}
.tf__hoja::before{content:""; position:absolute; inset:8px; border:1.5px solid var(--line-strong); border-radius:6px; pointer-events:none}
.tf__hoja-estado{margin:0; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.tf__hoja-titulo{margin:6px 0 14px; font-family:var(--font-display); font-weight:800; font-size:1rem; line-height:1.2; color:var(--navy)}
.tf__linea{display:block; height:7px; margin:7px 0; border-radius:4px; background:var(--line)}
.tf__linea--corta{width:62%}
.tf__datos{margin:14px 0; display:grid; gap:8px}
.tf__datos dt{font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.tf__datos dd{margin:0; font-size:.86rem; font-weight:700; color:var(--navy)}
.tf__sello{position:absolute; right:-18px; bottom:-18px; width:104px; height:104px; border-radius:50%; display:grid; place-content:center;
  text-align:center; background:var(--navy); color:var(--orange); box-shadow:0 0 0 6px var(--navy), 0 12px 26px rgba(11,27,46,.35);
  transform:rotate(-12deg); font-family:var(--font-display); line-height:1}
/* Anillo punteado que gira alrededor del sello (el texto queda quieto). */
.tf__sello::before{content:""; position:absolute; inset:5px; border-radius:50%; border:3px dashed rgba(245,158,11,.85);
  animation:tf-girar 9s linear infinite}
@keyframes tf-girar{to{transform:rotate(360deg)}}
.tf__sello b{display:block; font-size:1.25rem; font-weight:800; letter-spacing:.04em}
.tf__sello small{display:block; margin-top:4px; font-size:.56rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#FFD58A}

@media (max-width:860px){
  .tf__card{grid-template-columns:1fr}
  .tf__hoja{width:min(240px,72%); margin-bottom:10px}
}
@media (max-width:560px){
  .tf__card{padding:26px 18px 28px; border-radius:22px}
  .tf__lead{font-size:1rem}
  .tf__pasos li{padding:9px 12px; font-size:.95rem}
  .tf__acciones{flex-direction:column; align-items:stretch; text-align:center}
  .tf__btn{width:100%; padding:15px 18px}
  .tf__sello{width:84px; height:84px; right:-12px; bottom:-12px}
  .tf__sello b{font-size:1.02rem}
}
@media (prefers-reduced-motion:reduce){
  .tf__hoja, .tf__card:hover .tf__hoja{transition:none; transform:rotate(3deg)}
  .tf__sello::before{animation:none}
  .tf__btn:hover{transform:none}
}