/* =========================================================================
   NOEMA · Boletín (D16)
   Va DESPUÉS de `noema.css` y no redeclara ni un color.

   La maquetación de la página se resuelve casi entera con componentes que
   ya existen en el sistema: `.rejilla-3`, `.capas`, `.faq`, `.cierre
   .boletin` y `.campo`. Sus puntos de corte ya están en la sección 08 de
   `noema.css`, así que aquí no se repiten.

   Lo que sí es nuevo son tres piezas, y las tres nacen de esta página:
     1. La nota de proceso, que es la sección fija del boletín mostrada
        tal como llega dentro del correo.
     2. La ficha de número con su archivo al lado.
     3. La lista de lo que el canal no manda nunca.
   ========================================================================= */


/* 01 · HÉROE ============================================================== */
/* Mismo aire que `.hero-sobre`: la barra es sticky y ocupa `--alto-nav`,
   así que el titular arranca por debajo y no pegado a ella. */
.hero-boletin {
  padding-block: calc(var(--alto-nav) + var(--e9)) var(--e10);
}


/* 02 · LO QUE NO LLEGA ==================================================== */
/* Tres columnas, la misma retícula que las tarjetas de arriba, para que se
   lean como la otra mitad de la misma lista y no como un descargo aparte.
   Sin superficie: lo que no existe no ocupa una tarjeta. */
.lista-no {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e6) var(--medianil);
}
.lista-no li { display: flex; gap: var(--e4); align-items: flex-start; }
.lista-no .marca-no { flex: 0 0 auto; margin-top: 2px; line-height: 1; }
.lista-no .marca-no .ms { font-size: 20px; }
.lista-no > li > div > b {
  display: block; font-weight: 600; margin-bottom: 4px;
  font-family: var(--grot); color: var(--texto-principal);
}
/* Hijo directo del div, y no `.lista-no span`: ese selector alcanzaba
   también el span de la marca y le ponía display block, que descuadraba el
   ícono. Es el mismo error que ya se cazó una vez en `.seis-glosada`. */
.lista-no > li > div > span {
  display: block; font-size: 15px; line-height: 1.5;
  color: var(--texto-secundario);
}


/* 03 · LA BARRA DE LA COLA EDITORIAL ====================================== */
/* Franja oscura corta, después de las tres capas. Va aquí y no dentro de una
   tarjeta porque la cifra de descartes es la que sostiene las tres, y
   repartida entre columnas dejaba de leerse como el remate del bloque. */
.barra-cola {
  margin-top: var(--medianil);
  padding: var(--e6) var(--e7);
}
.barra-cola .dato { font-size: inherit; }
.barra-cola a { color: var(--texto-inverso); }


/* 04 · LA NOTA DE PROCESO ================================================= */
/* Es la sección fija del boletín, mostrada con la misma forma con la que
   llega dentro del correo. Por eso lleva rótulo, bajada, titular, los
   cuatro campos y el pie: los seis campos de la pieza, sin recortar.

   Ámbar, porque en el sistema el ámbar es la construcción hecha a mano y la
   decisión. Es además lo que la separa del bloque de actualizaciones
   curadas dentro de un mismo número. */
.nota {
  max-width: 720px;              /* el ancho de un correo, no el de la página */
  border-top: 3px solid var(--ambar-pleno);
  padding: var(--e7);
}
/* `.sello` vive en `noema.css` bajo `.capa`. Se repite aquí con las mismas
   medidas en vez de aflojar aquel selector, que es de otro componente. */
.nota .sello {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
}
.nota .sello i { width: 14px; height: 14px; border-radius: 50%; }
.nota-bajada { margin: var(--e2) 0 var(--e6); }
.nota-titular {
  font-family: var(--serif);
  margin: 0 0 var(--e6);
  padding-bottom: var(--e5);
  border-bottom: 1px solid var(--borde-sutil);
}

/* Los cuatro campos. El rótulo va arriba y en pequeño, no a la izquierda:
   en un correo de 600 px una columna de etiquetas deja el texto en 380 y
   se pierde el renglón. */
