/*
 * DeMente — «Cuaderno de consulta».
 * Revista de divulgación sobre salud mental: papel cálido, tinta pizarra (la del logotipo), azul sereno y un único
 * acento teja. STIX Two Text (serifa de publicación científica) para leer; Manrope para la interfaz.
 */

:root {
  /* color */
  --papel: #f5f3ef;
  --papel-claro: #fbfaf7;
  --niebla: #e4ebf0;
  --pizarra: #1d2a36;
  --tinta: #24303b;
  --tenue: #59636d;
  --azul: #355a7c;
  --azul-oscuro: #26445f;
  --teja: #a2482a;
  --teja-claro: #e9a985;
  --borde: #d9d4cb;
  --borde-suave: #e7e3db;

  /* tipografía */
  --serif: 'STIX Two Text', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --t-0: .875rem;
  --t-1: 1rem;
  --t-2: 1.125rem;
  --t-3: 1.375rem;
  --t-4: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --t-5: clamp(1.875rem, 1.4rem + 1.8vw, 2.625rem);
  --t-6: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --lectura: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);

  /* espacio (escala de 4/8) */
  --e-1: .5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4rem;
  --e-7: 6rem;
  --margen: clamp(1.25rem, 4vw, 2.5rem);
  --ancho: 76rem;
  --medida: 38.5rem;
  --radio: 3px;

  /* variables del contenido común */
  --ancho-texto: var(--medida);
  --ancho-amplio: 56rem;
  --color-texto: var(--tinta);
  --color-fondo: var(--papel);
  --color-suave: var(--niebla);
  --color-borde: var(--borde);
  --color-acento: var(--azul);
  --color-acento-texto: #fff;
  --color-tenue: var(--tenue);
  --fuente-texto: var(--serif);
  --fuente-titulos: var(--serif);
  color-scheme: light;
  accent-color: var(--azul);
  scrollbar-color: var(--azul) var(--papel);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--serif); font-size: var(--t-2); line-height: 1.6;
  font-kerning: normal; font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: #cddbe7; color: var(--pizarra); }
img { max-width: 100%; height: auto; }
a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .18s ease, text-decoration-color .18s ease; }
a:hover { color: var(--teja); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }
main { display: block; outline: none; }

