/* ============================================================================
   NS NUTRITION · Página de adquisición · Sistema de diseño (Bloque 3 del brief)
   Vanilla, mobile-first, un solo acento (celeste eléctrico) exclusivo del CTA.
   ============================================================================ */

@font-face {
  font-family: 'NSDisplay';
  src: url('../fonts/display.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* BASE */
  --bg-void: #060E15;
  --bg-surface: #0E2D42;
  --bg-elevated: #123954;
  --bg-paper: #F5F0E8;

  /* ACENTO — uno solo, exclusivo del CTA primario y datos de resultado */
  --accent: #4FC3F7;
  --accent-glow: rgba(79, 195, 247, 0.28);
  --accent-deep: #2980B9;

  /* SOPORTE */
  --sky-soft: #AED6F1;
  --text-primary: #F2F6F9;
  --text-secondary: rgba(242, 246, 249, 0.62);
  --text-muted: rgba(242, 246, 249, 0.34);
  --border: rgba(174, 214, 241, 0.10);
  --border-hover: rgba(174, 214, 241, 0.22);
  --negative: rgba(242, 246, 249, 0.22);
  --red: #ff5a5a; /* solo para la sección "lo que no vas a encontrar acá" */
  --red-glow: rgba(255, 90, 90, 0.5);

  /* TIPOGRAFÍA */
  --font-display: 'NSDisplay', 'Archivo Expanded', 'Anton', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', monospace;

  --text-hero: clamp(2.75rem, 11vw, 7rem);
  --text-h2: clamp(2rem, 7vw, 4rem);
  --text-h3: clamp(1.35rem, 4.5vw, 2rem);
  --text-body: clamp(1rem, 4vw, 1.125rem);
  --text-label: 0.75rem;

  /* ESPACIADO */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem;
  --space-16: 6rem; --space-24: 9rem;

  /* RADIOS */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px;

  /* MOVIMIENTO */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 620ms;

  --nav-h: 68px;
  --sticky-h: 64px;
  --gutter: clamp(20px, 5.5vw, 64px);
  --maxw: 1240px;
}

* { margin: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-void);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 0;
}
@media (max-width: 900px) { body { padding-bottom: var(--sticky-h); } }

img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: 16px; top: -80px; z-index: 300;
  background: var(--accent); color: var(--bg-void); padding: 10px 16px;
  border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 12px;
}
.skip:focus { top: 12px; }

/* ---- CONTENEDOR / SECCIÓN ---- */
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(56px, 12vw, 120px); overflow-x: clip; }
.section--void { background: var(--bg-void); }
.section--surface { background: var(--bg-surface); }
.section--paper { background: var(--bg-paper); color: var(--bg-surface); }

/* ---- GRANO GLOBAL + CRUCES DE ENCUADRE ---- */
.fx-grain {
  position: fixed; inset: 0; z-index: 500; pointer-events: none; opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx-cross { position: fixed; z-index: 400; pointer-events: none; color: var(--accent); opacity: 0.30; font-family: var(--font-mono); font-size: 14px; line-height: 1; }
.fx-cross--tl { top: 14px; left: 14px; }
.fx-cross--tr { top: 14px; right: 14px; }
.fx-cross--bl { bottom: 14px; left: 14px; }
.fx-cross--br { bottom: 14px; right: 14px; }
@media (max-width: 640px) { .fx-cross { font-size: 11px; } }

/* ---- ETIQUETA DE REGISTRO (elemento firma) ---- */
.registro { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-6); }
.registro__num { color: var(--accent); flex: 0 0 auto; }
.registro__line { flex: 1 1 auto; height: 1px; background: var(--border); }
.registro__label { flex: 0 0 auto; color: var(--text-secondary); }
@media (max-width: 480px) { .registro { flex-wrap: wrap; } .registro__label { flex-basis: 100%; } }

