/* =============================================================
   Synapse Reactive — Hoja de estilos maestra
   Derivada del Design System v1.0. Todos los valores provienen
   de los tokens oficiales. No usar valores sueltos "a ojo".
   ============================================================= */

/* ---------- 1. Tokens (Design System v1.0) ---------- */
:root {
  /* Primarios */
  --sr-blue: #0066FF;      /* Azul Eléctrico */
  --sr-navy: #001F3F;      /* Azul Profundo  */
  --sr-cyan: #00E5FF;      /* Cian Reactivo  */

  /* Funcionales */
  --sr-carbon: #1A1A1A;
  --sr-slate:  #4A4A4A;
  --sr-mist:   #F5F7FA;
  --sr-white:  #FFFFFF;
  --sr-success:#00D9A3;
  --sr-warning:#FFB800;
  --sr-error:  #FF3B5C;
  --sr-border: #DFE4EA;

  /* Escala Azul Eléctrico */
  --sr-blue-50:#E6F0FF; --sr-blue-100:#B3D1FF; --sr-blue-300:#66A3FF;
  --sr-blue-500:#0066FF; --sr-blue-600:#0052CC; --sr-blue-700:#003D99; --sr-blue-800:#002966;

  /* Escala Cian */
  --sr-cyan-50:#E6FCFF; --sr-cyan-100:#B3F5FF; --sr-cyan-300:#66ECFF;
  --sr-cyan-500:#00E5FF; --sr-cyan-600:#00B8CC; --sr-cyan-700:#008C99; --sr-cyan-800:#005F66;

  /* Escala Azul Profundo */
  --sr-navy-50:#E5E9EE; --sr-navy-100:#B3BDC9; --sr-navy-300:#6680A3;
  --sr-navy-500:#001F3F; --sr-navy-600:#001833; --sr-navy-700:#001226; --sr-navy-800:#000C1A;

  /* Tipografía */
  --sr-font-head: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sr-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --sr-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Espaciado (base 8px) */
  --sr-space-1:4px; --sr-space-2:8px; --sr-space-3:12px; --sr-space-4:16px;
  --sr-space-6:24px; --sr-space-8:32px; --sr-space-12:48px; --sr-space-16:64px;
  --sr-space-24:96px; --sr-space-32:128px;

  /* Radios */
  --sr-radius-sm:4px; --sr-radius-md:8px; --sr-radius-lg:16px; --sr-radius-pill:999px;

  /* Sombras (azuladas, sutiles) */
  --sr-shadow-sm:0 1px 2px rgba(0,31,63,.06);
  --sr-shadow-md:0 4px 12px rgba(0,31,63,.10);
  --sr-shadow-lg:0 16px 40px rgba(0,31,63,.14);

  /* Layout */
  --sr-maxw: 1200px;
  --sr-readw: 680px;
  --sr-gutter: 24px;
  --sr-header-h: 72px;

  --sr-ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--sr-header-h) + 16px);
}

body {
  font-family: var(--sr-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--sr-carbon);
  background: var(--sr-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* Protección de imágenes: no arrastrar, sin menú de "guardar imagen" en iOS,
   no seleccionable. Complementa el bloqueo de clic derecho en js/main.js.
   Nota: es un disuasivo, no una barrera criptográfica. */
img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
a { color: var(--sr-blue); text-decoration: none; transition: color .2s var(--sr-ease); }
a:hover { color: var(--sr-blue-600); }
ul, ol { padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--sr-blue-300);
  outline-offset: 2px;
  border-radius: var(--sr-radius-sm);
}

/* ---------- 3. Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--sr-font-head);
  color: var(--sr-navy);
  line-height: 1.12;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 5.5vw, 3.5rem); letter-spacing: -1px; line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); letter-spacing: -0.5px; }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -0.3px; font-weight: 500; }
h4 { font-size: 1.25rem; letter-spacing: -0.1px; font-weight: 500; }

p { color: var(--sr-slate); }
p.lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--sr-slate); line-height: 1.6; }
strong { color: var(--sr-carbon); font-weight: 600; }

.eyebrow {
  font-family: var(--sr-font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sr-blue);
  display: inline-flex;
  align-items: center;
  gap: var(--sr-space-2);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--sr-cyan);
  display: inline-block;
}

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: var(--sr-maxw); margin-inline: auto; padding-inline: var(--sr-gutter); }
/* Menos espacio muerto: el padding vertical de las secciones se redujo
   a bastante menos de lo que daba el clamp original (64-128px) — el
   contenido debe llenar la pantalla, no el aire alrededor de él. */
.section { padding-block: clamp(40px, 5vw, 76px); }
.section--tight { padding-block: clamp(28px, 3.5vw, 52px); }
.section-head { max-width: 720px; margin-bottom: var(--sr-space-8); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: var(--sr-space-4); }
.section-head h2 { margin-bottom: var(--sr-space-4); }

.grid { display: grid; gap: var(--sr-space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Secciones oscuras (Azul Profundo) */
.section--dark { background: var(--sr-navy); color: var(--sr-mist); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--sr-white); }
.section--dark p { color: rgba(245,247,250,.78); }
.section--dark .eyebrow { color: var(--sr-cyan); }
.section--dark a { color: var(--sr-cyan); }

.section--mist { background: var(--sr-mist); }

/* ---------- 5. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sr-space-2);
  font-family: var(--sr-font-body); font-weight: 500; font-size: 1rem; line-height: 1;
  padding: 14px 26px; border-radius: var(--sr-radius-md);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .2s var(--sr-ease), border-color .2s var(--sr-ease), transform .15s var(--sr-ease), box-shadow .2s var(--sr-ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.97); }
.btn:hover:not(.cta-stellar):not(.btn--ghost) { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; }

.btn--primary { background: var(--sr-blue); color: #fff; }
.btn--primary:hover { background: var(--sr-blue-600); color: #fff; box-shadow: var(--sr-shadow-md); }
.btn--primary:active { background: var(--sr-blue-700); }

.btn--secondary { background: transparent; color: var(--sr-blue); border-color: var(--sr-blue); }
.btn--secondary:hover { background: var(--sr-blue-50); color: var(--sr-blue); }

.btn--ghost { background: transparent; color: var(--sr-blue); padding-inline: 8px; }
.btn--ghost:hover { color: var(--sr-blue-600); }
.btn--ghost .arrow { transition: transform .2s var(--sr-ease); }
.btn--ghost:hover .arrow { transform: translateX(4px); }

/* Botones sobre fondo oscuro */
.on-dark .btn--secondary { color: #fff; border-color: rgba(255,255,255,.35); }
.on-dark .btn--secondary:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sr-space-3); }
.btn-row.center { justify-content: center; }

/* ---------- 5.b CTA estelar (solo home) ----------
   El botón de agendar ya no vive en el menú: aquí, en el cierre del
   home, se vuelve EL momento estelar de la página — degradado en
   movimiento y un glow que respira, no un botón más de la fila. */
.cta-stellar {
  padding: 17px 34px; border-radius: var(--sr-radius-pill); color: #fff;
  background: linear-gradient(120deg, var(--sr-blue) 0%, var(--sr-cyan) 35%, var(--sr-blue-600) 70%, var(--sr-cyan) 100%);
  background-size: 300% 300%;
  animation: stellarShift 7s ease infinite, stellarPulse 2.8s ease-in-out infinite;
}
.cta-stellar:hover { color: #fff; transform: translateY(-3px); }
.cta-stellar:active { transform: translateY(0); }
@keyframes stellarShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes stellarPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,229,255,.4), 0 8px 26px rgba(0,102,255,.35); }
  50% { box-shadow: 0 0 0 1px rgba(0,229,255,.75), 0 12px 42px rgba(0,229,255,.55); }
}

/* ---------- 6. Tags / Badges ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sr-font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .5px; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--sr-radius-pill);
  background: var(--sr-mist); color: var(--sr-slate); border: 1px solid var(--sr-border);
}
.tag--accent { background: var(--sr-cyan-50); color: var(--sr-cyan-800); border-color: transparent; }
.tag--blue   { background: var(--sr-blue-50); color: var(--sr-blue-700); border-color: transparent; }

/* ---------- 7. Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg);
  padding: var(--sr-space-8); box-shadow: var(--sr-shadow-sm);
  transition: box-shadow .25s var(--sr-ease), transform .25s var(--sr-ease), border-color .25s var(--sr-ease);
  height: 100%;
}
.card--link:hover { box-shadow: var(--sr-shadow-md); transform: translateY(-3px); border-color: var(--sr-blue-100); }
.card h3, .card h4 { margin-bottom: var(--sr-space-3); }
.card p { font-size: .975rem; }

.card__icon {
  width: 52px; height: 52px; border-radius: var(--sr-radius-md);
  display: grid; place-items: center; margin-bottom: var(--sr-space-6);
  background: var(--sr-blue-50); color: var(--sr-blue);
}
.card__icon svg { width: 26px; height: 26px; }

.section--dark .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow: none; }
.section--dark .card__icon { background: rgba(0,229,255,.12); color: var(--sr-cyan); }

/* ---------- 7.b Tarjetas vivas — opt-in, no afecta a .card por defecto ----------
   Clase adicional (no reemplaza .card/.card--link) para dar más vida/glow
   al pasar el mouse. Se usa página por página, empezando por Nosotros. */
.card--vivid .card__icon svg { transition: transform .3s var(--sr-ease); }
.card--vivid:hover .card__icon svg { transform: scale(1.15) rotate(-4deg); }
.card--vivid:hover { transform: translateY(-4px); }
.section--dark .card--vivid:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(0,229,255,.3), 0 0 26px rgba(0,229,255,.2);
  border-color: rgba(0,229,255,.35);
}

/* ---------- 7.c Reveal escalonado — opt-in vía .reveal-stagger en el contenedor ---------- */
.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: .09s; }
.reveal-stagger > *:nth-child(3) { transition-delay: .18s; }
.reveal-stagger > *:nth-child(4) { transition-delay: .27s; }
.reveal-stagger > *:nth-child(5) { transition-delay: .36s; }

/* ---------- 7.d Glow de fondo animado — opt-in vía .section-glow ----------
   Sutil, para que secciones claras no se sientan planas/estáticas
   (sin competir con la lectura del texto). */
.section-glow { position: relative; isolation: isolate; overflow: hidden; }
.section-glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 380px at 12% 15%, rgba(0,102,255,.07), transparent 60%),
    radial-gradient(480px 340px at 90% 85%, rgba(0,229,255,.08), transparent 60%);
  animation: sectionGlowDrift 16s ease-in-out infinite;
}
@keyframes sectionGlowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(2%, -2%) scale(1.06); }
}

/* Marca de agua decorativa (cita/número gigante y tenue detrás del texto) */
.section-quote { position: relative; }
.section-quote::before {
  content: "\201C"; position: absolute; top: -.35em; left: 50%; transform: translateX(-50%);
  font-family: var(--sr-font-head); font-size: 13rem; line-height: 1; color: var(--sr-navy);
  opacity: .05; pointer-events: none; z-index: 0;
}
.section-quote > * { position: relative; z-index: 1; }