.envoltorio { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.envoltorio-texto { width: 100%; max-width: calc(var(--medida) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.x-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.saltar { position: absolute; left: var(--e-2); top: -4rem; z-index: 100; padding: .75rem 1.25rem; background: var(--pizarra); color: #fff; font: 600 var(--t-1)/1 var(--sans); border-radius: var(--radio); }
.saltar:focus { top: var(--e-2); color: #fff; }

.icono { flex: none; vertical-align: -.2em; }

/* ------------------------------------------------------------------ componentes comunes */

.antetitulo {
  margin: 0 0 var(--e-2); font: 700 .8125rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--teja);
}
.antetitulo a { color: inherit; text-decoration: none; }
.antetitulo a:hover { text-decoration: underline; }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: 0; font: 500 .9375rem/1.4 var(--sans); color: var(--tenue); font-variant-numeric: lining-nums; }
.meta > * { display: inline-flex; align-items: center; gap: .35rem; }
.meta strong { color: var(--tinta); font-weight: 700; }
.meta a { color: inherit; text-decoration: none; min-height: 24px; }
.meta a:hover { color: var(--teja); }

.boton, .contenido .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .75rem 1.4rem;
  border: 1px solid var(--pizarra); border-radius: 999px; background: var(--pizarra); color: #fff;
  font: 700 .9375rem/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.boton:hover, .contenido .boton:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: #fff; transform: translateY(-1px); box-shadow: none; }
.boton:active { transform: translateY(0); }
.boton .icono { transition: transform .2s ease; }
.boton:hover .icono-flecha { transform: translateX(3px); }
.boton-secundario { background: transparent; color: var(--pizarra); }
.boton-secundario:hover { background: var(--pizarra); color: #fff; }

.meandro { display: block; width: 15rem; max-width: 100%; height: auto; color: var(--teja); margin: 0; }

.bloque-cabecera { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-2) var(--e-4); margin-bottom: var(--e-4); }
.bloque-cabecera .meandro { width: 10rem; color: var(--borde); }
.bloque-titulo { margin: 0; font: 600 var(--t-4)/1.15 var(--serif); color: var(--pizarra); letter-spacing: -.005em; }
.bloque-texto { flex: 1 1 100%; margin: 0; color: var(--tenue); font-size: var(--t-2); font-style: italic; }
.con-filete { background: linear-gradient(var(--borde), var(--borde)) center top / calc(100% - 2 * var(--margen)) 1px no-repeat; }
.bloque-enlace { margin: 0; font: 700 .9375rem/1.2 var(--sans); }
.bloque-enlace a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; text-decoration: none; }

.rejilla-4, .rejilla-3 { display: grid; gap: var(--e-5) var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .rejilla-4, .rejilla-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .rejilla-4 { grid-template-columns: repeat(4, 1fr); } .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }

/* tarjeta con ilustración */
.tarjeta { display: flex; flex-direction: column; gap: .75rem; }
.tarjeta-imagen { display: block; overflow: hidden; border-radius: var(--radio); background: var(--niebla); }
.tarjeta-imagen img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.tarjeta:hover .tarjeta-imagen img { transform: scale(1.025); }
.tarjeta-lamina .tarjeta-imagen { max-width: 16rem; }
@media (max-width: 39.99rem) { .tarjeta-imagen img { aspect-ratio: 3 / 2; } }
.tarjeta-titulo { margin: 0; font: 600 var(--t-3)/1.22 var(--serif); }
.tarjeta-titulo a { color: var(--pizarra); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s ease, color .2s ease; }
.tarjeta-titulo a:hover { color: var(--azul-oscuro); background-size: 100% 1px; }
.tarjeta-extracto { margin: 0; color: var(--tenue); font-size: var(--t-1); line-height: 1.55; }
.tarjeta .meta { font-size: .875rem; }

/* fila de listado */
.lista-filas { border-top: 1px solid var(--borde); }
.fila-articulo { display: grid; grid-template-columns: 1fr; gap: .5rem var(--e-4); padding: var(--e-4) 0; border-bottom: 1px solid var(--borde); }
@media (min-width: 48rem) {
  .fila-articulo { grid-template-columns: 7.5rem minmax(0, 1fr) 9rem; align-items: start; }
  .fila-articulo.sin-imagen { grid-template-columns: 7.5rem minmax(0, 1fr); }
}
.fila-fecha { margin: 0; font: 600 .875rem/1.2 var(--sans); color: var(--tenue); font-variant-numeric: lining-nums; text-transform: uppercase; letter-spacing: .06em; }
.fila-fecha time { display: inline-flex; gap: .4rem; align-items: baseline; }
@media (min-width: 48rem) { .fila-fecha time { display: flex; flex-direction: column; gap: .15rem; } }
.fila-dia { font: 500 var(--t-4)/1 var(--serif); letter-spacing: 0; color: var(--pizarra); text-transform: none; }
.fila-titulo { margin: 0 0 .5rem; font: 600 var(--t-4)/1.2 var(--serif); }
.fila-titulo a { color: var(--pizarra); text-decoration: none; }
.fila-titulo a:hover { color: var(--azul-oscuro); text-decoration: underline; text-decoration-thickness: 1px; }
.fila-extracto { margin: 0 0 .75rem; color: var(--tinta); font-size: var(--t-1); line-height: 1.6; max-width: 42rem; }
.fila-imagen { display: none; }
@media (min-width: 48rem) {
  .fila-imagen { display: block; border-radius: var(--radio); overflow: hidden; background: var(--niebla); }
  .fila-imagen img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
}

/* compacta (archivo) */
.compacta { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--e-2); align-items: center; padding: var(--e-2) 0; border-bottom: 1px solid var(--borde-suave); }
.compacta-imagen { display: block; border-radius: var(--radio); overflow: hidden; background: var(--niebla); }
.compacta-imagen img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.85); transition: filter .2s ease; }
.compacta:hover .compacta-imagen img { filter: none; }
.compacta-titulo { margin: 0 0 .25rem; font: 600 var(--t-2)/1.3 var(--serif); }
.compacta-titulo a { display: block; padding-block: .2rem; color: var(--pizarra); text-decoration: none; }
.compacta-titulo a:hover { color: var(--azul-oscuro); text-decoration: underline; }
.compacta .meta { font-size: .875rem; }

