/* =========================================================================
   NOEMA · Blog · índice y entrada  (D19 y D20)
   Una hoja para las dos páginas, igual que Actualizaciones. Verde en todo:
   el blog cuelga del desplegable de Actualizaciones y los tres hijos van en
   verde desde el 15-08-2026.

   ORDEN DEL ARCHIVO
   01 · La portada, y qué se tomó de la referencia
   02 · El carrusel de la serie
   03 · La tarjeta del carrusel
   04 · La rejilla de todo lo publicado
   05 · La entrada (D20)
   06 · La salida
   07 · Puntos de corte
   08 · Impresión

   ------------------------------------------------------------------------
   DOS REFERENCIAS, UNA PARA CADA MITAD DE LA PÁGINA

   Dana trajo Ploy para la portada y Teak para la rejilla. De las dos se copia
   la ESTRUCTURA, literal, y de ninguna el acabado.

   DE PLOY, en la portada:
     un panel grande de esquinas redondeadas que ocupa el ancho útil
     un titular apilado en caja alta
     la bajada alineada a la derecha, a media altura, no bajo el titular
     dos botones circulares de avance
     un carrusel de tarjetas blancas que se sale por el borde derecho

   DE TEAK, en la rejilla:
     tres columnas de tarjetas con imagen arriba
     el tiempo de lectura sobre el titular, no debajo
     bajada de una o dos líneas
     «Leer» en una caja abajo, con filete que la separa del cuerpo
     un botón que revela más en lugar de paginar

   LO QUE PONE EL SISTEMA Y NO LA REFERENCIA:
     el titular va en Gambetta, no en una grotesca condensada. Regla 1 de
       tipografía: portada en caja alta, apilada, interlineado 90 a 95 %
     el panel va en verde claro al 30 %, que es el mismo valor que ya usan
       `.b-importa` del feed. No se inventó un tono para esto
     las tarjetas NO llevan contorno ni sombra. La regla de elevación tiene
       dos niveles y solo la barra y los menús flotan; la separación la da el
       blanco de la tarjeta contra el papel. Los filetes que se ven son
       divisiones INTERNAS, que el sistema sí usa
     no aparece ni un punto de púrpura, por la regla 2 del sistema de
       paletas: el púrpura nunca compone una pieza

   DOS COSAS QUE LAS REFERENCIAS HACEN Y AQUÍ NO:
     el carrusel NO avanza solo. Un carrusel con auto-avance es movimiento en
       bucle pidiendo atención, y el principio 1 del proyecto va en contra
     «Ver más» REVELA lo que ya está en la página y dice cuántas faltan. Un
       «ver más» sin número no deja saber si queda una o cuarenta, y eso es
       lo que convierte una lista en un pozo sin fondo

   QUITADO EL 24-08-2026 por decisión de Dana: el círculo del alfabeto
   intercalado en el titular, el sello de estado de las tarjetas, y las tres
   secciones del argumento editorial (criterio, carriles y descartes) con
   todos sus estilos. El registro sigue en `16_Blog_seleccion_de_temas.md`.
   ========================================================================= */


/* 01 · LA PORTADA ========================================================= */
.portada-blog { padding-block: var(--e6) var(--e9); }

/* El panel. Ocupa el ancho útil y respira por dentro, que es lo que hace que
   el titular no toque el borde como en una tarjeta cualquiera. */
.panel {
  background: rgba(193, 229, 78, .30);
  border-radius: var(--r-l);
  padding: var(--e9) 0 var(--e8);
  overflow: hidden;   /* el carrusel se recorta contra el panel, no contra la ventana */
}
.panel-interior {
  padding-inline: var(--e8);
}

.portada-antetitulo { color: var(--verde-profundo); }

/* El titular: caja alta, apilado, interlineado 0,90. Es la regla 1 del
   sistema de tipografía, no una decisión de esta página. */
.portada-titular {
  font-family: var(--serif);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(38px, 6.6vw, 96px);
  line-height: .90;
  letter-spacing: -.02em;
  color: var(--texto-principal);
  margin: var(--e4) 0 0;
  /* El corte lo pone el `<br>` del HTML, así que aquí no se equilibra ni se
     limita el ancho: las dos cosas pelearían contra un corte ya decidido. */
  text-wrap: normal;
}

