/* ═══════════════════════════════════════════════════════════════
   LA ENTRADA — la ficha de la referencia.

   Estructura «registro de canto» (seed 1f94094b, candidato 6):
   registro a la izquierda, columna de lectura al centro, canto de
   apartados a la derecha. Ningún lado queda vacío y ningún componente
   es nuevo: el canto es la misma pieza de la portada apuntando a los
   apartados de esta entrada en vez de a las ocho secciones.

   Funciona sobre las 58 entradas publicadas sin tocar el generador:
   se construye desde los h2, de los que hay mediana 9 y máximo 13.
   ═══════════════════════════════════════════════════════════════ */

.articulo { background: var(--papel-fila); }

/* ── La retícula ─────────────────────────────────────────────────
   3.5rem de registro + 40rem de lectura + 18rem de canto = 61.5rem,
   más dos calles de 2.5rem = 66.5rem. En un contenedor de 78rem el
   bloque ocupa el ancho real en vez de dejar dos huecos muertos.

   La tercera columna mide 18rem y no 15 porque aloja dos piezas, no una:
   arriba la lámina de la entrada, debajo el canto de apartados. Ambas
   comparten filete izquierdo, así que la columna se lee como un solo
   raíl. La de lectura cede 2rem y se queda en 640 px —unos 70 signos,
   que sigue siendo medida de lectura buena.
   ─────────────────────────────────────────────────────────────── */
.articulo-rejilla {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 40rem) 18rem;
  gap: 0 2.5rem;
  justify-content: center;
}
/* La cabecera usa la misma retícula para que el titular arranque
   exactamente donde arranca el cuerpo, y no tirado contra el borde. */
.articulo-cabeza { grid-column: 2; grid-row: 1; }

/* Titular y lámina se apoyan los dos en la tira de ficha. Alinear por
   arriba dejaría aire muerto justo encima del filete, que es donde más
   se nota. */
.articulo-ficha .articulo-rejilla { align-items: end; }

/* ── Cabecera ────────────────────────────────────────────────── */
.articulo-ficha { border-bottom: 1px solid var(--filete); }
.articulo-ficha .contenedor { padding-block: 2.5rem 1.75rem; }

.articulo-cabeza .etiqueta-seccion { margin-bottom: 1.15rem; }

/* Escalón de tamaño deliberado: 3.4rem de titular contra 1.125rem de
   cuerpo. La proporción tiene que leerse de un vistazo. */
.articulo h1 {
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* La entradilla reutiliza el paso de 1.2rem que ya usa el Subtítulo, pero en
   Faustina y peso normal: mismo escalón, otro papel. Se queda por debajo del
   ancho del titular para que no compita con él. */
.articulo-entradilla {
  font-family: var(--f-prosa);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: 34rem;
  margin-top: 1.15rem;
}

/* ── Tira de ficha técnica, a sangre ─────────────────────────── */
.ficha-tira { background: var(--tinta); color: rgba(255,255,255,0.75); }
.ficha-tira dl {
  display: flex; flex-wrap: wrap;
  padding-block: 0.85rem;
}
.ficha-tira dl > div {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding-right: 2.5rem; margin-right: 2.5rem;
  border-right: 1px solid rgba(255,255,255,0.18);
}
.ficha-tira dl > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.ficha-tira dt {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--casa-clara);
}
.ficha-tira dd {
  font-size: 0.9375rem; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ── La lámina ───────────────────────────────────────────────────
   El circuito de _blog-content/ no entrega fotografías: entrega láminas
   con tipografía impresa dentro, 1080×1350 en 50 de las 60. Recortarlas
   a una banda les corta las palabras por la mitad, así que aquí NO se
   recorta nada — la lámina se monta a su proporción real, sea cual sea.

   Va en la columna del canto, con el mismo rótulo y el mismo filete, de
   modo que el raíl derecho se lee entero: LÁMINA, la imagen, APARTADOS,
   el índice.
   ─────────────────────────────────────────────────────────────── */
.articulo-lamina { grid-column: 3; grid-row: 1; }

/* Mismo tratamiento que .canto-titulo: es el mismo raíl. */
.lamina-rotulo {
  color: var(--tinta-3);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--tinta);
  margin-bottom: 0.75rem;
}