/* ------------------------------------------------------------------ cabecera */

/* el desenfoque va en un pseudoelemento: en la propia cabecera crearía un bloque contenedor para el menú fijo */
.cabecera { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--borde); }
.cabecera::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(245, 243, 239, .95); }
@supports (backdrop-filter: blur(8px)) { .cabecera::before { backdrop-filter: blur(8px); background: rgba(245, 243, 239, .86); } }
html.menu-abierto .cabecera::before { background: var(--papel); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 64px; }
.marca { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; color: var(--pizarra); text-decoration: none; }
.marca:hover { color: var(--pizarra); }
.marca-icono { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #eef0f1; box-shadow: 0 0 0 1px var(--borde); }
.marca-icono img { display: block; width: 100%; height: 100%; object-fit: cover; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-nombre { font: 600 1.625rem/1 var(--serif); letter-spacing: -.01em; }
.marca-nombre em { font-style: italic; font-weight: 500; color: var(--azul); }
.marca-lema { margin-top: .3rem; font: 600 .6875rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }

.menu-boton {
  display: inline-flex; align-items: center; gap: .5rem; min-width: 44px; min-height: 44px; padding: 0 .75rem; margin-right: -.5rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--pizarra); font: 700 .9375rem/1 var(--sans); cursor: pointer;
}
.menu-boton:hover { background: var(--niebla); }
.menu-boton-icono { display: inline-grid; }
.menu-boton-icono .icono { grid-area: 1 / 1; }
.menu-boton .icono-cerrar, .menu-boton-cerrar { display: none; }
.menu-boton[aria-expanded="true"] .icono-cerrar, .menu-boton[aria-expanded="true"] .menu-boton-cerrar { display: inline; }
.menu-boton[aria-expanded="true"] .icono-menu, .menu-boton[aria-expanded="true"] .menu-boton-abrir { display: none; }

.navegacion .menu { list-style: none; margin: 0; padding: 0; }
.navegacion a { text-decoration: none; }
.navegacion-nota { display: none; }

@media (max-width: 63.99rem) {
  .navegacion {
    position: fixed; inset: 64px 0 0 0; z-index: 40; display: none; flex-direction: column; gap: var(--e-3);
    padding: var(--e-4) var(--margen) calc(var(--e-5) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--papel);
  }
  .navegacion.abierto { display: flex; animation: aparecer .2s ease; }
  html.menu-abierto, html.menu-abierto body { overflow: hidden; }
  .navegacion .menu { display: flex; flex-direction: column; border-top: 1px solid var(--borde); }
  .navegacion .menu a { display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid var(--borde); font: 600 var(--t-4)/1.2 var(--serif); color: var(--pizarra); }
  .navegacion .menu a[aria-current] { color: var(--teja); }
  .navegacion-buscar { display: inline-flex; align-items: center; gap: .6rem; align-self: flex-start; min-height: 48px; padding: 0 1.25rem; border: 1px solid var(--pizarra); border-radius: 999px; color: var(--pizarra); font: 700 var(--t-1)/1 var(--sans); }
  .navegacion-nota { display: block; margin: auto 0 0; color: var(--tenue); font-style: italic; }
}
@media (min-width: 64rem) {
  .cabecera-fila { min-height: 84px; }
  .marca-icono { width: 44px; height: 44px; }
  .marca-nombre { font-size: 1.875rem; }
  .menu-boton { display: none; }
  .navegacion { display: flex; align-items: center; gap: var(--e-3); }
  .navegacion .menu { display: flex; gap: var(--e-3); }
  .navegacion .menu a, .navegacion-buscar {
    position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
    font: 600 .9375rem/1 var(--sans); color: var(--tinta); letter-spacing: .01em;
  }
  .navegacion .menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--teja); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
  .navegacion .menu a:hover::after, .navegacion .menu a[aria-current]::after { transform: scaleX(1); }
  .navegacion .menu a:hover, .navegacion-buscar:hover { color: var(--pizarra); }
  .navegacion-buscar { padding: 0 1rem; margin-left: var(--e-1); border: 1px solid var(--borde); border-radius: 999px; }
  .navegacion-buscar:hover { border-color: var(--pizarra); }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ portada */

.portada-cabecera { display: grid; gap: var(--e-4); padding-block: var(--e-5) var(--e-4); }
@media (min-width: 64rem) { .portada-cabecera { grid-template-columns: minmax(0, 1fr) 22rem; align-items: end; padding-block: var(--e-6) var(--e-5); } }
.portada-h1 { margin: 0; font: 500 var(--t-6)/1.04 var(--serif); letter-spacing: -.02em; color: var(--pizarra); max-width: 15ch; }
.portada-sub { margin: var(--e-3) 0 0; max-width: 34rem; font: italic 400 var(--t-3)/1.45 var(--serif); color: var(--tenue); }
.portada-datos { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin: 0; padding-top: var(--e-3); border-top: 2px solid var(--pizarra); }
.portada-datos div { display: flex; flex-direction: column-reverse; gap: .3rem; }
.portada-datos dt { font: 600 .8125rem/1.3 var(--sans); color: var(--tenue); }
.portada-datos dd { margin: 0; font: 500 var(--t-5)/1 var(--serif); color: var(--pizarra); font-variant-numeric: lining-nums; letter-spacing: -.01em; white-space: nowrap; }
@media (min-width: 64rem) { .portada-cabecera { grid-template-columns: minmax(0, 1fr) auto; } }

.destacado { display: grid; gap: var(--e-4); padding-block: var(--e-5) var(--e-6); }
@media (min-width: 56rem) { .destacado { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--e-6); } }
.destacado-imagen { display: block; border-radius: var(--radio); overflow: hidden; background: var(--niebla); max-width: 34rem; }
.destacado-imagen img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s ease; }
.destacado-imagen:hover img { transform: scale(1.02); }
.destacado-titulo { margin: 0 0 var(--e-3); font: 600 var(--t-5)/1.1 var(--serif); letter-spacing: -.01em; }
.destacado-titulo a { color: var(--pizarra); text-decoration: none; }
.destacado-titulo a:hover { color: var(--azul-oscuro); }
.destacado-extracto { margin: 0 0 var(--e-3); font-size: var(--lectura); line-height: 1.65; color: var(--tinta); max-width: 34rem; }
.destacado .meta { margin-bottom: var(--e-4); }