/* La bajada a la derecha, como en la referencia. Va en una fila propia para
   que en pantallas angostas caiga debajo sin pelearse con el titular. */
.portada-fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e7);
  margin-top: var(--e8);
  flex-wrap: wrap;
}
.portada-bajada {
  max-width: 52ch;
  margin: 0;
  margin-left: auto;
}
.portada-bajada b { color: var(--texto-principal); font-weight: 600; }


/* 02 · EL CARRUSEL ======================================================== */
/* Los dos botones circulares. El sistema ya tiene «botón de avance»: círculo,
   reposo Pleno, puntero Claro, presionado Profundo. Se usa ese, no uno nuevo. */
.carrusel-controles { display: flex; gap: var(--e3); margin-top: var(--e6); }
.carrusel-controles button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--verde-pleno);
  background: transparent;
  color: var(--verde-profundo);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}
.carrusel-controles button:hover:not([disabled]) {
  background: var(--verde-pleno); color: var(--papel);
}
.carrusel-controles button:active:not([disabled]) {
  background: var(--verde-profundo); border-color: var(--verde-profundo); color: var(--papel);
}
/* El apagado no se esconde: se ve que está y se ve que todavía no. Mismos
   tokens que el resto del sitio, para no inventar una segunda manera de
   decir lo mismo. */
.carrusel-controles button[disabled] {
  background: var(--accion-apagada-fondo);
  color: var(--accion-apagada-texto);
  border-color: transparent;
  cursor: not-allowed;
}

/* La pista. Se sale por la derecha a propósito: el corte de la cuarta
   tarjeta es lo que dice que hay más sin necesidad de escribirlo. El padding
   de arranque la alinea con el titular. */
.carrusel {
  display: flex;
  gap: var(--medianil);
  margin-top: var(--e7);
  padding-inline: var(--e8);
  padding-bottom: var(--e2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* `scroll-padding` y `padding` NO son lo mismo, y aquí hacen falta los dos.
     Sin esta línea el carrusel nace con `scrollLeft` en 64: el ajuste por
     imantado alinea el borde de la primera tarjeta con el borde de la pista
     y para lograrlo desplaza los 64 px del relleno, así que la página abre
     con el botón de «atrás» encendido y una tarjeta ya medio salida. Con
     `scroll-padding-inline` el imantado cuenta el relleno como parte del
     borde y el carrusel arranca en cero, que es donde tiene que arrancar.
     Se detectó midiendo `scrollLeft` en Chromium el 24-08-2026, no a ojo:
     los 64 px de corrimiento son casi invisibles en una captura. */
  scroll-padding-inline: var(--e8);
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .carrusel { scroll-behavior: auto; }
}


/* 03 · LA TARJETA ========================================================= */
/* Anatomía calcada de la referencia: zona de cabeza con la marca arriba y el
   título grande debajo, un filete, y zona de pie con la firma y el resumen.
   Sin sombra, por la regla de elevación. */
.tarjeta-blog {
  flex: 0 0 clamp(258px, 25vw, 336px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--fondo-superficie);
  border-radius: var(--r-m);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--dur-2) var(--curva);
}
.tarjeta-blog:hover { transform: translateY(-3px); }
.tarjeta-blog:hover .tarjeta-titulo {
  text-decoration: underline; text-underline-offset: 4px;
}

/* La cabeza lleva un tinte muy bajo del mismo verde. En la referencia esta
   zona es celeste pálido y la de abajo es blanca: es lo que separa el título
   de los metadatos sin dibujar una caja dentro de otra. */
.tarjeta-cabeza {
  background: rgba(193, 229, 78, .16);
  padding: var(--e5) var(--e5) var(--e7);
  display: flex; flex-direction: column;
  flex: 1;
}
.tarjeta-marca {
  display: flex; align-items: center; gap: var(--e2);
  margin-bottom: var(--e6);
}

/* EL SELLO DEL TEMA, que sustituyó al sello de estado el 24-08-2026.
   Antes ahí decía «Publicada», y no distinguía nada: todo lo que aparece en
   esta página está publicado, así que el sello gastaba el sitio más visible
   de la tarjeta en repetir lo mismo ocho veces. Ahora ocupa ese sitio el
   tema, que es la única información que sí separa una pieza de otra.
   Verde claro con grafito encima, 10,5:1, que es la regla del escalón Claro. */
