/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * Hallmark · genre: editorial · macrostructure: Stat-Led (ficha) + Conversational FAQ (membresía)
 * La portada va aparte, en portada.css: Split Studio + masthead N6.
 * theme: Almanac · tone: utilitario-editorial · anchor hue: bermellón de imprenta (30°)
 * nav: N3 side-rail · footer: Ft4 colofón denso · enrichment: none (solo tipografía y datos)
 *
 * Dos tintas, como un almanaque de verdad: negra para todo, roja para lo que hay
 * que mirar. Cifras siempre tabulares — la página es una tabla antes que un
 * anuncio.
 */
@import url("/fuentes.css");
@import url("/tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-synthesis-weight: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-display-s); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); letter-spacing: -0.005em; }
p { margin: 0 0 var(--space-md); max-width: 68ch; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--color-accent); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 1px;
}
strong { font-weight: 600; }
hr { border: 0; border-top: var(--rule-hair); margin: var(--space-xl) 0; }
img { max-width: 100%; height: auto; }

.tnum { font-variant-numeric: tabular-nums; }
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.rojo { color: var(--color-accent); }
.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-sm) var(--space-md); z-index: 100;
}
.saltar:focus { left: var(--space-md); top: var(--space-sm); }

/* ── N3 · barra lateral ───────────────────────────────────────────────────
   En escritorio el índice de la biblioteca vive fijo a la izquierda: es la
   navegación y a la vez el argumento de que hay más de una ficha. En móvil
   se convierte en una cabecera normal con el índice dentro de un <details>. */
.marco {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
  background: linear-gradient(90deg,
    var(--color-paper-2) 0 var(--rail),
    var(--color-paper) var(--rail));
}
.rail {
  border-right: var(--rule-hair);
  padding: var(--space-lg) var(--space-md);
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
}
.rail__marca {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-2xs);
}
.rail__marca .rojo { display: block; }
.rail__lema {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--color-ink-3);
  margin: 0 0 var(--space-lg);
  max-width: 24ch;
}
.rail__grupo { margin-bottom: var(--space-lg); }
.rail__titulo {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin: 0 0 var(--space-xs);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-hair);
}
.rail__indice-movil > summary { display: none; }
/* En escritorio el índice está siempre a la vista: el <details> arranca
   cerrado para que en el móvil no se coma la pantalla, y aquí se abre por CSS. */
.rail__indice-movil:not([open]) > .rail__lista { display: block; }
.rail__lista { list-style: none; margin: 0; padding: 0; }
.rail__lista li { margin: 0; }
.rail__lista a {
  display: block;
  padding: 3px 0;
  font-size: var(--text-sm);
  line-height: 1.35;
  text-decoration: none;
  color: var(--color-ink-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.rail__lista a:hover { color: var(--color-accent); }
.rail__lista a[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
}
.rail__lista a[aria-current="page"]::before {
  content: "▸ ";
  color: var(--color-accent);
}
.rail__pie {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  line-height: 1.5;
}

.lienzo { min-width: 0; padding: var(--space-2xl) var(--space-xl) var(--space-3xl); }
.medida { max-width: 64rem; }

/* ── Portada · Index-First ───────────────────────────────────────────────── */
.apertura { max-width: 42rem; margin-bottom: var(--space-2xl); }
.apertura h1 {
  font-size: var(--text-display);
  margin-bottom: var(--space-md);
}
.apertura__entrada {
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--color-ink-2);
  max-width: 34ch;
}

/* La tabla ES la portada. Cada fila es un negocio con sus dos cifras. */
.indice { width: 100%; border-collapse: collapse; margin-bottom: var(--space-xl); }
.indice caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  padding-bottom: var(--space-xs);
}
.indice th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0;
  border-bottom: var(--rule-thick);
  white-space: nowrap;
}
.indice td {
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
  border-bottom: var(--rule-hair);
  vertical-align: baseline;
}
.indice tr:hover td { background: var(--color-paper-2); }
.indice__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  width: 2.5rem;
}
.indice__nombre a {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.15;
  display: inline-block;
}
.indice__nombre a:hover { color: var(--color-accent); }
.indice__nota {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  line-height: 1.4;
  margin-top: 2px;
  max-width: 46ch;
}
.indice__cifra {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.indice__cifra--fuerte { color: var(--color-accent); font-weight: 500; }

/* ── Ficha · Stat-Led ────────────────────────────────────────────────────── */
.miga {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-lg);
}
.miga a { text-decoration: none; }
.miga a:hover { color: var(--color-accent); }