/* ---- TIPOGRAFÍA ---- */
.display { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 0.94; letter-spacing: 0.005em; }
.h2 { font-size: var(--text-h2); }
.h1-hero { font-size: var(--text-hero); }
.accent { color: var(--accent); }
.mono { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.lead { font-size: clamp(1.05rem, 4.5vw, 1.3rem); color: var(--text-secondary); line-height: 1.5; max-width: 46ch; }

/* ---- BOTONES ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: var(--radius-full); font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; text-align: center; border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast), background var(--dur-fast); white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: #06141d; box-shadow: 0 0 0 1px var(--accent-deep), 0 12px 48px var(--accent-glow); }
.btn--primary.is-breathing { animation: breathe 4s ease-in-out infinite; }
@media (max-width: 900px) { .btn--primary.is-breathing { animation: none; } }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 1px var(--accent-deep), 0 12px 48px var(--accent-glow); } 50% { box-shadow: 0 0 0 1px var(--accent-deep), 0 16px 64px rgba(79,195,247,0.42); } }
.btn--ghost { border-color: var(--border-hover); color: var(--text-primary); }
.btn--ghost:hover { border-color: var(--accent); }
.btn--faint { border-color: var(--border); color: var(--text-secondary); }
.btn--block { width: 100%; }
@media (prefers-reduced-motion: reduce) { .btn--primary.is-breathing { animation: none; } }

/* ---- REVEAL (una orquestación por sección) ---- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* ============================ NAV · DYNAMIC ISLAND ============================ */
.nav { position: fixed; inset: 12px 0 auto 0; z-index: 200; display: flex; justify-content: center; padding-inline: var(--gutter); }
.nav__island {
  width: min(100%, var(--maxw));
  background: rgba(6, 14, 21, 0.72);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 26px;
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.nav__island.is-open { border-color: var(--border-hover); box-shadow: 0 30px 70px -28px rgba(0,0,0,0.85); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 12px 9px 20px; }
.nav__logo { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: 0.02em; }
.nav__links { display: none; gap: 26px; font-size: 0.9rem; color: var(--text-secondary); }
.nav__links a:hover { color: var(--text-primary); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav .btn { min-height: 44px; padding: 0 20px; font-size: 0.9rem; }
/* toggle (solo mobile) */
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--radius-full); border: 1px solid var(--border-hover); flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; transition: border-color var(--dur-fast); }
.nav__toggle:hover { border-color: var(--accent); }
.nav__toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text-primary); transition: transform var(--dur-base) var(--ease-out); }
.nav__island.is-open .nav__toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__island.is-open .nav__toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
/* menú desplegable (morph de la island) */
.nav__menu { display: none; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.nav__island.is-open .nav__menu { grid-template-rows: 1fr; }
.nav__menu-inner { overflow: hidden; }
.nav__menu a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 20px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; color: var(--text-primary); border-top: 1px solid var(--border); }
.nav__menu a:active { background: rgba(79,195,247,0.08); }
.nav__menu-mono { font-family: var(--font-mono); font-weight: 400; font-size: 0.7rem; color: var(--accent); text-transform: none; }
@media (min-width: 900px) {
  .nav__island { border-radius: var(--radius-full); }
  .nav__links { display: flex; }
  .nav__toggle { display: none !important; }
  .nav__menu { display: none !important; }
}
@media (max-width: 899px) {
  .nav__toggle { display: flex; }
  .nav__menu { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .nav__menu, .nav__toggle span { transition: none; } }

/* ============================ HERO ============================ */
.hero { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--nav-h) + 28px); padding-bottom: var(--space-10); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: -10% 0 auto 0; height: 60vh; background: radial-gradient(60% 60% at 50% 0%, rgba(79,195,247,0.10), transparent 70%); pointer-events: none; }
.hero__grid { display: grid; gap: clamp(32px, 7vw, 64px); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero__eyebrow { margin-bottom: var(--space-4); }
.hero__title { margin-bottom: var(--space-5); }
.hero__title .line { display: block; }
.hero__ctas { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-6); max-width: 420px; }
@media (min-width: 520px) { .hero__ctas { flex-direction: row; flex-wrap: wrap; max-width: none; } .hero__ctas .btn { flex: 0 0 auto; } }
.hero__note { margin-top: var(--space-5); }