/* Lista con check */
.checklist li {
  position: relative; padding-left: 30px; margin-bottom: var(--sr-space-3);
  color: var(--sr-slate); font-size: .975rem;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: var(--sr-radius-pill);
  background: var(--sr-success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
}
.section--dark .checklist li { color: rgba(245,247,250,.82); }

/* Reveal escalonado: delays extra para grillas de hasta 8 elementos
   (el bento de principios). Los primeros 5 ya están definidos arriba. */
.reveal-stagger > *:nth-child(6) { transition-delay: .45s; }
.reveal-stagger > *:nth-child(7) { transition-delay: .54s; }
.reveal-stagger > *:nth-child(8) { transition-delay: .63s; }

/* ---------- 7.e Deck horizontal — carrusel de principios (opt-in) ----------
   Claro y minimalista: sin números, sin íconos, título grande. Se
   navega deslizando (1 tarjeta en móvil, 3 en escritorio) — la
   tarjeta centrada es "la destacada" y lleva un glow animado con los
   colores de marca (azul/cian/navy), como una única historia con
   contexto de la anterior/siguiente alrededor. Auto-avanza sola si
   nadie interactúa, y se detiene apenas el usuario toca algo. */
.deck-section { position: relative; background: var(--sr-mist); }
.deck-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sr-space-6); flex-wrap: wrap; margin-bottom: var(--sr-space-8); }
.deck-head .eyebrow { color: var(--sr-blue); margin-bottom: var(--sr-space-2); }
.deck-head h2 { color: var(--sr-navy); margin: 0; }
.deck-nav { display: flex; gap: var(--sr-space-2); flex: none; }
.deck-arrow {
  width: 44px; height: 44px; border-radius: 999px; flex: none;
  display: grid; place-items: center; background: #fff; border: 1px solid var(--sr-border);
  color: var(--sr-navy); cursor: pointer; transition: background .2s var(--sr-ease), border-color .2s var(--sr-ease), transform .15s var(--sr-ease);
}
.deck-arrow:hover { background: var(--sr-blue-50); border-color: var(--sr-blue-100); color: var(--sr-blue); }
.deck-arrow:active { transform: scale(.94); }
.deck-arrow svg { width: 20px; height: 20px; }

.deck-scroller {
  display: flex; gap: var(--sr-space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px; padding: 6px 2px var(--sr-space-4);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.deck-scroller::-webkit-scrollbar { display: none; }
/* Espaciador invisible al final (ancho fijado por JS, ver sizeDeckSpacer
   en main.js): sin él, cuando caben 3 tarjetas a la vez, las últimas 2
   nunca alcanzan a quedar "al frente" — no hay más contenido a la
   derecha para poder desplazarse hasta ahí. */
.deck-spacer { flex: 0 0 auto; scroll-snap-align: none; }

.deck-card {
  position: relative; flex: 0 0 100%; scroll-snap-align: start;
  opacity: .6; transform: scale(.96);
  transition: opacity .4s var(--sr-ease), transform .4s var(--sr-ease);
}
@media (min-width: 621px) { .deck-card { flex: 0 0 calc((100% - 2 * var(--sr-space-4)) / 3); } }
.deck-card.is-active, .deck-card:hover { opacity: 1; transform: scale(1); }

/* Glow: un <svg> con el MISMO contorno redondeado de la tarjeta (el
   tamaño real del rect lo fija JS, ver main.js sizeDeckGlow) y una
   línea corta (stroke-dasharray) que recorre ese contorno mediante
   stroke-dashoffset — a diferencia de un conic-gradient, esto avanza
   por LONGITUD DE ARCO real, así que las esquinas no se ven como un
   "cuadrado" más grueso, es una sola línea pareja todo el trayecto.
   Tres líneas superpuestas con distinto color/fase = un cometa con
   los 3 colores de marca (navy/azul/cian), no un tono ajeno. */
.deck-card__glow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .3s var(--sr-ease); }
.deck-card.is-active .deck-card__glow, .deck-card:hover .deck-card__glow { opacity: 1; }
.deck-card__glow rect { fill: none; stroke-linecap: round; stroke-width: 2.5; stroke-dasharray: 14 86; }
.deck-card__glow-a { stroke: var(--sr-navy); }
.deck-card__glow-b { stroke: var(--sr-blue); }
.deck-card__glow-c { stroke: var(--sr-cyan); filter: drop-shadow(0 0 4px var(--sr-cyan)); }
.deck-card.is-active .deck-card__glow rect, .deck-card:hover .deck-card__glow rect { animation: ledTravel 2.8s linear infinite; }
.deck-card.is-active .deck-card__glow-b, .deck-card:hover .deck-card__glow-b { animation-delay: -.18s; }
.deck-card.is-active .deck-card__glow-c, .deck-card:hover .deck-card__glow-c { animation-delay: -.36s; }
@keyframes ledTravel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }

.deck-card__body {
  position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; min-height: 240px;
  background: #fff; border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-lg); padding: var(--sr-space-8) var(--sr-space-6) var(--sr-space-6);
  box-shadow: var(--sr-shadow-sm); transition: box-shadow .4s var(--sr-ease);
}
.deck-card.is-active .deck-card__body, .deck-card:hover .deck-card__body { box-shadow: var(--sr-shadow-md); }
.deck-card__title { font-family: var(--sr-font-head); font-weight: 700; font-size: 1.4rem; letter-spacing: -.3px; line-height: 1.15; color: var(--sr-navy); margin-bottom: var(--sr-space-3); }
.deck-card p { color: var(--sr-slate); font-size: .95rem; margin: 0; flex: 1; }

.deck-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: var(--sr-space-6); }
.deck-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--sr-border); cursor: pointer; transition: all .3s var(--sr-ease); }
.deck-dot.is-active { width: 24px; background: var(--sr-blue); box-shadow: 0 0 8px rgba(0,102,255,.4); }
@media (max-width: 480px) { .deck-arrow { width: 38px; height: 38px; } .deck-arrow svg { width: 17px; height: 17px; } }

/* ---------- 8. Header / Navegación ----------
   El header flota SOBRE el hero (transparente, deja ver la red neuronal
   navy/cian de fondo — como la animación inicial) y se vuelve sólido en
   blanco apenas se hace scroll. Por eso es "fixed" (no ocupa espacio en
   el flujo) y el hero/page-hero compensan con padding-top propio. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--sr-header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--sr-ease), border-color .3s var(--sr-ease), box-shadow .3s var(--sr-ease);
}
.site-header.scrolled {
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--sr-border); box-shadow: var(--sr-shadow-sm);
}
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-6); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sr-font-head); font-weight: 600; color: var(--sr-navy); font-size: 1.15rem; letter-spacing: -0.3px; }
.brand:hover { color: var(--sr-navy); }
.brand span b { color: var(--sr-blue); font-weight: 600; }
.brand-logo { height: 30px; width: auto; display: block; }
@media (max-width: 480px){ .brand-logo { height: 26px; } }

/* Header: dos logos superpuestos (versión clara/oscura) que se funden
   entre sí según el header esté transparente (sobre el hero) o sólido. */
.brand-logo-wrap { position: relative; display: inline-block; height: 30px; aspect-ratio: 166 / 34; }
.brand-logo-wrap .brand-logo {
  position: absolute; inset: 0; height: 100%; width: 100%;
  transition: opacity .3s var(--sr-ease);
}
.brand-logo-wrap .brand-logo--light { opacity: 0; }
.site-header.scrolled .brand-logo-wrap .brand-logo--dark { opacity: 0; }
.site-header.scrolled .brand-logo-wrap .brand-logo--light { opacity: 1; }
@media (max-width: 480px){ .brand-logo-wrap { height: 26px; } }

/* Mismo latido cian del logo del overlay de bienvenida (js/intro.js),
   citado aquí en el header mientras flota transparente sobre el hero. */
.site-header:not(.scrolled) .brand-logo-wrap { animation: navLogoPulse 3s ease-in-out infinite; border-radius: 6px; }
@keyframes navLogoPulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(0,229,255,.25)); }
  50% { filter: drop-shadow(0 0 13px rgba(0,229,255,.55)); }
}

.nav { display: flex; align-items: center; gap: var(--sr-space-8); margin-left: auto; }
.nav > a:not(.btn) { color: rgba(245,247,250,.86); font-size: .95rem; font-weight: 500; position: relative; transition: color .2s var(--sr-ease); }
.nav > a:not(.btn):hover, .nav > a[aria-current="page"] { color: #fff; }
.site-header.scrolled .nav > a:not(.btn) { color: var(--sr-slate); }
.site-header.scrolled .nav > a:not(.btn):hover, .site-header.scrolled .nav > a[aria-current="page"] { color: var(--sr-navy); }

/* ---------- 8.c Cápsula acceso + idioma del header — única, móvil y escritorio ----------
   Un solo componente (inyectado por JS, reemplaza a la vieja bandera+
   chevron del nav) al lado opuesto del logo: en escritorio queda al
   final del nav (empujado por el margin-left:auto de .nav); en móvil,
   como el nav entero se oculta, el propio botón toma ese empuje.
   Acceso e idioma ya no flotan como dos círculos sueltos: comparten una
   sola cápsula compacta (fondo + borde tenues, divisor entre ambos), un
   tratamiento más discreto y elegante que el glow pulsante de antes.
   Cada botón abre su propio panel tipo "Más ▾" (idioma con ambas
   banderas). */
.header-icons {
  display: inline-flex; align-items: center; gap: 0; padding: 3px;
  border-radius: var(--sr-radius-pill); background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  transition: background .2s var(--sr-ease), border-color .2s var(--sr-ease);
}
@media (max-width: 1120px) { .header-icons { margin-left: auto; } }
.site-header.scrolled .header-icons { background: rgba(0,31,63,.05); border-color: rgba(0,31,63,.10); }
body.dark-shell .site-header.scrolled .header-icons { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); }

.header-icons__divider { width: 1px; height: 16px; flex: none; background: rgba(255,255,255,.22); }
.site-header.scrolled .header-icons__divider { background: rgba(0,31,63,.14); }
body.dark-shell .site-header.scrolled .header-icons__divider { background: rgba(255,255,255,.22); }

