/* ============================================================
   GestoraYa — Sistema de marca para landing
   v2 · 2026-05-24 · Brandkit oficial · 3 familias · paleta canon
   v3 · 2026-05-25 · Decisión Tania: nombre del asistente = TanIA
   ─────────────────────────────────────────────────────────────
   REGLA TIPOGRÁFICA OFICIAL (mayúsculas de marca)
   Las dos sílabas con identidad de marca van SIEMPRE en
   mayúsculas, escritas literales (sin small-caps CSS):
     · "YA"     — Gestora YA, el ADN de inmediatez
     · "IA"     — la IA, intelligence artificielle
     · "TanIA"  — nombre propio del asistente IA de GestoraYa
                  ("T" mayúscula inicial + "an" minúsculas + "IA"
                  mayúsculas — juego con el nombre Tania de la
                  cofundadora)
   ============================================================ */

/* ----- 1. Reset --------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; margin: 0; }

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

button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

a { color: inherit; text-decoration: none; }

input, textarea, select { font: inherit; color: inherit; }

/* ----- 2. Tokens · Design System oficial (v4 · 2026-05-25) ----
   Sustituye al brandkit anterior. Paleta del Design System
   definitivo: cobalt blue + ink navy + paper warm.
   Skill: e:/Workspace/.claude/skills/gestoraya-design/
*/
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* Azul cobalt · primary signal */
  --gy-blue:        #1A5FFF;
  --gy-blue-deep:   #0E4CE6;       /* hover / focus */
  --gy-blue-soft:   #DCE6FF;
  --gy-blue-mist:   #EEF3FF;       /* badges, highlights */

  /* Escala azul completa (50 → 900) */
  --gy-blue-50:     #EEF3FF;
  --gy-blue-100:    #DCE6FF;
  --gy-blue-200:    #B7C8FF;
  --gy-blue-300:    #85A4FF;
  --gy-blue-400:    #4F7BFF;
  --gy-blue-500:    #1A5FFF;
  --gy-blue-600:    #0E4CE6;
  --gy-blue-700:    #093BB8;
  --gy-blue-800:    #0A2F8A;
  --gy-blue-900:    #0B225C;
  --gy-blue-1000:   #060C20;       /* legacy alias para deep */

  /* Ink navy · structure */
  --gy-navy:        #0B1530;       /* logo navy */
  --gy-navy-2:      #131A33;
  --gy-ink:         #0B1530;       /* body text — alineado con navy */

  /* Escala ink completa */
  --gy-ink-50:      #F4F6FA;
  --gy-ink-100:     #E6EAF2;
  --gy-ink-200:     #C7CFDD;
  --gy-ink-300:     #98A3B8;
  --gy-ink-400:     #5C6781;
  --gy-ink-500:     #313C56;
  --gy-ink-600:     #1C2540;
  --gy-ink-700:     #131A33;
  --gy-ink-800:     #0B1530;
  --gy-ink-900:     #060C20;

  /* Alias legacy → ink */
  --gy-navy-100:    #E6EAF2;
  --gy-navy-200:    #C7CFDD;
  --gy-navy-300:    #98A3B8;
  --gy-navy-400:    #5C6781;
  --gy-navy-500:    #313C56;
  --gy-navy-600:    #1C2540;
  --gy-navy-700:    #131A33;
  --gy-navy-800:    #0B1530;
  --gy-navy-950:    #060C20;
  --gy-navy-1000:   #060C20;

  /* Surfaces warm-leaning (clave: paper warm, no azulado) */
  --gy-paper:       #FBFAF7;       /* warm off-white — fondo base */
  --gy-paper-2:     #F4F2EC;       /* warm — fondo alterno */
  --gy-bone:        #ECE9E0;       /* divisor cálido */
  --gy-white:       #FFFFFF;
  --gy-line:        rgba(11, 21, 48, 0.14);    /* border-2 */
  --gy-line-soft:   rgba(11, 21, 48, 0.08);    /* border-1 */
  --gy-line-strong: rgba(11, 21, 48, 0.22);    /* border-3 */

  /* Grays — ink puro en distintas opacidades, no gris cool */
  --gy-gray-1:      #C7CFDD;
  --gy-gray-2:      #5C6781;       /* metadatos, eyebrows */
  --gy-gray-3:      #313C56;       /* body secundario */

  /* Aliases legados (compat) — mapean a la nueva paleta.
     IMPORTANTE: el "coral" se ELIMINA del brandkit oficial.
     Lo mapeamos a azul para no romper HTML legado mientras
     limpiamos las páginas. */
  --gy-navy-mid:    var(--gy-gray-3);
  --gy-mute:        var(--gy-gray-2);
  --gy-blue-dark:   var(--gy-blue-deep);
  --gy-blue-light:  var(--gy-blue-300);
  --gy-paper-warm:  var(--gy-paper-2);
  --gy-coral:       var(--gy-blue);
  --gy-coral-light: var(--gy-blue-soft);
  --gy-coral-soft:  var(--gy-blue-mist);
  --gy-shadow-coral: 0 12px 32px -8px rgba(11, 21, 48, 0.30);

  /* Estados semánticos (DS oficial · dialled-down, never neon) */
  --gy-success:     #1E9E5A;
  --gy-success-soft:#E8F7EF;
  --gy-warning:     #D9921B;
  --gy-warning-soft:#FFF6E1;
  --gy-danger:      #D63B3B;
  --gy-danger-soft: #FDECEC;

  /* WhatsApp accent (SOLO donde se invoca el canal WA literalmente) */
  --gy-whatsapp:    #25D366;
  --gy-whatsapp-ink:#075E54;

  /* Tipografía · Geist (UI + display), Geist Mono (números),
     Instrument Serif italic (acentos editoriales en marketing) */
  --gy-font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gy-font-body:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gy-font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gy-font-serif:   'Instrument Serif', 'Iowan Old Style', Georgia, serif;

  /* Alias legados */
  --gy-font:        var(--gy-font-body);
  --gy-mono:        var(--gy-font-mono);

  /* Radios */
  --gy-r-sm: 8px;
  --gy-r-md: 10px;
  --gy-r-lg: 14px;
  --gy-r-xl: 18px;
  --gy-r-2xl: 24px;
  --gy-r-pill: 999px;

  /* Sombras · todas teñidas hacia el navy oficial */
  --gy-shadow-xs: 0 1px 2px rgba(11, 21, 48, 0.04);
  --gy-shadow-sm: 0 2px 8px rgba(11, 21, 48, 0.05), 0 1px 3px rgba(11, 21, 48, 0.04);
  --gy-shadow-md: 0 12px 28px -10px rgba(11, 21, 48, 0.10), 0 4px 8px -4px rgba(11, 21, 48, 0.04);
  --gy-shadow-lg: 0 24px 48px -16px rgba(11, 21, 48, 0.18), 0 8px 16px -6px rgba(11, 21, 48, 0.06);
  --gy-shadow-xl: 0 40px 80px -24px rgba(11, 21, 48, 0.22);
  --gy-shadow-blue: 0 12px 32px -8px rgba(11, 21, 48, 0.30);

  /* Layout */
  --gy-container: 1200px;
  --gy-container-wide: 1320px;
  --gy-gutter: clamp(20px, 4vw, 40px);
  /* Padding vertical de sección · ritmo brand-landing.
     Una landing de marketing respira: 64-128px verticales son el rango
     estándar de Stripe / Linear / Pennylane y la página perdía cualquier
     pacing al apretarse a 22-36 (v8 Tania, descartada). */
  --gy-section-y: clamp(64px, 7vw, 128px);
  --gy-section-y-tight: clamp(40px, 5vw, 80px);
  --gy-section-y-compact: clamp(32px, 4vw, 56px);
  --gy-section-y-hero: clamp(56px, 6vw, 104px);

  /* Animación */
  --gy-ease: cubic-bezier(.22, .8, .2, 1);
  --gy-dur: 220ms;
}

/* ----- 3. Base ---------------------------------------------- */
html, body { height: 100%; }

body {
  font-family: var(--gy-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gy-ink);
  background: var(--gy-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--gy-blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--gy-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----- 4. Tipografía utilitaria ------------------------------
   Brandkit oficial:
   · Plus Jakarta Sans → display (titulares, hero, wordmark)
   · Inter → body, UI, párrafos, botones
   · JetBrains Mono → eyebrows, metadata, números técnicos
   --------------------------------------------------------- */
/* v3 (Tania) — Apple-like: bold pero comedido. ~30% menos que antes,
   line-height ~1.05-1.1 más comprimido. */
.display-xl {
  font-family: var(--gy-font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);   /* ~38px máx — compacto */
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gy-ink);
}
.display-lg {
  font-family: var(--gy-font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem);      /* ~30px máx — compacto */
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gy-ink);
}
.display-md {
  font-family: var(--gy-font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 0.9rem + 1vw, 1.55rem);    /* ~25px máx */
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gy-ink);
}
.display-sm {
  font-family: var(--gy-font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--gy-ink);
}
.lead {
  font-family: var(--gy-font-body);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
  line-height: 1.55;
  color: var(--gy-gray-3);
  font-weight: 400;
}
.body { color: var(--gy-gray-3); line-height: 1.6; }
.mute { color: var(--gy-gray-2); }

/* Eyebrow · estilo brandkit: JetBrains Mono uppercase con tracking amplio */
.eyebrow {
  font-family: var(--gy-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gy-gray-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1.5px;
  background: var(--gy-blue);
  border-radius: 2px;
}
/* Eyebrow con énfasis azul (cuando quieres que destaque el azul de marca) */
.eyebrow.accent { color: var(--gy-blue); }

/* Énfasis con <em> dentro de titulares — patrón del brandkit */
.display-xl em,
.display-lg em,
.display-md em,
.display-sm em,
.section-title em {
  font-style: normal;
  color: var(--gy-blue);
}

/* Section numbers — patrón editorial del brandkit */
.section-num {
  font-family: var(--gy-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gy-gray-2);
  margin-bottom: 14px;
  display: block;
}

.highlight-ya {
  position: relative;
  display: inline-block;
  color: var(--gy-blue);
}
.highlight-ya::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.04em;
  height: 0.16em;
  background: var(--gy-blue);
  opacity: 0.18;
  border-radius: 2px;
  z-index: -1;
}

/* ----- 5. Layout -------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--gy-container);
  margin: 0 auto;
  padding: 0 var(--gy-gutter);
}
.container-wide { max-width: var(--gy-container-wide); }

/* v8 (Tania 2026-05-25) — compactación final radical */
.section { padding: var(--gy-section-y) 0; }
.section-tight { padding: var(--gy-section-y-tight) 0; }
.section-compact { padding: var(--gy-section-y-compact) 0; }
.section-compact .section-head { margin-bottom: clamp(20px, 2.4vw, 36px); }
.section-compact .section-head h2,
.section-compact .display-lg { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.05rem); }
.section-compact .cta-final { padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2.4vw, 32px); }
.section-compact .cta-final h2 { font-size: clamp(1.4rem, 1rem + 1.2vw, 1.95rem); margin: 8px 0 10px; }
.section-compact .cta-final p { font-size: 1rem; }
.section-compact .cta-final .btns { margin-top: 14px; }
.section-compact .cred-card { padding: clamp(18px, 2.4vw, 30px); }
.section-compact .cred-card h3,
.section-compact .display-md { font-size: clamp(1.2rem, 0.9rem + 1vw, 1.6rem); }
.section-compact .autonomo-banner { padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 24px); }
.section-compact .autonomo-banner h3 { font-size: 1.05rem; }
.section-compact .autonomo-banner p { font-size: 0.9rem; }
.section-compact .faq-list { gap: 0; }
.section-compact .faq-q { padding: 16px 0; font-size: 0.98rem; }
.section-compact .faq-a-inner { padding: 0 0 16px; font-size: 0.92rem; }

.divider {
  height: 1px;
  background: var(--gy-line);
  border: 0;
  margin: 0;
}

/* ----- 6. Header / nav -------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(246, 248, 254, 0.78);    /* paper teñido */
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background var(--gy-dur) var(--gy-ease),
              border-color var(--gy-dur) var(--gy-ease);
}
.header.scrolled {
  background: rgba(246, 248, 254, 0.94);
  border-bottom-color: var(--gy-line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* v11 (Tania): header compacto, sin huecos arriba/abajo.
     Logo 82px → nav ~104px proporcional. */
  height: 104px;
  padding: 4px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gy-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gy-ink);
  font-size: 1.18rem;
}
/* v11 (Tania): logo más grande aún. ~82px desktop / 62px mobile · azul oficial */
.brand img { height: 82px; width: auto; display: block; }
@media (max-width: 940px) {
  .brand img { height: 62px; }
  .nav { height: 88px; padding: 2px 0; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  /* v11: links más legibles. 16-17px / 600 / tracking ligeramente cerrado */
  padding: 9px 14px;
  font-family: var(--gy-font-body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--gy-gray-3);
  border-radius: var(--gy-r-md);
  transition: background var(--gy-dur) var(--gy-ease),
              color var(--gy-dur) var(--gy-ease);
}
.nav-links a:hover { color: var(--gy-ink); background: var(--gy-paper-2); }
.nav-links a.is-active { color: var(--gy-blue); }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* v11: CTAs del header con peso visual coherente con los links nuevos */
.nav-cta .btn {
  font-size: 0.98rem;
  padding: 11px 20px;
}
.nav-cta .btn svg { width: 17px; height: 17px; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--gy-r-md);
  align-items: center;
  justify-content: center;
  color: var(--gy-ink);
}
.nav-toggle:hover { background: var(--gy-paper-2); }

@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta .btn-ghost { display: none; }
}

.mobile-menu {
  position: fixed;
  inset: 88px 0 0 0; /* v11: alineado con altura nav mobile (88px) */
  background: rgba(246, 248, 254, 0.98);
  backdrop-filter: blur(16px);
  padding: 24px var(--gy-gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--gy-ease), transform 200ms var(--gy-ease);
  z-index: 40;
}
.mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu a {
  padding: 14px 16px;
  border-radius: var(--gy-r-md);
  font-family: var(--gy-font-body);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--gy-ink);
}
.mobile-menu a:hover { background: var(--gy-paper-2); }
.mobile-menu .btn { margin-top: 12px; }

/* ----- 7. Botones --------------------------------------------
   Brandkit: Inter 600 para botones, radios 10px,
   azul GestoraYa al 100% para CTAs primarios.
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--gy-r-md);
  font-family: var(--gy-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform var(--gy-dur) var(--gy-ease),
              box-shadow var(--gy-dur) var(--gy-ease),
              background var(--gy-dur) var(--gy-ease),
              color var(--gy-dur) var(--gy-ease);
}
.btn svg { width: 18px; height: 18px; }

.btn-primary {
  background: var(--gy-blue);
  color: #fff;
  box-shadow: var(--gy-shadow-blue);
}
.btn-primary:hover {
  background: var(--gy-blue-deep);
  box-shadow: 0 16px 38px -10px rgba(11, 21, 48, 0.42);
}
.btn-primary:active { }

.btn-secondary {
  background: var(--gy-navy);
  color: #fff;
}
.btn-secondary:hover {
  background: var(--gy-navy-2);
}

/* btn-coral → alias del primary (compat con HTML que aún lo use) */
.btn-coral {
  background: var(--gy-blue);
  color: #fff;
  box-shadow: var(--gy-shadow-blue);
}
.btn-coral:hover {
  background: var(--gy-blue-deep);
  box-shadow: 0 16px 38px -10px rgba(11, 21, 48, 0.42);
}

.btn-outline {
  background: transparent;
  color: var(--gy-ink);
  box-shadow: inset 0 0 0 1.5px var(--gy-line);
}
.btn-outline:hover {
  box-shadow: inset 0 0 0 1.5px var(--gy-ink);
}

/* btn-outline-blue · outline en azul (variante para CTAs secundarios "Hablar con ventas") */
.btn-outline-blue {
  background: transparent;
  color: var(--gy-blue);
  box-shadow: inset 0 0 0 1.5px var(--gy-blue);
}
.btn-outline-blue:hover {
  background: var(--gy-blue-mist);
  color: var(--gy-blue-deep);
  box-shadow: inset 0 0 0 1.5px var(--gy-blue-deep);
}

.btn-ghost {
  background: transparent;
  color: var(--gy-gray-3);
  padding: 10px 14px;
}
.btn-ghost:hover { color: var(--gy-ink); background: var(--gy-paper-2); }