.sello-tema {
  display: inline-flex; align-items: center;
  font-family: var(--grot); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--grafito);
  background: var(--verde-claro);
  border-radius: var(--r-boton);
  padding: 4px 10px;
  white-space: nowrap;
}
.tarjeta-titulo {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--texto-principal);
}

.tarjeta-pie {
  padding: var(--e4) var(--e5) var(--e5);
  border-top: 1px solid var(--borde-sutil);
}
.tarjeta-firma {
  display: flex; align-items: center; gap: var(--e3);
  margin-bottom: var(--e4);
  font-family: var(--grot); font-size: 13px; font-weight: 500;
  color: var(--texto-secundario);
}
/* La firma lleva inicial, no fotografía. Una foto de perfil en cada tarjeta
   convierte el índice en un muro de caras, y aquí la persona es una sola: lo
   que hay que decir es que hay una persona detrás, no quién es. */
.tarjeta-firma .inicial {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--verde-profundo); color: var(--papel);
  font-family: var(--grot); font-size: 11px; font-weight: 600;
}
.tarjeta-firma b { color: var(--texto-principal); font-weight: 600; }
.tarjeta-resumen {
  margin: 0;
  font-family: var(--grot); font-size: 14px; line-height: 1.55;
  color: var(--texto-secundario);
}


/* 04 · LA REJILLA DE TODO LO PUBLICADO ====================================
   Estructura de la referencia de Teak: tres columnas, imagen arriba, tiempo
   de lectura sobre el titular, bajada corta y «Leer» en una caja abajo.

   La tarjeta no lleva contorno exterior ni sombra, por la regla de elevación
   del sistema. Los filetes que se ven son divisiones INTERNAS, que es un
   recurso que el sistema sí usa (`.tarjeta-pie` hace lo mismo). */
.rejilla-piezas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--medianil);
}

.pieza {
  display: flex; flex-direction: column;
  background: var(--fondo-superficie);
  border-radius: var(--r-m);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--dur-2) var(--curva);
}
.pieza[hidden] { display: none; }
.pieza:hover { transform: translateY(-3px); }
.pieza:hover .pieza-titulo { text-decoration: underline; text-underline-offset: 4px; }
.pieza:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 3px; }

/* LA IMAGEN ES UN HUECO DECLARADO mientras no haya arte.
   Lleva la trama de 24 px del propio papel del sitio, en verde, así que se ve
   intencional y se ve vacía a la vez, que es exactamente lo que es. Una
   ilustración de relleno habría sido peor: promete un sistema visual que
   todavía no existe. El día que haya arte se llena el campo `imagen` del
   archivo de datos y esta clase pierde el `.sin-arte`. */
.pieza-imagen {
  aspect-ratio: 16 / 10;
  background: rgba(193, 229, 78, .30);
  position: relative;
  overflow: hidden;
}
.pieza-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pieza-imagen.sin-arte {
  background-color: rgba(193, 229, 78, .30);
  background-image:
    linear-gradient(to right, rgba(49, 125, 85, .13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(49, 125, 85, .13) 1px, transparent 1px);
  background-size: var(--reticula-paso) var(--reticula-paso);
}

.pieza-cuerpo {
  padding: var(--e5);
  display: flex; flex-direction: column;
  flex: 1;
}
/* El tiempo de lectura va ARRIBA del titular, como en la referencia. Puesto
   debajo se lee como un dato del pie; puesto aquí es lo que decide si alguien
   entra ahora o lo deja para después. */
.pieza-meta {
  display: flex; align-items: center; gap: var(--e3);
  flex-wrap: wrap;
  margin: 0 0 var(--e4);
}
.pieza-min {
  font-family: var(--grot); font-size: 12.5px;
  color: var(--texto-secundario);
  font-variant-numeric: tabular-nums;
}
.pieza-titulo {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.16;
  letter-spacing: -.01em;
  margin: 0 0 var(--e3);
  color: var(--texto-principal);
}
.pieza-resumen {
  margin: 0;
  font-family: var(--grot); font-size: 14.5px; line-height: 1.55;
  color: var(--texto-secundario);
}

/* «Leer» en su caja, abajo. El filete de arriba la separa del cuerpo y el de
   la izquierda la recorta contra el borde, que es la forma exacta que tiene
   en la referencia. */
.pieza-leer {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 7px;
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--borde-sutil);
  border-left: 1px solid var(--borde-sutil);
  font-family: var(--grot); font-size: 13.5px; font-weight: 600;
  color: var(--verde-profundo);
}
.pieza:hover .pieza-leer { background: rgba(193, 229, 78, .16); }