/* Mockup teléfono con chat de WhatsApp */
.phone { width: min(320px, 78vw); margin-inline: auto; background: #0b0f13; border: 1px solid rgba(255,255,255,0.14); border-radius: 34px; padding: 12px; box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9); }
.phone__screen { background: #0d1418; border-radius: 24px; overflow: hidden; }
.phone__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(18,57,84,0.5); border-bottom: 1px solid var(--border); }
.phone__ava { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, var(--accent), var(--accent-deep)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #06141d; }
.phone__who { font-size: 0.85rem; font-weight: 700; }
.phone__who span { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; }
.chat { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; min-height: 260px; }
/* Teléfono multivista · tabs + vistas conmutables (dinámico e interactivo) */
.phone__tabs { display: flex; gap: 4px; padding: 8px 10px; background: rgba(18,57,84,0.32); border-bottom: 1px solid var(--border); }
.phone__tab { flex: 1; padding: 7px 4px; border-radius: var(--radius-full); font-family: var(--font-body); font-weight: 700; font-size: 0.64rem; color: var(--text-secondary); transition: background var(--dur-fast), color var(--dur-fast); }
.phone__tab.is-on { background: var(--accent); color: #06141d; }
.phone__views { position: relative; }
.phone__view { display: none; padding: 14px; min-height: 300px; }
.phone__view.is-on { display: block; animation: pvIn 340ms var(--ease-out); }
@keyframes pvIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .phone__view.is-on { animation: none; } }
.pv__title { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.pv__row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.84rem; }
.pv__row:last-of-type { border-bottom: 0; }
.pv__row > span:nth-child(2) { flex: 1; color: var(--text-secondary); text-align: left; }
.pv__row b { font-family: var(--font-mono); font-weight: 700; font-size: 0.76rem; color: var(--text-primary); }
.pv__row b.hot { color: var(--accent); }
.pv__chk { width: 19px; height: 19px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 10px; border: 1px solid var(--border-hover); color: var(--text-muted); }
.pv__chk.on { background: var(--accent); border-color: var(--accent); color: #06141d; font-weight: 900; }
.pv__bar { margin-top: 16px; }
.pv__bar-k { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.pv__track { margin-top: 6px; height: 6px; border-radius: var(--radius-full); background: rgba(255,255,255,0.08); overflow: hidden; }
.pv__track > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.bubble { max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: 0.86rem; line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.bubble.is-shown { opacity: 1; transform: none; }
.bubble--them { align-self: flex-start; background: #1a2b34; border-bottom-left-radius: 5px; }
.bubble--nico { align-self: flex-end; background: var(--bg-elevated); border: 1px solid var(--border-hover); border-bottom-right-radius: 5px; }
.bubble--nico b { color: var(--accent); font-weight: 700; }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 11px 14px; background: #1a2b34; border-radius: 16px; opacity: 0; transition: opacity 200ms; }
.typing.is-shown { opacity: 1; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typedot 1s infinite; }
.typing span:nth-child(2) { animation-delay: 0.15s; } .typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typedot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.phone__foot { margin-top: var(--space-4); text-align: center; }

/* Ghost typography */
.ghost { position: absolute; z-index: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(8rem, 30vw, 22rem); line-height: 0.8; color: rgba(255,255,255,0.028); pointer-events: none; white-space: nowrap; letter-spacing: -0.02em; }

/* ============================ STATS BAR ============================ */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; margin-top: var(--space-8); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 9vw, 4.2rem); color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { margin-top: 8px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); line-height: 1.4; }

/* ============================ SELECTOR DE PERFIL ============================ */
.picker { display: grid; gap: 14px; margin-top: var(--space-6); }
@media (min-width: 860px) { .picker { grid-template-columns: repeat(3, 1fr); } }
.pick { text-align: left; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), opacity var(--dur-base); position: relative; }
.pick:hover { border-color: var(--border-hover); }
.pick__t { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.15rem; margin-bottom: 8px; padding-right: 30px; }
.pick__d { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.45; }
.pick__check { position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; }
.pick__check path { stroke: var(--accent); stroke-width: 2.4; fill: none; stroke-dasharray: 30; stroke-dashoffset: 30; }
.picker.has-choice .pick { opacity: 0.4; }
.pick.is-active { opacity: 1 !important; border-color: var(--accent); transform: translateY(-8px); box-shadow: 0 20px 50px -24px var(--accent-glow); }
.pick.is-active .pick__check path { stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--ease-out) 120ms; }
.diag { margin-top: var(--space-5); overflow: hidden; max-height: 0; opacity: 0; transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base); }
.diag.is-open { max-height: 340px; opacity: 1; }
.diag__inner { padding: var(--space-5); border-left: 2px solid var(--accent); background: var(--bg-elevated); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.diag__inner p { font-size: 1.05rem; line-height: 1.5; }
.diag__cta { margin-top: var(--space-4); }

/* ============================ PROBLEMA (tarjetas tachadas) ============================ */
.fails { display: grid; gap: 14px; margin-top: var(--space-6); }
@media (min-width: 760px) { .fails { grid-template-columns: repeat(2, 1fr); } }
.fail { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); position: relative; }
.fail__t { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; margin-bottom: 8px; position: relative; display: inline-block; }
.fail__strike { position: absolute; left: -4px; right: -4px; top: 52%; height: 10px; overflow: visible; }
.fail__strike path { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 240; }
.fail.is-in .fail__strike path { stroke-dashoffset: 0; transition: stroke-dashoffset 620ms var(--ease-out); }
.fail__d { font-size: 0.92rem; color: var(--text-secondary); }
.blk-close { margin-top: var(--space-6); font-size: clamp(1.1rem, 4.5vw, 1.5rem); font-weight: 700; }

/* ============================ PILARES ============================ */
.pillar { position: relative; padding-block: clamp(40px, 9vw, 80px); overflow: hidden; }
.pillar + .pillar { border-top: 1px solid var(--border); }
.pillar__grid { display: grid; gap: 28px; align-items: center; position: relative; z-index: 1; }
@media (min-width: 900px) { .pillar__grid { grid-template-columns: 1fr 1fr; } .pillar--flip .pillar__media { order: -1; } }
.pillar__kick { color: var(--accent); }
.pillar__t { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 6vw, 2.6rem); margin: 10px 0 14px; line-height: 1; }
.pillar__d { color: var(--text-secondary); max-width: 44ch; }

/* ============================ PROCESO (riel vertical) ============================ */
.proc { position: relative; margin-top: var(--space-8); padding-left: 40px; }
.proc__rail { position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--border); overflow: hidden; }
.proc__fill { position: absolute; inset: 0 0 auto 0; height: 0; background: var(--accent); transition: height 120ms linear; }
.proc__step { position: relative; padding-bottom: var(--space-8); }
.proc__step:last-child { padding-bottom: 0; }
.proc__dot { position: absolute; left: -34px; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-hover); background: var(--bg-void); transition: border-color var(--dur-base), background var(--dur-base); }
.proc__step.is-lit .proc__dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px var(--accent-glow); }
.proc__k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; }
.proc__t { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; margin: 6px 0 8px; }
.proc__d { color: var(--text-secondary); font-size: 0.95rem; max-width: 46ch; }

