/* ═══════════════════════════════════════════════════════════════
   BNKA · Landing de relanzamiento
   Dirección de arte: "Una vida, dos países. Un solo dinero."
   Paleta y componentes basados en los tokens reales de bnka.com
   (ver prototype/LANDING-DESIGN.md). Coral #FB5374 como firma.
   ═══════════════════════════════════════════════════════════════ */

/* Fuentes self-hosted (subset latin, woff2) — sin dependencias externas */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-800.woff2) format('woff2')}

:root{
  /* Marca (tokens reales del landing oficial) */
  --coral:#FB5374; --coral-hover:#E64869; --coral-300:#FD98AC;
  --rose-100:#FFF4F8; --rose-200:#FEDDE3;
  --magenta:#8D2D6A; --purple:#321C3A; --navy:#0A1B3B;
  /* Neutros propios del relanzamiento */
  /* ALINEACION BNKA OS 2.0 v1.0 (06/09/2026): ink, marfil y noche canonicos.
     La noche sigue la temperatura del ink (fria); el marfil es #FAF6F1. */
  --ink:#0E0F13; --muted:#5A5F66; --line:#E8E2D9;
  --ivory:#FAF6F1; --white:#FFFFFF;
  --night:#0E0F13; --night-2:#141416; --night-3:#1C1D21;
  /* Coral que ES texto: #FB5374 da 3,19:1 y no vale para letra normal. */
  --coral-text:#CE3355;  /* 4,97 blanco · 4,62 marfil · 4,62 rose-100 */
  --coral-dark:#A81C3D;  /* texto coral sobre rellenos rosa (rose-200: 5,75) */
  --snow:#F7F3EC; --snow-70:rgba(247,243,236,.72); --snow-50:rgba(247,243,236,.55);
  /* Sombras reales */
  --shadow-card:0 20px 50px rgba(25,28,31,.15);
  --shadow-soft:0 30px 80px rgba(141,45,106,.12);
  --shadow-coral:0 18px 40px -24px rgba(251,83,116,.65);
  --radius:14px; --radius-lg:22px; --radius-xl:30px;
  --font-display:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--night); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; cursor:pointer}