/* «Ver más» revela lo que ya está en la página. Cuando no queda nada, el
   contenedor entero se esconde y aparece el final escrito. */
.mas-piezas { display: flex; justify-content: center; margin-top: var(--e7); }
.mas-piezas[hidden] { display: none; }
.mas-piezas .cuantas { opacity: .65; font-weight: 400; }

.final-lista {
  margin-top: var(--e6);
  padding: var(--e5);
  text-align: center;
  font-family: var(--grot); font-size: 14px;
  color: var(--texto-secundario);
  border: 1px dashed var(--borde-sutil);
  border-radius: var(--r-m);
}
.final-lista[hidden] { display: none; }
.final-lista b { color: var(--texto-principal); font-weight: 600; }


/* 05 · LA ENTRADA (D20) =================================================== */
.entrada-blog { padding-block: var(--e8) var(--e10); }
.entrada-blog[hidden], .no-existe[hidden] { display: none; }

/* La migaja de vuelta. Vive también en `actualizaciones.css` y se repite aquí
   por la misma razón que el sello de revisión: las dos hojas son hermanas y
   no dependientes. Sin esta regla el enlace caía al azul subrayado del
   navegador, que se vio en Chromium el 24-08-2026. */
.migaja {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  color: var(--verde-profundo);
  text-decoration: none;
  margin-bottom: var(--e7);
}
.migaja:hover { text-decoration: underline; text-underline-offset: 3px; }

.a-cabeza { margin-bottom: var(--e8); }
#a-titulo { margin: 0 0 var(--e4); }
#a-titulo:focus { outline: none; }
#a-titulo:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 6px; }
.a-resumen { margin: 0 0 var(--e6); max-width: 58ch; }

.a-datos {
  display: flex; flex-wrap: wrap; gap: var(--e3) var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--regla);
  font-family: var(--grot); font-size: 13px;
  color: var(--texto-secundario);
}
.a-datos span { display: inline-flex; align-items: center; gap: 7px; }
.a-datos .ms { color: var(--verde-profundo); }

/* El riel de índice. Ya existe en la plantilla de fundamentos y en el bloque
   de la investigación de `sobre`, así que aquí se reusa en vez de inventar
   una tercera navegación interna. */