.lamina-marco {
  display: block; position: relative;
  border: 1px solid var(--filete);
  background: var(--papel-tinte);
}
/* El vidriado de la sección firma la lámina por arriba. */
.lamina-marco::before {
  content: '';
  position: absolute; left: -1px; right: -1px; top: -1px;
  height: 3px; background: var(--sec);
}
/* height:auto respeta la proporción del original. El tope está calculado
   para no morder JAMÁS al 4:5 del circuito: la lámina más ancha que existe
   es la de 30rem que se monta al apilarse, y 30 × 5/4 = 37.5rem justos. El
   contain solo entra en juego con una lámina más alta que 4:5 —hoy hay una
   de sesenta—, y entonces prefiere dos franjas de papel a una palabra
   cortada. */
.lamina-marco img {
  display: block;
  width: 100%; height: auto;
  max-height: 37.5rem;
  object-fit: contain;
}

/* ── La banda de las páginas pilar ───────────────────────────────
   page.php no tiene retícula de tres columnas —son seis páginas hechas a
   mano, no entradas del circuito—, así que ahí la imagen sigue siendo una
   banda. Pero tampoco se recorta: se monta centrada sobre el papel
   entintado, a su proporción, con tope de altura.
   ─────────────────────────────────────────────────────────────── */
.articulo-figura {
  background: var(--papel-tinte);
  border-bottom: 1px solid var(--filete);
  text-align: center;
}
.articulo-figura img {
  display: inline-block; vertical-align: top;
  width: auto; max-width: 100%;
  height: auto; max-height: 30rem;
}

/* ── El registro (columna izquierda) ─────────────────────────── */
.articulo-registro { grid-column: 1; }
.registro-pegado {
  position: sticky; top: 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding-top: 2.75rem;
  border-right: 1px solid var(--filete);
  padding-right: 0.75rem;
  margin-right: -0.75rem;
}
.registro-titulo {
  color: var(--tinta-3);
  writing-mode: vertical-rl;
  margin-bottom: 0.5rem;
}

