/* ═══════════════════════════════════════════════════════════════
   SURFIA — hoja de estilos de la landing (surfia.ai)
   Móvil-primero y SOLO OSCURO (decisión de Luis, 2-sep-2026): la web se ve
   como el panel (app.surfia.ai). Los tokens son los del tema oscuro del
   panel, con sus NOMBRES (frontend/styles.css): así un nombre pegado desde
   allá nunca queda sin valor aquí (la clase de bug que dejó invisible el
   botón «Ver el chat en vivo»).
   Al cambiar este archivo, sube la ruta versionada vN en index.html, en
   en/index.html y en _redirects. La prueba epinu-channel-frontend exige que
   coincidan y que solo haya UNA ruta de styles.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  --marino: #0A1628;
  --bg: #07101E;              /* el fondo del panel en oscuro */
  --card: #0C1930;
  --card-2: #0A1526;
  --sobre-marino: #E9F1F9;    /* tinta clara sobre marino */
  --ink: var(--sobre-marino);
  --ink-2: #B4C4D8;
  --ink-3: #7C90AB;
  --line: #1A2C46;
  --line-2: #14243B;

  --brand: #38BDF8;           /* 8,19:1 sobre la tarjeta */
  --brand-deep: #0E7490;
  --ocean: #0284C7;
  --aqua: #22D3EE;
  --aqua-soft: rgba(34, 211, 238, .10);
  --brand-grad: linear-gradient(135deg, #0284C7, #22D3EE);
  --ok: #34D399;
  --wa: #1FAF5A;
  --ig: #DD2A7B;
  --ig-grad: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);

  /* Las tres corrientes del logo Flujo v2, escala oscura (la de marca). */
  --logo-1: #22D3EE;
  --logo-2: #0284C7;
  --logo-3: #0E7490;

  --r: 16px;
  --r-sm: 12px;      /* controles: botones, campos, alertas */
  --r-pill: 999px;   /* todo lo que es una etiqueta: cápsula, sin excepción */
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 30px -12px rgba(0, 0, 0, .6);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 48px -16px rgba(2, 132, 199, .35);
  --t-fast: .15s; --t-med: .3s; --ease: cubic-bezier(.2, .8, .2, 1);

  --font: "Sora", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --header-h: 56px;

  /* burbujas de WhatsApp (tema oscuro de la app real) */
  --wa-bg: #0B141A;
  --wa-head: #1F2C34;
  --wa-in: #202C33;
  --wa-out: #005C4B;
  --wa-text: #E9EDEF;
  --wa-time: #8696A0;
}
@media (min-width: 900px) { :root { --header-h: 64px; } }

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  /* clip no crea contenedor de scroll (y html sigue en visible): los
     position:sticky de la historia se pegan al viewport, no al body */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(2.25rem, 4.5vw + 1rem, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem); font-weight: 700; margin-bottom: .7em; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { color: var(--ink-2); text-wrap: pretty; }
strong { color: var(--ink); }

