/* ===========================================
   GESTIÓN PLAY — Landing
   CSS puro, mobile-first, sin frameworks.
   =========================================== */

/* ════════ DESIGN TOKENS ════════ */
:root {
  /* Cyber Corporate */
  --azul-carlos:       #0F3CC9;
  --azul-carlos-dark:  #0A2A8F;
  --azul-carlos-deep:  #06143D;
  --azul-carlos-soft:  rgba(15, 60, 201, 0.08);
  --cian-neon:         #06D4FB;
  --turquesa:          #14B8A6;

  --bg:                #FBFAF7;          /* warm off-white, editorial */
  --bg-pure:           #FFFFFF;
  --bg-hielo:          #F4F1EA;          /* cream */
  --bg-soft:           #EDE9DF;
  --border:            #E5E0D5;
  --rule:              #1A1A1A;          /* hairline divisor editorial */

  --text:              #0A0E1F;
  --text-soft:         #3F465A;
  --text-mute:         #8A8C8F;

  --success:           #16A34A;
  --danger:            #DC2626;
  --whatsapp:          #25D366;

  /* Deep Tech (chat) */
  --chat-bg:           #02060F;
  --chat-surface:      #0A1330;
  --chat-surface-2:    #0F1C44;
  --chat-border:       #1B3578;
  --chat-blue-glow:    #3B82F6;
  --chat-violet-glow:  #4F7BFF;          /* antes morado #8B5CF6 — ahora azul-índigo */
  --chat-text:         #E2E8F0;
  --chat-text-soft:    #94A3B8;

  /* Catálogo de agentes — tematizable (a diferencia del chat, sigue el tema).
     Valores LIGHT por defecto; el override dark vive en [data-theme="dark"]. */
  --cat-bg:            var(--bg-pure);
  --cat-border:        var(--border);
  --cat-text:          var(--text);
  --cat-text-soft:     var(--text-soft);
  --cat-accent:        var(--azul-carlos);   /* eyebrow / em / rubro / cta */
  --cat-card-bg:       var(--bg-hielo);
  --cat-card-border:   var(--border);
  --cat-card-bg-hover: var(--bg-pure);
  --cat-glow-1:        rgba(15, 60, 201, 0.07);
  --cat-glow-2:        rgba(6, 212, 251, 0.06);

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-12: 6rem;
  --sp-16: 8rem;

  /* Typography — Manrope (display + body) + JetBrains Mono (numerics) */
  --ff-sans:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ff-display: "Sora", var(--ff-sans);

  --fz-xs:   0.75rem;
  --fz-sm:   0.875rem;
  --fz-base: 1rem;
  --fz-lg:   1.125rem;
  --fz-xl:   1.375rem;
  --fz-2xl:  1.75rem;
  --fz-3xl:  2.25rem;
  --fz-4xl:  3rem;

  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   20px;
  --radius-full: 999px;

  --shadow-sm:   0 1px 2px rgba(10, 14, 31, 0.06);
  --shadow:      0 8px 30px rgba(10, 14, 31, 0.08), 0 2px 6px rgba(10, 14, 31, 0.04);
  --shadow-lg:   0 28px 80px rgba(6, 20, 61, 0.20), 0 8px 28px rgba(10, 14, 31, 0.08);
  --shadow-glow: 0 0 0 4px rgba(15, 60, 201, 0.15);

  --header-h: 72px;
  --container: 1240px;

  --t-fast: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-base: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-slow: 720ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Grain SVG (intencional, sutil, da textura premium) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
}

/* ════════ RESET ════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;              /* nada de scroll horizontal en el documento (root) */
  -webkit-text-size-adjust: 100%;
  /* Color base del documento — adapta a tema. Body queda transparente para
     que las auras (.bg-auras) y los radiales se vean por debajo. */
  background: var(--bg);
}
body {
  margin: 0;
  overflow-x: clip;              /* corta cualquier desborde horizontal residual (sin romper el sticky header) */
  font-family: var(--ff-sans);
  font-size: var(--fz-base);
  line-height: 1.6;
  color: var(--text);
  /* Body transparente para que se vean las auras del fondo global (.bg-auras).
     Las secciones que requieren fondo opaco lo definen ellas mismas
     (.hero, .benefits, .process, .pricing, .faq, .agente-interactivo, etc.). */
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "kern";
  position: relative;
  transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1), color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Grain global muy sutil — refuerza la sensación editorial.
   z-index alto + pointer-events:none = visible pero no bloquea clicks. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  z-index: 9999;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--azul-carlos); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--azul-carlos-dark); }
h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  font-family: var(--ff-sans);
}
h1 em, h2 em, h3 em {
  font-family: var(--ff-sans);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--azul-carlos);
}
p { margin: 0 0 var(--sp-4); }
p em { font-family: var(--ff-sans); font-style: italic; font-weight: 700; color: var(--azul-carlos); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--azul-carlos); color: #fff; }
:focus-visible { outline: 3px solid var(--cian-neon); outline-offset: 2px; border-radius: 4px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* ════════ UTIL ════════ */
.text-gradient {
  background: linear-gradient(135deg, var(--azul-carlos) 0%, var(--cian-neon) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.muted { color: var(--text-mute); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ════════ BUTTONS ════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-full);
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.btn--primary {
  background: var(--azul-carlos);
  color: var(--bg-pure);
  border-color: var(--azul-carlos);
}
.btn--primary:hover {
  background: var(--azul-carlos-dark);
  border-color: var(--azul-carlos-dark);
  color: var(--bg-pure);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(15, 60, 201, 0.38);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--rule);
}
.btn--ghost:hover {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg-pure);
}
.btn--whatsapp {
  background: var(--whatsapp);
  color: #fff;
  border-color: var(--whatsapp);
}
.btn--whatsapp:hover {
  background: #1da851;
  border-color: #1da851;
  color: #fff;
  transform: translateY(-1px);
}
.btn--lg { padding: 1.1rem 1.9rem; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

/* ════════ HEADER ════════ */
.site-header {
  position: sticky;
  top: 14px;
  z-index: 100;
  background: transparent;
  pointer-events: none;          /* deja pasar clicks por los márgenes transparentes */
  transition: top var(--t-base);
}
/* Píldora flotante centrada */
.site-header__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 60px;
  max-width: min(1080px, calc(100% - 2rem));
  padding: 0 0.5rem 0 1.4rem;
  background: rgba(8, 18, 48, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-full);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 12px 34px rgba(3, 8, 24, 0.45);
  transition: box-shadow var(--t-base), background var(--t-base), border-color var(--t-base);
}
.site-header.is-scrolled .site-header__inner {
  background: rgba(8, 18, 48, 0.82);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 40px rgba(3, 8, 24, 0.60);
}
/* ──────── Logo Gestión Play (SVG, adaptable al tema) ──────── */
.gp-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  /* Paleta por defecto (navbar claro) */
  --logo-c1: #06D4FB;   /* cian */
  --logo-c2: #0F3CC9;   /* azul */
  --logo-fg: #0B1430;   /* texto (navy casi negro) */
}
.gp-logo__icon { width: 34px; height: 34px; flex: none; display: block; }
.gp-logo__word {
  font-family: var(--ff-sans);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--logo-fg);
}
.gp-logo__word-accent { color: var(--logo-c2); }
/* Navbar en tema oscuro → versión clara */
[data-theme="dark"] .site-header__logo {
  --logo-c1: #22E0FF;
  --logo-c2: #5B8BFF;
  --logo-fg: #FFFFFF;
}
[data-theme="dark"] .gp-logo__word-accent { color: #22E0FF; }
/* Sobre fondo oscuro fijo (footer) → siempre versión clara */
.gp-logo--on-dark {
  --logo-c1: #22E0FF;
  --logo-c2: #5B8BFF;
  --logo-fg: #FFFFFF;
}
.gp-logo--on-dark .gp-logo__word-accent { color: #22E0FF; }
.site-nav {
  display: none;
  gap: var(--sp-4);
  align-items: center;
}
.site-nav a {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--cian-neon); }
.site-nav .btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.site-nav .btn--ghost:hover {
  border-color: var(--cian-neon);
  background: rgba(6, 212, 251, 0.12);
  color: var(--cian-neon);
}

/* Acciones del header (toggle tema + menú hamburguesa) */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Toggle tema claro/oscuro */
.theme-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(6, 212, 251, 0.15);
  border-color: var(--cian-neon);
  color: var(--cian-neon);
  transform: rotate(15deg);
}
.theme-toggle__icon { transition: opacity var(--t-base), transform var(--t-base); }
.theme-toggle__icon--sun  { display: none; }
.theme-toggle__icon--moon { display: block; }
[data-theme="dark"] .theme-toggle__icon--sun  { display: block; }
[data-theme="dark"] .theme-toggle__icon--moon { display: none; }

.site-header__menu-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
}
.site-header__menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}
.site-header.is-menu-open .site-header__menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-menu-open .site-header__menu-btn span:nth-child(2) { opacity: 0; }
.site-header.is-menu-open .site-header__menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ──────── Header en tema claro ──────── */
[data-theme="light"] .site-header__inner {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .site-header.is-scrolled .site-header__inner {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.16);
}
[data-theme="light"] .site-nav a { color: var(--text-soft); }
[data-theme="light"] .site-nav a:hover { color: var(--azul-carlos); }
[data-theme="light"] .theme-toggle {
  background: rgba(15, 23, 42, 0.05);
  color: var(--text);
  border-color: rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(15, 60, 201, 0.10);
  border-color: var(--azul-carlos);
  color: var(--azul-carlos);
}
[data-theme="light"] .site-header__menu-btn span { background: var(--text); }

@media (min-width: 960px) {
  .site-nav { display: flex; }
  .site-header__menu-btn { display: none; }
}

/* Mobile menu drawer — glass flotante, redondeado y tematizable (igual que la píldora del nav) */
@media (max-width: 959px) {
  .site-nav {
    position: fixed;
    top: calc(var(--header-h) + 10px);
    left: 1rem;
    right: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: var(--sp-3);
    background: #0B1A3A;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
    box-shadow: 0 22px 60px rgba(3, 8, 24, 0.55);
    transform: translateY(-12px) scale(0.97);
    transform-origin: top center;
    opacity: 0;
    pointer-events: none;
    transition: transform var(--t-base), opacity var(--t-base);
  }
  .site-header.is-menu-open .site-nav {
    display: flex;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav a {
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    width: 100%;
    font-weight: 600;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .site-nav a:hover,
  .site-nav a:active { background: rgba(255, 255, 255, 0.08); color: var(--cian-neon); }
  .site-nav .btn { margin-top: var(--sp-2); width: 100%; justify-content: center; }

  /* Tema claro: glass blanco con links oscuros (como la píldora del nav en claro) */
  [data-theme="light"] .site-nav {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
  }
  [data-theme="light"] .site-nav a { color: var(--text); }
  [data-theme="light"] .site-nav a:hover,
  [data-theme="light"] .site-nav a:active { background: var(--azul-carlos-soft); color: var(--azul-carlos); }
}

/* ════════ HERO ════════ */
.hero {
  /* Sube el hero bajo el header flotante (60px) para que el fondo llegue hasta
     arriba; el padding compensa para que el contenido no se mueva. */
  margin-top: -60px;
  padding: calc(var(--sp-10) + 60px) 0 var(--sp-12);
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(15, 60, 201, 0.12), transparent 60%),
    radial-gradient(700px 500px at 100% 20%, rgba(6, 212, 251, 0.10), transparent 60%),
    radial-gradient(500px 400px at 30% 110%, rgba(139, 92, 246, 0.06), transparent 60%),
    var(--bg);
  overflow: hidden;
  position: relative;
}
/* Línea hairline horizontal — referencia editorial */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text) 20%, var(--text) 80%, transparent);
  opacity: 0.12;
}
/* Aurora animada de fondo — gradientes que derivan lento detrás del hero */
.hero__aurora {
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__aurora-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.hero__aurora-blob--1 {
  width: 48vw; height: 48vw;
  left: -10%; top: -16%;
  background: radial-gradient(circle, rgba(15, 60, 201, 0.30), transparent 68%);
  animation: auroraDrift1 24s ease-in-out infinite;
}
.hero__aurora-blob--2 {
  width: 42vw; height: 42vw;
  right: -8%; top: 4%;
  background: radial-gradient(circle, rgba(6, 212, 251, 0.24), transparent 68%);
  animation: auroraDrift2 28s ease-in-out infinite;
}
.hero__aurora-blob--3 {
  width: 38vw; height: 38vw;
  left: 28%; bottom: -20%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.18), transparent 68%);
  animation: auroraDrift3 32s ease-in-out infinite;
}
@keyframes auroraDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(9%, 13%) scale(1.12); }
}
@keyframes auroraDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-11%, 9%) scale(1.08); }
}
@keyframes auroraDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(7%, -10%) scale(1.15); }
}
/* Rayos de luz volumétricos que bajan desde arriba */
.hero__rays {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  height: 130%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background:
    linear-gradient(74deg, transparent 32%, rgba(150, 200, 255, 0.07) 42%, transparent 50%),
    linear-gradient(80deg, transparent 46%, rgba(120, 180, 255, 0.06) 55%, transparent 62%),
    linear-gradient(67deg, transparent 58%, rgba(170, 210, 255, 0.05) 67%, transparent 74%);
  transform-origin: top center;
  animation: heroRays 14s ease-in-out infinite;
}
[data-theme="dark"] .hero__rays { opacity: 0.85; }
@keyframes heroRays {
  0%, 100% { transform: translateX(-2%) rotate(-0.6deg); opacity: 0.5; }
  50%      { transform: translateX(2%) rotate(0.6deg);  opacity: 0.85; }
}

