/* ==========================================================================
   Clyo — sitio de marketing (v4, posicionamiento "canal, no lealtad")
   Marca: navy #192D3C · menta #ABFCC1 · Fira Sans
   Editorial: tipografía grande, hairlines, una sola familia, acento contado.
   ========================================================================== */

@font-face { font-family: 'Fira Sans'; src: url('../fonts/FiraSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fira Sans'; src: url('../fonts/FiraSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fira Sans'; src: url('../fonts/FiraSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fira Sans'; src: url('../fonts/FiraSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --navy: #192D3C;
  --navy-dark: #121F2A;
  --navy-deep: #0C151D;
  --navy-hover: #233649;
  --mint: #ABFCC1;
  --mint-bright: #8DF5AC;
  --mint-soft: #E7FBEE;
  --mint-line: #CFF0DA;
  --mint-ink: #2F7A5B;

  --bg: #FBFCFC;
  --surface: #FFFFFF;
  --soft: #F3F6F5;
  --ink: #16262F;
  --ink-2: #58656D;
  --line: #E7ECEC;
  --line-strong: #D8DFDF;

  /* Colores de marca para los casos de uso — planos, como un pase real de wallet */
  --c-hotel: #0F5E6B;
  --c-estadio: #7E2231;
  --c-antro: #262052;
  --c-cafe: #7C4A1E;
  --c-estudio: #A62B4A;
  --accent: #2FA566;   /* verde marca para marcas tipográficas pequeñas */

  --font: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 0.75rem;
  --radius-lg: 1.15rem;
  --pill: 999px;
  --shadow-sm: 0 4px 16px rgba(22, 38, 47, 0.06);
  --shadow-md: 0 12px 34px rgba(22, 38, 47, 0.10);
  --shadow-lg: 0 30px 70px rgba(22, 38, 47, 0.22);
  --container: 71rem;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --header-h: 4.25rem;
  --section-y: clamp(4.5rem, 11vw, 8.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip (no hidden): recorta desbordes horizontales sin romper position:sticky */
  overflow-x: clip;
  /* las escenas pineadas cambian estilos al hacer scroll; sin esto, el
     scroll-anchoring de Chrome puede teletransportar el scroll al subir */
  overflow-anchor: none;
}
img { max-width: 100%; height: auto; display: block; }
h1 { letter-spacing: -0.045em; line-height: 1.04; font-weight: 700; color: inherit; text-wrap: balance; margin: 0; }
h2, h3 { letter-spacing: -0.03em; line-height: 1.08; font-weight: 600; color: inherit; text-wrap: balance; margin: 0; }
.tick { color: var(--accent); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 0.5rem 0; z-index: 200; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2.5px solid var(--mint-ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--mint); color: var(--navy); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1.4rem; border-radius: var(--radius);
  font: 600 0.95rem/1 var(--font); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn-lg { padding: 0.95rem 1.9rem; font-size: 1.05rem; }
.btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--navy-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { background: var(--soft); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-mint { background: var(--mint); color: var(--navy); }
.btn-mint:hover { background: var(--mint-bright); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(171, 252, 193, 0.25); }

.link-quiet {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: 500 0.95rem/1 var(--font); color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 0.35rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.link-quiet:hover { color: var(--ink); border-color: var(--ink); }
.link-quiet .icon { width: 0.9em; height: 0.9em; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  background: rgba(251, 252, 252, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1.5rem; }
.brand img { width: 72px; height: auto; }
.main-nav { display: flex; align-items: center; gap: 1.6rem; }
.main-nav > a {
  font: 500 0.92rem/1 var(--font); color: var(--ink-2); text-decoration: none;
  transition: color 0.15s ease;
}
.main-nav > a:hover, .main-nav > a.active { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.75rem; }
.nav-toggle { display: none; }

/* ---------- ① Hero — escena fija con actos (estilo product-scroll) ---------- */
/* La pista da recorrido de scroll; la escena queda pegada 100vh mientras tanto. */
.hero-track { height: calc(100vh + 6 * 58vh); }
.hero-sticky {
  position: sticky; top: 0;
  /* dvh sigue a la barra de Safari iOS; sin esto queda una franja blanca
     abajo cuando la barra se contrae. vh = fallback para navegadores viejos */
  height: 100vh; height: 100dvh;
  display: flex; align-items: center;
  padding-top: var(--header-h);
  background: var(--stage-bg);
  transition: background-color 0.7s ease;
  /* nada de la escena se derrama sobre la siguiente sección */
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; width: 100%; }

/* Paleta por acto: 0 = portada clara; 1–6 = industrias en fondo profundo */
.hero {
  --stage-bg: var(--bg);
  --dash: var(--ink); --dash-dim: rgba(22, 38, 47, 0.22); --stage-dim: rgba(22, 38, 47, 0.55);
}
.hero[data-stage="1"] { --stage-bg: #0B2F36; }
.hero[data-stage="2"] { --stage-bg: #2E0F17; }
.hero[data-stage="3"] { --stage-bg: #161130; }
.hero[data-stage="4"] { --stage-bg: #251708; }
.hero[data-stage="5"] { --stage-bg: #2C0F1A; }
.hero[data-stage="6"] { --stage-bg: #0D1B25; }
.hero:not([data-stage="0"]) {
  --dash: #fff; --dash-dim: rgba(255, 255, 255, 0.28); --stage-dim: rgba(255, 255, 255, 0.6);
}

/* Capas de texto: la portada y los seis actos ocupan el mismo lugar */
.hero-copy { position: relative; }
.hero-intro { transition: opacity 0.45s ease, transform 0.45s ease; }
.hero:not([data-stage="0"]) .hero-intro { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.stage-copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stage-copy.is-on { opacity: 1; transform: none; }
.stage-word { font-size: clamp(2.7rem, 6.2vw, 4.8rem); font-weight: 700; letter-spacing: -0.045em; color: #fff; }
.stage-phrase { margin-top: 1.2rem; font-size: clamp(1.3rem, 2.3vw, 1.85rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.88); }

/* Progreso de actos (rayitas) */
.stage-progress {
  position: absolute; left: 0; right: 0; bottom: clamp(1rem, 3.5vh, 2.2rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem; z-index: 5;
}
.stage-dashes { display: flex; gap: 0.45rem; }
.stage-dash {
  width: clamp(30px, 4.5vw, 52px); height: 3px; padding: 0;
  border: 0; border-radius: 2px; cursor: pointer;
  background: var(--dash-dim); transition: background 0.3s ease;
}
.stage-dash:hover { background: var(--dash); }
.stage-dash.is-active { background: var(--dash); }
.stage-name {
  font: 600 0.7rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stage-dim); transition: color 0.3s ease;
}

/* Header sobre los actos oscuros */
.site-header.on-dark { background: rgba(9, 16, 23, 0.5); }
.site-header.on-dark .brand img { filter: invert(1); }
.site-header.on-dark .main-nav > a { color: rgba(255, 255, 255, 0.75); }
.site-header.on-dark .main-nav > a:hover, .site-header.on-dark .main-nav > a.active { color: #fff; }
.site-header.on-dark .btn-ghost { color: #fff; }
.site-header.on-dark .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.site-header.on-dark .btn-primary { background: var(--mint); color: var(--navy); }
.site-header.on-dark .nav-toggle { border-color: rgba(255, 255, 255, 0.35); }
.site-header.on-dark .nav-toggle span { background: #fff; }

.eyebrow, .kicker {
  display: flex; align-items: center; gap: 0.7rem;
  font: 600 0.75rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 1.6rem;
}
.eyebrow::before, .kicker::before {
  content: ""; width: 1.75rem; height: 2px; background: var(--accent); flex: none;
}
.kicker { margin-bottom: 1.2rem; }

.hero-copy h1 { font-size: clamp(3.4rem, 8.5vw, 6rem); letter-spacing: -0.045em; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-2); max-width: 33rem; margin-top: 1.6rem; }
.lede strong { color: var(--ink); }
.hero-actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.2rem; }

/* Trust strip — reductor de fricción del free trial, junto a los CTAs */
.trust-strip { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; margin-top: 1.15rem; padding: 0; list-style: none; }
.trust-strip li { display: inline-flex; align-items: center; gap: 0.45rem; font: 500 0.92rem/1 var(--font); color: var(--ink-2); }
.trust-strip__ico { color: var(--mint-ink); stroke-width: 2.5; }
.trust-strip--center { justify-content: center; }

/* --- Escenario: tarjeta + teléfono --- */
.hero-visual { position: relative; }
.stage { position: relative; height: clamp(460px, 58vw, 600px); }

.phone {
  position: absolute; right: clamp(0px, 3vw, 30px); top: 0;
  width: clamp(250px, 30vw, 296px); aspect-ratio: 592 / 1224;
  z-index: 2;
}
/* Las seis capturas ocupan el mismo lugar; solo una está visible */
.phone-shot {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.45s ease;
}
.phone-shot.is-active { opacity: 1; }
.phone-shot img {
  width: 100%; height: 100%; object-fit: contain;
  /* La sombra sigue el contorno del PNG, no una caja rectangular */
  filter: drop-shadow(0 26px 45px rgba(10, 17, 24, 0.42));
}

/* Pase de wallet — formato vertical real de Apple Wallet, DELANTE del teléfono.
   Estructura espejo del preview del producto (WalletPassFace): header con logo
   cuadrado + nombre, campos label/valor estilo PassKit, QR abajo al centro. */
.pass-stack {
  position: absolute; left: clamp(-6px, 3vw, 34px); bottom: -14px;
  width: clamp(192px, 23vw, 234px); aspect-ratio: 1 / 1.32;
  transform: rotate(-6deg); z-index: 3;
}
.pass {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(10px) rotate(1.5deg);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.pass.is-active { opacity: 1; transform: none; }

/* Pases que son imagen real: la foto trae su propio fondo, relleno y sombra,
   así que se anulan el padding y el degradado que usan los dibujados en CSS. */
.pass-shot { padding: 0; background: none; box-shadow: none; }
.pass-shot::before { display: none; }
.pass-shot img {
  width: 100%; height: 100%; object-fit: contain; border-radius: inherit;
  filter: drop-shadow(0 22px 38px rgba(10, 17, 24, 0.34));
}

/* Luz superior sutil en la tarjeta, como el reflejo del pase físico */

/* ---------- ② Manifiesto ---------- */
/* Menta a propósito: es EL color de la marca, corta contra el acto oscuro
   del hero y contra la sección blanca que sigue. La sección se queda pegada
   y cada tramo de scroll tacha un motivo — mismo lenguaje que el hero. */
.manifesto { background: var(--mint); color: var(--navy); }
.manifesto-track { height: calc(100vh + 10 * 20vh); }
.manifesto-sticky {
  position: sticky; top: 0;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 1rem) 0 2rem;
  overflow: hidden;
}
.manifesto-inner { max-width: 56rem; width: 100%; }
/* Misma escala que el resto de las secciones */
.manifesto h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.035em; }
.manifesto .dim { color: rgba(25, 45, 60, 0.48); }

/* Versus: los motivos reales (se tachan al ritmo del scroll) contra el pase */
.versus {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start; margin-top: clamp(2.2rem, 5vw, 3.5rem);
}
.versus-label {
  font: 600 0.75rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(25, 45, 60, 0.55); margin-bottom: 1.1rem;
}
.versus-list li {
  position: relative; padding: 0.65rem 0; font-size: clamp(1rem, 1.4vw, 1.15rem);
  border-bottom: 1px solid rgba(25, 45, 60, 0.16);
  color: var(--navy); transition: color 0.45s ease;
}
.versus-list li::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px;
  background: var(--navy); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.versus-list li.is-struck { color: rgba(25, 45, 60, 0.4); }
.versus-list li.is-struck::after { transform: scaleX(1); }

/* El premio: tres hechos que responden uno a uno a los tachados */
.facts { display: grid; gap: 0.95rem; }
.fact { border-top: 2px solid var(--navy); padding-top: 0.85rem; }
.fact b {
  display: block; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.1; color: var(--navy);
}
.fact span { display: block; margin-top: 0.3rem; font-size: 0.95rem; color: rgba(25, 45, 60, 0.72); }
/* Aparecen uno por uno, después de que la lista se tacha */
.versus.is-live .fact { opacity: 0; transform: translateY(18px); }
.versus.is-live .fact.is-on {
  opacity: 1; transform: none;
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

/* ---------- ③ Cómo funciona ---------- */
.how { padding-block: var(--section-y); }
.section-head h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.035em; }
.section-head .dim { color: var(--ink-2); }
.section-sub { margin-top: 1.2rem; color: var(--ink-2); font-size: 1.05rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.step::before {
  content: ""; display: block; height: 2px; background: var(--ink);
  margin-bottom: 1.6rem; transform-origin: left;
}

/* ---- El objeto de cada paso: se ve lo que hay que hacer ---- */
.step-art {
  height: 184px; margin-bottom: 1.5rem;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: var(--soft);
  overflow: hidden; position: relative;
}

/* 1 · Escanear: QR → tap NFC → clic en el botón.
   Un solo ciclo de 9s, tres actos de 3s. Las tres escenas comparten grosor
   de trazo, paleta y el mismo destello verde al acertar, para que se lean
   como tres formas de hacer lo mismo. */
.scan-art { position: relative; }
.sc {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0;
}
.steps.is-in .sc { animation: scShow 9s ease-in-out infinite; }
.steps.is-in .sc-nfc { animation-delay: 3s; }
.steps.is-in .sc-btn { animation-delay: 6s; }
@keyframes scShow {
  0%              { opacity: 0; transform: scale(0.96); }
  4%, 30%         { opacity: 1; transform: none; }
  35%, 100%       { opacity: 0; transform: scale(1.02); }
}

/* — Escena 1: el QR bajo el visor de la cámara — */
.sc-qr svg { width: 92px; height: 92px; color: var(--ink); }
.sc-qr .viewfinder {
  position: absolute; width: 116px; height: 116px; border-radius: 12px;
  /* Solo las cuatro esquinas, como el encuadre de una cámara */
  background:
    linear-gradient(var(--ink),var(--ink)) left top, linear-gradient(var(--ink),var(--ink)) left top,
    linear-gradient(var(--ink),var(--ink)) right top, linear-gradient(var(--ink),var(--ink)) right top,
    linear-gradient(var(--ink),var(--ink)) left bottom, linear-gradient(var(--ink),var(--ink)) left bottom,
    linear-gradient(var(--ink),var(--ink)) right bottom, linear-gradient(var(--ink),var(--ink)) right bottom;
  background-repeat: no-repeat;
  background-size: 18px 2.5px, 2.5px 18px, 18px 2.5px, 2.5px 18px,
                   18px 2.5px, 2.5px 18px, 18px 2.5px, 2.5px 18px;
}
.steps.is-in .sc-qr .viewfinder { animation: vfLock 9s ease-in-out infinite; }
@keyframes vfLock {
  0%, 21%   { transform: scale(1.06); opacity: 0.45; }
  27%, 33%  { transform: scale(1);    opacity: 1; }
  40%, 100% { transform: scale(1);    opacity: 0.45; }
}
.sc-qr .scanline {
  position: absolute; width: 104px; height: 2.5px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 12px var(--accent); opacity: 0;
}
.steps.is-in .sc-qr .scanline { animation: scanSweep 9s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes scanSweep {
  0%       { transform: translateY(-52px); opacity: 0; }
  6%       { opacity: 1; }
  22%      { transform: translateY(52px);  opacity: 1; }
  26%,100% { transform: translateY(52px);  opacity: 0; }
}

/* — Escena 2: el iPhone acercándose al chip NFC —
   Composición en diagonal: el chip abajo a la izquierda, el teléfono
   entrando desde arriba a la derecha. Sin mano: así lo muestra Apple
   en sus propios anuncios de pago sin contacto. */
.sc-nfc .tag {
  position: absolute; left: 31%; bottom: 34px; width: 38px; height: 38px;
  border-radius: 10px; background: var(--ink); color: #fff;
  display: grid; place-items: center;
}
.sc-nfc .tag svg { width: 18px; height: 18px; }
.sc-nfc .waves { position: absolute; left: 31%; bottom: 34px; width: 38px; height: 38px; }
.sc-nfc .waves i {
  position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 2.5px solid var(--accent); border-radius: 50%; opacity: 0;
}
.steps.is-in .sc-nfc .waves i { animation: nfcWave 9s ease-out infinite; animation-delay: 3s; }
.steps.is-in .sc-nfc .waves i:nth-child(2) { animation-delay: 3.16s; }
.steps.is-in .sc-nfc .waves i:nth-child(3) { animation-delay: 3.32s; }
@keyframes nfcWave {
  0%, 14%   { transform: scale(0.65); opacity: 0; }
  17%       { opacity: 0.9; }
  27%, 100% { transform: scale(2.6);  opacity: 0; }
}

/* iPhone en miniatura: mismo lenguaje que el del hero — marco casi negro,
   pantalla con degradado e isla dinámica. */
.sc-nfc .tapper {
  position: absolute; left: 47%; bottom: 62px;
  width: 50px; height: 100px; border-radius: 12px;
  background: #0A1118;
  box-shadow: 0 14px 24px rgba(22, 38, 47, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.08) inset;
}
.sc-nfc .tapper::before {
  content: ""; position: absolute; inset: 3px; border-radius: 9.5px;
  background: linear-gradient(165deg, #24394B 0%, #15222E 55%, #0D161F 100%);
}
.sc-nfc .tapper::after {
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 17px; height: 5px; border-radius: 3px; background: #060A0E;
}
/* Entra en diagonal, se pasa un poco al aterrizar y se retira */
.steps.is-in .sc-nfc .tapper { animation: nfcTap 9s cubic-bezier(0.35, 0, 0.28, 1) infinite; animation-delay: 3s; }
@keyframes nfcTap {
  0%       { transform: translate(26px, -34px) rotate(-30deg); }
  16%      { transform: translate(-2px, 3px)   rotate(-19deg); }
  24%      { transform: translate(0, -2px)     rotate(-20deg); }
  33%,100% { transform: translate(22px, -28px) rotate(-28deg); }
}

/* — Escena 3: el clic en el botón del sitio — */
.sc-btn .webbtn {
  position: relative; padding: 0.7rem 1.5rem; border-radius: 9px;
  background: var(--ink); color: #fff;
  font: 600 0.9rem/1 var(--font);
}
.steps.is-in .sc-btn .webbtn { animation: btnPress 9s ease-out infinite; animation-delay: 6s; }
@keyframes btnPress {
  0%, 17%   { transform: scale(1); }
  21%       { transform: scale(0.93); }
  27%, 100% { transform: scale(1); }
}
.sc-btn .ripple {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--accent); opacity: 0;
}
.steps.is-in .sc-btn .ripple { animation: btnRipple 9s ease-out infinite; animation-delay: 6s; }
@keyframes btnRipple {
  0%, 19%   { transform: scale(0.4); opacity: 0; }
  22%       { opacity: 0.95; }
  34%, 100% { transform: scale(3.4); opacity: 0; }
}
.sc-btn .cursor {
  position: absolute; width: 17px; height: 21px;
  filter: drop-shadow(0 2px 3px rgba(22, 38, 47, 0.3));
}
.steps.is-in .sc-btn .cursor { animation: curMove 9s cubic-bezier(0.3, 0, 0.2, 1) infinite; animation-delay: 6s; }
@keyframes curMove {
  0%       { transform: translate(42px, 40px); opacity: 0; }
  8%       { opacity: 1; }
  19%      { transform: translate(10px, 11px); opacity: 1; }
  22%      { transform: translate(8px, 9px); }
  30%      { transform: translate(10px, 11px); opacity: 1; }
  38%,100% { transform: translate(26px, 30px); opacity: 0; }
}

/* 2 · Guardarse en el wallet.
   Seis tarjetas con los colores reales de los pases se turnan: cada
   ciclo entra una distinta, así no se siente el bucle. 2.6s por tarjeta,
   15.6s la vuelta completa. */
.art-wallet { position: relative; width: 128px; height: 116px; }
.aw-deck { position: absolute; inset: 0; }

.aw-card {
  position: absolute; left: 8px; right: 8px; top: 0; height: 68px;
  border-radius: 8px; padding: 9px 10px;
  background: var(--c);
  box-shadow: 0 8px 16px rgba(22, 38, 47, 0.24);
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0;
}
/* Brillo superior, como el reflejo del plástico */
.aw-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 42%);
}
.aw-logo { width: 15px; height: 15px; border-radius: 4px; background: rgba(255,255,255,0.6); }
.aw-line { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.42); }
.aw-line--corta { width: 52%; }
/* La menta lleva tinta oscura: sobre fondo claro el blanco no se ve */
.aw-card--oscura .aw-logo { background: rgba(25, 45, 60, 0.7); }
.aw-card--oscura .aw-line { background: rgba(25, 45, 60, 0.5); }

/* Cae desde arriba, se asienta, y se hunde dentro del wallet */
.steps.is-in .aw-card {
  animation: awDrop 15.6s cubic-bezier(0.35, 0, 0.25, 1) infinite;
  animation-delay: calc(var(--i) * 2.6s);
}
@keyframes awDrop {
  0%      { transform: translateY(-26px) rotate(-5deg) scale(0.94); opacity: 0; }
  3%      { opacity: 1; }
  7%      { transform: translateY(3px)  rotate(1deg)  scale(1); }
  9%      { transform: translateY(0)    rotate(0deg)  scale(1); }
  12%     { transform: translateY(0)    rotate(0deg)  scale(1); opacity: 1; }
  16%     { transform: translateY(30px) rotate(0deg)  scale(0.97); opacity: 1; }
  17%,100%{ transform: translateY(34px) rotate(0deg)  scale(0.96); opacity: 0; }
}

/* El wallet va al frente: la tarjeta se mete por detrás */
.aw-slot {
  position: absolute; inset: auto 0 0; height: 52px; z-index: 2;
  border-radius: 9px 9px 12px 12px;
  background: var(--navy);
  box-shadow: 0 10px 20px rgba(22, 38, 47, 0.26);
}
/* La ranura por donde entra */
.aw-slot::before {
  content: ""; position: absolute; inset: 8px 14px auto; height: 3.5px;
  border-radius: 2px; background: rgba(255, 255, 255, 0.3);
}
/* Un pulso al recibir cada tarjeta */
.steps.is-in .aw-slot::before {
  animation: awGlow 2.6s ease-out infinite;
  animation-delay: 0.42s;
}
@keyframes awGlow {
  0%, 55%   { background: rgba(255, 255, 255, 0.3); }
  62%       { background: var(--mint); box-shadow: 0 0 9px var(--mint); }
  85%, 100% { background: rgba(255, 255, 255, 0.3); }
}

/* 3 · Háblales. Dos actos de 5s: primero el aviso en la pantalla
   bloqueada, luego alguien que camina, entra al rango del local y lo
   recibe ahí mismo. El segundo acto es el que explica la geocerca. */
.geo-art { position: relative; }
.geo-art .sc { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.steps.is-in .geo-art .sc { animation: geoShow 10s ease-in-out infinite; }
.steps.is-in .geo-art .sc-geo { animation-delay: 5s; }
@keyframes geoShow {
  0%        { opacity: 0; transform: scale(0.97); }
  5%, 44%   { opacity: 1; transform: none; }
  49%, 100% { opacity: 0; transform: scale(1.02); }
}

/* — Acto A: el aviso en la pantalla bloqueada — */
.art-notif {
  position: relative; width: 128px; height: 108px;
  border-radius: 12px; padding: 13px 10px;
  background: linear-gradient(165deg, #24394B 0%, #15222E 60%, #0D161F 100%);
  display: flex; flex-direction: column; align-items: center;
}
.an-time { font: 600 1.6rem/1 var(--font); color: #fff; letter-spacing: -0.02em; }
.an-card {
  margin-top: 13px; width: 100%; border-radius: 7px; padding: 8px;
  background: rgba(248, 250, 250, 0.96);
  display: flex; align-items: center; gap: 7px;
}
.steps.is-in .an-card { animation: anPop 10s cubic-bezier(0.2, 0.9, 0.3, 1.3) infinite; }
@keyframes anPop {
  0%, 8%    { transform: translateY(14px) scale(0.9); opacity: 0; }
  16%, 38%  { transform: none;                        opacity: 1; }
  46%, 100% { transform: translateY(-8px) scale(0.97); opacity: 0; }
}
.an-icon { width: 21px; height: 21px; border-radius: 6px; background: var(--c-hotel); flex: none; }
.an-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.an-line { height: 4px; border-radius: 2px; background: rgba(22, 38, 47, 0.34); }
.an-line--short { width: 58%; }

/* — Acto B: vista de mapa. El cliente entra al rango y por eso le llega —
   Se abandonó la figura caminando: a ese tamaño no había forma de indicar
   hacia dónde iba, así que se leía de espaldas. Un punto sobre una ruta
   punteada no tiene ese problema, y el pin es el símbolo que todos ya
   entienden. Paleta ink como los pasos 1 y 2; el verde entra solo en el
   instante del disparo, que es para lo que existe --accent. */
.sc-geo svg { width: 100%; height: 100%; }

.sc-geo .geo-zone { fill: rgba(22, 38, 47, 0.05); }
.sc-geo .geo-edge { stroke: rgba(22, 38, 47, 0.18); }
.sc-geo .geo-route { stroke: rgba(22, 38, 47, 0.2); }
.sc-geo .geo-pin { fill: var(--ink); }
.sc-geo .geo-pin-eye { fill: var(--soft); }
.sc-geo .dot-core { fill: var(--ink); }
.sc-geo .dot-halo { fill: rgba(22, 38, 47, 0.12); }
.sc-geo .geo-ripple { stroke: var(--accent); opacity: 0; transform-origin: 178px 76px; }
.sc-geo .geo-ping rect, .sc-geo .geo-ping path { fill: var(--navy); }
.sc-geo .geo-ping .ping-l { fill: rgba(255, 255, 255, 0.55); }
.sc-geo .geo-label {
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; fill: var(--ink-2);
}

/* Fuera del rango todo está en gris; al cruzar el borde, se enciende. */
.steps.is-in .sc-geo .geo-zone  { animation: zoneFill 10s ease-out infinite; animation-delay: 5s; }
.steps.is-in .sc-geo .geo-edge  { animation: zoneEdge 10s ease-out infinite; animation-delay: 5s; }
.steps.is-in .sc-geo .geo-label { animation: zoneLabel 10s ease-out infinite; animation-delay: 5s; }
@keyframes zoneFill {
  0%, 20%   { fill: rgba(22, 38, 47, 0.05); }
  24%, 100% { fill: rgba(47, 165, 102, 0.1); }
}
@keyframes zoneEdge {
  0%, 20%   { stroke: rgba(22, 38, 47, 0.18); stroke-width: 2; }
  24%       { stroke: var(--accent); stroke-width: 3.5; }
  31%, 100% { stroke: rgba(47, 165, 102, 0.65); stroke-width: 2; }
}
@keyframes zoneLabel {
  0%, 20%   { fill: var(--ink-2); }
  24%, 100% { fill: var(--accent); }
}

/* La onda sale del pin: el disparo viene del negocio, no del cliente. */
.steps.is-in .sc-geo .geo-ripple { animation: zoneRipple 10s ease-out infinite; animation-delay: 5s; }
@keyframes zoneRipple {
  0%, 20%   { transform: scale(0.08); opacity: 0; }
  22%       { transform: scale(0.08); opacity: 0.9; }
  31%, 100% { transform: scale(1);    opacity: 0; }
}

/* Recorrido del cliente. Cruza el borde del rango en x=157. */
.geo-dot { transform: translateX(14px); }
.steps.is-in .geo-dot { animation: dotWalk 10s linear infinite; animation-delay: 5s; }
@keyframes dotWalk {
  0%        { transform: translateX(14px);  opacity: 0; }
  6%        { transform: translateX(28px);  opacity: 1; }
  20%       { transform: translateX(145px); opacity: 1; }  /* cruza el borde */
  24%       { transform: translateX(151px); opacity: 1; }
  34%, 100% { transform: translateX(172px); opacity: 1; }  /* ya adentro: llega el aviso */
}
.steps.is-in .dot-halo { animation: dotHalo 1.9s ease-out infinite; }
@keyframes dotHalo {
  0%        { transform: scale(0.55); opacity: 0.9; }
  70%, 100% { transform: scale(1.15); opacity: 0; }
}
.dot-halo { transform-box: fill-box; transform-origin: center; }
.steps.is-in .dot-core { animation: dotCore 10s ease-out infinite; animation-delay: 5s; }
@keyframes dotCore {
  0%, 20%   { fill: var(--ink); }
  24%, 100% { fill: var(--accent); }
}

/* El aviso entra después del cruce y de la onda, nunca antes. */
.geo-ping { transform-box: fill-box; transform-origin: center bottom; opacity: 0; }
.steps.is-in .geo-ping { animation: zonePing 10s cubic-bezier(0.2, 0.9, 0.3, 1.5) infinite; animation-delay: 5s; }
@keyframes zonePing {
  0%, 27%   { transform: translateY(10px) scale(0.6); opacity: 0; }
  33%, 100% { transform: none;                        opacity: 1; }
}

/* ---- Texto del paso ---- */
.step-n {
  font: 600 0.7rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.55rem;
}
.step h3 { font-size: 1.35rem; }
.step p { margin-top: 0.65rem; color: var(--ink-2); font-size: 0.97rem; }

/* Entrada coreografiada al hacer scroll, en cascada 1 -> 2 -> 3 */
.steps.is-ready .step { opacity: 0; transform: translateY(26px); }
.steps.is-ready .step::before { transform: scaleX(0); }
.steps.is-in .step {
  opacity: 1; transform: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.steps.is-in .step::before { transform: scaleX(1); transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1); }
.steps.is-in .step:nth-child(2), .steps.is-in .step:nth-child(2)::before { transition-delay: 0.18s; }
.steps.is-in .step:nth-child(3), .steps.is-in .step:nth-child(3)::before { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .steps.is-in .qr-scan, .steps.is-in .aw-card, .steps.is-in .an-card { animation: none; }
  .qr-scan { opacity: 0; }
}

/* ---------- ③-B Las tarjetas — baraja abierta ---------- */
.deck-section { background: var(--navy-dark); color: #fff; padding-block: var(--section-y); overflow: hidden; }
.deck-inner { text-align: center; }
.deck-section .kicker { justify-content: center; color: rgba(255, 255, 255, 0.6); }
.deck-section .kicker::before { background: var(--mint); }
.deck-section h2 { color: #fff; }
.deck-section .section-sub { color: rgba(255, 255, 255, 0.66); max-width: 34rem; margin-inline: auto; }

/* Seis naipes traslapados: el del centro va derecho, encima y más grande.
   --i es el índice; --d la distancia con signo al centro (2.5 = mitad de 6). */
.deck {
  display: flex; justify-content: center; align-items: center;
  margin-top: clamp(2.8rem, 6vw, 4.5rem);
  padding-block: 2.5rem;
}
.deck-card {
  --d: calc(var(--i) - 2.5);
  flex: none; width: clamp(150px, 18.5vw, 248px); aspect-ratio: 530 / 663;
  margin-inline: clamp(-30px, -2.4vw, -16px);
  transform: rotate(calc(var(--d) * 3.4deg)) translateY(calc(abs(var(--d)) * 11px));
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.deck-card img {
  width: 100%; height: 100%; border-radius: 10px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}
/* La de "Tu marca": derecha, al frente y un pelo más grande */
.deck-card.is-hero {
  z-index: 3; width: clamp(172px, 21vw, 286px);
  transform: rotate(0deg) translateY(-18px);
}
.deck-card.is-hero img { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); }

/* Al pasar el cursor, la baraja se abre */
.deck:hover .deck-card { transform: rotate(calc(var(--d) * 4.6deg)) translateY(calc(abs(var(--d)) * 15px)); }
.deck:hover .deck-card.is-hero { transform: rotate(0deg) translateY(-20px) scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .deck-card, .deck:hover .deck-card, .deck:hover .deck-card.is-hero { transition: none; }
}

/* ---------- ④ La cuenta ---------- */
.cost { background: var(--soft); padding-block: var(--section-y); }
.cost-inner { max-width: 56rem; }
.cost-toggle { display: inline-flex; gap: clamp(1rem, 2.5vw, 1.9rem); margin-top: 1.2rem; flex-wrap: wrap; }
.cost-toggle button {
  font: 600 0.78rem/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); background: transparent; border: 0;
  border-bottom: 2px solid transparent; border-radius: 0;
  padding: 0.45rem 0.1rem; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cost-toggle button:hover { color: var(--ink); }
.cost-toggle button.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.cost-suffix {
  font: 600 0.78rem/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); padding: 0.45rem 0; align-self: center;
}

.bars { margin-top: 3rem; display: grid; gap: 1.1rem; }
.bar-row { display: grid; grid-template-columns: 6rem 1fr 7.5rem; align-items: center; gap: 1.1rem; }
.bar-label { font: 500 0.95rem/1 var(--font); color: var(--ink-2); text-align: right; }
.bar-track { display: block; height: 38px; }
.bar { display: block; height: 100%; width: 0; border-radius: 0.55rem; transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bar-sms { background: var(--ink); }
.bar-wa { background: #8B9AA4; }
.bar-clyo { background: var(--mint); box-shadow: 0 6px 18px rgba(171, 252, 193, 0.45); }
.bar-amount { font: 600 1.05rem/1 var(--font); font-variant-numeric: tabular-nums; }
.bar-row.is-clyo .bar-label { color: var(--ink); font-weight: 700; }
.bar-row.is-clyo .bar-amount { color: var(--mint-ink); font-weight: 700; }

.cost-claim { margin-top: 2.8rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; }
.cost-claim strong { border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.footnote { margin-top: 1.4rem; font-size: 0.78rem; color: var(--ink-2); max-width: 40rem; opacity: 0.85; }

/* ---------- ⑤ Precios ---------- */
.pricing { padding-block: var(--section-y); }
/* Comparador de planes — mismo diseño que la plataforma (upgrade-plan-pillar).
   Espectro Premium por nivel: gris → azul → violeta → dorado. */
.plan-tier--basic { --plan-tier: #64748b; --plan-tier-ink: #475569; }
.plan-tier--standard { --plan-tier: #2563eb; --plan-tier-ink: #1d4ed8; }
.plan-tier--premium { --plan-tier: #7c3aed; --plan-tier-ink: #6d28d9; }
.plan-tier--enterprise { --plan-tier: #c8a24b; --plan-tier-ink: #8a6d1f; }

.upgrade-plan-grid {
  display: grid;
  grid-template-columns: repeat(var(--plan-cols, 4), minmax(0, 1fr));
  gap: 1rem; align-items: stretch;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.upgrade-plan-grid--tight { gap: 0.85rem; }
.upgrade-plan-grid__cell { min-width: 0; display: flex; }

.upgrade-plan-pillar {
  --pillar-border: color-mix(in srgb, var(--mint-ink) 26%, var(--line-strong));
  position: relative; display: flex; flex-direction: column;
  width: 100%; min-height: 100%;
  padding: 1.4rem 1.35rem 1.3rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--pillar-border);
  background: var(--surface); box-shadow: var(--shadow-sm);
  text-align: left;
}

/* Plan "Más popular" — acento menta + cinta superior */
.upgrade-plan-pillar--popular {
  border-color: color-mix(in srgb, var(--mint) 70%, var(--mint-ink));
  background: color-mix(in srgb, var(--mint-soft) 55%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mint-ink) 20%, transparent), var(--shadow-md);
  overflow: hidden;
}
.upgrade-plan-pillar__ribbon {
  margin: -1.4rem -1.35rem 1rem;
  padding: 0.5rem 0.6rem; text-align: center;
  font: 800 0.66rem/1.1 var(--font); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mint-ink);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--mint) 75%, white) 0%,
    color-mix(in srgb, var(--mint-soft) 80%, white) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--mint-ink) 22%, transparent);
}
.upgrade-plan-pillar__ribbon span { margin-right: 0.15rem; }

.upgrade-plan-pillar__label {
  align-self: flex-start; width: fit-content;
  margin: 0.1rem 0 0.6rem; padding: 0.24rem 0.6rem;
  font: 700 0.68rem/1.2 var(--font); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--plan-tier-ink);
  border: 1px solid color-mix(in srgb, var(--plan-tier) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--plan-tier) 9%, var(--surface));
}
.upgrade-plan-pillar.plan-tier--enterprise .upgrade-plan-pillar__label {
  border-color: color-mix(in srgb, var(--plan-tier) 55%, transparent);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--plan-tier) 24%, var(--surface)) 0%,
    color-mix(in srgb, var(--plan-tier) 8%, var(--surface)) 100%);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--plan-tier) 22%, transparent);
}

.upgrade-plan-pillar__price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.4rem; margin-bottom: 0.35rem;
}
.upgrade-plan-pillar__amount { font: 800 2rem/1.1 var(--font); letter-spacing: -0.03em; color: var(--ink); }
.upgrade-plan-pillar__per { font: 500 1rem/1 var(--font); color: var(--ink-2); }

.upgrade-plan-pillar__hint { margin: 0 0 0.7rem; font-size: 0.8rem; line-height: 1.4; color: var(--ink-2); }

.upgrade-plan-pillar__stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 0.4rem; margin: 0.2rem 0 0.85rem;
  padding: 0.75rem 0.6rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 4%, transparent); text-align: center;
}
.upgrade-plan-pillar__stat + .upgrade-plan-pillar__stat {
  border-left: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.upgrade-plan-pillar__stat { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.upgrade-plan-pillar__stat-value { font: 800 1.35rem/1.1 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.upgrade-plan-pillar__stat-name { font: 700 0.62rem/1.25 var(--font); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }

.upgrade-plan-pillar__stack-intro { margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--ink); line-height: 1.4; }

.upgrade-plan-pillar__features {
  list-style: none; margin: 0 0 1.1rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.55rem; flex: 1 1 auto;
}
.upgrade-plan-pillar__features li {
  position: relative; padding-left: 1.7rem; font-size: 0.88rem; line-height: 1.45; color: var(--ink);
}
.upgrade-plan-pillar__features li::before {
  content: '✓'; position: absolute; left: 0; top: 0.05em;
  display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: color-mix(in srgb, var(--mint) 55%, white); color: var(--mint-ink);
  font-size: 0.72rem; font-weight: 800; line-height: 1;
}

.upgrade-plan-pillar__cta { margin-top: auto; width: 100%; justify-content: center; }

/* Enterprise — tarjeta punteada + CTA sólido, como en la plataforma */
.upgrade-plan-pillar--enterprise {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--plan-tier) 45%, var(--line-strong));
  background: color-mix(in srgb, var(--plan-tier) 4%, var(--surface));
}
.upgrade-plan-pillar__enterprise-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: auto; width: 100%;
  padding: 0.72rem 1.4rem; border-radius: var(--radius);
  font: 600 0.95rem/1 var(--font); text-decoration: none; border: 1.5px solid transparent;
  background: var(--navy); color: #fff; cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.upgrade-plan-pillar__enterprise-btn:hover { background: var(--navy-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.pricing-fine { margin-inline: auto; text-align: center; margin-top: 2.4rem; }

/* ---------- ⑥ Preguntas ---------- */
.faq { background: var(--soft); padding-block: var(--section-y); }
.faq-inner { max-width: 46rem; }
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-of-type { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font: 600 1.02rem/1.4 var(--font);
}
.faq summary::-webkit-details-marker { display: none; }
.faq-x { position: relative; width: 16px; height: 16px; flex: none; transition: transform 0.25s ease; }
.faq-x::before, .faq-x::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--ink); border-radius: 2px;
}
.faq-x::before { width: 16px; height: 2px; }
.faq-x::after { width: 2px; height: 16px; }
.faq details[open] .faq-x { transform: rotate(45deg); }
.faq details p { padding: 0 2.5rem 1.4rem 0; color: var(--ink-2); font-size: 0.97rem; }
.faq .section-head { margin-bottom: 2.2rem; }

/* ---------- ⑦ Cierre ---------- */
.closing { background: var(--navy-dark); color: #fff; padding-block: var(--section-y); text-align: center; }
.closing h2 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); letter-spacing: -0.04em; }
.closing .dim { color: var(--mint); }
.closing .btn { margin-top: 2.6rem; }
.closing-sub { margin-top: 1.2rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.55); }
.closing-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2.6rem; }
.closing-actions .btn { margin-top: 0; }
.btn-outline-light { border-color: rgba(255, 255, 255, 0.45); color: #fff; background: transparent; }
.btn-outline-light:hover { background: #fff; color: var(--navy); transform: translateY(-1px); }
.closing .trust-strip { justify-content: center; margin-top: 1.4rem; }
.closing .trust-strip li { color: rgba(255, 255, 255, 0.72); }
.closing .trust-strip__ico { color: var(--mint); }

/* ---------- Páginas de documento (soporte, legales) ---------- */
.page-doc .site-header { position: static; background: var(--surface); border-bottom: 1px solid var(--line); }
/* footer pegado al fondo aunque el contenido no llene la pantalla */
body.page-doc { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.page-doc > main { flex: 1 0 auto; }
body.page-doc > .site-footer { flex: none; margin-top: auto; }
.doc { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.doc-inner { max-width: 46rem; }
.doc-title { font-size: clamp(2.1rem, 5vw, 3.2rem); letter-spacing: -0.035em; }
.doc-updated { margin-top: 0.9rem; font-size: 0.88rem; color: var(--ink-2); }
.doc-lede { margin-top: 1.2rem; font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--ink-2); }
.doc-lede a { color: var(--mint-ink); }
.doc-list { margin-top: 0.9rem; padding-left: 1.15rem; list-style: disc; }
.doc-list li { margin-bottom: 0.55rem; color: var(--ink-2); font-size: 0.99rem; line-height: 1.62; }
.doc-list li strong { color: var(--ink); }
.doc-list a { color: var(--mint-ink); }
.doc-section { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--line-strong); }
.doc-section h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -0.025em; }
.doc-section h3 { font-size: 1.02rem; font-weight: 600; margin-top: 1.6rem; }
.doc-section p { margin-top: 0.75rem; color: var(--ink-2); font-size: 0.99rem; line-height: 1.62; }
.doc-section p strong { color: var(--ink); }
.doc-section a { color: var(--mint-ink); text-underline-offset: 3px; }
.doc-note { font-size: 0.92rem !important; }
.doc-company { font-size: 1.02rem !important; }
.doc-links { margin-top: 1.1rem; display: grid; gap: 0.55rem; }
.doc-links li { font-size: 1rem; }
.doc-links a { font-weight: 500; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.contact-card { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.25rem; }
.contact-label { font: 600 0.72rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.contact-value { margin-top: 0.6rem !important; font-size: 1.08rem !important; font-weight: 600; color: var(--ink) !important; line-height: 1.4; }
.contact-note { margin-top: 0.5rem !important; font-size: 0.88rem !important; }

@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr; }
  .upgrade-plan-grid { grid-template-columns: 1fr; max-width: 22rem; margin-inline: auto; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.6); padding-block: 2.2rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer-inner img { width: 56px; height: auto; opacity: 0.9; }
.footer-inner nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer-inner a { font-size: 0.85rem; text-decoration: none; transition: color 0.15s ease; }
.footer-inner a:hover { color: #fff; }
.footer-inner p { font-size: 0.85rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  /* Escena móvil: copy arriba, teléfono anclado al borde inferior (recortado),
     pase chico abajo-izquierda sin tapar la notificación, rayitas a la izquierda. */
  /* Ritmo de scroll en móvil: el viewport es más corto, así que en vh cada acto
     se consumía con medio deslizón. Alargamos la pista para que cada paso pida
     un gesto completo. Solo aquí — en escritorio el ritmo ya estaba bien. */
  .hero-track { height: calc(100vh + 6 * 95vh); }
  .manifesto-track { height: calc(100vh + 10 * 36vh); }

  .hero-sticky {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding-top: calc(var(--header-h) + 0.75rem); padding-bottom: 0;
    height: 100vh; height: 100dvh;
  }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; flex: 1; min-height: 0; gap: 0.5rem; }
  /* Todo el texto del hero centrado en móvil */
  .hero-intro { text-align: center; }
  .eyebrow { font-size: 0.64rem; letter-spacing: 0.08em; gap: 0.5rem; margin-bottom: 1.1rem; justify-content: center; }
  .eyebrow::before { width: 1.1rem; }
  .hero-intro h1 { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .hero-intro .lede { font-size: 0.98rem; margin-top: 1rem; margin-inline: auto; }
  /* Los dos CTAs centrados en una sola fila */
  .hero-actions { margin-top: 1.4rem; gap: 0.9rem; flex-wrap: nowrap; justify-content: center; }
  .hero-actions .btn-lg { padding: 0.85rem 1.25rem; font-size: 0.95rem; flex: none; }
  .hero-actions .link-quiet { font-size: 0.85rem; white-space: nowrap; }
  .stage-copy { justify-content: flex-start; align-items: center; text-align: center; padding-top: 1.25rem; }
  .stage-word { font-size: clamp(2.2rem, 9.5vw, 3rem); }
  .stage-phrase { font-size: clamp(1.15rem, 5vw, 1.5rem); }

  /* Móvil: palabra + teléfono + el pase recargado abajo a la izquierda.
     El pase se había quitado por ruido, pero sin él el primer golpe de vista
     no dice de qué trata el producto, y quedaba un hueco muerto bajo el
     aviso. Vuelve, en la misma composición cruzada que en escritorio. */
  .hero-visual { flex: 1; min-height: 0; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
  /* En los actos el intro desaparece y el visual sube a ocupar su espacio.
     El -13svh estaba calibrado para cuando el visual era solo el teléfono;
     con el pase el bloque crece y ese mismo salto lo pegaba a la frase
     (5px de aire arriba contra 202 abajo). Con -4svh el sobrante queda
     repartido — ~69px arriba, ~56px abajo en un 430x932 — con el aire
     cargado ligeramente arriba, que es donde se sentía apretado. */
  .hero:not([data-stage="0"]) .hero-visual { transform: translateY(-4svh); }
  /* En la portada el intro ocupa su sitio y el visual NO sube, así que el
     bloque queda esos svh más abajo y el pase se salía por el pie. Subirlo
     no es opción —quedan 16px entre los botones y el teléfono—, así que se
     descuenta el desplazamiento del alto disponible: solo en portada, un
     punto más chico. */
  .hero[data-stage="0"] .stage {
    --phone-w: clamp(140px, min(68vw, (0.96 * 100dvh - 329px) / 1.888), 320px);
  }
  /* En pantallas cortas el bloque queda limitado por el alto y no puede
     crecer más, así que el sobrante se va todo arriba (103px contra 14).
     Ahí no se gana tamaño, se gana reparto: subirlo más lo centra. */
  @media (max-height: 740px) {
    .hero:not([data-stage="0"]) .hero-visual { transform: translateY(-8svh); }
    /* La portada nunca recibe el desplazamiento; aquí son 8svh, no 4. */
    .hero[data-stage="0"] .stage {
      --phone-w: clamp(140px, min(68vw, (0.92 * 100dvh - 329px) / 1.888), 320px);
    }
  }
  .stage {
    height: 100%; min-height: 240px; max-width: none; margin: 0;
    /* Alto del teléfono = ancho x 1224/592, declarado para que el pase se
       cuelgue de la geometría del teléfono y no del alto del escenario. */
    /* El ancho se deriva del alto disponible para que el pase nunca se corte
       a media QR. Tres calibraciones, todas por la misma queja de "se ve
       mini" en un iPhone real:
       · dvh y no svh. El contenedor (.hero-sticky) ya mide 100dvh, así que
         medir con svh reservaba sitio para unas barras que casi siempre
         están colapsadas y desperdiciaba el alto real.
       · 329px y no 340 de reserva. No es una estimación: es lo que midió
         el encabezado + copy + rayitas, más ~14px de holgura.
       · 1.888 y no 2.07 de razón del bloque: el pase se achicó y subió un
         poco (ver .pass-stack), lo que deja crecer al teléfono. */
    --phone-w: clamp(150px, min(68vw, (100dvh - 329px) / 1.888), 320px);
    --phone-h: calc(var(--phone-w) * 2.0676);
  }
  .phone {
    top: 0.5rem; bottom: auto; right: auto;
    left: 50%; transform: translateX(-50%);
    width: var(--phone-w);
  }
  /* Cruza la esquina inferior izquierda del teléfono, colgado de su geometría.
     El -92% (y no -100%) recorta el volado hacia la izquierda: con el
     teléfono ya centrado, el volado completo sacaba el pase de la pantalla
     en los anchos grandes.
     El 0.47 lo deja justo por debajo del aviso —taparlo sería tapar lo que el
     hero enseña— y el ancho sale de --phone-w, así que el bloque encoge junto
     en pantallas cortas en vez de salirse. Achicar el pase y subirlo baja la
     altura total del bloque, que es lo que deja crecer al teléfono. */
  .pass-stack {
    display: block; right: auto; bottom: auto;
    left: 50%; top: calc(0.5rem + var(--phone-h) * 0.47);
    width: calc(var(--phone-w) * 0.64);
    transform: translateX(-92%) rotate(-7deg);
    z-index: 3;
  }
  .pass-shot img { filter: drop-shadow(0 14px 26px rgba(10, 17, 24, 0.4)); }

  /* Rayitas centradas; blend difference = contrastan sobre cualquier fondo */
  .stage-progress { bottom: 0.85rem; }
  .stage-dashes { mix-blend-mode: difference; }
  .stage-dash { width: 26px; background: rgba(255, 255, 255, 0.32); }
  .stage-dash.is-active { background: #fff; }
  .stage-name { display: none; }

  /* Versus compacto para que quepa en un viewport */
  .manifesto-sticky { min-height: 100vh; min-height: 100dvh; padding: calc(var(--header-h) + 0.5rem) 0 1.25rem; }
  .manifesto h2 { font-size: clamp(1.65rem, 7.2vw, 2.2rem); }
  .versus { margin-top: 1.4rem; gap: 1.4rem; }
  .versus-label { margin-bottom: 0.7rem; }
  .versus-list li { padding: 0.48rem 0; font-size: 0.97rem; }
  .facts { gap: 0.75rem; }
  .fact { padding-top: 0.65rem; }
  .steps { grid-template-columns: 1fr; gap: 2.2rem; }
  .versus { grid-template-columns: 1fr; }
  /* Móvil: se mantiene el abanico. Las tarjetas de los extremos se recortan
     contra el borde, igual que una baraja real que no cabe en la mano. */
  .deck { padding-block: 1.6rem; }
  .deck-card { width: clamp(104px, 30vw, 128px); margin-inline: -14px; }
  .deck-card.is-hero { width: clamp(122px, 35vw, 150px); }
}

@media (max-width: 960px) {
  .main-nav {
    position: fixed; inset: var(--header-h) 0 auto; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.25rem;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: all 0.2s ease;
  }
  .main-nav.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .main-nav > a { padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav-actions { margin: 1rem 0 0; flex-direction: column; align-items: stretch; }
  .nav-actions .btn { justify-content: center; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 10px;
    background: transparent; border: 1px solid var(--line-strong); border-radius: 0.7rem; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: all 0.2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero-actions { gap: 1.1rem; }
  .bar-row { grid-template-columns: 4.4rem 1fr 5.6rem; gap: 0.7rem; }
  .bar-label { font-size: 0.85rem; }
  .bar-amount { font-size: 0.92rem; }
  .bar-track { height: 32px; }
  .faq details p { padding-right: 0; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Planes: rejilla por ancho ----------
   Iba antes una regla de 2 columnas en el bloque ≤960px que, por ir después
   en el archivo, ganaba también por debajo de 640px y apretaba las tarjetas
   en el celular. Acotada aquí para que cada rango tenga una sola regla. */
@media (min-width: 641px) and (max-width: 960px) {
  .upgrade-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  /* Una columna, ancho cómodo y tarjetas que respiran */
  .upgrade-plan-grid { grid-template-columns: 1fr; max-width: 26rem; }
  .upgrade-plan-grid--tight { gap: 1rem; }

  /* "Contáctanos" no es un precio de 4 cifras: que no se desborde */
  .upgrade-plan-pillar--enterprise .upgrade-plan-pillar__amount {
    font-size: 1.5rem; font-weight: 700;
  }

  /* Las etiquetas se pegaban ("TARJETAS SUCURSALES"): más aire y separador real */
  .upgrade-plan-pillar__stats { gap: 0.3rem 1rem; padding: 0.85rem 0.9rem; }
  .upgrade-plan-pillar__stat-name { font-size: 0.6rem; letter-spacing: 0.04em; }
  .upgrade-plan-pillar__stat + .upgrade-plan-pillar__stat { padding-left: 1rem; }
}