/* ============================ COMPARATIVA ============================ */
.cmp { margin-top: var(--space-8); }
.cmp__bajada { max-width: 60ch; color: var(--text-secondary); margin-bottom: var(--space-6); }
.cmp__table { display: none; }
@media (min-width: 900px) {
  .cmp__table { display: table; width: 100%; border-collapse: collapse; }
  .cmp__grid { display: none; }
  .cmp__table th, .cmp__table td { padding: 16px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.92rem; vertical-align: middle; }
  .cmp__table thead th { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); }
  .cmp__table tbody th { font-weight: 600; color: var(--text-primary); }
  .cmp__table td { color: var(--text-secondary); }
  .cmp__ns { background: var(--bg-elevated); }
  .cmp__table th.cmp__ns, .cmp__table td.cmp__ns { border-left: 1px solid var(--accent); border-right: 1px solid var(--accent); color: var(--text-primary); }
  .cmp__table thead th.cmp__ns { border-top: 1px solid var(--accent); color: var(--accent); }
  .cmp__table tbody tr:last-child td.cmp__ns { border-bottom: 1px solid var(--accent); }
}
/* mobile: cuadrícula NS vs el resto (ambos lados por fila, columna NS enmarcada en cyan) */
.cmp__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card-surface); box-shadow: var(--card-shadow); }
.cmp__grid > span { display: flex; align-items: center; min-height: 46px; padding: 9px 8px; font-size: 0.72rem; line-height: 1.25; border-top: 1px solid var(--border); }
.cmp__grid > span:nth-child(-n+3) { border-top: 0; }
.cmp__gh { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); }
.cmp__gd { color: var(--text-muted); font-weight: 600; }
.cmp__gv { color: var(--text-primary); }
.cmp__gc--ns { background: rgba(79, 195, 247, 0.10); color: var(--text-primary); box-shadow: inset 1px 0 0 var(--accent), inset -1px 0 0 var(--accent); }
.cmp__gh.cmp__gc--ns { color: var(--accent); font-weight: 700; box-shadow: inset 1px 0 0 var(--accent), inset -1px 0 0 var(--accent), inset 0 1px 0 var(--accent); }
.cmp__grid > .cmp__gc--ns:nth-last-child(2) { box-shadow: inset 1px 0 0 var(--accent), inset -1px 0 0 var(--accent), inset 0 -1px 0 var(--accent); }
.cmp__grid .yes svg { width: 15px; height: 15px; }
.cmp__grid .no { font-size: 0.95rem; }
.yes { display: inline-flex; align-items: center; gap: 6px; color: var(--sky-soft); }
.yes svg { width: 18px; height: 18px; }
.yes svg path { stroke: var(--sky-soft); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.no { color: var(--negative); font-size: 1.1rem; }

/* ============================ PLANES ============================ */
.plans { display: grid; gap: 16px; margin-top: var(--space-8); }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-6); background: var(--bg-surface); display: flex; flex-direction: column; }
.plan--featured { border-color: var(--accent); box-shadow: var(--card-shadow), 0 0 72px -20px var(--accent-glow); }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .plan--featured { animation: planGlow 4s ease-in-out infinite; }
}
@keyframes planGlow {
  0%, 100% { box-shadow: var(--card-shadow), 0 0 60px -22px var(--accent-glow); }
  50% { box-shadow: var(--card-shadow), 0 0 96px -14px rgba(79, 195, 247, 0.45); }
}
.plan__tag { align-self: center; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: #06141d; background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-full); padding: 5px 14px; margin-bottom: 14px; font-weight: 700; box-shadow: 0 6px 20px -6px var(--accent-glow); }
.plan__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; }
.plan__price { font-family: var(--font-display); font-weight: 800; font-size: 2rem; margin: 10px 0; }
.plan__price small { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); font-weight: 400; }
.plan__pend { font-family: var(--font-mono); font-size: 0.58rem; color: var(--accent); letter-spacing: 0.05em; }
.plan__lead { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 16px; }
.plan__list { list-style: none; display: grid; gap: 10px; margin-bottom: 20px; }
.plan__list li { display: flex; gap: 10px; font-size: 0.9rem; color: var(--text-secondary); }
.plan__list li::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); margin-top: 8px; }
.plan .btn { margin-top: auto; }

/* Plan 1:1 — bloque a pantalla completa */
.oneone { position: relative; margin-top: var(--space-8); border: 1px solid var(--accent); border-radius: var(--radius-xl); background: var(--bg-surface); padding: clamp(24px, 6vw, 56px); overflow: hidden; box-shadow: 0 0 80px -30px var(--accent-glow); }
.oneone__grid { display: grid; gap: 28px; position: relative; z-index: 1; }
@media (min-width: 900px) { .oneone__grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }
.oneone__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1; }
.oneone__lead { color: var(--text-secondary); margin: 14px 0 20px; max-width: 44ch; }
.oneone__list { list-style: none; display: grid; gap: 10px; }
.oneone__list li { display: flex; gap: 10px; font-size: 0.92rem; }
.oneone__list li svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; }
.oneone__list li svg path { stroke: var(--accent); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.price-box { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--bg-elevated); }
.price-box__anchor { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--text-muted); position: relative; display: inline-block; }
.price-box__anchor s { text-decoration: none; }
.price-box__anchor::after { content: ''; position: absolute; left: -4px; right: -4px; top: 52%; height: 2px; background: var(--accent); transform: rotate(-6deg); }
.price-box__now { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 9vw, 3.6rem); color: var(--accent); line-height: 1; margin: 6px 0; }
.price-box__now small { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); display: block; font-weight: 400; margin-top: 6px; }
.price-box__note { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--text-secondary); margin: 16px 0; line-height: 1.5; text-transform: uppercase; }

.nico { position: relative; }
.nico__body { max-width: 52ch; display: grid; gap: 16px; color: var(--text-secondary); font-size: 1.05rem; margin-top: var(--space-5); }
.nico__body strong { color: var(--text-primary); font-weight: 700; }