.a-cuerpo { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--e8); }
.riel { position: sticky; top: calc(var(--alto-nav) + var(--e5)); align-self: start; }
.riel .rotulo {
  display: block; margin-bottom: var(--e4);
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--verde-profundo);
}
.riel ol { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.riel li { counter-increment: r; }
.riel a {
  display: block; padding: 7px 0 7px var(--e4);
  border-left: 2px solid var(--borde-sutil);
  font-family: var(--grot); font-size: 14px; line-height: 1.35;
  color: var(--texto-secundario); text-decoration: none;
}
.riel a:hover { color: var(--texto-principal); border-color: var(--verde-pleno); }
.riel a[aria-current="true"] {
  color: var(--texto-principal); font-weight: 600;
  border-color: var(--verde-pleno);
}

/* El texto de la pieza. Columna de lectura, y los tamaños salen de la escala
   del sistema, no de esta hoja.

   EL ANCHO SE ACOTA, Y ES UNA CORRECCIÓN DE SISTEMA, NO DE GUSTO.
   Antes el texto ocupaba la columna entera que le dejaba el riel, unos
   1.050 px en escritorio, o sea alrededor de 130 caracteres por renglón. El
   sistema de diseño dice, en su apartado 4, que la columna de lectura larga
   NUNCA pasa de 8 columnas (860 px), así que la entrada del blog era la única
   pantalla del sitio que incumplía esa regla. Dana lo notó leyendo, antes de
   que nadie lo midiera.

   POR QUÉ 56ch Y NO 68ch, que fue el primer intento. La unidad `ch` mide el
   ancho del cero, y en Clash Grotesk el cero es bastante más ancho que la
   letra media, así que 68ch daban 706 px y unos 89 caracteres por renglón,
   todavía por encima del rango cómodo de 60 a 75. Se midió en Chromium y se
   bajó a 56ch, que en esta tipografía rinde unos 580 px y unos 73 caracteres.
   La lección para el resto del sitio: en esta familia, `ch` no es una medida
   de caracteres, hay que comprobarla. */
.a-texto { max-width: 56ch; }
.a-texto > *:first-child { margin-top: 0; }
.a-texto h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1.14;
  letter-spacing: -.01em;
  margin: var(--e9) 0 var(--e5);
  scroll-margin-top: calc(var(--alto-nav) + var(--e5));
}
.a-texto h3 {
  font-family: var(--grot); font-weight: 600; font-size: 20px; line-height: 1.35;
  margin: var(--e7) 0 var(--e4);
  color: var(--texto-principal);
}
.a-texto p {
  font-family: var(--grot); font-size: 18px; line-height: 1.68;
  color: var(--texto-secundario);
  margin: 0 0 var(--e5);
}
.a-texto p strong { color: var(--texto-principal); font-weight: 600; }
.a-texto ul, .a-texto ol { margin: 0 0 var(--e5); padding-left: var(--e5); }
.a-texto li {
  font-family: var(--grot); font-size: 18px; line-height: 1.62;
  color: var(--texto-secundario);
  margin-bottom: var(--e3);
}
.a-texto li strong { color: var(--texto-principal); font-weight: 600; }

/* El bloque de énfasis del sistema: escalón Claro con grafito encima. Aquí
   marca la afirmación que sostiene el apartado, una por apartado y no más. */
.a-texto .clave {
  padding: var(--e5) var(--e6);
  border-radius: var(--r-m);
  background: rgba(193, 229, 78, .30);
  font-family: var(--serif); font-weight: 400;
  font-size: 21px; line-height: 1.45;
  color: var(--texto-principal);
  margin: 0 0 var(--e5);
}

/* La plantilla que el lector se lleva. Es lo que hace que la pieza no sea
   resumible por un asistente: una respuesta se resume, una plantilla no. */
.plantilla {
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-l);
  padding: var(--e6);
  margin: 0 0 var(--e5);
  background: var(--fondo-superficie);
}
.plantilla .rotulo {
  display: block; margin-bottom: var(--e4);
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--verde-profundo);
}
.plantilla pre {
  margin: 0;
  font-family: var(--grot); font-size: 15px; line-height: 1.7;
  color: var(--texto-principal);
  white-space: pre-wrap;
}
/* Los huecos por llenar se marcan con corchetes en el propio texto, no con
   color: la plantilla está para copiarse y pegarse, y el color no sobrevive
   al pegado mientras que los corchetes sí. */


/* 06 · LA SALIDA =========================================================
   AQUÍ ESTABAN EL BLOQUE DE LÍMITE Y EL DE FUENTES, quitados el 24-08-2026
   por decisión de Dana junto con sus dos secciones del HTML.

   Los campos `limite` y `fuentes` siguen escritos en `blog-datos.js`, así que
   el contenido no se perdió: volver a pintarlos es rehacer las dos secciones
   de `articulo.html` y unas cuarenta líneas de estilo.

   Antes de quitarlos, las advertencias que solo vivían en el bloque de límite
   se pasaron al cuerpo de su pieza. Las dos de derechos terminan ahora con un
   párrafo que dice que no son asesoría legal y qué no cubren, y las tres que
   citan estudios ya llevaban en el texto que son correlacionales u
   observacionales. Un aviso legal que desaparece con el contenedor que lo
   guardaba sería la clase de error que este proyecto publica cuando lo
   comete. */

/* La salida hacia el plan. Es el vínculo B hacia A del sistema: sin él, la
   biblioteca es un blog que nadie aplica, y el blog es un blog a secas. */
.salida {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e7); align-items: center;
  padding: var(--e7);
  border-radius: var(--r-l);
  background: rgba(193, 229, 78, .30);
  margin-bottom: var(--e8);
}
.salida .antetitulo { color: var(--verde-profundo); }
.salida h2 { font-family: var(--serif); }

