/* Capa de las VARIANTES de landing. Se carga después de ficha.css + landing.css.
   Solo añade las piezas que la landing de texto no tenía: foto, gráfico, tabla de datos y el
   hero en modo escaneo. Tokens y escala: ../../DESIGN.md — aquí no se inventa ningún color. */

/* ---------- barra de revisión (solo para Mario, no va a producción) ---------- */
.var-bar {
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9375rem;
  padding: 10px 0;
  z-index: 20;
}
/* Pegada solo en escritorio: en móvil ocupa tres líneas y tapaba la cabecera de los gráficos
   al hacer scroll (QA 04/08). */
@media (min-width: 700px) {
  .var-bar { position: sticky; top: 0; }
}
.var-bar .wrap { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: baseline; }
.var-tag {
  background: var(--signal-bright);
  color: #10231A;
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 2px 12px;
  font-size: 0.8125rem;
}
.var-bar strong { font-weight: 600; }
.var-apuesta { color: #C9C1AE; }
.var-bar a { color: var(--signal-bright); margin-left: auto; }

/* ---------- hero partido: texto + artefacto ---------- */
.hero-split-grid { display: grid; gap: 36px; }
@media (min-width: 1024px) {
  .hero-split-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
  .hero-split .hero-h1 { font-size: clamp(2.5rem, 2.4vw + 1.6rem, 3.5rem); max-width: 16ch; }
}
.hero-artefacto .proof { max-width: none; }

/* ---------- hero con foto a sangre ---------- */
.hero-foto { position: relative; border-bottom: 1px solid var(--border); }
.hero-foto-img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: 70% center;
}
.hero-foto-texto { padding: 28px 0 40px; }
@media (min-width: 1024px) {
  .hero-foto-img { position: absolute; inset: 0; height: 100%; }
  .hero-foto-texto {
    position: relative;
    padding: 96px 0 104px;
    /* Velo de papel para que el texto no dependa de la foto: contraste medido sobre el velo,
       no sobre la imagen. */
    background: linear-gradient(100deg, var(--paper) 0%, var(--paper) 46%, rgba(246, 241, 231, 0.92) 56%, rgba(246, 241, 231, 0) 76%);
  }
  .hero-foto-texto .wrap > * { max-width: 46ch; }
}
.hero-foto .hero-h1 { max-width: 17ch; }

/* ---------- hero en modo escaneo (fondo oscuro reservado de DESIGN.md) ---------- */
.hero-scan {
  background: #14130F;
  color: #F3EEE1;
  padding: 40px 0 52px;
  position: relative;
  overflow: hidden;
}
/* Firma de movimiento: el mismo barrido de radar de la tarjeta de prueba, una sola vez en la página. */
.hero-scan::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(91, 217, 138, 0.55), transparent);
  animation: scan-sweep 1400ms var(--ease-in) infinite;
}
@keyframes scan-sweep { from { transform: translateY(0); } to { transform: translateY(var(--scan-h, 420px)); } }
@media (prefers-reduced-motion: reduce) {
  .hero-scan::after { animation: none; opacity: 0.35; }
}
.eyebrow-scan { color: #9C9382; }
.scan-grid { display: grid; gap: 32px; margin-top: 20px; }
@media (min-width: 1024px) { .scan-grid { grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; } }
.scan-cifra {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: clamp(4.5rem, 11vw, 8rem);
  line-height: 0.9;
  color: #5BD98A;
  margin: 0;
}
.scan-cifra span { font-size: 0.4em; margin-left: 4px; }
.scan-pie { color: #CFC7B6; max-width: 34ch; margin: 16px 0 0; font-size: 1rem; line-height: 1.6; }
.hero-h1-scan { color: #F3EEE1; }
.lede-scan { color: #CFC7B6; }
.btn-scan-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px;
  border: 1px solid #3A362C; border-radius: var(--radius-sm);
  background: transparent; color: #5BD98A;
  font-weight: 500; text-decoration: none;
  transition: transform var(--dur-short) var(--ease-in);
}
.btn-scan-ghost:hover { transform: translateY(-1px); border-color: #5BD98A; }

/* ---------- figuras de gráfico ---------- */
.fig-grafico { margin: 0 0 8px; max-width: 760px; }
.fig-grafico svg { display: block; width: 100%; height: auto; }
/* Dos dibujos del mismo dato, uno ancho y otro estrecho. Los dos llevan su title/desc con ids
   propios; `display:none` los saca del árbol de accesibilidad, así que el lector de pantalla
   anuncia solo el que se está viendo. */
.g-ancho { display: none; }
.g-estrecho { display: block; }
@media (min-width: 700px) {
  .g-ancho { display: block; }
  .g-estrecho { display: none; }
}
.fig-grafico figcaption {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin-top: 10px;
  max-width: 58ch;
  line-height: 1.5;
}
.fuente {
  font-size: 0.8125rem;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 18px 0 0;
  line-height: 1.5;
}

/* ---------- tabla de datos (relieve obligatorio del gráfico) ---------- */
.tabla-datos { margin: 14px 0 0; max-width: 760px; }
.tabla-datos summary {
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--signal-text);
  padding: 10px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.tabla-datos table { border-collapse: collapse; width: 100%; margin-top: 6px; font-size: 0.9375rem; }
.tabla-datos caption { text-align: left; color: var(--ink-2); font-size: 0.875rem; padding-bottom: 8px; }
.tabla-datos th, .tabla-datos td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border); }
.tabla-datos td:not(:first-child), .tabla-datos th:not(:first-child) {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.tabla-datos thead th { color: var(--ink-2); font-weight: 500; font-size: 0.875rem; }
.tabla-datos tfoot th, .tabla-datos tfoot td { font-weight: 600; border-bottom: none; }

/* ---------- fotos ---------- */
.banda-foto { margin: 0; }
.banda-foto img { display: block; width: 100%; height: clamp(160px, 22vw, 300px); object-fit: cover; }

.dos-col { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .dos-col { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .dos-col-inv .foto-col { order: 2; }
}
.foto-col { margin: 0; }
.foto-col img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.dos-col h2 { margin-top: 0; }
.dos-col .limit { margin-top: 24px; }

/* Campo trampa del formulario: fuera de la vista y del recorrido de teclado, pero presente en el
   DOM para que un bot lo rellene. No se usa display:none — algunos bots lo detectan. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}