.stat { margin-bottom: var(--space-2xl); }
.stat__cifra {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-xs);
}
.stat__cifra .unidad {
  font-size: 0.42em;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.stat h1 { max-width: 20ch; margin-bottom: var(--space-md); }
.stat__pie {
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--color-ink-2);
  max-width: 44ch;
}

/* Tabla de datos de cabecera: inversión, tiempo, dificultad, cobro. */
.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0;
  border-top: var(--rule-thick);
  border-bottom: var(--rule-thick);
  margin-bottom: var(--space-2xl);
}
.datos__celda {
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-right: var(--rule-hair);
  min-width: 0;
}
.datos__celda:last-child { border-right: 0; }
.datos__celda dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-2xs);
}
.datos__celda dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.datos__celda .glosa {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-ink-3);
  line-height: 1.4;
  margin-top: 4px;
}

.bloque { margin-bottom: var(--space-2xl); max-width: 46rem; }
/* Los precios no son texto corrido: con la medida de lectura de 46rem, la
   tercera columna se cae de fila. */
.bloque--ancho { max-width: 62rem; }
.bloque > h2 {
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-thick);
  margin-bottom: var(--space-md);
}
.bloque ul, .bloque ol { padding-left: 1.1em; margin: 0 0 var(--space-md); max-width: 66ch; }
.bloque li { margin-bottom: var(--space-2xs); }
.bloque li::marker { color: var(--color-accent); }

/* Cuentas a la vista: el lector debe poder rehacer la multiplicación. */
.cuenta {
  border: var(--rule-hair);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--color-paper-2);
}
.cuenta__linea {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-2xs) 0;
  border-bottom: var(--rule-hair);
  font-size: var(--text-sm);
}
.cuenta__linea:last-of-type { border-bottom: 0; }
.cuenta__linea span:last-child {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cuenta__total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  border-top: var(--rule-thick);
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  font-weight: 600;
}
.cuenta__total span:last-child {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
.cuenta__nota {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  margin: var(--space-xs) 0 0;
  line-height: 1.45;
}

.caso {
  border-left: var(--rule-thick-l);
  padding: 0 0 0 var(--space-md);
  margin: 0 0 var(--space-md);
}
.caso p { font-size: var(--text-md); line-height: 1.5; }
.caso__fuente { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); }

/* La ilustración del oficio, al lado de la cifra de apertura. Tramada a dos
   tintas como el resto: en una ficha que va de números, la imagen ambienta y
   no compite. */
.stat--con-foto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: center;
}
.stat__foto {
  width: 9rem;
  height: 9rem;
  object-fit: cover;
  border: var(--rule-thick);
}
@media (max-width: 48rem) {
  .stat--con-foto { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .stat__foto { width: 6rem; height: 6rem; }
}

/* En las páginas de tarifa la cifra es un rango, no un número: la unidad no
   cabe al lado y se cae a media palabra. */
.stat--tarifa .stat__cifra .unidad {
  display: block;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-top: var(--space-2xs);
}
.stat--tarifa { align-items: start; }

/* Texto solo para lector de pantalla. */
.oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tablas de tarifa. La página de precio es una tabla antes que un artículo:
   quien llega buscando cuánto cobrar quiere el número, no la introducción. */
.tarifa {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
}
.tarifa caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  padding-bottom: var(--space-2xs);
}
.tarifa th, .tarifa td {
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  border-bottom: var(--rule-hair);
  text-align: left;
  vertical-align: baseline;
}
.tarifa thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  border-bottom: var(--rule-thick);
  white-space: nowrap;
}
.tarifa tbody th { font-weight: 600; }
.tarifa tbody tr:hover { background: var(--color-paper-2); }
.tarifa td.dinero { color: var(--color-accent); font-weight: 500; white-space: nowrap; }
.tarifa__rango {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-sm);
}
/* En pantalla estrecha la tabla se desplaza dentro de su caja; el cuerpo de
   la página no se mueve. */
@media (max-width: 40rem) {
  .tarifa { display: block; overflow-x: auto; white-space: nowrap; }
  .tarifa caption { white-space: normal; }
}