/* El contenido del hero por encima de la aurora */
.hero > .container { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .hero__aurora { display: none; }
}
.hero__grid {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}
@media (min-width: 980px) {
  .hero { padding: calc(var(--sp-6) + 60px) 0 var(--sp-10); }
  .hero__grid {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--sp-8);
    align-items: start;
  }
  /* El chat baja un poco para alinearse visualmente con el H1 (no con el eyebrow) */
  .hero__right { padding-top: var(--sp-10); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45rem 0.95rem;
  background: var(--bg-pure);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.hero__eyebrow-sep   { color: var(--text-mute); }
.hero__eyebrow-year  { font-family: var(--ff-mono); letter-spacing: 0.1em; color: var(--text-mute); font-size: 0.72rem; }
.hero__pulse {
  width: 7px; height: 7px;
  background: var(--azul-carlos);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--azul-carlos);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(15,60,201,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(15,60,201,0); }
  100% { box-shadow: 0 0 0 0 rgba(15,60,201,0); }
}

.hero__title {
  font-size: clamp(2.5rem, 6vw + 0.5rem, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin-bottom: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.3em;
}
.hero__title span { display: inline-block; }
.hero__title em {
  display: inline-block;
  font-size: 1.05em;     /* serif italica un toque más grande para protagonismo */
  /* line-height 0.9 recortaba ascendentes/descendentes (la cola de la "g").
     El padding-right generoso evita que la itálica recorte el voladizo de la
     "l" final (la cursiva se inclina a la derecha y sobresale de la caja). */
  line-height: 1.15;
  padding: 0.06em 0.18em 0.12em 0.04em;
  transform: translateY(0.02em);
  background: linear-gradient(100deg,
    var(--azul-carlos) 0%, var(--cian-neon) 28%, #8B5CF6 50%,
    var(--cian-neon) 72%, var(--azul-carlos) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(6, 212, 251, 0.30));
  animation: heroTitleFlow 6s linear infinite;
}
@keyframes heroTitleFlow {
  0%   { background-position: 0% center; }
  100% { background-position: 250% center; }
}
.hero__sub {
  font-size: clamp(1.05rem, 1vw + 0.9rem, 1.35rem);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 42rem;
  margin-bottom: var(--sp-8);
}
.hero__sub-agent {
  color: var(--azul-carlos);
  font-weight: 800;
  position: relative;
  white-space: nowrap;
  padding: 0 4px;
  background: linear-gradient(180deg, transparent 60%, rgba(15, 60, 201, 0.18) 60%);
  border-radius: 3px;
}
[data-theme="dark"] .hero__sub-agent {
  color: var(--cian-neon);
  background: linear-gradient(180deg, transparent 60%, rgba(6, 212, 251, 0.22) 60%);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.hero__trust li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-mute);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}
.hero__trust strong {
  font-family: var(--ff-mono);
  font-weight: 700;
  color: var(--azul-carlos);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.04em;
  letter-spacing: -0.03em;
}

/* ════════ HERO RIGHT — Chat Deep Tech ════════ */
/* El chat ocupa el slot del grid del Hero derecho (vista única, sin catálogo). */
.hero__right {
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  min-height: 560px;
}
.hero__right > .chat {
  grid-area: stack;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96) translateY(10px);
  transition:
    opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 360ms;
  pointer-events: none;
}
.hero__right > .chat.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  transition:
    opacity 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

/* .chat-toggle: deprecado — el catálogo ahora reemplaza al CTA mobile.
   Conservado vacío por si algún sitio hermano (ValidarSA / Agroplaneta) lo requiere. */

.chat {
  position: relative;
  background:
    /* halo azul superior, sutil */
    radial-gradient(120% 80% at 50% -10%, rgba(15, 60, 201, 0.22), transparent 60%),
    rgba(3, 8, 20, 0.88);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  min-height: 440px;
  max-height: 580px;
}
/* Pulso visual cuando un CTA abre el chat — feedback inmediato (doble pulso) */
.chat--highlight { animation: chatHighlight 3.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes chatHighlight {
  0%   { box-shadow: var(--shadow-lg), 0 0 0 0    rgba(6, 212, 251, 0.75); transform: scale(1); }
  18%  { box-shadow: var(--shadow-lg), 0 0 0 22px rgba(6, 212, 251, 0);    transform: scale(1.012); }
  36%  { box-shadow: var(--shadow-lg), 0 0 0 0    rgba(6, 212, 251, 0);    transform: scale(1); }
  46%  { box-shadow: var(--shadow-lg), 0 0 0 0    rgba(6, 212, 251, 0.65); transform: scale(1); }
  68%  { box-shadow: var(--shadow-lg), 0 0 0 26px rgba(6, 212, 251, 0);    transform: scale(1.01); }
  100% { box-shadow: var(--shadow-lg), 0 0 0 0    rgba(6, 212, 251, 0);    transform: scale(1); }
}
/* Borde azul estático (sin animación) */
.chat::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--chat-blue-glow), rgba(15, 60, 201, 0.6));
  z-index: -1;
  opacity: 0.4;
}
/* ════════ Fondo de circuito animado (flujo de datos) ════════
   Reemplaza la antigua rejilla estática. SVG embebido en .chat (#chatWidget),
   detrás de todo el contenido, con opacidad muy baja para no estorbar la lectura. */
.circuit-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.08;          /* OPACIDAD CRÍTICA: muy baja → legibilidad intacta */
  pointer-events: none;   /* los clics traspasan el fondo */
}
.circuit-line {
  fill: none;
  stroke: #00f0ff;        /* cian neón de la paleta Deep Tech */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Line-drawing: el dash recorre el trazo simulando energía fluyendo */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawCircuit 12s linear infinite;
}
.circuit-line.delay-1 { animation-delay: -4s; }
.circuit-line.delay-2 { animation-delay: -8s; }
@keyframes drawCircuit {
  0%   { stroke-dashoffset: 1000; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1000; }
}
@media (prefers-reduced-motion: reduce) {
  .circuit-line { animation: none; stroke-dashoffset: 0; }
}

/* El contenido va por encima del circuito de fondo */
.chat__header,
.chat__body,
.chat__form { position: relative; z-index: 1; }
/* Refuerzo: mensajes y opciones siempre por encima del fondo animado */
.msg,
.msg--options { position: relative; z-index: 1; }

.chat__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(15, 26, 60, 0.6);
  border-bottom: 1px solid var(--chat-border);
}
.chat__avatar {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--chat-blue-glow), var(--chat-violet-glow));
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}
.chat__title {
  color: var(--chat-text);
  font-family: var(--ff-sans);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}
.chat__status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--chat-text-soft);
}
.chat__status-dot {
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}

.chat__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  scroll-behavior: smooth;
}
.chat__body::-webkit-scrollbar { width: 6px; }
.chat__body::-webkit-scrollbar-thumb { background: var(--chat-border); border-radius: 3px; }

.msg {
  max-width: 85%;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  font-size: var(--fz-sm);
  line-height: 1.5;
  /* La animación de entrada la maneja JS (popIn con Motion). NO declarar
     `animation: msgIn` acá: al limpiar los estilos inline tras el pop, la
     regla CSS se reactivaba y reproducía un fade extra → parpadeo. */
}
/* Conservado solo para el fallback de popIn() cuando la CDN de Motion falla;
   se aplica inline explícitamente desde el JS, no desde esta clase. */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg--bot {
  align-self: flex-start;
  background: var(--chat-surface);
  color: var(--chat-text);
  border: 1px solid var(--chat-border);
  border-bottom-left-radius: 4px;
}
.msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--azul-carlos) 0%, var(--chat-blue-glow) 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg--options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-self: flex-end;
  justify-content: flex-end;
  background: transparent;
  border: none;
  padding: 0;
  max-width: 100%;
}
.msg-opt {
  padding: 0.5rem 0.9rem;
  background: var(--chat-surface);
  color: var(--chat-text);
  border: 1px solid var(--chat-border);
  border-radius: var(--radius-full);
  font-size: var(--fz-sm);
  transition: all var(--t-fast);
}
.msg-opt:hover {
  background: var(--chat-surface-2);
  border-color: var(--chat-blue-glow);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

/* ════════ Indicador "escribiendo..." (3 puntos rebotando) ════════ */
.typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.85rem 1.05rem;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: var(--radius);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  /* Aliento sutil del globo + entrada al insertarse */
  box-shadow: 0 6px 18px rgba(6, 212, 251, 0.10);
  animation: typingIn 220ms ease-out both, typingBreathe 2.4s ease-in-out 220ms infinite;
  transform-origin: bottom left;
}
@keyframes typingIn {
  from { opacity: 0; transform: scale(0.85) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
@keyframes typingBreathe {
  0%, 100% { box-shadow: 0 6px 18px rgba(6, 212, 251, 0.10); }
  50%      { box-shadow: 0 6px 22px rgba(6, 212, 251, 0.22); }
}
.typing span {
  width: 7px; height: 7px;
  background: var(--chat-blue-glow);
  border-radius: 50%;
  /* Easing más fluido (in-out-back) y stagger explícito por nth-child */
  animation: typingDot 1.25s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.typing span:nth-child(1) { animation-delay: 0s; }
.typing span:nth-child(2) { animation-delay: 0.16s; background: var(--chat-violet-glow); }
.typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0) scale(0.85); opacity: 0.45; }
  30%           { transform: translateY(-6px) scale(1.1); opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .typing,
  .typing span { animation: none; }
  .typing span { opacity: 0.7; }
}

.chat__form {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: rgba(15, 26, 60, 0.6);
  border-top: 1px solid var(--chat-border);
}
.chat__input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: var(--radius-full);
  color: var(--chat-text);
  font-size: var(--fz-base);
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.chat__input:focus {
  outline: none;
  border-color: var(--chat-blue-glow);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
.chat__input::placeholder { color: var(--chat-text-soft); }
.chat__send {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--azul-carlos), var(--chat-blue-glow));
  color: #fff;
  border-radius: 50%;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.chat__send:hover {
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.6);
}

/* Mobile: ajuste de altura del Hero stack (catálogo / chat) */
@media (max-width: 979px) {
  .hero__right { min-height: 540px; margin-top: var(--sp-5); }
  .chat { max-height: 75vh; }
}

/* ════════ CHAT EN TEMA CLARO ════════
   El chat es dark por defecto (paleta Deep Tech definida en :root). En tema
   claro le damos su propia paleta clara para que acompañe al resto del sitio.
   Los tres fondos hardcodeados (.chat, .chat__header, .chat__form) y el trazo
   del circuito se overridean acá porque no salen de variables. */
[data-theme="light"] {
  --chat-surface:    #EDF2FB;   /* burbujas del bot, input y opciones */
  --chat-surface-2:  #DFE7F6;   /* hover de opciones */
  --chat-border:     #CFD9EC;
  --chat-text:       #14233D;
  --chat-text-soft:  #5B6B85;
  /* --chat-blue-glow / --chat-violet-glow se mantienen: los acentos azules,
     el gradiente de la burbuja-usuario y el avatar funcionan igual en claro. */
}
[data-theme="light"] .chat {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(15, 60, 201, 0.10), transparent 60%),
    rgba(255, 255, 255, 0.94);
  border-color: rgba(15, 60, 201, 0.18);
}
[data-theme="light"] .chat::before { opacity: 0.22; }
[data-theme="light"] .circuit-line { stroke: var(--azul-carlos); }
[data-theme="light"] .chat__header,
[data-theme="light"] .chat__form {
  background: rgba(234, 240, 251, 0.82);
}

