/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 * Hallmark · genre: editorial · macrostructure: Split Studio (portada)
 * theme: Almanac · tone: utilitario-editorial · anchor hue: bermellón de imprenta (30°)
 * nav: N6 masthead de periódico · footer: Ft4 colofón denso
 * hero: H2 díptico · cta: C2 formulario en línea · prueba: T4 tira de cifras
 * enrichment: none — tipografía, reglas y cifras reales
 *
 * Hoja exclusiva de la portada; el resto del sitio no la carga. La portada es
 * lo único que tiene que vender, y vender pide una gramática que las fichas no
 * necesitan: masthead, bandas de tinta invertida y afirmación contra prueba en
 * mitades opuestas.
 *
 * La regla del almanaque de dos tintas se mantiene, pero aquí sí se usan las
 * dos: negro para la página, bermellón para la cifra que importa, y la banda
 * negra a sangre como signo de puntuación entre secciones. Sin bandas, quince
 * secciones sobre el mismo papel gris pesan todas lo mismo, que es otra manera
 * de decir que ninguna pesa.
 */

/* Los tokens que solo usa la portada viven aquí y no en tokens.css. El motivo
   es de despliegue, no de orden: tokens.css se sirve con una hora de caché, y
   una hoja nueva que depende de una variable que el navegador todavía no tiene
   pierde la regla entera. Un max-width que desaparece es una portada a lo
   ancho de la pantalla durante una hora. */
:root {
  --pagina: 78rem;               /* caja de la portada */
  --canal: var(--space-2xl);     /* calle entre las dos mitades */

  /* Segunda tinta sobre fondo de tinta: el bermellón de imprenta se queda en
     3:1 sobre negro, así que la banda invertida usa su versión clara. */
  --color-accent-2: oklch(70.0% 0.150 34);
  --color-paper-2ario: oklch(97.8% 0.004 250 / 0.74);
  --color-paper-3ario: oklch(97.8% 0.004 250 / 0.55);
  --color-rule-invertida: oklch(97.8% 0.004 250 / 0.24);
  --rule-invertida: 1px solid var(--color-rule-invertida);
}

.marco--portada {
  display: block;
  background: var(--color-paper);
}
.lienzo--portada { padding: 0; min-width: 0; }

/* Caja de página. Las bandas se salen de ella a sangre; el texto no. */
.caja {
  max-width: var(--pagina);
  margin: 0 auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

/* ── N6 · masthead ────────────────────────────────────────────────────────
   La cabecera de un almanaque no es una barra de producto: es el nombre de la
   publicación, su número de edición y una regla doble debajo. Da en dos
   centímetros de alto la autoridad que una barra con un botón no da nunca. */
.mast {
  text-align: center;
  padding-top: var(--space-md);
  border-bottom: var(--rule-thick);
}
.mast__linea {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin: 0 0 var(--space-2xs);
  max-width: none;
}
.mast__nombre {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.95;
  text-decoration: none;
  margin: 0;
}
.mast__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-sm) 0 var(--space-xs);
  border-top: var(--rule-hair);
  padding-top: var(--space-xs);
}
.mast__nav a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink-2);
  padding: 2px 0;
}
.mast__nav a:hover { color: var(--color-accent); }
.mast__nav a[data-fuerte] { color: var(--color-accent); font-weight: 500; }

/* ── H2 · apertura en díptico ─────────────────────────────────────────────
   Siete columnas de argumento contra cinco de prueba. La prueba es un recorte
   literal de la ficha 01: antes de pedir el correo, la página enseña de qué
   está hecho lo que va a mandar. */
.apertura {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--canal);
  align-items: center;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
.apertura h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-md);
  overflow-wrap: anywhere;
  min-width: 0;
}
.apertura h1 em {
  font-style: normal;
  color: var(--color-accent);
}
.apertura__lede {
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--color-ink-2);
  max-width: 40ch;
  margin: 0 0 var(--space-lg);
}

/* C2 · el formulario ES la llamada. Una línea, subrayada como un cupón de
   suscripción recortable, no una caja de producto. */
.captacion { display: grid; gap: var(--space-sm); max-width: 34rem; }
.captacion__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-sm);
  border-bottom: var(--rule-thick);
  padding-bottom: var(--space-xs);
}
.captacion label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: 2px;
}
.captacion select,
.captacion input[type="email"] {
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.35rem 0;
  min-height: 44px;
}
.captacion select { font-family: var(--font-display); font-weight: 600; }
.captacion input[type="email"]::placeholder { color: var(--color-ink-3); }
.captacion input[type="email"]:hover,
.captacion select:hover { color: var(--color-accent); }
.captacion__aviso {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  margin: 0;
  max-width: 46ch;
}
.captacion .trampa { position: absolute; left: -9999px; }

