/*
  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.latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Barlow-Regular.latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Barlow-Medium.latin.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);
}


.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: clip; /* contiene el sangrado del mock y el resplandor del fondo */
  /* 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);
}


/* ---- 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: 6px;
  top: 13px;
  bottom: 13px;
  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: 14px 1fr;
  gap: var(--space-5);
  align-items: start;
}
.flujo__nodo {
  width: 14px;
  height: 14px;
  margin-top: 6px;
  border-radius: var(--radius-round);
  background-color: var(--color-bg);
  border: calc(var(--border-width) * 2) solid var(--color-border);
  z-index: 1;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
/* Estado "alcanzado" (lo marca app.js al avanzar el progreso del pipeline). */
.flujo__paso--alcanzado .flujo__nodo {
  border-color: var(--color-primary);
  background-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 {
  padding-block: calc(var(--space-8) + var(--space-5));
}
.rooster__filas {
  list-style: none;
  padding: 0;
  margin: var(--space-7) 0 0;
  border-bottom: var(--border-width) solid var(--panel-hairline);
}
.rooster__fila {
  display: grid;
  gap: var(--space-3) var(--space-7);
  grid-template-columns: 1fr;
  padding-block: var(--space-6);
  border-top: var(--border-width) solid var(--panel-hairline);
}
.rooster__fila-titulo {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  color: var(--panel-ink);
}
.rooster__fila-texto {
  color: var(--panel-ink-muted);
  max-width: 52ch;
}

/* ============================================================
   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: 3px;
  top: 0.3em;
  width: 5px;
  height: 9px;
  border: solid var(--color-ok);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.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: var(--pct, 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__fila {
    grid-template-columns: 1fr 1.3fr;
    align-items: baseline;
  }
  /* 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 por el centro de los puntos. */
  .flujo__linea {
    left: 7px;
    right: 7px;
    top: 12px;
    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). */
  .perfil:hover {
    transform: none !important;
  }
}

/* ============================================================
   TIPOGRAFÍA Y RITMO (revisión anti-plantilla)
   Mayúsculas solo en el titular del hero; el resto en frase normal.
   Cabeceras de sección con tres formas: apiladas, en dos columnas, centradas.
   ============================================================ */
.seccion h2,
.plan__nombre,
.flujo__cuerpo h3,
.perfil__rol,
.rooster__fila-titulo {
  text-transform: none;
  letter-spacing: 0;
}
.seccion h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  max-width: 22ch;
}
.flujo__cuerpo h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.seccion--centro > .contenedor > h2,
.seccion--centro .seccion-intro {
  margin-inline: auto;
  text-align: center;
}
@media (min-width: 960px) {
  .seccion--lado > .contenedor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-8);
    align-items: end;
  }
  .seccion--lado > .contenedor > :not(h2):not(.seccion-intro) {
    grid-column: 1 / -1;
  }
  .seccion--lado .seccion-intro {
    margin-top: 0;
  }
}

/* ============================================================
   MOVIMIENTO Y ACABADO (pasada premium)
   Todo en CSS/JS simple, sin librerías ni video. Se apaga con
   prefers-reduced-motion.
   ============================================================ */

/* ---- Hero: fondo con deriva lenta + grano fino ---- */
.hero__grid {
  position: relative;
  z-index: 1;
}
.hero::before {
  content: '';
  position: absolute;
  top: -25%;
  right: -12%;
  width: 70%;
  height: 95%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-primary) 30%, transparent),
    transparent 72%
  );
  filter: blur(44px);
  opacity: 0.6;
  pointer-events: none;
  animation: hero-deriva 18s ease-in-out infinite alternate;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@keyframes hero-deriva {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-6%, 9%, 0) scale(1.18);
  }
}


/* ---- Maqueta: resplandor detrás + inclinación 3D que se endereza al bajar ---- */
.mock-marco {
  position: relative;
  isolation: isolate;
}
.mock-marco::before {
  content: '';
  position: absolute;
  inset: 12% -6% -4% 6%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-primary) 38%, transparent),
    transparent 75%
  );
  filter: blur(36px);
  opacity: 0.7;
  pointer-events: none;
}
@media (min-width: 960px) {
  .mock {
    /* --tilt lo mueve app.js: 1 arriba de todo, 0 cuando ya bajaste */
    /* Más profundidad: inclinación fuerte arriba (--tilt, lo mueve el scroll)
       + un giro extra que sigue al cursor (--px/--py, de -1 a 1). */
    transform: perspective(1000px)
      rotateY(calc(var(--tilt, 0) * -18deg + var(--px, 0) * 7deg))
      rotateX(calc(var(--tilt, 0) * 10deg + var(--py, 0) * -5deg))
      scale(calc(0.96 + (1 - var(--tilt, 0)) * 0.04));
    transform-origin: 30% 50%;
    transition: transform 140ms ease-out;
    will-change: transform;
    /* Sombra larga y baja: refuerza que la maqueta flota sobre la página. */
    box-shadow:
      var(--shadow-media),
      0 50px 80px -34px color-mix(in srgb, var(--color-text) 45%, transparent),
      0 22px 36px -22px color-mix(in srgb, var(--color-text) 30%, transparent);
  }
}