/* ════════ SECTION COMMON ════════ */
section { padding: var(--sp-12) 0; }
@media (min-width: 768px) { section { padding: var(--sp-16) 0; } }

.section-head {
  text-align: left;
  max-width: 820px;
  margin: 0 0 var(--sp-10);
  position: relative;
}
.section-head--left { text-align: left; }
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 760px; }
.section-head--center .section-head__title,
.section-head--center .section-head__sub { margin-left: auto; margin-right: auto; }
.section-head__eyebrow {
  display: inline-block;
  color: var(--text);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
  position: relative;
}
.section-head__title {
  font-size: clamp(2rem, 3.5vw + 0.5rem, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin-bottom: var(--sp-4);
  max-width: 22ch;
}
.section-head__sub {
  color: var(--text-soft);
  font-size: var(--fz-lg);
  max-width: 50ch;
  margin: 0;
}

/* Centrar la cabecera de planes/pricing por contexto (más comercial) */
.pricing .section-head { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; }
.pricing .section-head__title { margin-left: auto; margin-right: auto; }
.pricing .section-head__sub { margin-left: auto; margin-right: auto; }

/* ════════ INTEGRACIONES (hub radial) ════════ */
.int-hub {
  position: relative;
  width: min(520px, 92vw);
  aspect-ratio: 1 / 1;
  margin: var(--sp-10) auto 0;
}
.int-hub__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.int-hub__links line {
  stroke: var(--azul-carlos);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  opacity: 0.4;
  vector-effect: non-scaling-stroke;
  animation: intFlow 1.5s linear infinite;
}
.int-hub__links line:nth-child(2) { animation-duration: 1.8s; }
.int-hub__links line:nth-child(3) { animation-duration: 1.2s; }
.int-hub__links line:nth-child(4) { animation-duration: 2s;   }
.int-hub__links line:nth-child(5) { animation-duration: 1.6s; }
@keyframes intFlow { to { stroke-dashoffset: -20; } }
.int-hub__center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  max-width: 188px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: var(--bg-pure);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: var(--shadow), 0 0 0 10px rgba(15, 60, 201, 0.05);
  z-index: 2;
}
/* Anillo que late alrededor del centro */
.int-hub__center::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--cian-neon);
  opacity: 0;
  animation: intPulse 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes intPulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(1.45); opacity: 0; }
}
/* Logo vertical (isotipo + gestionplay) en el centro */
.gp-logo--stacked { flex-direction: column; gap: 0.3rem; text-align: center; }
.gp-logo--stacked .gp-logo__icon { width: 42px; height: 42px; }
.gp-logo--stacked .gp-logo__word { font-size: 0.95rem; }
.int-node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.int-node__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8rem;
  min-height: 3.4rem;
  padding: 0.7rem 1.3rem;
  background: var(--bg-pure);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-weight: 800;
  font-size: 0.95rem;
  white-space: nowrap;
  letter-spacing: -0.01em;
  animation: intFloat 4s ease-in-out infinite alternate;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.int-hub > .int-node:nth-of-type(1) .int-node__mark { animation-delay: 0s;   }
.int-hub > .int-node:nth-of-type(2) .int-node__mark { animation-delay: .7s;  }
.int-hub > .int-node:nth-of-type(3) .int-node__mark { animation-delay: 1.4s; }
.int-hub > .int-node:nth-of-type(4) .int-node__mark { animation-delay: 1s;   }
.int-hub > .int-node:nth-of-type(5) .int-node__mark { animation-delay: 1.8s; }
@keyframes intFloat {
  from { transform: translateY(-5px); }
  to   { transform: translateY(5px); }
}
.int-node:hover .int-node__mark {
  box-shadow: var(--shadow);
  border-color: rgba(15, 60, 201, 0.3);
}
/* Sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .int-hub__links line,
  .int-hub__center::after,
  .int-node__mark { animation: none; }
}
.int-node__img {
  display: block;
  max-height: 38px;
  max-width: 132px;
  width: auto;
  object-fit: contain;
}
/* Cuando el logo real carga, neutralizamos el color de marca del tile y ocultamos el texto */
.int-node__mark.has-img {
  background: var(--bg-pure);
  border-color: var(--border);
}
.int-node__mark.has-img .int-node__txt { display: none; }
.int-node__mark--meli       { color: #2D3277; background: #FFE600; border-color: #F5DE00; }
.int-node__mark--mpago      { color: #009EE3; }
.int-node__mark--tiendanube { color: #2C6DF6; }
.int-node__mark--shopify    { color: #5E8E3E; text-transform: lowercase; }
.int-node__mark--magento    { color: #EE672F; text-transform: lowercase; }
/* Dark theme: los logos de marca están hechos para fondo CLARO. Igual que las ventanas
   del tour, mantenemos los tiles y el nodo central claros en oscuro para que los logos
   se lean bien (idéntico al modo claro). */
[data-theme="dark"] .int-node__mark,
[data-theme="dark"] .int-node__mark.has-img {
  background: #ffffff;
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,0.55);
}
[data-theme="dark"] .int-node:hover .int-node__mark { border-color: rgba(6,212,251,0.5); }
[data-theme="dark"] .int-hub__center {
  background: #ffffff;
  border-color: rgba(255,255,255,0.16);
}
[data-theme="dark"] .int-hub__center .gp-logo__word        { color: #0B1430; }
[data-theme="dark"] .int-hub__center .gp-logo__word-accent { color: #0F3CC9; }
/* Fallback en grilla — reemplaza al hub radial en pantallas chicas */
.int-grid {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 600px) {
  .int-hub  { display: none; }
  .int-grid { display: flex; }
}

/* ════════ CLIENTES Y RESEÑAS (marquee continuo, nunca se detiene) ════════ */
.reviews-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reviews__track {
  display: flex;
  gap: var(--sp-5);
  width: max-content;
  padding: var(--sp-2) 0 var(--sp-4);
  will-change: transform;
}
.reviews__track .review-card { flex: 0 0 min(360px, 82vw); }
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee { overflow-x: auto; }
  .reviews__track { will-change: auto; }
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--bg-pure);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.review-card[data-placeholder="true"] { border-style: dashed; opacity: 0.9; }
.review-card__stars { color: #F59E0B; letter-spacing: 0.12em; font-size: 1rem; }
.review-card blockquote {
  margin: 0;
  font-size: var(--fz-lg);
  line-height: 1.5;
  color: var(--text);
}
.review-card figcaption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.review-card__logo {
  flex: none;
  height: 40px;
  display: inline-flex;
  align-items: center;
}
.review-card__logo img {
  max-height: 40px;
  max-width: 120px;
  width: auto;
  object-fit: contain;
}
.review-card__who { display: flex; flex-direction: column; }
.review-card__who strong { color: var(--text); }
.review-card__who small  { color: var(--text-soft); font-size: var(--fz-sm); }
.reviews__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  margin: var(--sp-10) 0 0;
  padding: 0;
  list-style: none;
}
.reviews__logos li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 var(--sp-5);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.reviews__logos li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.reviews__logos img {
  max-height: 40px;
  max-width: 120px;
  width: auto;
  object-fit: contain;
}
/* Logos casi blancos detectados por JS → fondo oscuro para que se vean */
.reviews__logos li.is-light-logo { background: #0F1A3C; border-color: #0F1A3C; }
.review-card__logo.is-light-logo {
  background: #0F1A3C;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

/* ════════ CHAT FLOTANTE (popup clásico abajo-derecha) ════════
   El agente (catálogo + chat) vive en un dock fijo que se abre desde la burbuja. */
.ia-dock {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  /* Anclado en la misma esquina que el FAB: crece DESDE ahí (morph) y ocupa
     el espacio hacia arriba. El FAB se oculta mientras el dock está abierto. */
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 96;
  width: min(400px, calc(100vw - 2rem));
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.6);
  transform-origin: bottom right;   /* morphea desde la burbuja */
  transition:
    opacity 0.3s ease,
    transform 0.44s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.44s;
  pointer-events: none;
}
.ia-dock.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 0.3s ease,
    transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}
.ia-dock__window {
  position: relative;
  height: min(720px, calc(100vh - 96px));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(6, 18, 48, 0.34),
    0 10px 28px rgba(6, 18, 48, 0.22);
}
/* El agente llena todo el window del dock */
.ia-dock .hero__right {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  padding-top: 0;
  /* En mobile, `.hero__right` arrastra `margin-top: var(--sp-5)` de la regla
     del hero-stack (línea ~914). Dentro del dock ese margen empuja el chat
     hacia abajo y lo hace desbordar el window → el input se ve cortado. */
  margin-top: 0;
}
.ia-dock .chat {
  height: 100%;
  min-height: 0;
  max-height: none;
}
/* Dock CERRADO: el chat interno no debe capturar toques. El widget arrastra
   la clase `.is-active` permanente (legado del hero-split), que fuerza
   visibility:visible + pointer-events:auto. Como en mobile el dock ocupa casi
   toda la pantalla, ese chat invisible interceptaba los toques del resto de la
   página (FAQ, botones) aun estando cerrado. Especificidad (0,4,0) > la regla
   legada para ganarle sin depender del orden. */
.ia-dock:not(.is-open) .chat.is-active {
  visibility: hidden;
  pointer-events: none;
}
/* Botón de cerrar (esquina superior derecha del window) */
.ia-dock__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(8, 18, 48, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.ia-dock__close:hover {
  background: rgba(6, 212, 251, 0.16);
  border-color: var(--cian-neon);
  color: var(--cian-neon);
  transform: rotate(90deg);
}
@media (max-width: 600px) {
  /* En mobile el dock es una tarjeta casi a pantalla completa, apoyada
     debajo del header. Pequeños insets laterales + respeto de la safe-area
     inferior (notch iOS) para que el input no quede pegado/cortado al borde. */
  .ia-dock {
    right: 8px;
    left: 8px;
    top: calc(var(--header-h) + 6px);   /* arranca apenas debajo del header */
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: auto;           /* top + bottom definen la altura */
  }
  .ia-dock__window {
    height: 100%;
    border-radius: var(--radius-lg);
  }
}
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background: linear-gradient(135deg, var(--azul-carlos-dark) 0%, var(--text) 100%);
  color: #fff;
}
.video-placeholder__play {
  width: 80px; height: 80px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  color: #fff;
  transition: all var(--t-base);
}
.video-placeholder__play:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.08);
}
.video-placeholder__label {
  color: rgba(255,255,255,0.7);
  font-size: var(--fz-sm);
  margin: 0;
}

/* ════════ BENEFITS ════════ */
.benefits { background: transparent; }
.benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 600px) {
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .benefits__grid { grid-template-columns: repeat(3, 1fr); }
}
.benefit-card {
  position: relative;
  padding: var(--sp-6);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 60, 201, 0.10);
  border-radius: var(--radius-lg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: var(--shadow);
  transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  overflow: hidden;
  counter-increment: benefit;
}
.benefit-card::before {
  content: counter(benefit, decimal-leading-zero);
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}
.benefit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 60, 201, 0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}
.benefit-card:hover {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(15, 60, 201, 0.28);
  box-shadow: var(--shadow-lg);
}
.benefit-card:hover::after { opacity: 1; }
.benefits__grid { counter-reset: benefit; }
.benefit-card__icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--azul-carlos);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-5);
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.benefit-card:hover .benefit-card__icon {
  background: var(--azul-carlos);
  color: var(--bg-pure);
  border-color: var(--azul-carlos);
  transform: rotate(-4deg) scale(1.05);
}
.benefit-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
  max-width: 18ch;
}
.benefit-card p {
  color: var(--text-soft);
  margin: 0;
  font-size: 0.95rem;
}

/* ════════ PRICING ════════ */
.pricing {
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(6, 212, 251, 0.05), transparent 60%),
    var(--bg-hielo);
  position: relative;
}
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
  margin-top: var(--sp-8);
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-5);
  background: var(--bg-pure);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  overflow: hidden;
}
.plan::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 60, 201, 0.03), transparent 30%);
  pointer-events: none;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--azul-carlos); }