h1,h2,h3{font-family:var(--font-display); line-height:1.12; margin:0; letter-spacing:-.015em; text-wrap:balance}
p{margin:0}
.tnum{font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;top:-60px;left:16px;z-index:100;background:var(--coral-text);color:#fff;padding:10px 18px;border-radius:10px;transition:top .2s;font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
[id]{scroll-margin-top:92px}
.wrap-narrow{max-width:820px}

/* ── Tipos comunes ─────────────────────────────────────────── */
.eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.24em;
  font-size:.75rem; font-weight:700; color:var(--coral-text); margin:0 0 18px;
  font-family:var(--font-body);
}
.eyebrow-hero{color:var(--coral-300)}
.h2{font-size:clamp(1.9rem,4.2vw,3rem); font-weight:800; color:inherit}
.h3{font-size:clamp(1.15rem,2vw,1.4rem); font-weight:700; margin-bottom:10px}
.lede{max-width:640px; margin-top:18px; font-size:clamp(1rem,1.4vw,1.125rem); color:var(--muted)}
.coral{color:var(--coral); font-style:normal}
.coral-soft{color:var(--coral-300); font-style:normal}
.grad-text{
  background:linear-gradient(100deg,var(--coral) 10%,var(--coral-300) 55%,#FFD1DB 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── Botones ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:999px; padding:14px 30px; font-weight:600;
  font-size:1rem; text-decoration:none; font-family:var(--font-body);
  /* Sin saltos de línea: partido en dos, el texto se descentra dentro del pill */
  white-space:nowrap; text-align:center; line-height:1.2;
  transition:background .2s,box-shadow .25s,transform .25s var(--ease),border-color .2s,color .2s;
  will-change:transform;
}
.btn:focus-visible{outline:3px solid var(--coral-text); outline-offset:3px}
.btn-primary{
  /* Rampa CTA canonica OS 2.0: la misma del web app y la app movil */
  background:linear-gradient(135deg,#FF6B88 0%, var(--coral) 45%, #E93A5F 100%);
  color:#fff;
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.45),
             inset 0 -4px 8px rgba(150,20,50,.28),
             0 12px 26px -10px rgba(251,83,116,.6);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#FF8CA3 0%, #FC5F7E 45%, #F04E72 100%);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.5),
             inset 0 -4px 8px rgba(150,20,50,.28),
             0 18px 34px -12px rgba(251,83,116,.7);
  transform:translateY(-2px);
}
.btn-primary:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 6px rgba(120,12,38,.4), 0 6px 14px -8px rgba(251,83,116,.5);
}
.btn-ghost{background:rgba(247,243,236,.04); color:var(--snow); border:1px solid rgba(247,243,236,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btn-ghost:hover{border-color:var(--coral-300); color:#fff; transform:translateY(-2px); background:rgba(251,83,116,.1)}
.btn-ghost:active{transform:translateY(1px)}
.btn-soft{
  background:linear-gradient(180deg,#fff 0%, var(--rose-100) 100%);
  color:var(--coral-text); border:1px solid var(--rose-200);
  box-shadow:inset 0 1.5px 1px #fff, 0 8px 18px -8px rgba(251,83,116,.35);
}
/* El hover llena de rose-200, y --coral-text encima cae a 4,43 en el centro
   del boton y a 3,94 en el borde inferior: por debajo de AA. Se pasa a
   --coral-dark, que es el token que existe justo para texto coral sobre
   relleno rosa (6,45 sobre el centro de este gradiente). Medido, no estimado. */
.btn-soft:hover{color:var(--coral-dark); background:linear-gradient(180deg,#fff 0%, var(--rose-200) 100%); transform:translateY(-2px); box-shadow:inset 0 1.5px 1px #fff, 0 14px 26px -10px rgba(251,83,116,.45)}
.btn-soft:active{transform:translateY(1px); box-shadow:inset 0 2px 5px rgba(251,83,116,.25)}
.btn-dark{
  background:linear-gradient(180deg,#31353C 0%, var(--ink) 52%, #0C0D10 100%);
  color:#fff;
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.16),
             inset 0 -4px 8px rgba(0,0,0,.5),
             0 12px 24px -10px rgba(25,28,31,.65);
}
.btn-dark:hover{transform:translateY(-2px); box-shadow:inset 0 1.5px 1px rgba(255,255,255,.2), inset 0 -4px 8px rgba(0,0,0,.5), 0 18px 32px -12px rgba(25,28,31,.75)}
.btn-dark:active{transform:translateY(1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.55)}
.btn-lg{padding:16px 32px; font-size:1.06rem}
.btn-sm{padding:9px 18px; font-size:.9rem}
.btn-block{width:100%}

/* ── Nav ───────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .3s,box-shadow .3s,backdrop-filter .3s;
}
.nav.scrolled{
  background:rgba(15,16,19,.78);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(247,243,236,.08);
}
.nav-inner{
  max-width:var(--wrap); margin-inline:auto; padding:14px 24px;
  display:flex; align-items:center; gap:18px;
}
.nav-logo img{width:88px; height:auto}
.nav-links{display:none; gap:18px; margin-inline:auto; min-width:0; flex-wrap:wrap; justify-content:center}
.nav-links a{
  color:var(--snow-70); text-decoration:none; font-size:.9rem; font-weight:500;
  transition:color .2s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:#fff}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:10px; flex:none}
.nav-lang{
  color:var(--snow-70); text-decoration:none; font-size:.82rem; font-weight:700;
  letter-spacing:.08em; padding:6px 10px; border:1px solid rgba(247,243,236,.25);
  border-radius:999px; transition:color .2s, border-color .2s;
}
.nav-lang:hover,.nav-lang:focus-visible{color:#fff; border-color:var(--coral-300)}
@media(min-width:900px){
  .nav-links{display:flex}
  .nav-cta{margin-left:0}
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden; color:var(--snow);
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(141,45,106,.35), transparent 65%),
    radial-gradient(900px 480px at -10% 110%, rgba(251,83,116,.16), transparent 60%),
    linear-gradient(175deg,#17141c 0%, var(--night) 55%, #121016 100%);
  padding:120px 0 72px;
}
.hero-glow{
  position:absolute; left:50%; bottom:-320px; width:1400px; height:560px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(251,83,116,.28), rgba(251,83,116,.07) 55%, transparent 75%);
  filter:blur(8px); pointer-events:none;
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.44; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 52%, transparent 97%);
  mask-image:linear-gradient(180deg,#000 52%, transparent 97%);
}
@media(max-width:900px){
  .hero-bg{opacity:.28; object-position:50% 12%}
}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.9}
.hero-inner{
  position:relative; max-width:var(--wrap); margin-inline:auto; padding-inline:24px;
  display:grid; gap:56px; align-items:center;
}
.hero-title{font-size:clamp(2.3rem,6vw,4.05rem); font-weight:800; letter-spacing:-.02em}
.hero-sub{margin-top:22px; max-width:520px; font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--snow-70)}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.hero-micro{margin-top:18px; font-size:.85rem; color:var(--snow-50)}
.hero-route{
  display:inline-flex; align-items:center; gap:14px; margin-top:34px;
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--snow-50);
}
.route-city{white-space:nowrap; font-weight:600}
#route-dest{
  display:inline-block; min-width:12ch;
  transition:opacity .28s ease, transform .28s ease;
}
#route-dest.route-out{opacity:0; transform:translateY(6px)}
.route-line{
  position:relative; width:120px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,rgba(251,83,116,.25),rgba(251,83,116,.7),rgba(251,83,116,.25));
  overflow:hidden;
}
.route-pulse{
  position:absolute; top:-2px; left:-12px; width:12px; height:6px; border-radius:6px;
  background:var(--coral-300); box-shadow:0 0 12px 2px rgba(251,83,116,.8);
  animation:routego 2.6s linear infinite;
}
@keyframes routego{to{transform:translateX(148px)}}

/* Escena */
.hero-scene{position:relative; perspective:1200px; min-width:0}
.scene-phone{
  position:absolute; z-index:1; width:300px; left:-14px; top:-6px;
  transform:rotate(-7deg); display:none;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.55));
  animation:floaty 7s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 76%,transparent 99%);
}
.scene-phone{width:280px}
.scene-phone img{
  border-radius:40px; border:9px solid #1d1e24; background:#0d0d0f;
  box-shadow:0 0 0 1px rgba(247,243,236,.16);
}
.scene-chip{
  /* Hija de .hero-scene (no del teléfono): la mask del fade del teléfono
     recortaba lo que sobresalía de su caja. Solo se muestra con el teléfono. */
  position:absolute; top:188px; left:-96px; z-index:2;
  display:none; align-items:center; gap:10px;
  background:rgba(255,255,255,.94); color:var(--ink);
  padding:10px 16px; border-radius:14px; box-shadow:var(--shadow-card);
  font-size:.82rem; line-height:1.25; white-space:nowrap;
  animation:floaty 5.5s ease-in-out infinite reverse;
}
.scene-chip strong{display:block; font-weight:700}
.scene-chip em{font-style:normal; color:#0B8A4B; font-weight:600}
.chip-ok{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:#0B8A4B; color:#fff; font-size:.8rem; font-weight:700;
}
/* .coin3d queda para las piezas de escena (bandera del QR, moneda de cobros);
   las monedas flotantes del hero se retiraron a peticion de Roger (29/08). */
.coin3d{
  position:absolute; z-index:5;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(251,83,116,.28));
  animation:floaty 6s ease-in-out infinite;
}
.coin3d img{width:100%; height:auto}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg))}
  50%{transform:translateY(-14px) rotate(var(--r,0deg))}
}
.scene-phone{--r:-7deg}

