/* ===== hero ===== */
/* ==========================================================================
   HERO — Casa de cambio digital Securex
   Reconstrucción de HeroSection.tsx + useHeroGSAP (scrollytelling). Prefijo: hero-
   Dos modos:
     · < 1280px  →  layout apilado simple (columna centrada, cards reveladas).
     · ≥ 1280px + JS  →  .hero.is-scrolly: escenario sticky + timeline de scroll.
   Colores desde tokens.css; hex propios del componente → variables locales --hero-*.
   ========================================================================== */
.hero{
  /* Hex propios del componente real (data de stats/benefits, cyan, grises) */
  --hero-cyan:var(--sx-cyan);
  --hero-cyan-soft:#7DF6FF;      /* stat: dólares cambiados */
  --hero-stat-purple:#7829FF;    /* stat: clientes */
  --hero-stat-navy:#003B73;      /* stat: órdenes */
  --hero-benefit-dark:#0E1828;   /* benefit: mejoramos tipo de cambio */
  /* Blanco al 90% sobre #0079FF daba 3.56:1 y ahi va la linea de la
     certificacion ISO, que es el argumento de confianza del hero. */
  --hero-benefit-blue:#0079FF;   /* benefit: ISO */
  --hero-vivo-bg:#FDECEA;
  --hero-gray:var(--sx-text-muted);
  --hero-gray-soft:var(--sx-text-muted);
  --hero-gray-body:#5B6778;
  --hero-input-border:#D9DCE2;
  --hero-mejor-bg:#EBF1FF;
  --hero-error:#FF6B35;
  --hero-error-bg:#FFF3EF;
  --hero-error-text:#C0400A;
  --hero-ok:#22C55E;
  --hero-ok-dark:#16A34A;
  --hero-ok-text:#14532D;
  --hero-ok-text-2:#15803D;
  --hero-ok-bg-1:#F0FDF4;
  --hero-ok-bg-2:#DCFCE7;

  position:relative;
  overflow:clip;
  /* Fondo celeste base (#EAF4FE) ESTÁTICO. Antes esta capa animaba
     background-position de 4 gradientes: background-position no es composited,
     así que re-rasterizaba en cada frame una superficie de hasta 360vh (ver
     .hero.is-scrolly) en bucle infinito, compitiendo con el scrollytelling.
     Los glows se movieron a .hero::before, que anima solo con transform. */
  background:
    linear-gradient(135deg, #D3E7FF 0%, #EAF4FE 38%, #DAEAFE 68%, #E3F0FF 100%);
  background-size:220% 220%;
  background-position:0% 50%;
  padding:clamp(88px,14vh,140px) 0 clamp(56px,9vh,96px);
  isolation:isolate;
}
/* Capa de glows cian/azul de marca. Vive en un pseudo-elemento con inset:-15%
   (margen para derivar sin descubrir bordes; .hero tiene overflow:clip) y solo
   anima transform → se compone en GPU, sin repintar el fondo.
   Los background-size/position replican el mismo tamaño y posición absoluta que
   tenían los radial-gradient sobre .hero: el box mide 130% del hero, por eso
   190%/1.3 = 146% y las posiciones se remapean (-25% / 125%). */
.hero::before{
  content:"";position:absolute;inset:-15%;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 56% at 14% 16%, rgba(var(--sx-cyan-rgb),.34), transparent 60%),
    radial-gradient(52% 54% at 90% 22%, rgba(var(--sx-blue-rgb),.24), transparent 60%),
    radial-gradient(60% 62% at 64% 108%, rgba(var(--sx-cyan-rgb),.18), transparent 64%);
  background-repeat:no-repeat;
  background-size:146% 146%, 146% 146%, 146% 146%;
  background-position:-25% -25%, 125% -25%, 50% 125%;
  animation:hero-bg-drift 20s ease-in-out infinite;
  will-change:transform;
}
/* home.js pone .is-bg-paused cuando el hero sale del viewport: sin esto el
   bucle sigue consumiendo CPU aunque el usuario ya bajó. */
.hero.is-bg-paused::before{ animation-play-state:paused }
/* Misma duración y cadencia que el hero-bg-shift que reemplaza (20s ease-in-out,
   ida y vuelta). El scale debe dominar sobre el translate: los glows arrancan con
   sus bordes justo en el borde del hero, así que agrandar los empuja hacia afuera
   y el desplazamiento no llega a descubrir ningún corte (|translate| < scale-1). */
@keyframes hero-bg-drift{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  50%    { transform:translate3d(-3%,3%,0) scale(1.12) }
}


/* ── Escenario (por defecto es un contenedor estático; sticky solo en scrolly) ── */
.hero-stage{position:relative}
.hero-inner{position:relative;z-index:5}

/* ── Decoración: dot grid + dólares flotantes (solo desktop) ── */
.hero-decor{position:absolute;inset:0;z-index:0;pointer-events:none;display:none}
.hero-dotgrid{
  position:absolute;inset:0;opacity:.15;
  background-image:radial-gradient(var(--sx-gris-0) 1px,transparent 1px);
  background-size:26px 26px;
}
/* Dólares reales (img). El tamaño viene de los atributos width/height del <img>. */
.hero-dollar{
  position:absolute;
  opacity:.9;user-select:none;pointer-events:none;
  animation:hero-float var(--d,7s) ease-in-out var(--dl,0s) infinite;
  will-change:transform;
}
@media (min-width:1280px){ .hero-decor{display:block} }
/* El translate3d de --px/--py es el parallax del mouse (home.js lo actualiza).
   Va dentro del keyframe para que conviva con el flotar de siempre: cada dólar
   se desplaza según su "profundidad", y los de adelante se mueven más. */
@keyframes hero-float{
  0%,100%{transform:translate3d(var(--px,0px),var(--py,0px),0) translateY(0) rotate(0)}
  50%{transform:translate3d(var(--px,0px),var(--py,0px),0) translateY(var(--fy,-16px)) rotate(var(--fr,4deg))}
}
/* La trama de puntos se corre al revés y muy poco: es la capa del fondo. */
.hero-dotgrid{ transform:translate3d(var(--px,0px),var(--py,0px),0); }

/* ── Cabecera ── */
.hero-headlayer{text-align:center;margin-bottom:clamp(28px,4vw,48px)}

/* Badge Seculukas: píldora con gradiente de marca (azul→morado→cyan) que fluye
   en bucle, texto blanco y moneda con glow. Mismo estilo en desktop y móvil. */
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:var(--sx-r-pill);margin-bottom:18px;border:none;
  background:linear-gradient(135deg,#1077FD,#5543FF,var(--sx-cyan),#1077FD);
  background-size:300% 300%;
  animation:hero-badge-bg 4s ease infinite;
  transition:transform .18s var(--sx-ease);
}
.hero-badge:hover{transform:scale(1.03)}
.hero-badge:active{transform:scale(.97)}
@keyframes hero-badge-bg{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-badge-coin{flex-shrink:0;filter:drop-shadow(0 0 6px rgba(var(--sx-cyan-rgb),.8))}
.hero-badge-txt{
  font-family:var(--sx-font-title);font-weight:700;font-size:14px;line-height:1;
  color:#fff;white-space:nowrap;letter-spacing:.02em;
}
/* Con nowrap y 14px fijos el badge medía 331px siempre: a 320px se salia 35px
   del viewport y lo tapaba el overflow-x:hidden del body. Tambien pasaba a
   1280px con el zoom del navegador al 400% (WCAG 1.4.10). */
@media (max-width:389.98px){
  .hero-badge-txt{white-space:normal;font-size:13px;line-height:1.2;text-align:center}
}
.hero-badge-hl{color:#fff;font-weight:700}

/* CTA "Cambiar ahora" dentro del cotizador: solo movil/tablet (<1280px). En
   desktop el CTA es el FloatingCTA de sections.css.
   Los dos son EXCLUYENTES y comparten el corte 1280, que es el mismo de la
   navbar y del hero pineado. Si se mueve uno hay que mover el otro, o se ven
   dos "Cambiar ahora" a la vez. */
.hero-cot-cta{display:none}
/* Debajo de 1280 de ancho O de 620 de alto el hero no se pinea, asi que el CTA
   tiene que estar DENTRO de la tarjeta. La condicion de alto es la misma que
   usa wantScrolly() en js/home.js y la que esconde .page-home .fab-cta en sections.css:
   si las tres no dicen lo mismo, queda una tarjeta sin boton con el pill
   flotando encima, o dos "Cambiar ahora" a la vez. */
@media (max-width:1279.98px), (max-height:619.98px){
  .hero-cot-cta{display:flex;width:100%;margin-top:4px}
}

.hero-headline{
  font-family:var(--sx-font-title);font-weight:800;
  font-size:clamp(2.2rem,10vw,4rem);line-height:1.05;letter-spacing:-.02em;
  text-transform:uppercase;
}
.hero-line{display:block;color:var(--sx-text)}
.hero-line--blue{color:var(--sx-blue)}
@media (min-width:768px){ .hero-headline{font-size:clamp(2.8rem,6.5vw,5rem)} }
@media (min-width:1280px){
  .hero-headline{font-size:clamp(2.4rem,5.6vw,80px);line-height:1.06}
}

/* ── Fila de escenario (por defecto: columna centrada apilada) ── */
/* Orden apilado (mobile / no scrolly): CTA+cotizador · stats · beneficios */
.hero-stagerow{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,40px)}
.hero-stagerow > *{min-width:0}
.hero-col{width:100%}
.hero-center{order:1}
.hero-col-stats{order:2}
.hero-col-benefits{order:3}

/* Centro: CTA + cotizador (apilados, CTA arriba) */
.hero-center{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vw,28px);width:100%}

/* Métricas: fila centrada (1 col mobile · 3 col desde 560) */
.hero-col-stats{max-width:720px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){ .hero-col-stats{grid-template-columns:repeat(3,1fr)} }

.hero-stat-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-radius:16px;padding:20px;min-height:96px;
}
.hero-stat-value{font-family:var(--sx-font-title);font-weight:700;font-size:24px;line-height:1.1;color:#fff}
/* Al 80% sobre el morado de la tarjeta daban 4.26:1. Es la etiqueta que dice
   que mide el numero de arriba, o sea sin ella el dato no significa nada.
   Blanco pleno da 5.90:1 y la jerarquia la sostiene el peso 300. */
.hero-stat-label{font-family:var(--sx-font-title);font-weight:300;font-size:15px;line-height:1.4;color:#fff;margin-top:2px}
.hero-stat-value--dark{color:var(--sx-text)}
.hero-stat-label--dark{color:var(--sx-text)}
.hero-stat-icon{width:28px;height:28px;flex-shrink:0}
/* Cajita glass que enmarca el ícono (mismo tratamiento en stats y benefits) */
.hero-stat-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.hero-stat-ico--onlight{background:rgba(6,20,40,.05);border-color:rgba(6,20,40,.1)}

/* Beneficios: fila centrada (ocultos en mobile pequeño, 2 col desde 768) */
.hero-col-benefits{display:none;max-width:760px;margin:0 auto;gap:16px}
@media (min-width:768px){ .hero-col-benefits{display:grid;grid-template-columns:1fr 1fr} }
.hero-benefit-card{border-radius:16px;padding:24px}
/* Ícono suelto (sin cajita) y grande, mismo formato que los .hero-stat-icon */
.hero-benefit-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;margin-bottom:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.hero-benefit-ico svg{width:28px;height:28px}
.hero-benefit-title{font-family:var(--sx-font-title);font-weight:700;font-size:clamp(24px,2.4vw,36px);line-height:1.1;color:#fff;margin-bottom:12px}
.hero-benefit-body{font-family:var(--sx-font-title);font-weight:300;font-size:clamp(16px,1.5vw,22px);line-height:1.5}

@media (min-width:1280px){
  .hero-col-stats,.hero-col-benefits{max-width:900px}
  .hero-stat-card{min-height:132px;padding:24px}
  .hero-stat-value{font-size:30px}
  .hero-stat-label{font-size:17px}
  .hero-stat-icon{width:28px;height:28px}
  .hero-benefit-card{padding:28px}
}

/* ==========================================================================
   COTIZADOR
   ========================================================================== */
.hero-cotizador{position:relative;width:100%;max-width:458px;min-width:0;margin:0 auto;isolation:isolate}

.hero-cotizador-border{position:relative;overflow:hidden;border-radius:26px;padding:3px;min-width:0}
.hero-cotizador-spin{
  position:absolute;inset:-100%;z-index:0;
  background:conic-gradient(from 0deg,var(--sx-blue),var(--hero-cyan),var(--sx-blue),var(--hero-cyan),var(--sx-blue));
  animation:hero-spin 4s linear infinite;
}
@keyframes hero-spin{to{transform:rotate(360deg)}}

.hero-cotizador-card{
  position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;
  gap:24px;background:var(--sx-white);border-radius:24px;
  padding:clamp(16px,4vw,24px) clamp(14px,4vw,24px) clamp(20px,5vw,32px);
  /* Sin cursor:pointer: la tarjeta ya no es clickeable (era un div sin rol ni
     teclado y el cursor mentía). Bajar al final del hero lo hacen los chevrons,
     que ahora son <button> accesibles. */
}

/* 1 — VIVO + header */
.hero-cot-header{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0}
.hero-vivo-pill{
  display:inline-flex;align-items:center;flex-shrink:0;
  background:var(--hero-vivo-bg);border-radius:var(--sx-r-pill);padding:4px 10px 4px 8px;
}
/* La palabra VIVO con --sx-vivo sobre su fondo rosa daba 3.19:1. El punto que
   late se queda con el rojo de marca; solo el texto usa la version oscura. */
.hero-vivo-pill .sx-vivo{color:var(--sx-vivo-texto);font-size:13px;letter-spacing:.04em;gap:6px}
.hero-cot-title{
  font-family:var(--sx-font-body);font-weight:700;
  font-size:clamp(11px,3.2vw,15px);color:var(--sx-blue-dark);
  text-transform:uppercase;letter-spacing:.02em;line-height:20px;white-space:nowrap;margin:0;
  min-width:0;overflow:hidden;text-overflow:ellipsis;
}
/* Debajo de 340px el ellipsis se comia el nombre del producto principal: a
   320px perdia 16 caracteres y a 280px, 56 ("PRECIO DEL DOLAR HOY…" en 11px).
   Recortar eso no es solucion: que use dos lineas. */
@media (max-width:359.98px){
  .hero-cot-title{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
}

/* 2 — Tabs de tasa */
.hero-tabs{
  display:flex;width:100%;
  border:1.5px solid var(--sx-blue);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 3px rgba(var(--sx-blue-rgb),.08);
}
.hero-tab{
  /* 44px es el minimo tactil. Antes 36. */
  flex:1 1 0;min-width:0;overflow:hidden;min-height:44px;padding:8px 10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sx-font-body);font-weight:400;font-size:clamp(12px,3.6vw,15px);
  color:var(--sx-blue-texto);background:var(--sx-white);white-space:nowrap;
  transition:background .2s var(--sx-ease),color .2s var(--sx-ease);
}
/* Debajo de 340px el precio quedaba cortado dentro del tab. Que baje a dos
   lineas antes que perder el numero. */
@media (max-width:339.98px){
  .hero-tab{white-space:normal;line-height:1.2;overflow:visible}
}
.hero-tab strong{font-weight:700;letter-spacing:-.01em;margin-left:4px}
.hero-tab--active{background:var(--sx-blue);color:#fff;font-weight:500}

/* Sello "actualizado hh:mm" (tasas en vivo) */
.hero-tc-updated{ display:none }

/* 3 — Cajas de intercambio */
.hero-boxes{position:relative;display:flex;flex-direction:column;gap:16px;margin-top:8px}
.hero-box{
  position:relative;border:1.5px solid var(--hero-input-border);border-radius:14px;
  padding:clamp(14px,4vw,24px);background:var(--sx-white);
}
.hero-box-label{
  position:absolute;top:-10px;left:14px;padding:0 4px;background:var(--sx-white);
  font-family:var(--sx-font-body);font-weight:600;font-size:14px;
  color:var(--sx-blue-dark);text-transform:uppercase;line-height:20px;
}
.hero-box-row{display:flex;align-items:center;gap:10px}
.hero-box-amount{display:flex;align-items:baseline;gap:6px;flex:1;min-width:0}
.hero-box-symbol{
  font-family:var(--sx-font-title);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(22px,6vw,30px);color:var(--sx-text);line-height:32px;flex-shrink:0;
}
.hero-input{
  flex:1;min-width:0;width:100%;background:transparent;border:none;
  font-family:var(--sx-font-title);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(22px,6vw,30px);color:var(--sx-text);line-height:32px;
}
.hero-input::placeholder{color:var(--sx-text-muted);font-weight:400}
/* Banderas reales (img /img/flags/dolar.svg · soles.svg); home.js cambia el src según modo. */
.hero-flag{
  width:32px;height:32px;flex-shrink:0;border-radius:50%;display:block;object-fit:cover;
}
.hero-swap{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:10;
  width:40px;height:40px;border-radius:12px;background:var(--sx-blue);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(var(--sx-blue-rgb),.35);
  transition:transform .2s var(--sx-ease);
}
/* Área táctil ≥44px sin cambiar el tamaño visible (botón 40px) */
.hero-swap::before{content:"";position:absolute;inset:-2px}
.hero-swap svg{width:17px;height:17px}
.hero-swap:hover{transform:translateY(-50%) scale(1.1)}
.hero-swap:active{transform:translateY(-50%) scale(.95)}

/* 4 — Cupón */
.hero-cupon{
  position:relative;
  border:1.5px solid var(--hero-input-border);border-radius:8px;padding:13px 16px;
  cursor:pointer;transition:border-color .2s var(--sx-ease);
}
.hero-cupon[data-open="true"]{border-color:var(--sx-blue);cursor:default}
.hero-cupon-row{display:flex;align-items:center;gap:8px}
.hero-cupon-icon{width:32px;height:32px;flex-shrink:0}
.hero-cupon-placeholder{
  flex:1;font-family:var(--sx-font-body);font-weight:400;font-size:15px;color:var(--hero-gray-soft);
}
/* Es un <button> (antes <span>): abrir el cupón tiene que ser operable con
   teclado. Reset de padding/line-height para que se vea igual que el span. */
.hero-cupon-cta{
  flex-shrink:0;font-family:var(--sx-font-body);font-weight:700;font-size:14px;
  color:var(--sx-blue-texto);letter-spacing:.06em;text-transform:uppercase;
  background:none;border:none;padding:0;line-height:inherit;
}
.hero-cupon-input{
  flex:1;min-width:0;background:none;border:none;
  font-family:var(--sx-font-body);font-size:16px;color:var(--sx-text);display:none;
}
.hero-cupon-actions{display:none;align-items:center;gap:12px;flex-shrink:0}
/* "Simular" como link pequeño (no pill), igual al original */
/* Mismo tratamiento que .hero-cupon-cta: los dos rotulos se turnan en la misma
   posicion (AGREGAR cerrado / SIMULAR abierto). Si uno va en mayusculas y el
   otro no, el cambio de estado se lee como un salto tipografico. */
.hero-cupon-simular{
  /* Media 66x16. El area de toque se agranda con ::before, que es el patron
     que el proyecto ya usa en 13 lugares, para no cambiar la caja visual. */
  position:relative;
  font-family:var(--sx-font-body);font-weight:700;font-size:14px;
  color:var(--sx-blue-texto);cursor:pointer;white-space:nowrap;
  letter-spacing:.06em;text-transform:uppercase;
}
.hero-cupon-simular:hover{color:var(--sx-blue-dark)}
/* Sin nada escrito no hay que validar: el boton se apaga en vez de
   ofrecer una accion que no va a hacer nada. */
.hero-cupon-simular[disabled]{color:var(--sx-gris-0);cursor:default}
.hero-cupon-simular[disabled]:hover{color:var(--sx-gris-0)}
/* La x es el unico control para descartar el cupon: se le da area
   clickeable de verdad y un hover que confirme que responde. */
.hero-cupon-close{position:relative;display:flex;padding:6px;border-radius:50%;transition:background .18s var(--sx-ease)}
/* Area de toque de 44px para los controles del cupon, sin tocar su caja visual.
   El comentario viejo del cerrar prometia "area clickeable de verdad" y quedaba
   en 27x27. */
.hero-cupon-simular::before,
.hero-cupon-close::before,
.hero-cupon-applied-x::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px);
}
.hero-cupon-close:hover{background:var(--sx-gris-minus)}
.hero-cupon-close:hover svg{stroke:var(--sx-text)}
.hero-cupon-close svg{width:15px;height:15px}
/* estado abierto */
.hero-cupon[data-open="true"] .hero-cupon-placeholder,
.hero-cupon[data-open="true"] .hero-cupon-cta{display:none}
.hero-cupon[data-open="true"] .hero-cupon-input,
.hero-cupon[data-open="true"] .hero-cupon-actions{display:flex}

/* 4b — Error cupón */
.hero-cupon-error{
  display:flex;align-items:center;gap:10px;margin-top:-8px;
  background:var(--hero-error-bg);border:1.5px solid var(--hero-error);border-radius:10px;padding:11px 14px;
}
.hero-cupon-error[hidden]{display:none}
.hero-cupon-error svg{flex-shrink:0}
.hero-cupon-error p{
  flex:1;margin:0;font-family:var(--sx-font-body);font-weight:400;font-size:13.5px;
  color:var(--hero-error-text);line-height:1.4;
}
.hero-cupon-error p strong{font-weight:700}
.hero-cupon-error-close{display:flex;padding:2px;flex-shrink:0}
.hero-cupon-error-close svg{width:14px;height:14px}

/* 4c — Cupón aplicado (estado ok) */
.hero-cupon[hidden]{display:none}
.hero-cupon-applied{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,var(--hero-ok-bg-1) 0%,var(--hero-ok-bg-2) 55%,#BBF7D0 100%);
  border:1.5px solid var(--hero-ok);border-radius:14px;padding:12px 14px;
  box-shadow:0 1px 2px rgba(34,197,94,.08),inset 0 1px 0 rgba(255,255,255,.6);
}
.hero-cupon-applied[hidden]{display:none}
.hero-cupon-applied-icon{
  width:38px;height:38px;flex-shrink:0;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--hero-ok) 0%,var(--hero-ok-dark) 100%);
  box-shadow:0 3px 10px rgba(34,197,94,.4),inset 0 1px 0 rgba(255,255,255,.3);
}
.hero-cupon-applied-icon svg{width:22px;height:22px}
.hero-cupon-applied-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hero-cupon-applied-label{
  font-family:var(--sx-font-body);font-weight:700;font-size:14px;color:var(--hero-ok-text);
  line-height:1.3;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-cupon-applied-mejora{
  font-family:var(--sx-font-body);font-weight:500;font-size:12px;color:var(--hero-ok-text-2);line-height:1.3;
}
.hero-cupon-applied-mejora[hidden]{display:none}
.hero-cupon-applied-remove{
  width:30px;height:30px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.75);border:1px solid rgba(34,197,94,.35);
  transition:transform .18s var(--sx-ease),background .18s var(--sx-ease);
}
.hero-cupon-applied-remove:hover{transform:scale(1.08);background:rgba(255,255,255,.95)}
.hero-cupon-applied-remove:active{transform:scale(.9)}
.hero-cupon-applied-remove svg{width:15px;height:15px}