.plan--featured {
  background: linear-gradient(180deg, var(--azul-carlos-deep) 0%, var(--azul-carlos-dark) 100%);
  border-color: var(--azul-carlos-deep);
  box-shadow: var(--shadow-lg);
  color: var(--bg-pure);
  transform: translateY(-8px);
}
.plan--featured::before {
  background:
    radial-gradient(circle at 0% 0%, rgba(6, 212, 251, 0.25), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.18), transparent 50%);
}
.plan--featured:hover { transform: translateY(-12px); }
.plan--featured .plan__name { color: var(--cian-neon); }
.plan--featured .plan__price { color: var(--bg-pure); }
.plan--featured .plan__price span,
.plan--featured .plan__price small { color: rgba(255,255,255,0.7); }
.plan--featured .plan__tag { color: rgba(255,255,255,0.7); }
.plan--featured .plan__features li { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.12); }
.plan--featured .plan__features li.muted { color: rgba(255,255,255,0.45); }
.plan--featured .plan__features li strong { color: var(--bg-pure); }
.plan--featured .plan__features li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306D4FB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.plan__badge {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  padding: 0.35rem 0.7rem;
  background: var(--cian-neon);
  color: var(--azul-carlos-deep);
  border-radius: var(--radius-full);
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 2;
}
.plan__head {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.plan--featured .plan__head { border-color: rgba(255,255,255,0.15); }
.plan__name {
  font-family: var(--ff-sans);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--azul-carlos);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.plan__price {
  font-family: var(--ff-mono);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: baseline;
  gap: 2px;
  position: relative;
  z-index: 1;
}
.plan__price span { font-size: 1.5rem; color: var(--text-soft); font-weight: 500; }
.plan__price small { font-family: var(--ff-sans); font-size: 0.9rem; font-weight: 500; color: var(--text-soft); margin-left: 6px; letter-spacing: 0; }
.plan__tag {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin: 0;
  font-style: italic;
  font-family: var(--ff-sans);
  font-weight: 500;
}
.plan__features {
  flex: 1;
  margin-bottom: var(--sp-6);
  position: relative;
  z-index: 1;
}
.plan__features li {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  padding-left: 1.75rem;
  color: var(--text-soft);
  font-size: 0.92rem;
}
.plan__features li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.plan__features li.muted { color: var(--text-mute); }
.plan__features li.muted::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.plan__features li strong { color: var(--text); }
.plan__features li:last-child { border-bottom: none; }

.plan .btn { position: relative; z-index: 1; }
.plan--featured .btn--primary { background: var(--cian-neon); color: var(--azul-carlos-deep); }
.plan--featured .btn--ghost { color: var(--bg-pure); border-color: rgba(255,255,255,0.3); }
.plan--featured .btn--ghost:hover { border-color: var(--cian-neon); background: rgba(6, 212, 251, 0.1); color: var(--cian-neon); }

.pricing__addons {
  margin-top: var(--sp-10);
  padding: var(--sp-6) var(--sp-8);
  background: var(--bg-pure);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-align: center;
  position: relative;
}
.pricing__addons::before {
  content: "(04)";
  position: absolute;
  top: -10px;
  left: var(--sp-5);
  padding: 0 var(--sp-2);
  background: var(--bg-hielo);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}
.pricing__addons h3 {
  font-family: var(--ff-sans);
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: var(--sp-4);
  letter-spacing: -0.03em;
}
.pricing__addons h3 small { color: var(--text-soft); font-weight: 400; font-size: 1rem; }
.pricing__addons ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  font-size: 0.95rem;
}
.pricing__addons li { color: var(--text-soft); }
.pricing__addons strong { color: var(--text); font-family: var(--ff-mono); font-weight: 700; }

/* ════════ FAQ ════════ */
.faq__layout {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}
@media (min-width: 900px) {
  .faq__layout {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-10);
  }
}
.faq-item {
  padding: var(--sp-5) 0;
  background: transparent;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
  transition: padding var(--t-base);
}
.faq-item:first-of-type { border-top: 1px solid var(--rule); }
.faq-item[open] { padding-bottom: var(--sp-5); }
.faq-item summary {
  cursor: pointer;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
  transition: color var(--t-base);
}
.faq-item summary:hover { color: var(--azul-carlos); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0E1F' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  transition: transform var(--t-base);
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item p {
  margin: var(--sp-4) 0 0;
  color: var(--text-soft);
  max-width: 60ch;
  font-size: 0.98rem;
}

/* Glassmorphism — translúcido sobre el fondo de la sección, no introduce
   un color propio que rompa la continuidad cromática. */
.faq__cta {
  padding: var(--sp-8) var(--sp-6);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(15, 60, 201, 0.10), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(6, 212, 251, 0.08), transparent 60%);
  pointer-events: none;
}
.faq__cta::after {
  content: "(05)";
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  z-index: 1;
}
.faq__cta > * { position: relative; z-index: 1; }
.faq__cta h2 {
  color: var(--text);
  font-size: clamp(1.5rem, 2vw + 0.8rem, 2rem);
  line-height: 1.1;
  margin-bottom: var(--sp-3);
}
.faq__cta h2 em { color: var(--azul-carlos); }
.faq__cta p {
  color: var(--text-soft);
  margin-bottom: var(--sp-5);
}