/* Simulador */
.sim-card{
  position:relative; z-index:3; margin-left:auto; width:min(440px,100%);
  background:rgba(24,25,31,.78);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  border:1px solid rgba(247,243,236,.1); border-radius:var(--radius-lg);
  padding:26px 26px 22px; box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  scroll-margin-top:110px;
  transition:box-shadow .4s;
}
.sim-card.pulse{box-shadow:0 0 0 3px rgba(251,83,116,.55), 0 40px 90px -30px rgba(0,0,0,.7)}
.sim-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.sim-title{font-size:1.12rem; font-weight:700; color:#fff}
.sim-live{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--coral-300); border:1px solid rgba(251,83,116,.45); border-radius:999px;
  padding:4px 10px;
}
.sim-countries::-webkit-scrollbar{display:none}
.sim-countries{display:flex; gap:8px; margin-bottom:18px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity}
.sim-pill{
  flex:1 0 auto; scroll-snap-align:start; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; border-radius:999px; border:1px solid rgba(247,243,236,.18);
  background:transparent; color:var(--snow-70); font-size:.85rem; font-weight:600;
  transition:all .2s; padding:0 8px;
}
.sim-pill img{border-radius:50%}
.sim-pill:disabled{opacity:.32; cursor:default; pointer-events:none}
/* Fila superior del campo: etiqueta + selector de moneda de origen */
.sim-row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.sim-origins{display:flex; gap:4px; padding:3px; border-radius:999px; background:rgba(247,243,236,.07)}
.sim-origin-pill{
  border:0; background:transparent; color:var(--snow-50);
  padding:5px 10px; border-radius:999px; font-size:.74rem; font-weight:700;
  letter-spacing:.04em; transition:background .2s,color .2s;
}
.sim-origin-pill:hover{color:#fff}
.sim-origin-pill[aria-pressed="true"]{background:var(--coral-text); color:#fff}
.sim-origin-pill:focus-visible{outline:2px solid var(--coral-300); outline-offset:2px}
.sim-pill:hover{border-color:var(--coral-300); color:#fff}
.sim-pill[aria-pressed="true"]{background:var(--coral-text); border-color:var(--coral-text); color:#fff; box-shadow:var(--shadow-coral)}
.sim-pill:focus-visible{outline:2px solid var(--coral-300); outline-offset:2px}
.sim-field{display:block}
.sim-label{display:block; font-size:.78rem; letter-spacing:.04em; color:var(--snow-50); margin-bottom:7px}
.sim-label strong{color:var(--snow-70)}
.sim-input-wrap{
  display:flex; align-items:center; gap:10px;
  background:rgba(247,243,236,.06); border:1px solid rgba(247,243,236,.12);
  border-radius:14px; padding:12px 16px;
  transition:border-color .2s, box-shadow .2s;
}
.sim-field:focus-within .sim-input-wrap{border-color:var(--coral); box-shadow:0 0 0 3px rgba(251,83,116,.22)}
.sim-coin{flex:none}
/* Iconos oficiales de moneda y bandera: son cuadrados y las franjas sobresalen
   del disco, así que se recortan a círculo. La sombra va en box-shadow porque
   el filtro drop-shadow se recorta junto con la imagen. */
/* Volumen 3D sobre los iconos oficiales: el SVG plano va dentro de una
   esfera con luz alta, oclusión inferior y sombra proyectada. Así conservan
   los colores correctos de cada bandera y quedan nítidos a cualquier tamaño. */
.i3d{
  position:relative; display:inline-block; flex:none; line-height:0;
  border-radius:50%; isolation:isolate;
  box-shadow:0 6px 12px -4px rgba(0,0,0,.5), 0 2px 4px -1px rgba(0,0,0,.35);
}
.i3d img{border-radius:50%; display:block}
.i3d::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(118% 96% at 30% 16%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.16) 30%, rgba(255,255,255,0) 54%),
    radial-gradient(96% 92% at 50% 116%, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 62%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24), inset 0 -3px 7px rgba(0,0,0,.3);
}
.sim-coin,.sim-pill img,.avail-badge img,.life-coins img,
.coin-stack img,.journey-flags img,.corridor-head img,.step-coin img{
  border-radius:50%;
}
.sim-coin{box-shadow:none}
#sim-amount{
  flex:1; width:100%; min-width:0; background:transparent; border:0; outline:0;
  color:#fff; font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums;
  font-family:var(--font-body);
}
#sim-result{
  flex:1; color:#fff; font-size:1.5rem; font-weight:700;
  font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sim-result .sim-input-wrap{background:rgba(251,83,116,.1); border-color:rgba(251,83,116,.35)}
.sim-ccy{font-size:.8rem; font-weight:700; color:var(--snow-50); letter-spacing:.06em}
/* Pantallas muy estrechas (≤360px): la tarjeta aprieta sus paddings en vez
   de empujar el layout fuera del viewport. */
@media(max-width:380px){
  /* La ruta del hero es inline-flex sin saltos: su ancho mínimo arrastraba
     toda la columna del grid y con ella la tarjeta. */
  .hero-route{gap:9px; font-size:.72rem}
  .route-line{width:56px}
  #route-dest{min-width:0}
  .sim-card{padding:20px 16px 18px}
  .sim-input-wrap{padding:12px 12px}
  #sim-amount,#sim-result{font-size:1.28rem}
  .sim-pill{padding:0 12px; font-size:.86rem}
}

/* Botón de intercambio origen ↔ destino */
.sim-arrow{
  display:flex; justify-content:center; margin:10px 0; width:100%;
  background:transparent; border:0; padding:0;
}
.sim-arrow:hover span{transform:rotate(180deg); background:var(--coral-hover)}
.sim-arrow:active span{transform:rotate(180deg) scale(.94)}
.sim-arrow:focus-visible{outline:0}
.sim-arrow:focus-visible span{outline:2px solid var(--coral-300); outline-offset:3px}
.sim-arrow span{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--coral); color:#fff; font-weight:700;
  transition:transform .35s var(--ease), background .2s;
  box-shadow:var(--shadow-coral);
}
.sim-meta{display:grid; gap:7px; margin:18px 0}
.sim-meta div{display:flex; justify-content:space-between; gap:16px; font-size:.83rem}
.sim-meta dt{color:var(--snow-50)}
.sim-meta dd{margin:0; color:var(--snow-70); font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.sim-fine{margin-top:12px; font-size:.7rem; line-height:1.5; color:rgba(247,243,236,.42)}

@media(min-width:1024px){
  .hero{padding:150px 0 110px}
  .hero-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px}
  .scene-phone{display:block}
  .scene-chip{display:flex}
  .sim-card{margin-right:8px}
}
@media(min-width:1240px){
  .scene-phone{width:300px; left:-30px}
}

