/*
  Estudio Manager — Landing (sitio estático aislado)
  Mismo lenguaje visual que la app (tokens copiados de app/src/index.css).
  REGLA DURA: los únicos literales de color/fuente/medida viven en :root.
  Todo lo demás consume var(--...). Modo Persuade con la contención de la marca.
*/

/* ---- Tipografías de marca SELF-HOSTED (NO Google Fonts) ---- */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/BarlowCondensed-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Barlow-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Barlow-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

:root {
  /* ---- PALETA (tema claro de la app) ---- */
  --color-bg: #ece8df; /* Marfil — fondo del cuerpo */
  --color-surface: #f6f3ec; /* Marfil apenas más claro — tarjetas/inputs */
  --color-surface-2: #e4dfd3; /* un paso más tostado — franjas alternas */
  --color-text: #1b1c1e; /* Chasis — texto principal */
  --color-text-muted: #5c6168; /* Metal oscuro — texto secundario */
  --color-border: #d2ccbe; /* arena — bordes */
  --color-primary: #f5a524; /* Ámbar VU — acento (con mesura) */
  --color-primary-text: #1b1c1e; /* Chasis sobre ámbar */
  --color-ok: #6f8f5f; /* verde salvia — hecho / éxito */
  --color-error: #b3282e; /* rojo de señal (AA sobre claro) */
  --color-etapa-pendiente: #5c6168; /* círculo vacío de etapa */

  /* Panel oscuro (sidebar/mock/footer) — isla de contraste */
  --panel-bg: #2a2c30; /* Panel */
  --panel-ink: #ece8df; /* Marfil — tinta sobre panel */
  --panel-ink-muted: #9aa0a6; /* Metal cepillado — tinta secundaria sobre panel */
  --panel-activo: #f5a524; /* Ámbar — ítem activo sobre panel */
  --panel-hairline: #3a3d42; /* separador tenue sobre panel */

  /* Velos y superficies derivadas (color-mix, sin nuevos literales) */
  --row-hover: color-mix(in srgb, var(--color-text) 5%, var(--color-surface));
  --chip-bg: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
  --primary-soft: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
  --ok-soft: color-mix(in srgb, var(--color-ok) 24%, var(--color-surface));
  --error-soft: color-mix(in srgb, var(--color-error) 18%, var(--color-surface));

  /* ---- TIPOGRAFÍA ---- */
  --font-base: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-titulo: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-body: 1.0625rem; /* 17px — más generoso que la app, es marketing */
  --fs-small: 0.875rem; /* 14px */
  /* Hero = titular de portada, rey indiscutido. Se empuja la escala. */
  --fs-h1: clamp(3rem, 8vw, 5.5rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem); /* secciones — baja frente al hero */
  --fs-h3: 1.25rem; /* tarjetas */
  --fs-dato: 0.75rem; /* micro-label mono de medición */
  --lh-base: 1.55;
  --ls-titulo: 0.06em; /* tracking editorial en mayúsculas */
  --ls-dato: 0.14em; /* micro-label mono */
  --fw-normal: 400;
  --fw-bold: 600;

  /* ---- ESPACIADO ---- */
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 11px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 36px;
  --space-7: 56px;
  --space-8: 88px;
  --measure: 68ch; /* medida de lectura del cuerpo */
  --max-page: 1120px; /* ancho máximo del contenido */

  /* ---- RADIOS / BORDES ----
     REGLA DURA: cero vértices rectos. Piso de redondeo 8px. */
  --radius-sm: 8px; /* inputs, chips pequeños */
  --radius-md: 14px; /* botones, tarjetas, badges */
  --radius-lg: 22px; /* bloques grandes: mock, cierre, bloque Rooster */
  --radius-round: 50%;
  --radius-pill: 999px;
  --border-width: 1px;

  /* ---- ELEVACIÓN ---- */
  --shadow-none: none;
  --shadow-sutil: 0 1px 3px rgba(27, 28, 30, 0.08), 0 4px 12px rgba(27, 28, 30, 0.06);
  --shadow-media: 0 2px 6px rgba(27, 28, 30, 0.1), 0 12px 32px rgba(27, 28, 30, 0.1);

  /* ---- MOVIMIENTO ---- */
  --dur: 200ms; /* interacciones: hover/focus/press (150–250ms) */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-reveal: 520ms; /* reveals de scroll (400–600ms) */
  --ease-reveal: cubic-bezier(0.16, 0.84, 0.3, 1); /* ease-out suave */
  --stagger: 90ms; /* ritmo del escalonado (coherente con el mock) */

  /* Scrollbar tematizado desde la paleta (sin literal nuevo) */
  scrollbar-color: var(--color-border) transparent;
}