.btn-lg { padding: 14px 26px; font-size: 1rem; }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--gy-font-body);
  font-weight: 600;
  color: var(--gy-blue);
  font-size: 0.95rem;
  transition: gap var(--gy-dur) var(--gy-ease), color var(--gy-dur) var(--gy-ease);
}
.btn-link:hover { gap: 10px; color: var(--gy-blue-deep); }

/* ----- 8. Chips / badges -------------------------------------
   Sin variante coral. Las variantes "coral" se mantienen como
   alias del azul-mist para no romper HTML legado.
   --------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-pill);
  font-family: var(--gy-font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gy-ink);
}
.chip svg { width: 14px; height: 14px; color: var(--gy-blue); }

/* Chip azul (badge sobre fondo mist) — patrón brandkit "Verifactu ✓" */
.chip-blue {
  background: var(--gy-blue-mist);
  border-color: var(--gy-blue-soft);
  color: var(--gy-blue-deep);
}
.chip-blue svg { color: var(--gy-blue); }

/* Alias: chip-coral mapea al estilo azul-mist (compat HTML legado) */
.chip-coral {
  background: var(--gy-blue-mist);
  border-color: var(--gy-blue-soft);
  color: var(--gy-blue-deep);
}
.chip-coral svg { color: var(--gy-blue); }

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gy-blue);
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(11, 21, 48, 0.18);
}

/* ----- 9. Hero ----------------------------------------------- */
/* v8 (Tania 2026-05-25) — compactación final: header→hero pegados */
.hero {
  position: relative;
  padding: clamp(20px, 2.2vw, 32px) 0 clamp(24px, 3vw, 44px);
  overflow: hidden;
}

/* Hero centrado · sin mockup
   v3 (Tania) — Apple-like: fondo plano, sin dot pattern ni glow,
   padding más comedido. */
.hero-centered {
  position: relative;
  /* v8 (Tania 2026-05-25) — header→hero pegados */
  padding: clamp(22px, 2.4vw, 36px) 0 clamp(22px, 2.6vw, 38px);
  overflow: hidden;
  text-align: center;
}
.hero-centered .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #fff;
}
.hero-centered .hero-bg::before { content: none; }
.hero-centered .container { position: relative; }
.hero-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.hero-inner .eyebrow { justify-content: center; }
/* v3 (Tania) — Apple-like: H1 más comedido, no inflado */
.hero-inner h1 {
  margin: 0;
  font-family: var(--gy-font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--gy-ink);
}
.hero-inner h1 .accent { color: var(--gy-blue); }
.hero-inner .lead {
  max-width: 580px;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.12rem);
  line-height: 1.5;
  color: var(--gy-gray-3);
}
.hero-inner .hero-ctas {
  justify-content: center;
  margin-top: 4px;
}
.hero-inner .hero-meta {
  margin-top: 8px;
  justify-content: center;
}
/* v3 (Tania) — fondos planos para acercarse a Apple, sin dot pattern ni glow */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #fff;
}
.hero-bg::before { content: none; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-eyebrow { margin-bottom: 16px; }
.hero h1 {
  font-family: var(--gy-font-display);
  margin-bottom: 16px;
}
.hero h1 .accent { color: var(--gy-blue); }
/* accent-coral · alias del azul (compat HTML legado) */
.hero h1 .accent-coral { color: var(--gy-blue); }
.hero p.lead { max-width: 580px; margin-bottom: 22px; }

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  color: var(--gy-gray-2);
  font-family: var(--gy-font-body);
  font-size: 0.9rem;
}
.hero-meta .dot { background: var(--gy-blue); box-shadow: 0 0 0 4px rgba(11, 21, 48, 0.16); }

/* ----- 10. Hero visual right (preview panel) ----------------- */
/* v3 (Tania) — sin glow azul tras la preview; Apple-flat */
.hero-preview {
  position: relative;
  border-radius: var(--gy-r-2xl);
  background: #fff;
  border: 1px solid var(--gy-line);
  box-shadow: var(--gy-shadow-md);
  padding: 12px;
  isolation: isolate;
  max-width: 560px;
  margin-left: auto;
}
.hero-preview::before { content: none; }

/* ----- 11. Browser frame (panel desktop mockup) -------------- */
.browser {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  box-shadow: var(--gy-shadow-lg);
  overflow: hidden;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #FBFCFE 0%, var(--gy-paper-2) 100%);
  border-bottom: 1px solid var(--gy-line);
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--gy-line);
  display: inline-block;
}
.browser-dots span:nth-child(1) { background: #FF5F57; }
.browser-dots span:nth-child(2) { background: #FEBC2E; }
.browser-dots span:nth-child(3) { background: #28C840; }
.browser-url {
  flex: 1;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-pill);
  font-size: 0.78rem;
  color: var(--gy-mute);
  font-family: var(--gy-mono);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 320px;
}
.browser-url svg { width: 12px; height: 12px; color: var(--gy-success); }

.browser-body {
  display: grid;
  grid-template-columns: 158px 1fr;
  min-height: 360px;
  background: var(--gy-paper-warm);
}
.browser-sidebar {
  background: #fff;
  border-right: 1px solid var(--gy-line);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.browser-sidebar .brand {
  font-size: 0.92rem;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 10px;
}
.browser-sidebar .brand img { height: 22px; }
.sb-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gy-mute);
  padding: 14px 10px 6px;
}
.sb-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--gy-r-md);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--gy-navy-mid);
  cursor: default;
}
.sb-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.sb-link .count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--gy-line-soft);
  color: var(--gy-navy-mid);
  padding: 1px 7px;
  border-radius: var(--gy-r-pill);
}
.sb-link.is-active {
  background: var(--gy-blue-soft);
  color: var(--gy-blue-dark);
}
.sb-link.is-active .count { background: var(--gy-blue); color: #fff; }

.browser-main { padding: 16px; min-width: 0; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.panel-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gy-navy);
}
.panel-sub { font-size: 0.82rem; color: var(--gy-mute); margin-top: 2px; }

.tab-row {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--gy-line);
  margin-bottom: 14px;
}
.tab {
  padding: 9px 12px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gy-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab .count {
  font-size: 0.7rem;
  background: var(--gy-line-soft);
  color: var(--gy-navy-mid);
  padding: 1px 7px;
  border-radius: var(--gy-r-pill);
}
.tab.is-active {
  color: var(--gy-blue);
  border-bottom-color: var(--gy-blue);
}
.tab.is-active .count { background: var(--gy-blue-soft); color: var(--gy-blue-dark); }

.expense-row {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px solid var(--gy-line-soft);
  font-size: 0.82rem;
}
.expense-row:last-child { border-bottom: 0; }
.expense-row .thumb {
  width: 32px; height: 32px;
  border-radius: var(--gy-r-sm);
  background: linear-gradient(135deg, var(--gy-blue-soft) 0%, #fff 100%);
  border: 1px solid var(--gy-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--gy-blue);
  flex-shrink: 0;
}
.expense-row .thumb svg { width: 14px; height: 14px; }
.expense-row .meta { min-width: 0; }
.expense-row .meta strong {
  display: block;
  color: var(--gy-navy);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.expense-row .meta span {
  font-size: 0.78rem;
  color: var(--gy-mute);
}
.expense-row .amount {
  font-weight: 700;
  color: var(--gy-navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.expense-row .actions { display: flex; align-items: center; gap: 8px; }

.toggle {
  width: 32px; height: 18px;
  background: var(--gy-line);
  border-radius: var(--gy-r-pill);
  position: relative;
  cursor: pointer;
  transition: background var(--gy-dur) var(--gy-ease);
  flex-shrink: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform var(--gy-dur) var(--gy-ease);
}
.toggle.is-on { background: var(--gy-blue); }
.toggle.is-on::after { transform: translateX(14px); }

.expense-detail {
  margin-top: 14px;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-lg);
  background: #fff;
  overflow: hidden;
}
.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(180deg, #FCFDFF 0%, #F5F7FB 100%);
  border-bottom: 1px solid var(--gy-line);
}
.detail-head strong {
  font-size: 0.92rem;
  color: var(--gy-navy);
  font-weight: 700;
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 130px;
  gap: 14px;
  padding: 14px;
  align-items: start;
}
.detail-grid dl {
  margin: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 8px;
  column-gap: 12px;
  font-size: 0.84rem;
}
.detail-grid dt { color: var(--gy-mute); font-weight: 500; }
.detail-grid dd { margin: 0; color: var(--gy-navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.detail-grid dd .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--gy-success-soft);
  color: #097A53;
  border-radius: var(--gy-r-pill);
  font-size: 0.74rem;
  font-weight: 700;
}
.pdf-thumb {
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-md);
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(0,11,52,0.04) 6px 7px),
    linear-gradient(180deg, #fff 0%, var(--gy-paper) 100%);
  aspect-ratio: 0.78;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  font-size: 0.7rem;
  color: var(--gy-mute);
  font-weight: 600;
}
.pdf-thumb::before {
  content: "PDF";
  position: absolute;
  top: 6px; right: 6px;
  background: var(--gy-blue);
  color: #fff;
  font-family: var(--gy-font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--gy-r-sm);
  letter-spacing: 0.1em;
}
.pdf-thumb svg { width: 24px; height: 24px; color: var(--gy-navy-mid); }

/* ----- 12. Phone mockup (WhatsApp) --------------------------- */
.phone {
  width: 100%;
  max-width: 270px;
  margin: 0 auto;
  border-radius: 38px;
  background: linear-gradient(180deg, #1A1F2E 0%, #060914 100%);
  padding: 10px;
  box-shadow:
    var(--gy-shadow-xl),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 0 2px rgba(0,0,0,0.6);
  position: relative;
}
.phone-screen {
  border-radius: 28px;
  overflow: hidden;
  background: #E5DDD5;
  position: relative;
  aspect-ratio: 9 / 18;
  display: flex;
  flex-direction: column;
}
.phone-notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px; height: 26px;
  background: #000;
  border-radius: 18px;
  z-index: 4;
}
.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 22px 2px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: #008069;
  height: 38px;
  letter-spacing: -0.01em;
}
.phone-status svg { width: 14px; height: 14px; }
.phone-status .icons { display: flex; gap: 6px; align-items: center; }

.wa-header {
  background: #008069;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 10px;
}
.wa-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gy-blue) 0%, var(--gy-navy) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: -0.02em;
  border: 2px solid rgba(255,255,255,0.15);
}
.wa-name { font-size: 0.92rem; font-weight: 700; line-height: 1.15; }
.wa-status { font-size: 0.7rem; opacity: 0.9; font-weight: 400; }
.wa-actions { margin-left: auto; display: flex; gap: 12px; opacity: 0.9; }
.wa-actions svg { width: 18px; height: 18px; }

.wa-body {
  flex: 1;
  padding: 10px 9px;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.6) 0, transparent 50%),
    #E5DDD5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M10 10 L14 14 M20 4 L24 8 M30 20 L34 24 M4 30 L8 34' stroke='%23000' stroke-width='0.6' stroke-linecap='round' opacity='0.06'/></svg>");
  background-color: #E5DDD5;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  font-size: 0.7rem;
  line-height: 1.35;
}
.wa-date {
  align-self: center;
  background: rgba(225, 245, 254, 0.92);
  color: #54656F;
  font-size: 0.66rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--gy-r-sm);
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.05);
}
.bubble {
  max-width: 82%;
  padding: 5px 8px 4px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.10);
  color: #111B21;
}
.bubble .time {
  display: inline-block;
  font-size: 0.6rem;
  color: #667781;
  margin-left: 6px;
  vertical-align: bottom;
}
.bubble.in { background: #fff; align-self: flex-start; border-top-left-radius: 2px; }
.bubble.out { background: #D9FDD3; align-self: flex-end; border-top-right-radius: 2px; }
.bubble.out .time::after {
  content: "";
  display: inline-block;
  width: 12px; height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none'><path d='M11.07.93 4.65 7.35 1.93 4.63.93 5.65l3.72 3.72L12.07 1.93z' fill='%2353BDEB'/><path d='M14.07.93 7.65 7.35 6.59 6.29 5.59 7.29l2.07 2.07L15.07 1.93z' fill='%2353BDEB'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 3px;
  vertical-align: middle;
}
.bubble strong { font-weight: 700; }

.bubble.image {
  padding: 4px;
  width: 78%;
}
.bubble.image .ticket {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #FFF 0%, #FAFAFA 30%, #F1F1F1 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.bubble.image .ticket::before {
  content: "";
  position: absolute;
  inset: 8px 8px auto 8px;
  height: 60%;
  background-image:
    linear-gradient(180deg, #2a2a2a 0%, #2a2a2a 8%, transparent 8%, transparent 14%, #2a2a2a 14%, #2a2a2a 18%, transparent 18%, transparent 26%, #6e6e6e 26%, #6e6e6e 28%, transparent 28%, transparent 36%, #6e6e6e 36%, #6e6e6e 38%, transparent 38%, transparent 46%, #6e6e6e 46%, #6e6e6e 48%, transparent 48%, transparent 60%, #2a2a2a 60%, #2a2a2a 64%, transparent 64%, transparent 75%, #2a2a2a 75%, #2a2a2a 79%, transparent 79%);
  background-size: 100% 100%;
  opacity: 0.55;
  filter: contrast(1.05);
}
.bubble.image .ticket::after {
  content: "Gasolinera Repsol\A Av. del Sol, 122\AMarbella · Málaga\A\A Diésel · 28,4 L\A Importe: 47,80 €\A IVA 21% incluido\A\A *** Gracias ***";
  white-space: pre;
  position: absolute;
  left: 18px; right: 18px; top: 10%;
  font-family: var(--gy-mono);
  font-size: 0.42rem;
  line-height: 1.4;
  color: #111;
  font-weight: 500;
  text-align: center;
  opacity: 0.85;
}
.bubble.image .caption {
  padding: 4px 6px 2px;
  font-size: 0.72rem;
  display: flex;
  justify-content: flex-end;
  color: #667781;
}

.wa-card {
  background: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.65rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.1);
  border-left: 3px solid var(--gy-blue);
}
.wa-card.coral { border-left-color: var(--gy-coral); }
.wa-card strong { color: var(--gy-navy); }
.wa-card .v { font-weight: 700; color: var(--gy-navy); text-align: right; font-variant-numeric: tabular-nums; }
.wa-card .ok {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--gy-line-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #097A53;
  font-weight: 600;
}
.wa-card .ok svg { width: 12px; height: 12px; }

.wa-input {
  background: #F0F2F5;
  padding: 8px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-input .field {
  flex: 1;
  background: #fff;
  border-radius: var(--gy-r-pill);
  padding: 7px 14px;
  color: #667781;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-input .field svg { width: 16px; height: 16px; color: #54656F; }
.wa-input .mic {
  width: 36px; height: 36px;
  background: #008069;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-input .mic svg { width: 18px; height: 18px; }

/* ----- 13. Tarjetas y grids ---------------------------------- */
/* Ritmo brand-landing: el head separa de su grid con aire visible. */
.section-head {
  max-width: 720px;
  margin: 0 auto clamp(32px, 4vw, 64px);
  text-align: center;
}
.section-head.left {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}
.section-head .eyebrow { margin-bottom: 12px; justify-content: center; }
.section-head.left .eyebrow { justify-content: flex-start; }
.section-head .section-num { justify-content: center; text-align: center; }
.section-head.left .section-num { text-align: left; }
.section-head h2 { margin-bottom: clamp(12px, 1.4vw, 20px); font-family: var(--gy-font-display); }
.section-head p { color: var(--gy-gray-3); font-size: 1rem; line-height: 1.55; }

/* v3 (Tania) — gap -15%, padding cards -20% */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
}

.card {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  /* v8 (Tania 2026-05-25) — padding -20% adicional */
  padding: 14px;
  transition: transform var(--gy-dur) var(--gy-ease),
              box-shadow var(--gy-dur) var(--gy-ease),
              border-color var(--gy-dur) var(--gy-ease);
}
.card:hover {
  box-shadow: var(--gy-shadow-md);
  border-color: var(--gy-line);
}
.card-icon {
  width: 44px; height: 44px;
  border-radius: var(--gy-r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--gy-blue-soft);
  color: var(--gy-blue);
  margin-bottom: 18px;
}
.card-icon svg { width: 22px; height: 22px; }
.card-icon.coral { background: var(--gy-coral-soft); color: var(--gy-coral); }
.card h3 {
  font-family: var(--gy-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--gy-ink);
}
.card p { color: var(--gy-gray-3); font-size: 0.95rem; line-height: 1.6; }

/* "El trimestre" cards (problemas) — compactas y visuales */
/* v3 (Tania) — gap -15% */
.problems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}
@media (max-width: 920px) {
  .problems-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .problems-grid { grid-template-columns: 1fr; }
}
/* v8 (Tania 2026-05-25) — padding -20% adicional */
.problem-card {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-lg);
  padding: 14px 14px 13px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--gy-dur) var(--gy-ease),
              box-shadow var(--gy-dur) var(--gy-ease),
              border-color var(--gy-dur) var(--gy-ease);
}
.problem-card:hover {
  box-shadow: var(--gy-shadow-md);
  border-color: var(--gy-line);
}
.problem-ic {
  width: 56px; height: 56px;
  border-radius: var(--gy-r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gy-blue-soft) 0%, #fff 100%);
  color: var(--gy-blue);
  border: 1px solid var(--gy-blue-soft);
  margin-bottom: 4px;
}
.problem-ic svg { width: 28px; height: 28px; }
.problem-card.coral .problem-ic {
  background: linear-gradient(135deg, var(--gy-coral-soft) 0%, #fff 100%);
  color: var(--gy-coral);
  border-color: var(--gy-coral-light);
}
.problem-card h3 {
  font-family: var(--gy-font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gy-ink);
  margin: 0;
  line-height: 1.25;
}
.problem-card p {
  font-family: var(--gy-font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--gy-gray-3);
  margin: 0;
}

/* "Cómo funciona" steps */
/* v3 (Tania) — gap -15%, padding -20% */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 15px;
  counter-reset: step;
}
.step {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  /* v8 (Tania 2026-05-25) — padding -20% adicional */
  padding: 14px 14px;
  position: relative;
  transition: transform var(--gy-dur) var(--gy-ease),
              box-shadow var(--gy-dur) var(--gy-ease);
}
.step:hover { transform: translateY(-2px); box-shadow: var(--gy-shadow-md); }
.step-num {
  font-family: var(--gy-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gy-blue);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.step-icon {
  width: 36px; height: 36px;
  border-radius: var(--gy-r-md);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gy-blue-soft) 0%, #fff 100%);
  border: 1px solid var(--gy-blue-soft);
  color: var(--gy-blue);
  margin-bottom: 12px;
}
.step-icon svg { width: 18px; height: 18px; }
.step h3 {
  font-family: var(--gy-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gy-ink);
  margin-bottom: 6px;
}
.step p { color: var(--gy-gray-3); font-size: 0.92rem; line-height: 1.55; }

/* Beneficios (3 columnas) */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  overflow: hidden;
  background: #fff;
}
.benefit {
  /* v8 (Tania 2026-05-25) — padding -20% adicional */
  padding: 20px 20px;
  border-right: 1px solid var(--gy-line);
}
.benefit:last-child { border-right: 0; }
@media (max-width: 900px) {
  .benefit { border-right: 0; border-bottom: 1px solid var(--gy-line); }
  .benefit:last-child { border-bottom: 0; }
}
.benefit-num {
  font-family: var(--gy-font-mono);
  font-size: 0.72rem;
  color: var(--gy-blue);
  font-weight: 500;
  margin-bottom: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.benefit h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.benefit p { color: var(--gy-navy-mid); line-height: 1.6; }

/* Two-col split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split .order-2 { order: -1; }
}
/* v8 (Tania 2026-05-25) — ritmo vertical más compacto */
.split h2 { margin-bottom: 12px; }
.split p.lead { margin-bottom: 16px; }
.split ul.checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.split ul.checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.98rem;
  color: var(--gy-navy);
  line-height: 1.5;
}
.split ul.checks li svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--gy-blue);
  margin-top: 1px;
}
.split ul.checks li strong { color: var(--gy-navy); font-weight: 700; }
.split ul.checks li span { color: var(--gy-navy-mid); }