.compartir-boton {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--filete);
  color: var(--tinta-2);
  background: var(--papel-fila);
  transition: color var(--avance), border-color var(--avance), background var(--avance);
}
.compartir-boton svg { width: 1.05rem; height: 1.05rem; }
.compartir-boton:hover { color: #fff; background: var(--casa-texto); border-color: var(--casa-texto); }
.compartir-boton.es-copiado { color: #fff; background: var(--sec); border-color: var(--sec); }

/* ── El canto de apartados (columna derecha) ─────────────────── */
.articulo-canto { grid-column: 3; }
.canto-pegado { position: sticky; top: 1.5rem; padding-top: 2.75rem; }
.canto-titulo {
  color: var(--tinta-3);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--tinta);
  margin-bottom: 0.35rem;
}

/* Las pestañas: misma gramática que el canto de la portada —número,
   vidriado de la sección, la activa saturada y el resto apagado— pero
   dentro de la retícula, porque aquí el canto es el del pliego. */
.articulo-canto .canto-pestana {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: baseline;
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid var(--filete);
  background: none; color: var(--tinta-2);
  opacity: 1;
  transform: none;
  transition: color var(--avance), background var(--avance);
  white-space: normal;
}
/* Tres estados y los tres legibles. En reposo el numero es tinta sobre
   papel tintado (9.0:1); blanco sobre el gris de filete daba 2.83:1 y no
   pasaba AA, que es justo el error que un numero pequeno no perdona. */
.articulo-canto .canto-pestana .codigo {
  font-size: 0.6875rem; font-weight: 700;
  color: var(--tinta-2); background: var(--papel-tinte);
  text-align: center; padding: 0.15rem 0;
  transition: background var(--avance), color var(--avance);
}
.articulo-canto .canto-pestana .nombre {
  font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
  letter-spacing: 0; text-transform: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.articulo-canto .canto-pestana:hover { color: var(--tinta); background: var(--papel-tinte); }
.articulo-canto .canto-pestana:hover .codigo { color: #fff; background: var(--tinta-3); }

/* El apartado en el que estás: el número toma el vidriado de la sección
   y el rótulo se pone en tinta plena. Es el pulgar del catálogo. */
.articulo-canto .canto-pestana.es-activa { color: var(--tinta); }
.articulo-canto .canto-pestana.es-activa .codigo { color: #fff; background: var(--sec); }

/* ── Índice plegado (donde no hay canto) ─────────────────────── */
.indice-plegado { display: none; }
.indice-plegado summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; cursor: pointer;
  padding: 0.75rem 0;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--filete);
  color: var(--tinta-2);
}
.indice-plegado summary::after { content: '+'; font-weight: 700; color: var(--casa-texto); }
.indice-plegado[open] summary::after { content: '−'; }
.indice-plegado ol { padding-block: 0.5rem; }
.indice-plegado li { border-bottom: 1px solid var(--filete); }
.indice-plegado li a {
  display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem;
  padding: 0.6rem 0;
  font-size: 0.9375rem; line-height: 1.35; color: var(--tinta-2);
}
.indice-plegado .codigo { font-size: 0.6875rem; font-weight: 700; color: var(--casa-texto); }

/* ── Cuerpo ──────────────────────────────────────────────────── */
.articulo-columna { grid-column: 2; }

.articulo-cuerpo {
  padding-block: 2.75rem 2rem;
  font-family: var(--f-prosa);
  font-size: 1.125rem;
  line-height: 1.72;
  color: var(--tinta-2);
  counter-reset: apartado;
}

.articulo-cuerpo > * + * { margin-top: 1.15em; }

.articulo-cuerpo :is(h2, h3, h4) {
  font-family: var(--f-estructura);
  color: var(--tinta);
  letter-spacing: -0.02em;
  line-height: 1.22;
}
/* Más aire encima de un título que debajo: un solo ritmo en la página */
.articulo-cuerpo h2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); font-weight: 700; margin-top: 2.5em; scroll-margin-top: 1.5rem; }
.articulo-cuerpo h3 { font-size: 1.2rem; font-weight: 700; margin-top: 2em; }
.articulo-cuerpo h4 { font-size: 1.05rem; font-weight: 700; margin-top: 1.8em; }
.articulo-cuerpo :is(h2, h3, h4) + * { margin-top: 0.7em; }

/* El apartado numerado. Solo el 2% de los 501 h2 del corpus traen su
   propio «N.» en el texto, así que la cifra la pone el tema y sale
   igual en las 58 entradas ya publicadas. */
.articulo-cuerpo h2 {
  counter-increment: apartado;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  padding-top: 0.8em;
  border-top: 2px solid var(--casa);
}
.articulo-cuerpo h2::before {
  content: counter(apartado, decimal-leading-zero);
  font-size: 0.875rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff; background: var(--sec);
  display: flex; align-items: center; justify-content: center;
  height: 1.75rem;
  letter-spacing: 0.02em;
}