/* ── Métricas ──────────────────────────────────────────────── */
.stats{
  background:linear-gradient(180deg,#121016, #17131a);
  border-top:1px solid rgba(247,243,236,.06);
  padding:44px 0;
}
.stats-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px 20px}
.stat{display:grid; gap:6px; justify-items:start}
.stat-num{
  font-family:var(--font-display); font-weight:800; color:var(--coral);
  font-size:clamp(1.9rem,3.6vw,2.7rem); letter-spacing:-.02em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat-label{color:var(--snow-50); font-size:.88rem; max-width:200px}
@media(min-width:900px){.stats-grid{grid-template-columns:repeat(4,1fr)}}

/* ── Secciones ─────────────────────────────────────────────── */
.section{padding:96px 0; position:relative}
.section-ivory{background:var(--ivory)}
.section-white{background:var(--white)}
.section-head{position:relative; margin-bottom:56px}
.section-head::before{
  content:""; position:absolute; top:-96px; left:3px; width:2px; height:64px;
  background:linear-gradient(180deg,transparent,var(--coral));
  opacity:.55;
}
.section-dark .section-head::before,
.section-white .section-head::before,
.section-ivory .section-head::before{content:""}

/* ── 3 · Una vida, dos países ──────────────────────────────── */
.twolife-scene{
  margin:0 0 30px; border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-soft);
  background:#EFE8DD;
}
.twolife-scene img{width:100%; display:block}
.twolife{
  display:grid; gap:0; align-items:stretch;
  grid-template-columns:1fr;
}
.life-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px; box-shadow:var(--shadow-soft);
}
.section-white .life-card{background:var(--ivory)}
.life-tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--magenta); margin-bottom:14px;
}
.life-card p{color:var(--muted)}
.life-coins{display:flex; align-items:center; gap:10px; margin-top:24px}
.life-coins .i3d{box-shadow:0 8px 16px -4px rgba(25,28,31,.4), 0 2px 4px -1px rgba(25,28,31,.3)}
.life-amount{font-weight:700; font-size:1.3rem; color:var(--ink)}
.life-thread{
  display:flex; align-items:center; justify-content:center; position:relative;
  min-height:84px;
}
.life-thread svg{position:absolute; inset:0; width:100%; height:100%}
.thread-path{animation:threadflow 1.4s linear infinite}
@keyframes threadflow{to{stroke-dashoffset:-14}}
.thread-coin{
  position:relative; display:grid; place-items:center; width:44px; height:44px;
  border-radius:50%; background:var(--coral); color:#fff; font-weight:700;
  box-shadow:var(--shadow-coral); font-size:1.1rem;
}
@media(min-width:900px){
  .twolife{grid-template-columns:1fr 130px 1fr}
  .life-thread{min-height:0}
  .life-thread svg{transform:rotate(90deg) scale(1.6)}
}