/* ── Captura de correo ──────────────────────────────────────────────────── */
.captura {
  border: var(--rule-thick);
  padding: var(--space-lg);
  margin-bottom: var(--space-2xl);
  max-width: 46rem;
  background: var(--color-paper-2);
}
.captura h2 { font-size: var(--text-xl); margin-bottom: var(--space-xs); border: 0; padding: 0; }
.captura__lista {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  columns: 2;
  column-gap: var(--space-lg);
  font-size: var(--text-sm);
}
.captura__lista li {
  break-inside: avoid;
  padding-left: 1.1em;
  position: relative;
  margin-bottom: 4px;
}
.captura__lista li::before {
  content: "·";
  position: absolute;
  left: 0.25em;
  color: var(--color-accent);
  font-weight: 600;
}
.forma { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.forma input[type="email"] {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 0.7rem 0.8rem;
  border: var(--rule-hair);
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: 0;
}
.forma input[type="email"]::placeholder { color: var(--color-ink-3); }
.forma input[type="email"]:hover { border-color: var(--color-ink-2); }
.forma .trampa { position: absolute; left: -9999px; }

.boton {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  border: var(--rule-thick);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  display: inline-block;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.boton:hover, .boton.is-hover { background: var(--color-ink); color: var(--color-paper); }
.boton:active, .boton.is-active { transform: translateY(1px); }
.boton[disabled], .boton.is-disabled { opacity: 0.5; cursor: not-allowed; }
.boton--tinta { background: var(--color-accent); color: var(--color-paper); border-color: var(--color-accent); }
.boton--tinta:hover, .boton--tinta.is-hover { background: var(--color-ink); border-color: var(--color-ink); }

.aviso { font-size: var(--text-sm); color: var(--color-ink-3); margin: var(--space-xs) 0 0; }
.forma__estado {
  font-size: var(--text-sm);
  margin: var(--space-xs) 0 0;
  min-height: 1.4em;
  font-family: var(--font-mono);
}
.forma__estado[data-estado="error"] { color: var(--color-error); }
.forma__estado[data-estado="ok"] { color: var(--color-exito); }

/* ── Membresía · Conversational FAQ ─────────────────────────────────────── */
.precio {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.precio__cifra {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}
.precio__unidad { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-3); }
.precio__tachado { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-3); text-decoration: line-through; }

.pregunta { border-bottom: var(--rule-hair); padding: var(--space-md) 0; max-width: 46rem; }
.pregunta h3 { margin-bottom: var(--space-xs); }
.pregunta p:last-child { margin-bottom: 0; }

.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-lg);
  max-width: 46rem;
  margin-bottom: var(--space-xl);
}
.dos-columnas ul { list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); }
.dos-columnas li { padding-left: 1.3em; position: relative; margin-bottom: var(--space-2xs); line-height: 1.45; }
.dos-columnas li::before { position: absolute; left: 0; font-family: var(--font-mono); }
.si li::before { content: "✓"; color: var(--color-accent); }
.no li::before { content: "×"; color: var(--color-ink-3); }

/* ── Ft4 · colofón denso ────────────────────────────────────────────────── */
.colofon {
  border-top: var(--rule-thick);
  margin-top: var(--space-3xl);
  padding-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-ink-3);
  max-width: 64rem;
}
.colofon p { max-width: 78ch; margin-bottom: var(--space-xs); }
.colofon a { color: var(--color-ink-2); }
.colofon a:hover { color: var(--color-accent); }
.colofon__fuentes { padding-left: 1.1em; margin: 0 0 var(--space-xs); }
.colofon__fuentes li { margin-bottom: 2px; }

/* Formulario del imán: etiquetas visibles y el negocio ya elegido. */
.forma--plan { align-items: flex-end; gap: var(--space-sm); }
/* El campo de correo viene de la ficha con `flex: 1 1 16rem`, que ahí reparte
   el ancho. Dentro de una columna esa base se lee como altura y estira la
   caja media pantalla. */
.forma__campo input[type="email"] { flex: 0 0 auto; width: 100%; }
.forma__campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 14rem; min-width: 0; }
.forma__campo label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.forma select,
.forma textarea,
.forma input[type="text"] {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 0.7rem 0.8rem;
  border: var(--rule-hair);
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: 0;
  width: 100%;
  min-width: 0;
}
.forma textarea { resize: vertical; line-height: 1.5; }
.forma select:hover,
.forma textarea:hover,
.forma input[type="text"]:hover { border-color: var(--color-ink-2); }
.forma--plan .boton { flex: 0 0 auto; }
.forma--opinion { flex-direction: column; align-items: stretch; gap: var(--space-md); }
.forma--opinion .forma__campo { flex: 1 1 auto; }
.forma--opinion .boton { align-self: flex-start; }
.forma__acuerdo {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-ink-2);
}
.forma__acuerdo input { margin-top: 0.25em; accent-color: var(--color-accent); }
.forma__estado[data-estado="ok"] { color: var(--color-exito); }
.forma__estado[data-estado="error"] { color: var(--color-error); }

/* ── Planes ───────────────────────────────────────────────────────────────
   Tres columnas y una marcada. Sin interruptor mensual/anual: con dos formas
   de pagar, un conmutador solo esconde la mitad de la información. */
.planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-md);
  align-items: stretch;
  margin-bottom: var(--space-xs);
}
.plan {
  display: flex;
  flex-direction: column;
  border: var(--rule-hair);
  padding: var(--space-md);
  background: var(--color-paper);
}
.plan--marcado {
  border: var(--rule-thick);
  background: var(--color-paper-2);
  position: relative;
}
.plan__sello {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-paper);
  background: var(--color-accent);
  display: inline-block;
  padding: 2px 8px;
  margin: 0 0 var(--space-xs);
  align-self: flex-start;
}
.plan__nombre { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.plan__precio {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
  margin: 0 0 var(--space-2xs);
}
.plan__unidad {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-3);
  letter-spacing: 0;
}
.plan__linea {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  line-height: 1.4;
  margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair);
}
.plan__lista {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.45;
  flex: 1 1 auto;
}
.plan__lista li { padding-left: 1.1em; position: relative; margin-bottom: var(--space-2xs); }
.plan__lista li::before {
  content: "·";
  position: absolute;
  left: 0.25em;
  color: var(--color-accent);
  font-weight: 600;
}
.plan .boton { align-self: stretch; text-align: center; }
.planes__pie { max-width: 68ch; }

/* ── Opiniones ────────────────────────────────────────────────────────────
   Solo salen aquí las que dejó alguien en /opinar/ y se aprobaron a mano.
   Mientras no haya ninguna, la sección no se imprime. */
.opiniones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}
.opinion { margin: 0; border-top: var(--rule-thick); padding-top: var(--space-xs); }
.opinion blockquote { margin: 0 0 var(--space-xs); }
.opinion blockquote p { font-size: var(--text-md); line-height: 1.5; margin: 0; }
.opinion figcaption { font-family: var(--font-mono); font-size: var(--text-xs); }
.opinion figcaption span { display: block; color: var(--color-ink-3); }

/* ── Móvil ──────────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .marco { display: block; background: var(--color-paper); }
  .rail { background: var(--color-paper-2); }
  .rail {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: var(--rule-thick);
    padding: var(--space-md);
  }
  .rail__lema { display: none; }
  .rail__grupo { margin-bottom: 0; }
  .rail__indice-movil > summary {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-3);
    cursor: pointer;
    padding: var(--space-xs) 0 0;
    list-style: none;
  }
  .rail__indice-movil summary::-webkit-details-marker { display: none; }
  .rail__indice-movil summary::after { content: " +"; color: var(--color-accent); }
  .rail__indice-movil[open] summary::after { content: " −"; }
  .rail__indice-movil:not([open]) > .rail__lista { display: none; }
  .rail__indice-movil .rail__lista { padding-top: var(--space-xs); }
  .rail__indice-movil .rail__lista a { padding: 6px 0; }
  .rail__pie { display: none; }
  .lienzo { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
  .captura__lista { columns: 1; }
  .datos__celda { border-right: 0; border-bottom: var(--rule-hair); padding-right: 0; }
  .datos__celda:last-child { border-bottom: 0; }
  .indice__oculta-movil { display: none; }
  .indice td { padding-right: var(--space-xs); }

}

/* ── Pantallas estrechas ──────────────────────────────────────────────────
   El índice deja de ser una tabla de cinco columnas y pasa a ser una lista:
   a 480 px, cinco columnas dejan los nombres partidos en cuatro líneas. */
@media (max-width: 34rem) {
  .indice thead { position: absolute; left: -9999px; }
  .indice tr { display: block; padding: var(--space-sm) 0; border-bottom: var(--rule-hair); }
  .indice tr:hover td { background: none; }
  .indice td { display: block; border: 0; padding: 0; }
  .indice__n { display: inline; }
  .indice__nombre { display: inline; }
  .indice__nombre a { font-size: var(--text-md); }
  .indice__nota { margin-bottom: var(--space-2xs); }
  .indice__cifra { display: inline-block; margin-right: var(--space-md); }
  .indice__cifra::before {
    content: attr(data-et);
    margin-right: 0.4em;
    font-family: var(--font-body);
    color: var(--color-ink-3);
  }
  .plan { padding: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .rail, .captura, .cabecera, .tira { display: none; }
  body { background: #fff; }
}

/* Cabecera de familia dentro del índice de playbooks: es una fila de
   orientación, no un dato, así que va en la voz del rail y no en la del texto. */
.indice__familia th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  font-weight: 400;
  text-align: left;
  padding: var(--space-lg) 0 var(--space-2xs);
  border-bottom: var(--rule-hair);
}
.indice__familia:first-child th { padding-top: var(--space-xs); }