/* El recorte de ficha. Es una cita de contenido real, no un marco de
   navegador dibujado: no hay barra de título ni semáforo de tres puntos. */
.recorte {
  margin: 0;
  border: var(--rule-thick);
  background: var(--color-paper-2);
}
.recorte__et {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--color-ink);
  color: var(--color-paper);
  margin: 0;
  padding: var(--space-2xs) var(--space-sm);
  max-width: none;
}
.recorte__cuerpo { padding: var(--space-md) var(--space-md) var(--space-sm); }
.recorte__titulo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 var(--space-xs);
}
.recorte__cifra {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.25rem);
  font-weight: 600;
  line-height: 0.9;
  color: var(--color-accent);
  margin: 0;
  letter-spacing: -0.03em;
}
.recorte__unidad {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin: var(--space-2xs) 0 var(--space-sm);
}
.recorte__datos { margin: 0; border-top: var(--rule-hair); }
.recorte__dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: var(--rule-hair);
}
.recorte__dato dt { font-size: var(--text-sm); color: var(--color-ink-2); }
.recorte__dato dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}
.recorte figcaption {
  border-top: var(--rule-thick);
  padding: var(--space-xs) var(--space-md);
}
.recorte figcaption a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* La foto de portada. Va a sangre y tramada a dos tintas: es la ilustración
   de la publicación, no una foto de archivo pegada para rellenar. El pie lo
   dice, porque una imagen generada que se hace pasar por documento es
   exactamente lo que este sitio dice no hacer. */
.foto-portada {
  margin: 0;
  border-top: var(--rule-thick);
}
.foto-portada img {
  display: block;
  width: 100%;
  height: clamp(9rem, 22vw, 17rem);
  object-fit: cover;
  object-position: center;
}
.foto-portada figcaption {
  max-width: var(--pagina);
  margin: 0 auto;
  padding: var(--space-2xs) var(--space-xl) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  text-align: right;
}

/* Miniatura por fila del catálogo. Quince filas de texto son un muro; con la
   ilustración delante, la tabla se recorre con el ojo. */
.indice__foto { width: 5.25rem; padding-right: var(--space-sm) !important; }
.indice__foto img {
  display: block;
  width: 4.25rem;
  height: 4.25rem;
  object-fit: cover;
  border: var(--rule-hair);
}

/* ── Bandas de tinta ──────────────────────────────────────────────────────
   A sangre, negras, con la segunda tinta en su versión clara para que el rojo
   siga leyéndose. Son la puntuación de la página: separan sin necesidad de
   inventarse más reglas ni más aire. */
.banda {
  background: var(--color-ink);
  color: var(--color-paper);
}
.banda h2, .banda h3 { color: var(--color-paper); }
.banda a { color: var(--color-paper); }
.banda a:hover { color: var(--color-accent-2); }
.banda .rojo, .banda .cifra-fuerte { color: var(--color-accent-2); }

/* Teletipo del catálogo. Los quince pasando en una línea es el argumento de
   que hay biblioteca detrás, antes de que nadie baje a la tabla. Se desvanece
   por los lados para que no corte las palabras a mitad de letra. */
.teletipo {
  overflow: hidden;
  padding: var(--space-sm) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}
.teletipo__cinta {
  display: flex;
  width: max-content;
  animation: teletipo 110s linear infinite;
}
.teletipo:hover .teletipo__cinta { animation-play-state: paused; }
.teletipo__pieza {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: 0 var(--space-lg);
  border-right: var(--rule-invertida);
  white-space: nowrap;
  font-size: var(--text-sm);
}
.teletipo__pieza a { text-decoration: none; }
.teletipo__pieza a:hover { text-decoration: underline; }
.teletipo__pieza em {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: normal;
  color: var(--color-accent-2);
}
@keyframes teletipo { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Split Studio · franjas ───────────────────────────────────────────────
   Cada franja es una afirmación contra su prueba, y la siguiente cambia de
   lado. Alternar el lado es lo que da ritmo sin pedirle nada al color. */
.franja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--canal);
  align-items: center;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-top: var(--rule-hair);
}
.franja--vuelta .franja__dicho { order: 2; }
.franja h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.05;
  margin: 0 0 var(--space-md);
  max-width: 20ch;
}
.franja p { font-size: var(--text-md); line-height: 1.55; }
.franja p:last-child { margin-bottom: 0; }

/* T4 · tira de cifras. Cuatro datos comprobables, uno por celda. */
.tira-cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--rule-thick);
  border-left: var(--rule-hair);
}
.tira-cifras__celda {
  border-right: var(--rule-hair);
  border-bottom: var(--rule-hair);
  padding: var(--space-md);
}
.tira-cifras__celda b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.tira-cifras__celda span {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  line-height: 1.35;
  margin-top: var(--space-2xs);
  max-width: 22ch;
}