/* ----- 14. Pricing ------------------------------------------- */
.pricing {
  background: var(--gy-paper-warm);
}
/* v3 (Tania) — gap -15% */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 28px;
}
@media (max-width: 880px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
/* v8 (Tania 2026-05-25) — padding -20% adicional */
.price-card {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  padding: 18px 16px;
  position: relative;
  transition: transform var(--gy-dur) var(--gy-ease),
              box-shadow var(--gy-dur) var(--gy-ease),
              border-color var(--gy-dur) var(--gy-ease);
}
.price-card:hover {
  box-shadow: var(--gy-shadow-md);
  border-color: var(--gy-line);
}
.price-card.featured {
  border: 1px solid var(--gy-navy);
  background: linear-gradient(180deg, var(--gy-navy) 0%, var(--gy-navy-2) 100%);
  color: #fff;
  box-shadow: var(--gy-shadow-lg);
}
.price-card.featured h3,
.price-card.featured .price-amount,
.price-card.featured .price-cents,
.price-card.featured .price-feat li { color: #fff; }
.price-card.featured .price-tier { color: rgba(255,255,255,0.7); }
.price-card.featured .price-feat li svg { color: var(--gy-blue-light); }
.price-card.featured .price-foot { color: rgba(255,255,255,0.65); }

.price-badge {
  position: absolute;
  top: -12px; right: 20px;
  background: var(--gy-blue);
  color: #fff;
  font-family: var(--gy-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--gy-r-pill);
  box-shadow: var(--gy-shadow-blue);
}
.price-tier {
  font-family: var(--gy-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gy-gray-2);
  margin-bottom: 14px;
}
.price-card h3 {
  font-family: var(--gy-font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--gy-ink);
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
  font-family: var(--gy-font-display);
  color: var(--gy-ink);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-size: 2.4rem;
  line-height: 1;
}
.price-cents {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gy-navy-mid);
}
.price-foot {
  font-size: 0.88rem;
  color: var(--gy-mute);
  margin-bottom: 22px;
  line-height: 1.5;
}
.price-feat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
}
.price-feat li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--gy-navy);
  line-height: 1.5;
}
.price-feat li svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--gy-blue);
  margin-top: 1px;
}

.price-note {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.price-note .left {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.95rem;
  color: var(--gy-navy-mid);
  flex: 1;
  min-width: 240px;
}
.price-note .left svg {
  width: 28px; height: 28px;
  color: var(--gy-blue);
  flex-shrink: 0;
}
.price-note strong { color: var(--gy-navy); font-weight: 700; }

/* ----- 15. Credibilidad / sello ------------------------------ */
/* v3 (Tania) — fondo plano */
.credibility {
  background: var(--gy-paper);
}
.cred-card {
  display: grid;
  grid-template-columns: minmax(0, 180px) 1fr;
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-2xl);
  padding: clamp(22px, 3vw, 36px);
  box-shadow: var(--gy-shadow-sm);
}
@media (max-width: 720px) {
  .cred-card { grid-template-columns: 1fr; text-align: center; }
}
.seal {
  aspect-ratio: 1;
  background: radial-gradient(circle at 30% 30%, #fff 0%, var(--gy-paper-warm) 100%);
  border: 1px solid var(--gy-line);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  position: relative;
  box-shadow: var(--gy-shadow-md);
}
.seal::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed var(--gy-line);
  border-radius: 50%;
}
.seal .star {
  color: var(--gy-blue);
  margin-bottom: 6px;
}
.seal .top {
  font-family: var(--gy-font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--gy-gray-2);
  text-transform: uppercase;
}
.seal .mid {
  font-family: var(--gy-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gy-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 6px 0;
}
.seal .bot {
  font-size: 0.68rem;
  color: var(--gy-navy-mid);
  font-weight: 600;
}
.cred-card h3 { margin-bottom: 12px; }
.cred-card p { color: var(--gy-navy-mid); font-size: 1rem; line-height: 1.6; }
.cred-card .fse {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--gy-mute);
  border-top: 1px solid var(--gy-line);
  padding-top: 14px;
}
.cred-card .fse svg { width: 18px; height: 18px; color: var(--gy-blue); }

/* ----- 16. FAQ ----------------------------------------------- */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--gy-line);
}
/* v13 Tania · 2 columnas de FAQ */
.faq-list-2col {
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 40px);
  row-gap: 0;
  border-top: 0;
}
.faq-list-2col .faq-item {
  border-top: 1px solid var(--gy-line);
}
@media (max-width: 720px) {
  .faq-list-2col {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}
.faq-item { border-bottom: 1px solid var(--gy-line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  text-align: left;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gy-navy);
  transition: color var(--gy-dur) var(--gy-ease);
}
.faq-q:hover { color: var(--gy-blue); }
.faq-q .plus {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gy-paper-warm);
  border: 1px solid var(--gy-line);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--gy-dur) var(--gy-ease),
              background var(--gy-dur) var(--gy-ease);
}
.faq-q .plus svg { width: 14px; height: 14px; color: var(--gy-navy); transition: transform var(--gy-dur) var(--gy-ease); }
.faq-item.is-open .faq-q .plus { background: var(--gy-blue); border-color: var(--gy-blue); }
.faq-item.is-open .faq-q .plus svg { color: #fff; transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms var(--gy-ease);
}
.faq-a-inner {
  padding: 0 4px 22px;
  color: var(--gy-navy-mid);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 700px;
}
.faq-item.is-open .faq-a { max-height: 400px; }

/* ----- 17. CTA final + banner -------------------------------- */
/* v3 (Tania) — fondo monocromo marino plano, sin dot pattern.
   Padding -20%, más comedido. */
.cta-final {
  background: var(--gy-navy);
  color: #fff;
  border-radius: var(--gy-r-2xl);
  /* v8 (Tania 2026-05-25) — padding -20% adicional */
  padding: clamp(24px, 3vw, 44px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-final::before { content: none; }
.cta-final .eyebrow { color: var(--gy-blue-soft); }
.cta-final .eyebrow::before { background: var(--gy-blue-soft); }
.cta-final h2 { color: #fff; margin: 10px 0 12px; }
.cta-final p { color: rgba(255,255,255,0.78); font-size: 1.05rem; max-width: 620px; }
.cta-final .btns { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.cta-final .btn-outline { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.32); }
.cta-final .btn-outline:hover { box-shadow: inset 0 0 0 1.5px #fff; background: rgba(255,255,255,0.06); }

.autonomo-banner {
  /* v8 (Tania 2026-05-25) — padding -20% adicional */
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.autonomo-banner .left { flex: 1; min-width: 260px; }
.autonomo-banner .eyebrow { color: var(--gy-gray-2); margin-bottom: 10px; }
.autonomo-banner .eyebrow::before { background: var(--gy-blue); }
.autonomo-banner h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.autonomo-banner p { color: var(--gy-navy-mid); font-size: 0.96rem; }

/* ----- 18. Footer -------------------------------------------- */
/* v8 (Tania 2026-05-25): footer compactado ~-25% adicional */
.footer {
  background: var(--gy-navy);
  color: rgba(255,255,255,0.75);
  padding: clamp(18px, 2.2vw, 28px) 0 12px;
  margin-top: clamp(10px, 1.6vw, 22px);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 22px;
  margin-bottom: 18px;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer .brand {
  color: #fff;
  margin-bottom: 8px;
  font-size: 1.05rem;
}
.footer .brand img { filter: brightness(0) invert(1); height: 28px; }
.footer .claim {
  color: rgba(255,255,255,0.55);
  font-size: 0.84rem;
  margin-bottom: 10px;
  max-width: 280px;
  line-height: 1.45;
}
.footer-corp {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}
.footer-col h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 6px; }
.footer-col a {
  color: rgba(255,255,255,0.65);
  font-size: 0.86rem;
  transition: color var(--gy-dur) var(--gy-ease);
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
}
.footer-bottom .fse {
  display: flex;
  align-items: center;
  gap: 12px;
}
.flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--gy-r-sm);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}

/* ----- 19. Animaciones reveal -------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--gy-ease), transform 700ms var(--gy-ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }
.reveal[data-delay="400"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; opacity: 1; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ----- 20. Misc helpers -------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.hide-mobile { }
@media (max-width: 720px) {
  .hide-mobile { display: none !important; }
}

.text-center { text-align: center; }

/* v3 (Tania) — fondos planos sin radial glow */
/* v9 (Tania 2026-05-25) — Pennylane-style alternation:
   pares claro/destacado para dar ritmo visual entre secciones.
   No cada sección un color distinto: solo 3-4 tonos rotando. */
.bar-bg { background: var(--gy-paper); }
.bar-bg-white { background: #fff; }
.bar-bg-warm { background: var(--gy-paper-warm); }
.bar-bg-mist { background: var(--gy-blue-mist); }
/* Navy dramatic — usar UNA sola vez en la página para no abrumar */
.bar-bg-navy {
  background: var(--gy-navy);
  color: #fff;
}
.bar-bg-navy .eyebrow { color: var(--gy-blue-soft); }
.bar-bg-navy .eyebrow::before { background: var(--gy-blue-soft); }
.bar-bg-navy h1,
.bar-bg-navy h2,
.bar-bg-navy h3,
.bar-bg-navy h4,
.bar-bg-navy .display-xl,
.bar-bg-navy .display-lg,
.bar-bg-navy .display-md,
.bar-bg-navy .display-sm { color: #fff; }
.bar-bg-navy h1 em,
.bar-bg-navy h2 em,
.bar-bg-navy h3 em,
.bar-bg-navy .display-xl em,
.bar-bg-navy .display-lg em,
.bar-bg-navy .display-md em { color: var(--gy-blue-soft); }
.bar-bg-navy p { color: rgba(255, 255, 255, 0.78); }
.bar-bg-navy .lead { color: rgba(255, 255, 255, 0.82); }

/* Page intro for sub-pages · v8 Tania 2026-05-25 — header→hero pegados */
.page-intro {
  padding: clamp(20px, 2.2vw, 34px) 0 clamp(18px, 2.2vw, 32px);
  position: relative;
  overflow: hidden;
}
.page-intro .container { position: relative; z-index: 1; }

/* breadcrumb for inner pages — v8 Tania 2026-05-25 más pegado */
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--gy-mute);
  margin-bottom: 12px;
}
.crumb a { color: var(--gy-blue); font-weight: 600; }
.crumb svg { width: 14px; height: 14px; }

/* Visual logos strip */
.logos-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  margin-top: 28px;
}
.logos-strip .item {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gy-mute);
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.6;
}
.logos-strip .item svg { width: 18px; height: 18px; }

/* PagaFactu / Bot specific accents */
.feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.feature-row .mini {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-lg);
  padding: 22px;
}
.feature-row .mini .ic {
  width: 36px; height: 36px;
  border-radius: var(--gy-r-md);
  background: var(--gy-blue-soft);
  color: var(--gy-blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.feature-row .mini .ic svg { width: 18px; height: 18px; }
.feature-row .mini h4 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  color: var(--gy-navy);
}
.feature-row .mini p { color: var(--gy-navy-mid); font-size: 0.92rem; line-height: 1.55; }

/* compare table for pagafactu */
.compare {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  overflow: hidden;
  margin-top: 28px;
}
.compare table {
  width: 100%;
  border-collapse: collapse;
}
.compare th, .compare td {
  padding: 16px 18px;
  text-align: left;
  font-size: 0.94rem;
  border-bottom: 1px solid var(--gy-line-soft);
}
.compare thead th {
  background: var(--gy-paper-warm);
  color: var(--gy-navy);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
}
.compare thead th.us { color: var(--gy-blue); }
.compare tbody td { color: var(--gy-navy-mid); }
.compare tbody td:first-child { color: var(--gy-navy); font-weight: 600; }
.compare tbody td.good { color: var(--gy-navy); font-weight: 600; }
.compare tbody td.good svg { color: var(--gy-success); width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.compare tbody td.bad svg { color: #B91C1C; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.compare tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 720px) {
  .compare { overflow-x: auto; }
  .compare table { min-width: 560px; }
}

/* Channel diagram: [Autónomo] ←→ [GestoraYa] ←→ [Gestoría]
   v9 (Tania 2026-05-25) — patrón Pennylane: el "canal" se VE.
   Líneas SVG curvas con paquetes (facturas/gastos) viajando entre
   los nodos. Animación lenta, infinite loop, pause-on-hover.
   El bridge antiguo queda como variante estática (no usada). */
.bridge {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 24px 0 0;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  box-shadow: var(--gy-shadow-sm);
}
@media (max-width: 720px) {
  .bridge {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px;
  }
  .bridge .arrow { transform: rotate(90deg); }
}
.bridge .node {
  text-align: center;
  padding: 12px 8px;
}
.bridge .node .ic {
  width: 36px; height: 36px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--gy-paper-warm);
  border: 1px solid var(--gy-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--gy-navy-mid);
}
.bridge .node .ic svg { width: 18px; height: 18px; }
.bridge .node strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gy-navy);
  letter-spacing: -0.01em;
}
.bridge .node span {
  display: block;
  font-size: 0.74rem;
  color: var(--gy-mute);
  margin-top: 2px;
}
.bridge .node.hub {
  background: linear-gradient(135deg, var(--gy-blue-soft) 0%, #fff 100%);
  border-radius: var(--gy-r-lg);
  border: 1px solid var(--gy-blue-soft);
  padding: 14px 10px;
}
.bridge .node.hub .ic {
  background: var(--gy-blue);
  border-color: var(--gy-blue);
  color: #fff;
}
.bridge .node.hub strong { color: var(--gy-blue-dark); }
.bridge .arrow {
  color: var(--gy-blue);
  display: flex; align-items: center; justify-content: center;
}
.bridge .arrow svg { width: 22px; height: 22px; }

/* ----- 20b. Channel-flow (canal animado v9) ------------------
   Sustituye al bridge plano. SVG con líneas curvas y paquetes
   viajando entre los nodos. Inspirado en Pennylane / Stripe. */
.channel-flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  align-items: stretch;
  gap: 0;
  margin: 22px 0 0;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  box-shadow: var(--gy-shadow-sm);
  overflow: hidden;
}
@media (max-width: 760px) {
  .channel-flow {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 18px;
    padding: 22px 18px;
  }
}
.channel-flow .cf-node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 10px;
  background: #fff;
}
.channel-flow .cf-node .cf-ic {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  color: var(--gy-navy);
  margin-bottom: 10px;
  transition: transform var(--gy-dur) var(--gy-ease),
              box-shadow var(--gy-dur) var(--gy-ease);
}
.channel-flow .cf-node .cf-ic svg { width: 20px; height: 20px; }
.channel-flow .cf-node strong {
  display: block;
  font-family: var(--gy-font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gy-navy);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.channel-flow .cf-node span {
  display: block;
  font-size: 0.78rem;
  color: var(--gy-mute);
  margin-top: 4px;
  max-width: 180px;
}
/* Hub central: GestoraYa */
.channel-flow .cf-hub {
  background: linear-gradient(180deg, #fff 0%, var(--gy-blue-mist) 100%);
  border-radius: var(--gy-r-lg);
  border: 1px solid var(--gy-blue-soft);
  padding: 18px 14px;
  position: relative;
  z-index: 3;
  margin: 0 8px;
}
.channel-flow .cf-hub .cf-ic {
  background: linear-gradient(135deg, var(--gy-blue) 0%, var(--gy-blue-deep) 100%);
  border-color: var(--gy-blue);
  color: #fff;
  width: 52px; height: 52px;
  box-shadow: var(--gy-shadow-blue);
}
.channel-flow .cf-hub .cf-ic svg { width: 24px; height: 24px; }
.channel-flow .cf-hub strong { color: var(--gy-blue-deep); }
.channel-flow .cf-hub span { color: var(--gy-navy-mid); }
/* SVG capa overlay con las líneas y dots */
.channel-flow .cf-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 760px) {
  .channel-flow .cf-svg { display: none; }
}
.channel-flow .cf-path {
  fill: none;
  stroke: var(--gy-blue-200);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.channel-flow .cf-packet {
  fill: var(--gy-blue);
  filter: drop-shadow(0 2px 6px rgba(11, 21, 48, 0.35));
  /* offset-path en SVG: cada circle viaja por una curva absoluta.
     transform-box: fill-box garantiza que offset-path use coords
     SVG (viewBox) en lugar de las del bounding-box completo. */
  transform-box: fill-box;
  will-change: offset-distance;
}
/* Dos animaciones desfasadas: paquete A (izq→centro) y B (centro→der).
   Y dos paquetes invertidos (der→centro, centro→izq) para mostrar
   el flujo bidireccional sutilmente. */
@keyframes cf-flow-l2c {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes cf-flow-c2r {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.channel-flow .cf-packet.cf-a {
  offset-path: path('M 100 60 Q 280 20 460 60');
  offset-rotate: 0deg;
  animation: cf-flow-l2c 4.6s linear infinite;
}
.channel-flow .cf-packet.cf-b {
  offset-path: path('M 540 60 Q 720 20 900 60');
  animation: cf-flow-c2r 4.6s linear infinite;
  animation-delay: 1.6s;
}
.channel-flow .cf-packet.cf-c {
  offset-path: path('M 900 60 Q 720 100 540 60');
  animation: cf-flow-c2r 5.4s linear infinite;
  animation-delay: 3.0s;
}
.channel-flow .cf-packet.cf-d {
  offset-path: path('M 460 60 Q 280 100 100 60');
  animation: cf-flow-l2c 5.4s linear infinite;
  animation-delay: 2.2s;
}
.channel-flow:hover .cf-packet {
  animation-play-state: paused;
}
.channel-flow:hover .cf-hub .cf-ic {
  border-color: var(--gy-blue-deep);
}
/* Reduce-motion: paquetes estáticos en posición media */
@media (prefers-reduced-motion: reduce) {
  .channel-flow .cf-packet { animation: none; opacity: 0.5; }
}

/* Footer sello discreto */
.footer-fse-sello {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
  margin-top: 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--gy-r-md);
  border: 1px solid rgba(255,255,255,0.08);
  line-height: 1.4;
  max-width: 280px;
}
.footer-fse-sello svg { width: 14px; height: 14px; color: var(--gy-blue-soft); flex-shrink: 0; }

/* Use-cases */
.usecase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.usecase .card { padding: 24px; }
.usecase .card h4 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  color: var(--gy-navy);
}
.usecase .card p { color: var(--gy-navy-mid); font-size: 0.92rem; line-height: 1.55; }
.usecase .card .quote {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--gy-paper-warm);
  border-radius: var(--gy-r-md);
  font-size: 0.86rem;
  color: var(--gy-navy);
  font-style: italic;
  border-left: 3px solid var(--gy-blue);
}

/* ----- 21. Trio de cajas (Bot · Panel · PagaFactu) ----------- */
/* v3 (Tania) — gap -15%, padding -20% */
.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 920px) {
  .trio { grid-template-columns: 1fr; gap: 14px; }
}
.trio-card {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--gy-dur) var(--gy-ease),
              box-shadow var(--gy-dur) var(--gy-ease),
              border-color var(--gy-dur) var(--gy-ease);
}
/* v9 — Stripe-style: gradient sheen sutil que aparece al hover
   por detrás del contenido (z-index controlado por isolation). */