.contact-form {
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.contact-form__field { display: flex; flex-direction: column; gap: var(--sp-1); }
.contact-form__field span {
  font-size: var(--fz-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.contact-form__field input,
.contact-form__field textarea {
  padding: 0.7rem 0.9rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  color: #fff;
  font-family: inherit;
  font-size: var(--fz-base);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder { color: rgba(255,255,255,0.5); }
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--cian-neon);
  background: rgba(255,255,255,0.18);
}
.contact-form .btn--primary {
  background: var(--cian-neon);
  color: var(--azul-carlos-deep);
  border-color: var(--cian-neon);
  margin-top: var(--sp-3);
}
.contact-form .btn--primary:hover {
  background: var(--bg-pure);
  border-color: var(--bg-pure);
  color: var(--azul-carlos-deep);
}
.contact-form__status {
  font-size: var(--fz-sm);
  margin: var(--sp-2) 0 0;
  min-height: 1.2em;
}
.contact-form__status.is-success { color: #6EE7B7; }
.contact-form__status.is-error   { color: #FCA5A5; }

/* ════════ FOOTER ════════ */
.site-footer {
  padding: var(--sp-12) 0 var(--sp-5);
  background: var(--azul-carlos-deep);
  color: rgba(255,255,255,0.7);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(15, 60, 201, 0.35), transparent 60%),
    radial-gradient(600px 400px at 100% 100%, rgba(6, 212, 251, 0.10), transparent 60%);
  pointer-events: none;
}
.site-footer > * { position: relative; z-index: 1; }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-footer__logo { margin-bottom: var(--sp-3); }
.site-footer h4 {
  color: #fff;
  font-family: var(--ff-sans);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.site-footer a { color: rgba(255,255,255,0.8); }
.site-footer a:hover { color: var(--cian-neon); }
.site-footer ul li { padding: var(--sp-1) 0; }
.site-footer__bottom {
  padding-top: var(--sp-5);
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.45);
}

/* ════════ REVEAL ANIMATIONS ════════ */
.reveal {
  opacity: 0;
  transform: translateY(38px) scale(0.96);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Variantes direccionales (entran desde un costado) */
.reveal--left  { transform: translateX(-48px); }
.reveal--right { transform: translateX(48px); }
.reveal--left.is-visible,
.reveal--right.is-visible { transform: none; }
/* Cascada en las cards de Soluciones */
.benefits__grid .reveal:nth-child(2) { transition-delay: 0.07s; }
.benefits__grid .reveal:nth-child(3) { transition-delay: 0.14s; }
.benefits__grid .reveal:nth-child(4) { transition-delay: 0.21s; }
.benefits__grid .reveal:nth-child(5) { transition-delay: 0.28s; }
.benefits__grid .reveal:nth-child(6) { transition-delay: 0.35s; }
/* En el hero, los spans del título hacen ZOOM-IN (escala) en vez del desplazamiento
   vertical genérico de .reveal. transform-origin centrado → crece desde el centro,
   sin irse hacia un lado. */
.hero__title .reveal {
  display: inline-block;
  transform: scale(0.7);
  transform-origin: center center;
}
.hero__title .reveal.is-visible {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ════════ MARQUEE EDITORIAL ════════ */
.marquee {
  background: var(--text);
  color: var(--bg);
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
  overflow: hidden;
  padding: var(--sp-3) 0;
  position: relative;
  z-index: 2;
}
.marquee__track {
  display: flex;
  gap: var(--sp-6);
  width: max-content;
  animation: marquee 40s linear infinite;
  font-family: var(--ff-sans);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__track span { padding: 0 var(--sp-2); }
.marquee__dot { color: var(--cian-neon); font-style: normal; opacity: 0.7; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ════════ PROCESS (3 pasos) ════════ */
.process {
  background: transparent;
  position: relative;
}
.process::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent);
}
.process__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: process-step;
  position: relative;
}
@media (min-width: 820px) {
  .process__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
  /* Línea horizontal conectora entre pasos */
  .process__steps::before {
    content: "";
    position: absolute;
    top: 3.2rem;
    left: 8%;
    right: 8%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 12px);
    z-index: 0;
  }
}
.process__step {
  position: relative;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  /* Glass: superficie translúcida con blur sobre el fondo hielo */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.07);
  z-index: 1;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.process__step:hover {
  transform: translateY(-4px);
  border-color: var(--azul-carlos);
  box-shadow: 0 18px 44px rgba(15, 60, 201, 0.16);
}
.process__num {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--azul-carlos);
  display: block;
  margin-bottom: var(--sp-4);
}
.process__title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}
.process__text {
  color: var(--text-soft);
  font-size: 0.98rem;
  margin: 0;
  max-width: 38ch;
}
.process__cta {
  margin-top: var(--sp-8);
  text-align: center;
}

/* ════════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════════
   Estrategia: override de tokens en [data-theme="dark"]
   Las secciones que ya son dark (chat, faq__cta, footer,
   header, plan--featured) se mantienen casi sin cambios.
*/
[data-theme="dark"] {
  --bg:                #0A0E1F;
  --bg-pure:           #06091A;          /* superficie elevada (cards, plans, video frame) */
  --bg-hielo:          #0F142A;          /* secciones tipo pricing */
  --bg-soft:           #161C36;
  --border:            #1F263F;
  --rule:              #232A45;

  --text:              #F4F1EA;          /* cream, espejo del bg light */
  --text-soft:         #A4A9BD;
  --text-mute:         #6B7090;

  --azul-carlos-soft:  rgba(15, 60, 201, 0.18);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow:      0 8px 30px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg:   0 28px 80px rgba(0, 0, 0, 0.55), 0 8px 28px rgba(0, 0, 0, 0.3);

  /* Catálogo de agentes — restaura el look Deep Tech oscuro en tema dark */
  --cat-bg:            var(--chat-bg);
  --cat-border:        var(--chat-border);
  --cat-text:          var(--chat-text);
  --cat-text-soft:     var(--chat-text-soft);
  --cat-accent:        var(--cian-neon);
  --cat-card-bg:       rgba(15, 26, 60, 0.55);
  --cat-card-border:   rgba(255, 255, 255, 0.08);
  --cat-card-bg-hover: rgba(15, 26, 60, 0.78);
  --cat-glow-1:        rgba(59, 130, 246, 0.18);
  --cat-glow-2:        rgba(139, 92, 246, 0.15);

  color-scheme: dark;
}

/* Grain: en dark usamos screen blend para que sea visible sobre fondos oscuros */
[data-theme="dark"] body::after {
  mix-blend-mode: screen;
  opacity: 0.05;
}

/* Header: glassmorphism. Hereda el mesh gradient del hero por backdrop-blur,
   no introduce un color propio que rompa la continuidad visual. */
[data-theme="dark"] .site-header { background: transparent; }
[data-theme="dark"] .site-header__inner {
  background: rgba(10, 14, 31, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .site-header.is-scrolled .site-header__inner {
  background: rgba(10, 14, 31, 0.82);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .site-header.is-menu-open .site-nav {
  background: #0A1330;
}

/* Selección de texto en dark */
[data-theme="dark"] ::selection { background: var(--cian-neon); color: var(--azul-carlos-deep); }

/* H1 em (italic serif): cian neón en dark para más contraste con bg oscuro */
[data-theme="dark"] h1 em,
[data-theme="dark"] h2 em,
[data-theme="dark"] h3 em,
[data-theme="dark"] p em { color: var(--cian-neon); }

/* Eyebrow del hero — fondo dark sutil */
[data-theme="dark"] .hero__eyebrow {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .hero__pulse { background: var(--cian-neon); }
[data-theme="dark"] .hero__pulse {
  animation: pulse-dark 2s infinite;
}
@keyframes pulse-dark {
  0%   { box-shadow: 0 0 0 0 rgba(6, 212, 251, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(6, 212, 251, 0); }
  100% { box-shadow: 0 0 0 0 rgba(6, 212, 251, 0); }
}

/* Hero: mesh gradients más vibrantes sobre dark */
[data-theme="dark"] .hero {
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(15, 60, 201, 0.35), transparent 60%),
    radial-gradient(700px 500px at 100% 20%, rgba(6, 212, 251, 0.15), transparent 60%),
    radial-gradient(500px 400px at 30% 110%, rgba(139, 92, 246, 0.18), transparent 60%),
    var(--bg);
}
[data-theme="dark"] .hero::after {
  background: linear-gradient(90deg, transparent, var(--cian-neon) 20%, var(--cian-neon) 80%, transparent);
  opacity: 0.18;
}
[data-theme="dark"] .hero__trust strong { color: var(--cian-neon); }

/* Marquee: invierte — fondo cream con texto oscuro (alto impacto editorial) */
[data-theme="dark"] .marquee {
  background: var(--text);
  color: var(--azul-carlos-deep);
  border-color: var(--text);
}
[data-theme="dark"] .marquee__dot { color: var(--azul-carlos); }

/* Section heads: la línea hairline arriba sigue funcionando con --rule */
/* (no requiere override extra) */

/* Benefits: cards dark con hairlines visibles */
[data-theme="dark"] .benefits { background: transparent; }
[data-theme="dark"] .benefit-card {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .benefit-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--cian-neon);
}
[data-theme="dark"] .benefit-card::after {
  background: linear-gradient(135deg, rgba(6, 212, 251, 0.08) 0%, transparent 60%);
}
[data-theme="dark"] .benefit-card__icon {
  border-color: var(--border);
  color: var(--cian-neon);
}
[data-theme="dark"] .benefit-card:hover .benefit-card__icon {
  background: var(--cian-neon);
  color: var(--azul-carlos-deep);
  border-color: var(--cian-neon);
}

/* Pricing: fondo más profundo, cards dark */
[data-theme="dark"] .pricing {
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(6, 212, 251, 0.08), transparent 60%),
    var(--bg-hielo);
}
[data-theme="dark"] .plan {
  background: var(--bg-pure);
  border-color: var(--border);
}
[data-theme="dark"] .plan:hover { border-color: var(--cian-neon); }
[data-theme="dark"] .plan::before {
  background: linear-gradient(180deg, rgba(6, 212, 251, 0.04), transparent 30%);
}
[data-theme="dark"] .plan__name { color: var(--cian-neon); }
[data-theme="dark"] .plan__price { color: var(--text); }
[data-theme="dark"] .plan__price span,
[data-theme="dark"] .plan__price small { color: var(--text-soft); }
[data-theme="dark"] .plan__features li { color: var(--text-soft); border-color: var(--border); }
[data-theme="dark"] .plan__features li strong { color: var(--text); }
/* En dark, el featured se mantiene casi igual pero refuerza el glow */
[data-theme="dark"] .plan--featured {
  background: linear-gradient(180deg, #050920 0%, #0A1A50 100%);
  border-color: #1B2A6C;
  box-shadow: 0 30px 80px rgba(15, 60, 201, 0.35), 0 0 0 1px rgba(6, 212, 251, 0.1);
}

[data-theme="dark"] .pricing__addons {
  background: var(--bg-pure);
  border-color: var(--border);
}
[data-theme="dark"] .pricing__addons::before {
  background: var(--bg-hielo);
}
[data-theme="dark"] .pricing__addons strong { color: var(--cian-neon); }

/* FAQ */
[data-theme="dark"] .faq-item { border-color: var(--rule); }
[data-theme="dark"] .faq-item:first-of-type { border-top-color: var(--rule); }
[data-theme="dark"] .faq-item summary { color: var(--text); }
[data-theme="dark"] .faq-item summary:hover { color: var(--cian-neon); }
[data-theme="dark"] .faq-item summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1EA' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
/* FAQ CTA en dark: glass oscuro translúcido */
[data-theme="dark"] .faq__cta {
  background: rgba(15, 20, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .faq__cta::before {
  background:
    radial-gradient(circle at 0% 0%, rgba(6, 212, 251, 0.18), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.14), transparent 60%);
}
[data-theme="dark"] .faq__cta::after { color: var(--text-mute); }
[data-theme="dark"] .faq__cta h2 { color: var(--text); }
[data-theme="dark"] .faq__cta h2 em { color: var(--cian-neon); }
[data-theme="dark"] .faq__cta p { color: var(--text-soft); }
[data-theme="dark"] .faq__cta-foot { color: var(--text-mute); }
[data-theme="dark"] .faq__cta-foot a { color: var(--cian-neon); }
[data-theme="dark"] .faq__cta-foot a:hover { color: #fff; }

/* Buttons */
[data-theme="dark"] .btn--primary {
  background: var(--cian-neon);
  color: var(--azul-carlos-deep);
  border-color: var(--cian-neon);
}
[data-theme="dark"] .btn--primary:hover {
  background: #FFFFFF;
  color: var(--azul-carlos-deep);
  border-color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(6, 212, 251, 0.55);
}
[data-theme="dark"] .btn--ghost {
  color: var(--text);
  border-color: var(--rule);
}
[data-theme="dark"] .btn--ghost:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* Plan featured en dark — los botones se invierten */
[data-theme="dark"] .plan--featured .btn--primary {
  background: var(--cian-neon);
  color: var(--azul-carlos-deep);
  border-color: var(--cian-neon);
}
[data-theme="dark"] .plan--featured .btn--primary:hover {
  background: #FFFFFF;
  color: var(--azul-carlos-deep);
  border-color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(6, 212, 251, 0.55);
}

[data-theme="dark"] .section-head__eyebrow { color: var(--text); }

/* Footer ya es dark, suavizamos un poco */
[data-theme="dark"] .site-footer { background: #04081A; }

/* Process en dark */
[data-theme="dark"] .process { background: transparent; }
[data-theme="dark"] .process__step {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .process__step:hover {
  border-color: var(--cian-neon);
  box-shadow: 0 18px 44px rgba(6, 212, 251, 0.16);
}
[data-theme="dark"] .process__num { color: var(--cian-neon); }

/* faq__cta foot link */
.faq__cta-foot {
  margin: var(--sp-4) 0 0;
  font-size: 0.88rem;
  color: var(--text-mute);
  text-align: center;
}
.faq__cta-foot a { color: var(--azul-carlos); font-weight: 600; }
.faq__cta-foot a:hover { color: var(--azul-carlos-dark); }

/* ════════ IMPACTO — Barras animadas ════════
   Mide visualmente el ROI de incorporar los agentes. */
.impact {
  padding: var(--sp-10) 0;
  background: transparent;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.impact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (max-width: 980px) {
  .impact__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .impact__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}
.impact-bar {
  background: var(--bg-pure);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.impact-bar:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--azul-carlos);
}
.impact-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.impact-bar__value {
  font-family: var(--ff-mono);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--azul-carlos);
  line-height: 1;
}
.impact-bar__label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  text-align: right;
  max-width: 120px;
}
.impact-bar__track {
  height: 10px;
  background: var(--bg-hielo);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}
.impact-bar__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--azul-carlos), var(--cian-neon));
  border-radius: var(--radius-full);
  transition: width 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.impact-bar__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: impactShine 2.4s ease-in-out infinite;
}
@keyframes impactShine {
  0%, 60% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
.impact-bar.is-visible .impact-bar__fill { width: var(--value, 80%); }
.impact-bar__caption {
  margin: var(--sp-3) 0 0;
  font-size: 0.84rem;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Impact en dark */
[data-theme="dark"] .impact {
  background: transparent;
  border-color: var(--border);
}
[data-theme="dark"] .impact-bar {
  background: var(--bg-pure);
  border-color: var(--border);
}
[data-theme="dark"] .impact-bar:hover { border-color: var(--cian-neon); }
[data-theme="dark"] .impact-bar__value { color: var(--cian-neon); }
[data-theme="dark"] .impact-bar__track { background: var(--bg-hielo); }

/* ════════ IMPACT — tarjetas dashboard (línea+área, sparkline, ecualizador) ════════ */
.impact-card {
  background: var(--bg-pure);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.impact-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--azul-carlos);
}
/* Antes ocupaban el ancho completo (grid-column: 1 / -1); ahora entran
   como una celda más para que toda la sección quepa en una sola vista. */
.impact-card--wide { grid-column: auto; }
.impact-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.impact-card__value {
  font-family: var(--ff-mono);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--azul-carlos);
  line-height: 1;
}
.impact-card__label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  text-align: right;
  max-width: 130px;
}
.impact-card__caption {
  margin: var(--sp-3) 0 0;
  font-size: 0.84rem;
  color: var(--text-soft);
  line-height: 1.5;
}

/* — Gráfico de línea + área — */
.impact-chart { position: relative; }
.impact-chart__svg {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 200;
  max-height: 128px;
  display: block;
  overflow: visible;
}
.impact-chart__grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 3 7;
  opacity: 0.7;
}
.impact-chart__area {
  fill: url(#gpAreaGrad);
  opacity: 0;
  transition: opacity 900ms ease 700ms;
}
.impact-card.is-visible .impact-chart__area { opacity: 1; }
.impact-chart__line {
  fill: none;
  stroke: var(--azul-carlos);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 1800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.impact-chart__dot-core {
  fill: var(--cian-neon);
  opacity: 0;
  transition: opacity 400ms ease 1500ms;
}
.impact-card.is-visible .impact-chart__dot-core { opacity: 1; }
.impact-chart__dot-ring { fill: var(--cian-neon); opacity: 0; }
.impact-card.is-visible .impact-chart__dot-ring {
  animation: impactDotPulse 2.4s ease-out 1600ms infinite;
}
@keyframes impactDotPulse {
  0%   { r: 4px;  opacity: 0.6; }
  70%  { r: 18px; opacity: 0; }
  100% { r: 18px; opacity: 0; }
}
.impact-chart__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}

/* — Sparkline — */
.impact-spark { margin-top: auto; }
.impact-spark__svg {
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 60;
  display: block;
  overflow: visible;
}
.impact-spark__area {
  fill: url(#gpAreaGrad);
  opacity: 0;
  transition: opacity 800ms ease 600ms;
}
.impact-card.is-visible .impact-spark__area { opacity: 1; }
.impact-spark__line {
  fill: none;
  stroke: var(--azul-carlos);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 1600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.impact-spark__dot-core {
  fill: var(--cian-neon);
  opacity: 0;
  transition: opacity 400ms ease 1300ms;
}
.impact-card.is-visible .impact-spark__dot-core { opacity: 1; }
.impact-spark__dot-ring { fill: var(--cian-neon); opacity: 0; }
.impact-card.is-visible .impact-spark__dot-ring {
  animation: impactDotPulse 2.4s ease-out 1400ms infinite;
}

/* — Punto de luz que recorre la línea (movimiento continuo) — */
.impact-chart__runner {
  fill: #FFFFFF;
  filter: drop-shadow(0 0 6px var(--cian-neon)) drop-shadow(0 0 12px var(--cian-neon));
}
.impact-spark__runner {
  fill: #FFFFFF;
  filter: drop-shadow(0 0 5px var(--cian-neon));
}

/* — Brillo suave que barre el área — */
.impact-chart::after,
.impact-spark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(6, 212, 251, 0.12) 50%, transparent 58%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: impactSheen 5s ease-in-out infinite;
}
@keyframes impactSheen {
  0%   { background-position: 160% 0; }
  100% { background-position: -160% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .impact-chart__runner,
  .impact-spark__runner { display: none; }
  .impact-chart::after,
  .impact-spark::after { display: none; }
}

/* — Ecualizador (onda) — */
/* Donut de uptime — reemplaza al equalizer.
   Se llena una sola vez al entrar en viewport (.reveal.is-visible) y queda estático. */
.impact-uptime {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 2px 0;
}
.impact-uptime__svg {
  width: 110px;
  height: 110px;
  overflow: visible;
}
.impact-uptime__track {
  fill: none;
  stroke: rgba(6, 212, 251, 0.12);
  stroke-width: 9;
}
.impact-uptime__fill {
  fill: none;
  stroke: var(--cian-neon);
  stroke-width: 9;
  stroke-linecap: round;
  /* Circunferencia ≈ 289 (2π × r46). Arranca vacío. */
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  /* Rota para que el arco empiece desde las 12 en punto */
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  filter: drop-shadow(0 0 6px rgba(6, 212, 251, 0.55));
}
/* Dispara la animación una sola vez cuando la card entra en viewport */
.reveal.is-visible .impact-uptime__fill {
  animation: uptimeArc 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes uptimeArc {
  from { stroke-dashoffset: 289; }
  to   { stroke-dashoffset: 0; }
}
.impact-uptime__pct {
  font-family: var(--ff-mono);
  font-size: 20px;
  font-weight: 700;
  fill: var(--cian-neon);
}
.impact-uptime__sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--text-soft);
}
@media (prefers-reduced-motion: reduce) {
  .impact-uptime__fill {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* — Dashboard cards en dark — */
[data-theme="dark"] .impact-card { background: var(--bg-pure); border-color: var(--border); }
[data-theme="dark"] .impact-card:hover { border-color: var(--cian-neon); }
[data-theme="dark"] .impact-card__value { color: var(--cian-neon); }
[data-theme="dark"] .impact-chart__line,
[data-theme="dark"] .impact-spark__line { stroke: var(--cian-neon); }

/* ═══════════════════════════════════════════════════════════
   PORTAL REVEAL — intro cinematográfico (SVG mask zoom-through)
   Solo aparece en la primera visita de la sesión. JS: /assets/js/portal.js
   ═══════════════════════════════════════════════════════════ */
.portal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
  overflow: hidden;
}
.portal.is-done {
  opacity: 0;
  pointer-events: none;
}

/* Fondo gradiente animado — paleta Carlos */
.portal__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    var(--azul-carlos) 0%,
    #1e1b4b 25%,
    var(--cian-neon) 55%,
    #ffffff 75%,
    var(--azul-carlos) 100%
  );
  background-size: 400% 400%;
  animation: portalGradient 15s ease-in-out infinite;
}
@keyframes portalGradient {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Cortina SVG con mask */
.portal__curtain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.portal__curtain-rect {
  transition: opacity 200ms linear;
}
#portalMaskGroup {
  transform-origin: 500px 500px;
}

/* Intro UI: mouse + label */
.portal__intro {
  position: absolute;
  left: 50%;
  bottom: clamp(48px, 9vh, 96px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #fff;
  transition: opacity 360ms cubic-bezier(0.77, 0, 0.175, 1),
              transform 360ms cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
}
.portal__intro.is-hidden {
  opacity: 0;
  transform: translate(-50%, -60px);
}
.portal__mouse {
  color: #fff;
  opacity: 0.9;
}
.portal__mouse-dot {
  animation: portalMouseBounce 2s ease-in-out infinite;
}
@keyframes portalMouseBounce {
  0%, 100% { transform: translateY(0);   opacity: 1;   }
  50%      { transform: translateY(5px); opacity: 0.35; }
}
.portal__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Barra de progreso inferior */
.portal__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 2;
  pointer-events: none;
}
.portal__progress-bar {
  height: 100%;
  width: 0%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
  transition: width 100ms linear;
}

/* Cuando el portal está activo, lockeamos el scroll del body */
body.portal-active {
  overflow: hidden;
  height: 100vh;
}

/* Accesibilidad: respetar prefers-reduced-motion (también skipea por JS) */
@media (prefers-reduced-motion: reduce) {
  .portal { display: none; }
  body.portal-active { overflow: auto; height: auto; }
}

/* Mobile: animación más lenta para no joder el FPS */
@media (max-width: 600px) {
  .portal__bg { animation-duration: 22s; }
  #portalMaskGroup text { font-size: 200px; }
}
/* ════════════════════════════════════════════════════════════
   HERO CENTRADO (variante 1) + OVERLAY IA FULL-SCREEN
   ════════════════════════════════════════════════════════════ */

/* Hero centrado: una sola columna, todo al medio */
@media (min-width: 980px) {
  .hero__grid--centered { grid-template-columns: 1fr; }
}
.hero__center {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__grid--centered .hero__title { justify-content: center; }
.hero__grid--centered .hero__sub { margin-left: auto; margin-right: auto; }
.hero__grid--centered .hero__ctas { justify-content: center; margin-top: var(--sp-5); }
.hero__grid--centered .hero__trust { justify-content: center; }

/* CTA principal: glow constante + anillo pulsante (el wrap no se recorta) */
.hero__cta-main {
  font-size: 1.05rem;
  padding: 1.15rem 2.1rem;
  box-shadow: 0 12px 38px rgba(6, 212, 251, 0.30);
}
.hero__cta-wrap {
  position: relative;
  display: inline-flex;
  border-radius: var(--radius-full);
}
.hero__cta-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(6, 212, 251, 0.5);
  animation: ctaPulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0    rgba(6, 212, 251, 0.5); }
  70%  { box-shadow: 0 0 0 20px rgba(6, 212, 251, 0); }
  100% { box-shadow: 0 0 0 0    rgba(6, 212, 251, 0); }
}

/* Hero responsive en pantallas chicas (< 560px):
   el CTA tiene texto largo y .btn usa white-space:nowrap → desbordaba el ancho
   y "cortaba" toda la sección. Acá lo dejamos envolver y ocupar el ancho. */
@media (max-width: 560px) {
  .hero__eyebrow {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    font-size: 0.72rem;
    padding: 0.4rem 0.8rem;
  }
  /* El piso de 2.5rem del clamp dejaba palabras largas (ej. "Inteligencia")
     más anchas que el viewport; acá permitimos achicar más. */
  .hero__title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .hero__cta-wrap {
    display: flex;
    width: 100%;
    max-width: 360px;
  }
  .hero__cta-main {
    width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    font-size: 0.98rem;
    padding: 0.95rem 1.3rem;
  }
  .hero__trust {
    gap: var(--sp-4) var(--sp-5);
  }
  .hero__trust strong { font-size: 2rem; }
}

/* (Overlay full-screen eliminado: el agente ahora vive embebido en #agente-interactivo) */

/* FAB IA: burbuja lanzadora del chat, siempre visible abajo-derecha (forma clásica) */
.ia-fab {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 96;          /* por encima del dock para poder cerrarlo */
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--azul-carlos), var(--cian-neon));
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  transform: scale(1);
  transform-origin: bottom right;
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease,
    width 0.3s ease;
  animation: iaFabPulse 2.6s ease-out infinite;
}
/* Brillo que barre la burbuja cada tanto (más vistoso) */
.ia-fab::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(-200%) skewX(-18deg);
  animation: iaFabSheen 5s ease-in-out 1.4s infinite;
  pointer-events: none;
}
.ia-fab:hover { transform: scale(1.06); }
/* Con el dock abierto, la burbuja se achica/desvanece (morphea hacia el chat) */
.ia-fab.is-active {
  animation: none;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
.ia-fab__icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  transition: opacity 0.2s ease, transform 0.3s ease;
}
/* Swap de íconos chat ↔ cerrar según estado */
.ia-fab__icon--close { display: none; }
.ia-fab__icon--chat { animation: iaIconNudge 4.5s ease-in-out infinite; }
.ia-fab.is-active .ia-fab__icon--chat  { display: none; }
.ia-fab.is-active .ia-fab__icon--close { display: block; }
.ia-fab__label {
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.95rem;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.32s ease, opacity 0.25s ease, margin-left 0.32s ease;
}
.ia-fab:hover .ia-fab__label,
.ia-fab:focus-visible .ia-fab__label {
  max-width: 180px;
  margin-left: 10px;
  opacity: 1;
}
/* Con el dock abierto, no mostramos la etiqueta (solo el ícono X) */
.ia-fab.is-active .ia-fab__label {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
}
@keyframes iaFabPulse {
  0%   { box-shadow: 0 12px 34px rgba(6, 212, 251, 0.40), 0 0 0 0    rgba(6, 212, 251, 0.45); }
  70%  { box-shadow: 0 12px 34px rgba(6, 212, 251, 0.40), 0 0 0 16px rgba(6, 212, 251, 0); }
  100% { box-shadow: 0 12px 34px rgba(6, 212, 251, 0.40), 0 0 0 0    rgba(6, 212, 251, 0); }
}
/* Brillo que barre la burbuja */
@keyframes iaFabSheen {
  0%   { transform: translateX(-200%) skewX(-18deg); }
  16%  { transform: translateX(360%)  skewX(-18deg); }
  100% { transform: translateX(360%)  skewX(-18deg); }
}
/* Pequeño "saludo" del ícono de chat cada tanto */
@keyframes iaIconNudge {
  0%, 86%, 100% { transform: rotate(0) scale(1); }
  90% { transform: rotate(-9deg) scale(1.1); }
  94% { transform: rotate(7deg)  scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .ia-fab, .ia-fab::before, .ia-fab__icon--chat { animation: none; }
}

/* ════════ FONDO AURA TECH ════════
   Capa global fija detrás del contenido. Dos blobs azul/cian con blur enorme
   que flotan en loop. Cero JS, cero costo de render (GPU-only: transform). */
.bg-auras {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;                /* queda debajo de TODO el contenido del flujo */
  overflow: hidden;
  background-color: transparent; /* el color base lo pone html (var(--bg)) */
  pointer-events: none;       /* nunca capta clics */
}
.aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);        /* más blur = más difusa y menos disruptiva */
  opacity: 0.22;              /* bajada de 0.5 → mucho más sutil al scrollear */
  will-change: transform;     /* GPU hint: la animación es de transform */
}
.aura-1 {
  width: 500px;
  height: 500px;
  background-color: #0044ff;  /* azul eléctrico */
  top: -10%;
  left: -10%;
  /* Deriva continua: recorrido circular suave, sin rebote brusco */
  animation: floatAura1 28s infinite ease-in-out;
}
.aura-2 {
  width: 400px;
  height: 400px;
  background-color: #00f0ff;  /* cian neón */
  bottom: -10%;
  right: -10%;
  opacity: 0.18;              /* el cian rinde más fuerte → un pelín más baja */
  animation: floatAura2 34s infinite ease-in-out;
  animation-delay: -6s;       /* desfasada para que no floten sincronizadas */
}
/* Recorridos multipunto: las auras "navegan" la pantalla en loop continuo
   (sin alternate) para una flotación orgánica, lenta y poco intrusiva. */