.recientes { padding-block: var(--e-5) var(--e-6); }

.manifiesto { background: var(--pizarra); color: #e9eef2; padding-block: var(--e-6); }
.manifiesto-fila { display: grid; gap: var(--e-3); }
@media (min-width: 64rem) { .manifiesto-fila { grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--e-6); padding-block: var(--e-3); } .manifiesto-enlace { grid-column: 2; } }
.manifiesto-rotulo { margin: 0; font: 700 .8125rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--teja-claro); }
.manifiesto-texto { margin: 0; padding: 0; border: 0; }
.manifiesto-texto p { margin: 0; font: italic 400 clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem)/1.32 var(--serif); color: #fff; letter-spacing: -.005em; max-width: 30em; }
.manifiesto-texto footer { margin-top: var(--e-3); font: 600 .9375rem/1.4 var(--sans); color: #b9c6d1; }
.manifiesto-texto footer::before { content: "— "; }
.manifiesto-enlace { margin: 0; }
.manifiesto-enlace a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: #fff; font: 700 .9375rem/1.2 var(--sans); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.manifiesto-enlace a:hover { color: var(--teja-claro); border-color: var(--teja-claro); }
.manifiesto :focus-visible { outline-color: #fff; }

.indice { padding-block: var(--e-6); }
.indice-letras { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 var(--e-5); }
.indice-letras a {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--borde); border-radius: 50%;
  font: italic 500 1.125rem/1 var(--serif); color: var(--pizarra); text-decoration: none; background: var(--papel-claro);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.indice-letras a:hover { background: var(--pizarra); border-color: var(--pizarra); color: #fff; }
.indice-columnas { columns: 1; column-gap: var(--e-5); }
@media (min-width: 40rem) { .indice-columnas { columns: 2; } }
@media (min-width: 64rem) { .indice-columnas { columns: 3; } }
@media (min-width: 80rem) { .indice-columnas { columns: 4; } }
.indice-grupo { break-inside: avoid; margin-bottom: var(--e-4); padding-top: var(--e-1); border-top: 1px solid var(--borde); }
.indice-letra { margin: 0 0 var(--e-1); font: italic 500 2.25rem/1 var(--serif); color: var(--teja); }
.indice-grupo ul { list-style: none; margin: 0; padding: 0; }
.indice-grupo li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); padding: .3rem 0; line-height: 1.35; }
.indice-grupo a { color: var(--pizarra); text-decoration: none; font-size: var(--t-1); }
.indice-grupo a:hover { color: var(--azul-oscuro); text-decoration: underline; }
.indice-anio { flex: none; font: 600 .8125rem/1 var(--sans); color: var(--tenue); font-variant-numeric: lining-nums tabular-nums; }

.cita-portada { padding-block: var(--e-6); background: var(--niebla); text-align: center; }
.cita-portada figure { margin: 0; }
.cita-portada blockquote { position: relative; margin: 0; padding: var(--e-5) 0 0; border: 0; }
.cita-portada blockquote::before { content: "“"; position: absolute; top: -.1em; left: 50%; transform: translateX(-50%); font: 600 6rem/1 var(--serif); color: var(--teja); }
.cita-portada blockquote p { margin: 0; font: italic 400 var(--t-4)/1.4 var(--serif); color: var(--pizarra); }
.cita-portada figcaption { margin-top: var(--e-3); font: 700 .875rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.cita-portada figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--azul); text-decoration: none; border-bottom: 1px solid currentColor; }