.trio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    120% 80% at 100% 0%,
    rgba(11, 21, 48, 0.08) 0%,
    rgba(11, 21, 48, 0) 60%
  );
  opacity: 0;
  transition: opacity 360ms var(--gy-ease);
  pointer-events: none;
}
.trio-card:hover {
  box-shadow: var(--gy-shadow-lg);
  border-color: var(--gy-blue-soft);
}
.trio-card:hover::before { opacity: 1; }
/* Variante navy: gradient sheen en navy en lugar de azul */
.trio-card.coral::before {
  background: radial-gradient(
    120% 80% at 100% 0%,
    rgba(11, 21, 48, 0.08) 0%,
    rgba(11, 21, 48, 0) 60%
  );
}
.trio-card.coral:hover { border-color: var(--gy-navy-300); }
/* v3 (Tania) — sin glow detrás de las tarjetas; estética Apple plana */
.trio-card::after { content: none; }
.trio-card.coral::after { content: none; }
.trio-ic {
  width: 56px; height: 56px;
  border-radius: var(--gy-r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gy-blue) 0%, var(--gy-blue-deep) 100%);
  color: #fff;
  box-shadow: var(--gy-shadow-blue);
}
.trio-ic svg { width: 28px; height: 28px; }
/* Variante .coral del trio-card es ahora marina (acentuación secundaria sin coral) */
.trio-card.coral .trio-ic {
  background: linear-gradient(135deg, var(--gy-navy) 0%, var(--gy-navy-2) 100%);
  box-shadow: 0 12px 32px -8px rgba(11, 21, 48, 0.32);
}
/* v9 — patrón Stripe: acentos por producto dentro de la misma marca.
   Aplicamos la escala azul (500 / 700 / navy) para que cada card
   tenga identidad sutil. Una sola marca, una sola paleta. */
.trio-card.accent-deep .trio-ic {
  background: linear-gradient(135deg, var(--gy-blue-700) 0%, var(--gy-blue-800) 100%);
  box-shadow: 0 12px 32px -8px rgba(23, 59, 170, 0.32);
}
.trio-card.accent-deep::before {
  background: radial-gradient(
    120% 80% at 100% 0%,
    rgba(23, 59, 170, 0.10) 0%,
    rgba(23, 59, 170, 0) 60%
  );
}
.trio-card.accent-deep .btn-coral-pill {
  background: var(--gy-blue-700);
}
.trio-card.accent-deep:hover .btn-coral-pill,
.trio-card.accent-deep .btn-coral-pill:hover {
  background: var(--gy-blue-800);
  box-shadow: 0 16px 38px -10px rgba(23, 59, 170, 0.45);
}
.trio-card h3 {
  font-family: var(--gy-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--gy-ink);
  margin: 0;
  line-height: 1.2;
}
.trio-card p {
  font-family: var(--gy-font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gy-gray-3);
  margin: 0;
}
.trio-thumb {
  position: relative;
  border-radius: var(--gy-r-md);
  overflow: hidden;
  border: 1px solid var(--gy-line);
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--gy-blue-soft) 0%, #fff 100%);
}
.trio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}
.trio-cta {
  margin-top: auto;
  padding-top: 4px;
}
/* .btn-coral-pill — ahora azul GestoraYa (CTA "Saber más" de trios) */
.btn-coral-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--gy-r-md);
  font-family: var(--gy-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: var(--gy-blue);
  color: #fff;
  box-shadow: var(--gy-shadow-blue);
  transition: transform var(--gy-dur) var(--gy-ease),
              gap var(--gy-dur) var(--gy-ease),
              background var(--gy-dur) var(--gy-ease),
              box-shadow var(--gy-dur) var(--gy-ease);
}
.btn-coral-pill:hover {
  background: var(--gy-blue-deep);
  gap: 12px;
  box-shadow: 0 16px 38px -10px rgba(11, 21, 48, 0.42);
}
.btn-coral-pill svg {
  width: 16px; height: 16px;
  transition: transform var(--gy-dur) var(--gy-ease);
}
/* v9 — patrón Stripe: la flecha del CTA "saber más" se desliza
   cuando hago hover en la tarjeta entera, no solo en el botón. */
.trio-card:hover .btn-coral-pill {
  background: var(--gy-blue-deep);
  gap: 12px;
  box-shadow: 0 16px 38px -10px rgba(11, 21, 48, 0.42);
}
.trio-card:hover .btn-coral-pill svg { transform: translateX(3px); }
.trio-card.coral:hover .btn-coral-pill {
  background: var(--gy-navy);
  box-shadow: 0 16px 38px -10px rgba(11, 21, 48, 0.40);
}
.trio-card.coral .btn-coral-pill { background: var(--gy-navy); }
.trio-card.coral .btn-coral-pill:hover { background: var(--gy-navy-2); }

/* .btn-coral-outline — ahora outline azul GestoraYa */
.btn-coral-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--gy-r-md);
  font-family: var(--gy-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  background: transparent;
  color: var(--gy-blue);
  box-shadow: inset 0 0 0 1.5px var(--gy-blue);
  transition: transform var(--gy-dur) var(--gy-ease),
              gap var(--gy-dur) var(--gy-ease),
              background var(--gy-dur) var(--gy-ease),
              color var(--gy-dur) var(--gy-ease);
}
.btn-coral-outline:hover {
  background: var(--gy-blue-mist);
  color: var(--gy-blue-deep);
  gap: 12px;
}
.btn-coral-outline svg { width: 16px; height: 16px; }

/* ----- 22. Browser frame compacto con imagen real ----------- */
/* v3 (Tania) — sin glow azul detrás del browser-frame; Apple-flat */
.browser-frame {
  max-width: 720px;
  margin: 0 auto;
  border-radius: var(--gy-r-lg);
  background: #fff;
  border: 1px solid var(--gy-line);
  box-shadow: var(--gy-shadow-lg);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.browser-frame::before { content: none; }
.browser-frame .browser-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #FBFCFE 0%, var(--gy-paper-2) 100%);
  border-bottom: 1px solid var(--gy-line);
}
.browser-frame .browser-chrome .browser-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.browser-frame .browser-chrome .browser-dots {
  display: flex; gap: 6px;
}
.browser-frame .browser-chrome .browser-dots span:nth-child(1) { background: #FF5F57; }
.browser-frame .browser-chrome .browser-dots span:nth-child(2) { background: #FEBC2E; }
.browser-frame .browser-chrome .browser-dots span:nth-child(3) { background: #28C840; }
.browser-frame .browser-chrome .browser-url {
  flex: 1;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-pill);
  font-size: 0.74rem;
  color: var(--gy-mute);
  font-family: var(--gy-mono);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 340px;
}
.browser-frame .browser-chrome .browser-url svg {
  width: 11px; height: 11px; color: var(--gy-success);
}
.browser-frame .browser-content {
  display: block;
  background: var(--gy-paper-warm);
  overflow: hidden;
}
.browser-frame .browser-content img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom-left-radius: calc(var(--gy-r-lg) - 1px);
  border-bottom-right-radius: calc(var(--gy-r-lg) - 1px);
}

/* Sección panel real — split */
.panel-real-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 980px) {
  .panel-real-split { grid-template-columns: 1fr; }
  .panel-real-split .order-2 { order: -1; }
}

/* ----- 23. Vídeo demo del bot (bot.html) -------------------- */
.bot-demo-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.bot-demo-frame {
  position: relative;
  width: 100%;
  max-width: 380px;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--gy-shadow-lg);
  line-height: 0;
}
.bot-demo-video {
  display: block;
  width: 100%;
  height: auto;
}
.bot-demo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15%;
  min-height: 56px;
  background: var(--gy-navy);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: #fff;
  font-family: var(--gy-font-display);
  line-height: 1.2;
}
.bot-demo-overlay-back {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #fff;
  opacity: 0.9;
}
.bot-demo-overlay-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gy-blue) 0%, var(--gy-blue-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.18);
}
.bot-demo-overlay-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.bot-demo-overlay-name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.15;
}
.bot-demo-overlay-sub {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.78;
  line-height: 1.2;
  margin-top: 2px;
}
@media (max-width: 480px) {
  .bot-demo-frame { max-width: 320px; }
  .bot-demo-overlay-avatar { width: 30px; height: 30px; font-size: 0.72rem; }
  .bot-demo-overlay-name { font-size: 0.88rem; }
  .bot-demo-overlay-sub { font-size: 0.68rem; }
}