.container { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.container--narrow { width: min(760px, 100% - 2.5rem); }

.section { padding: clamp(3.25rem, 8vw, 6rem) 0; }
.section--tinted { background: var(--card-2); }
.section h2 { text-align: center; }
.section-sub {
  text-align: center;
  max-width: 34em;
  margin: -0.25rem auto 2rem;
  font-size: 1.05rem;
}

.accent {
  background: linear-gradient(100deg, var(--brand) 10%, var(--aqua) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-family: var(--font);
  font-size: .85rem;           /* nunca por debajo de ~13 px en el teléfono */
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 1rem;
}

/* ── Botones ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1rem;
  padding: .9rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
}
.btn:active { transform: scale(.97); }
/* En escritorio un botón partido en dos renglones se lee como un error. En
   el teléfono es al revés: un botón que no se parte empujaba la portada
   fuera de la pantalla (2-sep-2026), así que ahí el texto se parte. */
@media (min-width: 900px) { .btn { white-space: nowrap; } }

.btn--primary {
  background: linear-gradient(120deg, var(--brand-deep), var(--ocean) 55%, #0EA5E9);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .28), 0 10px 28px -8px rgba(2, 132, 199, .6);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(34, 211, 238, .45), 0 16px 36px -8px rgba(2, 132, 199, .7); }

.btn--ghost {
  background: rgba(56, 189, 248, .06);
  color: var(--brand);
  border-color: rgba(56, 189, 248, .55);
}
.btn--ghost:hover { background: rgba(56, 189, 248, .14); transform: translateY(-2px); }

/* «Ver el video»: secundario, sin competir con el CTA */
.btn--link {
  background: rgba(233, 241, 249, .06);
  color: var(--ink);
  border-color: rgba(233, 241, 249, .22);
}
.btn--link:hover { background: rgba(233, 241, 249, .12); }

.btn--lg { padding: 1rem 2rem; font-size: 1.08rem; }
.btn--sm { padding: .55rem 1.15rem; font-size: .9rem; }

.ico-wa { width: 1.25em; height: 1.25em; flex: none; }
.ico-play { width: 1.1em; height: 1.1em; flex: none; }

.micro-trust { font-size: .9rem; color: var(--ink-2); margin-top: .9rem; }

/* chips de canales (viven en el paso 1 de «Cómo funciona») */
.channels { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .4rem .85rem .4rem .6rem;
  text-decoration: none;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover { transform: translateY(-2px); border-color: var(--brand); }
.chip:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.chip svg { width: 18px; height: 18px; flex: none; }

/* ── Header ───────────────────────────────────────────────────── */
/* Fijo y transparente mientras el hero (con el video) está en pantalla;
   sólido después. Lo decide un IntersectionObserver sobre #hero en
   script.js — sin listener de scroll y sin histéresis. En el teléfono NO
   lleva desenfoque: un backdrop-filter sobre el video pegado repinta cada
   cuadro en iOS (el mismo temblor que ya se curó en las burbujas). */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.header.is-scrolled {
  background: rgba(7, 16, 30, .9);
  box-shadow: 0 1px 0 var(--line);
}
@media (min-width: 900px) {
  .header.is-scrolled { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(7, 16, 30, .78); }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
/* Flujo v2 va suelto, sin contenedor. La proporción 52:46 es la del viewBox. */
.logo__mark { width: 30px; height: 27px; }
.logo__word {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  color: var(--ink);
}
@media (min-width: 900px) {
  .logo__mark { width: 36px; height: 32px; }
  .logo__word { font-size: 1.3rem; }
}

.header__nav { display: none; gap: 1.8rem; }
.header__nav a { font-size: .95rem; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.header__nav a:hover { color: var(--brand); }
@media (min-width: 720px) { .header__nav { display: flex; } }

.header__actions { display: flex; align-items: center; gap: .45rem; }
.header__lang,
.header__login {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .8rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(233, 241, 249, .3);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.header__lang { padding: .42rem .55rem; }
.header__lang-ico { display: none; width: 16px; height: 16px; }
.header__lang:hover, .header__login:hover { background: rgba(233, 241, 249, .1); border-color: rgba(233, 241, 249, .6); }
.header__actions .btn--sm { padding: .5rem .95rem; font-size: .86rem; }
/* En el header un botón partido en dos renglones sí se lee como un error:
   aquí nunca se parten; lo que se encoge es el resto (y en 320 px se va la
   palabra del logo: queda la marca, que es inequívoca). */
.header__lang, .header__login, .header__actions .btn--sm { white-space: nowrap; }
@media (max-width: 359px) { .logo__word { display: none; } }
@media (min-width: 900px) {
  .header__lang-ico { display: block; }
  .header__lang { padding: .42rem .8rem; }
}
/* Pantallas angostas (iPhone SE): con cuatro controles no sobra aire. */
@media (max-width: 389px) {
  .header__actions { gap: .35rem; }
  .header__login { padding: .38rem .6rem; font-size: .8rem; }
  .header__actions .btn--sm { padding: .44rem .75rem; font-size: .8rem; }
  .header__lang { padding: .38rem .5rem; font-size: .8rem; }
}

/* ── Portada + historia ───────────────────────────────────────── */
/* El video queda PEGADO cubriendo la pantalla durante toda la sección. Lleva
   vh y lvh (no svh): con svh el video cambiaría de alto cada vez que Safari
   colapsa la barra, y eso es un salto. Ojo: el hero NO puede tener
   overflow:hidden — convertiría a la sección en contenedor de scroll y
   ningún sticky de dentro se pegaría al viewport. */
.hero {
  position: relative;
  color: #fff;
  overflow-anchor: none;
}
.hero__inicio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* El bloque pegado mide una pantalla y se pega dentro del envoltorio, que
   mide la sección entera: ni un píxel más. (Con el truco del margen negativo
   el fondo sobrevivía 100vh encima de la sección siguiente.) */
.hero__pegado {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}
.hero__pegado video { width: 100%; height: 100%; object-fit: cover; background: var(--bg); }
/* Velo doble: legibilidad del texto (arriba y abajo) sin apagar el video;
   el tinte océano entra por la esquina derecha. La banda inferior es la
   más densa: ahí vive el chat. */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,16,30,.62) 0%, rgba(7,16,30,.34) 30%, rgba(7,16,30,.58) 65%, rgba(7,16,30,.92) 100%),
    linear-gradient(98deg, rgba(7,16,30,.6) 0%, rgba(7,16,30,.16) 55%, rgba(2,132,199,.14) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.5rem;
  padding: calc(var(--header-h) + 1.75rem) 0 0;
}
/* Los ítems de un grid nacen con min-width:auto: un botón que no puede
   partirse ensanchaba la columna y la portada se salía de la pantalla. */
.hero__inner > * { min-width: 0; }

.hero .eyebrow { color: var(--aqua); text-shadow: 0 1px 12px rgba(7,16,30,.6); }
.hero h1 {
  color: #fff;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 24px rgba(7,16,30,.55);
}
.hero__sub {
  font-size: clamp(1.0625rem, .5vw + .9rem, 1.2rem);
  max-width: 30em;
  margin-top: 1rem;
  color: rgba(233, 241, 249, .92);
  text-shadow: 0 1px 12px rgba(7,16,30,.6);
}
.hero__sub strong { color: #fff; }
.hero__cta { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.hero .micro-trust { color: rgba(233, 241, 249, .78); }
@media (max-width: 899px) {
  .hero__cta > .btn { width: 100%; }
}

/* El escenario: subtítulo + (chat | tarjeta-panel) + puntos. Se pega bajo
   el header mientras los espaciadores .story__beat pasan por detrás. Nada
   de aquí cambia de tamaño entre beats: los subtítulos van apilados en la
   misma celda, el chat y la tarjeta también, y solo cambian opacidad y
   transform. */
.story { position: relative; }
.story__stage {
  position: sticky;
  top: calc(var(--header-h) + 8px);
  z-index: 2;
  display: grid;
  gap: .6rem;
}
.story__subs {
  display: grid;
  min-height: 3.1em;
  align-items: end;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 12px rgba(7,16,30,.7);
}
.story__sub {
  grid-area: 1 / 1;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
[data-beat="0"] .story__sub[data-sub="0"],
[data-beat="1"] .story__sub[data-sub="1"],
[data-beat="2"] .story__sub[data-sub="2"],
[data-beat="3"] .story__sub[data-sub="3"],
[data-beat="4"] .story__sub[data-sub="4"],
[data-beat="5"] .story__sub[data-sub="5"] { opacity: 1; transform: none; transition-delay: .2s; }
.story__sub[data-sub="0"] { color: rgba(233, 241, 249, .8); font-weight: 500; }

.story__view { display: grid; align-items: start; }
.story__chat,
.story__panel {
  grid-area: 1 / 1;
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.story__panel { opacity: 0; visibility: hidden; transform: translateY(12px); }
[data-beat="5"] .story__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
[data-beat="5"] .story__chat { opacity: 0; visibility: hidden; transform: translateY(-8px); }

/* la ventana de chat: opaca (sin backdrop-filter, que hace temblar iOS
   sobre el video), con la piel oscura de WhatsApp */
.story__chat {
  background: var(--wa-bg);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.hb-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .4rem;
  padding: .55rem .7rem;
  background: var(--wa-head);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 600;
  color: var(--wa-text);
}
.hb-head__ch {
  padding: .14rem .45rem;
  border-radius: var(--r-pill);
  font-size: .66rem;
  letter-spacing: .02em;
  background: #25D366;
  color: #06281A;
}
.hb-head__quien { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* la hora y el «escribiendo…» comparten la celda de la derecha: en el
   beat 1 uno reemplaza al otro sin mover nada */
.hb-head__hora, .hb-head__estado {
  grid-column: 3; grid-row: 1;
  font-size: .72rem;
  font-weight: 500;
  transition: opacity .25s var(--ease);
}
.hb-head__hora { font-family: var(--mono); color: var(--wa-time); }
.hb-head__estado { color: #25D366; opacity: 0; }
[data-beat="1"] .hb-head__hora { opacity: 0; }
[data-beat="1"] .hb-head__estado { opacity: 1; }

.story__ventana {
  position: relative;
  height: 300px;
  overflow: hidden;
  padding: .8rem .8rem 0;
  background: radial-gradient(120% 80% at 50% 100%, rgba(2, 132, 199, .08), transparent 70%);
  /* lo que se va saliendo por arriba se desvanece, como el borde de un chat */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 100%);
}
@media (max-height: 600px) { .story__ventana { height: 240px; } }
/* Todos los globos están en su sitio desde el principio (solo transparentes):
   el grupo tiene su alto real y lo único que se mueve es el GRUPO entero, con
   un translateY que deja el último visible al pie — una animación de GPU en
   vez de nueve recálculos de layout. */
.hb-group {
  position: relative;
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.hb-group > .hb { margin-bottom: .55rem; }
.hb {
  max-width: 88%;
  padding: .6rem .85rem;
  border-radius: 14px;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--wa-text);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: translateY(14px) scale(.97);
  /* SOLO opacidad y transform: lo que el navegador anima sin recalcular el
     layout. Nada de max-height/margin/padding aquí. */
  transition: opacity .45s var(--ease), transform .45s cubic-bezier(.2, .9, .3, 1.15);
}
.hb.is-visible { opacity: 1; transform: none; }
.hb p { color: inherit; }
.hb strong { color: #fff; }
.hb--in { align-self: flex-start; background: var(--wa-in); border-bottom-left-radius: 4px; }
.hb--out { align-self: flex-end; background: var(--wa-out); border-bottom-right-radius: 4px; }
.hb--seal {
  align-self: center;
  margin-top: .2rem;
  padding: .45rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(34, 211, 238, .14);
  border: 1px solid rgba(34, 211, 238, .5);
  color: #fff;
  font-family: var(--font);
  font-weight: 600;
  font-size: .9rem;
}

/* la tarjeta-panel del beat 5, calcada del Inicio real del panel */
.story__panel { display: grid; gap: .6rem; align-content: start; }
.panelito {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .85rem .9rem .95rem;
  box-shadow: var(--shadow-lift);
  color: var(--ink);
}
.panelito__top { display: flex; align-items: center; gap: .45rem; margin-bottom: .7rem; }
.panelito__logo { width: 26px; height: 23px; }
.panelito__marca { font-family: var(--font); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.03em; }
.panelito__chip {
  margin-left: auto;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 600;
  color: var(--aqua);
  background: var(--aqua-soft);
  border-radius: var(--r-pill);
  padding: .22rem .6rem;
}
.panelito__num {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(120deg, var(--ink), var(--aqua));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.panelito__sub { color: var(--ink-2); font-size: .9rem; margin: .25rem 0 .7rem; }
.panelito__kpis { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-bottom: .6rem; }
.panelito__kpis li {
  background: var(--card-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: .45rem .55rem;
  display: grid;
  gap: .05rem;
}
.panelito__kpis b { font-family: var(--font); font-size: 1.2rem; color: var(--ink); }
.panelito__kpis span { font-size: .72rem; color: var(--ink-3); }
.panelito__alerta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  color: var(--ink-2);
  background: rgba(52, 211, 153, .08);
  border: 1px solid rgba(52, 211, 153, .35);
  border-radius: var(--r-sm);
  padding: .55rem .7rem;
}
.panelito__ok { color: var(--ok); font-weight: 700; }
.story__demo { width: 100%; }

.story__dots { display: flex; gap: .4rem; justify-content: center; list-style: none; }
.story__dots li {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
[data-beat="1"] .story__dots li:nth-child(1),
[data-beat="2"] .story__dots li:nth-child(2),
[data-beat="3"] .story__dots li:nth-child(3),
[data-beat="4"] .story__dots li:nth-child(4),
[data-beat="5"] .story__dots li:nth-child(5) { background: var(--aqua); transform: scale(1.35); }

/* los espaciadores: invisibles, solo dan recorrido a la historia. El último
   mide al menos lo que el escenario (en un iPhone SE 60vh son 341 px y el
   escenario 465): si no, el escenario se despega antes de llegar al centro
   del beat 5 y la tarjeta-panel se mete bajo el header. */
.story__beat { min-height: var(--beat-alto, 60vh); }
.story__beat:last-child { min-height: max(var(--beat-alto, 60vh), 560px); }

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.15fr .85fr;
    gap: 3rem;
    align-items: start;
    padding-top: calc(var(--header-h) + 10vh);
  }
  /* en escritorio las DOS columnas quedan pegadas mientras pasan los beats */
  .hero__copy { position: sticky; top: calc(var(--header-h) + 10vh); align-self: start; }
  .story__stage { top: calc(var(--header-h) + 6vh); }
  .story__ventana { height: clamp(300px, 44vh, 440px); }
  .story__subs { font-size: 1.15rem; }
  .hero h1 { font-size: clamp(2.6rem, 3.6vw + 1rem, 4.4rem); }
}
@media (min-width: 900px) and (max-height: 820px) {
  .hero__inner { padding-top: calc(var(--header-h) + 5vh); }
  .hero__copy { top: calc(var(--header-h) + 5vh); }
  .hero h1 { font-size: clamp(2.3rem, 3vw + 1rem, 3.6rem); }
}

.wave {
  display: block;
  width: 100%;
  height: clamp(28px, 4vw, 60px);
  color: var(--card-2);
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

/* ── El promo de 78 s, a pantalla completa ────────────────────── */
.promo {
  border: 0;
  padding: 0;
  margin: 0;
  inset: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: #000;
  overscroll-behavior: contain;
}
.promo::backdrop { background: rgba(0, 0, 0, .85); }
.promo iframe { width: 100%; height: 100%; border: 0; display: block; }
.promo__cerrar {
  position: fixed;
  top: max(.75rem, env(safe-area-inset-top));
  right: .75rem;
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font: 600 1.1rem var(--font);
  cursor: pointer;
}
body.promo-abierto { overflow: hidden; }

/* ── Pasos ────────────────────────────────────────────────────── */
.steps { list-style: none; display: grid; gap: 1.4rem; margin-top: 1.8rem; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; margin-top: 2.5rem; } }
.step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: .15rem .9rem;
  align-items: start;
  text-align: left;
}
.step__num {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  color: #06283A;
  background: var(--brand-grad);
}
.step h3 { grid-column: 2; font-size: 1.1rem; margin-bottom: .2rem; }
.step p { grid-column: 2; font-size: .97rem; }
.step .channels { grid-column: 2; }

/* ── Tarjetas y carrusel (capacidades) ────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.25rem 1.2rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .7rem; font-size: 1.05rem; }
.card p { font-size: .95rem; }

/* En el teléfono, las seis tarjetas van en una pista horizontal con snap:
   la siguiente asoma por el borde (esa es la pista de que se desliza), y la
   pista sangra hasta los bordes de la pantalla. En escritorio, cuadrícula. */
.carrusel {
  display: flex;
  gap: .8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.25rem;
  padding: .25rem 1.25rem .75rem;
  margin: 1.5rem calc(50% - 50vw) 0;
  width: 100vw;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > .card { flex: 0 0 min(82%, 340px); scroll-snap-align: center; }
.carrusel__pista { text-align: center; font-size: .85rem; color: var(--ink-3); margin-top: .1rem; }
@media (min-width: 900px) {
  .carrusel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; overflow: visible; margin: 2.5rem 0 0; width: auto; padding: 0; }
  .carrusel > .card { flex: none; }
  .carrusel__pista { display: none; }
}

.mini-chat {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: var(--wa-bg);
  border-radius: var(--r-sm);
  padding: .7rem;
  margin-bottom: .9rem;
}
.mini-msg {
  max-width: 90%;
  font-size: .88rem;
  line-height: 1.4;
  padding: .45rem .65rem;
  border-radius: 10px;
  color: var(--wa-text);
}
.mini-msg--in { align-self: flex-start; background: var(--wa-in); border-top-left-radius: 3px; }
.mini-msg--out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 3px; }

/* ── El mejor vendedor (Surfia sugiere y calcula) ─────────────── */
.advisor { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .advisor { grid-template-columns: 1.05fr .95fr; gap: 4rem; } }
.section .advisor__title { text-align: left; }
@media (max-width: 899px) {
  .section .advisor__title, .advisor__copy .eyebrow, .advisor__text { text-align: center; }
  .advisor__text { margin-inline: auto; }
  .advisor__copy .btn { width: 100%; }
}
.advisor__text { max-width: 34em; margin-bottom: 1.3rem; }
.advisor__claims { list-style: none; display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.advisor__claims li { color: var(--ink-2); line-height: 1.45; font-size: .97rem; }
.advisor__k {
  display: inline-block;
  min-width: 5.4em;
  margin-right: .35rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}

.advisor-chat {
  width: min(430px, 100%);
  justify-self: center;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  background: var(--wa-bg);
}
.chat-head { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; background: var(--wa-head); }
.chat-head__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-grad);
  color: #06283A;
  font-family: var(--font);
  font-weight: 700;
}
.chat-head__meta { display: grid; line-height: 1.25; }
.chat-head__meta strong { color: var(--wa-text); font-size: .95rem; }
.chat-head__status { font-size: .78rem; color: #25D366; }
.advisor-chat__body { padding: .9rem .8rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.msg {
  max-width: 88%;
  padding: .55rem .8rem;
  border-radius: 12px;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--wa-text);
}
.msg p { color: inherit; }
.msg--in { align-self: flex-start; background: var(--wa-in); border-top-left-radius: 3px; }
.msg--out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 3px; }
/* escalonado: la conversación «cae» mensaje a mensaje al llegar (escritorio) */
.advisor-chat__body > :nth-child(2) { transition-delay: .35s; }
.advisor-chat__body > :nth-child(3) { transition-delay: .8s; }
.advisor-chat__body > :nth-child(4) { transition-delay: 1.3s; }
.advisor-chat__body > :nth-child(5) { transition-delay: 1.75s; }
.advisor-chat__body > :nth-child(6) { transition-delay: 2.2s; }

.advisor-quote { list-style: none; min-width: 230px; display: grid; gap: .3rem; padding: .2rem 0 .1rem; }
.advisor-quote li { display: flex; justify-content: space-between; gap: 1.5rem; font-size: .92rem; }
.advisor-quote li span { font-variant-numeric: tabular-nums; font-weight: 600; }
.advisor-quote__total {
  margin-top: .25rem;
  padding-top: .45rem;
  border-top: 1px dashed rgba(134, 150, 160, .55);
  font-family: var(--font);
  font-weight: 700;
}
.advisor-quote__total span { color: var(--aqua); }
.advisor-chat__seal {
  align-self: flex-end;
  margin-top: .35rem;
  padding: .45rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(34, 211, 238, .12);
  border: 1px solid rgba(34, 211, 238, .45);
  font-family: var(--font);
  font-weight: 600;
  font-size: .84rem;
  color: var(--wa-text);
}

/* ── Comparativa ──────────────────────────────────────────────── */
.compare {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.compare__row {
  display: grid;
  grid-template-columns: 1fr 64px 64px;
  align-items: center;
  padding: .7rem 1rem;
  gap: .5rem;
  min-height: 44px;
}
.compare__row + .compare__row { border-top: 1px solid var(--line-2); }
.compare__row--head {
  font-family: var(--font);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  background: var(--card-2);
}
.compare__row--head span { text-align: center; }
.compare__surfia-head { color: var(--brand); }
.compare__label { font-size: .95rem; color: var(--ink); text-align: left; }
.compare .yes, .compare .no { text-align: center; font-weight: 700; font-size: 1.05rem; }
.compare .yes { color: var(--aqua); }
.compare .no { color: var(--ink-3); }
@media (min-width: 640px) { .compare__row { grid-template-columns: 1fr 110px 110px; } }

/* ── Planes ───────────────────────────────────────────────────── */
/* Modelo v3 modular (Luis, 04-08-2026) con la promo de lanzamiento (27-08).
   En el teléfono los cuatro planes van en una pista con snap y la destacada
   se centra al entrar (script.js); desde 680px, cuadrícula. */
.plans {
  position: relative;
  display: flex;
  gap: .8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.25rem;
  padding: .9rem 1.25rem 1rem;      /* arriba: sitio para la etiqueta «Lo más pedido» */
  margin: 1.25rem calc(50% - 50vw) 0;
  width: 100vw;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.plans::-webkit-scrollbar { display: none; }
.plan {
  position: relative;
  flex: 0 0 min(84%, 340px);
  scroll-snap-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.4rem 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  text-align: left;
}
.plan--featured {
  border-color: var(--aqua);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .35), var(--shadow-lift);
}
@media (min-width: 680px) {
  .plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; overflow: visible; margin: 2.2rem 0 0; width: auto; padding: .9rem 0 0; }
  .plan { flex: none; padding: 1.8rem 1.5rem; }
}
@media (min-width: 1080px) {
  .plans { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .plan { padding: 1.7rem 1.25rem; }
  .plan--featured { transform: scale(1.03); }
}

.plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-grad);
  color: #06283A;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .9rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.plan h3 { font-size: .95rem; color: var(--brand); text-transform: uppercase; letter-spacing: .08em; }
.plan__price {
  font-family: var(--font);
  font-size: clamp(2rem, 2.6vw, 2.5rem);
  font-weight: 700;
  color: var(--ink);
  margin-top: .3rem;
  letter-spacing: -0.03em;
}
.plan__price span { font-size: 1rem; font-weight: 400; color: var(--ink-2); }
.plan__from { font-size: .9rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); margin-right: .15rem; }
.plan__promo {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aqua);
  background: var(--aqua-soft);
  border-radius: var(--r-pill);
  padding: .26rem .7rem;
  margin: .45rem 0 .7rem;
}
.plan__cap {
  font-size: .85rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}
.plan ul { list-style: none; display: grid; gap: .5rem; margin-bottom: 1.4rem; flex: 1; }
.plan li { position: relative; padding-left: 1.5rem; font-size: .93rem; color: var(--ink-2); }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--aqua); font-weight: 700; }
.plan .btn { width: 100%; }

/* promo de lanzamiento: primer mes gratis (27-08-2026). Temporal: al cerrar
   la promo se quitan .promo-banner y .plan__promo del HTML de las dos
   páginas; estos estilos pueden quedarse. */
.promo-banner {
  margin: 0 auto 1.2rem;
  max-width: 780px;
  background: linear-gradient(125deg, var(--card-2), var(--card) 65%);
  border: 1px solid rgba(34, 211, 238, .5);
  border-radius: var(--r);
  padding: 1.1rem 1.1rem 1.2rem;
  text-align: center;
}
.promo-banner__badge,
.crm-banner__badge {
  display: inline-block;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aqua);
  background: var(--aqua-soft);
  border-radius: var(--r-pill);
  padding: .28rem .8rem;
  margin-bottom: .7rem;
}
.promo-banner__title { font-family: var(--font); font-size: clamp(1.15rem, 2.6vw, 1.5rem); margin: 0 0 .5rem; }
.promo-banner__title strong { color: var(--brand); }
.promo-banner__text { font-size: .95rem; max-width: 560px; margin: 0 auto 1rem; }
@media (max-width: 899px) { .promo-banner .btn { width: 100%; } }

/* el CRM que viene, con su agente adentro */
.crm-banner {
  margin: 1.5rem auto 0;
  max-width: 780px;
  background: linear-gradient(125deg, var(--card-2), var(--card) 65%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--aqua);
  border-radius: var(--r);
  padding: 1.2rem 1.2rem 1.1rem;
}
.crm-banner__title { font-family: var(--font); font-size: clamp(1.15rem, 2.6vw, 1.5rem); margin: 0 0 .6rem; }
.crm-banner__title strong { color: var(--brand); }
.crm-banner__text { font-size: .97rem; margin: 0 0 .9rem; }
.crm-banner__note { font-size: .9rem; color: var(--ink-3); padding-top: .8rem; border-top: 1px solid var(--line); }
.crm-banner__note strong { color: var(--brand); }

/* ── Rubros ───────────────────────────────────────────────────── */
.rubros { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: 1.6rem; }
@media (min-width: 980px) { .rubros { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 2.5rem; } }
.rubro {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .9rem .85rem;
}
.rubro h3 { font-size: .95rem; margin-bottom: .3rem; }
.rubro p { font-size: .82rem; font-style: italic; color: var(--ink-3); line-height: 1.4; }
@media (min-width: 980px) { .rubro { padding: 1.3rem 1.2rem; } .rubro h3 { font-size: 1rem; } .rubro p { font-size: .88rem; } }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq { display: grid; gap: .6rem; margin-top: 1.8rem; }
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1rem;
  padding: 1rem 2.8rem 1rem 1.1rem;
  position: relative;
  color: var(--ink);
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--aqua);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 1.1rem 1.1rem; font-size: .97rem; }

/* ── CTA final + formulario ───────────────────────────────────── */
.final { position: relative; overflow: hidden; text-align: center; }
.final__glow {
  position: absolute;
  inset: auto -20% -60%;
  height: 120%;
  background: radial-gradient(50% 55% at 50% 100%, rgba(34,211,238,.16), rgba(2,132,199,.08) 55%, transparent 75%);
  pointer-events: none;
}
.final__inner { position: relative; }

.contacto__grid { margin-top: 2rem; display: grid; gap: 1.8rem; text-align: left; }
@media (min-width: 820px) { .contacto__grid { grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; margin-top: 3rem; } }
.contacto__info p { margin-bottom: 1rem; }
.contacto__info a { color: var(--brand); font-weight: 600; }
.contacto__nota { font-size: .9rem; color: var(--ink-3); }

.contacto__form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.3rem;
  box-shadow: var(--shadow);
}
/* fuera de la pantalla, no display:none — a un robot le cuesta más
   distinguirlo, y a un lector de pantalla no le estorba (aria-hidden) */
.contacto__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; }
.contacto__form .field { margin-bottom: 1rem; }
.contacto__form label { display: block; margin-bottom: .4rem; font-family: var(--font); font-weight: 600; font-size: .92rem; }
/* 16 px en los campos, siempre: por debajo, iOS hace zoom al enfocar y no lo deshace */
.contacto__form input,
.contacto__form textarea {
  width: 100%;
  padding: .8rem .95rem;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.contacto__form textarea { resize: vertical; min-height: 110px; }
.contacto__form input:focus,
.contacto__form textarea:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(34, 211, 238, .2); }
.contacto__form input[aria-invalid="true"],
.contacto__form textarea[aria-invalid="true"] { border-color: #F87171; }
.contacto__form .btn { width: 100%; }
.contacto__msg { margin-top: 1rem; font-weight: 600; color: var(--brand); }
.contacto__msg--error { color: #F87171; }

/* ── Footer ───────────────────────────────────────────────────── */
.footer { background: #050C18; color: var(--ink-2); padding: 2.75rem 0 2rem; border-top: 1px solid var(--line-2); }
.footer__inner { display: grid; gap: .9rem; justify-items: center; text-align: center; }
.footer .logo__mark { width: 34px; height: 30px; }
.footer .logo__word { color: #fff; font-size: 1.4rem; }
.footer__tag { color: var(--ink-3); font-family: var(--font); font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; }
.footer__links { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; margin-top: .3rem; }
.footer__links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.footer__links a:hover { color: var(--aqua); border-color: var(--aqua); }
.footer__legal { font-size: .8rem; color: var(--ink-3); margin-top: 1rem; line-height: 1.8; }

/* ── Botón flotante WhatsApp (script.js lo quita mientras no haya número) ── */
.wa-float {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 60;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
  transition: transform .2s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; }

/* ── Animaciones de aparición ─────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.steps .reveal:nth-child(2), .plans .reveal:nth-child(2) { transition-delay: .1s; }
.steps .reveal:nth-child(3), .plans .reveal:nth-child(3) { transition-delay: .2s; }
.carrusel .reveal:nth-child(2) { transition-delay: .1s; }
.carrusel .reveal:nth-child(3) { transition-delay: .2s; }
.carrusel .reveal:nth-child(5) { transition-delay: .1s; }
.carrusel .reveal:nth-child(6) { transition-delay: .2s; }
.rubros .reveal:nth-child(even) { transition-delay: .08s; }

/* En el teléfono cada sección llena la pantalla y el observer exige ver el
   15 %: el visitante veía pantallazos vacíos hasta que el efecto corría
   (6-ago). Aquí las apariciones se APAGAN; en escritorio se quedan. */
@media (max-width: 719px) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Accesibilidad: menos movimiento ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hb { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* la historia se lee de una vez: sin escenario pegado ni espaciadores,
     el chat completo y la tarjeta-panel debajo */
  .hero__pegado { position: absolute; inset: 0; height: auto; }
  .story__stage { position: static; }
  .story__beats, .story__dots, .story__subs, .hb-head__estado { display: none; }
  .story__ventana { height: auto; padding-bottom: .8rem; -webkit-mask-image: none; mask-image: none; }
  .story__view { gap: 1rem; }
  .story__chat, .story__panel { grid-area: auto; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; }
  .hb-head__hora { opacity: 1 !important; }
  .hb-group { transform: none !important; transition: none !important; }
}