/* ---- Botones con respuesta táctil ---- */
.btn:hover {
  transform: translateY(-1px);
}
.btn:hover:active {
  transform: translateY(1px);
}
.btn--primario:hover {
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--color-primary) 85%, transparent);
}

/* ---- Tarjetas de precio: brillo que sigue al cursor + halo del Fundador ---- */
.plan > :not(.plan__sello) {
  position: relative;
  z-index: 1;
}
.plan::before,
.plan::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.plan::before {
  inset: 0;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--color-primary) 16%, transparent),
    transparent 62%
  );
}
.plan::after {
  inset: -1px;
  padding: 1px;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 0%),
    var(--color-primary),
    transparent 70%
  );
  -webkit-mask:
    linear-gradient(var(--color-bg) 0 0) content-box,
    linear-gradient(var(--color-bg) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@media (hover: hover) {
  .plan:hover::before,
  .plan:hover::after {
    opacity: 1;
  }
}
.plan--destacado {
  box-shadow:
    var(--shadow-sutil),
    0 18px 50px -20px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

/* ---- Checks de las specs: aparecen escalonados al entrar la tarjeta ---- */
.reveal-activo .plan__specs li::before {
  transform: rotate(45deg) scale(0);
}
.reveal-activo .plan.en-vista .plan__specs li::before {
  transform: rotate(45deg) scale(1);
  transition: transform 320ms var(--ease-reveal);
  transition-delay: calc(260ms + var(--k, 0) * 90ms);
}
.plan__specs li:nth-child(2) { --k: 1; }
.plan__specs li:nth-child(3) { --k: 2; }
.plan__specs li:nth-child(4) { --k: 3; }
.plan__specs li:nth-child(5) { --k: 4; }

/* Barra de cupos: se llena al entrar la tarjeta */
.reveal-activo .cupos__fill {
  width: 0;
}
.reveal-activo .plan.en-vista .cupos__fill {
  width: var(--pct, 0%);
  transition-delay: 350ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero::before {
    animation: none;
  }
  .mock {
    transform: none !important;
  }
  .btn:hover {
    transform: none;
  }
  .reveal-activo .plan__specs li::before {
    transform: rotate(45deg) scale(1) !important;
  }
  .reveal-activo .cupos__fill {
    width: var(--pct, 0%) !important;
  }
}

/* ============================================================
   MENÚ DE SALTO RÁPIDO (barra superior)
   ============================================================ */
.topbar {
  /* Vidrio suave: se transparenta sobre lo que pasa por debajo. */
  background-color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}
.topbar__nav {
  display: none;
  align-items: center;
  gap: var(--space-5);
  margin-inline: auto;
}
.topbar__nav a {
  position: relative;
  padding-block: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.topbar__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.topbar__nav a:hover,
.topbar__nav a[aria-current='true'] {
  color: var(--color-text);
}
.topbar__nav a:hover::after,
.topbar__nav a[aria-current='true']::after {
  transform: scaleX(1);
}
/* En pantallas anchas el menú aparece; en celular queda solo el CTA. */
@media (min-width: 860px) {
  .topbar__nav {
    display: flex;
  }
}
@media (prefers-reduced-motion: reduce) {
  .topbar__nav a::after {
    transition: none;
  }
}

/* ---- Titular: barrido de color que lo revela de izquierda a derecha ----
   Una franja de color recorre el texto; detrás queda el texto ya revelado y
   delante todavía transparente. La anima --pos (0 a 100 = % del ancho). La clase
   "barrido" la pone barrido.js solo si el navegador lo soporta y no hay
   "reducir movimiento"; sin ella el titular se ve normal. */
@property --pos {
  syntax: '<number>';
  inherits: false;
  initial-value: -17;
}
.barrido .hero__tagline {
  --tinta: var(--color-text);
  --b0: color-mix(in srgb, var(--color-primary) 35%, var(--color-surface));
  --b1: var(--color-primary);
  --b2: color-mix(in srgb, var(--color-primary) 50%, var(--color-error));
  --b3: var(--color-primary);
  --b4: color-mix(in srgb, var(--color-primary) 35%, var(--color-surface));
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(
    90deg,
    var(--tinta) 0%,
    var(--tinta) calc((var(--pos) - 17) * 1%),
    var(--b0) calc((var(--pos) - 17) * 1%),
    var(--b1) calc((var(--pos) - 8.5) * 1%),
    var(--b2) calc(var(--pos) * 1%),
    var(--b3) calc((var(--pos) + 8.5) * 1%),
    var(--b4) calc((var(--pos) + 17) * 1%),
    transparent calc((var(--pos) + 17) * 1%),
    transparent 100%
  );
  animation: barrido 1900ms cubic-bezier(0.65, 0, 0.35, 1) 200ms both;
}
@keyframes barrido {
  from {
    --pos: -17;
  }
  to {
    --pos: 117;
  }
}