/* ----- 24. Canales destacados (bot.html) -------------------- */
.channels-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 28px;
}
@media (max-width: 720px) {
  .channels-pair { grid-template-columns: 1fr; }
}
.channel-card {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--gy-dur) var(--gy-ease),
              box-shadow var(--gy-dur) var(--gy-ease),
              border-color var(--gy-dur) var(--gy-ease);
  position: relative;
  overflow: hidden;
}
.channel-card:hover {
  box-shadow: var(--gy-shadow-md);
  border-color: var(--gy-line);
}
.channel-ic {
  width: 64px; height: 64px;
  border-radius: var(--gy-r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.channel-ic svg { width: 32px; height: 32px; }
.channel-card.whatsapp .channel-ic {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  box-shadow: 0 12px 32px -8px rgba(37,211,102,0.45);
}
.channel-card.email .channel-ic {
  background: linear-gradient(135deg, var(--gy-blue) 0%, var(--gy-blue-dark) 100%);
  box-shadow: var(--gy-shadow-blue);
}
.channel-card h4 {
  font-family: var(--gy-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--gy-ink);
}
.channel-card p {
  font-family: var(--gy-font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gy-gray-3);
  margin: 0;
}
.channel-example {
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--gy-paper-warm);
  border-radius: var(--gy-r-md);
  font-size: 0.86rem;
  color: var(--gy-navy);
  border-left: 3px solid;
  font-style: italic;
}
.channel-card.whatsapp .channel-example { border-left-color: #25D366; }
.channel-card.email .channel-example { border-left-color: var(--gy-blue); }

/* CTA secundario azul · outline elegante */
.cta-coral-elegant {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: var(--gy-r-md);
  font-family: var(--gy-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  background: transparent;
  color: var(--gy-blue);
  box-shadow: inset 0 0 0 1.5px var(--gy-blue);
  transition: transform var(--gy-dur) var(--gy-ease),
              gap var(--gy-dur) var(--gy-ease),
              background var(--gy-dur) var(--gy-ease),
              color var(--gy-dur) var(--gy-ease);
}
.cta-coral-elegant:hover {
  background: var(--gy-blue-mist);
  color: var(--gy-blue-deep);
  gap: 14px;
}
.cta-coral-elegant svg { width: 16px; height: 16px; }

/* ----- 25. Bot.html — pasos + mockup compactos por fila ----- */
.bot-steps-split {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 56px);
  max-width: 980px;
  margin: 0 auto;
}
.bot-step-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.bot-step-row:nth-child(even) {
  grid-template-columns: 0.95fr 1.05fr;
}
.bot-step-row:nth-child(even) .bot-step-mock { order: -1; }
@media (max-width: 820px) {
  .bot-step-row,
  .bot-step-row:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .bot-step-row:nth-child(even) .bot-step-mock { order: 0; }
}
.bot-step-text .step-num {
  display: inline-block;
  font-family: var(--gy-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gy-blue);
  margin-bottom: 12px;
}
.bot-step-text .step-icon {
  width: 44px; height: 44px;
  border-radius: var(--gy-r-md);
  background: linear-gradient(135deg, rgba(11, 21, 48, 0.10), rgba(11, 21, 48, 0.04));
  border: 1px solid rgba(11, 21, 48, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gy-blue);
  margin-bottom: 14px;
}
.bot-step-text .step-icon svg { width: 22px; height: 22px; }
.bot-step-text h3 {
  font-family: var(--gy-font-display);
  font-size: clamp(1.15rem, 0.85rem + 1vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--gy-ink);
  line-height: 1.2;
  margin-bottom: 10px;
}
.bot-step-text p {
  font-family: var(--gy-font-body);
  color: var(--gy-gray-3);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}
.bot-step-mock {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* phone-mini · más pequeño para el split (Tania v3: max 240px) */
.phone.phone-mini {
  max-width: 200px;
  margin: 0 auto;
}
.phone.phone-mini .phone-screen { border-radius: 22px; }
.phone.phone-mini .wa-body { max-height: 280px; }
.phone.phone-mini .phone-notch { width: 70px; height: 20px; }
.bot-step-mock { justify-content: flex-start; }
.bot-step-row:nth-child(even) .bot-step-mock { justify-content: flex-end; }
@media (max-width: 820px) {
  .bot-step-mock,
  .bot-step-row:nth-child(even) .bot-step-mock { justify-content: center; }
}

/* Email-mock (paso 01) */
.email-mock {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-lg);
  box-shadow: var(--gy-shadow-md);
  padding: 18px 18px 20px;
  max-width: 320px;
  width: 100%;
}
.email-mock-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gy-line);
}
.email-mock-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gy-blue) 0%, var(--gy-blue-dark) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.email-mock-meta { min-width: 0; }
.email-mock-from {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--gy-navy);
  letter-spacing: -0.01em;
}
.email-mock-sub {
  font-family: var(--gy-mono);
  font-size: 0.72rem;
  color: var(--gy-mute);
  margin-top: 2px;
}
.email-mock-body {
  padding-top: 14px;
  font-size: 0.9rem;
  color: var(--gy-navy-mid);
  line-height: 1.55;
}
.email-mock-body strong {
  color: var(--gy-navy);
  font-size: 0.95rem;
  display: block;
  margin-bottom: 8px;
}
.email-mock-body p { margin: 0 0 12px; }
.email-mock-cta {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gy-blue);
}

/* ----- 26. Bot.html — cierre "el bot es el canal" ----------- */
.canal-statement {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.canal-statement h2 {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  margin: 14px 0 18px;
  line-height: 1.25;
}
.canal-close {
  display: inline-block;
  font-family: var(--gy-font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gy-blue-deep);
  padding: 8px 16px;
  background: var(--gy-blue-mist);
  border-radius: var(--gy-r-pill);
  margin: 0;
}

/* ----- 27. Bot.html — panel web del autónomo (nota) -------- */
.auto-panel-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 22px 26px;
  background: var(--gy-paper-warm);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-lg);
}
@media (max-width: 620px) {
  .auto-panel-note { grid-template-columns: 1fr; text-align: left; }
}
.auto-panel-ic {
  width: 52px; height: 52px;
  border-radius: var(--gy-r-md);
  background: linear-gradient(135deg, var(--gy-blue) 0%, var(--gy-blue-dark) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.auto-panel-ic svg { width: 24px; height: 24px; }
.auto-panel-note h3 {
  font-family: var(--gy-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gy-ink);
  margin-bottom: 6px;
}
.auto-panel-note p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--gy-navy-mid);
}

/* ----- 28. Panel.html — fusión hero + features ------------- */
.panel-hero-merge {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
}
.panel-hero-text {
  max-width: 780px;
}
.panel-hero-text h1 {
  margin: 14px 0 18px;
}
.panel-hero-mock {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.panel-features-inline {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 22px;
  max-width: 980px;
}
.panel-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
}
.panel-feature .ic {
  width: 34px; height: 34px;
  border-radius: var(--gy-r-md);
  background: var(--gy-blue-mist);
  color: var(--gy-blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.panel-feature .ic svg { width: 18px; height: 18px; }
.panel-feature h4 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gy-navy);
  margin-bottom: 4px;
}
.panel-feature p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--gy-navy-mid);
  margin: 0;
}

/* ----- 29. PagaFactu.html — modelo de comisión 3 cols ------ */
.split-model {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
@media (max-width: 820px) {
  .split-model { grid-template-columns: 1fr; }
}
.split-model-card {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.split-model-card.is-highlight {
  border-color: rgba(11, 21, 48, 0.28);
  background: linear-gradient(180deg, rgba(11, 21, 48, 0.04) 0%, #fff 100%);
}
.split-model-card .who {
  font-family: var(--gy-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--gy-blue);
  text-transform: uppercase;
}
.split-model-card h3 {
  font-family: var(--gy-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gy-ink);
  line-height: 1.25;
  margin: 0;
}
.split-model-card .price {
  font-family: var(--gy-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--gy-ink);
}
.split-model-card .price small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gy-mute);
  margin-left: 4px;
}
.split-model-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gy-navy-mid);
}
.split-model-card.is-highlight .who { color: var(--gy-blue-deep); }

/* PagaFactu compare table — más compacta */
.compare.compare-tight table { table-layout: auto; }
.compare.compare-tight th,
.compare.compare-tight td {
  padding: 10px 12px !important;
  font-size: 0.84rem !important;
}
.compare.compare-tight thead th { font-size: 0.78rem !important; }

/* ============================================================
   30. Panel anatomy — captura central rodeada de callouts
   v3 (Tania) · estilo Apple "anatomy of iPhone"
   ============================================================ */
.panel-anatomy {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1.4fr) minmax(180px, 240px);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
@media (max-width: 980px) {
  .panel-anatomy {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.panel-anatomy-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.panel-anatomy-capture {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.panel-anatomy-capture .browser-frame {
  max-width: 100%;
  box-shadow: var(--gy-shadow-lg);
}

/* Columnas laterales con callouts */
.panel-anatomy-side {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 56px);
  min-width: 0;
}
.panel-anatomy-side.left { align-items: flex-end; text-align: right; }
.panel-anatomy-side.right { align-items: flex-start; text-align: left; }

@media (max-width: 980px) {
  .panel-anatomy-side,
  .panel-anatomy-side.left,
  .panel-anatomy-side.right {
    align-items: stretch;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
  }
  .panel-anatomy-stage { order: -1; }
}

.callout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 220px;
}
.panel-anatomy-side.left .callout { align-items: flex-end; }
.panel-anatomy-side.right .callout { align-items: flex-start; }
@media (max-width: 980px) {
  .callout {
    flex: 1 1 200px;
    max-width: none;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--gy-line);
    border-radius: var(--gy-r-md);
  }
}
.callout-ic {
  width: 32px; height: 32px;
  border-radius: var(--gy-r-sm);
  background: var(--gy-blue-mist);
  color: var(--gy-blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.callout-ic svg { width: 16px; height: 16px; }
.callout h4 {
  font-family: var(--gy-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gy-ink);
  margin: 0;
  line-height: 1.2;
}
.callout p {
  font-family: var(--gy-font-body);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--gy-gray-3);
  margin: 0;
}

/* ============================================================
   31. Hero compacto · texto + mockup (Apple-like, v4 Tania)
   ───────────────────────────────────────────────────────────
   Objetivo: hero COMPLETO (header + texto + mockup) debe caber
   en una pantalla 1440×900 sin scroll. Dimensiones radicalmente
   contenidas. NO foto — mockup HTML/CSS controlado.
   ============================================================ */
.hero-with-image {
  position: relative;
  /* v8 (Tania 2026-05-25) — header→hero casi pegados */
  padding: clamp(18px, 2vw, 30px) 0 clamp(18px, 2vw, 32px);
  overflow: hidden;
}
.hero-with-image .hero-bg { background: #fff; }
.hero-with-image-grid {
  display: grid;
  /* v7 (Tania 2026-05-25): el vídeo transparente pesa más visualmente
     y vive más cerca del texto. Columna del vídeo con más espacio y
     gap reducido para que el contenido del WebM "respire" al lado de
     las letras sin separarse. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: center;
}
@media (max-width: 880px) {
  .hero-with-image-grid { grid-template-columns: 1fr; gap: 20px; }
}
.hero-with-image-text { max-width: 560px; }
.hero-with-image-text .eyebrow { margin-bottom: 10px; }
.hero-with-image-text h1 {
  margin: 0 0 14px;
  font-family: var(--gy-font-display);
  font-weight: 500;
  /* Compactación dramática (Tania v4): el hero entero debe caber
     en 1440×900. v9 (2026-05-25): leve subida controlada para
     ganar presencia editorial estilo Brex/Stripe, sin romper la
     compactación. Antes: clamp(1.6, 1.2+1vw, 2.4). */
  font-size: clamp(1.75rem, 1.25rem + 1.15vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--gy-ink);
}
.hero-with-image-text h1 em {
  font-style: normal;
  color: var(--gy-blue);
}
/* H1 con jerarquía interna: la primera parte en peso 800
   (declaración fuerte), la segunda (cuando se use) en peso 500. */
.hero-h1-split .strong {
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--gy-ink);
}
.hero-h1-split .light {
  font-weight: 500;
  color: var(--gy-gray-3);
  display: block;
  margin-top: 2px;
}
.hero-with-image-text .lead {
  margin-bottom: 18px;
  max-width: 520px;
  font-size: clamp(0.9rem, 0.84rem + 0.2vw, 1rem);
  line-height: 1.5;
  color: var(--gy-gray-3);
}
.hero-sub-tight { margin-top: 0; }
.hero-sub-tight em {
  font-style: normal;
  color: var(--gy-blue);
  font-weight: 700;
}
/* Juego YA/IA en el H1: ambos en azul y peso fuerte (Tania v4) */
.hero-h1-split .strong em {
  font-style: normal;
  color: var(--gy-blue);
  font-weight: 700;
}
.hero-with-image-text .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 0;
}
.hero-with-image-text .hero-ctas .btn {
  padding: 10px 18px;
  font-size: 0.92rem;
}
.hero-with-image-text .hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--gy-gray-2);
  font-family: var(--gy-font-body);
  font-size: 0.82rem;
}

/* ============================================================
   31b. Hero mockup · chat WhatsApp en miniatura (sustituye foto)
   ───────────────────────────────────────────────────────────
   Apple-style: producto en miniatura, no humanos. Encadenado
   visual con la promesa del hero (factura por WhatsApp).
   ============================================================ */
.hero-mock {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 380px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .hero-mock { max-width: 320px; }
}
.hero-mock-chat {
  width: 100%;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  box-shadow: var(--gy-shadow-lg);
  overflow: hidden;
  font-family: var(--gy-font-body);
}
.hero-mock-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--gy-paper);
  border-bottom: 1px solid var(--gy-line);
}
.hero-mock-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gy-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.74rem;
  flex-shrink: 0;
}
.hero-mock-meta { flex: 1; min-width: 0; }
.hero-mock-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--gy-ink);
  line-height: 1.1;
}
.hero-mock-sub {
  font-size: 0.7rem;
  color: var(--gy-gray-2);
  margin-top: 2px;
}
.hero-mock-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gy-success);
  box-shadow: 0 0 0 3px rgba(21, 168, 98, 0.18);
  flex-shrink: 0;
}
.hero-mock-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, #FBFCFE 0%, #F6F8FE 100%);
}
.hero-mock-bubble {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 0.8rem;
  line-height: 1.35;
  max-width: 86%;
}
.hero-mock-bubble.out {
  background: var(--gy-blue);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.hero-mock-bubble.out.small { font-size: 0.75rem; padding: 6px 10px; }
.hero-mock-bubble.in {
  background: #fff;
  color: var(--gy-ink);
  border: 1px solid var(--gy-line);
  margin-right: auto;
  border-bottom-left-radius: 4px;
  padding: 6px;
}
.hero-mock-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
}
.hero-mock-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.74rem;
}
.hero-mock-card-row span { color: var(--gy-gray-2); }
.hero-mock-card-row strong { color: var(--gy-ink); font-weight: 700; }
.hero-mock-card-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--gy-line);
  color: var(--gy-success);
  font-size: 0.72rem;
  font-weight: 600;
}
.hero-mock-card-ok svg { width: 12px; height: 12px; }

/* Atenuar el highlight-ya — Tania v3 dice "menos abuso" */
.highlight-ya { color: var(--gy-blue); }
.highlight-ya::after { opacity: 0.14; }

/* ============================================================
   32. Factura desglosada · anatomía estilo Apple (bot.html)
   ───────────────────────────────────────────────────────────
   Nueva sección v4 (Tania): replica el modelo de panel-anatomy
   pero centrado en una factura mockup HTML/CSS rodeada de 4
   callouts (QR VeriFactu, Datos fiscales, IVA, Enlace de pago).
   ============================================================ */