@keyframes floatAura1 {
  0%   { transform: translate(0, 0)        scale(1);    }
  25%  { transform: translate(80px, 60px)  scale(1.08); }
  50%  { transform: translate(40px, 130px) scale(1.15); }
  75%  { transform: translate(-30px, 70px) scale(1.05); }
  100% { transform: translate(0, 0)        scale(1);    }
}
@keyframes floatAura2 {
  0%   { transform: translate(0, 0)          scale(1);    }
  25%  { transform: translate(-70px, -50px)  scale(1.1);  }
  50%  { transform: translate(-110px, 30px)  scale(1.18); }
  75%  { transform: translate(-40px, -80px)  scale(1.06); }
  100% { transform: translate(0, 0)          scale(1);    }
}
/* Accesibilidad: si el usuario pide menos movimiento, freezamos las auras */
@media (prefers-reduced-motion: reduce) {
  .aura { animation: none; }
}

/* ════════ TOUR DEL SISTEMA ════════ */
.tour { padding: var(--sp-12) 0; position: relative; }
.tour__head { margin-bottom: var(--sp-10); }
.tour .section-head__title,
.tour h3 { font-family: var(--ff-display); letter-spacing: -0.02em; }

/* App window — el "marco de navegador" reutilizable */
.app-frame {
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(15,60,201,0.14);
  box-shadow: 0 34px 80px -30px rgba(6,20,61,0.5), 0 2px 0 rgba(255,255,255,0.7) inset;
  transition: transform var(--t-base), box-shadow var(--t-base);
  will-change: transform;
}
.app-frame__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px;
  background: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(10,14,31,0.07);
}
.app-frame__dots { display: flex; gap: 7px; flex: none; }
.app-frame__dots span { width: 11px; height: 11px; border-radius: 50%; display: block; }
.app-frame__dots span:nth-child(1) { background: #ff5f57; }
.app-frame__dots span:nth-child(2) { background: #febc2e; }
.app-frame__dots span:nth-child(3) { background: #28c840; }
.app-frame__url {
  margin: 0 auto; font-family: var(--ff-mono); font-size: 11.5px;
  color: var(--text-mute); background: rgba(10,14,31,0.045);
  padding: 6px 16px; border-radius: 8px;
}
.app-frame__body { padding: 24px 26px 30px; }

/* Hero: frame + copy alternados */
.tour-hero {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
  align-items: center; margin-top: var(--sp-10);
}
.tour-hero__copy { max-width: 40ch; }
.tour-hero__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fz-sm); font-weight: 700; color: var(--azul-carlos);
  background: var(--azul-carlos-soft); border-radius: var(--radius-full);
  padding: 5px 13px; margin-bottom: var(--sp-3);
}
.tour-hero__title { font-family: var(--ff-display); font-size: var(--fz-2xl); line-height: 1.1; margin: 0 0 var(--sp-3); letter-spacing: -0.02em; }
.tour-hero__text { color: var(--text-soft); margin: 0; }
/* Gancho a PlayAgro: usa la identidad verde/agro de playagro.com.ar
   (verde bosque #2d473e, salvia #a1bd76, verdes claros #cbe0ab/#e7f0d8).
   Colores fijos —no dependen del toggle de tema— para que la tarjeta de
   marca se lea igual en claro y en oscuro. */
.tour-hero__hook {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid #cbe0ab;
  border-left: 3px solid #a1bd76;
  border-radius: var(--radius);
  background: #f2f7ea;
}
.tour-hero__hook-text { color: #3f5049; font-size: var(--fz-sm); margin: 0 0 var(--sp-3); }
.tour-hero__hook-text strong { color: #2d473e; font-weight: 700; }
.tour-hero__hook-btn.btn--primary {
  background: #2d473e;
  border-color: #2d473e;
  color: #fff;
}
.tour-hero__hook-btn.btn--primary:hover {
  background: #223a32;
  border-color: #223a32;
  color: #fff;
  box-shadow: 0 14px 32px rgba(45, 71, 62, 0.32);
}
.tour-hero__hook-btn svg { width: 18px; height: 18px; }

@media (min-width: 900px) {
  .tour-hero { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-8); }
  .tour-hero--reverse .tour-hero__copy { order: 2; }
  .tour-hero--reverse .tour-hero__frame { order: 1; }
}

/* Entrada del frame (reveal propio del tour) */
.tour-hero__frame { opacity: 0; transform: translateY(38px) scale(0.97); transition: opacity var(--t-slow), transform var(--t-slow); }
.tour-hero__frame.play { opacity: 1; transform: none; }

/* Dark theme: las "ventanas" del tour representan la app real, que SIEMPRE es clara.
   Todo el contenido interno usa las variables --text* y fondos claros, así que en modo
   oscuro re-fijamos la paleta CLARA dentro del frame (si no, el texto hereda el color
   claro del tema y desaparece) y volvemos el fondo OPACO (si no, el translúcido se ve
   gris sucio sobre el fondo oscuro). */
[data-theme="dark"] .app-frame {
  --text:      #0A0E1F;
  --text-soft: #3F465A;
  --text-mute: #8A8C8F;
  --bg-hielo:  #F4F1EA;
  color: var(--text);   /* base heredada: fuerza a oscuro el texto sin color propio (KPIs, emisor, títulos) */
  background: #f4f6fb;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 34px 80px -30px rgba(0,0,0,0.6);
}
[data-theme="dark"] .app-frame__bar {
  background: #e9edf5;
  border-bottom-color: rgba(10,14,31,0.08);
}

@media (prefers-reduced-motion: reduce) {
  .tour-hero__frame { opacity: 1; transform: none; transition: none; }
}

/* Hero 1 — Importador con IA (tabla) */
.tour-imp__head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.tour-imp__cost { font-size:11.5px; color:var(--text-mute); font-weight:600; margin-bottom:4px; }
.tour-imp__title { font-family:var(--ff-display); font-weight:700; font-size:21px; letter-spacing:-.5px; }
.tour-imp__actions { display:flex; gap:8px; flex-wrap:wrap; }
.tour-imp__btn { font-size:12.5px; font-weight:700; color:var(--text); background:rgba(10,14,31,0.06); padding:9px 14px; border-radius:9px; }
.tour-imp__btn--primary { color:#fff; background:linear-gradient(135deg, var(--azul-carlos), var(--cian-neon)); box-shadow:0 8px 18px -8px rgba(15,60,201,0.7); }
.tour-imp__meta { font-size:12px; color:var(--text-mute); margin-bottom:16px; }
.tour-imp__meta b { font-family:var(--ff-mono); color:var(--text-soft); }
.tour-imp__filters { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.tour-imp__search { flex:1; min-width:200px; display:flex; align-items:center; gap:9px; background:#fff; border:1px solid rgba(10,14,31,0.1); border-radius:10px; padding:10px 14px; font-size:13px; color:var(--text-mute); }
.tour-imp__search svg { width:16px; height:16px; flex:none; }
.tour-imp__filter { font-size:12.5px; color:var(--text-soft); background:#fff; border:1px solid rgba(10,14,31,0.1); border-radius:10px; padding:10px 14px; }
.tour-imp__counts { display:flex; gap:7px; font-size:11.5px; font-family:var(--ff-mono); color:var(--text-mute); align-items:center; flex-wrap:wrap; }
.tour-imp__counts b { color:var(--text); }
.tour-imp__counts .sep { color:#cdd6e8; }
.tour-imp__counts .c-ok b { color:var(--azul-carlos); }
.tour-imp__counts .c-warn b { color:#B45309; }
.tour-imp__counts .c-done b { color:var(--success); }
.tour-imp__table { background:rgba(255,255,255,0.78); border:1px solid rgba(10,14,31,0.08); border-radius:14px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; box-shadow:0 14px 30px -22px rgba(6,20,61,0.4); }
.tour-imp__row { display:grid; grid-template-columns:1.7fr 1.5fr 1.1fr 1fr 1fr .8fr 1.1fr .9fr; gap:10px; padding:12px 16px; font-size:12px; align-items:center; min-width:540px; }
.tour-imp__row + .tour-imp__row { border-top:1px solid rgba(10,14,31,0.05); }
.tour-imp__row--head { background:var(--azul-carlos-soft); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-mute); font-weight:700; }
.tour-imp__row .f { color:var(--azul-carlos); font-weight:600; }
.tour-imp__row .b { font-weight:600; }
.tour-imp__row .m { font-family:var(--ff-mono); color:var(--text-mute); }
.tour-imp__row .num { font-family:var(--ff-mono); text-align:right; font-weight:600; }
.tour-imp__row .ta-r { text-align:right; }
.tour-imp__badge { font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:6px; }
.tour-imp__badge.is-ok { color:var(--azul-carlos); background:var(--azul-carlos-soft); }
.tour-imp__badge.is-warn { color:#B45309; background:rgba(245,158,11,0.14); }
.tour-imp__badge.is-done { color:var(--success); background:rgba(22,163,74,0.13); }
.tour-imp__callout { display:flex; align-items:center; gap:9px; margin-top:14px; font-size:12.5px; color:var(--text-soft); background:linear-gradient(135deg, rgba(15,60,201,0.08), rgba(6,212,251,0.10)); border:1px solid rgba(15,60,201,0.16); border-radius:11px; padding:11px 14px; }
.tour-imp__ia { display:flex; align-items:center; gap:6px; font-weight:700; color:var(--azul-carlos); flex:none; }
.tour-imp__ia-dot { width:7px; height:7px; border-radius:50%; background:var(--azul-carlos); }
.tour-hero__frame.play .tour-imp__ia-dot { animation: tourGlow 1.4s infinite; }
@keyframes tourGlow { 0%,100%{opacity:.5} 50%{opacity:1} }

/* Hero 2/4 — chat de agente */
.tour-chat__header { display:flex; align-items:center; gap:13px; padding:16px 20px; border-bottom:1px solid rgba(10,14,31,0.06); background:linear-gradient(180deg, var(--azul-carlos-soft), transparent); }
.tour-chat__avatar { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:none; background:linear-gradient(135deg, var(--azul-carlos), var(--cian-neon)); box-shadow:0 10px 22px -8px rgba(15,60,201,0.7); }
.tour-chat__avatar svg { width:20px; height:20px; margin-left:2px; }
.tour-chat__name { font-family:var(--ff-display); font-weight:700; font-size:16px; }
.tour-chat__status { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--success); font-weight:600; }
.tour-chat__dot { width:8px; height:8px; border-radius:50%; background:var(--success); flex:none; }
.tour-hero__frame.play .tour-chat__dot { animation: tourPing 1.8s ease-out infinite; }
.tour-chat__body { padding:24px 22px; background:linear-gradient(180deg,#f7faff,#fbfdff); }
.tour-chat__bubble { max-width:92%; background:#fff; border:1px solid rgba(10,14,31,0.08); border-radius:18px 18px 18px 5px; padding:20px 22px; box-shadow:0 14px 34px -22px rgba(6,20,61,0.5); }
.tour-chat__bubble-title { font-family:var(--ff-display); font-weight:700; font-size:16px; margin-bottom:14px; }
.tour-chat__group { display:flex; align-items:center; gap:10px; margin:14px 0 10px; font-weight:700; font-size:14px; }
.tour-chat__group:first-of-type { margin-top:0; }
.tour-chat__num { width:22px; height:22px; border-radius:7px; color:#fff; font-family:var(--ff-mono); font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center; flex:none; background:linear-gradient(135deg, var(--azul-carlos), var(--cian-neon)); }
.tour-chat__num.is-green { background:linear-gradient(135deg, var(--success), var(--turquesa)); }
.tour-chat__chips { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 14px 32px; }
.tour-chat__chip { font-size:12.5px; color:var(--text-soft); background:var(--azul-carlos-soft); border:1px solid rgba(15,60,201,0.13); padding:5px 11px; border-radius:var(--radius-full); opacity:0; transform:translateY(6px); }
.tour-chat__chip.is-warn { color:#7c5306; background:rgba(245,158,11,0.09); border-color:rgba(245,158,11,0.18); }
.tour-hero__frame.play .tour-chat__chip { animation: tourChipIn .5s ease forwards; }
.tour-hero__frame.play .tour-chat__chip:nth-child(1){ animation-delay:.05s; }
.tour-hero__frame.play .tour-chat__chip:nth-child(2){ animation-delay:.12s; }
.tour-hero__frame.play .tour-chat__chip:nth-child(3){ animation-delay:.19s; }
.tour-hero__frame.play .tour-chat__chip:nth-child(4){ animation-delay:.26s; }
.tour-hero__frame.play .tour-chat__chip:nth-child(5){ animation-delay:.33s; }
.tour-chat__foot { padding:14px 20px 18px; border-top:1px solid rgba(10,14,31,0.06); }
.tour-chat__quick { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:13px; }
.tour-chat__qr { font-size:12.5px; font-weight:600; color:var(--azul-carlos); background:var(--azul-carlos-soft); border:1px solid rgba(15,60,201,0.16); padding:7px 13px; border-radius:var(--radius-full); }
.tour-chat__inputbar { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid rgba(10,14,31,0.1); border-radius:var(--radius-full); padding:7px 7px 7px 18px; box-shadow:0 8px 20px -14px rgba(6,20,61,0.4); }
.tour-chat__placeholder { flex:1; font-size:14px; color:var(--text-mute); }
.tour-chat__send { border:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; background:linear-gradient(135deg, var(--azul-carlos), var(--cian-neon)); box-shadow:0 8px 18px -8px rgba(15,60,201,0.8); }
.tour-chat__send svg { width:16px; height:16px; }
@keyframes tourPing { 0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)} 100%{box-shadow:0 0 0 8px rgba(22,163,74,0)} }
@keyframes tourChipIn { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .tour-chat__chip{ opacity:1; transform:none; } .tour-hero__frame.play .tour-chat__chip, .tour-hero__frame.play .tour-chat__dot{ animation:none; } }

/* Hero 3 — Dashboard */
.tour-dash__kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.tour-dash__kpi { background:rgba(255,255,255,0.78); border:1px solid rgba(10,14,31,0.07); border-radius:16px; padding:16px 18px; box-shadow:0 10px 24px -18px rgba(6,20,61,0.4); }
.tour-dash__kpi-label { font-size:12.5px; color:var(--text-mute); font-weight:600; }
.tour-dash__val { font-family:var(--ff-mono); font-weight:700; font-size:27px; letter-spacing:-1px; display:block; margin:6px 0 8px; }
.tour-dash__chip { font-size:12px; font-weight:700; padding:3px 9px; border-radius:7px; white-space:nowrap; }
.tour-dash__chip.up { color:var(--success); background:rgba(22,163,74,0.12); }
.tour-dash__chip.warn { color:#B45309; background:rgba(245,158,11,0.14); }
.tour-dash__charts { display:grid; grid-template-columns:1.7fr 1fr; gap:14px; }
.tour-dash__panel { background:rgba(255,255,255,0.78); border:1px solid rgba(10,14,31,0.07); border-radius:18px; padding:18px 20px; box-shadow:0 14px 30px -22px rgba(6,20,61,0.4); }
.tour-dash__panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:10px; flex-wrap:wrap; }
.tour-dash__panel-title { font-weight:700; font-size:15px; }
.tour-dash__legend { display:flex; gap:14px; font-size:11.5px; color:var(--text-mute); }
.tour-dash__legend span { display:flex; align-items:center; gap:6px; }
.tour-dash__legend i { width:14px; height:3px; border-radius:2px; display:inline-block; }
.tour-dash .dot-blue { background:var(--azul-carlos); }
.tour-dash .dot-gray { background:#aab8d6; }
.tour-dash .dot-cyan { background:var(--cian-neon); }
.tour-dash .dot-green { background:var(--turquesa); }
.tour-dash__svg { width:100%; height:auto; display:block; overflow:visible; margin:4px 0; }
.tour-dash__xaxis { display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:10.5px; color:var(--text-mute); padding:0 6px; }
.tour-dash__channel { display:flex; align-items:center; gap:18px; }
.tour-dash__donut { position:relative; width:122px; height:122px; border-radius:50%; flex:none; background:conic-gradient(var(--azul-carlos) 0 46%, var(--cian-neon) 46% 74%, var(--turquesa) 74% 100%); }
.tour-dash__donut-c { position:absolute; inset:20px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tour-dash__donut-c b { font-family:var(--ff-mono); font-weight:700; font-size:15px; }
.tour-dash__donut-c small { font-size:10px; color:var(--text-mute); }
.tour-dash__legend2 { display:flex; flex-direction:column; gap:11px; font-size:12.5px; }
.tour-dash__legend2 div { display:flex; align-items:center; gap:8px; color:var(--text-soft); }
.tour-dash__legend2 i { width:9px; height:9px; border-radius:3px; display:inline-block; flex:none; }
.tour-dash__legend2 b { margin-left:auto; font-family:var(--ff-mono); color:var(--text); }
@media (max-width:560px){ .tour-dash__kpis{ grid-template-columns:repeat(2,1fr); } .tour-dash__charts{ grid-template-columns:1fr; } }

/* Hero 4 — Agente de Soporte (conversación) */
.tour-chat--support .tour-chat__header { background:linear-gradient(180deg, rgba(22,163,74,0.06), transparent); }
.tour-chat--support .tour-chat__avatar { background:linear-gradient(135deg, var(--success), var(--turquesa)); box-shadow:0 10px 22px -8px rgba(22,163,74,0.6); }
.tour-chat--support .tour-chat__body { display:flex; flex-direction:column; gap:16px; background:linear-gradient(180deg,#f7fbf9,#fbfdff); }
.tour-chat__msg { font-size:14.5px; line-height:1.45; padding:13px 17px; max-width:86%; }
.tour-chat__msg--user { align-self:flex-end; margin-left:auto; color:#fff; border-radius:18px 18px 5px 18px; background:linear-gradient(135deg, var(--azul-carlos), #3f8bff); box-shadow:0 10px 22px -12px rgba(15,60,201,0.7); }
.tour-chat__msg--bot { align-self:flex-start; background:#fff; border:1px solid rgba(10,14,31,0.08); border-radius:18px 18px 18px 5px; box-shadow:0 14px 34px -22px rgba(6,20,61,0.5); padding:18px 20px; }
.tour-chat__msg-lead { margin-bottom:14px; }
.tour-chat__steps { display:flex; flex-direction:column; gap:12px; }
.tour-chat__step { display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--text-soft); line-height:1.45; }
.tour-chat__step b { color:var(--text); }
.tour-chat__step-n { flex:none; width:24px; height:24px; border-radius:8px; color:#fff; font-family:var(--ff-mono); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--azul-carlos), var(--cian-neon)); }
.tour-chat__step-n.is-done { background:linear-gradient(135deg, var(--success), var(--turquesa)); }
.tour-chat__tip { margin-top:15px; display:flex; gap:8px; background:var(--azul-carlos-soft); border:1px solid rgba(15,60,201,0.16); border-radius:11px; padding:10px 12px; font-size:12.5px; color:var(--text-soft); line-height:1.45; }
.tour-chat__tip b { color:var(--azul-carlos); flex:none; }
.tour-chat__quick--green .tour-chat__qr { color:var(--success); background:rgba(22,163,74,0.1); border-color:rgba(22,163,74,0.2); }
.tour-chat__send--green { background:linear-gradient(135deg, var(--success), var(--turquesa)); box-shadow:0 8px 18px -8px rgba(22,163,74,0.7); }

/* Switcher de módulos */
.tour-switcher { margin-top: var(--sp-10); }
.tour-switcher__pills { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom: var(--sp-5); }
.tour-pill { font:inherit; font-weight:700; font-size:var(--fz-sm); color:var(--text-soft); background:var(--bg-pure); border:1px solid var(--border); padding:9px 18px; border-radius:var(--radius-full); cursor:pointer; transition:all var(--t-fast); }
.tour-pill:hover { border-color:var(--azul-carlos); color:var(--azul-carlos); }
.tour-pill.is-active { color:#fff; background:linear-gradient(135deg, var(--azul-carlos), var(--cian-neon)); border-color:transparent; box-shadow:0 8px 18px -8px rgba(15,60,201,0.6); }
.tour-panel { display:none; }
.tour-panel.is-active { display:block; animation: tourPanelIn .4s ease; }
.tour-panel__head { display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.tour-panel__icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; background:linear-gradient(135deg, var(--azul-carlos), var(--cian-neon)); box-shadow:0 8px 18px -8px rgba(15,60,201,0.6); }
.tour-panel__icon svg { width:20px; height:20px; }
.tour-panel__name { font-family:var(--ff-display); font-weight:700; font-size:19px; }
.tour-panel__sub { font-size:13px; color:var(--text-mute); }
.tour-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tour-card { display:flex; flex-direction:column; gap:11px; padding:18px 16px; border-radius:16px; background:rgba(255,255,255,0.7); border:1px solid rgba(10,14,31,0.07); box-shadow:0 10px 24px -18px rgba(6,20,61,0.4); transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.tour-card:hover { transform:translateY(-4px); box-shadow:0 18px 36px -16px rgba(15,60,201,0.45); border-color:rgba(15,60,201,0.3); }
.tour-card__icon { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; background:linear-gradient(135deg, var(--azul-carlos), var(--cian-neon)); box-shadow:0 8px 18px -8px rgba(15,60,201,0.55); }
.tour-card__icon svg { width:22px; height:22px; }
.tour-card__title { font-weight:700; font-size:14.5px; margin:0; }
.tour-card__desc { font-size:12px; color:var(--text-mute); margin:0; }
.tour-card__beta { font-size:9.5px; font-weight:700; color:var(--success); background:rgba(22,163,74,0.14); padding:2px 6px; border-radius:5px; margin-left:6px; vertical-align:middle; }
.tour-card--add { align-items:center; justify-content:center; text-align:center; background:rgba(15,60,201,0.04); border:1.5px dashed rgba(15,60,201,0.28); box-shadow:none; }
.tour-card--add .tour-card__icon { width:42px; height:42px; background:rgba(15,60,201,0.1); color:var(--azul-carlos); box-shadow:none; }
.tour-card--add .tour-card__title { color:var(--azul-carlos); }
.tour-card--add:hover { background:rgba(15,60,201,0.08); border-color:rgba(15,60,201,0.45); transform:none; box-shadow:none; }
@keyframes tourPanelIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
@media (max-width:680px){ .tour-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
@media (max-width:340px){ .tour-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .tour-panel.is-active{ animation:none; } }

/* Cierre — soluciones a medida */
.tour-cta { position:relative; margin-top: var(--sp-10); border-radius:26px; overflow:hidden; padding:48px 40px 44px;
  background: radial-gradient(120% 120% at 88% -10%, rgba(6,212,251,0.12), transparent 55%), linear-gradient(150deg, #E9F0FF, var(--bg-hielo));
  border:1px solid var(--border); box-shadow: var(--shadow-lg); }
.tour-cta__glow { position:absolute; top:-60px; right:-40px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(15,60,201,0.16), transparent 70%); filter:blur(20px); animation: tourFloaty 6s ease-in-out infinite; pointer-events:none; }
.tour-cta__inner { position:relative; max-width:680px; }
.tour-cta__kicker { display:inline-flex; align-items:center; gap:8px; font-size:var(--fz-sm); font-weight:600; color:var(--azul-carlos); background:var(--azul-carlos-soft); border:1px solid rgba(15,60,201,0.2); padding:7px 14px; border-radius:var(--radius-full); margin-bottom:var(--sp-5); }
.tour-cta__kicker-dot { width:7px; height:7px; border-radius:50%; background:var(--cian-neon); animation: tourGlow 1.4s infinite; }
.tour-cta__title { font-family:var(--ff-display); font-weight:800; font-size:var(--fz-3xl); line-height:1.08; color:var(--text); margin:0 0 var(--sp-4); letter-spacing:-0.02em; }
.tour-cta__title em { font-style:normal; background:linear-gradient(110deg, var(--azul-carlos), var(--cian-neon)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tour-cta__text { font-size:var(--fz-lg); line-height:1.55; color:var(--text-soft); margin:0 0 var(--sp-6); }
.tour-cta__chips { display:flex; flex-wrap:wrap; gap:11px; margin-bottom:var(--sp-6); }
.tour-cta__chip { font-size:14px; font-weight:600; color:var(--text-soft); background:var(--bg-pure); border:1px solid var(--border); padding:11px 17px; border-radius:13px; }
.tour-cta__chip--accent { color:#fff; background:linear-gradient(135deg, var(--azul-carlos), var(--cian-neon)); border-color:transparent; box-shadow:0 10px 24px -10px rgba(15,60,201,0.5); }
.tour-cta__actions { display:flex; }
/* Tema oscuro → versión navy dramática (acá sí pega) */
[data-theme="dark"] .tour-cta {
  background: radial-gradient(120% 120% at 85% 0%, var(--azul-carlos-dark), transparent 60%), linear-gradient(150deg, var(--azul-carlos-deep), #071536);
  border-color: rgba(6,212,251,0.22); box-shadow: 0 40px 90px -30px rgba(6,20,61,0.8);
}
[data-theme="dark"] .tour-cta__glow { background: radial-gradient(circle, rgba(6,212,251,0.35), transparent 70%); }
[data-theme="dark"] .tour-cta__kicker { color:#9fd4ff; background:rgba(6,212,251,0.12); border-color:rgba(6,212,251,0.3); }
[data-theme="dark"] .tour-cta__kicker-dot { background:var(--cian-neon); }
[data-theme="dark"] .tour-cta__title { color:#fff; }
[data-theme="dark"] .tour-cta__title em { background:linear-gradient(110deg, var(--cian-neon), #9fd4ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-theme="dark"] .tour-cta__text { color:#b6c6e6; }
[data-theme="dark"] .tour-cta__chip { color:#dce7fb; background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12); }
[data-theme="dark"] .tour-cta__chip--accent { color:#071536; background:linear-gradient(135deg, var(--cian-neon), #9fd4ff); }
@keyframes tourFloaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@media (prefers-reduced-motion: reduce){ .tour-cta__glow, .tour-cta__kicker-dot{ animation:none; } }
@media (max-width:560px){ .tour-cta{ padding:34px 24px 30px; } }