/* Los seis apartados de una ficha, numerados como un sumario. */
.sumario { list-style: none; padding: 0; margin: 0; counter-reset: sumario; }
.sumario li {
  counter-increment: sumario;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair);
}
.sumario li::before {
  content: counter(sumario, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  padding-top: 0.35em;
}
.sumario b {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  display: block;
}
.sumario span {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.45;
}

/* ── Secciones a ancho completo ───────────────────────────────────────────
   El catálogo y los precios rompen el díptico a propósito: son las dos que
   piden mirarse enteras de una vez. */
.pliego { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.pliego__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  border-top: var(--rule-thick);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.pliego__cabecera h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin: 0; }
.pliego__cabecera p {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin: 0;
}

/* La cita real, a sangre sobre tinta. Es la única prueba social que existe
   hoy y viene de una fuente enlazada, así que se le da el tamaño que merece. */
.testimonio { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.testimonio blockquote {
  margin: 0 0 var(--space-md);
  max-width: 52ch;
}
.testimonio blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.3;
  margin: 0;
}
.testimonio figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-paper-2ario);
}
.testimonio figcaption a { text-decoration-color: var(--color-accent-2); }

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

/* El plan del medio va en tinta invertida, no con un borde más grueso. Si la
   sección tiene tres columnas y una hay que elegir, esa una tiene que pesar
   distinto, no un poco más. */
.pliego .plan--marcado {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
  margin: calc(var(--space-xs) * -1) 0;
  padding: var(--space-md) var(--space-md) calc(var(--space-md) + var(--space-xs));
}
.pliego .plan--marcado .plan__nombre { color: var(--color-paper); }
.pliego .plan--marcado .plan__linea {
  color: var(--color-paper-2ario);
  border-bottom-color: var(--color-rule-invertida);
}
.pliego .plan--marcado .plan__unidad { color: var(--color-paper-2ario); }
.pliego .plan--marcado .plan__lista li::before { color: var(--color-accent-2); }
.pliego .plan--marcado .plan__sello {
  background: var(--color-accent-2);
  color: var(--color-ink);
}
.pliego .plan--marcado .boton {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}
.pliego .plan--marcado .boton:hover {
  background: var(--color-accent-2);
  border-color: var(--color-accent-2);
  color: var(--color-ink);
}

/* Preguntas, a dos columnas para que no se lean como una lista infinita. */
.preguntas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--space-md) var(--canal);
}
.preguntas .pregunta { margin: 0; }

/* Cierre: la misma captación de arriba, en banda, sin nada que la acompañe. */
.cierre { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.cierre h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.05;
  max-width: 22ch;
  margin: 0 0 var(--space-sm);
}
.cierre__lede { color: var(--color-paper-2ario); max-width: 52ch; }
.cierre .captacion__fila { border-bottom-color: var(--color-paper); }
.cierre .captacion label { color: var(--color-paper-2ario); }
.cierre .captacion select,
.cierre .captacion input[type="email"] { color: var(--color-paper); }
.cierre .captacion input[type="email"]::placeholder { color: var(--color-paper-3ario); }
.cierre .captacion select:hover,
.cierre .captacion input[type="email"]:hover { color: var(--color-accent-2); }
.cierre .captacion__aviso { color: var(--color-paper-2ario); }
.cierre .boton {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}
.cierre .boton:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.cierre .forma__estado[data-estado="ok"] { color: var(--color-accent-2); }

/* El colofón cierra la portada con la misma regla gruesa del masthead. */
.lienzo--portada > .colofon {
  max-width: var(--pagina);
  margin: 0 auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

@media (max-width: 60rem) {
  .caja { padding-left: var(--space-md); padding-right: var(--space-md); }
  .apertura,
  .franja {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
  .franja--vuelta .franja__dicho { order: 0; }
  .pliego, .testimonio, .cierre {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
  .teletipo {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
  }
  .lienzo--portada > .colofon {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  .foto-portada figcaption {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    text-align: left;
  }
}

@media (max-width: 34rem) {
  /* La miniatura pasa a un costado de la fila, no encima del nombre. */
  .indice tr { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0 var(--space-sm); }
  .indice__foto { width: auto; grid-row: span 4; padding-right: 0 !important; }

  /* Apilado, el subrayado del cupón no puede pasar por debajo del botón: la
     línea es del campo, no de la fila. */
  .captacion__fila {
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 0;
    padding-bottom: 0;
    gap: var(--space-md);
  }
  .captacion__fila > div {
    border-bottom: var(--rule-thick);
    padding-bottom: var(--space-xs);
  }
  .cierre .captacion__fila > div { border-bottom-color: var(--color-paper); }
  .captacion__fila .boton { width: 100%; }
  .tira-cifras { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .teletipo, .mast__nav { display: none; }
  .banda { background: #fff; color: #000; }
}