.vecinas {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--medianil);
  padding-top: var(--e6);
  border-top: 1px solid var(--regla);
}
.vecinas a {
  display: block; padding: var(--e5);
  border-radius: var(--r-m);
  text-decoration: none;
  background: var(--fondo-superficie);
  transition: transform var(--dur-1) ease;
}
.vecinas a:hover { transform: translateY(-2px); }
.vecinas .rotulo {
  display: block; margin-bottom: 6px;
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--verde-profundo);
}
.vecinas .titulo-vecino {
  font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.25;
  color: var(--texto-principal);
}
.vecinas .siguiente { text-align: right; }
.vecinas .final {
  padding: var(--e5);
  font-family: var(--grot); font-size: 14px;
  color: var(--texto-secundario);
  align-self: center;
}
.vecinas .final.siguiente { text-align: right; }

/* El estado «en preparación» de la entrada. Es el mismo componente
   conceptual que la cola editorial de los fundamentos: se dice en qué punto
   está, en vez de enseñar una página vacía o un texto de relleno. */
.en-preparacion {
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-l);
  padding: var(--e8);
  text-align: center;
  margin-bottom: var(--e8);
}
.en-preparacion .ms { font-size: 34px; color: var(--verde-profundo); }
.en-preparacion h2 { margin: var(--e4) 0 var(--e3); }
.en-preparacion p { margin: 0 auto var(--e5); max-width: 56ch; }


/* 07 · PUNTOS DE CORTE ==================================================== */
@media (max-width: 1199px) {
  .a-cuerpo { grid-template-columns: 1fr; gap: var(--e6); }
  .riel { position: static; }
  .riel ol { display: flex; flex-wrap: wrap; gap: var(--e2); }
  .riel a { border-left: 0; border-bottom: 2px solid var(--borde-sutil); padding: 6px var(--e3); }
}

@media (max-width: 1023px) {
  /* Dos columnas en tableta. A tres, el titular de la tarjeta cae en cinco
     renglones y la rejilla se lee como una lista de palabras sueltas. */
  .rejilla-piezas { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .panel { padding: var(--e8) 0 var(--e7); border-radius: var(--r-m); }
  /* El relleno de la pista baja a 24, y el `scroll-padding` tiene que bajar
     con él o el imantado vuelve a desplazar la diferencia. */
  .panel-interior, .carrusel { padding-inline: var(--e5); }
  .carrusel { scroll-padding-inline: var(--e5); }
  .portada-titular { max-width: none; }
  .portada-fila { margin-top: var(--e7); }
  .portada-bajada { margin-left: 0; }

  .rejilla-piezas { grid-template-columns: 1fr; }
  /* En una sola columna la imagen se achata: a 16/10 ocupa media pantalla
     antes de que se lea un solo titular. */
  .pieza-imagen { aspect-ratio: 2 / 1; }
  .mas-piezas .boton { width: 100%; }

  .salida { grid-template-columns: 1fr; gap: var(--e5); }
  .salida .boton { width: 100%; }
  .vecinas { grid-template-columns: 1fr; }
  .vecinas .siguiente, .vecinas .final.siguiente { text-align: left; }
  .limite { padding: var(--e6); }
  .limite p { font-size: 19px; }
  .a-texto p, .a-texto li { font-size: 17px; }
}


/* 08 · IMPRESIÓN ========================================================== */
@media print {
  .nav, .hoja-menu, .salto, .carrusel-controles, .riel,
  .salida, .vecinas, .cierre-indice, .mas-piezas, .pie { display: none !important; }
  .papel-reticulado { background-image: none !important; }
  body { background: none !important; font-size: 11pt; }
  .panel, .tarjeta-blog, .pieza, .fuentes { break-inside: avoid; }
  .a-cuerpo { grid-template-columns: 1fr; }
  .limite { background: none !important; color: #000 !important; border: 1px solid #333; }
  .limite h2, .limite p { color: #000 !important; }
  /* Al imprimir, lo escondido por «Ver más» tiene que salir igual: en papel
     no hay botón que pulsar. */
  .pieza[hidden] { display: flex !important; }
  .rejilla-piezas { grid-template-columns: 1fr 1fr; }
  .pieza-imagen { display: none; }
}