.factura-anatomy {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1.2fr) minmax(180px, 240px);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
@media (max-width: 980px) {
  .factura-anatomy {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
.factura-anatomy-stage {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.factura-anatomy-side {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 56px);
  min-width: 0;
}
.factura-anatomy-side.left { align-items: flex-end; text-align: right; }
.factura-anatomy-side.right { align-items: flex-start; text-align: left; }
.factura-anatomy-side.left .callout { align-items: flex-end; }
.factura-anatomy-side.right .callout { align-items: flex-start; }
@media (max-width: 980px) {
  .factura-anatomy-side,
  .factura-anatomy-side.left,
  .factura-anatomy-side.right {
    align-items: stretch;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
  }
  .factura-anatomy-stage { order: -1; }
}

/* Mockup de factura HTML/CSS — Apple-clean, tipografía limpia */
.factura-mockup {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-lg);
  box-shadow: var(--gy-shadow-lg);
  overflow: hidden;
  font-family: var(--gy-font-body);
  color: var(--gy-ink);
}
.factura-mockup-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--gy-line-soft);
}
.factura-mockup-logo {
  font-family: var(--gy-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--gy-navy);
}
.factura-mockup-logo small {
  display: block;
  font-family: var(--gy-font-body);
  font-weight: 500;
  font-size: 0.62rem;
  color: var(--gy-gray-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 2px;
}
.factura-mockup-num {
  font-family: var(--gy-font-mono);
  font-size: 0.78rem;
  color: var(--gy-gray-3);
  text-align: right;
}
.factura-mockup-num strong {
  display: block;
  color: var(--gy-ink);
  font-size: 0.86rem;
  margin-top: 2px;
}
.factura-mockup-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--gy-line-soft);
  font-size: 0.74rem;
}
.factura-mockup-parties .label {
  display: block;
  color: var(--gy-gray-2);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.factura-mockup-parties strong {
  display: block;
  color: var(--gy-ink);
  font-weight: 700;
  line-height: 1.3;
}
.factura-mockup-parties .nif {
  display: block;
  color: var(--gy-gray-3);
  font-family: var(--gy-font-mono);
  font-size: 0.7rem;
  margin-top: 2px;
}
.factura-mockup-lines {
  padding: 12px 22px 6px;
  font-size: 0.74rem;
}
.factura-mockup-lines table {
  width: 100%;
  border-collapse: collapse;
}
.factura-mockup-lines th {
  text-align: left;
  font-weight: 600;
  color: var(--gy-gray-2);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--gy-line-soft);
}
.factura-mockup-lines th:last-child,
.factura-mockup-lines td:last-child { text-align: right; }
.factura-mockup-lines td {
  padding: 8px 0;
  color: var(--gy-ink);
  border-bottom: 1px solid var(--gy-line-soft);
}
.factura-mockup-totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 22px 14px;
  font-size: 0.76rem;
  border-bottom: 1px solid var(--gy-line);
}
.factura-mockup-totals-row {
  display: flex;
  justify-content: space-between;
}
.factura-mockup-totals-row span { color: var(--gy-gray-3); }
.factura-mockup-totals-row strong { color: var(--gy-ink); font-weight: 600; }
.factura-mockup-totals-row.total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--gy-line-soft);
  font-size: 0.92rem;
}
.factura-mockup-totals-row.total strong { font-weight: 700; }
.factura-mockup-foot {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 22px 18px;
  background: var(--gy-paper);
}
.factura-mockup-qr {
  width: 60px;
  height: 60px;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: 6px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.factura-mockup-qr svg { width: 100%; height: 100%; }
.factura-mockup-pago {
  font-size: 0.7rem;
  color: var(--gy-gray-3);
  line-height: 1.4;
}
.factura-mockup-pago .label {
  display: block;
  color: var(--gy-gray-2);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.factura-mockup-pago a {
  color: var(--gy-blue);
  font-family: var(--gy-font-mono);
  font-size: 0.72rem;
  word-break: break-all;
}

/* ============================================================
   33. Vídeo hero (index.html) — v7 (Tania 2026-05-25)
   ────────────────────────────────────────────────────────────
   El vídeo ya NO va en un marco tipo iPhone. Se sirve un WebM
   con canal alfa (fondo transparente) que flota directamente
   sobre el fondo del hero, integrándose con la composición.
   MP4 con fondo queda como fallback para Safari (degradación
   elegante: el WebM-alpha no se soporta universalmente en
   WebKit y se cae al MP4 con fondo).

   Las clases .hero-video-wrap / .hero-video-frame / .hero-video
   y .hero-video-overlay se conservan más abajo como utility
   reutilizable por si se necesita un mockup móvil con fondo en
   otras páginas — pero NO se instancian en el index.html.
   ============================================================ */
.hero-video-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}
.hero-video-transparent {
  display: block;
  width: 100%;
  /* Apaisado y grande (Tania). 560 px de ancho en desktop,
     se reduce en pantallas medias y mobile. */
  max-width: 560px;
  height: auto;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
@media (max-width: 1100px) {
  .hero-video-transparent { max-width: 500px; }
}
@media (max-width: 880px) {
  .hero-video-transparent { max-width: 420px; }
}
@media (max-width: 480px) {
  .hero-video-transparent { max-width: 340px; }
}

/* Mockup heredado (NO se usa en el index v7 — disponible como
   utility por si otra página la necesita). */
.hero-video-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .hero-video-wrap { max-width: 300px; }
}
.hero-video-frame {
  position: relative;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--gy-shadow-lg);
  line-height: 0;
}
.hero-video {
  display: block;
  width: 100%;
  height: auto;
}
/* Overlay tipo "barra superior de WhatsApp" — replica de bot.html
   pero con la marca GestoraYa en lugar del nombre de la asesoría
   demo. Si el vídeo no necesita overlay (no muestra otra marca),
   añadir .no-overlay al wrap para ocultarlo. */
.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15%;
  min-height: 52px;
  background: var(--gy-navy);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: #fff;
  font-family: var(--gy-font-display);
  line-height: 1.2;
}
.hero-video-wrap.no-overlay .hero-video-overlay { display: none; }
.hero-video-overlay-back {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #fff;
  opacity: 0.9;
}
.hero-video-overlay-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gy-blue) 0%, var(--gy-blue-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.18);
}
.hero-video-overlay-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.hero-video-overlay-name {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.15;
}
.hero-video-overlay-sub {
  font-size: 0.66rem;
  font-weight: 400;
  opacity: 0.78;
  line-height: 1.2;
  margin-top: 2px;
}

/* ============================================================
   34. CTA "Reservar demo" (index.html) — sustituye al pricing
   v5 (Tania): sección compacta, profesional, sin urgencia.
   ============================================================ */
.demo-cta {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  /* v8 (Tania 2026-05-25) — padding -20% adicional */
  padding: clamp(22px, 2.6vw, 36px) clamp(20px, 2.4vw, 32px);
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  box-shadow: var(--gy-shadow-sm);
}
.demo-cta .eyebrow {
  justify-content: center;
  margin-bottom: 8px;
}
.demo-cta h2 {
  margin: 0 0 8px;
}
.demo-cta p {
  margin: 0 auto 16px;
  max-width: 560px;
  color: var(--gy-gray-3);
  font-size: 1rem;
  line-height: 1.55;
}
.demo-cta .btns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* ============================================================
   35. bot.html — "3 movimientos" en grid horizontal de 3 cols
   v5 (Tania): los pasos del autónomo en cajas compactas, no
   en filas con mockup. Mockups se mantienen sólo en desktop
   wide opcional via .bot-steps-compact.
   ============================================================ */
.bot-steps-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .bot-steps-compact { grid-template-columns: 1fr; gap: 14px; }
}
.bot-step-compact {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  /* v8 (Tania 2026-05-25) — padding -20% adicional */
  padding: 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--gy-dur) var(--gy-ease),
              box-shadow var(--gy-dur) var(--gy-ease);
}
.bot-step-compact:hover {
  box-shadow: var(--gy-shadow-md);
}
.bot-step-compact .step-num {
  font-family: var(--gy-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gy-blue);
}
.bot-step-compact .step-icon {
  width: 42px; height: 42px;
  border-radius: var(--gy-r-md);
  background: linear-gradient(135deg, rgba(11, 21, 48, 0.10), rgba(11, 21, 48, 0.04));
  border: 1px solid rgba(11, 21, 48, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gy-blue);
}
.bot-step-compact .step-icon svg { width: 20px; height: 20px; }
.bot-step-compact h3 {
  font-family: var(--gy-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gy-ink);
  line-height: 1.25;
  margin: 0;
}
.bot-step-compact p {
  font-family: var(--gy-font-body);
  color: var(--gy-gray-3);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   36. bot.html — compactaciones del hero y de channels-pair
   v5 (Tania): menos padding y elementos más comedidos.
   ============================================================ */
.hero.hero-tight {
  /* v8 (Tania 2026-05-25) — header→hero casi pegados */
  padding: clamp(16px, 1.8vw, 26px) 0 clamp(16px, 2vw, 28px);
}
.hero.hero-tight .hero-grid {
  gap: clamp(28px, 4vw, 56px);
}
.hero.hero-tight h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  line-height: 1.08;
  margin-bottom: 12px;
}
.hero.hero-tight .lead {
  font-size: clamp(0.92rem, 0.86rem + 0.22vw, 1rem);
  line-height: 1.5;
  margin-bottom: 16px;
}
.hero.hero-tight .hero-pills { margin-top: 6px; }
.hero.hero-tight .bot-demo-frame { max-width: 240px; border-radius: 22px; }
.hero.hero-tight .bot-demo-overlay-avatar { width: 28px; height: 28px; font-size: 0.7rem; }
.hero.hero-tight .bot-demo-overlay-name { font-size: 0.82rem; }
.hero.hero-tight .bot-demo-overlay-sub { font-size: 0.66rem; }

/* channels-pair compactas */
.channels-pair.channels-pair-tight {
  gap: 16px;
}
.channels-pair.channels-pair-tight .channel-card {
  padding: 20px 20px;
  gap: 10px;
}
.channels-pair.channels-pair-tight .channel-ic {
  width: 48px; height: 48px;
}
.channels-pair.channels-pair-tight .channel-ic svg { width: 24px; height: 24px; }
.channels-pair.channels-pair-tight .channel-card h4 { font-size: 1.08rem; }
.channels-pair.channels-pair-tight .channel-card p { font-size: 0.88rem; }
.channels-pair.channels-pair-tight .channel-example { font-size: 0.8rem; padding: 10px 12px; }

/* ============================================================
   37. panel.html — foto Unsplash en hero (manos en portátil)
   v5 (Tania): visual lateral del hero con foto libre de derechos.
   ============================================================ */
.panel-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 880px) {
  .panel-hero-grid { grid-template-columns: 1fr; gap: 24px; }
}
.panel-hero-photo {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  border-radius: var(--gy-r-xl);
  overflow: hidden;
  box-shadow: var(--gy-shadow-lg);
  background: var(--gy-paper);
  aspect-ratio: 4 / 3;
}
.panel-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   38. bot.html — "3 movimientos" v6: mini-mockup móvil DENTRO
   de cada caja. Cada caja en grid auto 1fr (phone | text).
   Las 3 cajas caben en 1 línea en desktop. Mobile: 1 col.
   ============================================================ */
.micro-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .micro-steps { grid-template-columns: 1fr; gap: 16px; }
}
.micro-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  /* v8 (Tania 2026-05-25) — padding -20% adicional */
  padding: 14px 14px 14px 13px;
  transition: transform var(--gy-dur) var(--gy-ease),
              box-shadow var(--gy-dur) var(--gy-ease);
  min-width: 0;
}
.micro-step:hover {
  box-shadow: var(--gy-shadow-md);
}
.micro-phone {
  width: 86px;
  flex-shrink: 0;
  aspect-ratio: 9 / 17;
  border-radius: 16px;
  background: linear-gradient(180deg, #0E1B2C 0%, #1A2942 100%);
  padding: 7px 5px;
  position: relative;
  box-shadow: 0 6px 16px rgba(14, 27, 44, 0.18),
              inset 0 0 0 1.5px rgba(255,255,255,0.06);
  overflow: hidden;
}
.micro-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
  position: relative;
  font-family: var(--gy-font-body);
  display: flex;
  flex-direction: column;
}
.micro-phone-bar {
  background: var(--gy-navy);
  color: #fff;
  font-size: 6.6px;
  font-weight: 600;
  padding: 5px 6px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.1;
}
.micro-phone-bar .dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gy-blue) 0%, var(--gy-blue-dark) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 5.4px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.micro-phone-body {
  flex: 1;
  background: #ECE5DD; /* fondo tipo WhatsApp para chats */
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 5.8px;
  line-height: 1.25;
  overflow: hidden;
}
.micro-phone-body.plain {
  background: #fff;
  padding: 6px 6px;
}
.micro-bubble {
  max-width: 86%;
  padding: 3.5px 5px;
  border-radius: 6px;
  background: #fff;
  color: var(--gy-ink);
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.micro-bubble.me {
  background: #DCF8C6;
  margin-left: auto;
  border-radius: 6px 6px 1px 6px;
}
.micro-bubble.bot {
  background: #fff;
  border-radius: 1px 6px 6px 6px;
}
.micro-bubble.attach {
  padding: 0;
  overflow: hidden;
  background: #f6efe7;
}
.micro-bubble.attach .ticket {
  height: 32px;
  background:
    repeating-linear-gradient(90deg, #cbb89a 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #f6efe7 0%, #ead8c4 100%);
  display: block;
}
.micro-bubble.attach .ticket-foot {
  padding: 2px 4px;
  font-size: 5.4px;
  color: var(--gy-gray-3);
}
.micro-email {
  padding: 5px 6px;
  border-radius: 5px;
  border: 1px solid #E5E8EE;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.micro-email .from {
  font-size: 5.6px;
  color: var(--gy-gray-3);
}
.micro-email .subject {
  font-size: 6.2px;
  font-weight: 700;
  color: var(--gy-ink);
  letter-spacing: -0.02em;
}
.micro-email .body {
  font-size: 5.4px;
  color: var(--gy-gray-3);
  line-height: 1.3;
}
.micro-content {
  min-width: 0;
}
.micro-content .step-num {
  font-family: var(--gy-font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gy-blue);
  margin-bottom: 6px;
}
.micro-content h3 {
  font-family: var(--gy-font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gy-ink);
  line-height: 1.22;
  margin: 0 0 6px;
}
.micro-content p {
  font-family: var(--gy-font-body);
  color: var(--gy-gray-3);
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 880px) {
  .micro-phone { width: 96px; }
}

/* ============================================================
   39. Foto Unsplash en index — "manos con móvil"
   v6 (Tania): visual lateral entre secciones. Sin protagonismo.
   ============================================================ */
.feature-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .feature-photo { grid-template-columns: 1fr; gap: 24px; }
}
.feature-photo-media {
  position: relative;
  width: 100%;
  border-radius: var(--gy-r-xl);
  overflow: hidden;
  box-shadow: var(--gy-shadow-lg);
  aspect-ratio: 4 / 3;
  background: var(--gy-paper);
}
.feature-photo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feature-photo-text .eyebrow { margin-bottom: 10px; }
.feature-photo-text h3 {
  font-family: var(--gy-font-display);
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gy-ink);
  line-height: 1.1;
  margin: 0 0 12px;
}
.feature-photo-text p {
  font-family: var(--gy-font-body);
  font-size: 1rem;
  color: var(--gy-gray-3);
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   40. bot.html — foto robot Unsplash en hero
   v6 (Tania): complementa el vídeo del bot — encima del bot-demo
   en un panel limpio, paleta neutra/azul.
   ============================================================ */
.bot-robot-photo {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 24px auto 0;
  border-radius: var(--gy-r-xl);
  overflow: hidden;
  box-shadow: var(--gy-shadow-lg);
  aspect-ratio: 16 / 10;
  background: var(--gy-paper);
}
.bot-robot-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   ============================================================
   v10 · 2026-05-25 · REDISEÑO RADICAL (Tania)
   Patrones aplicados con fuerza: Stripe, Brex, Pennylane.
   Clases nuevas, las antiguas se conservan como deprecated
   para no romper sub-páginas.
   ============================================================
   ============================================================ */

/* ----- v10-1. HERO MEGA (Brex/Stripe) ----------------------- */
.hero-mega {
  position: relative;
  /* Hero generoso, no apaisado: la primera impresión necesita aire arriba
     (separa del header) y abajo (respeta la transición a la siguiente
     sección sin embutirla). */
  padding: clamp(40px, 5vw, 80px) 0 var(--gy-section-y-hero);
  overflow: hidden;
  background: var(--gy-paper);
}
.hero-mega .hero-bg {
  display: none;
}
.hero-mega .container { position: relative; z-index: 1; }

.hero-mega-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
}
@media (max-width: 960px) {
  .hero-mega-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.hero-mega-text { max-width: 620px; }
.hero-mega-text .eyebrow { margin-bottom: 24px; }

.hero-mega-h1 {
  margin: 0 0 clamp(16px, 2vw, 28px);
  font-family: var(--gy-font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--gy-ink);
}
.hero-mega-h1 .strong {
  font-weight: 700;
  letter-spacing: -0.04em;
}
.hero-mega-h1 em {
  font-style: normal;
  color: var(--gy-blue);
  font-weight: 700;
}

.hero-mega-sub {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1.05rem);
  line-height: 1.5;
  color: var(--gy-gray-3);
  max-width: 540px;
}
.hero-mega-sub em {
  font-style: normal;
  color: var(--gy-blue);
  font-weight: 700;
}

.hero-mega .hero-ctas { gap: 12px; margin-top: 0; }
.hero-mega .hero-meta {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-mega .hero-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--gy-blue-mist);
  color: var(--gy-blue-deep);
  border-radius: 999px;
  font-family: var(--gy-font-body);
  font-weight: 500;
  font-size: 0.82rem;
}
.hero-mega .hero-meta-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gy-blue);
}
.hero-mega .hero-meta-sep {
  color: var(--gy-ink-300);
  opacity: 0.5;
}
.hero-mega .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(11, 21, 48, 0.04);
  border-radius: 999px;
  color: var(--gy-ink-700);
  font-family: var(--gy-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}
.hero-mega .eyebrow svg { color: var(--gy-blue); }
.hero-mega .hero-with-ia { color: var(--gy-ink); white-space: nowrap; }