/* 5 — Mejor precio */
.hero-mejor{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-radius:8px;padding:14px 16px;background:var(--hero-mejor-bg);
  border:1.5px dashed rgba(var(--sx-blue-rgb),.5);
}
.hero-mejor-text{flex:1;min-width:0}
.hero-mejor-title-row{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.hero-mejor-title{font-family:var(--sx-font-body);font-weight:700;font-size:14px;color:var(--sx-text);line-height:1.4;letter-spacing:-.01em}
.hero-mejor-info{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .18s var(--sx-ease)}
/* Área táctil ≥44px sin cambiar el tamaño visible (icono 16px) */
.hero-mejor-info::before{content:"";position:absolute;inset:-14px}
.hero-mejor-info:hover{transform:scale(1.15)}
.hero-mejor-sub{font-family:var(--sx-font-body);font-weight:400;font-size:13px;color:var(--hero-gray-body);margin:0;line-height:1.4}

/* 6 — CTA principal: pill turquesa. Frame 0 centrado sobre el card. */
/* 7 — Trust footer */
.hero-trust{display:flex;align-items:center;padding:8px 0;border-top:1px solid #E8F0FE}
.hero-trust-item{flex:1;display:flex;align-items:center;justify-content:center;gap:5px}
.hero-trust-icon{width:20px;height:20px;flex-shrink:0;opacity:.75}
.hero-trust-item span{font-family:var(--sx-font-body);font-size:12px;font-weight:400;color:var(--hero-gray);line-height:1.3}
.hero-trust-item strong{color:#374151}
.hero-trust-divider{width:1px;height:22px;background:var(--sx-gris-minus);flex-shrink:0}

/* ── Cue de scroll (pre): 3 chevrons ── */
/* Oculto por defecto (mobile/tablet apilado); solo se muestra en el
   scrollytelling de desktop, reposicionado al costado del cotizador. */
/* Es un <button> (antes <div aria-hidden>): dispara scroll, así que tiene que
   ser alcanzable por teclado y anunciarse. Reset de padding/background propios
   del botón para conservar exactamente el mismo aspecto. */
.hero-scrollcue{
  position:relative;z-index:5;display:none;flex-direction:column;align-items:center;gap:1px;
  margin:clamp(28px,5vh,56px) auto 0;cursor:pointer;
  background:none;border:none;padding:0;
}
/* Al desvanecerse con el scroll (home.js baja la opacidad a 0) dejaba una zona
   clickeable invisible sobre el cotizador. */
.hero-scrollcue.is-faded{pointer-events:none}
.hero-scrollcue svg{animation:hero-cue 2s ease-in-out infinite;animation-delay:calc(var(--i,0)*.28s);opacity:.45}
/* Pulso con piso de opacidad (.45) para que el chevron SIEMPRE se vea, no que
   se desvanezca por completo. */
@keyframes hero-cue{0%,100%{opacity:.45;transform:translateY(-3px)}50%{opacity:1;transform:translateY(3px)}}

/* ── Scroll hint "Sigue explorando" (solo scrolly desktop) ── */
.hero-scroll-hint{display:none;flex-direction:column;align-items:center;gap:6px;pointer-events:none;cursor:pointer}
.hero-scroll-hint-txt{
  font-family:var(--sx-font-title);font-weight:400;font-size:13px;color:var(--hero-gray-soft);
  letter-spacing:.04em;text-transform:uppercase;
}
.hero-scroll-hint .scroll-arrow{animation:hero-hint-bob .9s ease-in-out infinite}
@keyframes hero-hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ==========================================================================
   SCROLLYTELLING — solo ≥1280px con .is-scrolly (lo añade home.js)
   Escenario sticky de 100vh dentro de una sección alta; home.js interpola
   transforms por elemento según el progreso de scroll (0..1).
   ========================================================================== */
@media (min-width:1280px){
  .hero.is-scrolly{
    height:360vh;                 /* sección alta: 100vh pin + 260vh de recorrido */
    padding:0;overflow:clip;
  }
  .hero.is-scrolly .hero-stage{
    position:sticky;top:0;height:100vh;overflow:clip;
    display:flex;align-items:center;justify-content:center;
    background:var(--sx-white);
  }
  /* Degradé suave que aparece en el estado final (cuando los dólares se van).
     Glow azul-cyan detrás del cotizador + tinte celeste sutil arriba. La
     opacidad la maneja home.js con --hero-glow (0 al inicio → 1 al final). */
  .hero.is-scrolly .hero-stage::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    opacity:var(--hero-glow,0);
    background:
      radial-gradient(58% 52% at 50% 44%, rgba(var(--sx-blue-rgb),.12), rgba(var(--sx-cyan-rgb),.06) 46%, transparent 72%),
      linear-gradient(180deg, #EEF6FF 0%, #F7FBFF 40%, #FFFFFF 78%);
  }
  .hero.is-scrolly .hero-inner{
    position:static;width:100%;max-width:1536px;height:100vh;padding:0 24px;
  }

  /* Cabecera: capa absoluta arriba, no ocupa flujo (se superpone) */
  .hero.is-scrolly .hero-headlayer{
    position:absolute;top:0;left:0;right:0;z-index:5;
    padding-top:clamp(120px,20vh,280px);margin:0;pointer-events:none;
  }
  .hero.is-scrolly .hero-badge{pointer-events:auto;margin-bottom:14px}
  .hero.is-scrolly .hero-line{will-change:transform,opacity}
  .hero.is-scrolly .hero-headline{font-size:clamp(2.7rem,6vw,88px);line-height:1.03}

  /* Fila: contenedor de escenario a pantalla completa */
  .hero.is-scrolly .hero-stagerow{
    position:absolute;inset:0;display:block;
  }

  /* Centro: cotizador anclado al centro exacto del escenario */
  .hero.is-scrolly .hero-center{
    position:absolute;top:50%;left:50%;
    width:458px;transform:translate(-50%,-50%);
    display:block;gap:0;z-index:20;will-change:transform;
  }
  /* En scrolly la animación la controla home.js (no el reveal observer):
     el cotizador debe estar siempre visible aunque tenga la clase sx-reveal. */
  .hero.is-scrolly .hero-cotizador{max-width:458px;margin:0;opacity:1;transform:none}

  /* Columnas laterales: apiladas y centradas vertical, flanqueando el cotizador.
     Sin el position:absolute de aca, el right/left de las dos reglas de abajo
     no tiene efecto y las tarjetas caen en flujo encima del cotizador. */
  .hero.is-scrolly .hero-col{
    position:absolute;top:50%;z-index:10;transform:translateY(-50%);
    display:flex;flex-direction:column;margin:0;max-width:none;
  }
  .hero.is-scrolly .hero-col-stats{
    right:calc(50% + 278px);width:360px;gap:16px;
    grid-template-columns:none;
  }
  .hero.is-scrolly .hero-col-benefits{
    left:calc(50% + 278px);width:340px;gap:16px;
    display:flex;grid-template-columns:none;
  }
  .hero.is-scrolly .hero-stat-card{min-height:150px;height:150px;padding:0 24px;will-change:transform,opacity}
  .hero.is-scrolly .hero-stat-value{font-size:32px}
  .hero.is-scrolly .hero-stat-label{font-size:18px}
  .hero.is-scrolly .hero-stat-icon{width:28px;height:28px}
  .hero.is-scrolly .hero-benefit-card{padding:22px 24px;will-change:transform,opacity}
  .hero.is-scrolly .hero-benefit-title{font-size:30px}
  .hero.is-scrolly .hero-benefit-body{font-size:19px}

  /* En scrolly, home.js maneja las cards (no la transición IO) */
  .hero.is-scrolly .hero-anim{transition:none;opacity:0}

  /* Cue pre-scroll: a la derecha del cotizador, abajo (home.js lo desvanece) */
  .hero.is-scrolly .hero-scrollcue{
    display:flex;position:absolute;bottom:28px;left:calc(50% + 262px);margin:0;z-index:30;
  }
  /* Scroll hint centrado abajo */
  .hero.is-scrolly .hero-scroll-hint{
    display:flex;position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
    z-index:30;opacity:0;will-change:opacity;
  }
}

/* ==========================================================================
   Entrada por scroll (reveal de cards — solo modo apilado / no scrolly)
   ========================================================================== */
.hero-anim{opacity:0;transition:opacity .9s var(--sx-ease),transform .9s var(--sx-ease),filter .9s var(--sx-ease)}
.hero-anim--left{transform:translate(-48px,40px) scale(.85);filter:blur(10px)}
.hero-anim--right{transform:translate(48px,40px) scale(.85);filter:blur(10px)}
.hero-anim.is-in{opacity:1;transform:none;filter:none}

/* ==========================================================================
   Modal — ¿Mejor tipo de cambio?
   ========================================================================== */
.hero-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.hero-modal[hidden]{display:none}
.hero-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:hero-fade .22s ease}
.hero-modal-card{
  position:relative;background:var(--sx-white);border-radius:24px;padding:36px 32px 32px;
  max-width:420px;width:100%;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.18),0 4px 16px rgba(var(--sx-blue-rgb),.12);
  animation:hero-pop .28s var(--sx-ease);
}
.hero-modal-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--sx-fondo-card-azul);
  transition:background .18s var(--sx-ease)}