/* ============================ LO QUE NO HAGO (invertido) ============================ */
/* sección oscura (mismo tono que el resto) diferenciada por una textura roja sutil */
.section--nope { background: var(--bg-void); }
.section--nope::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, rgba(255,90,90,0.05) 0, rgba(255,90,90,0.05) 1px, transparent 1px, transparent 13px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.section--nope .wrap { position: relative; z-index: 1; }
/* neón rojo mínimo en el titular */
.section--nope h2 { text-shadow: 0 0 16px rgba(255,90,90,0.30), 0 0 3px rgba(255,90,90,0.22); }
.nope__list { list-style: none; margin-top: var(--space-6); display: grid; gap: 16px; max-width: 60ch; }
.nope__list li { display: flex; gap: 12px; font-size: clamp(1rem, 4vw, 1.15rem); font-weight: 600; align-items: flex-start; }
.nope__list li::before {
  content: ''; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
  background: no-repeat center / 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a5a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 4px var(--red-glow));
}

.faq { margin-top: var(--space-6); border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; text-align: left; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; }
.faq__sign { flex: 0 0 auto; width: 22px; height: 22px; position: relative; }
.faq__sign::before, .faq__sign::after { content: ''; position: absolute; inset: 50% 0 auto 0; height: 2px; background: var(--accent); transition: transform var(--dur-base) var(--ease-out); }
.faq__sign::after { transform: rotate(90deg); }
.faq__item[aria-expanded="true"] .faq__sign::after { transform: rotate(0); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.faq__item[aria-expanded="true"] .faq__panel { grid-template-rows: 1fr; }
.faq__inner { overflow: hidden; }
.faq__a { padding-bottom: 20px; color: var(--text-secondary); max-width: 62ch; }

/* ============================ CIERRE ============================ */
.close { min-height: 84svh; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.close__t { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 8vw, 4.6rem); line-height: 0.98; }
.close__lead { color: var(--text-secondary); max-width: 40ch; margin: var(--space-5) auto 0; }
.close .btn { margin: var(--space-6) auto 0; }
.close__note { margin-top: var(--space-4); }

/* ============================ CAPTURA BLANDA ============================ */
.soft { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(24px, 6vw, 48px); background: var(--bg-surface); }
.soft__form { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-5); max-width: 480px; }
@media (min-width: 560px) { .soft__form { flex-direction: row; } }
.soft__input { flex: 1; min-height: 52px; padding: 0 18px; background: var(--bg-void); border: 1px solid var(--border-hover); border-radius: var(--radius-full); color: var(--text-primary); }
.soft__input:focus { outline: none; border-color: var(--accent); }
.soft__ok { margin-top: 12px; color: var(--accent); font-family: var(--font-mono); font-size: 0.8rem; }
.soft__ok[hidden] { display: none; }

/* ============================ FOOTER ============================ */
.footer { position: relative; overflow: hidden; border-top: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-void), #04252f 220%); }
.footer__glow { position: absolute; inset: auto 0 -40% 0; height: 70%; background: radial-gradient(60% 100% at 50% 100%, rgba(79,195,247,0.16), transparent 70%); pointer-events: none; }
.footer__inner { position: relative; z-index: 1; text-align: center; padding-block: clamp(48px, 10vw, 88px) var(--space-8); display: flex; flex-direction: column; align-items: center; }
.footer__brand { font-size: clamp(2.6rem, 12vw, 5.5rem); line-height: 0.9; letter-spacing: 0.01em; }
.footer__brand .accent { display: inline; }
.footer__tag { margin-top: 14px; max-width: 42ch; color: var(--text-secondary); font-size: clamp(1rem, 4vw, 1.15rem); }
.footer__cta { margin-top: var(--space-6); min-height: 56px; padding-inline: 40px; }
.footer__links { margin-top: var(--space-8); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.footer__links a { color: var(--text-secondary); transition: color var(--dur-fast); }
.footer__links a:hover { color: var(--accent); }
.footer__legal { margin-top: var(--space-5); font-size: 0.74rem; color: var(--text-muted); max-width: 56ch; }
.footer__by { position: relative; z-index: 1; border-top: 1px solid var(--border); padding-block: 20px; text-align: center; }
.footer__by a { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); transition: color var(--dur-fast); }
.footer__by a:hover { color: var(--accent); }
.footer__by b { color: var(--text-secondary); font-weight: 700; }
.footer__by a:hover b { color: var(--accent); }

/* ============================ STICKY BAR (mobile) ============================ */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 250; height: var(--sticky-h); padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: rgba(6,14,21,0.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--border); display: flex; transform: translateY(120%); transition: transform var(--dur-base) var(--ease-out); }
.sticky.is-shown { transform: none; }
.sticky .btn { width: 100%; min-height: 48px; }
@media (min-width: 900px) { .sticky { display: none; } }

.section-mt { margin-top: var(--space-6); }

/* ============================================================================
   CAPA DE DOPAMINA · animaciones triggered / hover / one-shot (cero continuo)
   ============================================================================ */

/* Barra de progreso de scroll (top) */
.scrollbar { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 300; transform: scaleX(var(--p, 0)); transform-origin: left center; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); box-shadow: 0 0 12px var(--accent-glow); }
@media (prefers-reduced-motion: reduce) { .scrollbar { display: none; } }

/* Reveals con más vida + variantes direccionales */
[data-reveal] { transform: translateY(28px) scale(0.985); }
[data-reveal].is-in { transform: none; }
[data-reveal="left"] { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="scale"] { transform: scale(0.9); }
[data-reveal="left"].is-in, [data-reveal="right"].is-in, [data-reveal="scale"].is-in { transform: none; }