.hero-mega-stage {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin: 0;
}
/* Imagen hero con browser frame (v13 Tania, sustituye al vídeo) */
.hero-mega-figure {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0;
  background: #FFFFFF;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-lg);
  box-shadow: 0 12px 36px -12px rgba(11, 21, 48, 0.20);
  overflow: hidden;
}
.hero-mega-figure-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--gy-paper-2);
  border-bottom: 1px solid var(--gy-line);
}
.hero-mega-figure-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gy-line-strong);
}
.hero-mega-figure-url {
  margin-left: 8px;
  font-family: var(--gy-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--gy-ink-400);
}
.hero-mega-image {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 1200px) { .hero-mega-figure { max-width: 420px; } }
@media (max-width: 960px) {
  .hero-mega-stage { justify-content: center; }
  .hero-mega-figure { max-width: 380px; }
}
@media (max-width: 560px) { .hero-mega-figure { max-width: 320px; } }

/* Legacy keep for safety (no-op si .hero-mega-video desaparece) */
.hero-mega-video {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
}

/* ----- v13 Tania · Credibility THIN strip ------------------ */
.cred-thin {
  background: var(--gy-paper-2);
  padding: 10px 0;
  border-top: 1px solid var(--gy-line);
  border-bottom: 1px solid var(--gy-line);
}
.cred-thin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
}
.cred-thin-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gy-font-body);
  font-size: 0.82rem;
  color: var(--gy-ink-600);
  line-height: 1.2;
  white-space: nowrap;
}
.cred-thin-list li svg {
  width: 14px;
  height: 14px;
  color: var(--gy-blue);
  flex-shrink: 0;
}
.cred-thin-list li strong {
  color: var(--gy-ink);
  font-weight: 600;
}
@media (max-width: 720px) {
  .cred-thin-list { gap: 10px 18px; }
  .cred-thin-list li { font-size: 0.76rem; white-space: normal; }
}

/* ----- (legacy stats — ya no se usa pero conserva tokens) ---- */
.credibility-strip {
  background: var(--gy-paper-2);
  padding: clamp(36px, 4vw, 56px) 0;
  border-top: 1px solid var(--gy-line);
  border-bottom: 1px solid var(--gy-line);
}
.cred-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}
@media (max-width: 920px) {
  .cred-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 480px) {
  .cred-strip-grid { grid-template-columns: 1fr; gap: 22px; }
}
.cred-strip-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.cred-strip-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: clamp(-12px, -1.5vw, -22px);
  bottom: 8px;
  width: 1px;
  background: var(--gy-line);
}
@media (max-width: 920px) {
  .cred-strip-item:not(:last-child)::after { display: none; }
}
.cred-strip-figure {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gy-blue);
}
.cred-strip-figure svg { width: 32px; height: 32px; flex-shrink: 0; }
.cred-strip-num {
  font-family: var(--gy-font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--gy-ink);
  line-height: 1;
}
.cred-strip-label {
  font-family: var(--gy-font-body);
  font-size: 0.92rem;
  color: var(--gy-gray-3);
  line-height: 1.45;
  margin: 0;
}
.cred-strip-label strong {
  color: var(--gy-ink);
  font-weight: 700;
}

/* ----- v10-3. CHANNEL MEGA (Pennylane visual grande) -------- */
.section-channel {
  background: linear-gradient(180deg, var(--gy-paper) 0%, var(--gy-blue-mist) 100%);
  padding: var(--gy-section-y) 0;
}
.channel-mega {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 0;
  align-items: center;
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  padding: clamp(18px, 2.2vw, 28px) clamp(14px, 2vw, 26px);
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  box-shadow: 0 2px 14px -8px rgba(11, 21, 48, 0.10);
  min-height: 200px;
  overflow: hidden;
}
@media (max-width: 880px) {
  .channel-mega {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 22px;
    padding: 22px 18px;
    min-height: 0;
  }
}

.cm-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 880px) {
  .cm-svg { display: none; }
}
.cm-path {
  fill: none;
  stroke: var(--gy-blue-300);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 3 6;
  opacity: 0.65;
}
.cm-path-ret {
  stroke: var(--gy-blue-200);
  stroke-dasharray: 2 8;
  opacity: 0.45;
}
.cm-packet {
  fill: var(--gy-blue);
  filter: drop-shadow(0 3px 10px rgba(11, 21, 48, 0.45));
  transform-box: fill-box;
  will-change: offset-distance;
}
@keyframes cm-flow {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.cm-packet.cm-a {
  offset-path: path('M 180 160 C 360 60, 520 60, 600 160');
  animation: cm-flow 5s linear infinite;
}
.cm-packet.cm-b {
  offset-path: path('M 600 160 C 680 60, 840 60, 1020 160');
  animation: cm-flow 5s linear infinite;
  animation-delay: 1.6s;
}
.cm-packet.cm-c {
  offset-path: path('M 1020 160 C 840 260, 680 260, 600 160');
  animation: cm-flow 6s linear infinite;
  animation-delay: 3s;
  fill: var(--gy-blue-400);
}
.cm-packet.cm-d {
  offset-path: path('M 600 160 C 520 260, 360 260, 180 160');
  animation: cm-flow 6s linear infinite;
  animation-delay: 2s;
  fill: var(--gy-blue-400);
}
.cm-packet.cm-e {
  offset-path: path('M 180 160 C 360 60, 520 60, 600 160');
  animation: cm-flow 5s linear infinite;
  animation-delay: 3.2s;
  fill: var(--gy-blue-600);
}
.cm-packet.cm-f {
  offset-path: path('M 600 160 C 680 60, 840 60, 1020 160');
  animation: cm-flow 5s linear infinite;
  animation-delay: 4s;
  fill: var(--gy-blue-600);
}
.channel-mega:hover .cm-packet { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cm-packet { animation: none; opacity: 0.6; }
}

/* Tarjetas laterales (Autónomo / Gestoría) · v11: padding -20% */
.cm-card {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-lg);
  padding: 14px 14px;
  box-shadow: var(--gy-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 240px;
}
.cm-card-left {
  justify-self: start;
  border-top: 3px solid var(--gy-whatsapp);
}
.cm-card-left .cm-card-ic {
  background: rgba(37, 211, 102, 0.12);
  color: var(--gy-whatsapp-ink);
}
.cm-card-right {
  justify-self: end;
  border-top: 3px solid var(--gy-blue);
}
.cm-card-right .cm-card-ic {
  background: var(--gy-blue-mist);
  color: var(--gy-blue-deep);
}
@media (max-width: 880px) {
  .cm-card { max-width: none; justify-self: stretch; }
}
.cm-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cm-card-ic {
  width: 36px; height: 36px;
  border-radius: var(--gy-r-md);
  background: var(--gy-blue-mist);
  color: var(--gy-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cm-card-ic svg { width: 18px; height: 18px; }
.cm-card-head strong {
  display: block;
  font-family: var(--gy-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--gy-ink);
}
.cm-card-head span {
  display: block;
  font-size: 0.76rem;
  color: var(--gy-gray-2);
  margin-top: 1px;
}
.cm-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cm-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--gy-gray-3);
  line-height: 1.4;
}
.cm-card-list li svg {
  width: 14px; height: 14px;
  color: var(--gy-blue);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Hub central · v11: padding más comedido */
.cm-hub {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 16px;
  background: linear-gradient(180deg, #fff 0%, var(--gy-blue-mist) 100%);
  border: 1.5px solid var(--gy-blue-soft);
  border-radius: var(--gy-r-2xl);
  box-shadow: 0 22px 44px -20px rgba(11, 21, 48, 0.32);
  margin: 0 clamp(6px, 1vw, 14px);
}
.cm-hub-orb {
  /* v13 Tania: hub compactado · isotipo G centrado · órbita fuera del clip */
  width: 86px; height: 86px;
  border-radius: 50%;
  background: var(--gy-blue-mist);
  border: 2px solid var(--gy-blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px auto 12px;
  box-shadow: 0 8px 22px -8px rgba(11, 21, 48, 0.26);
  position: relative;
  padding: 0;
  overflow: visible;
}
.cm-hub-orb::before { display: none; }
.cm-hub-orb img {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
}
@media (max-width: 880px) {
  .cm-hub-orb { width: 78px; height: 78px; }
  .cm-hub-orb img { width: 40px; height: 40px; }
}
.cm-hub strong {
  display: block;
  font-family: var(--gy-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--gy-blue-deep);
}
.cm-hub span {
  display: block;
  font-size: 0.88rem;
  color: var(--gy-gray-3);
  margin-top: 4px;
}
.cm-hub-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.cm-hub-tag {
  font-family: var(--gy-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--gy-blue-soft);
  border-radius: var(--gy-r-pill);
  color: var(--gy-blue-deep);
}

/* ----- v10-4. STEPS VERTICALES (Pennylane) ------------------
   v11 (Tania): compactar — padding vstep 32-44px, gap 8-12px */
.section-vertical-steps {
  padding: clamp(18px, 1.8vw, 26px) 0 0;
}
.section-vertical-steps > .container > .section-head {
  margin-bottom: clamp(10px, 1vw, 16px);
}
.vstep {
  padding: clamp(14px, 1.4vw, 22px) 0;
}
.vstep + .vstep { margin-top: 10px; }
.vstep-bg-white { background: #fff; }
.vstep-bg-paper { background: var(--gy-paper-2); }

.vstep-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}
.vstep-flip { direction: rtl; }
.vstep-flip > * { direction: ltr; }
@media (max-width: 880px) {
  .vstep-grid,
  .vstep-flip {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 28px;
  }
  .vstep-flip .vstep-visual { order: -1; }
}

.vstep-text { max-width: 520px; }
.vstep-num {
  display: inline-block;
  font-family: var(--gy-font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gy-blue);
  margin-bottom: 8px;
}
.vstep-text .eyebrow { margin-bottom: 10px; }
.vstep-text h3 {
  margin: 0 0 8px;
  font-family: var(--gy-font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.55rem);
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--gy-ink);
}
.vstep-text h3 em { font-style: normal; color: var(--gy-blue); }
.vstep-text > p {
  font-size: clamp(0.88rem, 0.84rem + 0.18vw, 0.96rem);
  line-height: 1.5;
  color: var(--gy-gray-3);
  margin: 0 0 12px;
}
.vstep-text > p strong { color: var(--gy-ink); font-weight: 700; }

.vstep-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vstep-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--gy-ink-700);
  font-weight: 500;
}
.vstep-bullets li svg {
  width: 13px; height: 13px;
  color: var(--gy-blue);
  flex-shrink: 0;
}

/* Visuales del step */
.vstep-visual {
  position: relative;
}

/* Mockup paso 01 · tarjeta invitación · v11: -25% ancho */
.vstep-invite-card {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-lg);
  padding: 12px;
  box-shadow: var(--gy-shadow-sm);
  max-width: 240px;
  margin: 0 auto;
}
.vstep-invite-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gy-line);
  margin-bottom: 14px;
}
.vstep-invite-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gy-blue) 0%, var(--gy-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gy-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.vstep-invite-head > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.vstep-invite-head strong {
  display: block;
  font-family: var(--gy-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gy-ink);
  letter-spacing: -0.015em;
}
.vstep-invite-head span {
  font-size: 0.82rem;
  color: var(--gy-gray-2);
  font-family: var(--gy-font-mono);
}
.vstep-invite-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--gy-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--gy-success-soft);
  color: #097A53;
  border-radius: var(--gy-r-pill);
}
.vstep-invite-body p {
  font-size: 0.92rem;
  color: var(--gy-gray-3);
  line-height: 1.5;
  margin: 0 0 8px;
}
.vstep-invite-body p strong { color: var(--gy-ink); }
.vstep-invite-channels {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.vstep-invite-channels span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--gy-blue-mist);
  color: var(--gy-blue-deep);
  border-radius: var(--gy-r-pill);
  font-size: 0.82rem;
  font-weight: 600;
}
.vstep-invite-channels svg { width: 14px; height: 14px; }

/* Mockup paso 02 · chat */
.vstep-chat {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  box-shadow: var(--gy-shadow-md);
  overflow: hidden;
  max-width: 230px;
  margin: 0 auto;
}
.vstep-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #1A1F2E 0%, #060914 100%);
  color: #fff;
}
.vstep-chat-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gy-blue) 0%, var(--gy-blue-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gy-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.16);
}
.vstep-chat-head strong {
  display: block;
  font-family: var(--gy-font-display);
  font-size: 0.92rem;
  font-weight: 700;
}
.vstep-chat-head span {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.6);
  font-family: var(--gy-font-mono);
}
.vstep-chat-body {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--gy-paper);
  min-height: 0;
}
.vstep-bubble {
  max-width: 80%;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 0.76rem;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(11, 21, 48, 0.05);
}
.vstep-bubble.user {
  align-self: flex-end;
  background: var(--gy-blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.vstep-bubble.bot {
  align-self: flex-start;
  background: #fff;
  color: var(--gy-ink);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--gy-line);
}
.vstep-bubble strong {
  font-family: var(--gy-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.vstep-bubble-meta {
  font-family: var(--gy-font-mono);
  font-size: 0.72rem;
  color: var(--gy-gray-2);
  display: inline-block;
  margin-top: 4px;
}
.vstep-bubble-img {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gy-font-mono);
  font-size: 0.8rem;
}
.vstep-bubble-img svg { width: 16px; height: 16px; }

/* Mockup paso 03 · panel · v11: -32% ancho */
.vstep-panel {
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-md);
  box-shadow: var(--gy-shadow-sm);
  overflow: hidden;
  max-width: 250px;
  margin: 0 auto;
}
.vstep-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--gy-paper-2);
  border-bottom: 1px solid var(--gy-line);
}
.vstep-panel-dots { display: flex; gap: 6px; }
.vstep-panel-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gy-line);
}
.vstep-panel-dots span:nth-child(1) { background: #FF5F57; }
.vstep-panel-dots span:nth-child(2) { background: #FEBC2E; }
.vstep-panel-dots span:nth-child(3) { background: #28C840; }
.vstep-panel-url {
  flex: 1;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-pill);
  font-family: var(--gy-font-mono);
  font-size: 0.76rem;
  color: var(--gy-gray-2);
}
.vstep-panel-body {
  padding: 4px 10px 10px;
}
.vstep-panel-row {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  gap: 9px;
  align-items: center;
  padding: 8px 2px;
  border-bottom: 1px solid var(--gy-line-soft);
}
.vstep-panel-row-ic {
  width: 32px; height: 32px;
  border-radius: var(--gy-r-sm);
  background: linear-gradient(135deg, var(--gy-blue-soft) 0%, #fff 100%);
  border: 1px solid var(--gy-blue-soft);
  color: var(--gy-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vstep-panel-row-ic svg { width: 16px; height: 16px; }
.vstep-panel-row-meta { min-width: 0; }
.vstep-panel-row-meta strong {
  display: block;
  font-size: 0.9rem;
  color: var(--gy-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vstep-panel-row-meta span {
  font-size: 0.78rem;
  color: var(--gy-gray-2);
}
.vstep-panel-row-amt {
  font-family: var(--gy-font-mono);
  font-weight: 500;
  color: var(--gy-ink);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  white-space: nowrap;
}
.vstep-panel-row-pill {
  font-family: var(--gy-font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--gy-r-pill);
}
.vstep-panel-row-pill.ok {
  background: var(--gy-success-soft);
  color: #097A53;
}
.vstep-panel-row-pill.pending {
  background: var(--gy-warning-soft);
  color: #8A6800;
}
.vstep-panel-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px 4px;
  font-family: var(--gy-font-mono);
  font-size: 0.82rem;
  color: var(--gy-gray-2);
}
.vstep-panel-foot strong {
  font-family: var(--gy-font-display);
  font-size: 1.1rem;
  color: var(--gy-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ----- v10-5. SECCIÓN NAVY DRAMÁTICA (Stripe) ---------------
   v11 (Tania): compactar — padding ~48-60px, no más. */
.section-dark {
  background: var(--gy-navy);
  color: #fff;
  /* La sección dark es teatral: más aire arriba/abajo que el resto para
     que la transición desde paper a navy sea deliberada, no un cambio
     de color casual. */
  padding: clamp(72px, 8vw, 144px) 0;
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(11, 21, 48, 0.22) 0%, transparent 60%),
    radial-gradient(40% 50% at 10% 100%, rgba(11, 21, 48, 0.12) 0%, transparent 70%);
}
.section-dark .container { position: relative; z-index: 1; }

/* Stats grandes Stripe-style */
.dark-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: clamp(40px, 4.5vw, 64px);
  margin-bottom: clamp(40px, 4.5vw, 64px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 880px) {
  .dark-stats { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
.dark-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dark-stat-num {
  font-family: var(--gy-font-display);
  /* v13: -30% para compactar dark section */
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}
.dark-stat-decimal {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: super;
}
.dark-stat-label {
  font-family: var(--gy-font-body);
  font-size: 0.92rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

/* Cabecera oscura · v11: H2 más comedido (1.6-2.2rem) */
.dark-head { text-align: center; margin-left: auto; margin-right: auto; }
.dark-head h2 {
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.2rem);
  line-height: 1.08;
  margin-bottom: clamp(12px, 1.4vw, 20px);
}
.dark-head h2 em { color: var(--gy-blue-soft); }
.dark-head p { color: rgba(255,255,255,0.78); font-size: 1rem; }
.eyebrow-on-dark {
  color: var(--gy-blue-soft);
}
.eyebrow-on-dark::before { background: var(--gy-blue-soft); }

/* Tarjetas dark del trío · gap y padding aireados */
.dark-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(40px, 4.5vw, 64px);
}
@media (max-width: 920px) {
  .dark-trio { grid-template-columns: 1fr; gap: 20px; }
}
.dark-card {
  background: var(--gy-navy-2);
  border: 1px solid rgba(120, 150, 220, 0.18);
  border-radius: var(--gy-r-xl);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--gy-dur) var(--gy-ease),
              border-color var(--gy-dur) var(--gy-ease),
              background var(--gy-dur) var(--gy-ease);
}
.dark-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 80% at 100% 0%, rgba(11, 21, 48, 0.20) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 360ms var(--gy-ease);
}
.dark-card:hover {
  border-color: var(--gy-blue-400);
  background: #1A2A6B;
}
.dark-card:hover::before { opacity: 1; }
.dark-card-hero {
  background: var(--gy-blue-deep);
  border-color: var(--gy-blue-400);
  box-shadow: 0 24px 48px -20px rgba(11, 21, 48, 0.45);
}
.dark-card-hero:hover { background: var(--gy-blue); }

.dark-card-ic {
  width: 52px; height: 52px;
  border-radius: var(--gy-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
}
.dark-card-ic svg { width: 26px; height: 26px; }
.dark-card-tag {
  font-family: var(--gy-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gy-blue-soft);
}
.dark-card h3 {
  font-family: var(--gy-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  line-height: 1.15;
  margin: 0;
}
.dark-card p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.dark-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--gy-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  margin-top: 6px;
  transition: gap var(--gy-dur) var(--gy-ease);
}
.dark-card-cta svg { width: 16px; height: 16px; transition: transform var(--gy-dur) var(--gy-ease); }
.dark-card:hover .dark-card-cta { gap: 10px; }
.dark-card:hover .dark-card-cta svg { transform: translateX(3px); }

/* ----- v10-6. SPLIT IMAGE-TEXT (Stripe) --------------------- */
.section-split {
  padding: clamp(56px, 6vw, 96px) 0;
}
.split-image-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 880px) {
  .split-image-text { grid-template-columns: 1fr; gap: 32px; }
}
.split-image {
  position: relative;
  width: 100%;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-2xl);
  overflow: hidden;
  box-shadow: var(--gy-shadow-xl);
  aspect-ratio: 4 / 3;
  background: var(--gy-paper);
}
.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Tarjeta flotante sobre la imagen — patrón Stripe */
.split-image-card {
  position: absolute;
  bottom: 22px;
  right: 22px;
  background: #fff;
  border-radius: var(--gy-r-lg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--gy-shadow-lg);
  max-width: 240px;
}
.split-image-card-ic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gy-success-soft);
  color: var(--gy-success);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.split-image-card-ic svg { width: 18px; height: 18px; }
.split-image-card strong {
  display: block;
  font-family: var(--gy-font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gy-ink);
  letter-spacing: -0.01em;
}
.split-image-card span {
  font-family: var(--gy-font-mono);
  font-size: 0.74rem;
  color: var(--gy-gray-2);
}

.split-text { max-width: 540px; }
.split-text .eyebrow { margin-bottom: 12px; }
.split-text h2 {
  margin: 0 0 18px;
  font-family: var(--gy-font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--gy-ink);
}
.split-text h2 em { font-style: normal; color: var(--gy-blue); }
.split-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gy-gray-3);
  margin: 0 0 14px;
}
.split-text p strong { color: var(--gy-ink); font-weight: 700; }
.split-text-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--gy-line);
}
.split-text-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.split-text-stats strong {
  font-family: var(--gy-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gy-ink);
  letter-spacing: -0.02em;
}
.split-text-stats span {
  font-size: 0.86rem;
  color: var(--gy-gray-3);
}