.nota-campos { margin: 0; }
.nota-campos > div + div { margin-top: var(--e5); }
.nota-campos dt {
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ambar-profundo);
  margin-bottom: var(--e2);
}
.nota-campos dd {
  margin: 0;
  font-size: 16px; line-height: 1.6;
  color: var(--texto-secundario);
}
/* El campo del costo es el que impide que la nota se lea como un logro, y
   por eso es el único que se marca. Fondo Ámbar claro con grafito encima:
   10,5:1 consultado contra la tabla del sistema de paletas. */
.nota-campos > div:nth-child(3) dd {
  background: var(--ambar-claro);
  color: var(--texto-principal);
  padding: var(--e4) var(--e5);
  border-radius: var(--r-m);
}
.nota-pie {
  margin: var(--e6) 0 0;
  padding-top: var(--e5);
  border-top: 1px solid var(--borde-sutil);
}


/* 05 · LOS NÚMEROS ======================================================== */
/* La ficha del número y el archivo, en la misma fila. El archivo es
   estrecho a propósito: hoy no tiene contenido, y darle el mismo peso que
   al número anunciaría un catálogo que todavía no existe. */
.numeros {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: var(--medianil);
  align-items: start;
}
.numero-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap;
  margin-bottom: var(--e4);
}
.numero-titular { margin: 0 0 var(--e4); }

/* El estado se declara, no se esconde. Mismo recurso con el que la ficha
   del documento de tesis dice que está en preparación: borde punteado, para
   que se distinga de una etiqueta de algo ya publicado. */
.sello-estado {
  display: inline-flex; align-items: center;
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .04em;
  color: var(--texto-secundario);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-boton);
  padding: 4px var(--e4);
}

/* Los cinco bloques del número. Numerados porque el orden es el argumento:
   lo que cambió, lo que no cambió, la guía, las notas y una sola salida. */
.numero-bloques {
  list-style: none; margin: 0; padding: 0;
  counter-reset: bloque;
  border-top: 1px solid var(--borde-sutil);
}
.numero-bloques li {
  counter-increment: bloque;
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--e4);
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--borde-sutil);
  font-size: 15px; line-height: 1.55;
  color: var(--texto-secundario);
}
.numero-bloques li::before {
  content: counter(bloque, decimal-leading-zero);
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  color: var(--verde-profundo);
  padding-top: 3px;
}
.numero-bloques b { font-weight: 600; color: var(--texto-principal); }

.archivo { background: var(--superficie-tenue); border-color: transparent; }
.archivo .micro { color: var(--texto-secundario); }


/* 06 · LAS TRES NOTAS DEL CORREO ========================================== */
/* Van debajo del campo, sobre la franja oscura. Son las condiciones de la
   suscripción puestas antes de escribir el correo y no en la letra chica de
   después: es la misma disciplina con la que la entrega del plan declara
   que el enlace caduca a los 90 días. */
.correo-notas {
  list-style: none; margin: var(--e7) 0 0; padding: var(--e5) 0 0;
  border-top: 1px solid var(--borde-inverso);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5) var(--medianil);
}
.correo-notas li {
  font-size: 14px; line-height: 1.55;
  color: var(--texto-inverso-suave);
}
.correo-notas b { color: var(--texto-inverso); font-weight: 600; }
.correo-notas a { color: var(--texto-inverso); }


/* 07 · PUNTOS DE CORTE ==================================================== */

/* Tableta · 834 */
@media (max-width: 1023px) {
  .hero-boletin { padding-block: calc(var(--alto-nav) + var(--e8)) var(--e9); }
  .lista-no { grid-template-columns: 1fr; gap: var(--e5); }
  .numeros { grid-template-columns: 1fr; }
  .correo-notas { grid-template-columns: 1fr; gap: var(--e4); }
  .nota { padding: var(--e6); }
}

/* Móvil · 390 */
@media (max-width: 767px) {
  .barra-cola { padding: var(--e5); }
  .nota { padding: var(--e5); }
  .numero-bloques li { grid-template-columns: 24px minmax(0, 1fr); gap: var(--e3); }
}