.articulo-cuerpo a {
  color: var(--casa-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.articulo-cuerpo a:hover { text-decoration-thickness: 2px; }
.articulo-cuerpo strong { color: var(--tinta); font-weight: 600; }

.articulo-cuerpo ul, .articulo-cuerpo ol { padding-left: 1.6em; }
.articulo-cuerpo li + li { margin-top: 0.5em; }
.articulo-cuerpo ul > li { list-style: none; position: relative; }
.articulo-cuerpo ul > li::before {
  content: ''; position: absolute; left: -1.15em; top: 0.62em;
  width: 6px; height: 6px; background: var(--casa);
}
.articulo-cuerpo ol { list-style: decimal; }
.articulo-cuerpo ol > li::marker {
  font-family: var(--f-estructura); font-weight: 700;
  color: var(--casa-texto); font-variant-numeric: tabular-nums;
}

/* Una nota apartada va encajonada, nunca con filete al costado */
.articulo-cuerpo blockquote {
  border: 1px solid var(--filete);
  border-top: 2px solid var(--casa);
  background: var(--papel);
  padding: 1.15rem 1.35rem;
  font-size: 1.0625rem;
}
.articulo-cuerpo blockquote > * + * { margin-top: 0.7em; }

/* La ÚNICA clase que trae el contenido en las 58 entradas. No se toca. */
.articulo-cuerpo blockquote.servicio-relacionado {
  border: 1px solid var(--tinta);
  border-top: 0;
  background: var(--papel-fila);
  padding-top: 1.35rem;
}
.articulo-cuerpo blockquote.servicio-relacionado::before {
  content: 'Siguiente paso';
  display: block;
  background: var(--casa); color: #fff;
  margin: -1.35rem -1.35rem 1rem;
  padding: 0.4rem 1.35rem;
  font-family: var(--f-estructura);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
}

.articulo-cuerpo img { margin-block: 1.6em; border: 1px solid var(--filete); }
.articulo-cuerpo figcaption { font-size: 0.8125rem; color: var(--tinta-3); margin-top: 0.5em; }

.articulo-cuerpo table {
  width: 100%; border-collapse: collapse;
  font-family: var(--f-estructura); font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.articulo-cuerpo :is(th, td) {
  border: 1px solid var(--filete);
  padding: 0.6rem 0.75rem; text-align: left; vertical-align: top;
}
.articulo-cuerpo th { background: var(--papel); font-weight: 700; color: var(--tinta); }

.articulo-cuerpo hr { border: 0; border-top: 1px solid var(--filete); margin-block: 2.2em; }

/* ── Cierre ──────────────────────────────────────────────────── */
.articulo-cierre { padding-bottom: 3rem; }

.compartir-fila {
  display: none;
  align-items: center; gap: 0.6rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--filete);
  border-bottom: 1px solid var(--filete);
  margin-bottom: 1.5rem;
}
.compartir-fila .rotulo { color: var(--tinta-3); margin-right: auto; }

.articulo-volver {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-3);
  border-bottom: 1px solid var(--filete-fuerte); padding-bottom: 3px;
  transition: color var(--avance), border-color var(--avance);
}
.articulo-volver:hover { color: var(--casa-texto); border-bottom-color: currentColor; }

/* ── Responsive ──────────────────────────────────────────────── */

/* Sin sitio para el canto: el índice pasa a plegable sobre el cuerpo. */
@media (max-width: 1180px) {
  .articulo-rejilla { grid-template-columns: 3.5rem minmax(0, 40rem); }
  .articulo-canto { display: none; }
  .indice-plegado { display: block; margin-top: 2.25rem; }

  /* Sin raíl derecho, la lámina baja bajo el titular. El marco pasa a ocupar
     la columna entera —a plomo con el filete del rótulo que lo encabeza— y la
     lámina se monta CENTRADA dentro. Así el papel que sobra queda igual a los
     dos lados en vez de amontonarse todo a la derecha, que era lo que
     descuadraba la entrada en tableta. */
  .articulo-lamina { grid-column: 2; grid-row: auto; margin-top: 1.75rem; }
  .lamina-marco img { max-width: 30rem; margin-inline: auto; }
}

@media (max-width: 900px) {
  .articulo-rejilla { grid-template-columns: minmax(0, 1fr); }
  .articulo-registro { display: none; }
  .articulo-cabeza,
  .articulo-lamina,
  .articulo-columna { grid-column: 1; }
  .articulo-lamina { margin-top: 1.5rem; }
  .articulo-entradilla { font-size: 1.125rem; max-width: none; }

  .articulo-ficha .contenedor { padding-block: 1.75rem 1.35rem; }
  .articulo-cuerpo { font-size: 1.0625rem; padding-block: 2rem 1.5rem; }
  .articulo-cuerpo h2 { grid-template-columns: 2.15rem minmax(0, 1fr); gap: 0.7rem; }

  .compartir-fila { display: flex; }

  /* La tira de ficha deja de ser una fila y pasa a dos columnas */
  .ficha-tira dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem 1.5rem; }
  .ficha-tira dl > div { padding-right: 0; margin-right: 0; border-right: 0; }
}

@media (max-width: 480px) {
  .ficha-tira dl { grid-template-columns: 1fr; }
}