.header-lang { position: relative; display: inline-flex; }
.header-lang__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; background: none; border: none; cursor: pointer; color: #fff; padding: 0;
  transition: background .2s var(--sr-ease), color .2s var(--sr-ease);
}
.header-lang__btn svg { width: 18px; height: 18px; }
.header-lang__btn:hover, .header-lang.is-open .header-lang__btn { background: rgba(255,255,255,.16); }
.site-header.scrolled .header-lang__btn { color: var(--sr-navy); }
.site-header.scrolled .header-lang__btn:hover, .site-header.scrolled .header-lang.is-open .header-lang__btn { background: rgba(0,31,63,.08); }
body.dark-shell .site-header.scrolled .header-lang__btn { color: #fff; }
body.dark-shell .site-header.scrolled .header-lang__btn:hover, body.dark-shell .site-header.scrolled .header-lang.is-open .header-lang__btn { background: rgba(255,255,255,.16); }

.header-lang__panel {
  position: absolute; top: calc(100% + 14px); right: 0; transform: translateY(-6px);
  min-width: 172px; background: #fff; border: 1px solid var(--sr-border); border-radius: var(--sr-radius-md);
  box-shadow: var(--sr-shadow-lg); padding: var(--sr-space-2); opacity: 0; pointer-events: none;
  transition: opacity .2s var(--sr-ease), transform .2s var(--sr-ease); z-index: 110;
}
.header-lang.is-open .header-lang__panel { opacity: 1; pointer-events: auto; transform: translateY(0); }
.header-lang__row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border-radius: var(--sr-radius-sm); color: var(--sr-slate); font-size: .92rem; font-weight: 500;
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.header-lang__row .flag { width: 22px; height: 16px; border-radius: 3px; flex: none; }
.header-lang__row:hover { background: var(--sr-mist); color: var(--sr-navy); }
.header-lang__row.is-current { color: var(--sr-navy); font-weight: 600; cursor: default; }
.header-lang__row.is-current:hover { background: none; }

/* Iconos de contacto y acceso del header — mismo tratamiento que .header-lang__btn, dentro de la misma cápsula */
.header-contact, .header-login {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; color: #fff;
  transition: background .2s var(--sr-ease), color .2s var(--sr-ease);
}
.header-contact svg, .header-login svg { width: 18px; height: 18px; }
.header-contact:hover, .header-login:hover { background: rgba(255,255,255,.16); }
.site-header.scrolled .header-contact, .site-header.scrolled .header-login { color: var(--sr-navy); }
.site-header.scrolled .header-contact:hover, .site-header.scrolled .header-login:hover { background: rgba(0,31,63,.08); }
body.dark-shell .site-header.scrolled .header-contact, body.dark-shell .site-header.scrolled .header-login { color: #fff; }
body.dark-shell .site-header.scrolled .header-contact:hover, body.dark-shell .site-header.scrolled .header-login:hover { background: rgba(255,255,255,.16); }
.nav > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px;
  background: var(--sr-cyan); border-radius: 2px;
}
/* Sin tarjeta/borde propios: la bandera (ya es un rectángulo redondeado
   por sí misma) flota directa sobre el header, solo con una sombra para
   que se lea bien tanto sobre el hero como sobre el header sólido. */
.nav-lang { display: inline-flex; align-items: center; justify-content: center; gap: 4px; line-height: 0; transition: transform .15s var(--sr-ease), filter .25s var(--sr-ease); filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)); }
.nav-lang:hover { transform: translateY(-2px); filter: drop-shadow(0 5px 14px rgba(0,0,0,.35)) drop-shadow(0 0 9px rgba(0,229,255,.65)); }
.nav-lang .flag { display: block; width: 26px; height: auto; border-radius: 3px; }
/* Chevron: la pista visual de que la bandera se puede cambiar — un
   ligero vaivén constante en cian, para que se note "viva" incluso
   antes de pasar el mouse, sin volver a encerrar la bandera en una caja. */
.nav-lang__chevron { width: 12px; height: 12px; color: var(--sr-cyan); flex: none; animation: navLangChevron 2.2s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(0,229,255,.65)); transition: color .2s var(--sr-ease); }
.nav-lang:hover .nav-lang__chevron { color: #fff; transform: translateY(1px); }
@keyframes navLangChevron {
  0%, 100% { transform: translateY(0); opacity: .8; }
  50% { transform: translateY(2px); opacity: 1; }
}
.site-header.scrolled .nav-lang, .site-footer .nav-lang { filter: drop-shadow(0 1px 3px rgba(0,31,63,.2)); }
.site-header.scrolled .nav-lang:hover, .site-footer .nav-lang:hover { filter: drop-shadow(0 4px 10px rgba(0,102,255,.22)) drop-shadow(0 0 8px rgba(0,229,255,.5)); }
.site-header.scrolled .nav-lang__chevron, .site-footer .nav-lang__chevron { color: var(--sr-blue); filter: drop-shadow(0 0 3px rgba(0,102,255,.4)); }
.site-header.scrolled .nav-lang:hover .nav-lang__chevron, .site-footer .nav-lang:hover .nav-lang__chevron { color: var(--sr-cyan); }
@media (max-width: 1120px) { .nav.open .nav-lang { width: max-content; } .nav.open .nav-lang .flag { width: 30px; } .nav.open .nav-lang__chevron { width: 14px; height: 14px; } }

/* El hamburguesa + hoja de navegación quedaron retirados: la Tab Bar
   inferior (§30) toma su lugar en móvil, generada desde estos mismos
   enlaces — un solo origen de verdad, sin duplicar el menú a mano. */
.nav-toggle { display: none; }

@media (max-width: 1120px) {
  .nav { display: none; }
}

/* ---------- 9. Hero ---------- */
.hero { position: relative; background: var(--sr-navy); color: var(--sr-mist); overflow: hidden; isolation: isolate; padding-top: var(--sr-header-h); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(680px 480px at 78% 8%, rgba(0,102,255,.28), transparent 60%),
    radial-gradient(560px 420px at 10% 100%, rgba(0,229,255,.14), transparent 60%);
}
.hero .container { position: relative; z-index: 1; }
.hero-inner { padding-block: clamp(var(--sr-space-16), 12vh, 140px); max-width: 780px; }
.hero .eyebrow { color: var(--sr-cyan); margin-bottom: var(--sr-space-6); }
.hero h1 { color: #fff; margin-bottom: var(--sr-space-6); }
.hero h1 .accent { color: var(--sr-cyan); }
.hero p.lead { color: rgba(245,247,250,.85); margin-bottom: var(--sr-space-8); max-width: 620px; }
.hero .btn-row { margin-bottom: var(--sr-space-12); }
.hero-tagline { font-family: var(--sr-font-mono); font-size: .8rem; letter-spacing: .5px; color: rgba(0,229,255,.9); }

/* Red neuronal decorativa del hero */
.hero-neural { position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none; }
.hero-neural .edge { stroke: var(--sr-cyan); stroke-linecap: round; opacity: .18; }
.hero-neural .node { fill: var(--sr-cyan); opacity: .55; }
.hero-neural .pulse { fill: #fff; }

/* ---------- 10. Franja de logos / stats ---------- */
.stat-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sr-space-6); text-align: center; }
@media (max-width: 640px){ .stat-band { grid-template-columns: 1fr; gap: var(--sr-space-8); } }
.stat { }
.stat .num { font-family: var(--sr-font-head); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; color: var(--sr-blue); line-height: 1; letter-spacing: -1px; }
.section--dark .stat .num { color: var(--sr-cyan); }
.stat .label { font-size: .95rem; color: var(--sr-slate); margin-top: var(--sr-space-2); }
.section--dark .stat .label { color: rgba(245,247,250,.75); }

/* ---------- 11. Proceso (pasos) ---------- */
.step { position: relative; }
.step__num {
  font-family: var(--sr-font-mono); font-size: .8rem; font-weight: 700;
  width: 40px; height: 40px; border-radius: var(--sr-radius-pill);
  display: grid; place-items: center; margin-bottom: var(--sr-space-4);
  background: var(--sr-navy); color: var(--sr-cyan); border: 1px solid var(--sr-navy);
}

/* ---------- 12. Callout ---------- */
.callout {
  border-left: 4px solid var(--sr-blue); background: var(--sr-blue-50);
  padding: var(--sr-space-6) var(--sr-space-8); border-radius: 0 var(--sr-radius-md) var(--sr-radius-md) 0;
}
.callout.warning { border-left-color: var(--sr-warning); background: #FFF8E6; }
.callout p { color: var(--sr-carbon); margin: 0; }
.callout strong { color: var(--sr-navy); }

/* ---------- 13. Split (dos columnas texto + media) ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(var(--sr-space-8), 6vw, var(--sr-space-24)); align-items: center; }
.split.reverse .split__media { order: -1; }
@media (max-width: 860px){ .split, .split.reverse { grid-template-columns: 1fr; } .split.reverse .split__media { order: 0; } }

/* Panel neural reutilizable (media) */
.neural-panel {
  aspect-ratio: 1 / 1; border-radius: var(--sr-radius-lg); background: var(--sr-navy);
  position: relative; overflow: hidden; box-shadow: var(--sr-shadow-lg);
  max-width: 460px; margin-inline: auto; width: 100%;
}
.neural-panel::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(300px 240px at 70% 20%, rgba(0,102,255,.35), transparent 60%);
}

/* ---------- 14. FAQ ---------- */
.faq { border-top: 1px solid var(--sr-border); }
.faq details { border-bottom: 1px solid var(--sr-border); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--sr-space-6) 0;
  font-family: var(--sr-font-head); font-weight: 500; font-size: 1.15rem; color: var(--sr-navy);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { flex: none; width: 24px; height: 24px; color: var(--sr-blue); transition: transform .25s var(--sr-ease); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--sr-space-6); max-width: var(--sr-readw); }

/* ---------- 15. Contacto ---------- */
.contact-card { text-align: center; }
.contact-card .card__icon { margin-inline: auto; }
.field { margin-bottom: var(--sr-space-4); }
.field label { display: block; font-size: .85rem; font-weight: 600; color: var(--sr-navy); margin-bottom: var(--sr-space-2); }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--sr-carbon);
  background: var(--sr-mist); border: 1px solid var(--sr-border); border-radius: var(--sr-radius-sm);
  padding: 12px 14px; transition: border-color .2s var(--sr-ease), box-shadow .2s var(--sr-ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--sr-slate); opacity: .7; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sr-blue); box-shadow: 0 0 0 3px var(--sr-blue-50);
}
.field textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: .8rem; color: var(--sr-slate); margin-top: var(--sr-space-3); }
.cf-turnstile { margin: var(--sr-space-2) 0 var(--sr-space-4); display: flex; justify-content: center; min-height: 65px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note--ok { color: var(--sr-success); font-weight: 600; }
.form-note--error { color: var(--sr-error); font-weight: 600; }
.form-card-accent { position: relative; overflow: hidden; max-width: 480px; margin-top: var(--sr-space-6); }
.form-card-accent::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(120deg, var(--sr-blue) 0%, var(--sr-cyan) 100%);
}
.form-card-accent .card__icon { background: var(--sr-cyan-50); color: var(--sr-cyan-700); transition: background .3s var(--sr-ease), color .3s var(--sr-ease); }
.form-card-accent [data-form-fields] { transition: opacity .3s var(--sr-ease), transform .3s var(--sr-ease); }
.form-card-accent [data-form-fields].is-leaving { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.form-success {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sr-space-4); padding: var(--sr-space-6) 0;
  opacity: 0; transform: translateY(8px); transition: opacity .35s var(--sr-ease), transform .35s var(--sr-ease);
}
.form-success.is-entering { opacity: 1; transform: translateY(0); }
.form-success svg { width: 44px; height: 44px; color: var(--sr-success); }
.form-success p { color: var(--sr-navy); font-weight: 600; font-size: 1.05rem; margin: 0; }