.archivo { padding-block: var(--e-6); }
.archivo-lista { display: grid; grid-template-columns: 1fr; column-gap: var(--e-4); border-top: 1px solid var(--borde); margin-top: var(--e-5); }
@media (min-width: 40rem) { .archivo-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .archivo-lista { grid-template-columns: repeat(3, 1fr); } }
.cronologia { display: grid; gap: var(--e-3); padding: var(--e-4) var(--e-4) var(--e-3); background: var(--papel-claro); border: 1px solid var(--borde); border-radius: var(--radio); }
@media (min-width: 64rem) { .cronologia { grid-template-columns: 12rem minmax(0, 1fr); align-items: end; column-gap: var(--e-5); } .cronologia-anios { grid-column: 2; } }
.cronologia-titulo { margin: 0; align-self: start; font: 700 .8125rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--teja); }
.cronologia-eje { display: flex; align-items: flex-end; gap: .25rem; list-style: none; margin: 0; padding: 0 0 0; border-bottom: 1px solid var(--pizarra); overflow-x: auto; scrollbar-width: thin; }
.cronologia-eje > li { flex: none; }
.cronologia-eje a { display: grid; grid-template-rows: auto 6.5rem auto auto; justify-items: center; width: 52px; padding: .25rem 0 .5rem; text-decoration: none; color: var(--tenue); border-radius: var(--radio) var(--radio) 0 0; }
.cronologia-eje a:hover { background: var(--niebla); color: var(--pizarra); }
.cronologia-barra { align-self: end; width: 18px; height: calc(var(--n) * 6.25rem); min-height: 6px; background: var(--azul); border-radius: 2px 2px 0 0; transition: background-color .18s ease; }
.cronologia-eje a:hover .cronologia-barra { background: var(--teja); }
.cronologia-num { font: 500 1rem/1.4 var(--serif); color: var(--pizarra); font-variant-numeric: lining-nums; }
.cronologia-mes { margin-top: .4rem; font: 700 .75rem/1 var(--sans); text-transform: uppercase; letter-spacing: .05em; }
.cronologia-anio { margin-top: .25rem; font: 500 .75rem/1 var(--sans); visibility: hidden; font-variant-numeric: lining-nums; }
.cronologia-nuevo-anio .cronologia-anio { visibility: visible; color: var(--teja); font-weight: 700; }
.cronologia-salto { align-self: stretch; display: flex; align-items: flex-end; padding: 0 .5rem; }
.cronologia-salto span { display: block; width: 28px; height: 4.5rem; margin-bottom: 2.5rem; background: repeating-linear-gradient(135deg, transparent 0 5px, var(--borde) 5px 6px); }
.cronologia-anios { display: flex; flex-wrap: wrap; gap: 0 var(--e-3); margin: 0; font: 500 .9375rem/1.3 var(--sans); color: var(--tenue); }
.cronologia-anios a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--tenue); text-decoration: none; }
.cronologia-anios a strong { font: 600 var(--t-3)/1 var(--serif); color: var(--pizarra); font-variant-numeric: lining-nums; }
.cronologia-anios a:hover strong { color: var(--teja); }