/* ----- v10-7. DEMO FINAL (Brex/Stripe clean) ---------------- */
.section-demo {
  padding: var(--gy-section-y) 0;
  background: var(--gy-paper);
}
.demo-final {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(36px, 4vw, 64px) clamp(28px, 4vw, 56px);
  background: #fff;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-2xl);
  box-shadow: var(--gy-shadow-md);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.demo-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(11, 21, 48, 0.06) 0%, transparent 70%);
}
.demo-final .eyebrow {
  justify-content: center;
  margin-bottom: 14px;
}
.demo-final h2 {
  margin: 0 0 14px;
  font-family: var(--gy-font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--gy-ink);
}
.demo-final h2 em { font-style: normal; color: var(--gy-blue); }
.demo-final > p {
  margin: 0 auto 24px;
  max-width: 560px;
  color: var(--gy-gray-3);
  font-size: 1.05rem;
  line-height: 1.55;
}
.demo-final-btns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.demo-final-meta {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gy-font-body);
  font-size: 0.88rem;
  color: var(--gy-gray-2);
}

/* ============================================================
   v4 · 2026-05-25 · Design System oficial — adiciones
   Dotted grid signature + trío TanIA · TanYa · TanFácil
   ============================================================ */

.dotted-grid {
  position: relative;
}
.dotted-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(11, 21, 48, 0.12) 1px, transparent 1.5px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
}
.dotted-grid > * { position: relative; z-index: 1; }

/* Trío tagline TanIA · TanYa · TanFácil ----------------------- */
.trio-tagline {
  padding: clamp(24px, 2.6vw, 38px) 0;
  background: var(--gy-paper);
  text-align: center;
}
.trio-tagline-eyebrow {
  font-family: var(--gy-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gy-ink-400);
  margin-bottom: 18px;
}
.trio-tagline-headline {
  font-family: var(--gy-font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--gy-ink);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 clamp(14px, 2.5vw, 32px);
  margin-bottom: 12px;
}
.trio-tagline-headline .word {
  display: inline-flex;
  align-items: baseline;
  position: relative;
}
.trio-tagline-headline .word::after {
  content: "·";
  margin-left: clamp(14px, 2.5vw, 32px);
  color: var(--gy-ink-300);
  font-weight: 400;
}
.trio-tagline-headline .word:last-child::after { content: none; }
.trio-tagline-headline em {
  font-style: normal;
  color: var(--gy-blue);
}
.trio-tagline-sub {
  font-family: var(--gy-font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gy-ink-400);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px clamp(20px, 3vw, 36px);
  margin-top: 20px;
}
.trio-tagline-sub span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trio-tagline-sub span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gy-blue);
}
@media (max-width: 640px) {
  .trio-tagline-headline {
    flex-direction: column;
    gap: 8px;
  }
  .trio-tagline-headline .word::after { content: none; }
}

/* Italic editorial accent (Instrument Serif) — uso muy puntual */
.editorial-accent {
  font-family: var(--gy-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--gy-ink);
}

/* Trío tagline: lead + grid + cards ------------------------------- */
.trio-tagline-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.trio-tagline-lead {
  max-width: 720px;
  margin: 22px auto 0;
  font-family: var(--gy-font-body);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--gy-ink-700, #4A5266);
  letter-spacing: -0.005em;
}
.trio-tagline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(36px, 4vw, 56px);
  text-align: left;
}
.trio-tagline-card {
  background: #FFFFFF;
  border: 1px solid var(--gy-line);
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.trio-tagline-card:hover {
  border-color: var(--gy-line-strong);
}
.trio-tagline-card-eyebrow {
  font-family: var(--gy-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gy-blue);
  margin: 0;
}
.trio-tagline-card-h {
  font-family: var(--gy-font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--gy-ink);
  margin: 0;
}
.trio-tagline-card p:not(.trio-tagline-card-eyebrow) {
  font-family: var(--gy-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gy-ink-600, #5B6273);
  margin: 0;
}
@media (max-width: 880px) {
  .trio-tagline-grid {
    grid-template-columns: 1fr;
  }
}

/* Mini banner autónomo (post-credibility) ----------------------- */
.autonomo-mini {
  padding: clamp(32px, 4vw, 56px) 0;
  background: var(--gy-paper);
}
.autonomo-mini-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 1.8vw, 22px) clamp(20px, 2.2vw, 28px);
  background: #FFFFFF;
  border: 1px solid var(--gy-line);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(11, 21, 48, 0.04);
}
.autonomo-mini-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.autonomo-mini-eyebrow {
  font-family: var(--gy-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gy-ink-400);
}
.autonomo-mini-text strong {
  font-family: var(--gy-font-body);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--gy-ink);
  letter-spacing: -0.005em;
}
.autonomo-mini-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  color: var(--gy-blue-deep);
  font-family: var(--gy-font-body);
  font-weight: 500;
  font-size: 0.92rem;
  border: 1px solid var(--gy-blue-deep);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.autonomo-mini-cta:hover {
  background: var(--gy-blue-deep);
  color: #FFFFFF;
}
.autonomo-mini-cta svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 640px) {
  .autonomo-mini-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .autonomo-mini-cta { align-self: stretch; justify-content: center; }
}

/* Cómo funciona · grid 2×2 compacto (v13 Tania) ----------------- */
.section-howto {
  padding: var(--gy-section-y) 0;
  background: var(--gy-paper);
}
.howto-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin-bottom: clamp(40px, 4vw, 64px);
}
.howto-intro-figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--gy-paper-2);
  max-height: 220px;
}
.howto-intro-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.howto-intro-overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  box-shadow: 0 8px 20px -8px rgba(11, 21, 48, 0.20);
}
.howto-intro-overlay-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gy-whatsapp);
  color: #FFFFFF;
}
.howto-intro-overlay-ic svg { width: 14px; height: 14px; }
.howto-intro-overlay-text {
  display: flex;
  flex-direction: column;
  font-family: var(--gy-font-body);
  line-height: 1.1;
}
.howto-intro-overlay-text strong {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gy-ink);
}
.howto-intro-overlay-text em {
  font-family: var(--gy-font-mono);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gy-ink-400);
  margin-top: 2px;
}
@media (max-width: 720px) {
  .howto-intro { grid-template-columns: 1fr; }
  .howto-intro-figure { max-height: 180px; }
}
.howto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.howto-card {
  background: #FFFFFF;
  border: 1px solid var(--gy-line);
  border-radius: 14px;
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 160ms ease;
}
.howto-card:nth-child(2) .howto-card-num { color: var(--gy-whatsapp-ink); }
.howto-card:nth-child(2) .howto-card-ic {
  background: rgba(37, 211, 102, 0.14);
  color: var(--gy-whatsapp-ink);
}
.howto-card:nth-child(4) .howto-card-num { color: var(--gy-navy); }
.howto-card:nth-child(4) .howto-card-ic {
  background: rgba(11, 21, 48, 0.08);
  color: var(--gy-navy);
}
.howto-card:hover { border-color: var(--gy-line-strong); }
.howto-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.howto-card-num {
  font-family: var(--gy-font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gy-blue);
}
.howto-card-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--gy-blue-mist);
  color: var(--gy-blue);
}
.howto-card-ic svg { width: 16px; height: 16px; }
.howto-card-h {
  margin: 0;
  font-family: var(--gy-font-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.18rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gy-ink);
}
.howto-card p {
  margin: 0;
  font-family: var(--gy-font-body);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--gy-ink-600);
}
@media (max-width: 640px) {
  .howto-grid { grid-template-columns: 1fr; }
}

/* Banda comparativa "Por qué no Holded ni Anfix" ----------------- */
.section-vs {
  background: var(--gy-paper-2);
}
.vs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
  margin-top: clamp(40px, 4.5vw, 64px);
}
.vs-card {
  background: #FFFFFF;
  border: 1px solid var(--gy-line);
  border-radius: 16px;
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vs-card-num {
  font-family: var(--gy-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--gy-blue);
}
.vs-card h3 {
  font-family: var(--gy-font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--gy-ink);
  margin: 0;
}
.vs-card p {
  font-family: var(--gy-font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gy-ink-600);
  margin: 0;
}
@media (max-width: 880px) {
  .vs-grid { grid-template-columns: 1fr; }
}

/* Banner Impulsa Startup · diferenciado en color (v13.2) -------- */
.impulsa-banner {
  /* v13.2 Tania: separación con márgenes + color distintivo navy/amber */
  margin: clamp(20px, 2.4vw, 36px) 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.impulsa-banner-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 24px;
  background: linear-gradient(120deg, var(--gy-navy) 0%, #142450 100%);
  color: #FFFFFF;
  border-radius: var(--gy-r-lg);
  box-shadow: 0 8px 26px -12px rgba(11, 21, 48, 0.35);
  position: relative;
  overflow: hidden;
}
.impulsa-banner-inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #F5B82E; /* ámbar tipo sello */
}
.impulsa-banner-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F5B82E;
  color: var(--gy-navy);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(245, 184, 46, 0.18);
}
.impulsa-banner-seal svg { width: 22px; height: 22px; }
.impulsa-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.impulsa-banner-text > strong {
  font-family: var(--gy-font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: #FFFFFF;
}
.impulsa-banner-text > span {
  font-family: var(--gy-font-body);
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}
.impulsa-banner-text strong { color: #FFFFFF; font-weight: 600; }
@media (max-width: 640px) {
  .impulsa-banner-inner {
    align-items: flex-start;
    padding: 16px 18px 16px 20px;
  }
}

/* Calculadora del trimestre (v13 · 1 slider) -------------------- */
.section-calc { background: var(--gy-paper); padding: var(--gy-section-y) 0; }
.calc {
  background: #FFFFFF;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-xl);
  padding: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(18px, 2vw, 26px);
  box-shadow: 0 4px 18px -12px rgba(11, 21, 48, 0.10);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.calc-single .calc-control-solo {
  margin: 0 auto;
  max-width: 540px;
}
.calc-assumption {
  margin: 10px 0 0;
  font-family: var(--gy-font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--gy-ink-400);
  text-align: center;
}
.calc-assumption strong { color: var(--gy-ink-700); font-weight: 600; }
.calc-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 36px);
}
.calc-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calc-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.calc-label-name {
  font-family: var(--gy-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gy-ink-400);
}
.calc-label-out {
  font-family: var(--gy-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--gy-ink);
  letter-spacing: -0.01em;
}
.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--gy-bone);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--gy-blue);
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(11, 21, 48, 0.24);
  cursor: grab;
}
.calc-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--gy-blue);
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(11, 21, 48, 0.24);
  cursor: grab;
}
.calc-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(26, 95, 255, 0.18);
}
.calc-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--gy-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gy-ink-300);
}
.calc-results {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: clamp(10px, 1.4vw, 16px);
  margin-top: clamp(20px, 2.2vw, 28px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--gy-line);
}
.calc-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--gy-paper-2);
  border-radius: 12px;
}
.calc-result-hero {
  background: var(--gy-navy);
  color: #FFFFFF;
}
.calc-result-eyebrow {
  font-family: var(--gy-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gy-ink-400);
}
.calc-result-hero .calc-result-eyebrow { color: rgba(255, 255, 255, 0.55); }
.calc-result-num {
  font-family: var(--gy-font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.2rem, 0.95rem + 0.8vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--gy-ink);
  line-height: 1.05;
  margin-top: 2px;
}
.calc-result-hero .calc-result-num { color: #FFFFFF; }
.calc-result-sub {
  font-family: var(--gy-font-body);
  font-size: 0.82rem;
  color: var(--gy-ink-500, var(--gy-ink-400));
}
.calc-result-hero .calc-result-sub { color: rgba(255, 255, 255, 0.7); }
.calc-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(24px, 2.6vw, 32px);
  text-align: center;
}
.calc-cta-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gy-font-body);
  font-size: 0.85rem;
  color: var(--gy-ink-400);
  margin: 0;
}
.calc-cta-meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gy-blue);
}
@media (max-width: 880px) {
  .calc-controls { grid-template-columns: 1fr; }
  .calc-results { grid-template-columns: 1fr; }
  .calc-result-hero { order: -1; }
}