/* ---------- 16. Footer — minimalista y disruptivo ----------
   Nada de columnas formales ni logo repetido (ya vive en el header):
   solo slogan, Legal, redes y derechos de autor, en un layout suelto
   con un acento diagonal cian arriba, no un rectángulo plano. */
.site-footer { position: relative; overflow: hidden; isolation: isolate; background: var(--sr-navy-700); color: rgba(245,247,250,.72); padding-block: var(--sr-space-4) var(--sr-space-3); }
.site-footer::before {
  content: ""; position: absolute; top: 0; left: -4%; right: -4%; height: 2px;
  background: linear-gradient(100deg, transparent 0%, var(--sr-cyan) 24%, var(--sr-blue) 56%, transparent 80%);
  transform: skewY(-.6deg); transform-origin: top left;
}
.site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(460px 280px at 90% -15%, rgba(0,229,255,.14), transparent 65%);
}
/* La misma medida (--sr-space-4) separa el acento superior del slogan
   y el divisor inferior de la versión, para que ambos lados guarden
   la misma proporción — un footer delgado y simétrico, no un bloque. */
.footer-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sr-space-6); margin-bottom: var(--sr-space-4); }
.footer-slogan { font-family: var(--sr-font-mono); font-size: .75rem; color: var(--sr-cyan); letter-spacing: .3px; max-width: 400px; }
.footer-links { display: flex; align-items: center; gap: var(--sr-space-6); flex-wrap: wrap; }
.footer-links a:not(.footer-social) { color: rgba(245,247,250,.72); font-size: .825rem; }
.footer-links a:not(.footer-social):hover { color: var(--sr-cyan); }
.footer-social { display: inline-flex; color: rgba(245,247,250,.72); transition: color .2s var(--sr-ease), transform .15s var(--sr-ease), filter .2s var(--sr-ease); }
.footer-social svg { width: 17px; height: 17px; }
.footer-social:hover { color: var(--sr-cyan); transform: translateY(-2px); filter: drop-shadow(0 0 8px rgba(0,229,255,.55)); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--sr-space-4); display: flex; flex-wrap: wrap; gap: var(--sr-space-4); justify-content: space-between; align-items: center; font-size: .78rem; }
.footer-bottom a { color: rgba(245,247,250,.72); }
.footer-bottom a:hover { color: var(--sr-cyan); }
.footer-version { font-family: var(--sr-font-mono); font-size: .68rem; letter-spacing: .3px; color: var(--sr-cyan); background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.2); padding: 3px 10px; border-radius: var(--sr-radius-pill); }

/* ---------- 17. Banner de cookies ---------- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 520px; margin-inline: auto;
  background: var(--sr-navy); color: var(--sr-mist);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--sr-radius-lg);
  padding: var(--sr-space-6); box-shadow: var(--sr-shadow-lg);
  display: none;
}
.cookie-banner.show { display: block; animation: rise .4s var(--sr-ease); }
.cookie-banner p { color: rgba(245,247,250,.85); font-size: .9rem; margin-bottom: var(--sr-space-4); }
.cookie-banner a { color: var(--sr-cyan); }
.cookie-banner .btn-row { justify-content: flex-end; }
.cookie-banner .btn { padding: 10px 18px; font-size: .9rem; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- 18. Page hero (interior) ---------- */
.page-hero { background: var(--sr-navy); color: var(--sr-mist); position: relative; overflow: hidden; isolation: isolate; padding-top: var(--sr-header-h); }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(600px 400px at 85% 0%, rgba(0,102,255,.22), transparent 60%); }
.page-hero .inner { padding-block: clamp(40px, 5vw, 76px); max-width: 760px; }
.page-hero .eyebrow { color: var(--sr-cyan); margin-bottom: var(--sr-space-4); }
.page-hero h1 { color: #fff; margin-bottom: var(--sr-space-4); }
.page-hero p.lead { color: rgba(245,247,250,.85); }

/* ---------- 18.b Page hero minimal — Nosotros / Acerca de la App ----------
   Sin H1 ni bajada: el breadcrumb repetía el eyebrow y el H1/tagline
   repetían el propio eyebrow o el slogan del footer. Con una sola línea
   de contenido, el hero se achica a su medida y el eyebrow se convierte
   en la protagonista: una insignia con más presencia que el eyebrow
   normal (pastilla + punto vivo), en vez de la etiqueta diminuta de
   antes flotando sola en un hero de tamaño completo. */
.page-hero--minimal .inner { padding-block: clamp(28px, 4vw, 44px); }
.page-hero__badge {
  position: relative; isolation: isolate; margin-bottom: var(--sr-space-4);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sr-font-mono); font-weight: 600; font-size: .82rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--sr-cyan);
  background: rgba(0,229,255,.10); border: 1px solid rgba(0,229,255,.32);
  border-radius: var(--sr-radius-pill); padding: 11px 20px 11px 16px;
}
.page-hero__badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--sr-cyan); box-shadow: 0 0 9px rgba(0,229,255,.85);
}
/* Glow: EXACTAMENTE el mismo patrón que .deck-card__glow (Misión/Visión/
   Valores, §7.b) — un <svg> con un rect por color de marca (navy/azul/
   cian) recorriendo el contorno real de la pastilla, mismos parámetros
   (stroke-width, dasharray, animación) para que se vea idéntico. */
.page-hero__badge-glow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.page-hero__badge-glow rect { fill: none; stroke-linecap: round; stroke-width: 2.5; }
.page-hero__badge-glow-a { stroke: var(--sr-navy); }
.page-hero__badge-glow-b { stroke: var(--sr-blue); }
.page-hero__badge-glow-c { stroke: var(--sr-cyan); filter: drop-shadow(0 0 4px var(--sr-cyan)); }

/* ---------- 19. Utilidades ---------- */
.mt-4{margin-top:var(--sr-space-4)} .mt-6{margin-top:var(--sr-space-6)} .mt-8{margin-top:var(--sr-space-8)} .mt-12{margin-top:var(--sr-space-12)}
.mb-0{margin-bottom:0} .center{text-align:center} .measure{max-width:var(--sr-readw)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 16px;border-radius:var(--sr-radius-md);z-index:300;box-shadow:var(--sr-shadow-md)}
.skip-link:focus{left:16px}

/* Aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--sr-ease), transform .6s var(--sr-ease); }
.reveal.in { opacity: 1; transform: none; }

/* Contenido legal */
.legal { max-width: var(--sr-readw); }
.legal h2 { font-size: 1.5rem; margin-top: var(--sr-space-12); margin-bottom: var(--sr-space-4); }
.legal h3 { font-size: 1.15rem; margin-top: var(--sr-space-8); margin-bottom: var(--sr-space-3); }
.legal p, .legal li { color: var(--sr-slate); margin-bottom: var(--sr-space-4); }
.legal ul { list-style: disc; padding-left: 1.4em; }
.legal ol { list-style: decimal; padding-left: 1.4em; }
.legal ul li, .legal ol li { margin-bottom: var(--sr-space-2); }
.legal a { text-decoration: underline; }

/* ---------- 20. Acceso / Login ---------- */
.auth-body { min-height: 100dvh; display: grid; place-items: center; padding: var(--sr-space-6); background: var(--sr-navy); position: relative; overflow: hidden; }
.auth-body::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(600px 420px at 75% 8%, rgba(0,102,255,.30), transparent 60%),
    radial-gradient(500px 360px at 12% 100%, rgba(0,229,255,.14), transparent 60%);
}
.auth-neural { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none; }
.auth-neural .edge { stroke: var(--sr-cyan); stroke-linecap: round; opacity: .18; }
.auth-neural .node { fill: var(--sr-cyan); opacity: .5; }
.auth-neural .pulse { fill: #fff; }

.auth-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: center;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--sr-radius-lg); padding: var(--sr-space-12) clamp(var(--sr-space-6), 6vw, var(--sr-space-12));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--sr-shadow-lg);
}
.auth-logo { width: 64px; height: 64px; margin: 0 auto var(--sr-space-6); }
.auth-card .eyebrow { justify-content: center; color: var(--sr-cyan); margin-bottom: var(--sr-space-3); }
.auth-card h1 { color: #fff; font-size: 1.6rem; letter-spacing: -.5px; margin-bottom: var(--sr-space-2); }
.auth-sub { color: rgba(245,247,250,.72); font-size: .95rem; margin-bottom: var(--sr-space-8); }
.auth-card form { text-align: left; }
.auth-card .field label { color: rgba(245,247,250,.92); }
.auth-card .field input { background: rgba(3,18,40,.6); border-color: rgba(255,255,255,.16); color: #fff; }
.auth-card .field input::placeholder { color: rgba(245,247,250,.4); }
.auth-card .field input:focus { border-color: var(--sr-cyan); box-shadow: 0 0 0 3px rgba(0,229,255,.15); }
.auth-error { color: #FFB4C0; font-size: .85rem; margin: 0 0 var(--sr-space-4); min-height: 1.1em; }
.auth-foot { font-family: var(--sr-font-mono); font-size: .72rem; color: rgba(0,229,255,.75); margin-top: var(--sr-space-8); letter-spacing: .5px; }

/* ---------- 21.b Panel neural con icono (usado en Nosotros) ---------- */
.neural-panel__icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.25);
  color: var(--sr-cyan);
  animation: panelPulse 2.6s ease-in-out infinite;
  transition: transform .3s var(--sr-ease);
}
.neural-panel__icon svg { width: 40px; height: 40px; }
.split__media:hover .neural-panel__icon { transform: translate(-50%,-50%) scale(1.08); }
.neural-panel__num {
  position: absolute; bottom: var(--sr-space-6); left: var(--sr-space-6);
  font-family: var(--sr-font-mono); font-size: .75rem; letter-spacing: 3px;
  color: rgba(0,229,255,.55);
}
@keyframes panelPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,229,255,.35); }
  50% { box-shadow: 0 0 0 20px rgba(0,229,255,0); }
}
.page-hero .container { position: relative; z-index: 1; }

/* ---------- 22. Página 404 — "Señal perdida" (glitch) ---------- */
.error-page {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--sr-navy); color: var(--sr-mist);
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: clamp(var(--sr-space-16), 9vw, 120px) var(--sr-gutter);
  padding-top: calc(var(--sr-header-h) + clamp(var(--sr-space-16), 9vw, 120px));
}
.error-page::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(720px 520px at 82% 6%, rgba(0,102,255,.26), transparent 60%),
    radial-gradient(560px 420px at 6% 96%, rgba(255,59,92,.14), transparent 60%);
}
.error-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
.error-scan {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .4; mix-blend-mode: overlay;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 3px);
}
.error-inner { position: relative; z-index: 1; max-width: 620px; text-align: center; transition: transform .08s steps(2); }
.error-inner.is-glitching { transform: translate(-3px, 1px) skewX(-1.2deg); }