/* ── Escena dos ciudades: monumentos + conexión animada ───── */
.twolife-scene{position:relative}
.scene-link{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
#scene-link-path{animation:threadflow 1.1s linear infinite}
.scene-link-dot{filter:drop-shadow(0 0 8px rgba(251,83,116,.9))}
.twolife-scene{aspect-ratio:1000/420}
.twolife-scene img.landmark{
  position:absolute; height:auto;
  filter:drop-shadow(0 18px 28px rgba(25,28,31,.28));
  animation:floaty 7s ease-in-out infinite;
}
.twolife-scene img.landmark-eiffel{width:19%; left:5%; top:12%; animation-delay:-1.2s}
.twolife-scene img.landmark-machu{width:26%; left:27.5%; top:6%; animation-delay:-3.4s}
.twolife-scene img.landmark-obelisco{width:15%; left:55%; top:22%; animation-delay:-5.1s}
.twolife-scene img.landmark-cartagena{width:21%; left:73%; top:18%; animation-delay:-6.3s}

/* ── 6c · Cobros (solicitud de pago) ───────────────────────── */
.cobra-visual{position:relative; display:flex; justify-content:center}
.payreq-card{
  position:relative; width:min(360px,100%); background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px; box-shadow:var(--shadow-soft);
  transform:rotate(-2deg); transition:transform .45s var(--ease);
  display:grid; gap:8px; justify-items:start;
}
.cobra-visual:hover .payreq-card{transform:rotate(0deg) translateY(-6px)}
.payreq-head{display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:8px}
.payreq-tag{
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral-dark); background:var(--rose-100); border:1px solid var(--rose-200);
  border-radius:999px; padding:4px 10px;
}
.payreq-label{font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.payreq-amount{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--ink); line-height:1.1; margin-bottom:6px}
.payreq-ccys{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.payreq-ccys span{
  font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px; background:var(--ivory);
}
.payreq-paid{align-self:center}
.cobra-coin{width:74px; height:74px; position:absolute; top:-18px; right:6%; animation-delay:-2.6s}
@media(max-width:899px){.cobra-visual{order:2; margin-top:8px}}

/* ── 4 · Bento producto ────────────────────────────────────── */
.bento{display:grid; gap:20px; grid-template-columns:1fr}
.bento-card{
  position:relative; overflow:hidden;
  background:linear-gradient(145deg,#fff, var(--rose-100));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px; box-shadow:0 1px 3px rgba(25,28,31,.06);
  transition:transform .35s var(--ease), box-shadow .35s;
}
.bento-card p{color:var(--muted); font-size:.96rem}
.bento-num{
  display:inline-block; font-family:var(--font-display); font-weight:800;
  color:var(--coral-300); font-size:.95rem; margin-bottom:14px;
}
.bento-wide{
  display:grid; gap:26px; align-items:center;
  background:linear-gradient(120deg,#fff 30%, var(--rose-100) 75%, var(--rose-200));
}
.coin-stack{display:flex; justify-content:center; padding:10px 0}
.coin-stack .i3d{
  margin-left:-14px;
  box-shadow:0 14px 22px -8px rgba(25,28,31,.45), 0 3px 6px -2px rgba(25,28,31,.3);
  transform:translateY(calc(var(--i) * -4px)) rotate(calc(var(--i) * 4deg));
  transition:transform .35s var(--ease);
}
.coin-stack .i3d:first-child{margin-left:0}
.bento-card:hover .coin-stack .i3d{transform:translateY(calc(var(--i) * -10px)) rotate(calc(var(--i) * 7deg))}
.bento-card-dark{
  background:linear-gradient(175deg,#a4374c,#1c0d14 62%);
  border-color:transparent; color:#fff;
  display:grid; gap:26px; align-items:center;
}
.bento-card-dark p{color:rgba(255,255,255,.75)}
.bento-card-dark .bento-num{color:var(--coral-300)}
.card-render{margin:0; display:flex; justify-content:center}
/* Tarjeta reconstruida en vector: nítida en cualquier densidad de pantalla
   (el recorte de la captura oficial se pixelaba en móviles retina). */
.bnka-card{
  position:relative; width:min(360px,100%); aspect-ratio:1.586;
  border-radius:calc(min(360px,100%) * .055);
  background:linear-gradient(112deg,#EC5878 0%,#F3728F 46%,#FB8DA6 100%);
  box-shadow:0 26px 40px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
  overflow:hidden; isolation:isolate;
  transform:rotate(-2deg); transition:transform .4s var(--ease);
}
.bento-card-dark:hover .bnka-card{transform:rotate(0deg) translateY(-6px) scale(1.02)}
/* Brillo diagonal del plástico */
.bnka-card-shine{
  position:absolute; inset:0;
  background:linear-gradient(104deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.16) 46%,rgba(255,255,255,0) 62%);
}
.bnka-card-logo{
  position:absolute; left:7%; top:11%; width:26%; height:auto;
  filter:brightness(0) invert(1); opacity:.96;
}
/* Bandera de Perú: franja vertical roja-blanca-roja */
.bnka-card-flag{
  position:absolute; right:7%; top:10%; width:5.2%; aspect-ratio:.62;
  border-radius:2px; overflow:hidden;
  background:linear-gradient(90deg,#F0263C 0 33.33%,#fff 33.33% 66.66%,#F0263C 66.66% 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.bnka-card-chip{position:absolute; left:7.5%; top:41%; width:13%}
.bnka-card-chip svg{width:100%; height:auto; display:block}
.bnka-card-nfc{position:absolute; left:23.5%; top:43%; width:6%}
.bnka-card-nfc svg{width:100%; height:auto; display:block}
/* Marca del esquema: dos discos con solape, como en la tarjeta real */
.bnka-card-scheme{position:absolute; right:7%; bottom:9%; display:flex}
.bnka-card-scheme i{
  display:block; width:34px; height:34px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
}
.bnka-card-scheme i:first-child{background:#E8404A}
.bnka-card-scheme i:last-child{background:#F3B04F; margin-left:-13px; mix-blend-mode:multiply}
@media(max-width:520px){
  .bnka-card-scheme i{width:28px; height:28px; margin-left:0}
  .bnka-card-scheme i:last-child{margin-left:-11px}
}
@media(min-width:760px){
  .bento{grid-template-columns:repeat(3,1fr)}
  .bento-wide{grid-column:span 3; grid-template-columns:1.3fr 1fr}
  .bento-card-dark{grid-column:1/-1; grid-template-columns:1fr 1fr}
}
@media(min-width:1024px){
  .bento-wide{grid-column:span 2; grid-template-columns:1.2fr 1fr}
}

/* Tilt genérico (JS pone --rx/--ry) */
.hoverable{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
.hoverable:hover{box-shadow:var(--shadow-card)}

/* ── 5 · Intención ─────────────────────────────────────────── */
.intent{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-soft); overflow:hidden;
}
.intent-tabs{
  display:flex; gap:6px; padding:14px; overflow-x:auto;
  border-bottom:1px solid var(--line); scrollbar-width:none;
}
.intent-tabs::-webkit-scrollbar{display:none}
.intent-tab{
  flex:none; border:1px solid var(--line); color:var(--muted);
  background:linear-gradient(180deg,#fff, var(--ivory));
  box-shadow:inset 0 1px 0 #fff, 0 3px 8px -4px rgba(25,28,31,.18);
  padding:10px 18px; border-radius:999px; font-weight:600; font-size:.92rem;
  transition:all .2s; white-space:nowrap;
}
.intent-tab:hover{color:var(--ink); transform:translateY(-1px); box-shadow:inset 0 1px 0 #fff, 0 6px 12px -5px rgba(25,28,31,.25)}
.intent-tab[aria-selected="true"]{
  background:var(--coral-text);
  color:#fff; border-color:transparent;
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.45), inset 0 -3px 6px rgba(150,20,50,.28), 0 10px 20px -8px rgba(251,83,116,.55);
}
.intent-tab:focus-visible{outline:2px solid var(--coral); outline-offset:2px}
.intent-panel{padding:36px; animation:panelin .45s var(--ease)}
.intent-panel:focus-visible{outline:2px solid var(--coral-300); outline-offset:-2px}
@keyframes panelin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.checklist{list-style:none; margin:20px 0 26px; padding:0; display:grid; gap:12px; max-width:560px}
.checklist li{position:relative; padding-left:32px; color:var(--muted)}
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:1px;
  display:grid; place-items:center; width:21px; height:21px; border-radius:50%;
  background:var(--rose-200); color:var(--coral-dark); font-size:.72rem; font-weight:800;
}
@media(min-width:760px){.intent-panel{padding:44px 48px}}

/* ── 6 · Corredores ────────────────────────────────────────── */
.corridors{display:grid; gap:20px; grid-template-columns:1fr}
.corridor{
  position:relative; border-radius:var(--radius-lg); padding:30px;
  background:linear-gradient(160deg,var(--ivory), #fff 55%);
  border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .35s, border-color .3s;
}
.corridor:hover{border-color:var(--coral-300)}
.corridor-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.corridor-head .i3d{box-shadow:0 10px 16px -5px rgba(25,28,31,.42), 0 3px 5px -2px rgba(25,28,31,.3)}
.corridor-route{
  font-family:var(--font-display); font-weight:800; color:var(--coral-text);
  font-size:1.15rem; letter-spacing:.02em;
}
.corridor-city{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.corridor-note{color:var(--muted); font-size:.95rem; margin-bottom:22px}
@media(min-width:900px){.corridors{grid-template-columns:repeat(3,1fr)}}

/* ── Disponibilidad (badges) ───────────────────────────────── */
.avail-badge{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  padding:6px 14px; border-radius:999px; font-size:.8rem; font-weight:700;
  background:rgba(251,83,116,.14); color:var(--coral-300);
  border:1px solid rgba(251,83,116,.35); width:fit-content;
}
.avail-badge img{border-radius:50%}
.avail-badge-lg{
  background:var(--rose-100); color:var(--coral-text);
  border-color:var(--rose-200); font-size:.88rem; padding:8px 16px; margin-top:6px;
}
.avail-note{margin-top:10px; font-size:.83rem; color:var(--muted)}
.btn-ico{flex:none}

/* ── 6b · Viaja y paga con QR ──────────────────────────────── */
.section-qr{background:linear-gradient(160deg,var(--rose-100), #fff 72%)}
.qr-grid{display:grid; gap:56px; align-items:center}
.qr-visual{position:relative; display:flex; justify-content:center}
.qr-phone{
  position:relative; width:min(300px,100%); background:#fff;
  border:10px solid #17181c; border-radius:40px; padding:34px 26px 26px;
  box-shadow:0 40px 80px -24px rgba(25,28,31,.35);
  transform:rotate(3deg); transition:transform .45s var(--ease);
  display:grid; justify-items:center; gap:14px;
}
.qr-visual:hover .qr-phone{transform:rotate(0deg) translateY(-6px)}
.qr-notch{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:84px; height:22px; border-radius:12px; background:#17181c;
}
.qr-title{font-family:var(--font-display); font-weight:700; font-size:1.02rem; margin-top:10px}
.qr-frame{position:relative; padding:14px}
.qr-frame canvas{display:block; border-radius:8px}
.qr-corner{position:absolute; width:26px; height:26px; border:3px solid var(--coral); border-radius:2px}
.qr-tl{top:0; left:0; border-right:0; border-bottom:0; border-top-left-radius:10px}
.qr-tr{top:0; right:0; border-left:0; border-bottom:0; border-top-right-radius:10px}
.qr-bl{bottom:0; left:0; border-right:0; border-top:0; border-bottom-left-radius:10px}
.qr-br{bottom:0; right:0; border-left:0; border-top:0; border-bottom-right-radius:10px}
.qr-scanline{
  position:absolute; left:12px; right:12px; top:16px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--coral),transparent);
  box-shadow:0 0 14px 2px rgba(251,83,116,.55);
  animation:qrscan 2.6s ease-in-out infinite alternate;
}
@keyframes qrscan{to{transform:translateY(160px)}}
.qr-hint{font-size:.8rem; color:var(--muted)}
.qr-paid{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:#fff; font-size:.82rem; font-weight:600;
  padding:8px 16px; border-radius:999px; box-shadow:var(--shadow-card);
}
.qr-flag{position:absolute; top:-8px; right:8%; width:56px; height:56px; animation-delay:-2s}
.qr-scene3d{
  position:relative; margin:0; width:min(440px,100%);
  animation:floaty 7s ease-in-out infinite;
}
.qr-scene3d img{filter:drop-shadow(0 26px 44px rgba(25,28,31,.28))}
.qr-scene3d .qr-paid{position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); white-space:nowrap}
@media(min-width:900px){
  .qr-grid{grid-template-columns:1.1fr 1fr}
}

/* ── 7 · Viaje ─────────────────────────────────────────────── */
.journey{position:relative}
.journey-svg{width:100%; height:auto; display:none; margin-bottom:-40px}
#journey-path{stroke-dasharray:1300; stroke-dashoffset:1300; transition:stroke-dashoffset 1.8s var(--ease)}
.journey.drawn #journey-path{stroke-dashoffset:0}
#journey-dot{filter:drop-shadow(0 0 8px rgba(251,83,116,.9)); opacity:0}
.journey.drawn #journey-dot{opacity:1}
.journey-steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:20px; counter-reset:step;
}
.journey-step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; text-align:left;
}
.journey-step img{border-radius:50%}
.journey-step h3{font-size:1.05rem; margin:16px 0 8px}
.journey-step p{color:var(--muted); font-size:.92rem}
/* Mismo lenguaje de esfera que los iconos de moneda */
.journey-icon{
  position:relative; display:grid; place-items:center; width:44px; height:44px;
  border-radius:50%; color:#fff; font-size:1.2rem; font-weight:700;
  background:linear-gradient(135deg,#FF6B88 0%, var(--coral) 45%, #E93A5F 100%);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.5),
             inset 0 -3px 7px rgba(150,20,50,.35),
             0 8px 16px -5px rgba(251,83,116,.6);
}
.journey-icon::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(118% 96% at 30% 16%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 52%);
}
.journey-flags{display:flex}
.journey-flags .i3d{margin-left:-10px; box-shadow:0 7px 12px -4px rgba(25,28,31,.45), 0 2px 4px -1px rgba(25,28,31,.3)}
.journey-flags .i3d::before{
  content:""; position:absolute; inset:-2px; border-radius:50%; background:var(--white); z-index:-1;
}
.journey-flags .i3d:first-child{margin-left:0}
@media(min-width:900px){
  .journey-svg{display:block}
  .journey-steps{grid-template-columns:repeat(3,1fr)}
  .journey-step{text-align:center}
  .journey-step img,.journey-icon,.journey-flags{margin-inline:auto; justify-content:center}
}

/* ── 8 · Historias ─────────────────────────────────────────── */
.stories{display:grid; gap:20px; grid-template-columns:1fr}
.story{
  margin:0; padding:32px; border-radius:var(--radius-lg);
  background:linear-gradient(160deg,#fff, var(--rose-100) 90%);
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap:24px; justify-content:space-between;
  transition:transform .35s var(--ease), box-shadow .35s;
}
.story blockquote{
  margin:0; font-size:1.02rem; line-height:1.65; color:var(--ink); font-weight:500;
}
.story figcaption{display:flex; align-items:center; gap:14px}
.story-avatar{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(145deg,var(--coral),var(--magenta)); color:#fff;
  font-weight:700; font-size:.85rem; letter-spacing:.04em;
}
.story figcaption strong{display:block; font-size:.95rem}
.story figcaption em{font-style:normal; color:var(--muted); font-size:.83rem}
@media(min-width:900px){.stories{grid-template-columns:repeat(2,1fr)}}

/* ── 9 · Pasos ─────────────────────────────────────────────── */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:20px; grid-template-columns:1fr}
.step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px; transition:transform .35s var(--ease), box-shadow .35s;
}
.step-num{
  display:inline-grid; place-items:center; width:52px; height:52px; border-radius:16px;
  background:var(--rose-100); color:var(--coral-text); font-family:var(--font-display);
  font-weight:800; font-size:1.1rem; margin-bottom:20px;
  border:1px solid var(--rose-200);
}
.step p{color:var(--muted); font-size:.95rem}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}

/* ── 10 · Seguridad (oscura) ───────────────────────────────── */
.section-dark{
  background:linear-gradient(175deg,#a4374c -20%, #321C3A 45%, #14080f 100%);
  color:var(--snow);
}
.section-dark .lede{color:var(--snow-70)}
.security-grid{display:grid; gap:20px; grid-template-columns:1fr}
.sec-card{
  background:rgba(247,243,236,.06); border:1px solid rgba(247,243,236,.12);
  border-radius:var(--radius-lg); padding:30px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.sec-card p{color:var(--snow-70); font-size:.95rem}
.sec-icon{
  display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:rgba(251,83,116,.18); font-size:1.25rem; margin-bottom:18px;
}
.sec-legal{
  margin-top:40px; max-width:840px; font-size:.8rem; line-height:1.7;
  color:rgba(247,243,236,.5);
  border-left:2px solid rgba(251,83,116,.5); padding-left:18px;
}
@media(min-width:900px){.security-grid{grid-template-columns:repeat(3,1fr)}}

/* ── 11 · Phones ───────────────────────────────────────────── */
.phones{
  display:grid; gap:28px; grid-auto-flow:column; grid-auto-columns:78%;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 4px 26px;
  scrollbar-width:none;
}
.phones::-webkit-scrollbar{display:none}
.phone{
  margin:0; scroll-snap-align:center; text-align:center;
}
.phone img{
  margin-inline:auto; width:min(300px,100%);
  border-radius:40px; border:9px solid #1d1e24; background:#0d0d0f;
  box-shadow:0 0 0 1px rgba(25,28,31,.2);
  filter:drop-shadow(0 30px 50px rgba(25,28,31,.28));
  transform:rotate(var(--rot,0deg));
  transition:transform .45s var(--ease);
}
.phone:hover img{transform:rotate(0deg) translateY(-8px)}
.phone figcaption{margin-top:18px; font-weight:600; color:var(--muted); font-size:.92rem}
.phone-center img{width:min(330px,100%)}
.store-ctas{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:26px}
@media(min-width:900px){
  .phones{grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible; align-items:end}
  .phone-center{transform:translateY(-24px)}
}

/* ── 12 · Comparador ───────────────────────────────────────── */
.compare-wrap{position:relative; overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-soft)}
.compare{width:100%; min-width:600px; border-collapse:collapse; font-size:.93rem}
.compare th,.compare td{padding:18px 20px; text-align:center; border-bottom:1px solid var(--line)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare thead th{font-family:var(--font-body); font-weight:600; color:var(--muted); font-size:.85rem; padding-block:20px}
.compare thead img{margin-inline:auto}
.compare tbody th{text-align:left; font-weight:600; color:var(--ink); max-width:300px}
.compare-bnka{background:var(--rose-100)}
th.compare-bnka{border-radius:0}
.yes{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--coral); color:#fff; font-weight:800; font-size:.85rem;
  box-shadow:var(--shadow-coral);
}
.no{color:#B9B1A4; font-weight:700}
.mid{color:var(--muted); font-size:.83rem}
.compare-fine{margin-top:14px; font-size:.75rem; color:var(--muted)}

/* ── 13 · FAQ ──────────────────────────────────────────────── */
.faq{display:grid; gap:12px}
.faq-item{
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:border-color .25s, box-shadow .25s;
}
.faq-item[open]{border-color:var(--coral-300); box-shadow:var(--shadow-soft); background:#fff}
.faq-item summary{
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  cursor:pointer; padding:20px 24px; font-weight:600; font-family:var(--font-display);
  font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--coral); outline-offset:-2px; border-radius:var(--radius)}
.faq-plus{position:relative; flex:none; width:22px; height:22px}
.faq-plus::before,.faq-plus::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--coral);
  border-radius:2px; transition:transform .3s var(--ease);
}
.faq-plus::before{width:14px; height:2px}
.faq-plus::after{width:2px; height:14px}
.faq-item[open] .faq-plus::after{transform:rotate(90deg)}
.faq-item p{padding:0 24px 22px; color:var(--muted); max-width:640px}

/* ── 14 · Final ────────────────────────────────────────────── */
.finale{
  position:relative; overflow:hidden; color:var(--snow); padding:110px 0;
  background:
    radial-gradient(1000px 500px at 15% 0%, rgba(141,45,106,.4), transparent 60%),
    linear-gradient(175deg,#1b1016, var(--night) 60%);
}
.finale-glow{
  position:absolute; right:-220px; top:50%; width:820px; height:820px; transform:translateY(-50%);
  background:radial-gradient(closest-side, rgba(251,83,116,.3), transparent 70%);
  pointer-events:none;
}
.finale-inner{position:relative; display:grid; gap:56px; align-items:center}
.finale-title{font-size:clamp(2.1rem,5vw,3.6rem); font-weight:800}
.finale-copy .lede{color:var(--snow-70)}
.finale-phone{text-align:center}
.finale-phone img{
  width:min(320px,80%); margin-inline:auto;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.6));
  animation:floaty 7s ease-in-out infinite;
}
.finale-scan{margin-top:20px; color:var(--snow-50); font-size:.9rem}
@media(min-width:900px){.finale-inner{grid-template-columns:1.2fr 1fr}}

/* ── 6a · Corredores intrarregionales ──────────────────────── */
.section-intra{
  background:linear-gradient(165deg,var(--purple) 0%,#241528 55%,var(--night) 100%);
  color:var(--snow);
}
.section-intra .h2{color:#fff}
.lede-dark{color:var(--snow-70); max-width:720px}
.axes{display:grid; gap:20px; grid-template-columns:1fr; margin-top:44px}
.axis{
  background:rgba(247,243,236,.05); border:1px solid rgba(247,243,236,.14);
  border-radius:var(--radius-lg); padding:28px 26px;
  transition:transform .35s var(--ease), border-color .3s, background .3s;
}
.axis:hover{transform:translateY(-4px); border-color:var(--coral-300); background:rgba(251,83,116,.08)}
.axis-flags{display:flex; margin-bottom:18px}
.axis-flags .i3d::before{
  content:""; position:absolute; inset:-2px; border-radius:50%; background:#2b1a30; z-index:-1;
}
.axis-flags .i3d:last-child{margin-left:-12px}
.axis h3{color:#fff}
.axis-pair{
  font-family:var(--font-body); font-weight:700; font-size:.82rem;
  letter-spacing:.1em; color:var(--coral-300); margin-bottom:12px;
}
.axis p:last-child{color:var(--snow-70); font-size:.95rem}
.intra-note{
  margin-top:34px; padding:26px 28px; border-radius:var(--radius-lg);
  background:rgba(247,243,236,.05); border:1px solid rgba(247,243,236,.12);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.intra-note p{color:var(--snow-70); max-width:620px; font-size:.96rem}
@media(min-width:820px){.axes{grid-template-columns:repeat(3,1fr)}}

/* ── 6b-2 · Turismo ────────────────────────────────────────── */
.trip-grid{
  list-style:none; margin:44px 0 0; padding:0;
  display:grid; gap:18px; grid-template-columns:1fr;
}
.trip-item{
  background:linear-gradient(170deg,#fff,var(--rose-100));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 24px; box-shadow:var(--shadow-soft);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.trip-item:hover{transform:translateY(-4px); box-shadow:0 26px 54px -22px rgba(141,45,106,.32)}
.trip-icon{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:16px;
  border-radius:14px; color:var(--coral);
  background:linear-gradient(180deg,#fff,var(--rose-200));
  box-shadow:inset 0 1px 0 #fff, 0 8px 16px -10px rgba(251,83,116,.6);
}
.trip-icon svg{width:24px; height:24px}
.trip-item h3{font-size:1.02rem; font-weight:700; margin-bottom:8px}
.trip-item p{color:var(--muted); font-size:.94rem}
.trip-foot{
  margin-top:26px; font-size:.92rem; color:var(--muted); max-width:760px;
}
.trip-foot strong{color:var(--ink)}
@media(min-width:640px){.trip-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.trip-grid{grid-template-columns:repeat(4,1fr)}}

/* ── 14b · Firma ───────────────────────────────────────────── */
.signature{
  background:var(--night); color:var(--snow);
  padding:clamp(64px,9vw,110px) 0;
  border-top:1px solid rgba(247,243,236,.08);
}
.signature-inner{text-align:center; max-width:820px}
.signature-eyebrow{
  display:inline-block; margin-bottom:20px; padding:7px 16px; border-radius:999px;
  border:1px solid rgba(251,83,116,.45); background:rgba(251,83,116,.1);
  color:var(--coral-300); font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.signature-line{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.8rem,4.6vw,3rem); line-height:1.1; letter-spacing:-.02em;
}
.signature-line em{font-style:normal}
.signature-sub{
  margin-top:22px; color:var(--snow-70);
  font-size:clamp(1rem,1.4vw,1.1rem); line-height:1.6;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer{background:#0B0C0F; color:var(--snow-70); padding:72px 0 40px}
.footer-top{display:grid; gap:48px; margin-bottom:56px}
.footer-brand p{margin-top:18px; font-size:.92rem; color:var(--snow-50); line-height:1.7}
.footer-cols{display:grid; grid-template-columns:repeat(2,1fr); gap:36px 24px}
.footer-cols h3{
  font-family:var(--font-body); font-size:.75rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--coral-300); margin-bottom:16px; font-weight:700;
}
.footer-cols a{
  display:block; color:var(--snow-70); text-decoration:none; font-size:.92rem;
  padding:5px 0; transition:color .2s;
}
.footer-cols a:hover,.footer-cols a:focus-visible{color:#fff}
.footer-legal{border-top:1px solid rgba(247,243,236,.1); padding-top:28px; display:grid; gap:12px}
.footer-legal p{font-size:.76rem; line-height:1.7; color:rgba(247,243,236,.42); max-width:900px}
.footer-copy{font-weight:600; color:var(--snow-50)!important}
@media(min-width:900px){
  .footer-top{grid-template-columns:1.2fr 2fr}
  .footer-cols{grid-template-columns:repeat(4,1fr)}
}

/* ── CTA persistente móvil ─────────────────────────────────── */
.sticky-cta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(15,16,19,.88);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(247,243,236,.14); border-radius:16px;
  padding:10px 12px 10px 16px;
  transform:translateY(130%); transition:transform .4s var(--ease);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.sticky-cta.show{transform:none}
.sticky-txt{color:var(--snow); font-size:.85rem; font-weight:600; line-height:1.3}
.sticky-cta .btn{white-space:nowrap; flex:none}
@media(min-width:900px){.sticky-cta{display:none}}

/* ── Reveals ───────────────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4){transition-delay:.24s}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .reveal{opacity:1; transform:none}
  .hero-canvas{display:none}
  #journey-path{stroke-dashoffset:0}
  #journey-dot{opacity:0}
  .hoverable{transform:none}
  .scene-link-dot{display:none}
}

/* ── v2 · escenas en video (Higgsfield) ───────────────────── */
.twolife-scene .pano-video{width:100%; height:100%; object-fit:cover; display:block}
video.hero-bg{object-fit:cover}
@media (prefers-reduced-motion: reduce){
  /* el JS pausa los videos; el poster queda como imagen fija */
}

/* ── v2 · QA de anchos (02/09): 320 y 900 sin desbordes ────── */
/* 320: el nav y la barra sticky no cabian; los CTA largos ya se acortaron
   en el HTML (regla de Roger: acortar texto, nunca envolver el pill). */
@media(max-width:380px){
  .nav-inner{padding-inline:14px; gap:16px}
  .nav-cta{gap:8px}
  .nav-cta .btn-sm{padding-inline:14px}
}
.sticky-txt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── ALINEACION BNKA OS 2.0 v1.0 (06/09/2026) ──────────────────────
   Blanco sobre #FB5374 da 3,19:1: solo pasa AA como texto grande, y el
   umbral de texto grande en bold es 14pt = 18,66px. Todo CTA coral lleva
   la etiqueta a >=19px w700, tambien en sm/lg (compuestos: ganan a
   .btn-sm/.btn-lg por especificidad). Los eyebrows sobre seccion oscura
   conservan el coral vivo (6,0:1 sobre la noche); en claro usan
   --coral-text. El resultado del simulador cambia en vivo: cifras
   tabulares para que el importe no baile. */
.btn-primary, .btn-primary.btn-lg{font-size:1.1875rem; font-weight:700}
.btn-primary.btn-sm{font-size:1.1875rem; font-weight:700; padding:10px 22px}
.section-dark .eyebrow{color:var(--coral)}
#sim-result, #sim-rate{font-variant-numeric:tabular-nums}

/* sign-in en el nav (anadido relanzamiento) */
.nav-signin{color:var(--snow-70); text-decoration:none; font-size:.9rem; font-weight:600; padding:6px 4px; transition:color .2s; white-space:nowrap}
.nav-signin:hover,.nav-signin:focus-visible{color:#fff}
@media(max-width:479px){.nav-signin{display:none}}

/* CTA descarga app en hero (relanzamiento: la app primero) */
.btn-store{display:inline-flex; align-items:center; gap:11px; background:#FCFAF6; color:#0E0F13; border-radius:16px; padding:10px 20px; text-decoration:none; box-shadow:0 14px 30px -14px rgba(0,0,0,.7); transition:transform .2s, box-shadow .2s}
.btn-store:hover,.btn-store:focus-visible{transform:translateY(-2px); box-shadow:0 22px 38px -14px rgba(0,0,0,.78)}
.btn-store .btn-ico{flex:none}
.btn-store-txt{display:flex; flex-direction:column; align-items:flex-start; line-height:1.05}
.btn-store-txt small{font-size:.66rem; font-weight:600; opacity:.6}
.btn-store-txt b{font-size:1.1rem; font-weight:700; letter-spacing:-.01em}
.hero-secondary{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:18px}
.hero-weblink{color:var(--snow-70); text-decoration:none; font-size:.95rem; font-weight:600; border-bottom:1px solid rgba(247,243,236,.28); padding-bottom:1px; transition:color .2s, border-color .2s}
.hero-weblink:hover,.hero-weblink:focus-visible{color:#fff; border-color:var(--coral-300)}