/* ------------------------------------------------------------------ artículo y página */

.articulo-cabecera, .pagina-cabecera { padding-block: var(--e-6) var(--e-4); }
.articulo-titulo, .pagina-titulo { margin: 0 0 var(--e-3); font: 600 var(--t-6)/1.06 var(--serif); letter-spacing: -.02em; color: var(--pizarra); hyphens: manual; }
.articulo-meta { margin-bottom: var(--e-4); }
.articulo-cabecera .meandro, .pagina-cabecera .meandro { width: 12rem; }

.contenido { font-size: var(--lectura); line-height: 1.72; color: var(--tinta); padding-inline: var(--margen); }
.contenido > * { max-width: var(--medida); }
.contenido p { margin-block: 0 1.15em; hanging-punctuation: first; }
.contenido h2 { margin: 2em auto .6em; font: 600 var(--t-4)/1.2 var(--serif); color: var(--pizarra); }
.contenido h3 { margin: 1.8em auto .5em; font: 600 var(--t-3)/1.25 var(--serif); color: var(--pizarra); }
.contenido strong { font-weight: 600; color: var(--pizarra); }
.contenido ul, .contenido ol { padding-left: 1.4em; }
.contenido li { margin-bottom: .45em; }
.contenido li::marker { color: var(--teja); }
.contenido ul + ul { margin-top: -.75em; }
.contenido .lista-guiones { list-style: none; padding-left: 0; }
.contenido .lista-guiones li { position: relative; padding-left: 1.6em; }
.contenido .lista-guiones li::before { content: ""; position: absolute; left: 0; top: .85em; width: .9em; height: 1px; background: var(--teja); }
.contenido blockquote { border-left: 2px solid var(--teja); padding: .1em 0 .1em 1.25em; font-style: italic; color: var(--pizarra); }
.contenido a { color: var(--azul); text-decoration-color: rgba(53, 90, 124, .45); }
.contenido a:hover { color: var(--teja); text-decoration-color: currentColor; }
.articulo-cuerpo > p:first-child::first-letter {
  float: left; margin: .08em .1em 0 0; font: 600 4.1em/.8 var(--serif); color: var(--teja); padding-top: .02em;
}

/* láminas: imágenes pequeñas de 2010-2011 (al margen en pantallas anchas) e ilustraciones */
.contenido figure.imagen { margin-block: var(--e-4); }
.contenido figure.imagen img { display: block; margin-inline: auto; border-radius: var(--radio); }
.contenido figure.lamina { text-align: center; }
.contenido figure.lamina img { width: auto; max-width: min(100%, 17rem); box-shadow: 0 1px 0 var(--borde), 0 12px 28px -18px rgba(29, 42, 54, .5); }
.contenido figure.ilustracion img { width: 100%; max-width: 30rem; }
.contenido figcaption { margin-top: .75rem; font: italic 400 .9375rem/1.45 var(--serif); color: var(--tenue); text-align: center; }
@media (min-width: 48rem) {
  .contenido figure.lamina { float: right; clear: right; width: 15rem; margin: .4em 0 1.25em 2rem; }
  .contenido > figure.lamina { margin-right: max(0px, calc((100% - var(--medida)) / 2)); }
  .contenido figure.lamina img { max-width: 100%; }
  .contenido figure.lamina figcaption { text-align: left; padding-left: .75rem; border-left: 1px solid var(--teja); }
}
@media (min-width: 80rem) {
  .contenido > figure.lamina { width: 16rem; margin-right: calc((100% - var(--medida)) / 2 - 19rem); margin-top: .3em; }
}
.articulo-pie { padding-block: var(--e-3) var(--e-4); clear: both; }
.articulo-fin { margin: 0; display: flex; justify-content: center; }
.meandro-fin { width: 7rem; color: var(--borde); }
.aviso-salud { margin: var(--e-4) 0 0; padding: var(--e-3); background: var(--niebla); border-radius: var(--radio); font: 500 var(--t-1)/1.55 var(--sans); color: var(--pizarra); }