.hero-modal-close:hover{background:var(--sx-blue-light)}
.hero-modal-close svg{width:15px;height:15px}
.hero-modal-icon{
  width:56px;height:56px;border-radius:50%;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#EFF6FF,#DBEAFE);box-shadow:0 4px 16px rgba(var(--sx-blue-rgb),.15);
}
.hero-modal-icon svg{width:26px;height:26px}
.hero-modal-title{font-family:var(--sx-font-body);font-weight:700;font-size:20px;color:#111827;margin:0 0 16px;line-height:1.3}
.hero-modal-body{font-family:var(--sx-font-body);font-weight:400;font-size:15px;color:#4B5563;margin:0 0 20px;line-height:1.65}
.hero-modal-body strong{font-weight:700;color:#111827}
.hero-modal-tyc{display:block;font-family:var(--sx-font-body);font-weight:500;font-size:14px;color:var(--sx-blue-texto);margin-bottom:20px}
.hero-modal-tyc:hover{text-decoration:underline}
.hero-modal-cta{width:100%}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}
@keyframes hero-pop{from{opacity:0;transform:scale(.92) translateY(24px)}to{opacity:1;transform:none}}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  /* El fondo queda quieto en su frame 0 (el guard global de base.css ya recorta
     la duración, pero aquí lo apagamos explícitamente). */
  .hero::before{animation:none;transform:none;will-change:auto}
  .hero-dollar,.hero-cotizador-spin,.hero-scrollcue svg,.hero-scroll-hint .scroll-arrow{animation:none}
  .hero-scrollcue svg{opacity:.7}
  .hero-anim{opacity:1;transform:none;filter:none}
}

/* ===== seculukas ===== */
/* ==========================================================================
   SECULUKAS — sección dark del programa de lealtad (morado)
   Reconstrucción de SeculukasSection.tsx. Todas las clases con prefijo .secu-
   Paleta scope-local (el "viaje" cyan → morado → naranja del original vive
   solo aquí; el resto del sitio usa los tokens azules de tokens.css).
   ========================================================================== */
.secu{
  position:relative;
  overflow:hidden;
  background:#080815;
  padding:120px 0 80px;

  /* Paleta local del recorrido (canales rgb para rgba dinámico) */
  --secu-cyan-rgb:0,196,255;      /* Cambia          */
  --secu-cyanbr-rgb:70,233,254;   /* brillo cyan      */
  --secu-purple-rgb:140,60,255;   /* Gana (Seculukas) */
  --secu-orange-rgb:255,148,0;    /* Vive            */
  --secu-blue-rgb:16,119,253;     /* == --sx-blue     */
  --secu-purple-txt:#B47BFF;
  --secu-purple-lite:#9869FF;
}
@media (max-width:767.98px){
  .secu{padding:64px 0 64px}
}

/* Glows ambientales de fondo */
.secu-glows{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 40% 60% at 12% 60%, rgba(var(--secu-cyan-rgb),.08) 0%, transparent 70%),
    radial-gradient(ellipse 36% 60% at 50% 60%, rgba(var(--secu-purple-rgb),.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 88% 60%, rgba(var(--secu-orange-rgb),.07) 0%, transparent 70%);
}
@media (max-width:1279.98px){
  .secu-glows{
    background:
      radial-gradient(ellipse 80% 40% at 50% 35%, rgba(var(--secu-cyan-rgb),.07) 0%, transparent 70%),
      radial-gradient(ellipse 70% 35% at 50% 60%, rgba(var(--secu-purple-rgb),.05) 0%, transparent 70%);
  }
}
.secu-fade{
  position:absolute; left:0; right:0; bottom:0; height:60px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, #080815);
  display:none;
}
@media (max-width:1279.98px){ .secu-fade{display:block} }

.secu-container{width:100%; max-width:1200px; margin:0 auto; padding:0 20px; position:relative}
@media (min-width:1280px){ .secu-container{padding:0 40px} }

/* ── HEADER ──────────────────────────────────────────────────────────── */
.secu-header{text-align:center; margin-bottom:72px}
@media (max-width:1279.98px){ .secu-header{margin-bottom:48px} }
.secu-title{
  font-family:var(--sx-font-title);
  font-weight:700; line-height:1.05; letter-spacing:-.03em;
  font-size:clamp(2rem,7vw,64px); color:var(--sx-white); margin:0 0 16px;
}
.secu-title-grad{
  background:linear-gradient(90deg,var(--sx-cyan),#9869FF);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  
}
.secu-sub{
  font-family:var(--sx-font-title);
  font-weight:300; font-size:20px; line-height:1.65;
  color:rgba(255,255,255,.6); max-width:620px; margin:0 auto;
}
.secu-sub strong{color:var(--sx-white); font-weight:600}
@media (max-width:1279.98px){ .secu-sub{font-size:16px; max-width:540px} }

/* ── ANIMACIÓN ───────────────────────────────────────────────────────── */
.secu-anim{margin-bottom:72px}
@media (max-width:1279.98px){ .secu-anim{margin-bottom:40px} }

/* Track: desktop = 3 nodos + 2 conectores; mobile = 1 nodo a la vez */
.secu-track{display:flex; align-items:flex-start; padding-bottom:48px; justify-content:center}
.secu-anim--mobile .secu-track{padding-bottom:0; position:relative; min-height:340px; align-items:flex-start}
.secu-anim--mobile .secu-connector{display:none}
/* En mobile solo se muestra el nodo activo; el saliente se posiciona
   absoluto y se desvanece encima (cross-fade sin salto de layout) */
.secu-anim--mobile .secu-node{display:none}
.secu-anim--mobile .secu-node.is-on{display:flex}
.secu-anim--mobile .secu-node.is-leaving{display:flex; position:absolute; top:0; left:0; right:0; margin:0 auto; pointer-events:none}

/* ── Nodo orbital ── */
.secu-node{
  display:flex; flex-direction:column; align-items:center; gap:40px;
  min-width:180px;
}
.secu-orb{position:relative; display:flex; align-items:center; justify-content:center; width:180px; height:180px}

/* color de anillo/glow por nodo */
.secu-node[data-ring="cyan"]  {--ring:rgba(var(--secu-cyan-rgb),.75);   --glow:var(--secu-cyan-rgb)}
.secu-node[data-ring="purple"]{--ring:rgba(var(--secu-purple-rgb),.75); --glow:var(--secu-purple-rgb)}
.secu-node[data-ring="orange"]{--ring:rgba(var(--secu-orange-rgb),.75); --glow:var(--secu-orange-rgb)}

/* Anillo de pulso externo (loop suave mientras el nodo está activo) */
.secu-ring-pulse{
  position:absolute; inset:-22px; border-radius:50%;
  border:1px solid var(--ring);
  box-shadow:0 0 32px rgba(var(--glow),.2);
  opacity:0;
}
.secu-node.is-on .secu-ring-pulse{animation:secu-ring-pulse 3.5s ease-in-out infinite}

/* Anillo principal */
.secu-ring-main{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--ring);
  box-shadow:0 0 50px rgba(var(--glow),.22), inset 0 0 30px rgba(var(--glow),.06);
}

/* Fondo interior */
.secu-orb-bg{
  position:absolute; inset:10px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(var(--glow),.16) 0%, rgba(var(--glow),.05) 60%, transparent 100%);
  display:flex; align-items:center; justify-content:center; z-index:2;
}

/* Entrada/salida del nodo (ring scale + fade) — solo anillos y fondo;
   el badge y los incrementos flotantes tienen su propia animación */
.secu-node .secu-ring-pulse,
.secu-node .secu-ring-main,
.secu-node .secu-orb-bg{
  opacity:0; transform:scale(.6);
  transition:opacity .45s var(--sx-ease), transform .45s var(--sx-ease);
}
.secu-node .secu-ring-pulse{transform:scale(.7)}
.secu-node.is-on .secu-ring-pulse,
.secu-node.is-on .secu-ring-main,
.secu-node.is-on .secu-orb-bg{opacity:1; transform:scale(1); transition-duration:.65s}

/* Label + sublabel */
.secu-node-label{
  text-align:center;
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--sx-ease), transform .45s var(--sx-ease);
}
.secu-node.is-on .secu-node-label{opacity:1; transform:none; transition-duration:.65s; transition-delay:.2s}
.secu-node-title{
  font-family:var(--sx-font-title); font-weight:700;
  font-size:clamp(2rem,3.8vw,56px); color:var(--sx-white); margin:0 0 6px; line-height:1;
}
.secu-node-sub{
  font-family:var(--sx-font-title); font-weight:300;
  font-size:20px; color:var(--sx-white); line-height:1.4; margin:0 auto; max-width:230px;
}
.secu-hl{color:var(--secu-purple-txt); font-weight:600}

/* ── Conector animado ── */
.secu-connector{flex:1; padding-top:89px; align-self:flex-start; min-width:40px}
.secu-conn-rail{position:relative; height:2px; overflow:hidden; border-radius:2px}
.secu-conn-track{position:absolute; inset:0; background:rgba(255,255,255,.05)}
.secu-conn-fill{
  position:absolute; inset:0; transform-origin:left; transform:scaleX(0); opacity:0;
  transition:transform .4s var(--sx-ease), opacity .4s var(--sx-ease);
}
.secu-connector[data-conn="0"] .secu-conn-fill{background:linear-gradient(90deg,rgba(var(--secu-cyan-rgb),.7),rgba(var(--secu-purple-rgb),.7))}
.secu-connector[data-conn="1"] .secu-conn-fill{background:linear-gradient(90deg,rgba(var(--secu-purple-rgb),.7),rgba(var(--secu-orange-rgb),.7))}
.secu-connector.is-on .secu-conn-fill{transform:scaleX(1); opacity:1; transition-duration:.75s}
.secu-conn-light{
  position:absolute; top:0; bottom:0; width:35%; opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
}
.secu-connector.is-on .secu-conn-light{opacity:1; animation:secu-conn-light 3s ease-in-out infinite}

/* Dots de progreso */
.secu-dots{display:flex; justify-content:center; gap:8px; padding-bottom:4px}
.secu-anim--mobile .secu-dots{padding-bottom:0; margin-top:24px}
.secu-dot{width:6px; height:5px; border-radius:99px; background:rgba(255,255,255,.1); transition:width .4s var(--sx-ease), background .4s var(--sx-ease)}
.secu-dot.is-active{width:20px}
.secu-dot[data-dot="0"].is-lit{background:rgba(var(--secu-cyan-rgb),.7)}
.secu-dot[data-dot="1"].is-lit{background:rgba(var(--secu-purple-rgb),.7)}
.secu-dot[data-dot="2"].is-lit{background:rgba(var(--secu-orange-rgb),.7)}

/* ==========================================================================
   ILUSTRACIÓN 1 — CAMBIA : partícula USD ⇄ PEN
   ========================================================================== */