/* Reveal de titulares grandes: máscara que se desliza línea a línea */
.reveal-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal-mask > span { display: inline-block; transform: translateY(105%); transition: transform var(--dur-slow) var(--ease-out); }
.reveal-mask.is-in > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-mask > span { transform: none !important; } }

/* Hero: el acento respira un halo suave (sin loop pesado, solo glow estático + entrada) */
.hero__title .accent { text-shadow: 0 0 44px rgba(79, 195, 247, 0.35); }

/* Contadores: pop al terminar */
.stat__num.is-pop { animation: statpop 520ms var(--ease-spring); }
@keyframes statpop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .stat__num.is-pop { animation: none; } }

/* Botón primario: barrido de brillo en hover (desktop) */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform 620ms var(--ease-out); }
.btn--primary:hover::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { .btn--primary::after { display: none; } }

/* Hover con elevación + halo de acento en tarjetas (dopamina táctil) */
.plan, .case, .fail, .diag__inner { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); }
@media (hover: hover) {
  .plan:hover { transform: translateY(-6px); border-color: var(--border-hover); box-shadow: 0 24px 60px -30px var(--accent-glow); }
  .plan--featured:hover { border-color: var(--accent); }
  .case:hover { transform: translateY(-5px); border-color: var(--border-hover); box-shadow: 0 20px 46px -28px var(--accent-glow); }
  .fail:hover { transform: translateY(-4px); border-color: var(--border-hover); }
  .pick:hover { transform: translateY(-4px); }
  .oneone:hover { box-shadow: 0 0 110px -34px var(--accent-glow); }
}

/* Comparativa: los "Sí" se dibujan a mano cuando la tabla entra en viewport */
.yes svg path { stroke-dasharray: 34; stroke-dashoffset: 34; }
.cmp.is-drawn .yes svg path { stroke-dashoffset: 0; transition: stroke-dashoffset 620ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .yes svg path { stroke-dashoffset: 0; } }

/* Nuevo bloque de valor del 1:1 (sin precio) */
.price-box__kick { color: var(--accent); margin-bottom: 10px; }
.price-box__value { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.7rem, 6.5vw, 2.6rem); line-height: 0.98; color: var(--text-primary); }
.price-box__sub { color: var(--text-secondary); font-size: 0.95rem; margin: 14px 0; line-height: 1.5; }

/* Chips/dot en el proceso: pulso al encenderse */
.proc__step.is-lit .proc__dot { animation: dotpulse 600ms var(--ease-out); }
@keyframes dotpulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .proc__step.is-lit .proc__dot { animation: none; } }

/* Fix cascada: en desktop solo la tabla; las tarjetas mobile ocultas (override tardío) */
@media (min-width: 900px) { .cmp__grid { display: none; } }

/* ============================================================================
   PILARES · escenas compuestas (inspiración Gasti, adaptado a NS)
   Card grande con ghost, elemento central y tarjetas flotantes con el acento.
   ============================================================================ */
.stage { position: relative; width: min(100%, 460px); aspect-ratio: 5 / 6; margin-inline: auto; border-radius: var(--radius-xl); border: 1px solid var(--border); overflow: hidden; background: radial-gradient(130% 90% at 28% 8%, rgba(79,195,247,0.12), transparent 52%), linear-gradient(160deg, var(--bg-elevated), var(--bg-void) 78%); }
.stage__ghost { position: absolute; inset: 0 0 auto 0; top: 8%; text-align: center; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(3.4rem, 15vw, 6.5rem); line-height: 0.8; color: rgba(255,255,255,0.045); pointer-events: none; letter-spacing: -0.02em; }
.stage__hero { position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%); width: 78%; border-radius: var(--radius-lg); border: 1px solid var(--border-hover); background: rgba(6,14,21,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 30px 70px -28px rgba(0,0,0,0.85); padding: 16px; }
.stage__hero .mono { color: var(--accent); font-size: 0.6rem; margin-bottom: 10px; display: block; }
.stage__row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.stage__row:last-child { border-bottom: 0; }
.stage__row span { color: var(--text-secondary); }
.stage__row b { font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem; }
.stage__row.is-hot b { color: var(--accent); }
/* mini bar chart (pilar entrenamiento) */
.stage__chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-top: 6px; }
.stage__chart .bar { flex: 1; background: linear-gradient(180deg, var(--accent), var(--accent-deep)); border-radius: 4px 4px 0 0; height: 8px; transition: height 720ms var(--ease-out); }
.stage.is-live .stage__chart .bar { height: var(--h, 40%); }
@media (prefers-reduced-motion: reduce) { .stage__chart .bar { height: var(--h, 40%); transition: none; } }
/* chat mini (pilar seguimiento) */
.stage__chat { display: flex; flex-direction: column; gap: 7px; }
.stage__bub { max-width: 88%; padding: 8px 11px; border-radius: 13px; font-size: 0.78rem; line-height: 1.35; }
.stage__bub--them { align-self: flex-start; background: #1a2b34; border-bottom-left-radius: 4px; }
.stage__bub--nico { align-self: flex-end; background: var(--bg-elevated); border: 1px solid var(--border-hover); border-bottom-right-radius: 4px; }
.stage__bub--nico b { color: var(--accent); }
/* tarjetas flotantes (entran con stagger) */
.stage__float { position: absolute; z-index: 2; border-radius: var(--radius-md); border: 1px solid var(--border-hover); background: rgba(10,15,20,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 18px 40px -20px rgba(0,0,0,0.9); padding: 10px 13px; opacity: 0; transform: translateY(16px) scale(0.92) rotate(var(--r, 0deg)); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-spring); transition-delay: calc(220ms + var(--i, 0) * 140ms); }
.stage.is-live .stage__float { opacity: 1; transform: translateY(0) scale(1) rotate(var(--r, 0deg)); }
@media (prefers-reduced-motion: reduce) { .stage__float { opacity: 1; transform: rotate(var(--r,0deg)); transition: none; } }
.stage__float .fl-k { display: block; font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.stage__float .fl-v { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1; margin-top: 4px; }
.stage__float .fl-v small { font-family: var(--font-mono); font-size: 0.5em; font-weight: 400; color: var(--text-secondary); }
.stage__float--chat { max-width: 200px; font-size: 0.78rem; line-height: 1.35; color: var(--text-primary); }
.stage__float--chat .fl-meta { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-family: var(--font-mono); font-size: 0.52rem; color: var(--text-muted); letter-spacing: 0.04em; }
.stage__float .fl-check { color: var(--accent); }
.stage__prog { display: flex; align-items: center; gap: 10px; min-width: 168px; }
.stage__prog-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-hover); color: var(--accent); flex: 0 0 auto; }
.stage__prog-bar { flex: 1; height: 6px; border-radius: var(--radius-full); background: rgba(255,255,255,0.08); overflow: hidden; }
.stage__prog-bar > span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 900ms var(--ease-out) 400ms; }
.stage.is-live .stage__prog-bar > span { width: var(--w, 60%); }
@media (prefers-reduced-motion: reduce) { .stage__prog-bar > span { width: var(--w,60%); transition: none; } }
/* idle float sutil (solo desktop, 1 chip por escena) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stage.is-live .stage__float--drift { animation: drift 5s ease-in-out infinite; }
}
@keyframes drift { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-8px) rotate(var(--r,0deg)); } }

/* la escena reemplaza al mock viejo dentro del pilar */
.pillar__media .stage { }

