/* ════════════════════════════════════════════════════════════════════════════════════════
   PÁGINAS DE TEXTO: el blog y las legales. Se carga detrás de sitio.css y solo usa sus tokens.
   Papel claro, la marca solo como tinta, reglas de 1 px y radio de 2 px. Sin JavaScript.
   Las dos fuentes se declaran aquí con ruta absoluta: estas páginas no cargan producto.css.
   ════════════════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Geist";
  src: url("/assets/fuentes/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fuentes/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* La cabecera no se pega: en una página de lectura no acompaña al texto. */
.cabecera { position: static; }
.navegacion a[aria-current="page"] { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--marca); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }

/* ── Cabeza de la página ──────────────────────────────────────────────────────────────── */

.pagina { padding-block: var(--e-7) var(--seccion); }
.pagina-cabeza { max-width: calc(var(--medida) * 1.25); }
.pagina h1 { font-size: var(--t-capitulo); line-height: 1.06; letter-spacing: -0.025em; font-weight: 650; text-wrap: balance; overflow-wrap: break-word; }
.pagina-meta { margin-top: var(--e-4); font-size: var(--t-pequeno); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.pagina-entrada { margin-top: var(--e-5); max-width: var(--medida); font-size: var(--t-entrada); line-height: 1.5; color: var(--tinta-2); }

.miga { margin-bottom: var(--e-3); font-size: var(--t-pequeno); font-weight: 500; }
.miga a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ── Cuerpo ───────────────────────────────────────────────────────────────────────────── */

.prosa { max-width: var(--medida); margin-top: var(--e-7); font-size: var(--t-cuerpo); line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.prosa > * + * { margin-top: var(--e-5); }
.prosa p, .prosa li { text-wrap: pretty; }
.prosa h2 { margin-top: var(--e-8); font-size: var(--t-seccion); line-height: 1.15; letter-spacing: -0.015em; font-weight: 650; scroll-margin-top: var(--e-5); }
.prosa h3 { margin-top: var(--e-6); font-family: var(--f-texto); font-size: var(--t-cuerpo); line-height: 1.4; font-weight: 650; }
.prosa h2 + *, .prosa h3 + * { margin-top: var(--e-3); }
.prosa > :first-child { margin-top: 0; }
.prosa strong { font-weight: 650; }
.prosa a { overflow-wrap: anywhere; }

.prosa ul, .prosa ol { padding-left: 1.375rem; }
.prosa li + li { margin-top: var(--e-2); }
.prosa li::marker { color: var(--tinta-3); }

.prosa blockquote { margin-inline: 0; padding-left: var(--e-5); border-left: 3px solid var(--marca); font-size: var(--t-entrada); line-height: 1.5; color: var(--tinta); }

/* Las tablas van en una caja con su propio desplazamiento: la página nunca se mueve de lado.
   Las cabeceras parten línea: con `nowrap`, a 390 px tres tablas de siete medían más que su caja
   y la última columna quedaba escondida sin señal (medido el 30-sep-2026: 373, 494 y 501 px en 356). */
.prosa .tabla-caja { margin-top: var(--e-5); max-width: 100%; overflow-x: auto; border: 1px solid var(--regla); border-radius: var(--r-papel); }
.tabla-texto { width: 100%; border-collapse: collapse; font-size: var(--t-pequeno); line-height: 1.45; font-variant-numeric: tabular-nums; }
.tabla-texto th, .tabla-texto td { padding: var(--e-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--regla); }
.tabla-texto th { font-size: var(--t-etiqueta); font-weight: 600; color: var(--tinta-2); background: var(--papel-hondo); }
.tabla-texto tbody tr:last-child td { border-bottom: 0; }
.tabla-texto .cen { text-align: center; }
.tabla-texto .der { text-align: right; }

/* ── Cierre del artículo ──────────────────────────────────────────────────────────────── */

.demo-cierre { max-width: var(--medida); margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--regla); display: grid; gap: var(--e-5); justify-items: start; }
.demo-cierre p { font-family: var(--f-titular); font-size: var(--t-seccion); line-height: 1.2; letter-spacing: -0.015em; font-weight: 650; text-wrap: balance; }

/* ── Lista de artículos: filas separadas por una regla, no tarjetas ───────────────────── */

.lista-articulos { list-style: none; margin: var(--e-7) 0 0; padding: 0; max-width: calc(var(--medida) * 1.25); border-top: 1px solid var(--regla); }
.lista-articulos li { padding-block: var(--e-5); border-bottom: 1px solid var(--regla); }
.lista-articulos time { display: block; font-size: var(--t-pequeno); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.lista-articulos h2, .lista-articulos h3 { margin-top: var(--e-1); font-size: var(--t-seccion); line-height: 1.2; letter-spacing: -0.015em; font-weight: 650; }
.lista-articulos h2 a, .lista-articulos h3 a { display: inline-block; padding-block: var(--e-2); color: var(--tinta); text-decoration-color: transparent; }
.lista-articulos h2 a:hover, .lista-articulos h3 a:hover { color: var(--marca); text-decoration-color: var(--marca); }
.lista-articulos p { margin-top: var(--e-1); max-width: var(--medida); color: var(--tinta-2); }
.lista-vacia { margin-top: var(--e-7); padding-block: var(--e-5); max-width: var(--medida); border-block: 1px solid var(--regla); color: var(--tinta-2); }

.sigue { padding-block: var(--e-8); background: var(--papel-hondo); border-top: 1px solid var(--regla); }
.sigue > .envoltura > h2 { font-size: var(--t-seccion); line-height: 1.15; letter-spacing: -0.015em; font-weight: 650; }
.sigue .lista-articulos { margin-top: var(--e-5); }
/* Dentro del artículo el cierre ya deja su aire: la franja de después no lo dobla. */
.pagina:has(+ .sigue) { padding-bottom: var(--e-8); }

@media (max-width: 767px) {
  .pagina { padding-top: var(--e-6); }
  .prosa { margin-top: var(--e-6); }
  .prosa h2 { margin-top: var(--e-7); }
  .prosa blockquote { padding-left: var(--e-4); }
}