.comentarios { padding-block: var(--e-4) var(--e-5); }
.comentarios .bloque-titulo { margin-bottom: var(--e-3); }
.comentarios-lista { list-style: none; margin: 0; padding: 0; }
.comentarios-lista .comentarios-lista { margin: var(--e-2) 0 0 var(--e-4); padding-left: var(--e-3); border-left: 1px solid var(--borde); }
.comentario { padding: var(--e-3) 0; border-top: 1px solid var(--borde-suave); }
.comentarios-lista .comentarios-lista .comentario { border-top: 0; padding-bottom: 0; }
.comentario-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font: 500 .9375rem/1.3 var(--sans); color: var(--tenue); }
.comentario-cabecera strong { color: var(--pizarra); font-weight: 700; }
.comentario-inicial { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--niebla); color: var(--azul-oscuro); font: italic 600 1.125rem/1 var(--serif); }
.comentario-texto { margin-top: .5rem; font-size: var(--t-2); line-height: 1.6; }
.comentario-texto p { margin: 0 0 .5em; }

.vecinos { display: grid; gap: var(--e-2); padding-block: var(--e-3) var(--e-5); }
@media (min-width: 40rem) { .vecinos { grid-template-columns: 1fr 1fr; } }
.vecino { display: flex; flex-direction: column; gap: .5rem; padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); text-decoration: none; background: var(--papel-claro); transition: border-color .2s ease, transform .2s ease; }
.vecino:hover { border-color: var(--pizarra); transform: translateY(-2px); }
.vecino-sig { text-align: right; align-items: flex-end; }
.vecino-etiqueta { display: inline-flex; align-items: center; gap: .4rem; font: 700 .8125rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--teja); }
.vecino-titulo { font: 600 var(--t-2)/1.3 var(--serif); color: var(--pizarra); }

.sigue { padding-block: var(--e-5) var(--e-6); }