/* ============================================================================
   TESTIMONIOS · muro de dos filas tipo tweet (inspiración ref4)
   ============================================================================ */
.tw-wall { display: grid; gap: 16px; margin-top: clamp(32px, 8vw, 60px); }
.tw-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tw-track { display: flex; gap: 16px; width: max-content; animation: twmarq 60s linear infinite; }
.tw-row--rev .tw-track { animation-direction: reverse; animation-duration: 72s; }
.tw-row:hover .tw-track, .tw-track:focus-within { animation-play-state: paused; }
@keyframes twmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tw-track { animation: none; flex-wrap: wrap; } }
.tw { flex: 0 0 auto; width: min(330px, 80vw); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); transition: border-color var(--dur-base), transform var(--dur-base); }
@media (hover: hover) { .tw:hover { border-color: var(--border-hover); transform: translateY(-3px); } }
.tw__head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.tw__ava { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #06141d; background: linear-gradient(140deg, var(--accent), var(--accent-deep)); box-shadow: 0 0 0 2px rgba(79,195,247,0.18), 0 6px 16px -6px rgba(0,0,0,0.6); }
.tw__name { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 0.92rem; }
.tw__name::after { content: '✓'; flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); color: #06141d; font-size: 9px; font-weight: 900; display: inline-grid; place-items: center; }
.tw__handle { font-size: 0.74rem; color: var(--text-muted); }
.tw__body { font-size: 0.92rem; color: var(--text-primary); line-height: 1.5; }
.tw__body::before { content: '★★★★★'; display: block; color: var(--accent); letter-spacing: 2px; font-size: 0.82rem; margin-bottom: 9px; }
.tw__body b { color: var(--accent); font-family: var(--font-display); font-weight: 800; }
.tw-note { margin-top: var(--space-5); font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 640px) {
  /* título de testimonios en 2 renglones (la primera línea entra completa) */
  #s10 h2 { font-size: clamp(1.5rem, 5.9vw, 2rem); }
  .tw { width: min(224px, 60vw); padding: 14px; border-radius: var(--radius-md); }
  .tw__head { gap: 9px; margin-bottom: 9px; }
  .tw__ava { width: 32px; height: 32px; font-size: 12px; box-shadow: 0 0 0 1.5px rgba(79,195,247,0.18); }
  .tw__name { font-size: 0.82rem; }
  .tw__name::after { width: 13px; height: 13px; font-size: 8px; }
  .tw__handle { font-size: 0.66rem; }
  .tw__body { font-size: 0.8rem; line-height: 1.42; }
  .tw__body::before { font-size: 0.74rem; letter-spacing: 1.5px; margin-bottom: 7px; }
  .tw-row { gap: 12px; }
  .tw-track { gap: 12px; }
}

/* ============================================================================
   SUPERFICIES CON GRADIENTE · boxes más suaves, con profundidad y toque cyan
   Reemplaza el fondo plano navy en todas las cards. Un solo lenguaje de superficie.
   ============================================================================ */
:root {
  --card-surface: radial-gradient(135% 120% at 0% 0%, rgba(79,195,247,0.08), transparent 48%), linear-gradient(158deg, #16405c 0%, var(--bg-surface) 42%, var(--bg-void) 100%);
  --card-surface-hot: radial-gradient(120% 130% at 50% -12%, rgba(79,195,247,0.20), transparent 56%), linear-gradient(158deg, #1a4a6a 0%, var(--bg-surface) 55%, var(--bg-void) 100%);
  --card-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 28px 64px -38px rgba(0,0,0,0.85);
}
.soft, .plan, .pick, .fail, .tw, .cmp__card, .price-box, .diag__inner {
  background: var(--card-surface);
  box-shadow: var(--card-shadow);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
/* destacados: mismo lenguaje pero con más carga de acento */
.plan--featured, .cmp__card--ns, .pick.is-active { background: var(--card-surface-hot); }
.oneone { background: var(--card-surface-hot); box-shadow: var(--card-shadow), 0 0 100px -34px var(--accent-glow); }
/* la escena y su ficha central acompañan el mismo lenguaje */
.stage { background: radial-gradient(135% 100% at 22% 4%, rgba(79,195,247,0.13), transparent 52%), linear-gradient(160deg, #1a4a6a, var(--bg-void) 82%); box-shadow: var(--card-shadow); }
.stage__hero { background: linear-gradient(160deg, rgba(18,57,84,0.85), rgba(6,14,21,0.82)); }
/* hover más smooth y con glow de acento */
@media (hover: hover) {
  .plan:hover, .pick:hover, .fail:hover, .tw:hover {
    transform: translateY(-5px);
    border-color: var(--border-hover);
    box-shadow: var(--card-shadow), 0 36px 72px -34px var(--accent-glow);
  }
}
/* input del capture: más suave, foco cyan */
.soft__input { background: linear-gradient(160deg, rgba(6,14,21,0.92), rgba(6,14,21,0.55)); }

/* ============================================================================
   FIXES QA MOBILE
   ============================================================================ */
/* Perfiles: título y descripción como bloques separados (no corridos) */
.pick__t, .pick__d { display: block; }
/* Bloque 1:1: que los items del grid puedan achicar y el texto envuelva (no se recorte) */
.oneone__grid { grid-template-columns: minmax(0, 1fr); }
.oneone__grid > * { min-width: 0; }
.oneone__name, .oneone__list li, .plan__list li, .plan__lead { overflow-wrap: break-word; }
/* Botones full-width: permitir que el texto largo envuelva (no se recorte en containers angostos) */
.btn--block { white-space: normal; line-height: 1.2; padding-inline: 18px; }

/* Ajustes finales: sticky en mayúsculas + island sin botón Agendar en mobile */
.sticky .btn { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; }
@media (max-width: 899px) { .nav__bar .btn--primary { display: none; } }

/* ============================================================================
   MOBILE · TODO CENTRADO (<900px). Narrativa, hero, stats, cards y CTAs
   centrados; se mantienen funcionales la grilla comparativa, el FAQ,
   la timeline del proceso y las tarjetas de testimonios.
   ============================================================================ */
@media (max-width: 899px) {
  /* encabezados de sección: número y etiqueta apilados y centrados */
  .registro { flex-direction: column; align-items: center; gap: 4px; }
  .registro__line { display: none; }
  .registro__label { flex-basis: auto; text-align: center; }
  /* las burbujas de chat mantienen su texto alineado a la izquierda (legibilidad) */
  .chat .bubble, .stage__chat .stage__bub, .phone__who { text-align: left; }
  /* titulares y números */
  .h2, .display, .h1-hero, .hero__title, .pillar__t, .oneone__name,
  .plan__name, .plan__price, .plan__pend, .price-box__kick, .price-box__value,
  .stat__num, .stat__label, .close__t { text-align: center; }
  /* párrafos, leads, notas */
  .lead, .hero__eyebrow, .cmp__bajada, .pillar__d, .pillar__kick, .plan__lead,
  .blk-close, .oneone__lead, .close__lead, .close__note, .price-box__sub,
  .price-box__note, .phone__foot, .tw-note, .soft > .lead, .footer__legal,
  .lqv__label, .nico__body, .nico__body p { text-align: center; margin-inline: auto; }
  /* hero: toda la columna de texto centrada + CTAs centrados */
  .hero__grid > div { text-align: center; }
  .hero__ctas { align-items: center; }
  /* stats centrados */
  .stats > div { text-align: center; }
  .nico__body { max-width: 52ch; }
  /* selector de perfil y tarjetas de problema centradas */
  .pick, .fail { text-align: center; }
  .diag__inner { text-align: center; }
  .diag__inner p { margin-inline: auto; }
  /* footer centrado */
  .footer__row { justify-content: center; text-align: center; }
  /* listas: centradas como bloque, texto legible alineado a la izquierda */
  /* bullets de características centrados (como el cartelito) */
  .plan__list, .oneone__list { margin-inline: auto; text-align: center; }
  .plan__list li, .oneone__list li { justify-content: center; align-items: baseline; text-align: center; }
  .plan__list li::before, .oneone__list li svg { margin-top: 7px; }
  .nope__list { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
  /* proceso: timeline centrada (punto arriba de cada paso, sin riel lateral) */
  .proc { padding-left: 0; }
  .proc__rail { display: none; }
  .proc__step { text-align: center; padding-bottom: var(--space-8); }
  .proc__dot { position: static; margin: 0 auto 14px; }
  .proc__d { margin-inline: auto; }
}