.glitch-num {
  position: relative; display: inline-block; margin-bottom: var(--sr-space-4);
  font-family: var(--sr-font-head); font-weight: 600; letter-spacing: -4px;
  font-size: clamp(5.5rem, 22vw, 10.5rem); line-height: .88; color: #fff;
  text-shadow: 0 0 46px rgba(0,229,255,.25);
}
.glitch-num::before, .glitch-num::after {
  content: attr(data-text); position: absolute; inset: 0; overflow: hidden;
}
.glitch-num::before { color: var(--sr-cyan); clip-path: inset(0 0 58% 0); animation: glitchTop 3.2s infinite steps(1); }
.glitch-num::after  { color: var(--sr-error); clip-path: inset(58% 0 0 0); animation: glitchBottom 2.6s infinite steps(1); }

@keyframes glitchTop {
  0%, 88%, 100% { transform: translate(0,0); opacity: 0; }
  89% { transform: translate(4px,-2px); opacity: .9; }
  91% { transform: translate(-3px,1px); opacity: .9; }
  93% { transform: translate(2px,0); opacity: .9; }
  95% { transform: translate(0,0); opacity: 0; }
}
@keyframes glitchBottom {
  0%, 91%, 100% { transform: translate(0,0); opacity: 0; }
  92% { transform: translate(-5px,2px); opacity: .85; }
  94% { transform: translate(3px,-1px); opacity: .85; }
  96% { transform: translate(-2px,0); opacity: .85; }
  98% { transform: translate(0,0); opacity: 0; }
}

.error-page .eyebrow { justify-content: center; color: var(--sr-cyan); margin-bottom: var(--sr-space-4); }
.error-page h1 { color: #fff; margin-bottom: var(--sr-space-4); min-height: 1.2em; }
.error-page p.lead { color: rgba(245,247,250,.82); margin-inline: auto; margin-bottom: var(--sr-space-6); }

.error-terminal {
  font-family: var(--sr-font-mono); font-size: .8rem; text-align: left; color: rgba(0,229,255,.85);
  background: rgba(0,20,40,.55); border: 1px solid rgba(0,229,255,.22); border-radius: var(--sr-radius-md);
  padding: var(--sr-space-4) var(--sr-space-6); margin: 0 auto var(--sr-space-8); display: inline-block;
  max-width: 100%; overflow-x: auto; white-space: nowrap;
}
.error-terminal .dim { color: rgba(245,247,250,.5); }
.error-terminal .bad { color: var(--sr-error); }
.error-terminal .cursor {
  display: inline-block; width: 7px; height: 1em; margin-left: 2px; background: var(--sr-cyan);
  vertical-align: -2px; animation: errCursor 1s steps(1) infinite;
}
@keyframes errCursor { 50% { opacity: 0; } }

.error-page .btn-row { justify-content: center; }

/* ---------- 23. Hoja "Más" — mango + fondo oscuro (bottom sheet) ----------
   Reutilizado por la Tab Bar (§30): mismo mango/scrim que antes vivían en
   el menú hamburguesa, ahora al servicio de su hoja "Más". */
.nav-sheet-handle { display: none; }
@media (max-width: 1120px) {
  .nav-sheet-handle {
    display: block; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 5px; border-radius: 999px; background: var(--sr-border);
  }
}
.nav-scrim {
  position: fixed; inset: 0; z-index: 155; background: rgba(0,15,30,.45);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--sr-ease);
}
.nav-scrim.show { opacity: 1; pointer-events: auto; }
@media (min-width: 1121px) { .nav-scrim { display: none; } }

/* ---------- 24. WhatsApp flotante (sitewide, inyectado por JS) ----------
   En móvil se levanta sobre la Tab Bar (§30); en escritorio no hay tab
   bar, así que se queda en su posición original de siempre. */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 150;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.4);
  animation: waFloatIn .5s var(--sr-ease) .5s both, waPulse 2.8s ease-in-out infinite 1.2s;
  transition: transform .2s var(--sr-ease), box-shadow .25s var(--sr-ease);
}
.wa-float svg { width: 27px; height: 27px; }
.wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 34px rgba(37,211,102,.5); }
@keyframes waFloatIn { from { opacity: 0; transform: translateY(18px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.35); }
  50% { box-shadow: 0 10px 26px rgba(37,211,102,.4), 0 0 0 9px rgba(37,211,102,0); }
}
@media (max-width: 760px) { .wa-float { bottom: 100px; } }

/* ---------- 26. Nav pill — Diagnóstico de IA Gratis ----------
   Oculto en el nav de escritorio: el mismo CTA ya vive en el hero de
   Inicio, así que repetirlo en el menú superior era ruido. El enlace
   sigue vivo en el DOM porque main.js lo reutiliza para armar el botón
   central de la Tab Bar móvil (.app-tab-center), que no toca esta regla. */
.nav-pill { display: none; }

/* ---------- 27. Barras antes/después (contadores de Proof) ---------- */
.ba-bars { display: grid; gap: var(--sr-space-3); margin-top: var(--sr-space-4); }
.ba-bar { display: grid; grid-template-columns: 70px 1fr 46px; align-items: center; gap: var(--sr-space-3); }
.ba-bar .lbl { font-size: .78rem; color: var(--sr-slate); }
.ba-bar .track { height: 10px; border-radius: 999px; background: var(--sr-border); overflow: hidden; }
.ba-bar .fill { height: 100%; border-radius: 999px; width: 0%; transition: width 1.1s var(--sr-ease); }
.ba-bar.before .fill { background: var(--sr-slate); }
.ba-bar.after .fill { background: linear-gradient(90deg, var(--sr-blue), var(--sr-cyan)); }
.ba-bar .val { font-family: var(--sr-font-mono); font-size: .78rem; color: var(--sr-navy); text-align: right; }
.section--dark .ba-bar .lbl, .section--dark .ba-bar .val { color: rgba(245,247,250,.75); }
.section--dark .ba-bar .track { background: rgba(255,255,255,.12); }

.case-card { position: relative; }
.case-card__metric { font-family: var(--sr-font-mono); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; color: var(--sr-cyan); line-height: 1; }
.case-card__metric-label { font-size: .85rem; color: rgba(245,247,250,.7); margin-top: var(--sr-space-2); margin-bottom: var(--sr-space-4); }

/* ---------- 28. Comparador antes/después (slider, Soluciones) ---------- */
.compare { position: relative; display: flex; align-items: stretch; border-radius: var(--sr-radius-lg); overflow: hidden; border: 1px solid var(--sr-border); background: #fff; box-shadow: var(--sr-shadow-md); }
.compare__side { padding: var(--sr-space-8) var(--sr-space-6); min-width: 0; overflow: hidden; }
.compare__before { flex: 0 0 auto; width: 50%; }
.compare__after { flex: 1 1 auto; background: var(--sr-navy); color: #fff; }
.compare__side h4 { font-family: var(--sr-font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: var(--sr-space-4); color: var(--sr-blue); white-space: nowrap; }
.compare__after h4 { color: var(--sr-cyan); }
.compare__side ul { display: grid; gap: var(--sr-space-3); }
.compare__side li { font-size: .92rem; color: var(--sr-slate); padding-left: 26px; position: relative; }
.compare__after li { color: rgba(245,247,250,.85); }
.compare__side li::before { content: "✕"; position: absolute; left: 0; color: var(--sr-error); font-weight: 700; font-size: .8rem; top: 1px; }
.compare__after li::before { content: "✓"; color: var(--sr-cyan); }
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--sr-cyan);
  transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 12px rgba(0,229,255,.6);
}
.compare__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 999px; background: #fff; border: 2px solid var(--sr-cyan);
  display: grid; place-items: center; box-shadow: var(--sr-shadow-md); color: var(--sr-blue);
  transition: transform .15s var(--sr-ease);
}
.compare__grip svg { width: 20px; height: 20px; }
.compare__range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; z-index: 2;
}
.compare__range:active ~ .compare__handle .compare__grip { transform: translate(-50%,-50%) scale(1.1); }
.compare__range:focus-visible ~ .compare__handle .compare__grip { outline: 3px solid var(--sr-blue-300); outline-offset: 2px; }
@media (max-width: 640px) { .compare__side { padding: var(--sr-space-6) var(--sr-space-4); } }

