/* Landing de venta — capa sobre ficha.css (tokens, @font-face, botones, h2, FAQ).
   Se carga DESPUÉS de ficha.css. Tokens y escala: ../../DESIGN.md.
   Aviso heredado de ficha.css: en capturas de Chromium headless (1x) el texto pequeño
   aparenta un hueco entre letras. Está medido: es un artefacto de rasterizado, no un
   defecto. No bajar pesos ni quitar tracking para "arreglarlo". */

/* ---------- estructura ---------- */
.wrap-narrow {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .wrap-narrow { padding: 0 96px; }
}

section.block {
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}
section.block:last-of-type { border-bottom: none; }

.lede {
  /* 58ch reales ≈ 68-72 caracteres: dentro de la banda legible 45-75 de DESIGN.md.
     (La unidad ch mide el ancho del "0", más ancho que la minúscula media.) */
  max-width: 58ch;
  font-size: 1.125rem;
  color: var(--ink);
  margin: 0 0 28px;
}
.p { max-width: 58ch; }
.p-quiet { max-width: 58ch; color: var(--ink-2); }

/* ---------- hero ---------- */
.hero-landing {
  padding: 40px 0 56px;
  border-bottom: 1px solid var(--border);
}
/* Escala Display de DESIGN.md; opsz 144 a mano para que el serif salga afilado en grande
   (la mitad "instrumento" de la marca). */
.hero-h1 {
  margin: 0 0 20px;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 20, 'WONK' 0;
  font-weight: 480;
  font-size: clamp(2.5rem, 4vw + 1.5rem, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 19ch;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}
.hero-note {
  margin: 18px 0 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 52ch;
}

/* ---------- tarjeta de prueba (el instrumento) ---------- */
.proof {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 720px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .proof { padding: 28px 32px; } }

/* Firma de movimiento de DESIGN.md: un único barrido de radar, 1400ms, verde señal al 20%.
   Es la ÚNICA animación en bucle del sistema. */
.proof::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(31, 110, 74, 0.2), transparent);
  animation: barrido 1400ms linear infinite;
}
@keyframes barrido {
  0%   { transform: translateY(0); }
  100% { transform: translateY(var(--proof-h, 320px)); }
}

.proof-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.proof-q {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9375rem;
  color: var(--ink);
  margin: 0;
}
.proof-q .prompt { color: var(--info); }
.proof-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8125rem;
  color: var(--info);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.winners { list-style: none; margin: 0; padding: 0; }
.winners li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.9375rem;
}
.winners .n {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--info);
  font-size: 0.875rem;
  min-width: 2ch;
}

.verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.state {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-radius: var(--radius-full);
  padding: 0.35em 0.95em;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Variante oscurecida de la terracota para TEXTO pequeño: la de marca (#B14B33) mide 4.38
   sobre superficie, por debajo del 4.5 que exige DESIGN.md. El borde sí usa la de marca. */
.state-no {
  background: transparent;
  color: #A64429;
  border: 1px solid var(--terracotta);
}
.state-si { background: var(--signal); color: #fff; }
.state .dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; }
.state-si .dot { background: var(--signal-bright); }
.verdict p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- cifras medidas ---------- */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 28px 0 0;
  max-width: 900px;
}
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 18px 20px;
}
.stat .fig {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 2.25rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 6px;
}
.stat .cap { font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- pasos ---------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.steps li { counter-increment: paso; }
.steps li::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
  color: var(--signal-text);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.steps h3 {
  font-family: 'General Sans', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 8px;
}
.steps p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- lista de trabajo ---------- */
.work { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.work li {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}
.work li:last-child { border-bottom: 1px solid var(--border); }
.work strong { display: block; font-weight: 600; margin-bottom: 4px; max-width: 58ch; }
/* El contenedor es ancho (es una lista de filas), pero la línea de texto no puede serlo:
   a 760px salían ~110 caracteres por línea, muy por encima de la banda 45-75. */
.work span { display: block; color: var(--ink-2); font-size: 0.9375rem; max-width: 62ch; }

/* ---------- límite honesto ---------- */
.limit {
  border-left: 3px solid var(--terracotta);
  padding: 4px 0 4px 22px;
  max-width: 62ch;
}
.limit h2 { margin-bottom: 14px; }
.limit ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); }
.limit li { margin-bottom: 8px; max-width: 56ch; }

/* ---------- precio / piloto ---------- */
.pilot {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 26px 24px;
  max-width: 720px;
}
@media (min-width: 768px) { .pilot { padding: 32px; } }
.pilot .tagline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal-text);
  margin: 0 0 14px;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.price .now {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 2.25rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.price .was {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1rem;
  color: var(--ink-2);
  text-decoration: line-through;
}
.pilot ul { margin: 16px 0 0; padding-left: 1.1em; color: var(--ink-2); max-width: 56ch; }
.pilot li { margin-bottom: 8px; }

/* ---------- formulario ---------- */
/* Los controles de formulario NO heredan la fuente: sin esto la casilla y el botón caen a
   Arial, que es justo la pila de sistema que DESIGN.md prohíbe. */
input, button, select, textarea { font-family: 'General Sans', sans-serif; }

.form-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  max-width: 640px;
  background: var(--surface);
}
@media (min-width: 768px) { .form-card { padding: 32px; } }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  min-height: 48px;
  padding: 0.7em 0.85em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: 'General Sans', sans-serif;
  font-size: 1rem;
}
.field input::placeholder { color: #8a836f; }
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 20px;
  font-size: 0.875rem;
  color: var(--ink-2);
  max-width: 56ch;
}
/* La casilla en sí no llega a 44 px, pero el área pulsable real es la <label> entera
   (texto incluido), que pasa holgadamente de 44 px. */
.consent input {
  margin-top: 2px;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--signal);
}
.consent { cursor: pointer; }
.form-card .btn { width: 100%; justify-content: center; min-height: 52px; }
.alt-contact {
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.alt-contact a { color: var(--signal-text); }

/* Las respuestas del FAQ heredan 62ch de ficha.css; aquí el cuerpo va a 58ch para que
   toda la página tenga la misma medida de línea. */
.faq .a { max-width: 58ch; }

/* ---------- footer ---------- */
footer.landing {
  padding: 32px 0 56px;
  font-size: 0.875rem;
  color: var(--ink-2);
  border-top: 1px solid var(--border);
}
footer.landing p { max-width: 58ch; margin: 0 0 10px; }
/* El correo del pie es un enlace suelto y en móvil es la vía de contacto alternativa:
   necesita área pulsable de 44 px, no la altura de una línea de texto. */
footer.landing a {
  color: var(--signal-text);
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* DESIGN.md: se respeta siempre. El barrido pasa a fundido estático, sin bucle. */
@media (prefers-reduced-motion: reduce) {
  .proof::after { animation: none; opacity: 0.6; }
}