/* ============================================================
   RESET LIVIANO + BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-7);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* el sangrado del mock nunca produce scroll horizontal */
}

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

/* PISO DE SEGURIDAD de iconos (fix de raíz del bug de SVG gigante).
   Los SVG inline del HTML traen solo viewBox, sin width/height, así que su
   tamaño dependía de UNA regla por contenedor. Si esa regla falta o el SVG se
   usa fuera de su contenedor, colapsa a su tamaño natural y se expande al ancho
   disponible (de ahí "icono a pantalla completa"). Esta regla da a cualquier
   SVG inline SIN dimensión propia un tamaño seguro (1.5em) como ÚLTIMO recurso.
   Va envuelta en :where() para tener especificidad CERO: así cualquier regla de
   contenedor (.mock__ic, .flujo__nodo svg, etc.) la sobrescribe con su medida
   fina, pero si esa regla falta, el icono cae a 1.5em y jamás a pantalla completa.
   Los SVG con width/height inline quedan excluidos. */
svg:where(:not([width]):not([height])) {
  width: 1.5em;
  height: 1.5em;
}

h1,
h2,
h3 {
  font-family: var(--font-titulo);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

/* Superficies del navegador tematizadas desde la paleta */
::selection {
  background-color: var(--primary-soft);
  color: var(--color-text);
}

:focus-visible {
  outline: calc(var(--border-width) * 2) solid var(--color-text);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Numerales tabulares y mono donde hay datos */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ============================================================
   UTILIDADES DE LAYOUT
   ============================================================ */
.contenedor {
  width: 100%;
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.seccion {
  padding-block: var(--space-8);
}

/* Micro-label de dato (mono) — reemplaza al eyebrow PROHIBIDO.
   No va ENCIMA de un heading como kicker; va donde una medición tiene sentido
   (sobre el mock, junto a una afirmación), como dato, no como etiqueta decorativa. */
.dato {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.dato::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background-color: var(--color-primary);
  flex: none;
}

.seccion h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  max-width: 20ch;
}

.seccion-intro {
  color: var(--color-text-muted);
  max-width: var(--measure);
  margin-top: var(--space-4);
  font-size: 1.125rem;
}

/* Más aire ARRIBA de un heading que abajo (craft floor) */
.seccion h2 {
  margin-top: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: calc(var(--space-3) * -1);
  transform: translateY(-120%);
  background-color: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
  z-index: 50;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
}

/* ============================================================
   NAV (barra superior)
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Sin glass/blur decorativo (refuse): marfil sólido + hairline. */
  background-color: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.topbar__logo {
  height: 26px;
  width: auto;
}
.topbar__acciones {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn--primario {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
}
.btn--primario:hover {
  background-color: color-mix(in srgb, var(--color-primary) 88%, var(--color-text));
}
.btn--secundario {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--secundario:hover {
  background-color: var(--row-hover);
  border-color: var(--color-text-muted);
}
.btn[aria-disabled='true'],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn[aria-disabled='true']:active {
  transform: none;
}
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-small);
}
.btn--pill {
  border-radius: var(--radius-pill);
}

/* ============================================================
   FORMULARIO DE CORREO (lista de espera)
   ============================================================ */
.waitlist {
  margin-top: var(--space-5);
}
.waitlist__fila {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  /* El input lleva un <label> encima que lo empuja hacia abajo; el botón no.
     Alinear por flex-end hace que el botón baje a la línea base del campo
     (no del label), así btn.bottom === input.bottom sin valores mágicos.
     En móvil se apila (column/stretch) y esta regla no aplica. */
  align-items: flex-end;
  /* Reserva el alto del mensaje de error (ahora absolute) para que no colisione
     con lo que viene debajo del formulario. */
  margin-bottom: calc(1.2em + var(--space-2));
}
.waitlist__campo {
  flex: 1 1 260px;
  min-width: 0;
  /* El error se saca del flujo (absolute) para que NO sume altura al campo: así
     el fondo del campo coincide con el fondo del input y el botón, alineado por
     flex-end, queda a la línea del input y no empujado por el mensaje de error.
     El espacio del error se reserva en .waitlist__fila (margin-bottom). */
  position: relative;
}
.waitlist label {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.waitlist input[type='email'] {
  width: 100%;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.waitlist input[type='email']::placeholder {
  color: var(--color-text-muted);
}
.waitlist input[type='email']:hover {
  background-color: var(--row-hover);
}
.waitlist input[type='email']:focus-visible {
  outline: none;
  border-color: var(--color-text);
  box-shadow: 0 0 0 calc(var(--border-width) * 2) var(--color-text);
}
.waitlist input[aria-invalid='true'] {
  border-color: var(--color-error);
}
.waitlist__error {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  color: var(--color-error);
  font-size: var(--fs-small);
  min-height: 1.2em;
}
.waitlist__ok {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background-color: var(--ok-soft);
  border: var(--border-width) solid var(--color-ok);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-4);
  color: var(--color-text);
}
.waitlist__ok svg {
  flex: none;
  color: var(--color-ok);
}
[hidden] {
  display: none !important;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  overflow-x: clip; /* contiene el sangrado del mock sin scroll horizontal */
  /* Presencia de apertura: lavado tostado muy suave desde arriba que asienta el
     hero como "lugar de entrada" sin pelear con el marfil del resto. */
  background:
    radial-gradient(
      120% 80% at 85% 0%,
      var(--primary-soft) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 70%);
  /* Alto cómodo de primer pliegue sin forzar 100vh (deja asomar lo siguiente). */
  min-height: min(88vh, 760px);
  display: grid;
  align-content: center;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
.hero__tagline {
  font-size: var(--fs-h1);
  text-transform: uppercase;
  letter-spacing: var(--ls-titulo);
  margin-bottom: var(--space-5);
  max-width: 13ch;
  line-height: 0.98;
}
.hero__sub {
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 46ch;
  margin-bottom: var(--space-2);
}
.hero__nota {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin-top: var(--space-4);
}

/* ---- Indicador de scroll (invita a bajar; se desvanece al hacer scroll) ---- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hero__scroll:hover {
  color: var(--color-text);
}
.hero__scroll--oculto {
  opacity: 0;
  pointer-events: none;
}
.hero__scroll-flecha {
  display: grid;
  place-items: center;
  color: var(--color-primary);
  animation: hero-bajar 1.8s var(--ease) infinite;
}
@keyframes hero-bajar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---- ELEMENTO FIRMA: marco + mock como instrumento vivo ---- */
.mock-marco {
  margin: 0;
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
.mock-marco__etiqueta {
  margin-left: var(--space-1);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---- MOCK de la matriz de Proyectos (HTML, no captura) ---- */
.mock {
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-media);
  overflow: hidden;
  display: grid;
  grid-template-columns: 56px 1fr;
  width: 100%;
  user-select: none;
}
.mock__rail {
  background-color: var(--panel-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.mock__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background-color: var(--panel-ink-muted);
}
.mock__dot--on {
  background-color: var(--panel-activo);
}
.mock__ic {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  color: var(--panel-ink-muted);
}
.mock__ic--activo {
  color: var(--panel-activo);
}
.mock__body {
  padding: var(--space-4) var(--space-4) var(--space-5);
  min-width: 0;
}
.mock__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.mock__title {
  font-family: var(--font-titulo);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  font-size: 1.05rem;
}
.mock__badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.mock__badge--alerta {
  color: var(--color-error);
  border-color: var(--color-error);
  background-color: var(--error-soft);
}
.mock__cols {
  display: grid;
  grid-template-columns: 1.6fr 0.6fr 0.6fr 0.9fr 0.8fr;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mock__col--c {
  text-align: center;
}
.mock__row {
  display: grid;
  grid-template-columns: 1.6fr 0.6fr 0.6fr 0.9fr 0.8fr;
  gap: var(--space-2);
  align-items: center;
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}
.mock__row:last-child {
  border-bottom: 0;
}
.mock__row:hover {
  background-color: var(--row-hover);
}

/* ---- Momento autoral (único): el mock se asienta una sola vez ----
   Estado inicial solo cuando app.js marca .mock--vivo (si JS no corre, el
   mock se ve completo y estático, sin quedar invisible). */
.mock--vivo .mock__row {
  opacity: 0;
  transform: translateY(8px);
  animation: mock-fila 240ms var(--ease) forwards;
  animation-delay: calc(120ms + var(--fila) * 90ms);
}
.mock--vivo .mock__check--on[data-mock-check]::after {
  animation: mock-check 200ms var(--ease) both;
  animation-delay: calc(360ms + var(--fila, 0) * 90ms);
}
.mock--vivo .mock__badge--alerta {
  animation: mock-late 520ms var(--ease) 700ms 1;
}
@keyframes mock-fila {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes mock-check {
  from {
    opacity: 0;
    transform: rotate(45deg) scale(0.4);
  }
  to {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}
@keyframes mock-late {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  40% {
    box-shadow: 0 0 0 4px var(--primary-soft);
  }
}
.mock__proy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mock__proy strong {
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
}
.mock__proy span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.mock__check {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-round);
  border: 2px solid var(--color-etapa-pendiente);
  margin-inline: auto;
}
.mock__check--on {
  border-color: var(--color-ok);
  background-color: var(--color-ok);
  position: relative;
}
.mock__check--on::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid var(--color-surface);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mock__chip {
  font-size: 0.72rem;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--chip-bg);
  color: var(--color-text-muted);
  text-align: center;
  justify-self: start;
}
.mock__chip--activo {
  background-color: var(--ok-soft);
  color: var(--color-text);
}
.mock__monto {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.mock__monto--atraso {
  color: var(--color-error);
}

/* ============================================================
   SECCIÓN PROBLEMA
   ============================================================ */
.problema {
  background-color: var(--color-surface-2);
  border-block: var(--border-width) solid var(--color-border);
}

/* DIÁLOGO — lo que te pasa (cita) y mi respuesta debajo, en primera persona.
   Se lee como conversación: la cita marcada con una barra ámbar a la izquierda,
   la respuesta en texto corrido. Sin rótulos crípticos. */
.dialogos {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
}
.dialogo {
  display: grid;
  gap: var(--space-3);
  max-width: 54ch;
}
.dialogo__cita {
  font-family: var(--font-titulo);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  text-wrap: balance;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-primary);
}
.dialogo__respuesta {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  padding-left: var(--space-4);
}

/* ============================================================
   CÓMO FUNCIONA — PIPELINE con línea de progreso (sin números postizos)
   La línea de conexión es protagonista: base en --color-border + un relleno
   ámbar que avanza con el scroll (data-flujo-fill, controlado por app.js).
   ============================================================ */
.flujo {
  position: relative;
  list-style: none;
  padding: 0;
  margin: var(--space-7) 0 0;
  display: grid;
  gap: var(--space-6);
}
/* Carril de la línea (vertical en móvil, recorre los nodos apilados). */
.flujo__linea {
  position: absolute;
  left: 23px;
  top: 24px;
  bottom: 24px;
  width: calc(var(--border-width) * 2);
  background-color: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  z-index: 0;
}
/* Relleno de progreso: crece de 0 a 100% según --progreso (lo fija app.js). */
.flujo__linea-fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--progreso, 0%);
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: height var(--dur-reveal, 520ms) var(--ease-reveal, ease-out);
}
.flujo__paso {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-5);
  align-items: start;
}
.flujo__nodo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-sutil);
  z-index: 1;
  transition:
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.flujo__nodo svg {
  width: 24px;
  height: 24px;
  transition: color var(--dur) var(--ease);
}
/* Hover rico: el nodo se eleva, el icono se acenta en ámbar. */
.flujo__paso:hover .flujo__nodo {
  transform: scale(1.06);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-media);
}
/* Estado "alcanzado" (lo marca app.js al avanzar el progreso del pipeline). */
.flujo__paso--alcanzado .flujo__nodo {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.flujo__cuerpo h3 {
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.flujo__cuerpo p {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  max-width: var(--measure);
}

/* ============================================================
   PARA QUIÉN ES
   ============================================================ */
/* Grilla PAREJA de perfiles (sin íconos): todas las celdas iguales, fluyen y se
   reacomodan solas sin dejar huecos. El rol es el protagonista; una barra ámbar
   a la izquierda aparece en hover para dar vida sin desbalancear la grilla. */
.perfiles {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.perfil {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sutil);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
/* Barra de acento a la izquierda: aparece/crece en hover. */
.perfil::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--color-primary);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.perfil:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-media);
}
.perfil:hover::before {
  transform: scaleY(1);
}
.perfil__rol {
  font-family: var(--font-titulo);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: 1.1;
}

/* ============================================================
   EL ROOSTER
   ============================================================ */
.rooster {
  background-color: var(--panel-bg);
  color: var(--panel-ink);
}
.rooster .kicker {
  color: var(--panel-ink-muted);
}
.rooster h2 {
  color: var(--panel-ink);
}
.rooster .seccion-intro {
  color: var(--panel-ink-muted);
}
.rooster__grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}
.rooster {
  padding-block: calc(var(--space-8) + var(--space-5));
}
.tarjeta-rooster {
  background-color: transparent;
  border: var(--border-width) solid var(--panel-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--dur) var(--ease);
}
.tarjeta-rooster:hover {
  border-color: var(--panel-ink-muted);
}
.tarjeta-rooster__titulo {
  font-family: var(--font-titulo);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--panel-ink);
  margin-bottom: var(--space-3);
}
.tarjeta-rooster__texto {
  color: var(--panel-ink-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* ============================================================
   PRECIO — una tarjeta por oferta (Fundador / Mensual / Anual)
   ============================================================ */
.planes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
/* Sección de precio: marfil, con las tarjetas en superficie clara que resaltan. */
.precio-seccion {
  background-color: var(--color-bg);
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  box-shadow: var(--shadow-sutil);
}
/* La tarjeta Fundador manda: borde ámbar, lavado suave, y espacio extra arriba
   para que su nombre quede a la misma altura que el de las otras dos (el sello
   va posicionado sobre el borde, no empuja el contenido). */
.plan--destacado {
  border-color: var(--color-primary);
  background-color: var(--primary-soft);
  padding-top: calc(var(--space-5) + var(--space-4));
}
/* Sello de escasez: cinta posicionada en el borde superior de la tarjeta. */
.plan__sello {
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: var(--space-5);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-primary-text);
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  box-shadow: var(--shadow-sutil);
  white-space: nowrap;
}
.plan__nombre {
  font-family: var(--font-titulo);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.plan__precio {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.plan__precio strong {
  font-family: var(--font-titulo);
  font-weight: var(--fw-bold);
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.plan__ciclo {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
/* Letra chica del precio anual (el "facturado como $99.000 al año"). */
.plan__facturado {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin-top: calc(var(--space-2) * -1);
}
/* Specs del plan: lista vertical con check ámbar, como ficha técnica. */
.plan__specs {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: grid;
  gap: var(--space-2);
}
.plan__specs li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.plan__specs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-round);
  background-color: var(--color-primary);
}
.plan__spec--destacado {
  color: var(--color-text);
  font-weight: var(--fw-bold);
}
/* Marcador de cupos fundador: barra de progreso fina + texto de escasez. */
.cupos {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.cupos__barra {
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-text) 10%, transparent);
  overflow: hidden;
}
.cupos__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  transition: width var(--dur-reveal) var(--ease-reveal);
}
.cupos__txt {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
/* CTA al pie de cada tarjeta: empuja el botón abajo para alinear las tres. */
.plan__cta {
  margin-top: auto;
  width: 100%;
}

/* ============================================================
   CIERRE + FOOTER
   ============================================================ */
.cierre {
  background-color: var(--color-surface-2);
  border-top: var(--border-width) solid var(--color-border);
}
.cierre__caja {
  max-width: 640px;
}
/* Aire generoso entre bloques del cierre: título, intro, precio y formulario
   respiran, no caen todos de una. */
.cierre__caja .seccion-intro {
  margin-top: var(--space-5);
}
.cierre__caja .waitlist {
  margin-top: var(--space-6);
}
.footer {
  background-color: var(--panel-bg);
  color: var(--panel-ink);
  padding-block: var(--space-6);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.footer__logo {
  height: 24px;
  width: auto;
}
.footer__meta {
  font-size: var(--fs-small);
  color: var(--panel-ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
}
.footer__meta a {
  color: var(--panel-ink);
  text-decoration: none;
  border-bottom: var(--border-width) solid var(--panel-hairline);
}
.footer__meta a:hover {
  border-bottom-color: var(--panel-ink);
}
/* Enlaces legales del pie (Términos · Privacidad): juntos, separados por aire. */
.footer__legal {
  display: flex;
  gap: var(--space-4);
}

/* ============================================================
   RESPONSIVE (desktop)
   ============================================================ */
/* ---- MÓVIL primero: decisiones propias a 390px ----
   El flujo es timeline vertical (ya es el default). El mock se recorta a las
   3 filas más elocuentes y se presenta a sangre contra el borde derecho. */
@media (max-width: 719px) {
  .topbar__entrar {
    display: none; /* un solo CTA en móvil, sin ruido */
  }
  .mock__row--movil-oculta {
    display: none; /* recorte a 3 filas, no la matriz apretada */
  }
  /* En móvil el botón del formulario ocupa todo el ancho (no se corta). */
  .waitlist__fila {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0; /* la reserva de error de desktop no aplica apilado */
  }
  .waitlist .btn {
    width: 100%;
  }
  /* Apilado: el error vuelve al flujo normal (debajo del input), sin absolute. */
  .waitlist__error {
    position: static;
    margin-top: var(--space-2);
  }
  .waitlist__campo {
    margin-bottom: var(--space-3);
  }
  /* Mock a sangre contra el borde derecho de la pantalla (corte de revista).
     El overflow:clip del marco evita que el sangrado ensanche la página. */
  .mock-marco {
    margin-right: calc(var(--space-5) * -1);
    overflow: clip;
  }
  .mock {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@media (min-width: 720px) {
  .rooster__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Diálogos en tres columnas: cada conversación como una viñeta. */
  .dialogos {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
  .dialogo {
    max-width: none;
  }
  /* Perfiles: grilla pareja de 3 columnas. Todas las celdas iguales; la última
     fila (un solo ítem) se alinea a la izquierda sin romper el ritmo. */
  .perfiles {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
  /* Precio: las tres tarjetas en fila; la Fundador ocupa su columna igual. */
  .planes {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  /* Pipeline a tres columnas con la línea de progreso HORIZONTAL. */
  .flujo {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7);
    align-items: start;
  }
  .flujo__paso {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  /* La línea recorre horizontalmente el centro de los nodos (24px de alto). */
  .flujo__linea {
    left: 24px;
    right: 24px;
    top: 23px;
    bottom: auto;
    width: auto;
    height: calc(var(--border-width) * 2);
  }
  .flujo__linea-fill {
    inset: 0 auto 0 0;
    height: auto;
    width: var(--progreso, 0%);
    transition: width var(--dur-reveal, 520ms) var(--ease-reveal, ease-out);
  }
}

@media (min-width: 960px) {
  .hero__grid {
    /* Eje editorial asimétrico: el titular manda, el mock entra sangrado. */
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-8);
    align-items: center;
  }
  /* Mock sangrado contra el borde derecho del contenido (foto de apertura). */
  .mock-marco {
    margin-right: calc(var(--space-7) * -1);
    justify-items: stretch;
  }
  .seccion {
    padding-block: var(--space-8);
  }
}

/* ============================================================
   SCROLL-REVEAL — una sola capa de movimiento coherente
   El estado inicial oculto SOLO se aplica cuando app.js marca <html> con
   .reveal-activo (hay JS e IntersectionObserver y no hay reduce-motion). Si JS
   no corre, nada queda invisible: el contenido se ve completo y estático.
   Gesto único: desplazamiento corto (10px) + fade, mismo ease, mismo ritmo.
   ============================================================ */
.reveal-activo [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-reveal) var(--ease-reveal),
    transform var(--dur-reveal) var(--ease-reveal);
}
/* Stagger: dentro de un grupo, cada hijo marcado entra con delay = --i * stagger. */
.reveal-activo [data-reveal-group] [data-reveal] {
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.reveal-activo [data-reveal].en-vista {
  opacity: 1;
  transform: none;
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* El mock aparece ya asentado, sin animar (no queda invisible). */
  .mock--vivo .mock__row {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .mock--vivo .mock__check--on[data-mock-check]::after {
    animation: none;
  }
  .mock--vivo .mock__badge--alerta {
    animation: none;
  }
  /* Reveals: todo en su estado final, sin entrada. app.js además NO engancha
     el observer ni el parallax cuando hay reduce-motion. */
  .reveal-activo [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Línea del pipeline: ya completa, progreso visible sin animar. */
  .flujo__linea-fill {
    transition: none !important;
  }
  /* Sin scale en hover (el cambio de color sí se permite, no es movimiento). */
  .flujo__paso:hover .flujo__nodo,
  .perfil:hover {
    transform: none !important;
  }
  /* La flecha del indicador de scroll no rebota: queda quieta. */
  .hero__scroll-flecha {
    animation: none !important;
  }
}