/* ---------- 29. Free AI Check — quiz de pantalla completa ---------- */
.quiz-shell { min-height: 100dvh; background: var(--sr-navy); position: relative; overflow: hidden; isolation: isolate; padding-top: var(--sr-header-h); display: flex; flex-direction: column; }
.quiz-shell::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(680px 480px at 78% 8%, rgba(0,102,255,.25), transparent 60%), radial-gradient(560px 420px at 10% 100%, rgba(0,229,255,.12), transparent 60%); }
.quiz-close { position: absolute; top: calc(var(--sr-header-h) + 14px); right: 20px; z-index: 5; width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; font-size: 1.1rem; transition: background .2s var(--sr-ease); }
.quiz-close:hover { background: rgba(255,255,255,.16); color: #fff; }
.quiz-progress { height: 4px; background: rgba(255,255,255,.12); margin: var(--sr-space-6) auto 0; border-radius: 999px; overflow: hidden; max-width: 640px; width: calc(100% - 2 * var(--sr-gutter)); }
.quiz-progress__fill { height: 100%; width: 20%; background: linear-gradient(90deg, var(--sr-blue), var(--sr-cyan)); border-radius: 999px; transition: width .4s var(--sr-ease); }
.quiz-step-count { text-align: center; font-family: var(--sr-font-mono); font-size: .72rem; letter-spacing: .5px; color: rgba(0,229,255,.8); margin-top: var(--sr-space-3); }
.quiz-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--sr-space-8) var(--sr-gutter) var(--sr-space-16); }
.quiz-step { max-width: 640px; width: 100%; margin-inline: auto; color: #fff; }
.quiz-step[hidden] { display: none; }
.quiz-step .eyebrow { color: var(--sr-cyan); margin-bottom: var(--sr-space-4); justify-content: center; }
.quiz-step h2 { color: #fff; text-align: center; margin-bottom: var(--sr-space-8); }
.quiz-anim-in { animation: quizIn .45s var(--sr-ease); }
@keyframes quizIn { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }

.quiz-chips { display: flex; flex-wrap: wrap; gap: var(--sr-space-3); justify-content: center; }
.quiz-chip {
  font-family: var(--sr-font-body); font-size: .92rem; font-weight: 500; color: rgba(245,247,250,.85);
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.18); border-radius: var(--sr-radius-pill);
  padding: 12px 20px; cursor: pointer; transition: all .2s var(--sr-ease); appearance: none;
}
.quiz-chip:hover { border-color: rgba(0,229,255,.5); }
.quiz-chip.is-selected { background: var(--sr-blue); border-color: var(--sr-blue); color: #fff; box-shadow: 0 6px 18px rgba(0,102,255,.4); }

.quiz-slider-wrap { text-align: center; }
.quiz-slider-value { font-family: var(--sr-font-mono); font-size: clamp(2.5rem, 8vw, 3.5rem); font-weight: 700; color: var(--sr-cyan); margin-bottom: var(--sr-space-6); }
.quiz-range { width: 100%; max-width: 480px; margin: 0 auto var(--sr-space-4); display: block; accent-color: var(--sr-cyan); height: 6px; }

.quiz-fields { display: grid; gap: var(--sr-space-4); max-width: 420px; margin-inline: auto; }
.quiz-fields .field label { color: rgba(245,247,250,.9); }
.quiz-fields .field input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
.quiz-fields .field input::placeholder { color: rgba(245,247,250,.4); }

.quiz-nav { display: flex; justify-content: center; align-items: center; gap: var(--sr-space-3); margin-top: var(--sr-space-8); }
.quiz-back { background: none; border: none; color: rgba(245,247,250,.6); font-size: .9rem; cursor: pointer; padding: 14px; font-family: inherit; }
.quiz-back:hover { color: #fff; }
.quiz-back[hidden] { display: none; }

.quiz-result { text-align: center; }
.quiz-result__big { font-family: var(--sr-font-mono); font-size: clamp(3rem, 10vw, 4.5rem); font-weight: 700; background: linear-gradient(120deg, #fff, var(--sr-cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.quiz-result__label { color: rgba(245,247,250,.8); margin-top: var(--sr-space-3); margin-bottom: var(--sr-space-8); }
.quiz-opps { display: grid; gap: var(--sr-space-4); text-align: left; margin-bottom: var(--sr-space-8); }
.quiz-opp { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--sr-radius-lg); padding: var(--sr-space-6); }
.quiz-opp .tag { margin-bottom: var(--sr-space-3); }
.quiz-opp h4 { color: #fff; margin-bottom: var(--sr-space-2); }
.quiz-opp p { color: rgba(245,247,250,.75); font-size: .9rem; margin: 0; }
.quiz-confetti { position: fixed; inset: 0; z-index: 50; pointer-events: none; width: 100%; height: 100%; }

/* ---------- 29.b Home — header siempre "sobre oscuro" ----------
   El home ahora es un lienzo oscuro de principio a fin (no alterna con
   secciones claras como el resto del sitio), así que el header NUNCA
   debe volverse blanco al hacer scroll — solo gana un fondo navy
   traslúcido con blur, conservando los mismos tratamientos que ya usa
   sobre el hero. body.dark-shell marca esta página en el <body>. */
body.dark-shell .site-header.scrolled {
  background: rgba(4,16,31,.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(255,255,255,.1); box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
body.dark-shell .site-header.scrolled .nav > a:not(.btn) { color: rgba(245,247,250,.86); }
body.dark-shell .site-header.scrolled .nav > a:not(.btn):hover,
body.dark-shell .site-header.scrolled .nav > a[aria-current="page"] { color: #fff; }
body.dark-shell .site-header.scrolled .nav-toggle { color: #fff; }
body.dark-shell .site-header.scrolled .brand-logo-wrap .brand-logo--dark { opacity: 1; }
body.dark-shell .site-header.scrolled .brand-logo-wrap .brand-logo--light { opacity: 0; }
body.dark-shell .site-header.scrolled .nav-pill { color: #fff; background: rgba(0,229,255,.14); border-color: rgba(0,229,255,.5); }
body.dark-shell .site-header.scrolled .nav-pill:hover { background: rgba(0,229,255,.24); }

/* ---------- 30. Tab Bar inferior (móvil) — generada desde #primary-nav ----------
   Reemplaza al menú hamburguesa: mismos enlaces, leídos por JS (main.js),
   sin duplicar contenido a mano. La hoja "Más" reutiliza el mango/scrim
   de la §23. */
.app-tabbar {
  position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 150;
  height: 64px; display: none; align-items: center; justify-content: space-around;
  border-radius: 26px; background: rgba(0,15,30,.72);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(143,198,255,.16); box-shadow: 0 -6px 24px rgba(0,0,0,.28), var(--sr-shadow-lg);
  animation: waFloatIn .5s var(--sr-ease) .3s both;
}
@media (max-width: 760px) { .app-tabbar { display: flex; } }
.app-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: rgba(245,247,250,.6); font-size: .64rem; font-weight: 600; letter-spacing: .2px;
  padding: 6px 4px; flex: 1; min-width: 0; background: none; border: none; font-family: inherit; cursor: pointer;
  transition: color .2s var(--sr-ease);
}
.app-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.app-tab svg { width: 22px; height: 22px; }
.app-tab.is-active { color: var(--sr-cyan); }
.app-tab.is-active svg { filter: drop-shadow(0 0 6px rgba(0,229,255,.6)); }

.app-tab-center {
  position: relative; z-index: 2; flex: none; width: 58px; height: 58px; margin-top: -30px;
  border-radius: 50%; background: linear-gradient(150deg, var(--sr-blue), #0aa2ff);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 8px 24px rgba(0,102,255,.55); transition: transform .12s var(--sr-ease);
}
.app-tab-center:active { transform: scale(.94); }
.app-tab-center svg { width: 22px; height: 22px; }
.app-tab-center em {
  font-style: normal; font-size: .48rem; font-weight: 700; letter-spacing: 0; margin-top: 2px;
  white-space: nowrap; max-width: 60px; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.app-tab-center::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, transparent, var(--sr-cyan), transparent 45%);
  animation: appTabSpin 3s linear infinite;
}
@keyframes appTabSpin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .app-tab-center::before { animation: none; } }

.app-more-sheet {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  position: fixed; inset: auto 0 0 0; z-index: 160;
  background: var(--sr-navy); padding: 28px var(--sr-gutter) calc(var(--sr-space-8) + 78px);
  border-radius: 22px 22px 0 0; box-shadow: var(--sr-shadow-lg);
  max-height: calc(100vh - var(--sr-header-h) - 20px); overflow-y: auto;
  transform: translateY(100%); transition: transform .4s var(--sr-ease);
}
.app-more-sheet.show { transform: translateY(0); }
.app-more-title { font-family: var(--sr-font-mono); font-size: .75rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(0,229,255,.8); margin-bottom: var(--sr-space-2); }
.app-more-sheet a {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 15px 2px; font-family: var(--sr-font-head); font-weight: 500; font-size: 1.05rem;
  color: rgba(245,247,250,.88); border-bottom: 1px solid rgba(255,255,255,.1);
}
.app-more-sheet a:hover { color: #fff; }
.app-more-sheet a .arrow-ico { color: var(--sr-cyan); }
@media (min-width: 761px) { .app-more-sheet { display: none; } }

/* ---------- 29.c Footer — oculto en móvil ----------
   La Tab Bar + la página "Acerca de la App" (/aboutapp) cubren esa
   información en la experiencia app; el footer tradicional solo tiene
   sentido en escritorio. */
@media (max-width: 760px) { .site-footer { display: none; } }

/* Con el footer oculto, la última sección de <main> (normalmente un CTA
   con botones) queda pegada al borde inferior real del viewport — pero
   la Tab Bar flota fija encima (bottom:14px + 64px de alto ≈ 78px) y
   tapaba esos botones. Se le da a esa sección el aire de sobra que le
   falta para despejar la barra. */
@media (max-width: 760px) { main > section:last-of-type { padding-bottom: 176px; } }

/* ---------- 29.d Página "Acerca de la App" ---------- */
.about-app-card { max-width: 480px; margin-inline: auto; }
.about-app-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sr-space-4) 2px; border-bottom: 1px solid var(--sr-border); font-size: .95rem; color: var(--sr-slate); }
.about-app-row:last-child { border-bottom: none; }
.about-app-row span:last-child { color: var(--sr-navy); font-family: var(--sr-font-mono); font-weight: 600; font-size: .92rem; }

/* ---------- 31. Home — hero vivo (motivo de marca + titular rotativo) ---------- */
.hero-motif-bg { position: absolute; z-index: 0; pointer-events: none; opacity: .16; }
.hero-motif-bg--a { top: -70px; right: -90px; }
.hero-motif-bg--b { bottom: -50px; left: -80px; opacity: .10; }
.hero-motif-solo { display: inline-block; margin-bottom: var(--sr-space-6); position: relative; z-index: 1; }
.flip-mask { position: relative; display: inline-block; height: 1.15em; overflow: hidden; vertical-align: bottom; }
.flip-mask .flip-ghost { visibility: hidden; white-space: nowrap; }
.flip-word {
  position: absolute; left: 0; top: 0; width: 100%; white-space: nowrap;
  background: linear-gradient(100deg, #fff 20%, var(--sr-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(105%); opacity: 0; transition: transform .6s var(--sr-ease), opacity .5s var(--sr-ease);
}
.flip-word.is-cur { transform: translateY(0); opacity: 1; }
.flip-word.is-prev { transform: translateY(-105%); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .flip-word { transition: opacity .3s; transform: none !important; } }

/* Diagnóstico IA embebido en el hero */
.check-panel {
  margin-top: var(--sr-space-4); background: rgba(255,255,255,.06); border: 1px solid rgba(0,229,255,.24);
  border-radius: var(--sr-radius-lg); padding: var(--sr-space-6); backdrop-filter: blur(10px); max-width: 420px;
  animation: panelIn .45s var(--sr-ease) both; position: relative; z-index: 1;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.check-q { font-family: var(--sr-font-head); font-weight: 600; font-size: .98rem; color: #fff; margin-bottom: var(--sr-space-3); }
.check-panel .quiz-chip { padding: 10px 16px; font-size: .85rem; }
.check-result { text-align: center; }
.result-num { font-family: var(--sr-font-mono); display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: var(--sr-space-4); }
.result-num b { font-size: 2.6rem; color: var(--sr-cyan); font-weight: 700; text-shadow: 0 0 20px rgba(0,229,255,.5); }
.result-pre, .result-post { font-size: .82rem; color: rgba(245,247,250,.75); }
.check-again { display: block; margin: var(--sr-space-3) auto 0; font-size: .78rem; color: rgba(245,247,250,.55); text-decoration: underline; background: none; border: none; cursor: pointer; font-family: inherit; }
.check-again:hover { color: #fff; }

/* ---------- 32. Home — problema diegético (pila de mensajes → checklist) ---------- */
.sec-problem-app { background: linear-gradient(180deg, var(--sr-navy), #04101f); position: relative; }
.ba-diegetic { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sr-space-3); align-items: center; margin-top: var(--sr-space-8); }
.ba-side { position: relative; }
.ba-tag { font-family: var(--sr-font-mono); font-size: .68rem; letter-spacing: 1px; text-transform: uppercase; color: var(--sr-error); margin-bottom: var(--sr-space-3); }
.ba-tag-ok { color: var(--sr-success); }
.ba-pile { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ba-msg {
  display: flex; align-items: center; gap: 7px; background: rgba(255,59,92,.08); border: 1px solid rgba(255,59,92,.2);
  border-radius: 10px; padding: 8px 9px; transform: rotate(calc((var(--i) - 2.5) * 1.4deg));
  transition: transform .6s var(--sr-ease);
}
.reveal.in .ba-msg { transform: rotate(0); }
.ba-msg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sr-error); flex: none; }
.ba-msg-line { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); }
.ba-msg time { font-family: var(--sr-font-mono); font-size: .62rem; color: #8aa0b8; }
.ba-badge-unread {
  position: absolute; top: -10px; right: -6px; background: var(--sr-error); color: #fff; font-family: var(--sr-font-mono);
  font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; box-shadow: 0 4px 12px rgba(255,59,92,.5);
  transition: opacity .4s var(--sr-ease), transform .4s var(--sr-ease);
}
.reveal.in .ba-badge-unread { opacity: 0; transform: scale(.4); }
.ba-arrow { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ba-arrow i { width: 6px; height: 6px; border-right: 2px solid var(--sr-cyan); border-bottom: 2px solid var(--sr-cyan); transform: rotate(-45deg); opacity: .3; animation: baFlowDown 1.4s var(--sr-ease) infinite; display: block; }
.ba-arrow i:nth-child(2) { animation-delay: .18s; } .ba-arrow i:nth-child(3) { animation-delay: .36s; }
@keyframes baFlowDown { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.ba-stack-ok { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.ba-row-ok { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(10px); transition: all .5s var(--sr-ease); }
.reveal.in .ba-row-ok:nth-child(1) { transition-delay: .25s; }
.reveal.in .ba-row-ok:nth-child(2) { transition-delay: .39s; }
.reveal.in .ba-row-ok:nth-child(3) { transition-delay: .53s; }
.reveal.in .ba-row-ok { opacity: 1; transform: translateY(0); }
.ba-check { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--sr-success); color: #03121e; font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.ba-row-line { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(0,217,163,.6), rgba(0,229,255,.3)); }
.ba-ok-core { margin-top: 6px; height: 3px; border-radius: 3px; background: rgba(0,229,255,.2); overflow: hidden; }
.ba-ok-core span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sr-blue), var(--sr-cyan)); transition: width .8s .6s var(--sr-ease); }
.reveal.in .ba-ok-core span { width: 100%; }
@media (max-width: 640px) { .ba-diegetic { gap: var(--sr-space-2); } .ba-tag { font-size: .6rem; } }
@media (prefers-reduced-motion: reduce) {
  .ba-msg, .ba-badge-unread, .ba-row-ok, .ba-ok-core span { transition: none !important; }
}

/* ---------- 32.b Home — problema/secciones oscuras (texto legible) ----------
   Estas secciones no usan .section--dark (tienen su propio degradado),
   así que repiten aquí el mismo contraste texto-sobre-navy. */
.sec-problem-app h2, .sec-how-app h2,
.sec-problem-app h4, .sec-how-app h4 { color: #fff; }
.sec-problem-app p, .sec-how-app p { color: rgba(245,247,250,.78); }
.sec-problem-app .eyebrow, .sec-how-app .eyebrow { color: var(--sr-cyan); }

/* ---------- 33. Deck oscuro — variante para Home ---------- */
.deck-section--dark { background: linear-gradient(180deg, #04101f, var(--sr-navy)); }
.deck-section--dark .deck-head .eyebrow { color: var(--sr-cyan); }
.deck-section--dark .deck-head h2 { color: #fff; }
.deck-section--dark .deck-card__body { background: rgba(255,255,255,.05); border-color: rgba(143,198,255,.18); }
.deck-section--dark .deck-card.is-active .deck-card__body, .deck-section--dark .deck-card:hover .deck-card__body { border-color: rgba(0,229,255,.35); }
.deck-section--dark .deck-card__title { color: #fff; }
.deck-section--dark .deck-card p { color: rgba(245,247,250,.75); }
.deck-section--dark .deck-arrow { background: rgba(255,255,255,.08); border-color: rgba(143,198,255,.22); color: #fff; }
.deck-section--dark .deck-arrow:hover { background: rgba(0,229,255,.14); color: var(--sr-cyan); }
.deck-section--dark .deck-dot { background: rgba(143,198,255,.25); }
.deck-section--dark .deck-dot.is-active { background: var(--sr-cyan); box-shadow: 0 0 8px rgba(0,229,255,.5); }

/* ---------- 34. Home — línea de tiempo auto-dibujada ---------- */
.sec-how-app { background: linear-gradient(180deg, #04101f, var(--sr-navy)); }
.app-timeline { position: relative; margin-top: var(--sr-space-8); padding-left: var(--sr-space-2); }
.app-tl-track { position: absolute; left: 19px; top: 8px; bottom: 20px; width: 2px; background: rgba(143,198,255,.18); border-radius: 2px; }
.app-tl-fill { width: 100%; background: linear-gradient(180deg, var(--sr-blue), var(--sr-cyan)); border-radius: 2px; box-shadow: 0 0 12px rgba(0,229,255,.6); height: 0%; }
.app-tl-step { position: relative; display: flex; gap: var(--sr-space-4); padding-bottom: var(--sr-space-8); }
.app-tl-step:last-child { padding-bottom: 0; }
.app-tl-node {
  position: relative; z-index: 2; width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--sr-navy-600); border: 2px solid rgba(143,198,255,.3); display: grid; place-items: center;
  font-family: var(--sr-font-mono); font-weight: 700; color: #8fb4d8; transition: all .4s var(--sr-ease);
}
.app-tl-step.is-on .app-tl-node { border-color: var(--sr-cyan); color: #fff; background: var(--sr-blue); box-shadow: 0 0 20px rgba(0,229,255,.5); transform: scale(1.05); }
.app-tl-body { padding-top: 5px; opacity: .4; transition: opacity .4s var(--sr-ease); }
.app-tl-step.is-on .app-tl-body { opacity: 1; }
.app-tl-body h4 { color: #fff; font-size: 1.05rem; margin-bottom: var(--sr-space-2); }
.app-tl-body p { font-size: .9rem; color: rgba(245,247,250,.75); margin: 0; }

/* ---------- 35. Home — cifra única de prueba ---------- */
.sec-proof-app { text-align: center; background: radial-gradient(120% 80% at 50% 40%, #0a2c4d, #04101f); overflow: hidden; position: relative; }
.proof-fig { font-family: var(--sr-font-mono); display: flex; flex-direction: column; align-items: center; line-height: 1; margin: var(--sr-space-2) 0 var(--sr-space-4); position: relative; z-index: 1; }
.proof-pre { font-family: var(--sr-font-body); font-size: .9rem; color: #9fc6ff; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--sr-space-2); }
.proof-num { font-size: clamp(4rem, 14vw, 6.5rem); font-weight: 700; background: linear-gradient(180deg, #fff, var(--sr-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 60px rgba(0,229,255,.3); }
.proof-unit { font-family: var(--sr-font-head); font-size: 1.1rem; color: #dce9ff; letter-spacing: 1px; }
.proof-post-app { font-size: 1rem; color: #c3d4e8; max-width: 30ch; margin: 0 auto; position: relative; z-index: 1; }
.proof-note-app { font-family: var(--sr-font-mono); font-size: .68rem; color: #6f8bab; margin-top: var(--sr-space-4); max-width: 34ch; margin-inline: auto; position: relative; z-index: 1; }

/* ---------- 36. Home — CTA final con motivo que se reensambla ---------- */
.final-motif-wrap { display: flex; justify-content: center; margin-bottom: var(--sr-space-4); min-height: 100px; }
.final-motif-wrap [data-variant-mark] { opacity: 0; transform: scale(.55) rotate(-8deg); }
.reveal.in .final-motif-wrap [data-variant-mark] { animation: motifAssemble 1.1s var(--sr-ease) both; }
@keyframes motifAssemble { 0% { opacity: 0; transform: scale(.55) rotate(-8deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .final-motif-wrap [data-variant-mark] { opacity: 1; transform: none; animation: none; } }

/* ---------- 37. Diagnóstico de IA — cuestionario completo ----------
   Extiende el shell del quiz corto (.quiz-shell/.quiz-step/.quiz-nav/
   .quiz-chip, ya usados por el mini-quiz de arriba) con los tipos de
   pregunta que el cuestionario largo necesita: textarea/select oscuros,
   lista de opción única, escala 1–5, nota de archivo adjunto y las
   pantallas de registro/verificación/resumen/confirmación. */
.quiz-fields .field { margin-bottom: 0; } /* el gap del grid ya separa los campos — evita el doble espacio */
.quiz-fields .field textarea, .quiz-fields .field select {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff;
}
.quiz-fields .field textarea::placeholder { color: rgba(245,247,250,.4); }
.quiz-fields .field select option { color: #0b1220; }

.diag-section-badge {
  display: flex; align-items: center; gap: 8px; font-family: var(--sr-font-mono);
  font-size: .7rem; letter-spacing: .6px; color: rgba(0,229,255,.85);
  background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.25);
  padding: 6px 14px; border-radius: var(--sr-radius-pill); margin: 0 auto var(--sr-space-4); width: max-content;
}

.diag-options { display: grid; gap: var(--sr-space-3); max-width: 520px; margin-inline: auto; }
.diag-option {
  display: flex; align-items: center; gap: var(--sr-space-3); text-align: left; width: 100%;
  padding: 14px 18px; border-radius: var(--sr-radius-lg); border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04); color: #fff; font-family: inherit; font-size: .95rem; cursor: pointer;
  transition: border-color .2s var(--sr-ease), background .2s var(--sr-ease);
}
.diag-option:hover { border-color: rgba(0,229,255,.5); }
.diag-option.is-selected { background: var(--sr-blue); border-color: var(--sr-blue); box-shadow: 0 6px 18px rgba(0,102,255,.4); }
.diag-option__dot { width: 18px; height: 18px; flex: none; border-radius: var(--sr-radius-pill); border: 2px solid rgba(255,255,255,.4); position: relative; }
.diag-option.is-selected .diag-option__dot { border-color: #fff; }
.diag-option.is-selected .diag-option__dot::after { content:""; position:absolute; inset:3px; border-radius: var(--sr-radius-pill); background:#fff; }

.diag-scale { display: flex; justify-content: center; gap: var(--sr-space-3); flex-wrap: wrap; }
.diag-scale__btn {
  width: 52px; height: 52px; border-radius: var(--sr-radius-pill); border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05); color: #fff; font-family: var(--sr-font-mono); font-size: 1.1rem; font-weight: 700;
  cursor: pointer; transition: all .2s var(--sr-ease);
}
.diag-scale__btn:hover { border-color: rgba(0,229,255,.5); }
.diag-scale__btn.is-selected { background: linear-gradient(120deg, var(--sr-blue), var(--sr-cyan)); border-color: transparent; box-shadow: 0 6px 18px rgba(0,102,255,.4); }
.diag-scale-labels { display: flex; justify-content: space-between; max-width: 380px; margin: var(--sr-space-3) auto 0; font-size: .75rem; color: rgba(245,247,250,.55); }

.diag-file-note {
  max-width: 480px; margin: 0 auto; text-align: center; padding: var(--sr-space-5);
  border: 1px dashed rgba(255,255,255,.25); border-radius: var(--sr-radius-lg); background: rgba(255,255,255,.03);
}
.diag-file-note input[type="file"] { display: block; margin: var(--sr-space-3) auto 0; color: rgba(245,247,250,.8); font-size: .85rem; max-width: 100%; }
.diag-file-note p { color: rgba(245,247,250,.6); font-size: .82rem; margin-top: var(--sr-space-2); }

.diag-skip { text-align: center; margin-top: var(--sr-space-4); }
.diag-skip button { background: none; border: none; color: rgba(245,247,250,.5); font-size: .85rem; text-decoration: underline; cursor: pointer; font-family: inherit; }
.diag-skip button:hover { color: #fff; }

/* Registro / verificación / inicio de sesión */
.diag-badge { display: flex; justify-content: center; margin-bottom: var(--sr-space-5); }
.diag-badge svg { filter: drop-shadow(0 0 18px rgba(0,229,255,.35)); }

.diag-auth-tabs { display: flex; justify-content: center; gap: var(--sr-space-2); margin-bottom: var(--sr-space-6); }
.diag-auth-tabs button {
  background: none; border: 1px solid rgba(255,255,255,.18); color: rgba(245,247,250,.65);
  padding: 8px 18px; border-radius: var(--sr-radius-pill); font-family: inherit; font-size: .85rem; cursor: pointer; transition: all .2s var(--sr-ease);
}
.diag-auth-tabs button.is-active { background: #fff; color: var(--sr-navy); border-color: #fff; }

/* Selector de lada + número: un control propio (no <select> nativo — no
   se le pueden poner banderas a las opciones de un select, y su cuadro
   de foco no se puede alinear con el del resto del formulario), misma
   altura que el input de al lado. Mismo patrón que .header-lang. */
.diag-phone-row { display: flex; gap: var(--sr-space-2); align-items: stretch; }
.diag-phone-country { position: relative; flex: none; width: 108px; }
.diag-phone-country__btn {
  display: flex; align-items: center; gap: 7px; width: 100%; height: 100%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: var(--sr-radius-sm);
  padding: 12px 10px; color: #fff; font: inherit; font-size: 1rem; cursor: pointer;
  transition: border-color .2s var(--sr-ease), box-shadow .2s var(--sr-ease);
}
.diag-phone-country__btn:focus-visible { outline: none; border-color: var(--sr-blue); box-shadow: 0 0 0 3px var(--sr-blue-50); }
.diag-phone-country.is-open .diag-phone-country__btn { border-color: var(--sr-blue); box-shadow: 0 0 0 3px var(--sr-blue-50); }
.diag-phone-country__btn .flag { width: 20px; height: 14px; flex: none; border-radius: 2px; }
.diag-phone-country__chevron { width: 12px; height: 12px; margin-left: auto; flex: none; transition: transform .2s var(--sr-ease); }
.diag-phone-country.is-open .diag-phone-country__chevron { transform: rotate(180deg); }

.diag-phone-country__panel {
  position: absolute; top: calc(100% + 8px); left: 0; width: max-content; z-index: 20;
  max-height: 320px; overflow-y: auto;
  background: #0B2038; border: 1px solid rgba(255,255,255,.16); border-radius: var(--sr-radius-md);
  box-shadow: var(--sr-shadow-lg); padding: var(--sr-space-2); opacity: 0; pointer-events: none;
  transform: translateY(-6px); transition: opacity .2s var(--sr-ease), transform .2s var(--sr-ease);
}
.diag-phone-country.is-open .diag-phone-country__panel { opacity: 1; pointer-events: auto; transform: translateY(0); }
.diag-phone-country__row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px;
  border-radius: var(--sr-radius-sm); background: none; border: none; color: #fff;
  font: inherit; font-size: .92rem; text-align: left; cursor: pointer; white-space: nowrap;
}
.diag-phone-country__row:hover { background: rgba(255,255,255,.08); }
.diag-phone-country__row .flag { width: 20px; height: 14px; flex: none; border-radius: 2px; }
.diag-phone-country__row .flag--emoji { width: auto; height: auto; font-size: 1.05rem; line-height: 1; border-radius: 0; }
.diag-phone-country__divider { height: 1px; background: rgba(255,255,255,.14); margin: 6px 4px; }
.diag-phone-country__btn .flag--emoji { width: auto; height: auto; font-size: 1.05rem; line-height: 1; }

.diag-phone-row input { flex: 1; min-width: 0; }

/* ---------- 24.b Selector de país para WhatsApp en tarjeta clara ----------
   Reutiliza EXACTAMENTE las clases .diag-phone-country (arriba, ya probadas
   en /aicheck) — el modificador --light solo cambia colores, nunca layout
   ni posicionamiento, para no arriesgar una segunda implementación paralela. */
.diag-phone-country--light .diag-phone-country__btn {
  background: var(--sr-mist); border-color: var(--sr-border); color: var(--sr-navy);
}
.diag-phone-country--light.is-open .diag-phone-country__btn { border-color: var(--sr-blue); box-shadow: 0 0 0 3px var(--sr-blue-50); }
.diag-phone-country--light .diag-phone-country__panel { background: #fff; border-color: var(--sr-border); }
.diag-phone-country--light .diag-phone-country__row { color: var(--sr-navy); }
.diag-phone-country--light .diag-phone-country__row:hover { background: var(--sr-mist); }
.diag-phone-country--light .diag-phone-country__divider { background: var(--sr-border); }

.diag-turnstile { display: flex; justify-content: center; min-height: 65px; }
.diag-form-error { color: #ff8a8a; font-size: .85rem; text-align: center; margin-top: var(--sr-space-3); min-height: 1.2em; }
.diag-form-note { color: rgba(245,247,250,.55); font-size: .82rem; text-align: center; margin-top: var(--sr-space-4); }
.diag-form-note a, .diag-resend { color: var(--sr-cyan); cursor: pointer; text-decoration: underline; background: none; border: none; font: inherit; padding: 0; }
.diag-code-input { display: flex; gap: var(--sr-space-2); justify-content: center; }
.diag-code-input input {
  width: 260px; max-width: 100%; height: 64px; text-align: center; letter-spacing: .2rem;
  font-size: 1.5rem; font-family: var(--sr-font-mono); padding: 0 var(--sr-space-3);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: var(--sr-radius-md); color: #fff;
}
.diag-code-input input::placeholder { letter-spacing: .2rem; color: rgba(245,247,250,.3); }
.diag-code-input input:focus { outline: none; border-color: var(--sr-cyan); box-shadow: 0 0 0 3px rgba(0,229,255,.2); }

/* CTA principal de registro/login/verificación: degradado fijo (sin la
   animación de .cta-stellar, que es exclusiva del cierre del home) */
.diag-auth-cta {
  width: 100%; margin-top: var(--sr-space-2); padding: 16px 26px; border: none;
  background: linear-gradient(90deg, var(--sr-blue), var(--sr-cyan)); color: #fff; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,102,255,.35);
}
.diag-auth-cta:hover { color: #fff; box-shadow: 0 10px 30px rgba(0,229,255,.45); }

/* Resumen generado antes de confirmar */
.diag-summary { max-width: 640px; margin-inline: auto; }
.diag-summary__intro { color: rgba(245,247,250,.75); text-align: center; margin-bottom: var(--sr-space-6); }
.diag-summary-list { display: grid; gap: var(--sr-space-3); margin-bottom: var(--sr-space-8); max-height: 46vh; overflow-y: auto; padding-right: var(--sr-space-2); }
.diag-summary-item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--sr-radius-lg); padding: var(--sr-space-5); }
.diag-summary-item h4 { color: var(--sr-cyan); font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: var(--sr-space-2); }
.diag-summary-item p { color: rgba(245,247,250,.9); margin: 0; font-size: .92rem; white-space: pre-wrap; }

/* Confirmación final */
.diag-done { text-align: center; }
.diag-done__icon { width: 84px; height: 84px; border-radius: var(--sr-radius-pill); background: linear-gradient(120deg, var(--sr-blue), var(--sr-cyan)); display: grid; place-items: center; margin: 0 auto var(--sr-space-6); font-size: 2.2rem; box-shadow: 0 10px 40px rgba(0,102,255,.4); }
.diag-done p { color: rgba(245,247,250,.8); max-width: 44ch; margin: 0 auto var(--sr-space-8); }

@media (max-width: 480px) {
  .diag-code-input input { width: 100%; height: 56px; font-size: 1.3rem; }
}

/* ---------- 38. Precios — tarjetas de planes ----------
   6 módulos (Web Inteligente / WebApp / App Oficial / Automatización /
   Integración al SAT / E-Commerce), todos paquetes de proyecto único
   con precio "Desde" — sin toggle de acompañamiento mensual. */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sr-space-6); align-items: stretch; }
@media (max-width: 1080px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }

.pricing-card {
  background: #fff; border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg);
  padding: var(--sr-space-8) var(--sr-space-6); box-shadow: var(--sr-shadow-sm);
  display: flex; flex-direction: column;
}
.pricing-card__name { font-size: 1.25rem; margin-bottom: var(--sr-space-2); }
.pricing-card__tagline { font-size: .88rem; color: var(--sr-slate); font-style: italic; margin-bottom: var(--sr-space-6); min-height: 2.6em; }
.pricing-card__price-row { display: flex; align-items: baseline; gap: 6px; }
.pricing-card__price-label { font-size: .8rem; color: var(--sr-slate); }
.pricing-card__price-amount { font-family: var(--sr-font-head); font-size: 1.9rem; font-weight: 700; color: var(--sr-navy); white-space: nowrap; }
.pricing-card__price-unit { font-size: .78rem; color: var(--sr-slate); margin-bottom: var(--sr-space-6); }
.pricing-card__for { font-size: .86rem; color: var(--sr-slate); margin-bottom: var(--sr-space-4); padding-bottom: var(--sr-space-4); border-bottom: 1px solid var(--sr-border); }
.pricing-card__features { list-style: none; padding: 0; margin: 0 0 var(--sr-space-8); flex: 1; display: grid; gap: 11px; }
.pricing-card__features li { display: flex; align-items: flex-start; gap: 8px; font-size: .87rem; color: var(--sr-navy); line-height: 1.35; }
.pricing-card__features svg { width: 17px; height: 17px; flex: none; color: var(--sr-success); margin-top: 2px; }
.pricing-card__cta { width: 100%; text-align: center; }
.pricing-card__link { display: block; text-align: center; margin-top: var(--sr-space-3); font-size: .84rem; color: var(--sr-blue); text-decoration: underline; }

/* ---------- 21. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}