.acerca-imagen { margin: var(--e-5) auto 0; width: min(70vw, 18rem); padding-inline: 0; }
.acerca-imagen img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #e9ecee; box-shadow: 0 0 0 1px var(--borde), 0 24px 48px -30px rgba(29, 42, 54, .55); }
@media (min-width: 64rem) {
  .pagina-acerca { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; grid-template-rows: auto auto 1fr; column-gap: var(--e-6); max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
  .pagina-acerca > * { grid-column: 1; }
  .pagina-acerca .envoltorio-texto, .pagina-acerca .contenido { max-width: none; padding-inline: 0; margin-inline: 0; }
  .pagina-acerca .contenido > * { margin-left: 0; }
  .pagina-acerca .acerca-imagen { grid-column: 2; grid-row: 1 / 4; align-self: start; position: sticky; top: 7rem; width: 100%; margin: var(--e-6) 0 0; }
}
.acerca-datos { padding-block: var(--e-4) var(--e-6); }
.acerca-datos .bloque-titulo { margin-bottom: var(--e-3); }
.acerca-datos .portada-datos { margin-bottom: var(--e-4); }

/* ------------------------------------------------------------------ listados, búsqueda, 404 */

.lista-cabecera { padding-block: var(--e-6) var(--e-4); }
.lista-titulo { margin: 0 0 var(--e-2); font: 600 var(--t-6)/1.05 var(--serif); letter-spacing: -.02em; color: var(--pizarra); }
.lista-cuenta { margin: 0 0 var(--e-3); font: 600 .9375rem/1.4 var(--sans); color: var(--tenue); }
.lista-descripcion { max-width: var(--medida); color: var(--tenue); }
.lista { padding-bottom: var(--e-6); }
.lista-indice { margin: var(--e-5) 0 0; }

.buscador-grande { margin-top: var(--e-3); }
.x-buscador { display: flex; gap: .5rem; max-width: 40rem; }
.x-buscador label { flex: 1; }
.x-buscador input {
  width: 100%; min-height: 52px; padding: .75rem 1.1rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--papel-claro);
  font: 400 1.0625rem/1.2 var(--serif); color: var(--tinta);
}
.x-buscador input:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.x-buscador button { min-height: 52px; padding: 0 1.5rem; border: 1px solid var(--pizarra); border-radius: 999px; background: var(--pizarra); color: #fff; font: 700 .9375rem/1 var(--sans); cursor: pointer; transition: background-color .2s ease; }
.x-buscador button:hover { background: var(--azul-oscuro); transform: none; box-shadow: none; }

.vacio { padding: var(--e-5) 0; border-top: 1px solid var(--borde); }
.vacio-titulo { margin: 0 0 var(--e-3); font: italic 400 var(--t-4)/1.35 var(--serif); color: var(--pizarra); }

.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-5); font: 600 .9375rem/1 var(--sans); }
.paginacion-numeros { display: flex; flex-wrap: wrap; gap: .25rem; }
.paginacion a, .paginacion span[aria-current] { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .9rem; border-radius: 999px; text-decoration: none; }
.paginacion a { color: var(--pizarra); border: 1px solid var(--borde); }
.paginacion a:hover { border-color: var(--pizarra); }
.paginacion span[aria-current] { background: var(--pizarra); color: #fff; }
.paginacion-salto { align-self: center; color: var(--tenue); }

.error { padding-block: var(--e-6) var(--e-5); }
.error-cifra { margin: 0 0 var(--e-2); font: italic 500 clamp(5rem, 14vw, 9rem)/.9 var(--serif); color: var(--teja); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.error-texto { font-size: var(--lectura); color: var(--tenue); max-width: 34rem; }
.error-enlaces { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }

/* ------------------------------------------------------------------ pie */

.pie { margin-top: var(--e-5); background: var(--pizarra); color: #c9d3dc; padding-block: var(--e-6) var(--e-3); }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { color: var(--teja-claro); }
.pie :focus-visible { outline-color: #fff; }
.pie-cabeza { display: grid; gap: var(--e-2); padding-bottom: var(--e-5); }
.pie-marca { margin: 0; font: 600 2.5rem/1 var(--serif); color: #fff; letter-spacing: -.01em; }
.pie-marca em { font-weight: 500; color: #a9c4dc; }
.pie-texto { margin: 0; max-width: 38rem; font: italic 400 var(--t-2)/1.55 var(--serif); color: #c9d3dc; }
.pie-meandro { color: var(--teja-claro); width: 12rem; margin-top: var(--e-1); }
.pie-columnas { display: grid; gap: var(--e-4); padding-block: var(--e-4); border-top: 1px solid rgba(255,255,255,.14); }
@media (min-width: 40rem) { .pie-columnas { grid-template-columns: repeat(3, 1fr); } }
.pie-titulo { margin: 0 0 var(--e-2); font: 700 .8125rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--teja-claro); }
.pie-lista { list-style: none; margin: 0; padding: 0; font: 500 var(--t-1)/1.3 var(--sans); }
.pie-lista a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; }
.pie-num { font-size: .8125rem; color: #9fb0bf; font-variant-numeric: tabular-nums; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-3); padding-top: var(--e-3); border-top: 1px solid rgba(255,255,255,.14); font: 500 .875rem/1.5 var(--sans); color: #9fb0bf; }
.pie-legal p { margin: 0; display: flex; align-items: center; }
.pie-arriba { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }

/* ------------------------------------------------------------------ movimiento, impresión */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .cabecera, .pie, .vecinos, .sigue, .menu-boton, .saltar, .indice-letras, .bloque-enlace, .aviso-salud { display: none !important; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .contenido { font-size: 11.5pt; padding: 0; }
  .contenido > * { max-width: none; }
  .articulo-titulo, .pagina-titulo { font-size: 24pt; }
  .contenido a { color: #000; text-decoration: none; }
  .contenido figure.lamina { float: right; width: 5cm; margin: 0 0 .4cm .6cm; }
  .contenido figure.lamina img { box-shadow: none; }
  .meandro { display: none; }
}