.secu-illo--exchange{display:flex; align-items:center; width:128px}
.secu-cur{position:relative; flex-shrink:0}
.secu-cur-face{
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; overflow:hidden; font-family:var(--sx-font-title); font-weight:700;
  color:var(--sx-white); position:relative; z-index:2;
  transition:border-color .3s var(--sx-ease), box-shadow .3s var(--sx-ease), transform .35s var(--sx-ease);
}
/* Bandera real que llena la moneda (USD / PEN) */
.secu-cur-face img{width:100%; height:100%; display:block; object-fit:cover}
.secu-cur--usd .secu-cur-face{
  width:52px; height:52px; font-size:22px;
  background:radial-gradient(circle at 50% 35%,#1a2740,#0a1220);
  border:2.5px solid rgba(var(--secu-cyanbr-rgb),.55);
  box-shadow:0 0 18px rgba(var(--secu-cyanbr-rgb),.4), 0 3px 14px rgba(0,0,0,.5);
}
.secu-cur--pen .secu-cur-face{
  width:46px; height:46px; font-size:16px;
  background:radial-gradient(circle at 50% 35%,#12243f,#08121f);
  border:2.5px solid rgba(var(--secu-blue-rgb),.55);
  box-shadow:0 0 16px rgba(var(--secu-blue-rgb),.4), 0 3px 14px rgba(0,0,0,.5);
}
.secu-cur--usd.is-bright .secu-cur-face{
  border-color:rgba(var(--secu-cyanbr-rgb),.9);
  box-shadow:0 0 32px rgba(var(--secu-cyanbr-rgb),.75), 0 3px 14px rgba(0,0,0,.5);
}
.secu-cur--pen.is-bright .secu-cur-face{
  border-color:rgba(var(--secu-blue-rgb),.9);
  box-shadow:0 0 28px rgba(var(--secu-blue-rgb),.75), 0 3px 14px rgba(0,0,0,.5);
}
/* Glow estático detrás de la moneda */
.secu-cur-glow{
  position:absolute; inset:-12px; border-radius:50%; pointer-events:none;
  opacity:.35; transform:scale(1); transition:opacity .3s var(--sx-ease), transform .3s var(--sx-ease);
}
.secu-cur--usd .secu-cur-glow{background:radial-gradient(circle,rgba(var(--secu-cyanbr-rgb),.6) 0%,transparent 65%)}
.secu-cur--pen .secu-cur-glow{background:radial-gradient(circle,rgba(var(--secu-blue-rgb),.6) 0%,transparent 65%)}
.secu-cur.is-bright .secu-cur-glow{opacity:.85; transform:scale(1.5)}
/* Pulso de carga (moneda fuente) */
.secu-cur-charge{
  position:absolute; inset:-14px; border-radius:50%; pointer-events:none; opacity:0;
}
.secu-cur--usd .secu-cur-charge{background:radial-gradient(circle,rgba(var(--secu-cyanbr-rgb),.7) 0%,transparent 65%)}
.secu-cur--pen .secu-cur-charge{inset:-12px; background:radial-gradient(circle,rgba(var(--secu-blue-rgb),.7) 0%,transparent 65%)}
.secu-cur.is-charging .secu-cur-charge{animation:secu-charge .48s ease-in-out infinite}
/* Ripple de impacto (moneda destino) */
.secu-cur-ripple{position:absolute; inset:-4px; border-radius:50%; pointer-events:none; opacity:0}
.secu-cur--usd .secu-cur-ripple{border:2px solid var(--sx-cyan)}
.secu-cur--pen .secu-cur-ripple{border:2px solid var(--sx-blue)}
.secu-cur.is-impact .secu-cur-ripple{animation:secu-ripple .42s ease-out 1}
.secu-cur.is-impact .secu-cur-face{animation:secu-impact-bump .35s ease-out 1}

/* Track central + partícula cometa */
.secu-track-line{flex:1; position:relative; height:52px; margin:0 4px; display:flex; align-items:center}
.secu-track-base{width:100%; height:1.5px; border-radius:1px; background:linear-gradient(90deg,rgba(var(--secu-cyanbr-rgb),.22),rgba(var(--secu-blue-rgb),.22))}
.secu-particle{
  position:absolute; top:50%; margin-top:-5px; display:none; align-items:center; opacity:0;
}
.secu-particle.is-flying{display:flex}
.secu-particle-ball{width:11px; height:11px; border-radius:50%; flex-shrink:0}
.secu-particle-tail{width:28px; height:3px; border-radius:2px}
/* Dirección derecha: USD → PEN (cyan) */
.secu-particle.dir-right{flex-direction:row-reverse; left:0}
.secu-particle.dir-right .secu-particle-ball{background:var(--sx-cyan); box-shadow:0 0 12px var(--sx-cyan),0 0 28px rgba(var(--sx-cyan-rgb),.5)}
.secu-particle.dir-right .secu-particle-tail{background:linear-gradient(to right,transparent,rgba(var(--secu-cyanbr-rgb),.6))}
.secu-particle.dir-right.is-flying{animation:secu-particle-right .52s cubic-bezier(.4,0,.6,1) 1 forwards}
/* Dirección izquierda: PEN → USD (azul) */
.secu-particle.dir-left{flex-direction:row; right:0}
.secu-particle.dir-left .secu-particle-ball{background:var(--sx-blue); box-shadow:0 0 12px var(--sx-blue),0 0 28px rgba(var(--sx-blue-rgb),.5)}
.secu-particle.dir-left .secu-particle-tail{background:linear-gradient(to left,transparent,rgba(var(--secu-blue-rgb),.6))}
.secu-particle.dir-left.is-flying{animation:secu-particle-left .52s cubic-bezier(.4,0,.6,1) 1 forwards}

/* ==========================================================================
   ILUSTRACIÓN 2 — GANA : moneda Seculukas premium
   ========================================================================== */
.secu-illo--coin{width:96px; height:96px}
.secu-coin-persp{perspective:500px; width:96px; height:96px}
.secu-coin-float{position:relative; width:96px; height:96px; transform-style:preserve-3d}
.secu-node.is-on .secu-coin-float{animation:secu-coin-float 4.2s ease-in-out infinite}

/* Órbitas — el wrapper externo fija el ángulo inicial, el interno gira 360° */
.secu-orbit{position:absolute; top:50%; left:50%; width:0; height:0}
.secu-orbit-inner{position:absolute; top:0; left:0; width:0; height:0}
.secu-orbit-dot{position:absolute; border-radius:50%}
.secu-node.is-on .secu-orbit-inner{animation:secu-orbit-spin linear infinite; animation-duration:var(--dur)}
.secu-node.is-on .secu-orbit-dot{animation:secu-orbit-pulse ease-in-out infinite; animation-duration:var(--pdur); animation-delay:var(--pdel)}
.secu-orbit--1{--r:58px; --sz:5px;   --clr:var(--sx-cyan); --dur:4.5s; --pdur:2.2s; --pdel:0s;   transform:rotate(0deg)}
.secu-orbit--2{--r:54px; --sz:3.5px; --clr:#9869FF; --dur:6.5s; --pdur:1.8s; --pdel:.7s;  transform:rotate(130deg)}
.secu-orbit--3{--r:60px; --sz:4px;   --clr:#519DFF; --dur:5.5s; --pdur:2.6s; --pdel:1.3s; transform:rotate(250deg)}
.secu-orbit-dot{
  top:calc(var(--sz) / -2); left:calc(var(--r) - var(--sz) / 2);
  width:var(--sz); height:var(--sz); background:var(--clr);
  box-shadow:0 0 calc(var(--sz)*3) var(--clr), 0 0 calc(var(--sz)*6) var(--clr);
}

/* Glows */
.secu-coin-glow-deep{
  position:absolute; inset:-22px; border-radius:50%; filter:blur(14px); opacity:0;
  background:radial-gradient(circle,rgba(81,157,255,.55) 0%,rgba(111,46,255,.32) 50%,transparent 75%);
}
.secu-node.is-on .secu-coin-glow-deep{animation:secu-glow-deep 2.8s ease-in-out infinite}
.secu-coin-glow-inner{
  position:absolute; inset:-4px; border-radius:50%; filter:blur(5px); opacity:0;
  background:radial-gradient(circle,rgba(111,46,255,.28) 0%,transparent 70%);
}
.secu-node.is-on .secu-coin-glow-inner{animation:secu-glow-inner 1.6s ease-in-out infinite .5s}

/* Moneda — SVG oficial de marca, girando de verdad
   ─────────────────────────────────────────────────────────────────────────
   Antes: un SVG de 30px estirado a 96 (borroso, y con el emblema equivocado:
   dos gotas en vez del rombo de tres barras y tres puntos) que hacia UN flip
   de entrada y despues se quedaba quieto 13 segundos.
   Ahora: seculuka-relieve.svg a tamano real y girando siempre. La entrada
   (escala) y el giro (rotateY) viven en elementos distintos porque las dos
   animan `transform` y una pisaria a la otra. */
.secu-coin-flip{position:relative; width:96px; height:96px; transform-style:preserve-3d}
.secu-node.is-on .secu-coin-flip{animation:secu-coin-entra 1.05s cubic-bezier(.22,.9,.36,1) 1 both}
.secu-coin-giro{position:absolute; inset:0; transform-style:preserve-3d}
.secu-node.is-on .secu-coin-giro{animation:secu-coin-giro 9s linear infinite}
.secu-coin-img{
  position:absolute; inset:0; width:96px; height:96px; display:block; z-index:1;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  filter:drop-shadow(0 0 14px rgba(111,46,255,.65)) drop-shadow(0 0 30px rgba(81,157,255,.35));
}
/* El dorso es la MISMA cara girada media vuelta: al mirarla de frente se ve
   derecha, no espejada. Es el truco clasico de la tarjeta de dos lados. */
.secu-coin-img--dorso{transform:rotateY(180deg)}
/* Canto: solo se ve en los dos instantes en que la moneda queda de perfil y
   las dos caras estan ocultas. Sin esto la moneda parpadea a nada.
   Va como hermano del giro, no adentro: si gira con la moneda queda de perfil
   junto con ella y desaparece igual, que era justo el problema. */
.secu-coin-canto{
  position:absolute; top:6%; left:50%; width:8px; height:88%; z-index:2;
  transform:translateX(-50%); border-radius:99px; opacity:0;
  /* Puntas claras con los tonos del aro y el centro con los del canto: sobre
     fondo oscuro un canto plano se pierde y la moneda igual parecia apagarse. */
  background:linear-gradient(180deg,#9C8DFF 0%,#2E1E7A 24%,#0A4FA8 76%,#6FB4FF 100%);
  box-shadow:0 0 14px rgba(111,46,255,.85), 0 0 28px rgba(81,157,255,.4);
}
.secu-node.is-on .secu-coin-canto{animation:secu-coin-canto 9s linear infinite}
/* Luz especular: se queda quieta mientras la moneda gira debajo, que es como
   se comporta la luz de verdad. Reemplaza la banda blanca en diagonal, que
   giraba pegada a la moneda y la hacia ver de plastico. */
.secu-coin-luz{
  position:absolute; top:9%; left:15%; width:34%; height:24%; z-index:5;
  border-radius:50%; pointer-events:none; opacity:0; filter:blur(7px);
  transform:rotate(-24deg);
  background:radial-gradient(ellipse,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 70%);
}
.secu-node.is-on .secu-coin-luz{animation:secu-coin-luz 9s ease-in-out infinite}

/* Sombra en el suelo */
.secu-coin-shadow{
  position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  width:60px; height:10px; border-radius:50%; filter:blur(6px); opacity:0;
  background:radial-gradient(ellipse,rgba(111,46,255,.6) 0%,transparent 70%);
}
.secu-node.is-on .secu-coin-shadow{animation:secu-coin-shadow 4.2s ease-in-out infinite}

/* Badge de puntos (+N Seculukas) */
.secu-badge{
  position:absolute; top:-8px; right:-8px; z-index:10;
  background:linear-gradient(135deg,var(--sx-cyan),#00C4FF); color:#003B6E;
  font-family:var(--sx-font-title); font-weight:700; font-size:13px;
  padding:5px 13px; border-radius:99px; white-space:nowrap;
  box-shadow:0 0 22px rgba(var(--sx-cyan-rgb),.7),0 2px 10px rgba(0,0,0,.35);
  opacity:0; transform:scale(0) translateY(8px);
  transition:opacity .25s var(--sx-ease), transform .25s var(--sx-ease);
}
.secu-node.is-on .secu-badge{opacity:1; transform:scale(1) translateY(0); animation:secu-badge-pop .5s var(--sx-ease) .4s both}

/* Incrementos flotantes de XP (+12 +8 …) */
.secu-floats{position:absolute; inset:0; pointer-events:none}
.secu-float{
  position:absolute; top:28%;
  font-family:var(--sx-font-title); font-weight:700; font-size:11px; line-height:1;
  color:var(--sx-cyan); text-shadow:0 0 8px rgba(var(--sx-cyan-rgb),.9); opacity:0; z-index:15;
}
.secu-float[data-float="0"]{left:calc(50% - 28px)}
.secu-float[data-float="1"]{left:calc(50% + 26px)}
.secu-float[data-float="2"]{left:calc(50% - 8px)}
.secu-float[data-float="3"]{left:calc(50% + 22px)}
.secu-node.is-on .secu-float{animation:secu-float 8.1s ease-out infinite}
.secu-node.is-on .secu-float[data-float="0"]{animation-delay:.9s}
.secu-node.is-on .secu-float[data-float="1"]{animation-delay:2.4s}
.secu-node.is-on .secu-float[data-float="2"]{animation-delay:3.8s}
.secu-node.is-on .secu-float[data-float="3"]{animation-delay:5.3s}

/* ==========================================================================
   ILUSTRACIÓN 3 — VIVE : marcas aliadas rotando
   ========================================================================== */
.secu-illo--brands{position:relative; width:100px; height:100px; display:flex; align-items:center; justify-content:center}
.secu-brand-glow{
  position:absolute; inset:-14px; border-radius:50%; filter:blur(8px); pointer-events:none; opacity:0;
  /* El glow sigue el color de la marca activa (--brand-glow lo setea el JS) */
  background:radial-gradient(circle,var(--brand-glow,rgba(var(--secu-orange-rgb),.33)) 0%,transparent 70%);
}
.secu-node.is-on .secu-brand-glow{animation:secu-brand-glow 1.8s ease-in-out infinite}
.secu-brand{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
/* Logo real de la marca — sin caja de fondo, solo la imagen con sombra */
.secu-brand-img{
  width:88%; height:88%; object-fit:contain;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.7));
}
.secu-brand.is-swap{animation:secu-brand-swap .32s var(--sx-ease) 1}

/* ── LISTA DE BENEFICIOS ─────────────────────────────────────────────── */
.secu-benefits{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 48px; margin-top:48px;
}
@media (max-width:1279.98px){ .secu-benefits{gap:12px 24px; margin-top:32px} }
.secu-benefit{display:flex; align-items:center; gap:8px}
.secu-benefit-dot{width:5px; height:5px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--sx-cyan),#9869FF)}
.secu-benefit-text{
  font-family:var(--sx-font-title); font-weight:400; font-size:15px;
  color:rgba(255,255,255,.5); white-space:nowrap;
}
@media (max-width:1279.98px){ .secu-benefit-text{font-size:14px} }
/* Los tres niveles muestran sus medallas reales en vez del punto */
.secu-levels{display:inline-flex; align-items:center; gap:3px; flex-shrink:0}
.secu-levels img{width:20px; height:20px; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
@media (max-width:1279.98px){ .secu-levels img{width:18px; height:18px} }

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes secu-ring-pulse{
  0%,100%{transform:scale(1); opacity:.18}
  50%{transform:scale(1.14); opacity:.45}
}
@keyframes secu-conn-light{
  0%{transform:translateX(-110%)}
  73%,100%{transform:translateX(210%)}
}
/* Cambia */
@keyframes secu-charge{
  0%,100%{transform:scale(1); opacity:.5}
  50%{transform:scale(1.35); opacity:1}
}
@keyframes secu-ripple{
  0%{transform:scale(1); opacity:.8}
  100%{transform:scale(2.4); opacity:0}
}
@keyframes secu-impact-bump{
  0%{transform:scale(1)} 45%{transform:scale(1.18)} 100%{transform:scale(1)}
}
@keyframes secu-particle-right{
  0%{left:0; opacity:0} 15%{opacity:1} 80%{opacity:1} 100%{left:100%; opacity:0}
}
@keyframes secu-particle-left{
  0%{right:0; opacity:0} 15%{opacity:1} 80%{opacity:1} 100%{right:100%; opacity:0}
}
/* Gana — moneda */
@keyframes secu-coin-float{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-11px) rotate(2deg)}
}
@keyframes secu-orbit-spin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes secu-orbit-pulse{
  0%,100%{opacity:.3; transform:scale(.7)}
  50%{opacity:1; transform:scale(1.4)}
}
@keyframes secu-glow-deep{
  0%,100%{opacity:.4; transform:scale(.95)}
  50%{opacity:.85; transform:scale(1.35)}
}
@keyframes secu-glow-inner{
  0%,100%{opacity:.6} 50%{opacity:1}
}
/* Entrada: solo escala y opacidad. El giro lo pone secu-coin-giro. */
@keyframes secu-coin-entra{
  0%  {opacity:0; transform:scale(.25)}
  25% {opacity:1}
  70% {transform:scale(1.08)}
  100%{opacity:1; transform:scale(1)}
}
@keyframes secu-coin-giro{ from{transform:rotateY(0)} to{transform:rotateY(360deg)} }
/* Los perfiles caen en 25% y 75% del giro */
@keyframes secu-coin-canto{
  0%,21%   {opacity:0}
  25%      {opacity:1}
  29%,71%  {opacity:0}
  75%      {opacity:1}
  79%,100% {opacity:0}
}
/* La luz pega fuerte cuando la cara mira al frente (0%, 50%) y se apaga de perfil */
@keyframes secu-coin-luz{
  0%      {opacity:.85}
  20%,30% {opacity:0}
  50%     {opacity:.85}
  70%,80% {opacity:0}
  100%    {opacity:.85}
}
@keyframes secu-coin-shadow{
  0%,100%{opacity:.25; transform:translateX(-50%) scaleX(1)}
  50%{opacity:.12; transform:translateX(-50%) scaleX(.82)}
}
@keyframes secu-badge-pop{
  0%{transform:scale(0) translateY(8px)} 60%{transform:scale(1.08) translateY(0)} 100%{transform:scale(1) translateY(0)}
}
@keyframes secu-float{
  0%{opacity:0; transform:translateY(0)}
  3%{opacity:1}
  20%{opacity:1; transform:translateY(-34px)}
  26%{opacity:0; transform:translateY(-50px)}
  100%{opacity:0; transform:translateY(-50px)}
}
/* Vive — marcas */
@keyframes secu-brand-glow{
  0%,100%{opacity:.2; transform:scale(1)}
  50%{opacity:.45; transform:scale(1.22)}
}
@keyframes secu-brand-swap{
  0%{opacity:0; transform:scale(.4) translateY(12px)}
  100%{opacity:1; transform:scale(1) translateY(0)}
}

/* ── Reduced motion: estado estático, sin loops ──────────────────────── */
@media (prefers-reduced-motion:reduce){
  .secu-node .secu-orb > *,
  .secu-node-label{opacity:1!important; transform:none!important}
  .secu-conn-fill{transform:scaleX(1)!important; opacity:1!important}
  .secu-badge{opacity:1!important; transform:none!important}
  .secu-particle{display:none!important}
  .secu-anim--mobile .secu-node{display:flex!important}
  .secu-dot.is-lit{background:rgba(255,255,255,.3)}
}

/* ===== testimonials ===== */
/* ==========================================================================
   TESTIMONIOS — carrusel 3D de reseñas (prefijo testi-)
   Sección oscura. Los colores de fondo de cada card vienen de la data real
   (inline en el HTML). Los tonos de esta sección oscura (#080815 y los halos)
   NO existen en tokens.css: se declaran como variables locales del bloque.
   ========================================================================== */
.testi{
  /* Colores propios de esta sección oscura (no son tokens globales) */
  --testi-bg:#080815;
  --testi-card-w:300px;
  --testi-card-h:420px;

  position:relative;
  background:var(--testi-bg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:48px 0 0;
}

/* ---- Halos de fondo -------------------------------------------------------- */
.testi-halo{position:absolute;inset:0;pointer-events:none;z-index:0}
.testi-halo--left{
  background:radial-gradient(ellipse 80% 40% at 50% 10%, rgba(var(--sx-blue-rgb),.18) 0%, transparent 70%);
}
.testi-halo--right{
  background:radial-gradient(ellipse 55% 65% at 78% 55%, rgba(111,46,255,.12) 0%, transparent 70%);
}

/* ---- Columna izquierda ----------------------------------------------------- */
.testi-left{
  position:relative;
  z-index:10;
  width:100%;
  flex-shrink:0;
  padding:0 24px 36px;
}
.testi-title{
  font-family:var(--sx-font-title);
  font-weight:700;
  color:var(--sx-white);
  line-height:.9;
  letter-spacing:-.03em;
  font-size:clamp(3.2rem, 14vw, 5rem);
  margin:0 0 16px;
}
.testi-lead{
  font-family:var(--sx-font-title);
  font-weight:300;
  color:var(--sx-white);
  line-height:1.4;
  font-size:17px;
  max-width:340px;
  margin:0 0 24px;
}

/* ---- Widget de rating ------------------------------------------------------ */
.testi-rating{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:12px 20px 12px 12px;
}
.testi-rating__logo{
  width:48px;height:48px;
  flex-shrink:0;
  border-radius:12px;
  overflow:hidden;
  background:var(--sx-white);
  display:flex;align-items:center;justify-content:center;
}
.testi-rating__logo img{width:36px;height:36px;object-fit:contain}
.testi-rating__divider{width:1px;height:32px;background:rgba(255,255,255,.12)}
.testi-rating__meta{display:flex;flex-direction:column}
.testi-rating__score{
  font-family:var(--sx-font-title);
  font-weight:700;
  font-size:18px;
  color:var(--sx-white);
  line-height:1.2;
  margin:0;
  display:inline-flex;align-items:center;gap:5px;
}
.testi-rating__score .testi-star{width:15px;height:15px;color:var(--sx-white)}
.testi-rating__count{
  font-family:var(--sx-font-title);
  font-weight:300;
  font-size:12px;
  color:#fff;
  margin:0;
}

/* ---- Columna derecha · pista 3D -------------------------------------------- */
.testi-right{width:100%;padding-bottom:40px}
.testi-track{
  position:relative;
  width:100%;
  height:var(--testi-card-h);
  overflow:visible;
  cursor:grab;
  touch-action:pan-y;            /* permite scroll vertical; el drag horizontal lo maneja el JS */
  transform-style:preserve-3d;
  user-select:none;
  -webkit-user-select:none;
}
.testi-track--grabbing{cursor:grabbing}

/* ---- Card (posición 3D + caja de color en un solo elemento) ---------------- */
.testi-card{
  position:absolute;
  top:50%;
  left:0;
  margin-top:calc(var(--testi-card-h) / -2);
  width:var(--testi-card-w);
  height:var(--testi-card-h);
  padding:30px 26px;
  border-radius:var(--sx-r-card);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform-origin:center 85%;   /* pivote cerca del borde inferior → “se cae hacia adelante” */
  pointer-events:none;
  user-select:none;
  will-change:transform,opacity;
  color:var(--sx-white);
}
.testi-stars{
  display:flex;
  gap:3px;
  margin-bottom:22px;
  color:rgba(255,255,255,.85);   /* fill de las estrellas via currentColor */
}
.testi-star{display:block;width:14px;height:14px}
.testi-quote{
  font-family:var(--sx-font-title);
  font-weight:300;
  font-size:19px;
  line-height:1.5;
  margin:0;
  color:var(--sx-white);
}
.testi-card__footer{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:16px;
}
.testi-name{
  font-family:var(--sx-font-title);
  font-weight:600;
  font-size:14px;
  margin:0 0 2px;
  color:var(--sx-white);
}
.testi-role{
  font-family:var(--sx-font-title);
  font-weight:300;
  font-size:12px;
  margin:0;
  color:#fff;
}

/* Cards claras (fondo cian) → texto oscuro */
.testi-card--dark{color:#080815}
.testi-card--dark .testi-stars{color:rgba(8,8,21,.75)}
.testi-card--dark .testi-quote,
.testi-card--dark .testi-name{color:#080815}
/* Sobre el cian de la tarjeta, medio negro al 50% da 3.45:1: ahi va de donde
   sale la resena, que es lo que la hace creible. Al 72% son 5.1:1. */
.testi-card--dark .testi-role{color:rgba(8,8,21,.72)}
.testi-card--dark .testi-card__footer{border-top-color:rgba(8,8,21,.12)}

/* ---- Tablet (≥768px) ------------------------------------------------------- */
@media (min-width:768px){
  .testi{padding:60px 0 0}
  .testi-left{padding:0 40px 40px}
  .testi-title{font-size:clamp(4rem, 8vw, 6rem);margin:0 0 24px}
  .testi-lead{font-size:19px}
}

/* ---- Desktop (≥1280px) → layout en dos columnas, altura fija --------------- */
@media (min-width:1280px){
  .testi{
    flex-direction:row;
    align-items:center;
    height:820px;
    padding:0;
  }
  .testi-halo--left{
    background:radial-gradient(ellipse 38% 60% at 12% 50%, rgba(var(--sx-blue-rgb),.18) 0%, transparent 70%);
  }
  /* Sin techo, el riel pasaba de 860px a 1280 a 3020px a 3440 y la columna
     izquierda quedaba pegada al borde del viewport mientras el resto de la home
     arranca en el contenedor de 1240. Ahora la seccion se centra como todo lo
     demas y el sobrante se reparte a los dos lados. */
  .testi{max-width:1920px;margin:0 auto;width:100%}
  .testi-left{width:420px;padding:0 0 0 60px}
  .testi-title{font-size:clamp(4.8rem, 7vw, 100px)}
  .testi-lead{font-size:22px}
  .testi-right{flex:1 1 auto;min-width:0;padding-bottom:0}
}

/* ===== promo ===== */
/* ==========================================================================
   PROMO — carrusel de banners premium (enlazan a promocionsecurex.pe)
   Fondos navy generados con glow (assets/promo-bg-*.jpg), estilo #73.
   Prefijo: promo-
   ========================================================================== */
.promo{ padding:clamp(28px,5vw,56px) 0; background:var(--sx-white); }
.promo-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }

.promo-carousel{ position:relative; overflow:hidden; border-radius:26px; box-shadow:0 18px 46px rgba(10,22,40,.28); }
.promo-track{ display:flex; transition:transform .6s cubic-bezier(.16,1,.3,1); }

/* Slide = enlace completo */
.promo-slide{
  flex:0 0 100%;
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(196px,23vw,248px);
  padding:clamp(30px,4vw,52px);
  text-decoration:none;
  background-color:#0A1628;
}
/* La imagen de fondo va en un pseudo-elemento propio (no en el background del
   slide) para que el paneo lento se haga con transform —que resuelve el
   compositor— en vez de animar background-position, que obligaba a resamplear
   el JPEG entero en cada frame. La ruta de cada fondo entra por variable. */
.promo-slide::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--promo-bg);
  background-repeat:no-repeat;
  background-position:var(--promo-bg-pos, center right);
  background-size:cover;
  transform:scale(1.06);           /* margen para panear sin descubrir bordes */
}
/* Fondos generados + slow pan (animación sutil). Los slides --cyan/--violet se
   retiraron del carrusel (el de promos lo reemplazó el de sorteos), así que sus
   JPEG salieron del repo; si vuelve un slide con foto, declara aquí su --promo-bg. */
.promo-slide::after{   /* velo oscuro a la izquierda para legibilidad del texto */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,17,33,.9) 0%, rgba(8,17,33,.55) 38%, rgba(8,17,33,0) 66%);
}
.promo-slide.is-live::before{ animation:promo-pan 22s ease-in-out infinite alternate; }
@keyframes promo-pan{
  0%  { transform:scale(1.06) translateX(1.6%);  }
  100%{ transform:scale(1.06) translateX(-1.6%); }
}

.promo-inner{ position:relative; z-index:2; max-width:60%; }

/* ── Slide de SORTEOS ──────────────────────────────────────────────────────
   Replica la línea gráfica de promocionsecurex.pe/sorteos: navy profundo con
   glows azul/morado y el acento cian de marca. Los glows son gradientes (no
   imagen): cero peso extra y sin repaint, a diferencia de los slides con JPEG. */
.promo-slide--sorteo{
  background-color:#070D24;
  --promo-bg:url("../imagenes/inicio/promo-bg-sorteo.webp");
}
/* La escena de premios entra COMPLETA (contain, pegada a la derecha) en vez de
   recortarse con cover: el banner es mucho más ancho que la imagen y con cover
   la TV y la laptop quedaban cortadas. El navy del slide continúa la foto. */
.promo-slide--sorteo::before{
  background-size:contain;
  background-position:right center;
  transform:none;                  /* sin paneo: la escena ya está encuadrada */
}
/* Velo oscuro en la izquierda: la escena de premios vive a la derecha y el copy
   necesita fondo parejo para leerse. Se corta antes del arte para no apagarlo. */
.promo-slide--sorteo::after{
  background:linear-gradient(90deg, rgba(7,13,36,.95) 0%, rgba(7,13,36,.88) 30%, rgba(7,13,36,.45) 52%, rgba(7,13,36,0) 70%);
}
.promo-inner--sorteo{ max-width:64%; }
/* Reusa el badge "en vivo" canónico de base.css (mismo punto y keyframe); solo
   cambia el color del texto, que allá está pensado para fondo claro. */
.promo-badge--live{ gap:9px; padding-left:9px; }
.promo-badge--live .sx-vivo{ color:#fff; }
.promo-ig{ flex-shrink:0; display:block; border-radius:5px; }
.promo-title--sorteo{ font-size:clamp(23px,3.1vw,40px); margin-bottom:12px; }
.promo-sorteo-sub{
  font-family:var(--sx-font-body); font-weight:400;
  font-size:clamp(13px,1.35vw,15px); line-height:1.5;
  color:rgba(255,255,255,.72); margin:0 0 clamp(16px,2vw,22px); max-width:46ch;
}
/* Botón con el gradiente azul→morado de la landing de sorteos. Va anidado bajo
   el slide para ganarle por especificidad a .promo-btn (blanco), que se declara
   más abajo en este mismo archivo. */
.promo-slide--sorteo .promo-btn--sorteo{
  background:linear-gradient(100deg,#2F6BFF,#7B3FE4); color:#fff;
  box-shadow:0 8px 26px rgba(93,63,228,.45);
}
.promo-slide--sorteo:hover .promo-btn--sorteo{ box-shadow:0 12px 32px rgba(93,63,228,.6); }
/* El arte lo pone la foto de fondo (premios + confeti), no un elemento suelto. */

/* Badge pill translúcido con punto */
.promo-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px; margin-bottom:16px; border-radius:var(--sx-r-pill);
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-family:var(--sx-font-body); font-weight:700;
  font-size:12px; text-transform:uppercase; letter-spacing:.07em;
}
.promo-dot2{ width:8px; height:8px; border-radius:50%; background:#35DEC4; box-shadow:0 0 0 4px rgba(53,222,196,.22); flex-shrink:0; }
.promo-dot2--pink{ background:#FF5FD1; box-shadow:0 0 0 4px rgba(255,95,209,.22); }

.promo-eyebrow{
  font-family:var(--sx-font-body); font-weight:600;
  font-size:clamp(14px,1.5vw,17px); color:#fff; margin:0 0 6px;
}
.promo-eyebrow--pink{ color:#FBC2EC; }
.promo-eyebrow--biz{ color:#7FD3FF; font-weight:700; letter-spacing:.02em; }

.promo-title{
  font-family:var(--sx-font-title); font-weight:800;
  font-size:clamp(26px,3.6vw,46px); line-height:1.04; letter-spacing:-.015em;
  color:#fff; margin:0 0 clamp(18px,2.4vw,26px);
}
.promo-grad{ background:linear-gradient(100deg,var(--sx-cyan),#1077FD); -webkit-background-clip:text; background-clip:text; color:transparent; }
.promo-grad--pink{ background:linear-gradient(100deg,var(--sx-cyan) 0%,#B06BFF 45%,#FF5FD1 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.promo-grad--gold{ background:linear-gradient(100deg,#FFB347 0%,#FF6B35 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.promo-grad--sky{ background:linear-gradient(var(--sx-cyan),var(--sx-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Botón blanco (primario sobre fondo oscuro) */
.promo-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px clamp(22px,2.4vw,28px); border-radius:var(--sx-r-pill);
  background:#fff; color:#0A1628; white-space:nowrap;
  font-family:var(--sx-font-body); font-weight:700; font-size:clamp(15px,1.5vw,17px);
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:transform .2s var(--sx-ease), box-shadow .2s var(--sx-ease);
}
.promo-btn svg{ transition:transform .2s var(--sx-ease); }
.promo-slide:hover .promo-btn{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(var(--sx-cyan-rgb),.32); }
.promo-slide:hover .promo-btn svg{ transform:translateX(3px); }
.promo-slide:active .promo-btn{ transform:translateY(0) scale(.98); }

/* Puntos indicadores */
.promo-dots{ display:flex; justify-content:center; gap:16px; margin-top:16px; }
.promo-dot{
  width:9px; height:9px; padding:0; border:0; cursor:pointer;
  position:relative;
  border-radius:var(--sx-r-pill); background:var(--sx-gris-0);
  transition:width .25s var(--sx-ease), background .25s var(--sx-ease);
}
/* Área táctil sin cambiar el tamaño visible del punto. El alto llega a 44px
   (arriba se queda dentro del margen de 16px hacia el carrusel; abajo hacia el
   espacio libre) y el ancho a 25px = 9 + 8 + 8, por encima del mínimo de 24px
   de WCAG 2.2 (SC 2.5.8). Los 8px por lado llenan justo la mitad del gap de
   16px, así que las áreas se tocan pero nunca se solapan. */
.promo-dot::before{ content:""; position:absolute; inset:-15px -8px -20px; }
.promo-dot.is-active{ width:28px; background:var(--sx-blue); }
.promo-dots:empty{ display:none; }

/* ── Slide de descarga de app ─────────────────────────────────────────────
   Fondo premium generado (navy → glow cyan). Texto + QR a la izquierda,
   teléfono con la interfaz real del app a la derecha. */
/* Fondo con ondas de seda azul→cian (generado): con textura y premium, pero
   sin la estética "espacial". La izquierda queda oscura para el texto. */
.promo-slide--app{
  --promo-bg:url("../imagenes/inicio/promo-bg-app.webp");
  --promo-bg-pos:center;
  overflow:hidden;
  /* Banner más compacto (menos alto) */
  min-height:0;
  padding-top:28px; padding-bottom:28px;
}
/* Velo AZUL ROYAL (no navy) a la izquierda: refuerza el contraste del texto
   blanco manteniendo el tono azul vibrante (nada de navy oscuro). */
.promo-slide--app::after{
  background:linear-gradient(90deg, rgba(1,40,145,.86) 0%, rgba(1,46,155,.66) 46%, rgba(1,52,168,.28) 62%, rgba(1,58,178,0) 76%);
}
.promo-inner--app{ max-width:58%; }
/* Texto blanco pleno + sombra sutil para legibilidad sobre el azul */
.promo-title--app{ text-shadow:0 2px 10px rgba(0,18,70,.3); }
.promo-slide--app .promo-app-sub{ color:#fff; text-shadow:0 1px 4px rgba(0,18,70,.35); }
.promo-slide--app .promo-qr-txt span{ color:rgba(255,255,255,.88); }
/* Título del slide de app: más compacto para que entre en una línea y el banner
   no crezca de alto. */
.promo-title--app{ font-size:clamp(24px,2.9vw,38px); margin:0; }
.promo-app-sub{
  font-family:var(--sx-font-body); font-weight:400;
  font-size:clamp(14px,1.35vw,15px); line-height:1.45;
  color:rgba(255,255,255,.82); margin:8px 0 0; max-width:34ch;
}

/* Marcas donde se canjean las Seculukas (llena el espacio y muestra el valor real).
   Sin rótulo: el subtítulo ya dice "canjéalos en tus marcas favoritas". */
.promo-brands{ margin-top:20px; }
.promo-brands-row{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.promo-brand{
  width:50px; height:50px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.promo-brand img{ width:50px; height:50px; border-radius:50%; display:block; box-shadow:0 5px 14px rgba(0,0,0,.28); }
.promo-brands-more{
  font-family:var(--sx-font-body); font-weight:600; font-size:14px;
  color:rgba(255,255,255,.85); margin-left:4px;
}

/* Bloque QR (desktop) */
.promo-qr{ display:flex; align-items:center; gap:15px; margin-top:16px; }
.promo-qr img{
  width:110px; height:110px; flex-shrink:0;
  background:#fff; padding:8px; border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.34);
}
.promo-qr-txt{ display:flex; flex-direction:column; gap:2px; }
.promo-qr-txt strong{ font-family:var(--sx-font-body); font-weight:700; font-size:15px; color:#fff; }
.promo-qr-txt span{ font-family:var(--sx-font-body); font-weight:400; font-size:13px; color:rgba(255,255,255,.68); }

/* Botón de descarga (solo mobile) */
.promo-dl-btn{ display:none; margin-top:18px; text-decoration:none; }

/* Teléfono con la interfaz del app — proporción real de celular. El screenshot
   ya trae su propio status bar, así que NO ponemos notch falso. El teléfono
   asoma desde arriba a la derecha; el banner (overflow:hidden) recorta la base. */
.promo-phone{
  position:absolute; z-index:2;
  top:18px; right:clamp(30px,6.5vw,104px);
  width:clamp(190px,17vw,222px);
}
/* Glow cian detrás → hace que el iPhone resalte */
.promo-phone::before{
  content:""; position:absolute; inset:-15% -16%; z-index:-1;
  background:radial-gradient(circle at 50% 42%, rgba(var(--sx-cyan-rgb),.46), rgba(var(--sx-cyan-rgb),0) 60%);
  filter:blur(16px);
}
/* Rim de titanio: borde metálico brillante del iPhone 15 Pro (brillos en los
   cantos, oscuro al centro de cada lado). */
.promo-phone-frame{
  position:relative;
  padding:3px;
  border-radius:34px 34px 0 0;
  background:linear-gradient(125deg,
    #c2c5cd 0%, #6b6e76 6%, #303237 12%, #101114 26%,
    #0a0b0d 50%, #101114 74%, #303237 88%, #7e8189 94%, #c8cbd3 100%);
  box-shadow:0 50px 84px rgba(0,0,0,.5);
}
/* Bisel negro interno + pantalla */
.promo-phone-screen{
  position:relative;
  padding:5px 5px 0;
  border-radius:31px 31px 0 0;
  background:#050506;
  overflow:hidden;
}
.promo-phone-img{
  display:block; width:100%; height:auto;
  border-radius:26px 26px 0 0; background:#fff;
}
/* Dynamic Island (isla del iPhone), en el espacio libre del status bar */
.promo-phone-island{
  position:absolute; z-index:4;
  top:16px; left:50%; transform:translateX(-50%);
  width:31%; height:19px; border-radius:11px;
  background:#000; box-shadow:0 0 0 1px rgba(20,20,22,.9);
}
/* Reflejo de vidrio diagonal */
.promo-phone-screen::after{
  content:""; position:absolute; inset:5px 5px 0; z-index:3;
  border-radius:26px 26px 0 0;
  background:linear-gradient(120deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 26%, rgba(255,255,255,0) 48%);
  pointer-events:none;
}
/* Botones laterales (izquierda: acción + volumen · derecha: encendido) */
.pbtn{ position:absolute; z-index:0; background:linear-gradient(90deg,#33353b,#1a1b1f); }
.pbtn-a { left:-2px; top:22%; width:3px; height:5%;  border-radius:2px 0 0 2px; }
.pbtn-vu{ left:-2px; top:31%; width:3px; height:8%;  border-radius:2px 0 0 2px; }
.pbtn-vd{ left:-2px; top:41%; width:3px; height:8%;  border-radius:2px 0 0 2px; }
.pbtn-pw{ right:-2px; top:33%; width:3px; height:11%; border-radius:0 2px 2px 0;
          background:linear-gradient(270deg,#33353b,#1a1b1f); }

/* ── Slide Securex For Business (empresas) ──────────────────────────────── */
.promo-slide--biz{
  --promo-bg:url("../imagenes/inicio/promo-bg-biz.webp");
  --promo-bg-pos:center;
  overflow:hidden;
  min-height:0;
  padding-top:30px; padding-bottom:30px;
}
.promo-inner--biz{ max-width:60%; }
.promo-biz-logo{ height:38px; width:auto; display:block; margin-bottom:16px; }
.promo-biz-btn{ margin-top:20px; text-decoration:none; }
/* Sello ISO 37301 a la derecha (diferenciador único de S4B) */
.promo-biz-art{
  position:absolute; z-index:1;
  right:clamp(28px,6vw,116px); top:50%; transform:translateY(-50%);
  pointer-events:none;
}
.iso-seal{
  position:relative;
  width:clamp(148px,16vw,192px); height:clamp(148px,16vw,192px); border-radius:50%;
  background:conic-gradient(from 210deg, #9FE4FF, #1077FD, #004CAE, var(--sx-cyan), #1077FD, #9FE4FF);
  box-shadow:0 22px 55px rgba(var(--sx-blue-rgb),.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:1px;
}
.iso-seal::after{
  content:""; position:absolute; inset:7px; border-radius:50%;
  background:radial-gradient(circle at 50% 34%, #0e2145, #060f22 78%);
  border:1.5px solid rgba(var(--sx-cyan-rgb),.5);
  z-index:0;
}
.iso-seal-top, .iso-seal-main, .iso-seal-num, .iso-seal-bot{ position:relative; z-index:1; }
.iso-seal-top{ font-family:var(--sx-font-body); font-size:clamp(8px,.75vw,10px); font-weight:700; letter-spacing:.18em; color:#7FD3FF; }
.iso-seal-main{ font-family:var(--sx-font-title); font-size:clamp(30px,3.4vw,40px); font-weight:800; color:#fff; line-height:1; letter-spacing:.02em; }
.iso-seal-num{ font-family:var(--sx-font-body); font-size:clamp(12px,1.3vw,15px); font-weight:700; color:var(--sx-cyan); letter-spacing:.04em; }
.iso-seal-bot{ font-family:var(--sx-font-body); font-size:clamp(8px,.75vw,10px); font-weight:700; letter-spacing:.14em; color:#7FD3FF; margin-top:2px; }

/* ── Modal de contacto empresas (dos ejecutivos por WhatsApp) ───────────── */
.bizmodal{
  position:fixed; inset:0; z-index:1300;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.bizmodal[hidden]{ display:none; }
.bizmodal-backdrop{
  position:absolute; inset:0; background:rgba(8,16,32,.66);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.bizmodal-dialog{
  position:relative; z-index:1; width:100%; max-width:420px;
  background:#fff; border-radius:24px; padding:28px 24px 24px;
  box-shadow:0 32px 80px rgba(0,0,0,.4);
  animation:bizmodal-in .3s cubic-bezier(0.165,0.84,0.44,1);
}
@keyframes bizmodal-in{ from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .bizmodal-dialog{ animation:none; } }
.bizmodal-close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%;
  background:#F3F4F6; color:#6B7280;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease;
}
.bizmodal-close:hover{ background:#E5E7EB; }
.bizmodal-title{ font-family:var(--sx-font-title); font-weight:700; font-size:22px; color:#111827; margin:0 4px 4px 0; letter-spacing:-.01em; }
.bizmodal-sub{ font-family:var(--sx-font-body); font-size:14px; color:#6B7280; margin:0 0 20px; }
.bizcard{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; margin-top:12px;
  border:1.5px solid #E8ECF1; border-radius:16px;
  text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.bizcard:hover{ border-color:#BBF7D0; box-shadow:0 8px 22px rgba(16,121,57,.12); transform:translateY(-1px); }
.bizcard-avatar{
  flex-shrink:0; width:52px; height:52px; border-radius:50%;
  background:#CCF8DE; color:#0F7839;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sx-font-title); font-weight:700; font-size:22px;
}
.bizcard-info{ flex:1; display:flex; flex-direction:column; }
.bizcard-info strong{ font-family:var(--sx-font-body); font-weight:700; font-size:17px; color:#111827; }
.bizcard-info span{ font-family:var(--sx-font-body); font-size:14px; color:var(--sx-text-muted); }
.bizcard-chevron{ color:#9CA3AF; flex-shrink:0; }

/* Responsivo */
@media (max-width:820px){
  .promo-inner{ max-width:82%; }
  .promo-inner--biz{ max-width:66%; }
  .promo-inner--sorteo{ max-width:74%; }
  .iso-seal{ width:clamp(120px,15vw,150px); height:clamp(120px,15vw,150px); }
}
@media (max-width:560px){
  .promo-slide{ min-height:0; padding:26px 22px; }
  .promo-inner{ max-width:100%; }
  .promo-slide::after{ background:linear-gradient(90deg, rgba(8,17,33,.92) 0%, rgba(8,17,33,.55) 100%); }
  /* En móvil el texto ocupa todo el ancho: la escena pasa a llenar el fondo
     (con contain quedaba diminuta a un costado) y el velo se hace parejo para
     que el copy siga leyéndose por encima. */
  .promo-slide--sorteo::before{ background-size:cover; background-position:center right; }
  .promo-slide--sorteo::after{
    background:linear-gradient(160deg, rgba(7,13,36,.92) 0%, rgba(7,13,36,.84) 55%, rgba(7,13,36,.66) 100%);
  }
  .promo-btn{ width:100%; justify-content:center; }
}

/* App slide — cambios propios en cada tamaño */
@media (max-width:920px){
  .promo-inner--app{ max-width:58%; }
  .promo-phone{ width:clamp(140px,19vw,178px); right:clamp(14px,2vw,32px); }
}
@media (max-width:720px){
  .promo-qr{ display:none; }          /* en mobile el QR no sirve: ya estás en el cel */
  .promo-dl-btn{ display:inline-flex; }
}
@media (max-width:600px){
  .promo-inner--app{ max-width:100%; }
  .promo-phone{ display:none; }
  .promo-inner--biz{ max-width:100%; }
  .promo-biz-art{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .promo-track{ transition:none; }
  .promo-slide.is-live::before{ animation:none; }
}

/* ===== how ===== */
/* ==========================================================================
   Securex Home — Sección "¿Cómo cambiar dólares en Securex?" (HowItWorks)
   Prefijo: how-  ·  Usa tokens de css/tokens.css. Colores solo por variable.
   ========================================================================== */

.how{
  position:relative;
  overflow-x:clip;               /* evita scroll horizontal por los reveals en X */
  background:var(--sx-white);

  /* Tokens locales de la sección (no existen en tokens.css) */
  --how-cyan:var(--sx-cyan);            /* segundo tono del gradiente Securex */
  /* #D97706 sobre su fondo crema daba 3.09:1, y ahi dice cuanto demora la
     transferencia interbancaria. #B45309 da 4.87:1 y sigue siendo ambar. */
  --how-amber:#B45309;           /* estado interbancaria (24 hrs) */
  --how-sub:var(--sx-text-muted);  /* texto secundario de paso (contraste AA) */
  --how-heading-sub:var(--sx-text-muted);     /* subtítulo del encabezado */
  --how-line-track:#F0F0F0;      /* riel de la línea de tiempo */
  --how-line-grad:linear-gradient(180deg,var(--sx-blue),var(--how-cyan));
  --how-card-divider:#EEF2F7;
  --how-bank-now-bg:#F8FAFF;   --how-bank-now-bd:#E0EAFF;
  --how-bank-inter-bg:#FFFBF5; --how-bank-inter-bd:#FDE8C8;
  --how-card-shadow:0 2px 24px rgba(16,80,180,.08),0 0 0 1px rgba(var(--sx-blue-rgb),.07);
  --how-badge-shadow:0 4px 12px rgba(var(--sx-blue-rgb),.30);
}

/* Color de glow por paso (azul de marca / cian solo el paso 3) */
.how-step--1,
.how-step--2{ --how-glow:var(--sx-blue); }
.how-step--3{ --how-glow:var(--how-cyan); }

/* ── Encabezado ───────────────────────────────────────────────────────── */
.how-intro{ text-align:center; padding:60px 20px 48px; }
.how-intro h2{
  font-family:var(--sx-font-title); font-weight:700;
  line-height:1.05; letter-spacing:-.03em;
  font-size:clamp(2.4rem,4.5vw,64px);
  color:var(--sx-text); margin-bottom:20px;
}
.how-intro p{
  font-family:var(--sx-font-body); font-weight:300;
  font-size:22px; line-height:1.5;
  color:var(--how-heading-sub);
  max-width:560px; margin:0 auto;
}

/* ── Línea de tiempo + pasos ──────────────────────────────────────────── */
.how-timeline{ position:relative; padding-bottom:40px; }

.how-line{ display:none; }
.how-line-fill{
  width:100%; height:0;
  background:var(--how-line-grad);
  border-radius:var(--sx-r-pill);
}

/* Un paso (móvil = tarjeta apilada) */
.how-step{ position:relative; padding:0 16px 60px; }
.how-grid{
  max-width:640px; margin:0 auto;
  background:var(--sx-white);
  border-radius:24px;
  box-shadow:var(--how-card-shadow);
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:"head" "media" "copy";
}

.how-dot{ display:none; }
.how-glow{ display:none; }
.how-numbg{ display:none; }

/* Header de la tarjeta (móvil): número + título */
.how-head{
  grid-area:head;
  display:flex; align-items:center; gap:14px;
  padding:24px 24px 16px;
  border-bottom:1px solid var(--how-card-divider);
}
.how-badge{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:var(--sx-grad-securex);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--how-badge-shadow);
  font-family:var(--sx-font-title); font-weight:800; font-size:16px; color:var(--sx-white);
}
.how-title-step{
  font-family:var(--sx-font-title); font-weight:700;
  font-size:26px; color:var(--sx-text);
  line-height:1; letter-spacing:-.02em; margin:0;
}

/* Ilustración (ícono) con glow */
.how-media{
  grid-area:media;
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:28px 0 20px;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,
            color-mix(in srgb,var(--how-glow) 7%,transparent) 0%,transparent 70%);
}
.how-ill{ position:relative; z-index:1; animation:how-float 5.5s ease-in-out infinite; }
.how-step--1 .how-ill{ animation-delay:0s; }
.how-step--2 .how-ill{ animation-delay:.7s; }
.how-step--3 .how-ill{ animation-delay:1.4s; }

@keyframes how-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* Texto */
.how-copy{ grid-area:copy; padding:0 24px 28px; }
.how-desc{
  font-family:var(--sx-font-body); font-weight:400;
  font-size:17px; line-height:1.65; color:var(--sx-text); margin-bottom:8px;
}
.how-sub{
  font-family:var(--sx-font-body); font-weight:300;
  font-size:15px; line-height:1.5; color:var(--how-sub);
}

/* ── Bancos / billeteras (paso 3) ─────────────────────────────────────── */
.how-banks{ margin-top:28px; display:flex; flex-direction:column; gap:12px; }
.how-bankrow{
  display:flex; align-items:center; gap:12px;
  border-radius:14px; padding:12px 16px; border:1.5px solid transparent;
}
.how-bankrow--now{   background:var(--how-bank-now-bg);   border-color:var(--how-bank-now-bd); }
.how-bankrow--inter{ background:var(--how-bank-inter-bg); border-color:var(--how-bank-inter-bd); }
.how-bankmeta{ min-width:130px; }
.how-banklabel{
  font-family:var(--sx-font-body); font-weight:600;
  font-size:13px; color:var(--sx-text); margin:0;
}
.how-banktime{
  display:inline-flex; align-items:center; gap:5px; margin-top:3px;
  font-family:var(--sx-font-body); font-weight:600; font-size:12px;
  color:var(--sx-blue-texto);
}
.how-banktime--amber{ color:var(--how-amber); }
.how-banktime svg{
  width:13px; height:13px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
}
.how-banklogos{ display:flex; gap:6px; }
.how-banklogos img{
  width:32px; height:32px; border-radius:50%; flex-shrink:0; display:block;
}

/* ── Reveal direccional (móvil = fade-up uniforme) ────────────────────── */
.how .sx-reveal.how-from-left,
.how .sx-reveal.how-from-right{ transform:translateY(24px); }
.how .sx-reveal.how-from-left.is-visible,
.how .sx-reveal.how-from-right.is-visible{ transform:none; }

/* Pop escalonado de los logos cuando su fila entra en viewport */
.how-bankrow .how-banklogos img{
  opacity:0; transform:scale(.55);
  transition:opacity .32s var(--sx-ease),transform .32s var(--sx-ease);
}
.how-bankrow.is-visible .how-banklogos img{ opacity:1; transform:none; }
.how-bankrow.is-visible .how-banklogos img:nth-child(1){ transition-delay:.06s; }
.how-bankrow.is-visible .how-banklogos img:nth-child(2){ transition-delay:.13s; }
.how-bankrow.is-visible .how-banklogos img:nth-child(3){ transition-delay:.20s; }
.how-bankrow.is-visible .how-banklogos img:nth-child(4){ transition-delay:.27s; }

/* ── Tablet (≥768): solo ajustes de padding, sigue en formato tarjeta ─── */
@media (min-width:768px){
  .how-intro{ padding:80px 40px 64px; }
  .how-timeline{ padding-bottom:60px; }
  .how-step{ padding-bottom:72px; }
}

/* ── Desktop (≥1280): línea de tiempo vertical + grid 2 columnas ──────── */
@media (min-width:1280px){
  .how-intro{ padding:100px 40px 80px; }
  .how-timeline{ padding-bottom:100px; }

  .how-line{
    display:block; position:absolute; left:49px; top:0; bottom:0; width:2px;
    background:var(--how-line-track);
  }

  .how-step{ max-width:1160px; margin:0 auto; padding:0 40px 100px 120px; }

  .how-grid{
    max-width:none; margin:0; background:none; border-radius:0;
    box-shadow:none; overflow:visible;
    grid-template-columns:1fr 1fr;
    gap:0 clamp(40px,6vw,100px);
    align-items:center;
  }
  .how-step--left  .how-grid{ grid-template-areas:"media head" "media copy"; }
  .how-step--right .how-grid{ grid-template-areas:"head media" "copy media"; }

  /* Punto de la línea de tiempo */
  .how-dot{
    display:block; position:absolute; left:39px; top:40px;
    width:22px; height:22px; border-radius:50%;
    background:var(--sx-white); border:3px solid var(--how-glow);
    box-shadow:0 0 0 6px color-mix(in srgb,var(--how-glow) 12%,transparent);
    z-index:2;
  }
  .how-dot::after{
    content:""; position:absolute; inset:4px; border-radius:50%;
    background:var(--how-glow);
  }

  /* Media: glow difuminado en lugar del degradado móvil */
  .how-media{ padding:0; background:none; }
  .how-glow{
    display:block; position:absolute; width:380px; height:380px; border-radius:50%;
    background:radial-gradient(circle,
              color-mix(in srgb,var(--how-glow) 16%,transparent) 0%,transparent 70%);
    filter:blur(50px);
  }

  /* Header: número gigante difuminado detrás del título */
  .how-head{
    position:relative; display:block; padding:0; border-bottom:0;
  }
  .how-badge{ display:none; }
  .how-numbg{
    display:block; position:absolute; top:-20px; left:-10px;
    font-family:var(--sx-font-title); font-weight:800;
    font-size:clamp(6rem,10vw,140px);
    color:var(--sx-blue-texto); opacity:.14; line-height:1; letter-spacing:-.04em;
    user-select:none; pointer-events:none;
  }
  .how-title-step{
    position:relative;
    font-size:clamp(2rem,3.8vw,56px);
    letter-spacing:-.03em; margin-bottom:20px;
  }

  .how-copy{ padding:0; }
  .how-desc{ font-size:clamp(1rem,1.3vw,20px); line-height:1.6; margin-bottom:12px; }
  .how-sub{ font-size:clamp(.85rem,1vw,17px); }

  /* Reveal direccional real (desliza desde el lado) */
  .how .sx-reveal.how-from-left{ transform:translateX(-48px); }
  .how .sx-reveal.how-from-right{ transform:translateX(48px); }
  .how .sx-reveal.how-from-left.is-visible,
  .how .sx-reveal.how-from-right.is-visible{ transform:none; }

  /* Punto: entra con un pequeño escalado */
  .how-dot.sx-reveal{ transform:scale(.4); }
  .how-dot.sx-reveal.is-visible{ transform:none; }
}

/* ── Accesibilidad: respeta prefers-reduced-motion ───────────────────── */
@media (prefers-reduced-motion:reduce){
  .how .sx-reveal.how-from-left,
  .how .sx-reveal.how-from-right,
  .how-dot.sx-reveal{ transform:none !important; opacity:1; }
  .how-bankrow .how-banklogos img{ opacity:1; transform:none; }
  .how-ill{ animation:none; }
}

/* ===== comparison ===== */
/* ==========================================================================
   Securex Home estática — Sección COMPARACIÓN
   Prefijo: comp-  ·  Usa los tokens de css/tokens.css (no hardcodea hex sueltos).
   Paleta local (declarada una vez): colores del componente original que no
   existen en el set global de tokens (estados verde/rojo/ámbar de los íconos,
   grises de UI tipo Tailwind y azules de sombra). Todo referenciado desde aquí.
   ========================================================================== */
.comp-section{
  /* azul de marca (= --sx-blue #1077FD) en RGB para tintes rgba() */
  --comp-blue-rgb:16,119,253;
  --comp-cyan:var(--sx-cyan);         /* parada cian del gradiente Securex */
  --comp-shadow-rgb:16,80,180; /* azul de las sombras del original */
  --comp-green:#22C55E;        /* ✓ ok        */
  --comp-red:#EF4444;          /* ✕ no        */
  --comp-amber:#F59E0B;        /* – parcial   */
  --comp-muted:var(--sx-text-muted);        /* texto secundario */
  --comp-muted-2:var(--sx-text-muted);  /* labels de columna / mobile (contraste AA) */
  --comp-ink-2:#374151;        /* strong oscuro del footer */
  --comp-line:#EEF2F7;         /* divisores principales */
  --comp-line-2:#F3F4F6;       /* divisor mobile */
  --comp-head-a:#FAFCFF;       /* cabecera/footer gradiente top */
  --comp-head-b:#F7FAFF;       /* cabecera/footer gradiente bottom + pista del acento */

  position:relative;
  overflow:hidden;
  background:var(--sx-white);
  padding:96px 0 92px;
  /* El original aplica Stratos (ST) a todo el texto de esta sección */
  font-family:var(--sx-font-title);
}

/* ── Fondos decorativos ── */
.comp-orb{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
}
.comp-orb--blue{
  top:-8%;left:-10%;width:560px;height:560px;
  background:radial-gradient(circle, rgba(var(--comp-blue-rgb),0.07) 0%, transparent 70%);
  filter:blur(64px);
  animation:comp-float-a 11s ease-in-out infinite;
}
.comp-orb--cyan{
  bottom:-12%;right:-8%;width:500px;height:500px;
  background:radial-gradient(circle, rgba(var(--sx-cyan-rgb),0.06) 0%, transparent 70%);
  filter:blur(60px);
  animation:comp-float-b 14s ease-in-out 2s infinite;
}
.comp-dotgrid{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:radial-gradient(circle, rgba(var(--comp-blue-rgb),0.12) 1px, transparent 1px);
  background-size:28px 28px;
}
@keyframes comp-float-a{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,-28px)}}
@keyframes comp-float-b{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,24px)}}

/* ── Contenedor ── */
.comp-container{
  position:relative;z-index:1;
  max-width:1060px;margin:0 auto;padding:0 24px;
}

/* ── Encabezado ── */
.comp-header{
  text-align:center;margin-bottom:56px;
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--sx-ease), transform .6s var(--sx-ease);
}
.comp-section.is-in .comp-header{opacity:1;transform:none}
.comp-title{
  font-family:var(--sx-font-title);font-weight:700;line-height:1.05;letter-spacing:-0.03em;
  font-size:clamp(2rem,4vw,48px);color:var(--sx-text);margin-bottom:16px;
}
.comp-title-grad{
  background:linear-gradient(90deg, var(--sx-blue) 0%, var(--comp-cyan) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.comp-subtitle{
  font-family:var(--sx-font-title);font-weight:300;font-size:18px;
  color:var(--comp-muted);line-height:1.65;max-width:520px;margin:0 auto;
}

/* ==========================================================================
   TABLA — desktop (≥768px)
   ========================================================================== */
.comp-table{
  display:none;
  background:var(--sx-white);
  border-radius:28px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(var(--comp-blue-rgb),0.08),
    0 4px 20px rgba(var(--comp-shadow-rgb),0.07),
    0 24px 64px rgba(var(--comp-shadow-rgb),0.09);
  opacity:0;transform:translateY(48px);
  transition:opacity .7s var(--sx-ease) .06s, transform .7s var(--sx-ease) .06s;
}
.comp-section.is-in .comp-table{opacity:1;transform:none}

/* Acento superior sobre la columna Securez (scaleX al entrar) */
.comp-accent-track{position:relative;height:3px;background:var(--comp-head-b)}
.comp-accent-bar{
  position:absolute;right:0;top:0;height:100%;
  width:calc(100% / 5.05 * 1.1);           /* ancho columna Securex = 1.1fr de 5.05fr */
  background:linear-gradient(90deg, var(--sx-blue), var(--comp-cyan));
  transform:scaleX(0);transform-origin:right;
  transition:transform .8s var(--sx-ease) .4s;
}
.comp-section.is-in .comp-accent-bar{transform:scaleX(1)}

/* Cabecera de columnas */
.comp-thead{
  display:grid;grid-template-columns:1.8fr 1fr 1.15fr 1.1fr;align-items:center;
  padding:20px 0 18px 28px;
  border-bottom:1px solid var(--comp-line);
  background:linear-gradient(180deg, var(--comp-head-a) 0%, var(--comp-head-b) 100%);
}
.comp-collabel{
  font-family:var(--sx-font-title);font-weight:600;font-size:12px;
  color:var(--comp-muted-2);text-transform:uppercase;letter-spacing:0.06em;
}

/* Badge Securex en cabecera */
.comp-badge{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  opacity:0;transform:translateY(-8px) scale(.8);transform-origin:left center;
  transition:opacity .5s var(--sx-ease) .35s,
             transform .5s cubic-bezier(0.34,1.56,0.64,1) .35s;
}
.comp-section.is-in .comp-badge{opacity:1;transform:none}
.comp-badge-pill{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;
  background:var(--sx-white);border-radius:var(--sx-r-pill);padding:8px 20px;
  box-shadow:0 2px 14px rgba(var(--comp-blue-rgb),0.16), 0 0 0 1.5px rgba(var(--comp-blue-rgb),0.14);
}
.comp-logo{display:block}
.comp-shimmer{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(var(--comp-blue-rgb),0.08) 50%, transparent 70%);
  transform:translateX(-120%);
  animation:comp-shimmer 6.2s ease-in-out infinite;
}
@keyframes comp-shimmer{
  0%{transform:translateX(-120%)}
  35%{transform:translateX(220%)}
  100%{transform:translateX(220%)}
}
.comp-badge-note{
  font-family:var(--sx-font-title);font-weight:600;font-size:11px;
  color:var(--sx-blue-texto);letter-spacing:0.03em;padding-left:12px;
}

/* Filas */
.comp-row{
  position:relative;
  display:grid;grid-template-columns:1.8fr 1fr 1.15fr 1.1fr;align-items:center;
  padding-left:28px;
  border-bottom:1px solid var(--comp-line);
  opacity:0;transform:translateX(-28px);
  transition:opacity .55s var(--sx-ease) calc(var(--i)*0.07s + 0.1s),
             transform .55s var(--sx-ease) calc(var(--i)*0.07s + 0.1s),
             background .2s ease;
}
.comp-row:last-child{border-bottom:none}
.comp-section.is-in .comp-row{opacity:1;transform:none}
.comp-row:hover{background:rgba(var(--comp-blue-rgb),0.018)}

/* Acento izquierdo en hover */
.comp-accent-left{
  position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:999px;
  background:linear-gradient(180deg, var(--sx-blue), var(--comp-cyan));
  opacity:0;transform:scaleY(.3);
  transition:opacity .16s ease, transform .16s ease;
}
.comp-row:hover .comp-accent-left{opacity:1;transform:scaleY(1)}

/* Celdas */
.comp-cell{display:flex;align-items:center}
.comp-cell--factor{padding:18px 0}
.comp-cell--factor span{
  font-family:var(--sx-font-title);font-size:15px;font-weight:500;color:var(--sx-text);
}
.comp-cell--comp{gap:7px;padding:18px 0}
.comp-txt{font-family:var(--sx-font-title);font-size:14px;font-weight:400;color:var(--comp-muted)}

/* Columna Securex — destacada */
.comp-cell--securex{
  align-self:stretch;padding:18px 20px;
  border-left:1px solid rgba(var(--comp-blue-rgb),0.10);
  background:rgba(var(--comp-blue-rgb),0.075);
  opacity:0;transform:translateX(16px);
  transition:opacity .5s var(--sx-ease) calc(var(--i)*0.07s + 0.28s),
             transform .5s var(--sx-ease) calc(var(--i)*0.07s + 0.28s),
             background .2s ease;
}
.comp-section.is-in .comp-cell--securex{opacity:1;transform:none}
.comp-row:first-child .comp-cell--securex{border-radius:0 12px 0 0}
.comp-row:last-child  .comp-cell--securex{border-radius:0 0 12px 0}
.comp-row:hover .comp-cell--securex{background:rgba(var(--comp-blue-rgb),0.13)}
.comp-securex-inner{
  display:flex;align-items:center;gap:7px;
  transition:transform .18s ease-out;
}
.comp-row:hover .comp-securex-inner{transform:translateX(3px)}
.comp-txt-sx{font-family:var(--sx-font-title);font-size:14px;font-weight:600;color:var(--sx-blue-texto)}

/* Footer de la tabla */
.comp-tfoot{
  text-align:center;padding:16px 28px 20px;
  border-top:1px solid var(--comp-line);
  background:linear-gradient(180deg, var(--comp-head-a) 0%, var(--comp-head-b) 100%);
  opacity:0;transition:opacity .5s ease .5s;
}
.comp-section.is-in .comp-tfoot{opacity:1}
.comp-tfoot p{font-family:var(--sx-font-title);font-weight:400;font-size:14px;color:var(--comp-muted)}
.comp-strong-blue{font-weight:700;color:var(--sx-blue-texto)}
.comp-strong-dark{font-weight:600;color:var(--comp-ink-2)}

/* ==========================================================================
   ÍCONOS (SVG inline · estados)
   ========================================================================== */
.comp-ico{flex-shrink:0}
/* Check — verde con círculo tenue y trazo dibujado */
.comp-ico--check .comp-ico-c{fill:var(--comp-green);fill-opacity:.12;transform-box:fill-box;transform-origin:center}
.comp-ico--check .comp-ico-p{fill:none;stroke:var(--comp-green);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* X — círculo rojo lleno, aspa blanca */
.comp-ico--x .comp-ico-bg{fill:var(--comp-red)}
.comp-ico--x .comp-ico-mark{stroke:var(--sx-white);stroke-width:1.8;stroke-linecap:round}
/* Neutral — círculo ámbar lleno, guion blanco */
.comp-ico--n .comp-ico-bg{fill:var(--comp-amber)}
.comp-ico--n .comp-ico-mark{stroke:var(--sx-white);stroke-width:2;stroke-linecap:round}

/* Animación de entrada del check (círculo pop + trazo dibujado) */
.comp-ico--check .comp-ico-c{transform:scale(0);opacity:0}
.comp-ico--check .comp-ico-p{stroke-dasharray:14;stroke-dashoffset:14;opacity:0}
.comp-section.is-in .comp-ico--check .comp-ico-c{
  animation:comp-pop .3s var(--sx-ease) calc(var(--i,0)*0.06s + 0.2s) both;
}
.comp-section.is-in .comp-ico--check .comp-ico-p{
  animation:comp-draw .38s ease-out calc(var(--i,0)*0.06s + 0.32s) both;
}
@keyframes comp-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes comp-draw{from{stroke-dashoffset:14;opacity:1}to{stroke-dashoffset:0;opacity:1}}

/* ==========================================================================
   MOBILE (<768px) — una card por criterio
   ========================================================================== */
.comp-mobile{display:block}
.comp-mcard{
  background:var(--sx-white);border-radius:18px;overflow:hidden;margin-bottom:10px;
  box-shadow:0 2px 16px rgba(var(--comp-shadow-rgb),0.07), 0 0 0 1px rgba(var(--comp-blue-rgb),0.06);
  opacity:0;transform:translateY(44px) scale(.97);
  transition:opacity .55s var(--sx-ease) calc(var(--i)*0.08s),
             transform .55s var(--sx-ease) calc(var(--i)*0.08s);
}
.comp-section.is-in .comp-mcard{opacity:1;transform:none}
.comp-mcard-head{padding:14px 16px 12px;border-bottom:1px solid var(--comp-line)}
.comp-mcard-head p{font-family:var(--sx-font-title);font-weight:600;font-size:14px;color:var(--sx-text);margin:0}
.comp-mcard-body{padding-bottom:4px}
.comp-mrow{display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.comp-mrow--bordered{border-top:1px solid var(--comp-line-2)}
.comp-mrow-label{font-family:var(--sx-font-title);font-size:12px;font-weight:500;color:var(--comp-muted-2)}
.comp-mrow-val{display:flex;align-items:center;gap:6px}
.comp-mrow-val .comp-txt{font-size:13px}
.comp-mrow--securex{
  padding:12px 16px;
  background:linear-gradient(90deg, rgba(var(--comp-blue-rgb),0.06) 0%, rgba(var(--sx-cyan-rgb),0.04) 100%);
  border-top:1px solid rgba(var(--comp-blue-rgb),0.10);
}
.comp-mrow-label-sx{
  font-family:var(--sx-font-title);font-size:12px;font-weight:700;color:var(--sx-blue-texto);letter-spacing:0.02em;
}
.comp-mrow--securex .comp-txt-sx{font-size:13px;font-weight:700}
.comp-mnote{
  font-family:var(--sx-font-title);font-weight:300;font-size:14px;color:var(--comp-muted-2);
  text-align:center;margin-top:16px;
  opacity:0;transform:translateY(12px);
  transition:opacity .45s ease .3s, transform .45s ease .3s;
}
.comp-section.is-in .comp-mnote{opacity:1;transform:none}

/* ── Breakpoint principal 768px: enseña tabla, oculta cards ── */
@media (min-width:768px){
  .comp-table{display:block}
  .comp-mobile{display:none}
}

/* ── Respeta prefers-reduced-motion (además del reset global de base.css) ── */
@media (prefers-reduced-motion:reduce){
  .comp-orb,.comp-shimmer{animation:none}
  .comp-header,.comp-table,.comp-row,.comp-cell--securex,
  .comp-badge,.comp-tfoot,.comp-mcard,.comp-mnote{opacity:1;transform:none}
  .comp-accent-bar{transform:scaleX(1)}
  .comp-ico--check .comp-ico-c{transform:none;opacity:1}
  .comp-ico--check .comp-ico-p{stroke-dashoffset:0;opacity:1}
}

/* ===== lupa ===== */
/* ==========================================================================
   Sección LUPA — widget promo de la extensión Securex
   Prefijo de clases: lupa-  ·  Usa tokens de css/tokens.css.
   Paleta oscura propia de esta pieza (navy/cyan/slate) no cubierta por los
   tokens de marca → se declara como variables locales --lupa-* scopeadas aquí.
   ========================================================================== */
.lupa{
  /* Paleta local (bespoke de la tarjeta oscura) */
  --lupa-page-bg:var(--sx-gris-fondo);
  --lupa-navy-1:#050A1E;
  --lupa-navy-2:#0D1B3E;
  --lupa-cyan:var(--sx-cyan);
  /* #94A3B8 sobre blanco da 2.56:1: es la URL del producto en la demo de
     Lupa, o sea el dato que dice de donde viene el precio. #64748B da 4.76:1
     y sigue siendo el gris apagado de la escala. */
  --lupa-slate-400:#64748B;
  --lupa-slate-500:#64748B;
  --lupa-apple-ink:#1D1D1F;
  --lupa-red:var(--sx-rojo);
  /* #059669 sobre blanco da 3.77:1 y es el texto que dice cuanto ahorras, o sea
     el argumento entero de Lupa. #047857 da 5.48:1 y es el mismo verde. */
  --lupa-green:#047857;

  background:var(--lupa-page-bg);
  padding:48px 20px;
}
.lupa-inner{max-width:1240px;margin:0 auto}

/* ---- Tarjeta ---- */
.lupa-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:center;
  padding:32px 24px;
  border-radius:28px;
  color:var(--sx-white);
  background:linear-gradient(135deg,var(--lupa-navy-1) 0%,var(--lupa-navy-2) 100%);
}

/* Glow decorativo */
.lupa-glow{
  position:absolute;top:-120px;right:-60px;
  width:460px;height:460px;
  background:radial-gradient(ellipse,rgba(var(--sx-cyan-rgb),.14) 0%,transparent 65%);
  filter:blur(40px);
  pointer-events:none;
}

/* ---- Columna izquierda: copy ---- */
.lupa-copy{position:relative;z-index:1}

.lupa-badge{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:18px;
  padding:5px 12px;
  border-radius:var(--sx-r-pill);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  font-family:var(--sx-font-title);
  font-size:11px;font-weight:600;letter-spacing:.06em;
}
.lupa-badge-dot{
  width:6px;height:6px;border-radius:var(--sx-r-pill);
  background:var(--lupa-cyan);
  box-shadow:0 0 0 3px rgba(var(--sx-cyan-rgb),.25);
}

.lupa-title{
  margin:0 0 14px;
  font-family:var(--sx-font-title);
  font-weight:700;
  font-size:clamp(1.8rem,8vw,2.4rem);
  line-height:1.08;letter-spacing:-.03em;
  color:var(--sx-white);
}
.lupa-title-grad{
  background:linear-gradient(90deg,var(--lupa-cyan) 0%,var(--sx-blue) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.lupa-lede{
  max-width:480px;
  margin:0 0 24px;
  font-family:var(--sx-font-title);
  font-weight:300;font-size:15px;line-height:1.6;
  color:rgba(255,255,255,.72);
}

/* ---- Botones (bespoke de la pieza: Stratos, sentence case) ---- */
.lupa-actions{display:flex;gap:10px;flex-wrap:wrap}
.lupa-btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:var(--sx-r-pill);
  font-family:var(--sx-font-title);font-size:14px;
  text-decoration:none;white-space:nowrap;
  transition:transform .2s ease,background-color .2s ease,box-shadow .3s var(--sx-ease);
}
.lupa-btn--primary{
  padding:12px 20px;font-weight:700;
  background:var(--sx-white);color:var(--lupa-navy-1);
}
.lupa-btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.lupa-btn--ghost{
  padding:11px 20px;font-weight:500;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:var(--sx-white);
}
.lupa-btn--ghost:hover{background:rgba(255,255,255,.12)}
.lupa-btn:active{transform:scale(.97)}

/* ---- Columna derecha: preview blanco ---- */
.lupa-preview{
  position:relative;z-index:1;
  padding:22px 22px 18px;
  border-radius:16px;
  background:var(--sx-white);
  box-shadow:0 24px 48px -12px rgba(0,0,0,.4);
  transition:transform .3s var(--sx-ease),box-shadow .3s var(--sx-ease);
}
.lupa-preview:hover{transform:translateY(-3px);box-shadow:0 30px 56px -12px rgba(0,0,0,.46)}

.lupa-preview-site{
  margin-bottom:10px;
  font-family:var(--sx-font-title);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lupa-slate-400);
}
.lupa-preview-price{
  display:flex;align-items:baseline;gap:6px;
  margin-bottom:14px;
}
.lupa-preview-desde{
  font-family:var(--sx-font-title);font-size:13px;color:var(--lupa-slate-500);
}
.lupa-preview-usd{
  font-family:var(--sx-font-title);
  font-size:26px;font-weight:700;letter-spacing:-.01em;
  color:var(--lupa-apple-ink);
  font-variant-numeric:tabular-nums;
}

/* Badge de Lupa dentro del preview */
.lupa-detect{
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:10px;
  background:var(--sx-white);
  border:1.5px solid rgba(var(--sx-blue-rgb),.3);
  box-shadow:0 4px 16px rgba(var(--sx-blue-rgb),.18);
}
.lupa-detect-ico{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;
  background:linear-gradient(135deg,var(--sx-blue),var(--lupa-cyan));
  color:var(--sx-white);
}
.lupa-detect-body{flex:1;min-width:0}
.lupa-detect-label{
  display:block;
  font-family:var(--sx-font-title);
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sx-blue-texto);
}
.lupa-detect-amount{
  display:flex;align-items:baseline;gap:6px;
  margin-top:2px;
}
.lupa-detect-soles{
  font-family:var(--sx-font-title);
  font-size:16px;font-weight:700;color:var(--sx-text);
  font-variant-numeric:tabular-nums;
}
.lupa-detect-oculto{
  font-family:var(--sx-font-title);
  font-size:11px;font-weight:700;color:var(--lupa-red);
}

/* Fila de ahorro — resaltado "Securex gana" */
.lupa-save{
  display:flex;align-items:center;gap:8px;
  font-family:var(--sx-font-title);
  font-size:12px;font-weight:600;
  color:var(--lupa-green);
}

/* ==========================================================================
   Desktop / tablet (2 columnas)
   ========================================================================== */
@media (min-width:768px){
  .lupa{padding:clamp(64px,7vw,96px) clamp(40px,5vw,80px)}
  .lupa-card{
    grid-template-columns:1.15fr 1fr;
    gap:48px;
    padding:48px 56px;
  }
  .lupa-title{font-size:clamp(2rem,3.6vw,40px)}
  .lupa-lede{font-size:17px}
}

/* ===== promopopup ===== */
/* ==========================================================================
   Popup de publicidad (promo de inicio)
   Modal centrado sobre fondo oscurecido. La imagen es la promo que administra
   el equipo en CloudFront; el popup solo la muestra y deja cerrarla.
   ========================================================================== */

.promopop {
  position: fixed;
  inset: 0;
  z-index: 1200;                 /* por encima de la navbar y el CTA flotante */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.promopop[hidden] { display: none; }

/* Fondo oscurecido — al hacer clic, cierra */
.promopop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 32, .66);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Contenedor de la promo.
   650px es el ancho que usa hoy el popup de inicio en producción
   (.bmodal-content-container). Se respeta para que la promo se vea del mismo
   tamaño que la que ya conocen los usuarios. */
.promopop-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 650px;
  animation: promopop-in .34s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes promopop-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.promopop-link { display: block; }

.promopop-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

/* Botón de cerrar — el mismo de producción: aro fino cyan, sin fondo ni sombra.
   Va dentro de la tarjeta, en la esquina superior derecha. */
.promopop-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sx-cyan-medio);
  cursor: pointer;
  transition: transform .15s ease, opacity .2s ease;
}
/* Área táctil ≥44px sin cambiar el tamaño visible del ícono */
.promopop-close::before {
  content: "";
  position: absolute;
  inset: -3px;
}
.promopop-close:hover { transform: scale(1.08); }
.promopop-close:active { opacity: .75; }

@media (max-width: 480px) {
  .promopop { padding: 16px; }
  /* En móvil el ícono se achica un poco para no tapar la promo */
  .promopop-close { top: 8px; right: 8px; width: 34px; height: 34px; }
  .promopop-close svg { width: 34px; height: 34px; }
}

/* Respetar reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .promopop-dialog { animation: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Paso 01 · Cotiza — cotizador vivo en HTML/CSS
   ──────────────────────────────────────────────────────────────────────────
   Reemplaza el SVG inline de 28 KB que traia colores fuera de paleta y los
   numeros "1000/3500" dibujados. Aca la pantalla no se PARECE al cotizador:
   son los mismos elementos (pildora VIVO, toggle compra/venta, dos campos con
   su disco, boton de invertir cuadrado al borde, CTA) y se animan solos.
   Todo con tokens de §2 de la marca. Sin texto: los rotulos serian numeros
   deformes, y el copy ya vive al lado en el HTML de la seccion.
   ══════════════════════════════════════════════════════════════════════════ */
/* Las tres escenas miden lo que median los <svg> que reemplazaron. */
.how-ill--cotiza, .how-ill--transfiere, .how-ill--recibe{ width:min(58vw,260px); }

.cotiza-esc{ position:relative; width:100%; aspect-ratio:26/25; }

/* ── El telefono ── */
.cotiza-fono{
  position:absolute; left:0; top:4%; width:56%; height:92%;
  background:var(--sx-white); border:2px solid var(--sx-blue);
  border-radius:22px; box-shadow:0 4px 24px rgba(15,23,41,.06);
}
.cotiza-notch{
  position:absolute; left:50%; top:5%; transform:translateX(-50%);
  width:34%; height:5%; border-radius:999px; border:1.5px solid var(--sx-blue);
}
/* Pildora VIVO: el punto late igual que en el cotizador real */
.cotiza-vivo{
  position:absolute; left:12%; top:14%; width:30%; height:6%;
  border-radius:999px; background:var(--sx-blue-light);
  display:flex; align-items:center; justify-content:flex-start; padding-left:6%;
}
.cotiza-vivo i{
  width:5px; height:5px; border-radius:50%; background:#E85252;
  animation:cotiza-latido 1.6s ease-in-out infinite;
}
/* Toggle compra/venta: sobresale del telefono, es lo que ella toca */
.cotiza-tabs{
  position:absolute; left:8%; top:24%; width:118%; height:10%;
  border-radius:999px; border:2px solid var(--sx-blue);
  background:var(--sx-white); overflow:hidden;
}
.cotiza-tabs-fill{
  position:absolute; inset:0 auto 0 0; width:50%;
  background:var(--sx-blue); border-radius:999px;
  animation:cotiza-toggle 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
/* Los dos campos */
.cotiza-campo{
  position:absolute; left:8%; width:84%; height:15%;
  border-radius:12px; background:var(--sx-blue-light);
  display:flex; align-items:center; justify-content:space-between; padding:0 8%;
}
.cotiza-campo--envias { top:41%; }
.cotiza-campo--recibes{ top:60%; }
.cotiza-barra{
  height:6px; border-radius:999px; background:var(--sx-blue);
  animation:cotiza-monto 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
.cotiza-campo--recibes .cotiza-barra{ animation-delay:.18s; }
.cotiza-disco{ width:22%; aspect-ratio:1; border-radius:50%; }
.cotiza-disco--usd{ background:var(--sx-blue-mid); }
.cotiza-disco--pen{ background:var(--sx-blue); }
/* Boton de invertir: cuadrado-redondeado pegado al borde derecho, como el real */
.cotiza-swap{
  position:absolute; right:-7%; top:53%; width:20%; aspect-ratio:1;
  border-radius:12px; background:var(--sx-blue); color:var(--sx-white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(var(--sx-blue-rgb),.35);
  animation:cotiza-swap 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
.cotiza-swap svg{ width:58%; height:58%; }
.cotiza-cta{
  position:absolute; left:8%; top:80%; width:84%; height:11%;
  border-radius:999px; background:var(--sx-blue);
}
/* ── Ella ── */
.cotiza-persona{
  position:absolute; right:-4%; bottom:0; width:44%; height:auto;
  z-index:2; pointer-events:none;
}

@keyframes cotiza-latido{ 0%,100%{opacity:1} 50%{opacity:.25} }
/* El toggle salta de Compra a Venta y vuelve */
@keyframes cotiza-toggle{
  0%,38%   { transform:translateX(0); }
  50%,88%  { transform:translateX(100%); }
  100%     { transform:translateX(0); }
}
/* El boton gira medio giro justo cuando el toggle cambia */
@keyframes cotiza-swap{
  0%,38%   { transform:rotate(0deg); }
  50%,88%  { transform:rotate(180deg); }
  100%     { transform:rotate(360deg); }
}
/* Los montos cambian de largo: se lee como que recalcula */
@keyframes cotiza-monto{
  0%,34%   { width:34%; }
  50%,84%  { width:52%; }
  100%     { width:34%; }
}

@media (prefers-reduced-motion:reduce){
  .cotiza-vivo i, .cotiza-tabs-fill, .cotiza-swap, .cotiza-barra{ animation:none; }
  .cotiza-barra{ width:42%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Paso 02 · Transfiere — la pantalla de transferir, en HTML/CSS
   ──────────────────────────────────────────────────────────────────────────
   Reemplaza un SVG inline de 27 KB. Mismo telefono que el paso 01 a proposito:
   los tres pasos son la misma app en tres momentos, no tres dibujos sueltos.
   Lo que pasa en el loop: parpadea el boton de copiar la cuenta, entra el
   voucher desde abajo y la zona se confirma con el check.
   ══════════════════════════════════════════════════════════════════════════ */
.transf-esc{ position:relative; width:100%; aspect-ratio:26/25; }

.transf-fono{
  position:absolute; left:0; top:4%; width:56%; height:92%;
  background:var(--sx-white); border:2px solid var(--sx-blue);
  border-radius:22px; box-shadow:0 4px 24px rgba(15,23,41,.06);
}
.transf-notch{
  position:absolute; left:50%; top:5%; transform:translateX(-50%);
  width:34%; height:5%; border-radius:999px; border:1.5px solid var(--sx-blue);
}
/* Chip del numero de orden */
.transf-chip{
  position:absolute; left:12%; top:14%; width:38%; height:6%;
  border-radius:999px; background:var(--sx-blue-light);
}
/* El monto a transferir, lo mas grande de la pantalla */
.transf-monto{
  position:absolute; left:12%; top:24%; width:52%; height:9%;
  border-radius:8px; background:var(--sx-blue);
}
/* Cuenta destino + copiar */
.transf-cuenta{
  position:absolute; left:8%; top:38%; width:84%; height:13%;
  border-radius:12px; background:var(--sx-blue-light);
  display:flex; align-items:center; justify-content:space-between; padding:0 7%;
}
.transf-barra{ width:44%; height:6px; border-radius:999px; background:var(--sx-blue); }
.transf-copiar{
  width:20%; aspect-ratio:1; border-radius:8px;
  background:var(--sx-blue); color:var(--sx-white);
  display:flex; align-items:center; justify-content:center;
  animation:transf-copiar 7s ease-in-out infinite;
}
.transf-copiar svg{ width:58%; height:58%; }
/* Zona del voucher: recortada, para que el comprobante entre desde abajo */
.transf-zona{
  position:absolute; left:8%; top:56%; width:84%; height:20%;
  border-radius:12px; border:2px dashed var(--sx-blue-mid); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  animation:transf-zona 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
.transf-voucher{
  width:46%; height:62%; border-radius:6px; background:var(--sx-blue-mid);
  animation:transf-voucher 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
/* El check se dibuja encima cuando el voucher ya entro */
.transf-check{
  position:absolute; width:26%; height:26%; color:var(--sx-blue-texto);
  stroke-dasharray:30; stroke-dashoffset:30;
  animation:transf-check 7s ease-out infinite;
}
.transf-cta{
  position:absolute; left:8%; top:81%; width:84%; height:10%;
  border-radius:999px; background:var(--sx-blue);
}
.transf-persona{
  position:absolute; right:-2%; bottom:0; width:40%; height:auto;
  z-index:2; pointer-events:none;
}

@keyframes transf-copiar{
  0%,8%    { transform:scale(1);    box-shadow:0 0 0 0 rgba(var(--sx-blue-rgb),.45); }
  14%      { transform:scale(1.12); box-shadow:0 0 0 7px rgba(var(--sx-blue-rgb),0); }
  22%,100% { transform:scale(1);    box-shadow:0 0 0 0 rgba(var(--sx-blue-rgb),0); }
}
/* El voucher entra desde abajo y se queda */
@keyframes transf-voucher{
  0%,24%   { transform:translateY(140%); opacity:0; }
  46%,88%  { transform:translateY(0);    opacity:1; }
  100%     { transform:translateY(140%); opacity:0; }
}
/* La zona pasa de punteada a confirmada */
@keyframes transf-zona{
  /* el celeste arranca en alpha 0, no en `transparent`: transparent es
     rgba(0,0,0,0) y la interpolacion pasa por gris sucio */
  0%,44%   { border-color:var(--sx-blue-mid); background:rgba(223,237,255,0); }
  56%,88%  { border-color:var(--sx-blue);     background:rgba(223,237,255,1); }
  100%     { border-color:var(--sx-blue-mid); background:rgba(223,237,255,0); }
}
@keyframes transf-check{
  0%,52%   { stroke-dashoffset:30; opacity:0; }
  58%      { opacity:1; }
  72%,88%  { stroke-dashoffset:0;  opacity:1; }
  100%     { stroke-dashoffset:30; opacity:0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Paso 03 · Recibe — la pantalla de orden realizada
   ──────────────────────────────────────────────────────────────────────────
   Reemplaza un SVG inline de 305 KB, el archivo mas pesado que tenia la home.
   El check se dibuja, el monto crece y aparecen los seculukas. La moneda es el
   SVG oficial de marca; no se redibuja nunca.
   ══════════════════════════════════════════════════════════════════════════ */
.recibe-esc{ position:relative; width:100%; aspect-ratio:26/25; }

.recibe-fono{
  position:absolute; left:0; top:4%; width:56%; height:92%;
  background:var(--sx-white); border:2px solid var(--sx-blue);
  border-radius:22px; box-shadow:0 4px 24px rgba(15,23,41,.06);
}
.recibe-notch{
  position:absolute; left:50%; top:5%; transform:translateX(-50%);
  width:34%; height:5%; border-radius:999px; border:1.5px solid var(--sx-blue);
}
/* Circulo de exito */
.recibe-ok{
  position:absolute; left:50%; top:14%; transform:translateX(-50%);
  width:26%; aspect-ratio:1; border-radius:50%;
  background:var(--sx-blue); color:var(--sx-white);
  display:flex; align-items:center; justify-content:center;
  animation:recibe-ok 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
.recibe-ok svg{
  width:56%; height:56%;
  stroke-dasharray:30; stroke-dashoffset:30;
  animation:recibe-check 7s ease-out infinite;
}
.recibe-titulo{
  position:absolute; left:50%; top:35%; transform:translateX(-50%);
  width:46%; height:5%; border-radius:999px; background:var(--sx-blue-mid);
}
/* El monto recibido: crece, se lee como que acaba de acreditarse */
.recibe-monto{
  position:absolute; left:50%; top:43%; transform:translateX(-50%);
  height:9%; border-radius:8px; background:var(--sx-blue);
  animation:recibe-monto 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
.recibe-cuenta{
  position:absolute; left:8%; top:57%; width:84%; height:13%;
  border-radius:12px; background:var(--sx-blue-light);
  display:flex; align-items:center; justify-content:space-between; padding:0 7%;
}
.recibe-barra{ width:46%; height:6px; border-radius:999px; background:var(--sx-blue); }
.recibe-disco{ width:20%; aspect-ratio:1; border-radius:50%; background:var(--sx-blue-mid); }
/* Fila de seculukas ganados */
.recibe-luka{
  position:absolute; left:8%; top:75%; width:84%; height:12%;
  border-radius:12px; background:var(--sx-blue-light);
  display:flex; align-items:center; gap:8%; padding:0 7%;
}
.recibe-moneda{
  width:22%; height:auto;
  animation:recibe-moneda 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
.recibe-barra--luka{ width:40%; background:var(--sx-blue-mid); }
.recibe-persona{
  position:absolute; right:-3%; bottom:0; width:42%; height:auto;
  z-index:2; pointer-events:none;
}
/* Una moneda suelta que sube al costado, el unico adorno de la escena */
/* Sube por encima de ella, no pegada al borde del telefono: a 34% se montaba
   sobre la esquina del marco y parecia un sticker. */
.recibe-vuela{
  position:absolute; right:22%; top:2%; width:13%; height:auto;
  z-index:3; pointer-events:none;
  animation:recibe-vuela 7s ease-in-out infinite;
}

@keyframes recibe-ok{
  0%,10%   { transform:translateX(-50%) scale(.4); opacity:0; }
  24%,92%  { transform:translateX(-50%) scale(1);  opacity:1; }
  100%     { transform:translateX(-50%) scale(.4); opacity:0; }
}
@keyframes recibe-check{
  0%,20%   { stroke-dashoffset:30; }
  40%,92%  { stroke-dashoffset:0; }
  100%     { stroke-dashoffset:30; }
}
@keyframes recibe-monto{
  0%,26%   { width:28%; opacity:.35; }
  46%,92%  { width:56%; opacity:1; }
  100%     { width:28%; opacity:.35; }
}
@keyframes recibe-moneda{
  0%,46%   { transform:scale(0);   opacity:0; }
  60%      { transform:scale(1.18);opacity:1; }
  68%,92%  { transform:scale(1);   opacity:1; }
  100%     { transform:scale(0);   opacity:0; }
}
@keyframes recibe-vuela{
  0%,44%   { transform:translateY(14px); opacity:0; }
  62%      { transform:translateY(-6px); opacity:1; }
  86%      { transform:translateY(-14px);opacity:1; }
  100%     { transform:translateY(-26px);opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .transf-copiar, .transf-zona, .transf-voucher, .transf-check,
  .recibe-ok, .recibe-ok svg, .recibe-monto, .recibe-moneda, .recibe-vuela{ animation:none; }
  .transf-voucher{ opacity:1; }
  .transf-check, .recibe-ok svg{ stroke-dashoffset:0; }
  .recibe-monto{ width:56%; }
  .recibe-vuela{ opacity:0; }
}

/* Las escenas crecen en desktop igual que las ilustraciones que reemplazaron. */
@media (min-width:1280px){
  .how-ill--cotiza, .how-ill--transfiere, .how-ill--recibe{ width:clamp(220px,26vw,360px); }
}