/*
Theme Name:  VerAsturies
Theme URI:   https://verasturies.com/
Author:      VerAsturies
Author URI:  https://verasturies.com/
Description: Tema propiu de VerAsturies, mediu dixital asturianu billingüe. Clásicu, ensin tema padre y ensin compilación.
Version:     0.23.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: verasturies
Domain Path: /languages
Tags:        news, blog, translation-ready, accessibility-ready
*/

/* ==========================================================================
   PROCEDENCIA DEL CSS

   Esti ficheru NUN se escribió a mano: estráxose de los HTML aprobaos de
   03-diseno/, que son la fonte de verdá. Cada bloque lleva'l nome del sitiu
   del que vien y l'orixe exautu:

     TRONCO COMÚN        portada.html         llinies 23-586   (idénticu nos 4)
     TRONCO D'ARTÍCULU   articulu.html        llinies 590-788  (idénticu nes 2)
     PORTADA             portada.html         llinies 588-886
     CATEGORÍA           categoria.html       llinies 588-785
     PLANTÍA A           articulu.html        llinies 790-905
     PLANTÍA B           articulu-nota.html   llinies 789-864

   Comprobao por SHA-256 enantes d'estrayer:
     tronco común     8CABF3C8C61CF627   igual nos 4 ficheros
     tronco d'artículu 8BBC75B59ADF94CA  igual nes 2 plantíes

   Nun se rediseñó nada. Lo único que camuda respeuto al orixinal ye la
   sangría: quitáronse los 4 espacios que llevaba dientro de <style>.

   Si daqué hai que camudalo, camúdase EQUÍ y anótase en CHANGELOG.md; los
   HTML de 03-diseno queden como referencia hestórica.
   ========================================================================== */


/* ==========================================================
   TRONCO COMÚN — bloque idéntico byte a byte nes cuatro páxines:
   portada.html, articulu.html, articulu-nota.html y categoria.html.
   Nel tema WordPress esto ye un únicu ficheru d'estilos cargáu por
   header.php / footer.php. Si camudes daqué equí, replícalo nes
   otres tres o vuelve a haber diverxencia.
   ========================================================== */

:root {
  --ink: #111110;
  --ink-soft: #2b2b27;
  --paper: #fafaf6;
  --paper-warm: #fffbe8;
  --line: #d7d7cf;
  --muted: #5b5b55;
  --blue: #38b6ff;
  --blue-text: #00689d;
  --yellow: #ffde59;
  --success: #176b3a;
  --success-soft: #e8f5ea;
  --error: #9d1c1c;
  --error-soft: #fdeceb;
  --content: 1280px;
  --reading: 760px;
  /* ⚠ `--prosa` NUN sustitúi a `--reading`: ye la columna de TESTU dientro
     d'ella. Ver el bloque «LA COLUMNA DE LLECTURA» al final del ficheru. */
  --prosa: 680px;
  --sans: "VerAsturies Narrow", "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 1.6rem;
  /* Escala d'escritoriu rebaxada (0.13.0): --space-5/6/7/8 taben en
     2/3/4/5rem y en pantalla ancha les secciones lleíense como páxines
     sueltes en llugar de como una portada. En móvil la escala vieya sí
     valía, y por eso se restituye na media query de 760px. */
  --space-6: 2.5rem;
  --space-7: 3rem;
  --space-8: 3.75rem;
}

/* ==========================================================
   LA CONDENSADA, AUTOALOXADA · 0.15.0

   ⚠ EL PROBLEMA QUE RESUELVE, y por qué nun se vio hasta agora.

   La pila del display yera:
     "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif

   Windows resuelve la primera, macOS y iOS la segunda. **ANDROID NUN TIEN
   NENGUNA DE LES TRES**: ellí `Arial` mapéase a Roboto, que nun ye condensada.
   O seya que la máquina dende la que se diseñó y la mitá llarga de la audiencia
   d'un mediu local taben viendo dos sitios distintos, y nel d'Android too'l
   testu de display —titulares, antetítulos, marca, menú— cai nuna tipografía
   ancha con `letter-spacing: -.055em` puestu encima, que ye un axuste calculáu
   pa una caxa estrecha.

   ⚠ ESTO NUN SE MIDIÓ NUN DISPOSITIVU. Ye razonamientu sobre qué fontes trai
   cada sistema, non una observación: falta abrir la portada nun Android de
   verdá y mirar el titular. Ta anotao en PENDIENTE.md § 0 ter.

   QUÉ SE ESCOYÓ Y POR QUÉ.

   **Archivo Narrow**, licencia OFL, autoaloxada como yá lo ta pdf.js: ye la
   grotesca condensada llibre más cercana a Arial Narrow, asina que en Windows
   y en macOS el sitiu sigue viéndose como se aprobó. Descartáronse Fira Sans
   Condensed y Noto Sans (más humanistes, cambien el calter del titular) y
   Roboto Condensed y Barlow Condensed, que **nun traen los caráuteres
   asturianos**.

   ⚠ LOS CUATRO CARÁUTERES QUE FALTABEN. Archivo Narrow nun trai `Ḷ` (U+1E36),
   `ḷ` (U+1E37), `Ḥ` (U+1E24) nin `ḥ` (U+1E25), y esos nun son un adornu: son
   **Ḷḷena**, que ye un conceyu, y **Con guaḥes**, que ye una sección del menú.
   Ensin ellos el navegador cambia de fonte a mitad de palabra.

   Compúsose caún col so glifu base y `dotbelowcomb`, que la fonte SÍ trai, cola
   mesma construcción que la propia fonte usa pa `Ạ` y `Ẹ`. El procedimientu
   ta en `assets/fonts/ORIXE.txt` y ye repetible.

   ⚠ `U+25A0` (■), que ye'l chinchu de `figcaption::before`, NUN ta na fonte y
   nun se compón: cai na fonte del sistema. Ye un cuadráu negru en cualquiera.

   Dos ficheros y non una variable: la fonte variable diba de 400 a 700 y los
   pesos ≥750 del diseñu quedaríen sujetos a 700, que ye MENOS pesu del que se
   ve güei. Con dos estáticos el navegador fai lo mesmo que fai con Arial
   Narrow: too ≥700 cae na negrina.
   ========================================================== */

@font-face {
  font-family: "VerAsturies Narrow";
  src: url("assets/fonts/verasturies-narrow-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VerAsturies Narrow";
  src: url("assets/fonts/verasturies-narrow-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Pesos 600/650/700/750/800/850/900: la condensada trai namás 400 y 700,
   asina que too ≥700 colapsa en negrina sintética. Ye lo aprobao.
   Ver CAMBIOS-DISENO.md § Pesos tipográficos. */

*, *::before, *::after { box-sizing: border-box; }
/* `scroll-padding-top`: colos saltos internos (#actualida, #viaxast, les
   migayes) la barra pegada tapaba la primera llinia del destín. */
html { scroll-behavior: smooth; scroll-padding-top: 4.75rem; }
body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: .1em; text-underline-offset: .18em; }
button, input { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
::selection { background: var(--yellow); color: var(--ink); }
/*
 * ⚠ EL TESTU DE LES CAXES MARIELLES NUN SE PODÍA ESCOYER. Podíase: lo que
 * pasaba ye que **nun se veía qu'estuviera escoyío**. La selección de tol sitiu
 * ye mariella sobre tinta, y nes trés superficies que yá son marielles —la caxa
 * del titular de portada, la franxa de ViaxAst y la entrada de sección— quedaba
 * mariello sobre mariello: seleccionabes y nun camudaba nada, asina que paecía
 * bloquiao. Nun hai `user-select` en nengún sitiu del tema.
 *
 * Nesos trés sitios la selección va al revés, que ye lo mesmo que fai'l restu
 * del sitiu pero cambiando los dos colores de sitiu.
 */
.hero-main__copy ::selection,
.viaxast ::selection,
.lead-story ::selection { background: var(--ink); color: var(--paper); }
.hero-main__copy::selection,
.viaxast::selection,
.lead-story::selection { background: var(--ink); color: var(--paper); }

/*
 * ⚠ Y NOS TITULARES GRANDES, LA SELECCIÓN NUN LLEVA CAXA. Ye'l mesmu problema
 * de xeometría que'l hover de ViaxAst, y equí nótase inda más porque la caxa ye
 * negra y la lletra blanca: a `line-height` de .92 y con una fonte que pide
 * 1,349 em de caxa, la segunda llinia tapa 20,9 px de la primera. Al escoyer el
 * testu, media pallabra desapaez.
 *
 * Nun ye cosa d'esti tema: cualquier resalte —el del navegador tamién— pinta esa
 * mesma caxa. Lo que se puede facer ye nun pintala: equí la selección camuda'l
 * color del testu y nada más. Nel restu del bloque —entradiella, firma, botones—
 * la selección sigue siendo la de siempre, porque ellí el `line-height` ye
 * normal y nun solapa nada.
 */
.hero-main__copy h2 ::selection, .hero-main__copy h2::selection,
.lead-story h2 ::selection, .lead-story h2::selection,
.viaxast-copy h2 ::selection, .viaxast-copy h2::selection {
  background: transparent;
  color: var(--blue-text);
}

.container { width: min(100% - 2.5rem, var(--content)); margin-inline: auto; }
.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }
.eyebrow {
  color: var(--blue-text);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
/* L'antetítulu de LLUGAR, que namás sal nes páxines de sección (ver
   `va_pintar_eyebrow()`). Ye una clas distinta de tema, non de xerarquía:
   ellí conviven «Cuestionariu», que ye una serie, y «Cangues d'Onís», que ye
   un sitiu, y el llector tien que poder distinguilos ensin lleelos. Un puntu
   delantre y el pesu de la tinta abonda; una bandera o un chinchu sería
   ruíu nuna tarxeta que yá tien semeya, titular, entradiella y fecha. */
.eyebrow--llugar { color: var(--muted); font-weight: 750; }
.eyebrow--llugar::before { content: "· "; color: var(--blue-text); }
/* ⚠ ESTI YE L'ÚNICU ANTETÍTULU DEL TEMA QUE YE UN ENLLAZ, y la escepción ta
   razonada en `va_pintar_eyebrow_llugar()`: el conceyu ye l'únicu que lleva a
   un sitiu al que nun se puede dir d'otra manera dende una tarxeta.

   El tratamientu ye'l de `.story-list`: ensin sorrayáu en reposu —nuna tarxeta
   con titular sorrayáu, dos sorrayaos son dos titulares— y sorrayáu al pasar
   per riba. El focu ye'l xeneral del sitiu y equí nun se toca: el requexu
   mariellu de `:focus-visible` yá ye visible sobre papel y sobre `--paper-warm`,
   que son los dos fondos onde sal esta clas. */
a.eyebrow--llugar { display: inline-block; text-decoration: none; }
a.eyebrow--llugar:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: .2em; }
.meta { color: var(--muted); font-size: .83rem; font-weight: 600; }
.prose { color: var(--ink-soft); font-family: var(--serif); line-height: 1.62; }
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-top: .9rem;
  border-top: 3px solid var(--ink);
}
.section-heading h2 {
  margin: 0;
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  line-height: .95;
  letter-spacing: -.035em;
}
.section-heading p { max-width: 48ch; margin: 0; color: var(--muted); }
.section-link {
  flex: 0 0 auto;
  border-bottom: 3px solid var(--yellow);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.section-link:hover { background: var(--yellow); }

/* Aparatu d'accesibilidá — nun se toca ensin midilo. */
.skip-link {
  position: fixed;
  z-index: 3000;
  top: .75rem;
  left: .75rem;
  transform: translateY(-180%);
  background: var(--yellow);
  color: var(--ink);
  padding: .8rem 1rem;
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Cabecera */
.site-chrome { position: relative; z-index: 2100; background: var(--paper); }
.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding-block: 1.35rem 1.1rem;
}
.brand {
  display: inline-block;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .9;
  text-decoration: none;
}
/* MARCA · una sola construcción pa tol sitiu, cabecera y pie.
   El logotipu orixinal ye «VerAsturies» en blancu y ya; l'azul y l'amarillu
   son la versión web.
   Dos elementos y namás dos:
     · la «V» ye una LLETRA n'azul (--blue-text, el azul de la web)
     · la «A» ye lletra normal con un BLOQUE amarillu detrás
   El bloque nun cubre la lletra: ye un tacu baxu que garra'l terciu
   inferior, sal un poco pel llau y sobresal per baxo, y nun ta centráu a
   costies: esa descolocación ye la gracia de la marca.
   La «A» queda nel color del testu, asina que la mesma construcción val en
   cabecera (tinta sobre papel) y en pie (papel sobre tinta) ensin dos
   versiones del logotipu. Ver CAMBIOS-DISENO.md § 3 pa los contrastes. */
/* EL <mark> DE `_va_resaltar`, EN TOL SITIU.
 *
 * ⚠ Namás taben estilaos los de `.article-header h1` y `.category-header h1`.
 * En cualquier otru sitiu —les tarxetes de portada, el paquete de cabecera, la
 * banda de Xixón— salía'l `<mark>` **del navegador**: amarillu fosforito con
 * testu prietu. Nun ye l'amarillu del sitiu (`--yellow`, #ffde59) nin ye un
 * xestu d'esta marca.
 *
 * ⚠⚠ Y NUN PUE SER UN FONDU, nin siquiera un `linear-gradient`. Los titulares
 * del sitiu tienen `line-height` de .88 a 1.12: la caxa que pinta un fondu ye
 * más alta que l'avance ente llinies y la segunda llinia taparía la primera.
 * Ye la mesma razón que ta escrita en `.tira-ultimo__titulu` y na nota de
 * ViaxAst. El sorrayáu de testu píntase POR LLINIA y col llargor esautu de
 * caúna, asina que nun pue solapar.
 *
 * Los valores son los mesmos que los de `.hero-brief`: un solu xestu pa tol
 * sitiu. */
mark {
  color: inherit;
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: .18em;
  text-underline-offset: .12em;
  /* Ensin esto, les descendentes (p, q, y) corten la raya y a .18em nótase. */
  text-decoration-skip-ink: none;
}
/* ⚠ Sobre fondu amarillu, l'amarillu nun se ve. ViaxAst ye la única banda
   `--yellow` del sitiu; ehí la raya pasa a tinta. */
.viaxast mark { text-decoration-color: var(--ink); }
/* Sobre'l cuadru azul del paquete de cabecera y sobre la banda escura de
   Xixón, l'amarillu ye lo que más resalta: nun se toca. */

.brand__v { color: var(--blue-text); }
.brand__a { position: relative; z-index: 0; }
.brand__a::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 56% -.07em -.04em .03em;
  background: var(--yellow);
}

/* Trés güecos: gueta a la esquierda, marca al mediu, idioma a la drecha.
   Quitóse la fecha: nun aporta nada nun sitiu que nun ye diariu, y les
   trés coses xuntes a la drecha xunto a la marca yeren demasiao. */
.site-search { justify-self: start; }
.site-search__form {
  width: min(100%, 250px);
  display: flex;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.site-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  padding: .65rem .75rem;
  color: var(--ink);
}
.site-search button {
  border: 0;
  border-left: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: .55rem .8rem;
  cursor: pointer;
}
/* Escoyeta d'idioma. Nomes enteros y non banderes: una bandera ye un
   estáu, non una llingua, y equí les dos son d'España. */
.lang-switch { display: flex; align-items: center; justify-self: end; gap: .3rem; }
.lang-switch a {
  border: 1.5px solid var(--line);
  padding: .34rem .55rem .26rem;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
}
.lang-switch a:hover { border-color: var(--ink); color: var(--ink); }
.lang-switch a[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* Accesu direutu a la otra llingua en móvil, onde nun cabe la parexa. */
.lang-compact { display: none; }

/* El botón de menú: escondíu por defeutu, y enciéndelu quien lu necesite —el
   móvil na `@media` de 760px, la barra pegada con `.menu-toggle--barra`—.

   ⚠ EL DIBUXU DE LES TRÉS RAYES VA EQUÍ, non dientro de la media query. Taba
   dientro, y en cuantes el botón apaeció tamién n'escritoriu salía una caxa
   vacía: les rayes nun-y llegaben. */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  background: transparent;
  cursor: pointer;
}
.menu-toggle span {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
  background: transparent;
}
.menu-toggle span::before, .menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transform-origin: center;
  transition: transform .18s ease, top .18s ease, box-shadow .18s ease;
}
.menu-toggle span::before { top: 0; box-shadow: 0 6px 0 var(--ink), 0 12px 0 var(--ink); }
.menu-toggle span::after { top: 6px; opacity: 0; }
.menu-toggle[aria-expanded="true"] span::before { top: 6px; box-shadow: none; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { opacity: 1; transform: rotate(-45deg); }

.primary-nav { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); }
.primary-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem 1.55rem;
  margin: 0;
  padding: .7rem 0;
  list-style: none;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.primary-nav a { display: inline-block; padding: .3rem 0 .2rem; border-bottom: 3px solid transparent; text-decoration: none; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { border-color: var(--blue-text); }
.primary-nav .viaxast-link { background: var(--yellow); padding-inline: .8rem; border-color: transparent; }
.primary-nav .viaxast-link:hover { background: var(--ink); color: var(--yellow); }
.primary-nav .xixon-tours-link { background: var(--blue); padding-inline: .8rem; border-color: transparent; }
.primary-nav .xixon-tours-link:hover { background: var(--ink); color: var(--blue); }

/* Píldores: una sola definición pa etiquetes, temes y conceyos. */
.pill-list { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.pill {
  display: inline-flex;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: .55rem .85rem .43rem;
  font-size: .8rem;
  font-weight: 800;
  text-decoration: none;
}
.pill:hover { background: var(--ink); color: var(--paper); }
/* Píldora de destín: la de «Planes» na portada y la banda de conceyos del
   índiz. Ye la mesma píldora con más cuerpu, porque nesos dos sitios NUN ye un
   accesoriu d'un artículu —una etiqueta al pie— sinón la única cosa que hai
   que primir nel módulu. */
.pill--plan { padding: .75rem 1.15rem .62rem; font-size: .95rem; }
/* La sección pola que ta filtrada la páxina d'un conceyu. Va en tinta llena
   porque ye estáu, non enllaz nuevu: primiéndola quítase'l filtru. */
.pill--activa { background: var(--ink); color: var(--paper); }
.pill--activa:hover { background: var(--muted); }
.pill--quitar { border-style: dashed; }
/* Quitóse `.pill-list--invert` (0.13.0): el so únicu usu yera la coleición de
   ViaxAst na portada, que va sobre AMARILLU y non sobre `--ink`. Ellí el testu
   en `--paper` nun se lleía. Nun queda nengún fondu escuru con píldores. */

/* --------------------------------------------------------------------------
   BARRA PEGADA · la cabecera curtia que entra al baxar.

   Namás de 761 px p'arriba: en móvil `.site-chrome` yá va pegao.
   Píntase con `hidden` dende'l servidor y ye'l JS quien la enciende, asina que
   ensin JavaScript la páxina queda cola cabecera normal, que ye completa.
   -------------------------------------------------------------------------- */

.sticky-bar {
  position: fixed;
  /* ⚠ 2400, PER RIBA DEL PANEL (2300) Y DEL VELO (2250). Yera 2200 y el caxón
     del menú abría enriba d'ella: tapaba'l botón que lu acababa d'abrir, y el
     velo tragábase los clics d'esi botón —el mesmu fallu que la 0.14.2 arregló
     nel panel—. Agora la barra ye lo más alto que hai y el panel empieza xusto
     debaxo d'ella. Ver `updatePanelTop()` en menu.js. */
  z-index: 2400;
  top: 0;
  right: 0;
  left: 0;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.sticky-bar[hidden] { display: none; }
.sticky-bar__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 58px;
}
.sticky-bar__brand {
  flex: 0 0 auto;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  text-decoration: none;
}
/* La marca de la barra ye la mesma construcción que la grande, namás que'l
   tacu amarillu tien que baxar un puntu pa que nun coma la lletra a esti
   tamañu. */
.sticky-bar__brand .brand__a::after { inset: 58% -.06em -.02em .03em; }

.sticky-bar__nav { min-width: 0; flex: 1 1 auto; }
.sticky-bar__nav ul {
  display: flex;
  align-items: center;
  gap: .3rem 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sticky-bar__nav a { display: inline-block; padding: .2rem 0 .12rem; border-bottom: 3px solid transparent; text-decoration: none; }
.sticky-bar__nav a:hover, .sticky-bar__nav a[aria-current="page"] { border-color: var(--blue-text); }
.sticky-bar__nav .viaxast-link { background: var(--yellow); padding-inline: .6rem; border-color: transparent; }
.sticky-bar__nav .viaxast-link:hover { background: var(--ink); color: var(--yellow); }
.sticky-bar__nav .xixon-tours-link { background: var(--blue); padding-inline: .6rem; border-color: transparent; }
.sticky-bar__nav .xixon-tours-link:hover { background: var(--ink); color: var(--blue); }

/* `margin-left: auto` y non `justify-content` na fila: asina el grupu de la
   drecha queda pegao al borde tanto si la nav ta como si nun ta. */
.sticky-bar__end { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.lang-switch--barra { justify-self: auto; }
.lang-switch--barra a { padding: .26rem .42rem .2rem; font-size: .66rem; }
.sticky-bar__gueta {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.sticky-bar__gueta:hover, .sticky-bar__gueta[aria-expanded="true"] { background: var(--ink); color: var(--paper); }

.sticky-bar__search { border-top: 1px solid var(--line); background: var(--paper); padding-block: .7rem; }
.sticky-bar__search[hidden] { display: none; }
.sticky-bar__search .site-search__form { width: 100%; }

/* El botón de menú de la barra sí se ve n'escritoriu: ye la puerta al panel
   completu coles 8 secciones, que na barra nun caben. */
.menu-toggle--barra { display: inline-flex; flex: 0 0 auto; width: 40px; height: 40px; }

/* Per baxo de 1000 px les secciones nun caben al llau de la marca ensin
   recortase a la metá d'una pallabra. Nun s'amonten: quítense, y queden onde
   siempre tuvieron, nel panel del botón de menú. */
@media (max-width: 1000px) {
  .sticky-bar__nav { display: none; }
}

@media (max-width: 760px) {
  /* En móvil nun hai barra pegada: `.site-chrome` yá ye la barra. */
  .sticky-bar { display: none !important; }
}

/* Menú móvil — la cabecera queda visible y el mesmu botón zarra.

   ⚠⚠ ESTI BLOQUE TIEN QUE DIR ENANTES DEL «PANEL N'ESCRITORIU» D'EQUÍ ABAXO.
   NUN LU MUEVAS OTRA VEZ.

   Hasta la 0.14.1 taba **detrás**, ente'l pie y les media queries. Como les
   dos reyes tienen la mesma especificidá, ganaba la de más abaxo: el caxón
   d'escritoriu escribíase enteru y **nun s'aplicaba nada d'él**. Lo que se
   veía yera esti bloque de móvil estiráu n'escritoriu: empezando a 120 px del
   altu en cuenta de a 0, con 80 px de rellenu a los llaos en cuenta de 32, colos
   enllaces a 1,65 rem en cuenta de a 1,18 —«Comer y beber» partíu en tres
   llinies— y coles dos barres de desplazamientu.

   Nun ye especificidá: ye orde. Base primero, anulaciones dempués. */
.mobile-panel {
  position: fixed;
  /* ⚠ Per riba del velo (2250), non per baxo. Con 2050 el velo pintaba enriba
     del panel y **tragábase tolos clics**: los enllaces del menú nun
     navegaben, namás zarraben el panel. Nos dos anchos. */
  z-index: 2300;
  top: var(--mobile-menu-top, 120px);
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  background: var(--ink);
  color: var(--paper);
  padding: 1.25rem max(1rem, calc((100vw - var(--content)) / 2)) 2rem;
}
.mobile-panel[hidden] { display: none; }
.mobile-panel:not([hidden]) { display: flex; }
.mobile-panel__inner { width: min(100% - 2rem, var(--content)); margin-inline: auto; }
/* El contenedor comparte la clas .site-search cola gueta de la cabecera
   pa heredar l'estilu del input y del botón, pero non la so colocación
   na retícula del masthead: equí tien qu'ocupar tol anchor. */
.mobile-search { width: 100%; justify-self: stretch; margin-bottom: 1.2rem; }
.mobile-search .site-search__form { width: 100%; border-color: var(--paper); background: transparent; }
.mobile-search input { color: var(--paper); }
.mobile-search input::placeholder { color: #bdbdb6; }
.mobile-search button { border-color: var(--paper); background: var(--yellow); color: var(--ink); }
.mobile-nav ul { margin: 0; padding: 0; list-style: none; }
.mobile-nav a { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid #3d3d38; font-size: 1.65rem; font-weight: 800; line-height: 1.05; text-decoration: none; }
.mobile-nav a::after { content: "→"; color: var(--blue); }
.mobile-nav a[aria-current="page"] { color: var(--yellow); }
/* ⚠ LES QUE YÁ TÁN NA BARRA PEGADA NUN SE REPITEN NEL PANEL, y la midida ye
   esautamente la mesma que la de la barra: per baxo de 1000 px `.sticky-bar__nav`
   nun se pinta, asina que ellí el panel tien que siguir siendo l'índiz completu.
   Si camuda una midida, camuden les dos. El servidor namás marca; quien decide
   ye esta regla. Ver `va_urls_na_barra()` en `inc/nav.php`. */
@media (min-width: 1001px) {
  .mobile-nav__llista > [data-na-barra] { display: none; }
}
.mobile-panel__note { margin: 1.5rem 0 0; color: #aaa9a2; font-family: var(--serif); font-size: .92rem; }

/* --------------------------------------------------------------------------
   EL PANEL N'ESCRITORIU · un caxón que entra pela izquierda.

   ⚠ POR QUÉ NUN YE YÁ UN DESPLEGABLE A TOL ANCHU. Yera'l mesmu panel del móvil
   estiráu: colgaba de la barra y comía la pantalla entera pa enseñar una llista
   de nueve enllaces. Abrir un menú nun tien que tapate lo que tabes lleendo.

   Agora ye un caxón:
     · **ancho de conteníu**, non una fracción de la pantalla. `width: max-content`
       fai que mida lo que mide la frase más llarga —«¿Quies collaborar?»— y les
       dos llendes de `min-width`/`max-width` evitan los dos estremos: que quede
       cenciellu con nomes curtios y que pase de la metá de la pantalla con ún
       llargu. Nunca llega a la metá: el tope son 26rem.
     · entra deslizándose de la izquierda a la drecha en 280 ms;
     · lleva velo, y el velo zarra.

   ⚠ `z-index` per riba de la barra pegada (2200) a costies: el caxón sal del
   altu al baxu de la pantalla y taparía'l botón que lu abrió. Por eso lleva
   botón de zarrar propiu; ver `header.php`.
   -------------------------------------------------------------------------- */

.mobile-velo {
  position: fixed;
  z-index: 2250;
  /* Debaxo de lo que tea pegao, como'l panel: si'l velo tapara la barra, los
     sos clics nun llegaríen anque'l `z-index` diga otra cosa. */
  inset: var(--mobile-menu-top, 0px) 0 0 0;
  background: rgba(17, 17, 16, .45);
  opacity: 0;
  transition: opacity .28s ease;
}
.mobile-velo[hidden] { display: none; }
.mobile-velo.is-open { opacity: 1; }
/* ⚠ El velo ye NAMÁS d'escritoriu, como diz `header.php`: ellí el panel ye un
   caxón estrechu y hai páxina detrás que tapar. En móvil el panel ocupa tolo
   que hai debaxo de la cabecera y el velo lo único que facía yera escurecer la
   cabecera, que tien que quedar usable. El JS enséñalu nos dos anchos a
   costies —ye la mesma llamada— y quítase equí. */
@media (max-width: 760px) {
  .mobile-velo { display: none; }
}

/* ⚠ EQUÍ VIVÍA `.mobile-panel__zarrar` Y QUITÓSE NA 0.15.1. Anótase pa que
   naide la busque nel historial: yera'l botón de zarrar de dientro del panel, y
   facía falta mientres el caxón abría enriba de la barra pegada y tapaba'l botón
   que lu abrió. Agora abre debaxo, el botón queda a la vista y él solu ye la
   equis. En móvil les dos equis víense una al llau de la otra. */

@media (min-width: 761px) {
  .mobile-panel {
    /* ⚠ Yera `top: 0`. Ver `updatePanelTop()`: el caxón empieza onde acaba la
       barra pegada, que ye lo único dende lo que se puede abrir n'escritoriu. */
    top: var(--mobile-menu-top, 0px);
    right: auto;
    bottom: 0;
    width: max-content;
    min-width: 19rem;
    max-width: min(26rem, 42vw);
    padding: 1.25rem 2rem 2.5rem;
    border-right: 3px solid var(--yellow);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  }
  .mobile-panel.is-open { transform: translateX(0); }
  .mobile-panel__inner { width: 100%; margin-inline: 0; }

  /* Ensin gueta: la lupa de la barra pegada ta a un palmu. */
  .mobile-panel .mobile-search { display: none; }

  .mobile-nav a { font-size: 1.18rem; padding: .62rem 0; }
}

/* Ensin JavaScript el panel nun s'abre nunca, asina que la transición nun ye un
   problema d'accesibilidá. Con «movimientu amenorgáu» sí: nun se desliza. */
@media (prefers-reduced-motion: reduce) {
  .mobile-panel, .mobile-velo { transition: none; }
}

/* Les dos llistes del caxón: les secciones y, debaxo de la llinia, les páxines
   de la casa. La segunda va más pequeña a costies: son otra clas de destín y
   nun tienen que competir coles secciones. */
.mobile-nav__llista { margin: 0; padding: 0; list-style: none; }
.mobile-nav__llista--casa { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 2px solid var(--yellow); }
.mobile-nav__llista--casa a {
  padding: .55rem 0;
  border-bottom: 0;
  color: #c9c9c2;
  font-size: 1rem;
  font-weight: 750;
}
.mobile-nav__llista--casa a::after { content: none; }
.mobile-nav__llista--casa a:hover { color: var(--yellow); }

/* Marcador visual de imaxe. Namás prototipu: en producción ye
   wp_get_attachment_image() con srcset/sizes.
   Regla d'accesibilidá aplicada en tolos ficheros:
   · imaxe qu'aporta información → role="img" + aria-label
   · imaxe decorativa (la que va dientro d'un enllaz que yá lleva
     el titular) → aria-hidden="true" y nada más.
   Regla de .media__label: píntase namás si hai pie de foto o alt. */
.media {
  position: relative;
  overflow: hidden;
  min-height: 160px;
  background: #d9e8e7;
  isolation: isolate;
}
.media::before, .media::after { content: ""; position: absolute; pointer-events: none; }
.media::before {
  inset: 0;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,222,89,.92) 0 8%, transparent 8.5%),
    linear-gradient(150deg, transparent 0 48%, rgba(17,17,16,.15) 48.2% 51%, transparent 51.2%),
    linear-gradient(180deg, #aee0ef 0 43%, #4d8fab 43% 54%, #d7c797 54% 70%, #4e7455 70%);
}
.media--coast::before {
  background:
    radial-gradient(circle at 82% 14%, rgba(255,222,89,.9) 0 6%, transparent 6.5%),
    linear-gradient(155deg, transparent 0 51%, #385c4b 51.5% 66%, transparent 66.5%),
    linear-gradient(180deg, #bce4ee 0 44%, #498ea8 44% 58%, #d9ca9e 58% 73%, #496f51 73%);
}
.media--mountain::before {
  background:
    radial-gradient(circle at 80% 18%, rgba(255,222,89,.9) 0 7%, transparent 7.5%),
    linear-gradient(145deg, transparent 0 44%, #47634e 44.3% 58%, transparent 58.2%),
    linear-gradient(215deg, transparent 0 48%, #2f4b3c 48.3% 64%, transparent 64.2%),
    linear-gradient(180deg, #bfe3ea 0 52%, #8daa8d 52% 68%, #44614b 68%);
}
.media--path::before {
  background:
    linear-gradient(138deg, transparent 0 45%, #c5ae78 45.5% 52%, transparent 52.5%),
    linear-gradient(215deg, transparent 0 48%, #365b42 48.5% 65%, transparent 65.5%),
    linear-gradient(145deg, transparent 0 42%, #52745b 42.5% 62%, transparent 62.5%),
    linear-gradient(180deg, #bfe3ea 0 48%, #6c936e 48% 100%);
}
.media--village::before {
  background:
    linear-gradient(90deg, transparent 0 7%, #75533c 7.5% 18%, transparent 18.5% 24%, #88654a 24.5% 42%, transparent 42.5% 54%, #654733 54.5% 76%, transparent 76.5%),
    linear-gradient(180deg, #c7e4ec 0 45%, #b2a180 45% 73%, #637553 73%);
}
.media--forest::before {
  background:
    radial-gradient(circle at 79% 17%, rgba(255,222,89,.82) 0 6%, transparent 6.5%),
    linear-gradient(100deg, transparent 0 16%, #304d38 16.5% 24%, transparent 24.5% 36%, #45674d 36.5% 44%, transparent 44.5% 62%, #294531 62.5% 74%, transparent 74.5%),
    linear-gradient(180deg, #b9dfe7 0 37%, #638065 37% 100%);
}
.media--camp::before {
  background:
    linear-gradient(140deg, transparent 0 44%, #f4eee0 44.5% 59%, transparent 59.5%),
    linear-gradient(220deg, transparent 0 43%, #e3d7bc 43.5% 58%, transparent 58.5%),
    linear-gradient(180deg, #bfe2ea 0 46%, #6f966b 46% 100%);
}
.media--city::before {
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(17,17,16,.22) 10% 22%, transparent 22% 31%, rgba(17,17,16,.3) 31% 47%, transparent 47% 59%, rgba(17,17,16,.18) 59% 78%, transparent 78%),
    linear-gradient(180deg, #c8e6ef 0 48%, #b7ae9d 48% 78%, #59584f 78%);
}
.media--food::before {
  background:
    radial-gradient(ellipse at 52% 58%, #d7a54e 0 18%, #f0d398 18.5% 27%, transparent 27.5%),
    radial-gradient(ellipse at 52% 60%, #f7f0df 0 35%, transparent 35.5%),
    linear-gradient(135deg, #795b42, #c29b6d 48%, #6e4b33);
}
.media--history::before {
  filter: sepia(.42);
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(17,17,16,.24) 12% 25%, transparent 25% 35%, rgba(17,17,16,.28) 35% 66%, transparent 66%),
    linear-gradient(180deg, #d4c8aa 0 48%, #9f8b67 48% 78%, #514a3f 78%);
}
.media--studio::before {
  background:
    radial-gradient(circle at 50% 48%, rgba(255,222,89,.95) 0 7%, transparent 7.5%),
    linear-gradient(45deg, transparent 0 38%, rgba(56,182,255,.75) 38.5% 48%, transparent 48.5%),
    linear-gradient(135deg, #232322, #4a4a44);
}
.media__label {
  position: absolute;
  inset: auto .8rem .8rem auto;
  z-index: 2;
  max-width: calc(100% - 1.6rem);
  background: rgba(17,17,16,.86);
  color: var(--paper);
  padding: .35rem .55rem;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .03em;
}

/* Tarxeta d'historia — compartida por l'archivu y polos rellacionaos. */
.story-card { min-width: 0; }
.story-card > a:first-child { display: block; text-decoration: none; }
.story-card .media { aspect-ratio: 4 / 3; }
.story-card__body { display: grid; gap: .72rem; padding-top: .95rem; }
.story-card h3 {
  margin: 0;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.03;
  text-wrap: balance;
}
.story-card h3 a { text-decoration: none; }
.story-card h3 a:hover { background: linear-gradient(transparent 72%, var(--yellow) 72%); }
.story-card p { margin: 0; font-size: .98rem; }

/* --------------------------------------------------------------------------
   TARXETA COMPAUTA · 0.15.0

   ⚠ EN MÓVIL Y NAMÁS EN MÓVIL. N'escritoriu ye una `.story-card` normal y nun
   camuda un píxel; too lo d'equí vive na media query de 760.

   QUÉ RESUELVE. Una tarxeta con semeya 4:3 a tol anchu de la pantalla ocupa
   unos 450 px: trés tarxetes son pantalla y media, y cinco son media portada.
   Midío el 15/08/2026 nun artículu de mediana esacta (341 pallabres): el
   bloque de rellacionaos ocupaba **1.455 px** y el testu llexible del artículu
   1.358. El mobiliariu yera más grande que'l conteníu.

   La forma compauta —semeya cuadrada de 104 px a la izquierda y titular a la
   drecha— baxa cada tarxeta a unos 130 px ensin quitar nin la semeya nin
   l'antetítulu. Lo que sí quita ye la entradiella: nun anchu de 200 px son
   cinco llinies de testu debaxo d'un titular que yá lo dixo.

   ⚠ Ye `flex` y non `grid` a costies: nos rellacionaos la semeya píntase namás
   si l'artículu tien destacada, asina que la tarxeta tien a vegaes ún y a
   vegaes dos fíos. Con `grid-template-columns` la tarxeta ensin semeya dexaría
   la columna de 104 px vacía; con flex, el cuerpu ocupa lo que hai.

   ⚠ DENDE LA 0.15.3 VAL TAMIÉN PA TOLES LLISTES, y por eso la regla lleva dos
   selectores: la clas `--compacta`, que se pon a manu na portada y nos
   rellacionaos, y `.archive-grid > .story-card`, que ye la reya de llista de
   **toles** páxines —sección, conceyu, archivu, gueta, 404 y los artículos d'un
   númberu de la revista—. Escritu asina, cualquier llista nueva que use
   `.archive-grid` yá vien compauta ensin tocar nada.

   Midío en `/es/escapadas/`: la reya de nueve tarxetes ocupaba 4.585 px, más de
   la metá de la páxina, con caúna en 476. La páxina entera yeren 9,58 pantalles.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .story-card--compacta,
  .archive-grid > .story-card { display: flex; align-items: flex-start; gap: .95rem; }
  .story-card--compacta > a:first-child,
  .archive-grid > .story-card > a:first-child { flex: 0 0 104px; }
  .story-card--compacta .media,
  .archive-grid > .story-card .media { min-height: 0; aspect-ratio: 1 / 1; }
  .story-card--compacta .story-card__body,
  .archive-grid > .story-card .story-card__body { flex: 1 1 auto; min-width: 0; gap: .35rem; padding-top: 0; }
  .story-card--compacta h3,
  .archive-grid > .story-card h3 { font-size: 1.14rem; line-height: 1.14; }
  /* La entradiella nun cabe; nun se pinta en llugar de cortala. */
  .story-card--compacta .story-card__body > p,
  .archive-grid > .story-card .story-card__body > p { display: none; }
}

/* Distintivu de formatu (Vídeo, Audio, Cuestionariu, Reportaxe…).
   L'audiovisual nun tien franxa propia: ye un formatu que se marca na
   tarxeta de la so sección. 146 entraes con YouTube y 10 con iVoox
   sobre 2.068 nun daben pa un bloque enteru. */
.format-badge {
  /* justify-self ademas d'align-self: dientro de .story-card__body,
     que ye un grid, align-self nun evita qu'estire a tol anchor. */
  align-self: flex-start;
  justify-self: start;
  background: var(--blue);
  color: var(--ink);
  padding: .3rem .5rem .24rem;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.format-badge--audio { background: var(--yellow); }

/* Conteníu patrocináu. El equipu pidió señalización «lo más discreto
   posible», asina que la tarxeta ye la mesma que la editorial y lo que
   camuda ye esta etiqueta. El pisu ye innegociable: siempre visible,
   siempre enantes del titular y siempre con rel="sponsored". */
.sponsored-tag {
  align-self: flex-start;
  justify-self: start;
  border: 1.5px solid var(--ink);
  padding: .22rem .45rem .16rem;
  color: var(--ink);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Güecu de publicidá. Acuerdos direutos, non programática: la creatividá
   ye una imaxe propia y el sitiu nun precisa banner de consentimientu.
   L'espaciu resérvase col aspect-ratio pa que nun haya saltu de diseñu
   (CLS) mientres carga. Si nun hai campaña, el güecu nun se pinta. */
.ad-slot { display: grid; justify-items: center; gap: .45rem; padding-block: var(--space-5); }
.ad-slot__label { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ad-slot__frame {
  width: min(100%, 970px);
  aspect-ratio: 970 / 250;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}
.ad-slot__frame img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 760px) {
  .ad-slot__frame { width: min(100%, 320px); aspect-ratio: 320 / 100; }
}

/* Migayes de pan */
.breadcrumbs { margin-bottom: 1.6rem; }
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .7rem; color: #a4a49d; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--blue-text); }

/* Pie */
.site-footer { background: var(--ink); color: #c9c9c2; }
.footer-grid { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 2.5rem; padding-block: 3.25rem 2.5rem; }
.footer-brand { color: var(--paper); font-size: 1.9rem; font-weight: 850; letter-spacing: -.05em; text-decoration: none; }
/* ⚠⚠ LA MARCA DEL PIE YE LA MESMA QUE LA DE LA CABECERA. Lo único que camuda
 * ye ONDE va'l tacu mariellu, y camuda por una midida.
 *
 * LA MIDIDA. Tomada na fonte del sitiu a 30,4 px: la caxa en llinia de la «A»
 * mide 40 px y la llinia base ta a 31 (77,5 %), asina que'l dibuxu de la lletra
 * va del 22,5 % al 77,5 % de la caxa. El tacu de la cabecera entama nel 56 %:
 * **tapa'l 39 % baxeru de la lletra**. Sobre papel eso da igual —la «A» ye
 * tinta y lléese a 14,3:1 sobre'l mariellu— pero equí la lletra tien que ser
 * clara, y `--paper` sobre `--yellow` ye **1,1:1**: el terciu baxeru de la «A»
 * desapaecía. Yera lo que se veía mal.
 *
 * IGUA: el tacu BAXA hasta los pies de la lletra (68 %) y crez pa baxo lo mesmo
 * que subía. Ye'l mesmu tacu —midióse: 45 px nos dos a fonte de 86 px— y col
 * mesmu saliente a los llaos y per baxo, que esa descolocación ye la gracia de
 * la marca; lo único que camuda ye que nel pie mete'l diente nel 17 % de la
 * lletra en llugar de nel 40 %. Eso son les puntes de les pates de la «A»: la
 * lletra sigue lleiéndose entera y el tacu sigue viéndose PER DETRÁS d'ella y
 * non debaxo. Probáronse tamién el 72 % y el 78 % y a partir d'ehí'l tacu
 * despréndese: llese como un cuadráu mariellu sueltu embaxo de la marca.
 *
 * La «A» queda en papel: 19:1 sobre la tinta del pie.
 *
 * ⚠ LO QUE NUN VAL, y probóse na 0.22.2: cubrir la lletra entera de mariellu y
 * poner la «A» en tinta. Lléese perbién, pero **ye otru logotipu** —un
 * rectángulu mariellu con una lletra dientro en llugar d'una lletra con un tacu
 * detrás—, y nel pie tien que reconocese la mesma marca que arriba.
 *
 * ⚠ La «V» sí camuda de color: `--blue-text` sobre tinta ye 2,4:1, per debaxo
 * de cualquier mínimu. Pasa a `--blue`, 8,4:1. */
.footer-brand .brand__v { color: var(--blue); }
.footer-brand .brand__a { color: var(--paper); }
.footer-brand .brand__a::after { inset: 68% -.07em -.14em .03em; }
.footer-about { max-width: 38ch; color: #aeadA5; font-family: var(--serif); }
.footer-column h2 { margin: 0 0 .9rem; color: var(--paper); font-size: .78rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.footer-column ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
/* ⚠ Los enllaces del pie lleven pesu y midida propies.
   Heredaben el cuerpu —Arial Narrow a 400 y 1rem— y yera lo único del sitiu
   que diba en redonda fina: al llau de la so propia cabecera en 850 y de la
   nav en 800, «Nós», «Contactu» o «Xintar y beber» paecíen d'otra páxina. Y
   sobre `--ink`, una condensada fina piérdese. Nun ye una fonte nueva: ye la
   mesma familia col pesu que'l sitiu usa pa navegar (750, el de
   `.story-list`), un puntu más pequeña y col testu un pocoñín más claru pal
   contraste. */
.footer-column a {
  color: #d5d5ce;
  font-size: .95rem;
  font-weight: 750;
  letter-spacing: .012em;
  line-height: 1.2;
  text-decoration: none;
}
.footer-column a:hover { color: var(--yellow); }
.footer-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; padding-block: 1.4rem 1.7rem; border-top: 1px solid #343430; color: #aeadA5; font-size: .82rem; }
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.footer-legal a { text-decoration: none; }


@media (max-width: 1050px) {
  .masthead { gap: 1.25rem; }
  .primary-nav ul { gap: .35rem 1.05rem; font-size: .78rem; }
  /* ⚠ Yera `1.5fr 1fr 1fr` con `:last-child { grid-column: 2 / -1 }`, y esa
     regla ye de cuando'l pie tenía CUATRO columnes. Con trés fíos —marca y dos
     navegaciones— la última pidía dos columnes, nun cabía na primer filera y
     baxaba a la segunda **empezando na columna 2**, dexando la primera vacía a
     la so izquierda. Ye lo que se veía torcío.
     Agora: la marca a lo ancho arriba y les navegaciones debaxo, toes col mesmu
     berbesu. Sigue valiendo cuando entren les redes sociales (§ 2.3) y seyan
     cuatro fíos. */
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-grid > :last-child { grid-column: auto; }
  /* Les dos partes de la llinia llegal separaes a los estremos dexaben un
     furacu nel mediu en tableta. */
  .footer-legal { justify-content: flex-start; gap: .6rem 2rem; }
}

@media (max-width: 760px) {
  /* La escala de móvil nun se toca: ellí el repartu yá taba bien. */
  :root { --space-5: 2rem; --space-6: 3rem; --space-7: 3rem; --space-8: 3.5rem; }
  .container { width: min(100% - 2rem, var(--content)); }
  .site-chrome { position: sticky; top: 0; box-shadow: 0 1px 0 rgba(17,17,16,.16); }
  /*
   * ⚠ EL MESMU REPARTU QUE LA BARRA PEGADA: menú a la izquierda, marca al
   * mediu, idioma a la drecha.
   *
   * Yera «marca | idioma | menú», o seya la marca pegada a la esquina izquierda
   * y los dos botones xuntos a la drecha. Dende que n'escritoriu hai barra
   * pegada col botón de menú a la izquierda, esi repartu yera **dos cabeceres
   * distintes pal mesmu sitiu**: quien pasa del móvil al ordenador tien que
   * volver a buscar el botón.
   *
   * Faise con `order` y non camudando'l HTML porque l'orde del documentu ye'l
   * bonu pa quien nun ve la pantalla: primero la marca —que diz ónde tas— y
   * llueu los mandos. Trés columnes fixes a los llaos y la del mediu elástica,
   * pa que la marca quede centrada de verdá y non «centrada» ente dos coses de
   * distintu ancho.
   */
  .masthead {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: center;
    gap: .5rem;
    padding-block: .72rem;
    border-bottom: 3px solid var(--ink);
  }
  .masthead .menu-toggle { order: 1; justify-self: start; }
  .masthead .brand { order: 2; justify-self: center; }
  .masthead .lang-compact { order: 3; justify-self: end; }
  .brand { font-size: 2.1rem; }
  /* Namás la gueta de la cabecera. Ensin acutalo a .masthead, esta regla
     escondía tamién la gueta del panel móvil (lleva la mesma clas) y el
     focu nun tenía onde entrar al abrir el menú. */
  .masthead .site-search, .lang-switch, .primary-nav { display: none; }
  .lang-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    border: 2px solid var(--ink);
    font-size: .8rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-decoration: none;
  }
  .lang-compact:hover { background: var(--ink); color: var(--paper); }
  .menu-toggle { display: inline-flex; width: 46px; height: 46px; }
  .mobile-panel { display: flex; }
  .mobile-panel[hidden] { display: none; }
  .section-heading { align-items: start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer-grid > :last-child { grid-column: auto; }
  .footer-legal { flex-direction: column; }
}

@media (max-width: 420px) {
  /* En 320 px nun caben menú + marca + idioma al tamañu grande. */
  .masthead { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: .35rem; }
  .brand { font-size: 1.7rem; }
  .lang-compact { min-width: 40px; height: 42px; font-size: .74rem; }
  .menu-toggle { width: 42px; height: 42px; }
}

@media print {
  .site-chrome, .primary-nav, .mobile-panel, .sticky-bar, .site-footer { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .container { width: 100%; }
  .media { border: 1px solid #000; }
  a { color: #000; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===================== FIN DEL TRONCO COMÚN ===================== */

/* ==========================================================
   TRONCO D'ARTÍCULU — idénticu byte a byte en articulu.html
   (reportaxe) y articulu-nota.html (nota).
   Nel tema ye la parte compartida de single.php; lo que camuda
   ente les dos plantíes ye la retícula, non la tipografía.
   ========================================================== */

.article-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.article-format {
  background: var(--yellow);
  padding: .35rem .55rem .28rem;
  color: var(--ink);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* El <mark> sal del meta _va_resaltar (la subcadena a marcar). Ensin
   él, titular llimpiu. Nenguna heurística acierta: «Escap<mark>aes</mark>»
   resalta un sufixu. ATENCIÓN: esti meta entá NUN esiste, hai que crealu. */
/* Hereda de la regla global `mark`. Yera un `linear-gradient`, que ye un fondu,
   y esti h1 tien `line-height: .88`: con dos llinies la de baxo tapaba la
   d'arriba. Corrixío na 0.22.2. */
/* .standfirst píntase namás con estractu manual (360 entraes, 17,4 %).
   Col auto-estractu saldría'l primer párrafu, que vuelve apaecer
   xusto embaxo: el mesmu testu dos veces. */
.standfirst {
  max-width: 67ch;
  color: #3f3f3a;
  font-family: var(--serif);
  line-height: 1.56;
}
.article-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding-block: 1.15rem;
  border-block: 1px solid var(--line);
}
.author { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.author__avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--blue);
  color: var(--ink);
  font-weight: 850;
}
.author__text { min-width: 0; }
.author__text address { margin: 0; font-style: normal; font-weight: 800; }
.author__text address a { text-decoration: none; }
.author__text address a:hover { text-decoration: underline; text-decoration-color: var(--yellow); }
.publication-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .15rem; }
.publication-meta span:not(:last-child)::after { content: "·"; margin-left: 1rem; color: #aaa9a2; }
.article-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.action-button {
  min-height: 42px;
  border: 2px solid var(--ink);
  background: transparent;
  padding: .62rem .8rem .52rem;
  color: var(--ink);
  cursor: pointer;
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.action-button:hover { background: var(--ink); color: var(--paper); }
.action-button--share { background: var(--ink); color: var(--paper); }
.action-button--share:hover { background: var(--blue); color: var(--ink); }
.share-status { margin: .6rem 0 0; color: var(--muted); font-size: .75rem; font-weight: 650; }

figcaption {
  display: flex;
  gap: .55rem;
  margin-top: .7rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.45;
}
figcaption::before { content: "■"; flex: 0 0 auto; color: var(--blue-text); font-size: .65rem; transform: translateY(.12rem); }

.article-content {
  min-width: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  line-height: 1.78;
}
.article-content > *:first-child { margin-top: 0; }
.article-content p { margin: 0 0 1.55em; }
.article-content h2, .article-content h3 {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 850;
  letter-spacing: -.035em;
  line-height: 1;
  text-wrap: balance;
}
.article-content a { color: var(--blue-text); font-weight: 700; }
.article-content a:hover { background: var(--yellow); color: var(--ink); }
/* Cita rebaxada: caltiénse'l tratamientu (borde de 2px y solombra
   amarilla) porque ye parte del llinguaxe aprobáu, pero baxa la escala.
   Cásique nenguna entrada usa blockquote y a 2,45rem una cita suelta
   comía una nota de 320 pallabres. */
.article-content blockquote {
  margin: 2.2rem 0;
  padding: 1.5rem 1.6rem 1.4rem;
  border: 2px solid var(--ink);
  background: var(--paper-warm);
  box-shadow: 8px 8px 0 var(--yellow);
}
.article-content blockquote p {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.14;
}
.article-content blockquote footer {
  margin-top: .9rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.article-figure { margin: 2.3rem 0; }
.article-figure .media { aspect-ratio: 4 / 3; border: 2px solid var(--ink); }
.article-note {
  margin: 2.2rem 0;
  padding: 1.45rem 1.55rem;
  border-left: 6px solid var(--blue-text);
  background: #e9f6fc;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
}
.article-note strong { display: block; margin-bottom: .35rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

.article-end { width: min(100% - 2.5rem, var(--reading)); margin-inline: auto; padding-bottom: var(--space-7); }
.author-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 3px solid var(--ink);
}
.author-box .author__avatar { width: 62px; height: 62px; font-size: 1.25rem; }
.author-box h2 { margin: 0 0 .25rem; font-size: 1.35rem; }
.author-box p { margin: 0; color: var(--muted); font-family: var(--serif); line-height: 1.55; }

.related { padding-block: var(--space-6) var(--space-8); background: var(--paper-warm); border-top: 1px solid #eadf9e; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }

@media (max-width: 760px) {
  .article-byline { align-items: flex-start; }
  .article-actions { width: 100%; }
  .article-actions .action-button { flex: 1 1 auto; }
  .author-box { grid-template-columns: 1fr; }
  /* ⚠ El güecu baxa de 2,8 rem a una llinia. Coles tarxetes compautes
     (`.story-card--compacta`) trés semeyes a tol anchu pasen a trés fileres de
     ~130 px, y un güecu de 2,8 rem ente elles volvería a separtar lo que ye una
     llista. Midío: el bloque baxa de 1.455 px a menos de 600. */
  .related-grid { grid-template-columns: 1fr; gap: 0; }
  .related-grid > .story-card { padding-bottom: 1.15rem; border-bottom: 1px solid #e6dca0; }
  .related-grid > .story-card + .story-card { padding-top: 1.15rem; }
  .related-grid > .story-card:last-child { padding-bottom: 0; border-bottom: 0; }
}

@media (max-width: 420px) {
  .publication-meta { display: grid; gap: .15rem; }
  .publication-meta span:not(:last-child)::after { content: none; }
  .article-actions { display: grid; grid-template-columns: 1fr; }
  .article-actions .action-button { width: 100%; }
}

@media print {
  .article-actions, .related { display: none !important; }
  .article-end { width: 100%; }
  .article-figure .media { border: 1px solid #000; }
  .article-content { max-width: none; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ================= FIN DEL TRONCO D'ARTÍCULU ================= */

/* ===================== CSS PROPIU DE LA PORTADA ===================== */

/* Mosaicu de portada. Los 4 güecos llénense con _va_portada_posicion
   1-4; el güecu que nun tenga naide asignáu cae al postreru de la so
   sección por recencia. Güei hai 0 asignaciones, asina que la ruta
   por defeutu ye'l respaldu: la portada nunca puede salir rota. */
.lead-package { padding-block: var(--space-5) var(--space-7); }
.hero-mosaic {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding-top: 12px;
  border-top: 4px solid var(--ink);
}
.hero-card {
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.hero-card a { text-decoration: none; }
.hero-card h2, .hero-card h3 { text-wrap: balance; }

.hero-main {
  flex: 7 1 0;
  display: grid;
  /* ⚠ LA COLUMNA TIEN QUE DIR CON `minmax(0, …)`, Y NUN YE UN ADORNU.
     Ensin ella la columna implícita ye `auto`, que nunca baxa del anchu
     mínimu del conteníu; y `overflow-wrap: break-word` **nun amenorga esi
     mínimu** —namás dexa partir al pintar—. En móvil, el titular de portada
     pidía 14 px más de los que hai y el `overflow: hidden` de `.hero-card`
     cortaba la semeya y el propiu titular pela drecha. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(320px, 1.15fr) auto;
  min-width: 0;
}
.hero-main__media { display: block; min-height: 320px; }
.hero-main__media .media { height: 100%; min-height: 320px; }
.hero-main__copy {
  position: relative;
  z-index: 1;
  margin-top: -1px;
  padding: clamp(1.35rem, 2.4vw, 2rem);
  background: var(--yellow);
  color: var(--ink);
}
.hero-main .eyebrow { color: var(--ink); }
.hero-main h2 {
  margin: .5rem 0 .8rem;
  max-width: 14ch;
  font-size: clamp(2.2rem, 3.9vw, 3.9rem);
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: .9;
}
.hero-main h2 a:hover { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .08em; }
.hero-main .stand { max-width: 58ch; margin: 0; font-size: 1.06rem; color: #2a281f; }
.hero-main .lead-meta { color: #39372e; }
.hero-main__cta {
  display: inline-flex;
  border-bottom: 3px solid var(--ink);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-main__cta:hover { background: var(--ink); color: var(--yellow); }
/* La firma a la izquierda y el «Lleer» a la drecha, na mesma llinia. Yeren dos
   bloques ún sobre otru; dende que la fecha nun se pinta na portada, la firma
   ye una llinia de trés pallabres y dexaba una filera casi vacía. */
.hero-main__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  margin-top: 1.15rem;
}

.hero-right {
  flex: 5 1 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.hero-side-feature {
  flex: 1.08 1 0;
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(0, 1.1fr);
  min-height: 280px;
  background: var(--ink);
  color: var(--paper);
}
.hero-side-feature .media { height: 100%; min-height: 100%; }
.hero-side-feature__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 2.2vw, 2rem);
}
.hero-side-feature .eyebrow { color: #8fd5ff; }
.hero-side-feature .format-badge { margin-top: .55rem; }
.hero-side-feature h3 {
  margin: .45rem 0 .7rem;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.035em;
}
.hero-side-feature h3 a:hover { color: var(--yellow); }
.hero-side-feature .meta { color: #c9c9c2; }

/* Los güecos 3 y 4 nun lleven imaxe: equí caen ensin problema les
   62 entraes ensin destacada. Nun hai marcador de posición. */
.hero-briefs {
  flex: .82 1 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}
.hero-brief {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 2px solid var(--ink);
  background: var(--paper-warm);
}
.hero-brief--blue { background: var(--blue-text); color: #fff; border-color: var(--blue-text); }
.hero-brief--blue .eyebrow { color: #fff; }
.hero-brief--blue .meta { color: #d6efff; }
.hero-brief h3 {
  margin: .5rem 0 .8rem;
  font-size: clamp(1.25rem, 1.85vw, 1.7rem);
  font-weight: 800;
  /* Yera 1: coles descendentes y el sorrayáu, les llinies chocaben. */
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}
/* Estes dos tarxetes nun son .hero-card, asina que nun-yos llegaba la
   regla que quita'l sorrayáu: salíen colos titulares sorrayaos y con
   les llinies pegaes. */
.hero-brief a { text-decoration: none; }
.hero-brief a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: .18em; text-underline-offset: .12em; }
.hero-index {
  position: absolute;
  right: clamp(1rem, 1.8vw, 1.5rem);
  bottom: clamp(.8rem, 1.4vw, 1.2rem);
  font-size: clamp(2.5rem, 4vw, 4.8rem);
  font-weight: 900;
  line-height: .8;
  opacity: .16;
  pointer-events: none;
}

/* Lo último — la tira de lo más nuevo de tol sitiu.
 *
 * ⚠ YEREN CUATRO TARXETES NUNA REYA (`.news-grid`) Y AGORA YE UNA TIRA. La
 * reya quitóse entera na 0.15.0 y anótase equí pa que naide la busque nel
 * historial: midía 681 px en móvil pa cuatro titulares, y taba na parte alta de
 * la portada, que ye dicir «esto ye lo importante» de lo que namás ye lo más
 * reciente. Nun mediu que quier publicar 3-5 pieces al mes, lo más reciente ye
 * una consulta y non una cabecera.
 *
 * ⚠ Y AGORA LLEVA FECHA, que ye xustamente lo que nun llevaba. Nuna tarxeta
 * la fecha ye un sellu que sobra; nuna tira ye la información. Va la primera y
 * en cifres tabulares pa que caigan una debaxo d'otra. Lo único en tinta llena
 * ye'l titular.
 */
.news-section { background: var(--paper-warm); border-block: 1px solid #eadf9e; }
.tira-ultimo {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--ink);
}
.tira-ultimo li { border-bottom: 1px solid #d8cc8b; }
.tira-ultimo li:last-child { border-bottom: 0; }
.tira-ultimo a {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr) auto;
  gap: .35rem 1.4rem;
  align-items: baseline;
  padding: .95rem 0;
  text-decoration: none;
}
/* ⚠ SORRAYÁU Y NON GRADIENTE, y la razón val pa cualquier otru sitiu del tema
   onde'l titular seya fíu direutu d'una reya.

   El xestu del sitiu pa un titular ye `linear-gradient(transparent 72%, mariello
   72%)`, que ye un FONDU: píntase na caxa entera del elementu. Nun `<a>` en
   llinia dientro d'un `<h3>` eso ye lo que se quier —la caxa ye'l testu, y con
   dos llinies son dos caxes—, pero equí `.tira-ultimo__titulu` ye **fíu d'un
   grid**, asina que se blockifica y la so caxa ye la celda entera: el mariello
   siguía hasta la punta de la columna anque'l titular tuviera cuatro pallabres,
   y lleíase como una raya y non como un sorrayáu.

   El sorrayáu de testu píntase por LLINIA y col llargor esautu de caúna, que ye
   lo que fai falta. Los valores son los mesmos que los de `.hero-brief`, que ye
   la otra tarxeta de titular ensin semeya de la portada: les dos tienen que
   comportase igual porque se ven a la vez. */
.tira-ultimo a:hover .tira-ultimo__titulu {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: .18em;
  text-underline-offset: .12em;
}
.tira-ultimo__data {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tira-ultimo__titulu { font-size: 1.14rem; font-weight: 750; line-height: 1.2; }
.tira-ultimo__seccion {
  color: var(--blue-text);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Territoriu · los dos exes d'esploración y el conceyu destacáu
 *
 * ⚠ `align-items: stretch` (que ye lo de por defeutu) Y `justify-content:
 * flex-start` DIENTRO. Les dos coses xuntes, y esta ye la hestoria, porque yá
 * se tocó dos veces:
 *
 *   1 · Al principiu yera `stretch` + `space-between`: la caxa de la izquierda
 *       estirábase hasta l'altor de la tarxeta y llueu repartía esi altor ENTE'L
 *       TESTU Y LES PÍLDORES, dexando un blancu de un metru en mediu.
 *   2 · La 0.13.0 arreglólo poniendo `align-items: start`, y con eso la caxa
 *       dexó d'estirase: quedaba 96 px más curtia que la tarxeta, midío, y les
 *       dos coses que tienen que lleese como una filera nun cuadraben abaxo.
 *
 * Lo que faltaba yera arreglar el `space-between`, non el `stretch`. Agora la
 * caxa estírase —y cuadra— y el so conteníu queda arriba.
 */
.places-grid { display: grid; grid-template-columns: .9fr 1.45fr; gap: 2.25rem; }
.places-intro {
  /* L'aire de la caxa nuna variable: úsalu tamién `.places-planes` en negativu
     pa salir a los borde, y si camuda ún tienen que camudar los dos. */
  --caxa-aire: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem;
  border: 2px solid var(--ink);
  padding: var(--caxa-aire);
}
.places-intro p { margin: 0 0 1.1rem; font-size: 1rem; }

/* La zona de riba —el llugar— crez cola caxa, igual que la franxa de planes.
 *
 * ⚠ El espaciu que sobra repártese ENTE LES DOS ZONES y cada una centra lo
 * suyo. Dándo-y too a una sola, esa zona quedaba con 250 px d'aire midíos y la
 * otra pegada al so borde: dos requexos desiguales en cuenta d'ún. Asina les
 * dos lleen como paneles con aire, que ye lo que son.
 *
 * ⚠ Y cuando nun sobra nada —móvil, o tarxeta curtia— `center` pinta lo mesmo
 * que `flex-start`: esta regla nun camuda un píxel nesi casu. */
.places-llugar {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Los planes, dientro de la caxa del territoriu.
 *
 * ⚠ YERA UN MÓDULU SUELTU DE LA PORTADA (0.15.0) Y DURÓ UNA VERSIÓN. Una
 * cabecera de sección con llinia negra y títulu grande pa cuatro píldores ye
 * too'l aparatu d'un módulu pa cuatro pallabres: quedaba coxu y ensin sitiu.
 *
 * Equí ye lo que ye: el segundu exe d'esploración de la mesma caxa. El conceyu
 * ye per ónde y el plan ye pa qué. La llinia de riba ye la única separación que
 * fai falta pa que se lean como dos coses y non como una. */
/* Los planes, como FRANXA AL BAXU DE LA CAXA.
 *
 * ⚠ POR QUÉ NUN YE UN BLOQUE MÁS. La caxa estírase hasta l'altor de la tarxeta
 * de al llau, y el so conteníu nun da pa tanto: quedaben 59 px de blancu debaxo
 * de la última píldora, dientro d'una caxa con borde. Un requexu vacíu enmarcáu
 * llese como un fallu, non como aire.
 *
 * Dos coses lo arreglen y les dos fain falta:
 *   · `margin-top: auto` pega'l bloque al baxu, asina que lo que sobre queda
 *     ENTE los dos grupos y non al final;
 *   · los márxenes negativos y el fondu caliente saquen la franxa a los bordes
 *     de la caxa. Con eso la caxa yá nun ye «conteníu y un güecu», ye dos zones:
 *     arriba el llugar, abaxo el plan.
 *
 * ⚠ Los márxenes negativos tienen que ser esautamente `--caxa-aire`, que ye'l
 * rellenu de la caxa. Nun se pon el númberu a manu nin equí nin na media query
 * de móvil: camúdase la variable y les dos coses van xuntes.
 *
 * ⚠⚠ Y LA FRANXA CREZ COLA CAXA (0.22.4). El `margin-top: auto` de la 0.15.4
 * pegaba la franxa al baxu, pero **too lo que sobraba quedaba enriba d'ella**:
 * un güecu blancu ente les píldores de conceyu y la llinia de la franxa. Nun
 * se notaba siempre porque l'altor de la caxa nun ye suyu —cópialu de la
 * tarxeta d'al llau— y esa tarxeta mide lo que mida'l so titular y la so
 * semeya: col titular de cuatro llinies del 26/08/2026 sobraben 190 px.
 *
 * Un margin auto y un `flex-grow` nun pueden convivir: l'auto come tol espaciu
 * llibre y al `flex` nun-y queda nada que repartir. Asina que la franxa dexa
 * de tener margin auto y pasa a **crecer ella**: lo que sobre queda DIENTRO de
 * la zona caliente, ente'l so borde y el so conteníu, col testu centráu. Una
 * caxa de dos zones —arriba'l llugar, abaxo'l plan— aguanta cualquier altor;
 * un requexu blancu enmarcáu, non.
 *
 * ⚠ Cuando nun sobra nada —móvil, o tarxeta curtia— esto pinta esautamente lo
 * mesmo que pintaba enantes. */
.places-planes {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 calc(var(--caxa-aire) * -1) calc(var(--caxa-aire) * -1);
  padding: 1.15rem var(--caxa-aire) var(--caxa-aire);
  background: var(--paper-warm);
  border-top: 2px solid var(--ink);
}
.places-planes .eyebrow { display: block; margin: 0 0 .85rem; }

/* Y una segunda contención: la tarxeta nun puede crecer ensin llende. La
   semeya llena'l güecu con `object-fit: cover` seya cual seya la so
   orientación, asina que la razón d'aspeutu equí ye una decisión de diseñu y
   non una consecuencia del ficheru que suba la redacción. */
.featured-place { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 360px; max-height: 520px; background: var(--ink); color: var(--paper); }
.featured-place .media { min-height: 100%; }
.featured-place__copy { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 1.6rem; }
.featured-place h3 { margin: .5rem 0 .7rem; font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: .97; letter-spacing: -.035em; }
.featured-place p { margin: 0 0 1.1rem; color: #d1d1ca; font-family: var(--serif); }
.featured-place a { text-decoration: none; }
/* ⚠ `align-self: flex-start` NUN YE UN AXUSTE FINO. `.featured-place__copy` ye
   una columna flex, asina que'l enllaz estirábase a tol anchu de la caxa y el
   so sorrayáu —3 px de mariello— convertíase nuna raya de 250 px pegada al baxu
   de la tarxeta: nun se lleía como un enllaz sinón como'l borde de la caxa, col
   testu puestu en mediu d'él. Asina mide lo que mide'l testu. */
.featured-place .section-link { align-self: flex-start; color: var(--paper); border-color: var(--yellow); }
.featured-place .section-link:hover { background: var(--yellow); color: var(--ink); }

/* Filera de sección · 0.15.0
 *
 * ⚠ ESTO SUSTITÚI A `.editorial-grid`, `.feature-card`, `.standard-card` y
 * `.editorial-col`, que se quitaron enteros. Anótase pa que naide los busque:
 * yera la disposición de «una grande, dos normales y cuatro enllaces» que
 * compartíen Escapaes y el bloque de Cultura, y midía 1.978 y 1.932 px en
 * móvil. Siete entraes por módulu son, a la cadencia real, más d'un añu d'esa
 * sección na portada. La razón entera ta en `va_pintar_filera_seccion()`.
 *
 * Trés columnes iguales y ensin xerarquía dientro: la tarxeta grande yera una
 * xerarquía que nun sostién nengún datu, porque `_va_portada_posicion` sigue
 * ensin usase.
 *
 * En móvil les tarxetes son `.story-card--compacta` y la filera pasa a una
 * columna con una llinia ente caúna: la llinia ye lo que fai que trés tarxetes
 * compautes se llean como una llista y non como trés coses sueltes. */
.seccion-filera { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.seccion-filera > * { min-width: 0; }

/* Afaya Xixón · la banda de ciudá.
 *
 * ⚠ Ye'l ÚNICU módulu escuru de la portada, y ye a costies. Toles demás
 * secciones son temes; esta ye un LLUGAR, la primera guía de ciudá del sitiu.
 * Con otra filera de trés tarxetes sobre papel, el llector nun tendría manera
 * de saber que ta mirando otra cosa. Lo que camuda ye'l marcu.
 *
 * ⚠ Y AUN ASINA LES TARXETES SON IGUALES: nin tarxeta grande nin destacáu.
 * La xerarquía dientro d'un módulu tien que decidila daquién y
 * `_va_portada_posicion` sigue con 0 asignaciones.
 *
 * ⚠ Píntase con UNA sola entrada, al revés que los otros módulos, que piden
 * dos. Equí la presentación ocupa la columna izquierda, asina que una tarxeta
 * nun dexa güecos: la banda sigue equilibrada. Güei hai 1 publicada. */
.xixon-banda {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 2.15fr);
  gap: 1.4rem 2.6rem;
  align-items: start;
  margin-block: var(--space-6);
  padding: 1.9rem 2rem 2rem;
  background: var(--ink);
  color: var(--paper);
}
.xixon-banda__presenta .eyebrow { color: var(--blue); }
.xixon-banda__presenta h2 {
  margin: .4rem 0 .7rem;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: .92;
  letter-spacing: -.045em;
}
.xixon-banda__presenta p {
  margin: 0 0 1rem;
  max-width: 30ch;
  font-family: var(--serif);
  color: #cfcfc6;
}
/* El enllaz de sección ye sobre fondu escuru: el sorrayáu mariellu val, pero
   el `background` del hover taparía'l testu. Equí inviértese. */
.xixon-banda .section-link { color: var(--paper); }
.xixon-banda .section-link:hover { background: var(--yellow); color: var(--ink); }

.xixon-banda__fileres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem;
}
.xixon-banda__fileres > * { min-width: 0; }
/* Con una o dos entraes nun s'estiren a lo ancho de trés güecos: quedaríen dos
   tarxetes xigantes al llau d'un furacu. */
.xixon-banda__fileres:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.xixon-banda__fileres:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.xixon-card h3 { font-size: 1.15rem; line-height: 1.1; }
.xixon-card h3 a { color: var(--paper); }
/* ⚠ Nada de fondu nos titulares: con `line-height` per debaxo de 1.35 la caxa
   del fondu de la segunda llinia tapa la primera. Ye un cambiu de color, como
   en ViaxAst. Ver la nota de `.hero-brief` en style.css. */
.xixon-card h3 a:hover { color: var(--blue); }
.xixon-card img { border: 1px solid #3a3a34; }

@media (max-width: 1000px) {
  .xixon-banda { grid-template-columns: minmax(0, 1fr); }
  .xixon-banda__presenta p { max-width: 52ch; }
}
@media (max-width: 760px) {
  .xixon-banda { padding: 1.4rem 1.2rem 1.5rem; }
  /* En móvil, como toa llista de tarxetes del sitiu: compauta, con la
     miniatura de 104 px a la izquierda y una llinia ente caúna. */
  .xixon-banda__fileres,
  .xixon-banda__fileres:has(> :last-child:nth-child(1)),
  .xixon-banda__fileres:has(> :last-child:nth-child(2)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .xixon-card { padding-block: .9rem; border-top: 1px solid #3a3a34; }
  .xixon-card:first-child { border-top: 0; padding-top: 0; }
}

/* Personalidaes, en banda y non en columna.
 *
 * ⚠ Yera `.duo-grid`: una columna de tarxetes de Curiosidaes a la izquierda y
 * esti panel a la drecha. Esa partición ye lo que obligaba a que Curiosidaes
 * fuera una reya de dos columnes, y con ello a que midiera 2.428 px en móvil.
 * Equí ye una banda de dos columnes —el nome de la sección y los cuatro
 * nomes— y en móvil una llista de cuatro llinies. */
.people-panel { border: 2px solid var(--ink); padding: 1.4rem; background: var(--paper-warm); }
.people-panel h2 { margin: .35rem 0 .9rem; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: .96; letter-spacing: -.035em; }
.people-panel--banda {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.9fr);
  gap: 1.2rem 2.5rem;
  align-items: start;
  margin-block: var(--space-5);
  padding: 1.5rem 1.6rem 1.6rem;
}
.people-panel--banda .story-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
  margin-top: 0;
  border-top: 0;
}

.story-list { display: grid; margin-top: 1.1rem; border-top: 1px solid var(--line); }
.story-list a { display: block; padding: .95rem 0; border-bottom: 1px solid var(--line); font-weight: 750; line-height: 1.2; text-decoration: none; }
.story-list a:hover { color: var(--blue-text); }

/* Axenda. Amuesa namás entraes con _va_axenda_fecha futura y el
   bloque enteru desapaez si nun hai denguna. Güei hai 0 asignaciones:
   en producción esta sección nun se pinta hasta que la redacción use'l campu. */
/* ⚠ LES COLUMNES SON LES QUE HAYA EVENTOS, NON SIEMPRES CUATRO.
   Yera `repeat(4, 1fr)` fixo. Midío a 1.440 px con trés eventos: les tarxetes
   acababen nel píxel 1.033 y la raya de 3 px seguía hasta'l 1.353 —**un cuartu
   del módulu en blanco**, y nun había llinia denguna que lu zarrara pela
   drecha—. `front-page.php` pinta `agenda-grid--N` cola cuenta real y equí se
   reparte l'anchu ente les que hai.
   El `repeat(4, ...)` queda como respaldu: si dalguún día `va_axenda()` trae
   más de cuatro, siguen cuatro por filera. */
.agenda-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px solid var(--ink); }
.agenda-grid--1 { grid-template-columns: minmax(0, 1fr); }
.agenda-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agenda-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agenda-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ⚠ `container-type` ye pa la consulta de contenedor de más abaxo: la tarxeta
   tien que poder preguntase lo ancha que ye. La rexella del conteníu NUN pue
   dir equí: ver la nota de `.event-card__cuerpu`. */
/* ⚠ `display: block` escrito a costies: la tarxeta ye un `<a>` —inline— y la
   rexella blocifícalu sola, pero na impresión `.agenda-grid` pasa a `block` y
   ahí dexaría de selo. Y `container-type` nun val nun elementu en llinia. */
.event-card { display: block; padding: 1.5rem; border-left: 1px solid var(--line); text-decoration: none; container-type: inline-size; }
.event-card:first-child { border-left: 0; padding-left: 0; }
.event-card:hover { background: var(--paper-warm); }
/* ⚠⚠ ESTI ENVOLTORIU EXISTE POR UNA REGLA DE LES CONSULTES DE CONTENEDOR:
   **un elementu nun ye contenedor de sí mesmu**. Si `container-type` va na
   tarxeta, dientro de `@container` pue cambiase lo que seya de los fiños pero
   NON de la tarxeta, asina que la rexella de la tarxeta nun se podía tocar.
   Probóse ensin envoltoriu y lo que salía yeren dos columnes implícites que se
   repartíen l'anchu a medies: midido, la data quedaba nuna columna de 570 px
   con 130 de testu dientro. */
.event-card__cuerpu { display: grid; gap: .7rem; }
.event-date { display: flex; align-items: baseline; gap: .55rem; }
/* `clamp` y non 3rem fixos: dende que los eventos de varios díes enseñen el
   rangu («21-23»), la cifra pue midir el doble y a 3rem desbordaba la tarxeta
   en tableta. Con una sola cifra sigue viéndose igual de grande. */
.event-date strong { color: var(--blue-text); font-size: clamp(2rem, 3.4vw, 3rem); line-height: .8; font-variant-numeric: tabular-nums; }
.event-date span { color: var(--muted); font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.event-card h3 { margin: 0; font-size: 1.25rem; line-height: 1.12; }
.event-card p { margin: 0; color: var(--muted); font-family: var(--serif); }

/* ⚠⚠ CUANDO LA TARXETA YE ANCHA, LA DATA VA AL LLAU Y NON ENRIBA.
 *
 * Con un eventu solu la tarxeta mide los 1.280 px del conteníu, y con dos, 640.
 * Cola data enriba y un titular d'una llinia, esa tarxeta ye una tira ancha con
 * un pegoyu de testu na esquina d'arriba a la izquierda y 800 px de blancu al
 * llau: lléese como si la páxina tuviera a medio cargar. Ye lo que se veía con
 * ún y con dos eventos. Cola data a la izquierda, el bloque tien dos piezes y la
 * caxa xustíficase sola.
 *
 * ⚠ YE UNA CONSULTA DE CONTENEDOR Y NON UN `@media`, A PROPÓSITU. Lo que manda
 * equí ye L'ANCHU DE LA TARXETA, y esi sal de dos coses a la vez: cuántos
 * eventos hai y lo ancha que ye la pantalla. Una tarxeta de 600 px pue ser un
 * eventu n'escritoriu, dos en tableta o una sola en móvil apaisado; con `@media`
 * habría qu'escribir la mesma regla en cada cruce de los dos exés. Ye la primer
 * consulta de contenedor del tema.
 *
 * ⚠ EL LÍMITE SON 520 px de conteníu, y nun ye un númberu redondu al azar.
 * Midiéronse toles anchures que pue tener la tarxeta:
 *     · escritoriu, cuatro eventos ...... 272-296 → vertical
 *     · escritoriu, trés eventos ........ 378-402 → vertical
 *     · tableta, dos columnes ........... 300-469 → vertical
 *     · escritoriu, dos eventos ......... 592-616 → horizontal
 *     · tableta/móvil, tarxeta a tol anchu 673-962 → horizontal
 *     · escritoriu, un eventu ........... 1.256   → horizontal
 * Ente 469 y 592 nun cai denguna, asina que cualquier límite d'ehí dientro
 * dexa toles tarxetes d'una mesma filera del mesmu llau. ⚠ La primera tarxeta
 * de cada filera ye 24 px más ancha que les otres (nun lleva `padding-left`):
 * un límite metíu ente 445 y 469 partiría una filera pel medio.
 *
 * ⚠ Si el navegador nun entiende `@container`, la tarxeta queda VERTICAL, que
 * ye como taba enantes. Nun se pierde nada. */
@container (min-width: 520px) {
  .event-card__cuerpu { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 1.8rem; row-gap: .4rem; }
  /* `span 2` y non `1 / -1`: les fileres d'esta rexella son implícites y ehí
     `-1` nun apunta a lo que parez. */
  .event-date { grid-row: 1 / span 2; grid-column: 1; flex-direction: column; align-items: flex-start; gap: .15rem; }
  .event-card h3, .event-card p { grid-column: 2; }
  .event-card h3 { font-size: 1.6rem; max-width: 32ch; }
}
/* ⚠ EL TITULAR GRANDE YE NAMÁS PA LA AXENDA D'UN EVENTU SOLU, y el `--1` del
   selector ye lo que lo suxeta.
   Yera `.event-card h3` a seques y en tableta con TRÉS eventos la tercer
   tarxeta —que ocupa la filera entera, o seya 921 px de conteníu— entraba
   n'esti tramu: quedaba a 2,1rem al llau de dos hermanes a 1,25rem y lleíase
   como si esi eventu fuere más importante que los otros dos. Nun lo ye, y la
   xerarquía dientro d'un módulu tien que decidila daquién.
   Cola tarxeta ancha a 1,6rem la diferencia sigue habiéndola —ye'l doble
   d'ancha— pero ye la que-y toca. */
@container (min-width: 900px) {
  .agenda-grid--1 .event-card h3 { font-size: 2.1rem; max-width: 26ch; }
}

/* ViaxAst */
.viaxast { background: var(--yellow); }
.viaxast-grid { display: grid; grid-template-columns: 280px 1fr; gap: 3rem; align-items: center; }
.magazine-cover {
  aspect-ratio: 3 / 4;
  display: grid;
  align-content: space-between;
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 1.35rem;
  transform: rotate(-2deg);
  box-shadow: 16px 18px 0 rgba(17,17,16,.15);
}
.magazine-cover strong { font-size: 2.4rem; letter-spacing: -.06em; }
.magazine-cover .cover-art { min-height: 66%; background: linear-gradient(145deg, var(--blue) 0 46%, #24566d 46% 64%, #75a375 64%); }
.magazine-cover small { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.viaxast-copy h2 { max-width: 14ch; margin: .5rem 0 .9rem; font-size: clamp(2.3rem, 3.8vw, 3.6rem); line-height: .92; letter-spacing: -.045em; }
/* ⚠ El titular ye un enllaz y salía SORRAYÁU. `.hero-card a` quita'l sorrayáu
   nel mosaicu y `.featured-place a` na tarxeta de conceyu, pero esta franxa
   nun ye nin una cosa nin la otra y nadie-y lo quitaba. El resalte va nel
   hover, como en tolos otros titulares del sitiu. */
.viaxast-copy h2 a { text-decoration: none; }
/* ⚠⚠ ESTI HOVER TOCÓSE TRÉS VECES Y NENGUNA VALÍA. Queda escrito too, porque la
   razón de que nun valgan **nun ye'l color: ye la xeometría**, y esa nun camuda.

     1 · El resalte del sitiu n'invertío: testu en `--yellow` sobre la franxa,
         que yá ye mariella. El titular DESAPAECÍA al pasar el ratón.
     2 · Una raya en tinta (`linear-gradient(transparent 74%, ink)`): una barra
         negra debaxo d'un titular que yá ye negru, y dos barres cuando ocupa
         dos llinies. Llíase como un tachón, non como un enllaz.
     3 · Fondu de tinta con lletra mariella, como `.viaxast-link`. Y equí sal el
         problema de verdá.

   ⚠ LA MIDIDA QUE LO ESPLICA. Esti titular va a `line-height: .92`, asina que
   l'avance ente llinies ye de **44,7 px**; pero la caxa en llinia que pinta'l
   fondu ye la caxa de conteníu de la fonte, y n'Archivo Narrow mide **1,349 em**,
   o seya **65,6 px**. La segunda llinia píntase DEMPUÉS y tapa **20,9 px** de la
   primera: media lletra. Nun ye un fallu del color, ye que **nun cabe**.

   Pa que nun solapara faría falta `line-height: 1.35`, que nun titular de
   display ye'l doble de la que tien y otru diseñu.

   Asina que nesti titular NUN PUEDE HABER FONDU, nin en hover nin en selección.
   Lo que queda ye'l color, y equí ye'l azul del sitiu, que yá ta na franxa —ye'l
   del antetítulu— y sobre mariello llese perbién. */
.viaxast-copy h2 a:hover { color: var(--blue-text); }

.viaxast-copy p { max-width: 58ch; margin: 0; font-size: 1.05rem; }
/* ⚠ Quitóse `.viaxast-issues`, que yera la tira de píldores colos ocho últimos
   númberos debaxo de los botones. Yera repetir la mesma salida trés veces na
   mesma franxa —el botón, la píldora final y el títulu del bloque lleven toos
   a la coleición— y les cifres sueltes nun dicíen de qué yeren. Los númberos
   vense na coleición, que ye onde tienen portada, temporada y sumariu. */
.button-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 2px solid var(--ink);
  padding: .75rem 1.25rem .65rem;
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.button--solid { background: var(--ink); color: var(--paper); }
.button:hover { background: var(--blue); color: var(--ink); }

@media (max-width: 1050px) {
  .hero-mosaic { display: grid; grid-template-columns: 1fr; }
  .hero-main, .hero-right { grid-column: auto; grid-row: auto; }
  .hero-right { display: grid; grid-template-rows: auto auto; height: auto; }
  .hero-side-feature, .hero-briefs { flex: none; }
  .hero-side-feature { min-height: 300px; }
  .places-grid { grid-template-columns: 1fr; }
  /* Trés columnes de tarxeta compauta nun caben en tableta ensin partir los
     titulares: la filera pasa a dos y la tercera cai debaxo, a la izquierda. */
  .seccion-filera { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; }
  .people-panel--banda { grid-template-columns: 1fr; }

  /* En tableta caben DOS columnes. Con ún o dos eventos val lo de riba: una
     tarxeta a tol anchu o dos a la metá. */
  .agenda-grid--3, .agenda-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* ⚠⚠ CON TRÉS EVENTOS, LA TERCERA OCUPA LA FILERA ENTERA.
     Ensin esto quedaba sola na columna izquierda: la llinia que la separa de la
     primera filera midía **media filera** y la llinia vertical de la primera
     filera acababa xusto enriba d'ella, asina que lo que se veía yera un cuadru
     a medio pintar alredor de la primer tarxeta. Ocupando la filera entera, esa
     llinia va d'un cabu al otru y la rexella zarra. Midío a 1.000 px. */
  .agenda-grid--3 .event-card:nth-child(3) { grid-column: 1 / -1; }
  /* ⚠ Con dos columnes, la primera tarxeta de CADA filera ye la que nun lleva
     llinia a la izquierda, non namás la primera de toes. Y hai que quitar
     tamién el `padding-left`: quitando namás el borde, la tercera tarxeta
     quedaba col conteníu 24 px más a la drecha que la primera y lleíase
     descuadrada. Midío en tableta el 25/08/2026. */
  .agenda-grid--3 .event-card:nth-child(odd),
  .agenda-grid--4 .event-card:nth-child(odd) { border-left: 0; padding-left: 0; }
  /* La segunda filera precisa una llinia que la separe de la primera, o queda
     colgando nel medio del blancu. */
  .agenda-grid--3 .event-card:nth-child(3),
  .agenda-grid--4 .event-card:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/*
 * TABLETA Y ESCRITORIU · la caxa mariella del titular.
 *
 * ⚠ Nun s'estiende a móvil (por eso el `min-width`): ellí la columna única
 * funciona y nun se toca.
 *
 * ⚠ DENDE LA 0.21.0 TAMIÉN VAL N'ESCRITORIU, y ye la mesma iguadura.
 * Midióse'l 24/08/2026 a 1.440 px: la caxa mariella daba 674 px llibres y el
 * titular quedaba en 358 —el `max-width: 14ch`—, asina que **sobraben 316 px
 * a la drecha**, el titular partíase en cinco llinies y esos 253 px d'altor
 * emburriaben la semeya al so mínimu de 320. La semeya quedaba nun rectángulu
 * de 738 × 320 (2,3:1) col testu apilotáu na metá izquierda.
 *
 * Quitando la traba, el titular fai trés llinies en llugar de cinco, la caxa
 * mariella baxa alredor de 100 px y **la semeya xube ella sola** a ocupalos:
 * la fila de la semeya ye `minmax(320px, 1.15fr)` y lleva tolo que sobre.
 * Nun hai qu'apurrí-y un altor nuevu; hai que dexar de robá-ylu.
 *
 * HESTORIA D'ESTE BLOQUE, porque yá se tocó una vez y agora se desfai.
 *
 * En tableta el mosaicu pasa a una columna y la caxa mariella queda a tol
 * anchu. Como'l titular ta acutáu a 14ch pa nun estirase, sobraba la metá
 * drecha. La 0.13.0 arreglólo poniendo la caxa a **dos columnes**: titular a la
 * izquierda y entradiella + firma + «Lleer» a la drecha.
 *
 * Esa igua depende de que la columna drecha tenga daqué que poner, y agora nun
 * lo tien: la fecha quitóse de la portada y `.stand` namás esiste nes 360
 * entraes con estractu manual. Nes otres 1.700 la columna drecha queda cola
 * firma sola —trés pallabres— y **el güecu camuda de sitiu en llugar de
 * desapaecer**: yera lo que se veía como «muncho espaciu al llau del titular».
 *
 * Asina que se quita la partición y se resuelve pel otru llau, que ye'l que
 * valía dende'l principiu: **el titular usa tol anchu** (`max-width: none`) y
 * embaxo va una filera con la firma a la izquierda y «Lleer» a la drecha. Nun
 * hai columna que pueda quedar vacía porque nun hai dos columnes.
 */
@media (min-width: 761px) {
  .hero-main__copy { display: flex; flex-direction: column; }
  .hero-main h2 { max-width: none; }
  .hero-main .stand { max-width: 70ch; }
  /* `margin-top: auto` pega la filera de firma y «Lleer» al baxu de la caxa,
     seya cual seya l'altor que ocupe'l titular. */
  .hero-main__pie { margin-top: auto; padding-top: 1.15rem; }
}

/* El cuerpu del titular en tableta ye'l suyu: 5,2vw crez colo estrecho de la
   pantalla, y n'escritoriu val el del bloque base (3,9vw, 3,9rem de techu). */
@media (min-width: 761px) and (max-width: 1050px) {
  .hero-main h2 { font-size: clamp(2.6rem, 5.2vw, 3.6rem); }
}

/*
 * ESCRITORIU · l'altor de la semeya del héroe.
 *
 * ⚠ La fila ye `minmax(320px, 1.15fr)`, y esi `1.15fr` **nun repartió nunca
 * nada**: nel mosaicu manda l'altor de `.hero-main`, non al revés, asina que
 * nun sobra espaciu que la fila pueda garrar y la semeya queda siempre nel
 * mínimu. Soltar el titular (bloque d'enriba) baxó la caxa mariella 93 px y la
 * semeya siguió en 320 — midíu—: pa que crezca hai que **subir el mínimu**.
 *
 * 400 px son 738 × 400, o seya 1,85:1, en llugar de 2,31:1. Y el paquete
 * enteru queda en 696 px, quince menos que los 711 d'enantes: la semeya crez un
 * 25 % y la portada **nun crez**, que ye la condición de PENDIENTE § 0t.2.
 */
@media (min-width: 1051px) {
  .hero-main { grid-template-rows: minmax(400px, 1.15fr) auto; }
}

@media (max-width: 760px) {
  .lead-package { padding-top: 1.5rem; }
  .hero-mosaic { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-main, .hero-right { grid-column: auto; grid-row: auto; }
  .hero-right { display: grid; grid-template-rows: auto auto; gap: 10px; }
  .hero-main { grid-template-rows: auto auto; }
  .hero-main__media, .hero-main__media .media { min-height: 310px; }
  .hero-main__copy { padding: 1.45rem 1.2rem 1.6rem; }
  .hero-main h2 { font-size: clamp(2.35rem, 11vw, 3.8rem); }
  .hero-side-feature { grid-template-columns: 1fr; min-height: 0; }
  .hero-side-feature .media { min-height: 230px; }
  .hero-side-feature__copy { padding: 1.4rem 1.2rem 1.55rem; }
  .hero-briefs { grid-template-columns: 1fr; gap: 10px; }
  .hero-brief { min-height: 180px; }
  .featured-place, .viaxast-grid { grid-template-columns: 1fr; }

  /* ⚠ `gap: 0` y llinia: les tarxetes compautes tienen que lleese como una
     llista. Con un güecu de 2 rem y ensin llinia son trés bloques flotando. */
  .seccion-filera { grid-template-columns: 1fr; gap: 0; }
  .seccion-filera > .story-card { padding-bottom: 1.15rem; border-bottom: 1px solid var(--line); }
  .seccion-filera > .story-card + .story-card { padding-top: 1.15rem; }
  .seccion-filera > .story-card:last-child { padding-bottom: 0; border-bottom: 0; }

  /* ⚠ La banda apretada: en móvil son cuatro nomes, non un módulu. Midío a
     390 px, col tamañu d'escritoriu ocupaba 398 px pa cuatro llinies de testu;
     asina baxa a unos 250 ensin quita-y nada. */
  .people-panel--banda { padding: 1.1rem 1.1rem 1.2rem; gap: .8rem; }
  .people-panel--banda h2 { margin: .2rem 0 .5rem; font-size: 1.5rem; }
  .people-panel--banda .story-list { grid-template-columns: 1fr; }
  .people-panel--banda .story-list a { padding: .7rem 0; }

  /* La tira: fecha y sección na primera llinia, titular na segunda. A 390 px
     nun caben trés columnes ensin que'l titular baxe a cinco llinies. */
  .tira-ultimo a { grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .9rem; padding: .8rem 0; }
  .tira-ultimo__data { grid-row: 1; grid-column: 1; }
  .tira-ultimo__seccion { grid-row: 1; grid-column: 2; }
  .tira-ultimo__titulu { grid-row: 2; grid-column: 1 / -1; }
  .places-intro { --caxa-aire: 1.5rem; }
  .featured-place { min-height: 0; }
  /* 300 px yeren dos tercios de pantalla pa una semeya que yá tien el titular
     debaxo; a 230 sigue siendo la semeya más grande de la páxina dempués del
     héroe. */
  .featured-place .media { min-height: 230px; }
  /* ⚠ N'una columna, y les clases de cuenta nómense una a una: tienen la mesma
     especificidá que `.agenda-grid` y ganaría la que fuere darrera nel ficheru.
     Escrites asina, nun depende del orde. */
  .agenda-grid, .agenda-grid--1, .agenda-grid--2, .agenda-grid--3, .agenda-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .event-card, .event-card:first-child { padding: 1.25rem 0; border-left: 0; border-top: 1px solid var(--line); }
  .agenda-grid--3 .event-card:nth-child(odd), .agenda-grid--4 .event-card:nth-child(odd) { padding-left: 0; }
  .event-card:first-child { border-top: 0; }
  .viaxast-grid { gap: 3rem; }
  /* La cubierta yera'l 78 % del anchu de pantalla y sal debaxo de too, nun
     bloque que yá lleva títulu, sumariu y dos botones. */
  .magazine-cover { width: min(58vw, 240px); margin-inline: auto; }
}

@media (max-width: 420px) {
  .hero-main .stand { font-size: 1rem; }
  /* ⚠ Esta regla ye la que manda nun móvil de 390 px, non la de 760: acuérdate
     d'iguar les dos si vuelves a tocar l'altor de la semeya del conceyu. */
  .featured-place .media { min-height: 200px; }
  .button-row { flex-direction: column; }
  .button { width: 100%; }
}

@media print {
  .ad-slot { display: none !important; }
  .hero-mosaic, .seccion-filera, .agenda-grid, .tira-ultimo { display: block; }
  .hero-card, .story-card, .event-card { break-inside: avoid; margin-bottom: 1.5rem; }
}

/* ===================== FIN DEL CSS DE LA PORTADA ===================== */

/* ===================== CSS PROPIU DE LA CATEGORÍA ===================== */

.category-header { padding-block: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 3.5vw, 2.5rem); }
/*
 * ⚠ UNA SOLA COLUMNA. Yeren dos —títulu a la izquierda y «138 histories» a la
 * drecha— y la segunda desapaeció: el recuentu d'artículos nun se pinta yá en
 * nenguna páxina del sitiu. Con una columna sola el títulu manda y la caxa nun
 * reserva un güecu que naide va llenar.
 */
.category-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 1rem;
}
/*
 * ⚠ POR QUÉ CAÍA UNA LLETRA SOLA A LA LLINIA DE BAXO.
 *
 * Nun yera l'espaciáu: yera que `max-width` ta en `ch`, que ye una midida que
 * CREZ COL TIPU. A 8rem, 10ch son unos 600 px, y «Personalidaes» a esi cuerpu
 * mide unos 780: nun cabía, y como'l `body` lleva `overflow-wrap: break-word`
 * el navegador partía la pallabra y dexaba «s» sola embaxo.
 *
 * Igualóse poles dos puntes —la caxa a 15ch y el cuerpu a un tercio menos, que
 * de toes maneres yera lo que se pidía— asina que la pallabra más llarga de
 * les 16 secciones entra ensin partise en cualquier anchor.
 */
.category-header h1 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  font-weight: 850;
  letter-spacing: -.05em;
  line-height: .86;
  text-wrap: balance;
}
/* El resaltáu del títulu de sección precisa un meta de términu equivalente
   a _va_resaltar. Nun esiste, asina que'l títulu sal llimpiu:
   «Escap<mark>aes</mark>» yera xustamente lo que la heurística fai mal. */
/* Hereda de la regla global `mark`. Ver la nota de `.article-header h1 mark`. */
/*
 * ⚠ `.category-count` quedó ensin usu y NUN SE BORRA la regla: el
 * `_n( '%s historia', '%s histories' )` sigue nel `.po` y podría volver
 * dalgún día. La regla nun pesa; lo que se quitó ye la llamada nes plantíes.
 */
.category-count {
  margin-bottom: .45rem;
  color: var(--blue-text);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/*
 * ⚠ LA ENTRADA VA A TOL ANCHU, nuna columna.
 *
 * Yeren dos: descripción a la izquierda y una filera de píldores de conceyos a
 * la drecha. Les píldores fuéronse —na cabecera d'una sección, saber que hai
 * artículos de Xixón nun ye lo que se vien a buscar, y la mesma información ta
 * más abaxo y meyor— y con elles la razón de que la descripción viviera nun
 * tercio de la páxina. Agora la explicación cruza de llau a llau y la cabecera
 * ocupa la metá d'altor: eso ye espaciu ganáu pa los artículos, que son a lo
 * que se vien.
 */
.category-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: end;
  margin-top: 1.5rem;
}
/* Vien del post_content de la páxina de sección. Si ta vacíu nun se pinta.
   Ensin `max-width` a costies: la caxa ye la páxina. Les descripciones son de
   dos llinies a lo cabero. */
.category-description { max-width: none; margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.15rem); }
.subtopics { justify-content: flex-start; }

/* Entrada curada: un paquete principal y dos rutes secundaries. */
.category-lead { padding-bottom: var(--space-7); }
.lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, .65fr);
  gap: 12px;
  padding-top: 12px;
  border-top: 4px solid var(--ink);
}
.lead-story {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--yellow);
}
.lead-story__media { min-height: 420px; }
.lead-story__media .media { height: 100%; min-height: 100%; }
.lead-story__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
}
.lead-story h2 {
  margin: .55rem 0 .9rem;
  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
  font-weight: 850;
  letter-spacing: -.052em;
  line-height: .9;
  text-wrap: balance;
}
.lead-story h2 a { text-decoration: none; }
.lead-story h2 a:hover { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .08em; }
.lead-story p { margin: 0; color: #2a281f; }
.lead-story .meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1rem; color: #3e3b30; }

/* Los dos güecos secundarios nun lleven imaxe: sirven pa les 62
   entraes ensin destacada ensin inventar dengún marcador de posición. */
.lead-briefs { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lead-brief {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--paper-warm);
  padding: clamp(1.3rem, 2.6vw, 2rem);
}
.lead-brief--blue { border-color: var(--blue-text); background: var(--blue-text); color: #fff; }
.lead-brief--blue .eyebrow { color: #fff; }
.lead-brief--blue .meta { color: #d8f0ff; }
.lead-brief h3 {
  margin: .5rem 0 .8rem;
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
  font-weight: 850;
  letter-spacing: -.035em;
  line-height: .98;
  text-wrap: balance;
}
.lead-brief h3 a { text-decoration: none; }
.lead-brief h3 a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: .17em; }
.lead-brief__index {
  position: absolute;
  right: 1rem;
  bottom: .7rem;
  font-size: clamp(3.2rem, 6vw, 5.5rem);
  font-weight: 900;
  line-height: .8;
  opacity: .13;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   SUBSECCIONES · les subcategoríes, debaxo de les trés destacaes.

   Nun hai prototipu d'esti bloque: nel diseñu aprobáu la sección ye cabecera,
   trés destacaes y archivu, y les subcategoríes nun apaecen en nengún sitiu. Y
   sí esisten: Cuestionariu (33) dientro de Curiosidaes, Naturaleza (32) y Tours
   (6) dientro d'Escapaes, Efemérides (8) dientro d'Actualidá, y Podcast, Mio
   güela y Los rellatos de Xuan Miyar dientro de Cultura.

   Hasta agora namás se llegaba a elles pola píldora d'un artículu sueltu.

   La forma ye la que se pidió: **títulu a la izquierda, una raya debaxo, y los
   artículos d'izquierda a drecha**. Nun ye una reya nueva: la raya ye la mesma
   de `.section-heading` y les tarxetes son `.story-card`, la de tol sitiu. Lo
   único propio ye que la filera **rueda de llau** en pantalla estrecha en
   llugar d'apilase: son cuatro pieces d'un tema secundariu, y apilales dexaba
   la páxina de sección más llarga que la portada.
   -------------------------------------------------------------------------- */

.subseccion {
	margin-top: var(--space-6);
	margin-bottom: var(--space-5);
}
.subseccion__cabecera {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: .7rem;
  border-bottom: 3px solid var(--ink);
}
.subseccion__cabecera h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1;
}
.subseccion__filera {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
/* Les tarxetes d'equí son secundaries: semeya más baxa y titular más pequeñu
   que nel archivu, pa que nun compitan coles trés destacaes d'arriba. */
.subseccion__filera .story-card .media { aspect-ratio: 16 / 10; }
.subseccion__filera .story-card h3 { font-size: clamp(1.05rem, 1.4vw, 1.22rem); }
.subseccion__filera .story-card__body { gap: .5rem; padding-top: .75rem; }

@media (max-width: 1050px) {
  .subseccion__filera { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .subseccion__filera > :nth-child(4) { display: none; }
}

@media (max-width: 760px) {
  /* De llau, con parada: cuatro tarxetes apilaes son cuatro pantalles. */
  .subseccion__filera {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: .6rem;
    scroll-snap-type: x proximity;
  }
  .subseccion__filera > * { flex: 0 0 72%; scroll-snap-align: start; }
  .subseccion__filera > :nth-child(4) { display: block; }
}

@media print {
  .subseccion__filera { display: block; }
}

/* Archivu */
.archive-section { padding-bottom: var(--space-8); }
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.pagination a, .pagination [aria-current="page"] {
  min-width: 46px;
  min-height: 46px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--ink);
  padding: .45rem .75rem .35rem;
  font-weight: 850;
  text-decoration: none;
}
.pagination [aria-current="page"] { background: var(--ink); color: var(--paper); }
.pagination a:hover { background: var(--yellow); }
.pagination .next { width: 46px; min-width: 46px; padding: 0; }
.pagination .ellipsis { min-height: 46px; display: inline-grid; place-items: center; padding-inline: .25rem; color: var(--muted); font-weight: 850; }

@media (max-width: 1050px) {
  .category-intro { grid-template-columns: 1fr; }
  .subtopics { justify-content: flex-start; }
  .lead-grid { grid-template-columns: 1fr; }
  .lead-briefs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .category-header { padding-top: 2.4rem; }
  .category-title-row { grid-template-columns: 1fr; gap: 1rem; }
  .category-header h1 { font-size: clamp(2.2rem, 9vw, 3.1rem); }
  .category-count { margin: 0; }
  .category-intro { margin-top: 1.5rem; gap: 1.4rem; }
  .subtopics { flex-wrap: nowrap; overflow-x: auto; padding: .25rem .15rem .7rem; scroll-snap-type: x proximity; }
  .subtopics .pill { flex: 0 0 auto; scroll-snap-align: start; }

  /* ⚠ `minmax(0, 1fr)` y non `1fr`: ver la nota de `.hero-main`. Con `1fr` el
     titular de la destacada de sección pidía 66 px más de los que hai y el
     `overflow: hidden` de `.lead-story` cortaba la semeya y el titular. */
  .lead-story { grid-template-columns: minmax(0, 1fr); }
  .lead-story__media { min-height: 310px; }
  .lead-story__copy { padding: 1.45rem 1.2rem 1.6rem; }
  .lead-story h2 { font-size: clamp(2.55rem, 12vw, 4rem); }
  .lead-briefs { grid-template-columns: 1fr; }
  .lead-brief { min-height: 190px; }

  /* ⚠ `gap: 0` y llinia, como na filera de portada: coles tarxetes compautes,
     un güecu de 2,8 rem ente elles vuelve a separtar lo que ye una llista. */
  .archive-grid { grid-template-columns: 1fr; gap: 0; }
  .archive-grid > .story-card { padding-bottom: 1.15rem; border-bottom: 1px solid var(--line); }
  .archive-grid > .story-card + .story-card { padding-top: 1.15rem; }
  .archive-grid > .story-card:last-child { padding-bottom: 0; border-bottom: 0; }
  .pagination .page-optional { display: none; }
}

@media (max-width: 420px) {
  .category-header h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .pagination a, .pagination [aria-current="page"] { min-width: 42px; min-height: 42px; }
  .pagination .next { width: 42px; min-width: 42px; }
}

@media print {
  .subtopics, .pagination { display: none !important; }
  .category-header, .category-lead, .archive-section { padding-block: 1rem; }
  .lead-grid, .archive-grid { display: block; }
  .lead-story, .lead-brief, .story-card { break-inside: avoid; margin-bottom: 1.5rem; }
}

/* ===================== FIN DEL CSS DE LA CATEGORIA ===================== */

/* ============== PLANTÍA A · REPORTAXE ==============
   Pa les 197 entraes (9,5 %) de ≥600 pallabres que ademais tienen H2
   o imaxe nel cuerpu. La llonxitú sola nun val: hai entraes de 700
   pallabres que son un bloque de testu y nun aguanten trés columnes.
   Les otres 1.871 van con articulu-nota.html. */

.article-header { padding-block: clamp(2.6rem, 6vw, 5.5rem) 2rem; }
.article-header h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(3.2rem, 8vw, 6.7rem);
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: .88;
  text-wrap: balance;
}
.standfirst { margin: 1.7rem 0 0; font-size: clamp(1.18rem, 2.2vw, 1.42rem); }
.article-byline { margin-top: 2rem; }

.article-hero { margin-top: 1.25rem; }
/* Ensin min-height a costazu del aspect-ratio: si el min-height ye mayor
   que l'altor que da la razón d'aspeutu pal anchor disponible, el
   navegador deduz l'anchor del altor y la páxina escuerre en horizontal. */
.article-hero .media { aspect-ratio: 16 / 8.6; border: 2px solid var(--ink); }

/* Retícula de llectura de trés columnes. Si l'artículu nun tien conceyu
   (el 18 %), nun se pinta .context-card y cae a dos columnes. */
.article-layout {
  display: grid;
  grid-template-columns: minmax(100px, 150px) minmax(0, var(--reading)) minmax(210px, 270px);
  justify-content: center;
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-block: clamp(2.8rem, 6vw, 5.5rem);
}
.article-layout--nocontext { grid-template-columns: minmax(100px, 150px) minmax(0, var(--reading)); }
.share-rail { position: sticky; top: 1.5rem; }
.share-rail h2, .context-card h2 {
  margin: 0 0 .9rem;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.share-rail__buttons { display: grid; gap: .55rem; }
.share-rail .action-button { width: 100%; }
.share-rail .share-status { min-height: 2.2em; margin-top: .75rem; }

.article-content { font-size: clamp(1.11rem, 1.5vw, 1.24rem); }
/* Capitular: namás nel reportaxe. Sobre una nota de 320 pallabres una
   capitular de 4,6em ocupa un cuartu del testu. */
.article-content .lead-paragraph::first-letter {
  float: left;
  margin: .08em .12em 0 0;
  color: var(--blue-text);
  font-family: var(--sans);
  font-size: 4.6em;
  font-weight: 850;
  line-height: .72;
}
.article-content h2 { margin: 2.1em 0 .7em; font-size: clamp(2.05rem, 4vw, 3.25rem); }
.article-content h3 { margin: 1.8em 0 .65em; font-size: clamp(1.5rem, 3vw, 2rem); }

/* Ficha llateral. Too automáticu, cero trabayu editorial. */
.context-card {
  position: sticky;
  top: 1.5rem;
  border-top: 3px solid var(--ink);
  padding-top: 1rem;
}
.context-card dl { display: grid; gap: .9rem; margin: 0; }
.context-card dl > div { padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.context-card dt { color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.context-card dd { margin: .2rem 0 0; color: var(--ink); font-family: var(--serif); font-size: .96rem; line-height: 1.4; }
.context-card__more { margin-top: 1.2rem; }
.context-card__more h3 { margin: 0 0 .6rem; font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.context-card__more ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.context-card__more a { display: block; font-weight: 750; font-size: .92rem; line-height: 1.25; text-decoration: none; }
.context-card__more a:hover { color: var(--blue-text); }

@media (max-width: 1050px) {
  .article-layout, .article-layout--nocontext { grid-template-columns: minmax(90px, 120px) minmax(0, var(--reading)); }
  .context-card { position: static; grid-column: 2; display: grid; grid-template-columns: 1fr; }
  .context-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
  .context-card__more ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; }
}

@media (max-width: 760px) {
  .article-header { padding-top: 2.3rem; }
  .article-header h1 { font-size: clamp(3rem, 14vw, 4.6rem); }
  .standfirst { font-size: 1.12rem; }
  .article-hero .media { aspect-ratio: 4 / 3; }
  .article-layout, .article-layout--nocontext { display: block; padding-block: 2.8rem; }
  .share-rail { position: static; margin-bottom: 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
  .share-rail h2 { margin-bottom: .65rem; }
  .share-rail__buttons { display: flex; flex-wrap: wrap; }
  .share-rail .action-button { width: auto; }
  .share-rail .share-status { min-height: 0; margin-bottom: 0; }
  .article-content { font-size: 1.08rem; line-height: 1.72; }
  .article-content blockquote { margin-right: .5rem; box-shadow: 6px 6px 0 var(--yellow); }
  .context-card { margin-top: 2.6rem; }
  .context-card dl { grid-template-columns: 1fr; }
  .context-card__more ul { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .article-header h1 { font-size: clamp(2.75rem, 14vw, 3.65rem); }
  .share-rail__buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .share-rail .action-button { width: 100%; }
}

@media print {
  .share-rail { display: none !important; }
  .article-layout, .article-layout--nocontext { display: block; padding-top: 1.5rem; }
  .article-hero .media { border: 1px solid #000; }
}

/* ================= FIN DE LA PLANTIA A ================= */

/* ============== PLANTÍA B · NOTA ==============
   Pa les 1.871 entraes (90,5 %) que nun son reportaxe. Mediana del
   sitiu: 320 pallabres.

   El problema que resuelve: la plantía de reportaxe lleva antetítulu,
   entradiella, raíl de compartir, ficha llateral, capitular, cita
   destacada, caxa d'autor y trés rellacionaos. Sobre 320 pallabres eso
   son trés pantalles de muebles alredor de pantalla y media de testu, y
   fai que'l conteníu paeza más probe de lo que ye.

   Qué se quita respeuto al reportaxe:
     · el raíl de compartir llateral  → acciones en llinia na firma
     · la ficha llateral              → nun hai columna
     · la capitular                   → nun cabe en 320 pallabres
     · el héroe a 16:8.6              → imaxe 4:3 dientro del anchor de llectura
     · el titular a 6,7rem            → hasta 3,4rem
   Qué se caltién: tipografía, figures, notes, cites, etiquetes,
   firma, rellacionaos y tol aparatu d'accesibilidá. */

.article-header { padding-block: clamp(2rem, 4vw, 3.2rem) 0; }
.article-wrap { width: min(100% - 2.5rem, var(--reading)); margin-inline: auto; }
.article-header h1 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: .95;
  text-wrap: balance;
}
.standfirst { margin: 1.1rem 0 0; font-size: clamp(1.05rem, 1.8vw, 1.2rem); }
.article-byline { margin-top: 1.4rem; }
/* Na nota les acciones van en llinia cola firma: nun hai raíl llateral. */
.article-byline .share-status { flex: 1 0 100%; min-height: 0; margin: 0; }

/* Imaxe dientro del anchor de llectura, non a sangre. */
.article-hero { margin-top: 1.6rem; }
.article-hero .media { aspect-ratio: 4 / 3; border: 2px solid var(--ink); }

.article-body { padding-block: 1.8rem clamp(2rem, 4vw, 3rem); }
.article-content { font-size: clamp(1.05rem, 1.4vw, 1.15rem); line-height: 1.72; }
.article-content h2 { margin: 1.7em 0 .55em; font-size: clamp(1.4rem, 3vw, 1.85rem); }
.article-content h3 { margin: 1.5em 0 .5em; font-size: clamp(1.2rem, 2.4vw, 1.45rem); }
/* Ensin capitular: .lead-paragraph nun lleva ::first-letter nesta plantía. */

/* El conceyu y la sección nun ocupen una columna: van nuna filera
   sol testu. La ficha llateral completa ye cosa del reportaxe. */
.nota-context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.2rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 3px solid var(--ink);
  font-size: .92rem;
}
.nota-context dl { display: contents; margin: 0; }
.nota-context dt { color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.nota-context dd { margin: 0 1rem 0 0; font-weight: 750; }
.nota-context a { text-decoration: none; }
.nota-context a:hover { color: var(--blue-text); }

@media (max-width: 760px) {
  .article-header { padding-top: 1.6rem; }
  .article-header h1 { font-size: clamp(1.95rem, 8vw, 2.6rem); }
  .article-wrap { width: min(100% - 2rem, var(--reading)); }
  .nota-context { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  .nota-context dl { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  .nota-context dd { margin: .15rem 0 0; }
}

@media print {
  .article-wrap { width: 100%; }
  .article-hero .media { border: 1px solid #000; }
}

/* ================= FIN DE LA PLANTIA B ================= */

/* ==========================================================================
   AMESTAOS PAL TEMA

   Lo único que s'amiesta al CSS aprobáu, y por qué fai falta.

   Los HTML de 03-diseno nun tienen NENGUNA imaxe de verdá: `.media` ye un
   marcador pintáu con gradientes, y el propiu comentariu del diseñu diz que
   «en producción ye wp_get_attachment_image() con srcset/sizes». Estes trés
   regles son esa producción, y nada más.

   Nun camuden nengún valor del diseñu: nin colores, nin espaciáu, nin
   tipografía, nin retícula.
   ========================================================================== */

/* La imaxe de verdá, dientro del güecu que'l diseñu yá reservó.
   Fai falta `position: absolute` porque `.media::before` ye un elementu
   posicionáu y, ensin esto, pintaría PER RIBA de la semeya. */
.media img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cuando hai semeya de verdá, el gradiente sobra.
   Cuando NON la hai —les 62 entraes ensin destacada— nun se pon esta clase y
   el gradiente queda como respaldu visual, que ye xustamente pa lo que ta. */
.media--imaxe::before { display: none; }

/* `.media__label` yá ye z-index 2 nel diseñu, asina que sigue per riba de la
   semeya ensin tocar nada. Déxase anotao pa que naide-y baxe'l z-index. */

/* ==========================================================================
   LA DESTACADA DEL ARTÍCULU ENSÉÑASE ENTERA · 0.22.5
   ==========================================================================

   Nel artículu la semeya nun ye testura de fondu: ye la primera información
   que se llee. El güecu yera FIXU —16:8,6 nel reportaxe, 4:3 na nota— y la
   semeya entraba con `object-fit: cover`, o seya recortada: una foto de 3:2
   perdía'l 19 % del altor, una de 4:3 el 28 % y **una vertical el 44 %**.

   Agora manda la razón d'aspeutu de la propia semeya, que vien en `--va-ratio`
   dende `va_pintar_destacada()`. **Seya cual seya**: apaisada, cuadrada o
   vertical.

   ⚠ NA TARXETA NON, y ye a costies. Ehí la semeya recórtase pa llenar un
   güecu de razón fixa, porque una reya de tarxetes de midíes iguales ye lo que
   fai que la llista se llea. Na 0.22.4 probóse a metela entera con fondu
   desenfocáu y **la portada quedaba fatal**: quitóse na 0.22.5 y nun se
   repón. Lo que camuda ye la páxina del artículu, y namás esa.

   ⚠ EL TECHU D'ALTOR PONSE ESTRENCHANDO EL GÜECU, non recortando la semeya:
   `width` sal de multiplicar l'altor máximu pola razón. Una vertical de 3:4
   nun anchu de llectura de 760 px mediría 1.013 px d'altu —una pantalla
   entera enantes del primer párrafu—; asina queda en 513 × 684, centrada, con
   papel a los llaos. Recortar equí sería desfacer lo que la regla vien a
   arreglar.

   ⚠ `min-height: 0` fai falta: `.media` trai 160 px de mínimu y una
   panorámica estrecha volvería a recortase contra esi mínimu.

   ⚠ Esta regla va DEMPUÉS de les dos plantíes y de les sos media queries a
   costies. Tien la mesma especificidá que `.article-hero .media` (0,2,0), asina
   que lo que decide ye l'orde del ficheru; una media query nun añade
   especificidá, o seya que esto gana tamién en móvil, que ye lo que se quier. */
.article-hero { --va-alto-max: min(76vh, 760px); }
.article-hero .media--nativa {
  aspect-ratio: var(--va-ratio);
  width: min(100%, calc(var(--va-alto-max) * var(--va-ratio)));
  min-height: 0;
  margin-inline: auto;
}
/* El pie de foto ye hermanu del güecu: si el güecu estrenchó, él tamién. */
.article-hero .media--nativa + figcaption {
  width: min(100%, calc(var(--va-alto-max) * var(--va-ratio)));
  margin-inline: auto;
}

/* El nome del conceyu na otra llingua, debaxo del titular.
   Requisitu del proyeutu: nel archivu castellán el H1 diz «Gijón» y debaxo,
   pequeñu, «Xixón». Nel asturianu nun se pinta.
   Nun hai prototipu d'esti bloque: ye la única regla d'esti ficheru que nun
   vien de 03-diseno. Sigue la escala del diseñu y nun toca nada más. */
.conceyu-alt {
  margin: .5rem 0 0;
  color: var(--muted);
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   LA FICHA Y EL PROGRAMA D'UN EVENTU

   Nun hai prototipu: nel diseñu aprobáu un artículu d'Axenda ye un artículu
   normal, y la información práctica —cuándo, ónde, a qué hora cada cosa— queda
   metida nel cuerpu del testu, que ye onde nun se busca.

   Constrúise colos xestos que'l sitiu yá tien: la caxa de `.article-note`, les
   mayúscules espaciaes de `.eyebrow` y les llinies finies de `.story-list`. Nun
   hai nengún color nin nenguna midida nueva.

   La hora va en `font-variant-numeric: tabular-nums` a costies: nuna columna de
   hores, les cifres tienen que cayer una debaxo d'otra.
   -------------------------------------------------------------------------- */

.axenda-ficha {
  margin: var(--space-5) 0 0;
  padding: 1.5rem 1.6rem 1.6rem;
  border: 2px solid var(--ink);
  background: var(--paper-warm);
}
.axenda-ficha > h2 {
  margin: 0 0 1.1rem;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.axenda-datos { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 0; }
.axenda-datos dt {
  margin-bottom: .2rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.axenda-datos dd { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.15; }

.axenda-programa { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 2px solid var(--ink); }
.axenda-programa > h3 {
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.axenda-dia + .axenda-dia { margin-top: 1.4rem; }
.axenda-dia h4 {
  margin: 0 0 .5rem;
  font-size: 1.12rem;
  font-weight: 850;
  letter-spacing: -.02em;
}
.axenda-actos { display: grid; margin: 0; padding: 0; list-style: none; }
.axenda-actos li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .2rem .9rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
}
.axenda-actos li:last-child { border-bottom: 0; }
.axenda-hora {
  color: var(--blue-text);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
/* Una actividá ensin hora ocupa les dos columnes: enantes qu'una sangría
   fantasma, la llinia entera. */
.axenda-actos li > .axenda-que:first-child { grid-column: 1 / -1; }
.axenda-que { font-family: var(--serif); line-height: 1.45; }

@media (max-width: 560px) {
  .axenda-ficha { padding: 1.2rem; }
  .axenda-actos li { grid-template-columns: minmax(0, 1fr); }
  .axenda-hora { font-size: .92rem; }
}

@media print {
  .axenda-ficha { break-inside: avoid; background: none; }
}

/* --------------------------------------------------------------------------
   LA PÁXINA DE GUETA

   ⚠ D'ÓNDE VIEN ESTI BLOQUE. La páxina de resultaos yera una `.category-header`
   como la d'una sección, y nun ye lo mesmo: una sección tien nome propiu y una
   gueta non. Lo que se veía yera «Gueta» na miga de pan, «Gueta» nel antetítulu
   y un H1 vacíu, porque'l H1 yera lo buscao y nun se buscara nada.

   Y con `?s=` vacíu WordPress devolvía **el sitiu enteru**: 1.055 resultaos que
   nun son resultaos de nada. Eso córtase en `inc/gueta.php`; equí lo que se fai
   ye da-y a esa páxina una forma que valga pa lo que ye —un sitiu dende'l que
   empezar a guetar— en llugar de la carcasa d'una llista.
   -------------------------------------------------------------------------- */

.gueta-cabecera { padding-block: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 3vw, 2.2rem); }
.gueta-cabecera h1 {
  margin: .3rem 0 0;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: .95;
  overflow-wrap: anywhere;
}
/* Lo buscao va entre comines y en tinta suave: el titular ye «Resultaos pa X»,
   y el que manda ye «Resultaos», non la palabra que se escribió. */
.gueta-cabecera h1 em { font-style: normal; color: var(--blue-text); }

/* El campu, grande y solu. Nel restu del sitiu la gueta ye un accesoriu de la
   cabecera; equí ye la razón de la páxina, asina que ocupa lo que tien que
   ocupar y nun comparte filera con nada. */
.gueta-campu { margin-top: var(--space-4); }
.gueta-campu .site-search__form { width: min(100%, 34rem); border-width: 3px; }
.gueta-campu .site-search input { padding: .95rem 1rem; font-size: 1.1rem; }
.gueta-campu .site-search button { padding: .85rem 1.1rem; font-size: 1.2rem; }

.gueta-nota { max-width: 60ch; margin: var(--space-3) 0 0; }
.gueta-nota a { color: var(--blue-text); }

/* Les pistes de la páxina vacía: secciones y conceyos. Son dos llistes de
   píldores, non un buscador avanzáu: quien llega equí ensin escribir nada nun
   quier filtros, quier una puerta. */
.gueta-pistes { padding-bottom: var(--space-8); }
.gueta-pistes__grupu + .gueta-pistes__grupu { margin-top: var(--space-5); }
.gueta-pistes h2 {
  margin: 0 0 1rem;
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Cuando lo buscao casa col nome d'una sección o d'una páxina, esa non ye un
   resultáu más: ye probablemente lo que se buscaba. Va enriba y aparte. */
.gueta-destinos { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.gueta-destinos h2 {
  margin: 0 0 .9rem;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   ÍNDIZ DE CONCEYOS

   Nun hai prototipu d'esti bloque: nel diseñu aprobáu nun esiste la páxina.
   Constrúise colos tokens y les midíes que yá usa'l restu, ensin inventar
   nengún valor nuevu.
   -------------------------------------------------------------------------- */

.conceyos-grupu { margin-top: var(--space-6); }
.conceyos-lletra {
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 3px solid var(--ink);
  font-size: 1.6rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.conceyos-llista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.conceyos-llista a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .4rem .6rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.conceyos-llista a:hover { background: var(--yellow); }
.conceyos-nome { font-size: 1.05rem; font-weight: 700; }
.conceyos-cuenta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .conceyos-llista { grid-template-columns: 1fr; }
}

@media print {
  .conceyos-llista a:hover { background: none; }
}

/* --------------------------------------------------------------------------
   LA COLUMNA DE LLECTURA · 0.15.0

   ⚠ MIDÍO, NON ESTIMAO. El métodu ye contar llinies de verdá: coyer párrafos de
   más de 300 caráuteres, dividir el so altor pol `line-height` pa saber cuántes
   llinies ocupen y dividir los caráuteres ente les llinies. Los anchos de
   fonte nun valen pa esto.

   Midío nun artículu real el 15/08/2026, a 760 px y 17,92 px de cuerpu:
   **79,5 · 82,7 · 90,8 · 91,2** caráuteres por llinia. El rangu cómodu son
   60-75. A 90 caráuteres el güeyu pierde'l saltu de llinia y hai que volver
   atrás a buscar por ónde diba: nun ye una preferencia, ye lo que fai que
   un testu de 350 pallabres canse.

   Dos coses xuntes y les dos fain falta:
     · la columna de TESTU baxa a `--prosa` (680 px);
     · el cuerpu sube a ~20 px, que ye lo que Georgia pide a esti anchu.

   ⚠ `--reading` NUN SE TOCA, y esa ye la parte importante. Ye una constante
   estructural: la usen `.article-wrap`, `.article-end`, la columna del mediu de
   `.article-layout` y el `content_width` de PHP, que ye lo que decide el tamañu
   de los embebíos. Lo que se estrecha ye'l testu DIENTRO d'ella.

   El efeutu de llau ye'l que se busca: les semeyes siguen a 760 y el testu va a
   680 centráu dientro, que ye la composición clásica de revista. La figura
   sobresal un deu per cada llau del testu y marca'l ritmu de la páxina.

   Les figures, los embebíos y les galeríes quedan fuera de la llista a costies:
   too lo que ye TESTU va a `--prosa` y too lo que ye IMAXE queda a `--reading`.
   -------------------------------------------------------------------------- */

.article-content { font-size: clamp(1.16rem, 1.6vw, 1.27rem); }

.article-content > p,
.article-content > h2,
.article-content > h3,
.article-content > h4,
.article-content > ul,
.article-content > ol,
.article-content > dl,
.article-content > pre,
.article-content > blockquote,
.article-content > .article-note,
.article-content > .axenda-ficha {
  max-width: var(--prosa);
  /* ⚠ `margin-inline` y non `margin`: les regles de riba yá lleven el márxen
     vertical de caún y un `margin` completu equí desfairíalu. */
  margin-inline: auto;
}

@media (max-width: 760px) {
  /* En móvil la columna yá ye más estrecha que `--prosa` y el `max-width` nun
     fai nada; lo que sí camuda ye'l cuerpu, que sube un puntu llargu. */
  .article-content { font-size: 1.12rem; }
}

/* --------------------------------------------------------------------------
   «MÁS D'ESTI CONCEYU» NA NOTA

   El reportaxe tien esti bloque na ficha llateral dende la 0.11.0. La nota nun
   tien columna, asina que se quedó ensin él: el 88 % de los artículos del sitiu.
   Ver `va_pintar_mas_conceyu()`.

   Ye la mesma pieza que `.context-card__more` y con les mesmes midíes; lo que
   camuda ye que va debaxo del cuerpu y non al llau.
   -------------------------------------------------------------------------- */

.nota-mas { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.nota-mas h2 {
  margin: 0 0 .7rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nota-mas ul { display: grid; gap: .55rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.nota-mas ul a { font-weight: 750; font-size: .98rem; line-height: 1.25; text-decoration: none; }
.nota-mas ul a:hover { color: var(--blue-text); }

/* ==========================================================================
   LA REVISTA VIAXAST · hemeroteca, ficha de númberu y llector

   ⚠ D'ÓNDE SAL ESTI BLOQUE. Nun vien de 03-diseno: nos cuatro HTML aprobaos
   la revista ye una franxa de la portada (`.viaxast`), y nada más.

   La regla que se siguió pa nun salise del sitiu: **nun hai nengún valor
   inventáu**. Los colores son los cinco de `:root`, los espacios son les
   variables `--space-*`, y la retícula, los borde de 2px y les mayúscules
   espaciaes son los mesmos xestos que yá usen `.section-heading` y `.pill`.

   Y una decisión de diseñu que sí ye propia: **la cabecera va en negru a tol
   anchu**. Toles otres portades del sitiu lleven `.category-header` sobre
   papel; esta non, porque una hemeroteca de revista nun ye una llista
   d'artículos. Sobre negru les portades recórtense como nuna galería, y la
   revista dixébrase del restu del sitiu ensin sacar un color nuevu: ye'l
   mesmu `--ink` del pie y de `.featured-place`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · LA CABECERA
   -------------------------------------------------------------------------- */

.vx-masthead {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem);
  background: var(--ink);
  color: var(--paper);
}
.vx-masthead .eyebrow { color: var(--yellow); }

.vx-masthead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-5) 4rem;
  align-items: end;
  margin-top: var(--space-4);
}

/* El nome de la revista, grande. Ye la pieza que fai que la páxina se
   reconoza d'un güeyu, y por eso va al tamañu que va. */
.vx-masthead__titulu {
  margin: .3rem 0 0;
  font-size: clamp(3.6rem, 11vw, 8.5rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .85;
}

.vx-masthead__copy { display: grid; gap: .9rem; }
.vx-masthead__prosa {
  max-width: 52ch;
  margin: 0;
  color: #d3d3cc;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
}
.vx-masthead__cuenta {
  margin: 0;
  color: var(--yellow);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Les migayes sobre negru. */
.breadcrumbs--invert li { color: #a8a8a1; }
.breadcrumbs--invert a { color: #d3d3cc; }
.breadcrumbs--invert a:hover { color: var(--yellow); }
.breadcrumbs--invert li:not(:last-child)::after { color: #6b6b64; }

/* --------------------------------------------------------------------------
   2 · L'ESTANTE · les portades

   `auto-fill` con mínimu 200px da 5 columnes n'escritoriu y 2 nel móvil ensin
   una sola media query. La proporción ye la de la revista, non la del recorte.
   -------------------------------------------------------------------------- */

.vx-estante-seicion { padding-block: var(--space-6) var(--space-8); }

.vx-estante {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-6) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vx-numeru { min-width: 0; }
.vx-numeru__enllaz {
  display: grid;
  gap: .85rem;
  text-decoration: none;
}
.vx-numeru__portada {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--paper-warm);
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform .16s ease, box-shadow .16s ease;
}
.vx-numeru__portada img { width: 100%; height: 100%; object-fit: cover; }
a.vx-numeru__enllaz:hover .vx-numeru__portada,
a.vx-numeru__enllaz:focus-visible .vx-numeru__portada {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 var(--blue-text);
}
.vx-numeru__cifra {
  color: var(--ink);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
}
.vx-numeru__copy { display: grid; gap: .2rem; }
.vx-numeru__titulu { font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
/* ⚠ El mesmu casu que `.tira-ultimo__titulu`: esto ye fíu de `.vx-numeru__copy`,
   que ye un grid, asina que'l gradiente pintaba la celda entera y el mariello
   pasaba de llargo nos títulos curtios. Ver la nota d'allá. */
a.vx-numeru__enllaz:hover .vx-numeru__titulu {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: .18em;
  text-underline-offset: .12em;
}
.vx-numeru__periodu {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Los que namás esisten en papel.
 *
 * ⚠ VÉNSE EXAUTAMENTE IGUAL QUE LOS DEMÁS. Probóse a apagayos la portada
 * —grises y sombra floxa— y yera un error: **quitába-yos protagonismu y
 * inventaba una xerarquía que nun esiste**. El númberu 17 nun val menos que'l
 * 33 porque nun tea escaniáu entá.
 *
 * Lo único que camuda ye lo que ye verdá: nun son enllaz, porque nun hai ficha
 * que abrir, y lléven el sellu que lo diz. Por eso tampoco se muevan al
 * pasa-yos el ratón per riba: enseñar un efeutu de clic onde nun se pue primir
 * ye engañar. */

.vx-sellu {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .4rem .5rem;
  background: var(--ink);
  color: var(--paper);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3 · LA FICHA DEL NÚMBERU
   -------------------------------------------------------------------------- */

.vx-ficha__cabecera { padding-bottom: 0; }
.vx-ficha { padding-block: var(--space-4) var(--space-5); }
.vx-ficha__grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}
.vx-ficha__portada {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--paper-warm);
  box-shadow: 14px 14px 0 var(--yellow);
}
.vx-ficha__portada img { width: 100%; height: 100%; object-fit: cover; }
.vx-ficha__copy { min-width: 0; }
.vx-ficha__copy h1 {
  margin: .35rem 0 .8rem;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: .94;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.vx-ficha__copy .standfirst { max-width: 60ch; margin: 0 0 1.6rem; }

.vx-cubierta__cifra {
  color: var(--ink);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
}

/* La temporada: «Avientu 2025 – Febreru 2026». */
.vx-periodu {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Avisu en prosa. Mesma caxa que `.article-note`, que ye la que'l sitiu yá usa
   pa una nota al pie de conteníu. */
.vx-nota {
  margin: 1.2rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--blue);
  background: var(--paper-warm);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.55;
}
.vx-nota strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   4 · EL LLECTOR

   Fondu escuru a costies: una páxina de revista sobre papel claru pierde el
   borde y paez que flota. Sobre `--ink` recórtase sola.
   -------------------------------------------------------------------------- */

.vx-lector { --vx-alto: min(84vh, 1000px); margin-top: var(--space-3); }

/*
 * ⚠ LA BARRA VA PEGADA ARRIBA. Sin esto, al pasar de la páxina 6 a la 7 la
 * barra queda fuera de la pantalla y hai que subir a buscala pa dar otra vez
 * a la fleche. `sticky` col `z-index` per riba de los llenzos.
 */
.vx-barra {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: .5rem .7rem;
  border: 2px solid var(--ink);
  border-bottom: 0;
  background: var(--ink);
  color: var(--paper);
}
.vx-barra[hidden] { display: none; }
.vx-barra__grupu { display: flex; align-items: center; gap: .4rem; }

.vx-boton {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .6rem;
  border: 2px solid #55554f;
  background: transparent;
  color: var(--paper);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.vx-boton--testu {
  min-width: 0;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vx-boton:hover:not(:disabled) { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.vx-boton:disabled { opacity: .38; cursor: default; }
.vx-boton[aria-pressed="true"] { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }

.vx-conta {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding-inline: .35rem;
  font-size: .9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vx-campu {
  width: 3.6rem;
  min-height: 44px;
  padding: .2rem .35rem;
  border: 2px solid #55554f;
  background: transparent;
  color: var(--paper);
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* El marcu onde vive'l desplazamientu. */
.vx-marcu {
  border: 2px solid var(--ink);
  background: #1c1c19;
}
.vx-visor {
  height: var(--vx-alto);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px; /* ⚠ Tien que casar col MARXE de viaxast.js. */
  display: flex;
  flex-direction: column;
  /*
   * ⚠ `safe center` y non `center` a seces. Con `center` normal, un fíu más
   * anchu que la caxa desbórdase **polos dos llaos** y el trozu de la
   * izquierda queda inalcanzable: nun hai scroll que llegue a él. `safe`
   * diz-y al navegador que, cuando nun quepa, alliñe al principiu.
   *
   * Les dos declaraciones son a costies: los navegadores que nun conozan
   * `safe` tiren la segunda y queden cola primera.
   */
  align-items: center;
  align-items: safe center;
  /*
   * `pan-x pan-y` dexa'l desplazamientu d'un deu al navegador y déxanos a nós
   * el pellizcu de dos, que ye lo que camuda la escala de verdá en llugar
   * d'estirar el llenzu. Ver el bloque de zoom en `assets/js/viaxast.js`.
   */
  touch-action: pan-x pan-y;
}

/* Cola páxina ampliada, el visor arrástrase cola man como cualquier visor de
   semeyes. ¿Por qué dos clases y non una? `--man` diz que se PUE arrastrar y
   vive col zoom; `--garrando` namás dura lo que dura el botón primiáu. */
.vx-visor--man { cursor: grab; }
.vx-visor--garrando { cursor: grabbing; }

/* Toles páxines dientro d'una caxa sola: el pellizcu aplíca-y un `scale()`
   mientres duren los deos na pantalla, y ye una transformación en llugar de
   cuarenta. */
.vx-fueya {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: 0 auto;
  will-change: transform;
}

.vx-pax {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #2a2a26;
  border: 1px solid #3a3a35;
}
.vx-pax canvas { display: block; max-width: none; }
.vx-pax__cifra {
  color: #6d6d66;
  font-size: 1.6rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

/* Estáu y progresu mientres abre. Van dientro del visor, que ye lo único que
   se ve enantes de que haya páxines; `margin: auto` céntralos na columna. */
.vx-cargando { margin: auto; width: min(100%, 340px); }
.vx-cargando[hidden] { display: none; }
.vx-estau {
  margin: 0;
  color: #b9b9b2;
  font-size: .9rem;
  font-weight: 650;
  text-align: center;
}
.vx-estau--error { color: #ff9c92; }
.vx-progresu {
  display: block;
  width: 100%;
  height: 6px;
  margin: .8rem 0 0;
  border: 0;
  background: #3a3a35;
  appearance: none;
}
.vx-progresu::-webkit-progress-bar { background: #3a3a35; }
.vx-progresu::-webkit-progress-value { background: var(--yellow); }
.vx-progresu::-moz-progress-bar { background: var(--yellow); }

/*
 * ⚠ PANTALLA COMPLETA. El visor tien `height: var(--vx-alto)`, que en pantalla
 * completa nun val: hai que da-y tolo que sobre. Failo una columna flex, y el
 * `min-height: 0` **ye imprescindible**: ensin él un elementu flex nun
 * s'amenorga por baxo del so conteníu, el visor queda más altu que la pantalla
 * y **nun apaez barra de desplazamientu**, que yera'l fallu que facía que en
 * pantalla completa nun se pudiera pasar páxina.
 */
.vx-lector--pantalla {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ink);
}
.vx-lector--pantalla .vx-barra { border: 0; }
.vx-lector--pantalla .vx-marcu {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  border: 0;
}
.vx-lector--pantalla .vx-visor {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  width: 100%;
}

/* Falló pdf.js: queda'l marcu col avisu y la descarga sigue na ficha. */
.vx-lector--fallu .vx-barra { display: none; }

/* --------------------------------------------------------------------------
   5 · SALTAR AL NÚMBERU DE AL LLAU
   -------------------------------------------------------------------------- */

.vx-vecinos {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: stretch;
  margin-bottom: var(--space-7);
  padding-top: var(--space-4);
  border-top: 3px solid var(--ink);
}
.vx-vecinu {
  display: grid;
  align-content: center;
  gap: .25rem;
  padding: 1rem 1.2rem;
  border: 2px solid var(--ink);
  text-decoration: none;
}
.vx-vecinu:hover { background: var(--yellow); }
.vx-vecinu strong { font-size: 1.1rem; line-height: 1.15; }
.vx-vecinu--atras { text-align: left; }
.vx-vecinu--alantre { text-align: right; }
.vx-vecinu--tolos { align-items: center; background: var(--ink); color: var(--paper); }
.vx-vecinu--tolos:hover { background: var(--blue-text); }

/* --------------------------------------------------------------------------
   6 · PANTALLES ESTRECHES
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .vx-masthead__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .vx-ficha__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
  .vx-ficha__portada { width: min(100%, 260px); box-shadow: 10px 10px 0 var(--yellow); }
}

@media (max-width: 760px) {
  /* Nel móvil la páxina entera nun marcu baxu queda ilexible: dái tolo que
     se pueda de altor, que ye lo que decide cuánto se ve. */
  .vx-lector { --vx-alto: min(88vh, 760px); }
  .vx-estante { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-5) var(--space-3); }
  .vx-numeru__portada { box-shadow: 5px 5px 0 var(--ink); }
  .vx-vecinos { grid-template-columns: minmax(0, 1fr); }
  .vx-vecinu--alantre { text-align: left; }
  .vx-barra { gap: .35rem; padding: .45rem .5rem; }
  .vx-boton { min-width: 40px; min-height: 40px; padding: 0 .4rem; }
  .vx-boton--testu { font-size: .68rem; letter-spacing: .05em; }
  .vx-campu { width: 3rem; min-height: 40px; }
}

/* --------------------------------------------------------------------------
   7 · PREFERENCIES Y IMPRENTA
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vx-numeru__portada { transition: none; }
  a.vx-numeru__enllaz:hover .vx-numeru__portada { transform: none; }
}

@media print {
  /* Un llector de PDF nun s'imprime: lo que val ye'l enllaz de descarga. */
  .vx-lector,
  .vx-vecinos { display: none; }
  .vx-masthead { background: none; color: var(--ink); }
  .vx-masthead__prosa { color: var(--ink-soft); }
  .vx-ficha__portada,
  .vx-numeru__portada { box-shadow: none; }
}

/* La portada de verdá na franxa de ViaxAst de la portada del sitiu.
   El prototipu llevaba un marcador de cartón —«ViaxAst» + un rectángulu— y
   equí va la imaxe real, que sí esiste na biblioteca. Respétase la caxa que
   yá tenía `.magazine-cover`; namás se quita'l padding y el testu. */
.magazine-cover--imaxe {
  display: block;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
}
.magazine-cover--imaxe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   LES PÁXINES DE LA CASA · 0.16.0
   Nós · Contactu · ¿Quies collaborar? · Publicidá

   ⚠ D'ÓNDE SAL ESTI BLOQUE. Nun vien de 03-diseno: nos cuatro HTML aprobaos
   nun hai nin una páxina institucional nin un formulariu. Ye la mesma situación
   que la revista, y siguióse la mesma regla: **nun hai nengún valor inventáu**.
   Los colores son los cinco de `:root` (más el `#e9f6fc` que yá usa
   `.article-note`), los espacios son les variables `--space-*`, y los bordes de
   2 px, les mayúscules espaciaes y les caxes con borde son los xestos que yá
   usen `.section-heading`, `.pill` y `.button`.

   ⚠ TOLES REYES VAN CON `minmax(0, 1fr)`. `1fr` a seques ye `minmax(auto, 1fr)`
   y `auto` nun baxa del anchu mínimu del conteníu: nuna caxa con borde eso ye un
   testu que se sal per un llau en móvil.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · LA CABECERA COMPARTIDA

   Ni la del artículu ni la de sección. Ver la nota de
   `va_pintar_cabecera_casa()`: son cuatro páxines de la mesma familia y tienen
   que lleese como tal.
   -------------------------------------------------------------------------- */

.casa-cabecera { padding-block: clamp(2rem, 4vw, 3.2rem) clamp(1.4rem, 3vw, 2.2rem); }
.casa-cabecera .eyebrow { display: block; margin-bottom: .5rem; }
.casa-cabecera h1 {
  margin: 0;
  /* 18ch y non 15ch como la de sección: «¿Quies collaborar?» ye la más llarga
     de les cuatro y a 15ch partíase. */
  max-width: 18ch;
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: .9;
  text-wrap: balance;
}
.casa-cabecera__entrada {
  max-width: 62ch;
  margin: 1.15rem 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

/* ⚠ LA SELECCIÓN D'ESTOS TITULARES NUN LLEVA CAXA, pola mesma xeometría que la
   de la 0.15.5: a `line-height` de .9 l'avance ente llinies ye menor que la
   caxa de conteníu de la fonte (1,349 em), asina que la segunda llinia tapa un
   cachu de la primera y al escoyer el testu media pallabra desapaez. Nun ye
   cosa d'esti tema: cualquier resalte pinta esa caxa. Lo que se fai ye nun
   pintala y camudar el color. */
.casa-cabecera h1 ::selection, .casa-cabecera h1::selection,
.casa-revista__caxa h2 ::selection, .casa-revista__caxa h2::selection {
  background: transparent;
  color: var(--blue-text);
}

/* --------------------------------------------------------------------------
   2 · LES LLISTES EDITORIALES

   Los bloques de Collaborar y Publicidá yeren reyes de tarxetes iguales. Al
   tener trés bloques siguíos, el resultáu yera una páxina llarga y partida en
   demasiados requexos. Agora cada bloque tien un títulu al llau y una llista
   de files: la vista atopa primero la idea, y la esplicación queda disponible
   ensin competir col formulariu, que ye la aición principal.
   -------------------------------------------------------------------------- */

.casa-bloque {
  display: grid;
  grid-template-columns: minmax(11rem, .7fr) minmax(0, 1.8fr);
  align-items: start;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
}
.casa-bloque > .section-heading { margin: 0; }
.casa-llista { min-width: 0; border-top: 3px solid var(--ink); }
.casa-ficha {
  display: grid;
  grid-template-columns: minmax(10rem, .8fr) minmax(0, 1.5fr);
  gap: var(--space-4);
  min-width: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.casa-ficha__titulu { min-width: 0; }
.casa-bloque--pasos .casa-ficha__titulu {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
}
.casa-ficha h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.08;
  text-wrap: balance;
}
.casa-ficha p { max-width: 58ch; margin: 0; font-size: .98rem; }
/* El númberu del pasu. Va delantre del titular y non nun requexu absolutu:
   asina nun tapa nada y en móvil sigue lleéndose l'orde. */
.casa-ficha__numberu {
  display: block;
  color: var(--blue-text);
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1;
}

.casa-revista { padding-bottom: var(--space-6); }
.casa-revista__caxa {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  background: var(--ink);
  color: var(--paper);
}
/* Sobre tinta, l'antetítulu azul del sitiu queda escuru; el mariellu ye'l color
   que'l tema yá usa pa esto na franxa de la revista y nel pie. */
.casa-revista__caxa .eyebrow { display: block; margin-bottom: .5rem; color: var(--yellow); }
.casa-revista__caxa h2 {
  margin: 0 0 .7rem;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: .95;
}
.casa-revista__caxa p { max-width: 58ch; margin: 0; color: #e6e6dd; }
.casa-revista__caxa .button { border-color: var(--paper); }
.casa-revista__caxa .button--solid { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.casa-revista__caxa .button:hover { background: var(--blue); border-color: var(--blue); color: var(--ink); }

/* --------------------------------------------------------------------------
   4 · CONTACTU · el formulariu y la columna de datos
   -------------------------------------------------------------------------- */

.casa-contautu {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
}
.casa-contautu__principal .casa-formulariu__caxa { max-width: none; }

.casa-datos { padding: 1.35rem 1.45rem; border: 2px solid var(--ink); }
.casa-datos + .casa-datos { margin-top: var(--space-4); }
.casa-datos h2 {
  margin: 0 0 .9rem;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.casa-datos dl { display: grid; gap: .2rem; margin: 0; }
.casa-datos dt {
  color: var(--muted);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.casa-datos dd { margin: 0 0 .8rem; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.casa-datos dd:last-child { margin-bottom: 0; }
.casa-datos a { text-decoration: none; }
.casa-datos a:hover { color: var(--blue-text); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: .2em; }

/* El desvíu a los otros dos formularios. En papel caliente pa que se distinga
   de la caxa de datos que tien enriba y nun paeza la mesma cosa partida. */
.casa-datos--desviu { background: var(--paper-warm); }
.casa-datos--desviu ul { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.casa-datos--desviu li { font-size: .96rem; line-height: 1.4; }
.casa-datos--desviu a { display: block; font-weight: 800; }
.casa-datos--desviu span { color: var(--muted); font-family: var(--serif); }

/* --------------------------------------------------------------------------
   5 · EL FORMULARIU

   ⚠ La caxa va en `--paper-warm` a costies. Un formulariu sobre'l mesmu papel
   que'l restu de la páxina nun se llee como una zona onde se fai daqué: llese
   como más testu con recuadros. El fondu caliente ye'l que'l sitiu yá usa pa
   les zones d'aición (`.related`, la caxa del territoriu), y dexa que los campos
   vayan en `--paper`, que ye lo que-yos da el contraste.
   -------------------------------------------------------------------------- */

/* ⚠ `scroll-margin-top` porque la vuelta del unviu ye a `#formulariu` y
   n'escritoriu hai una barra pegada arriba: ensin esto l'avisu queda debaxo
   d'ella y paez que nun pasó nada. */
.casa-formulariu { scroll-margin-top: 6rem; padding-bottom: var(--space-6); }
.casa-formulariu:focus { outline: none; }
.casa-formulariu__caxa {
  max-width: var(--reading);
  padding: clamp(1.4rem, 3.2vw, 2.2rem);
  border: 2px solid var(--ink);
  background: var(--paper-warm);
}
.casa-formulariu--principal .casa-formulariu__caxa {
  max-width: 900px;
  border-left-width: 7px;
}
.casa-formulariu .eyebrow { display: block; margin-bottom: .45rem; }
.casa-formulariu h2 { margin: 0 0 .7rem; font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: -.035em; line-height: 1.02; }
.casa-formulariu__entrada { max-width: 58ch; margin: 0; font-size: 1rem; }
.casa-formulariu__otra { margin: 1.2rem 0 0; color: var(--muted); font-size: .9rem; font-weight: 600; }
.casa-formulariu__otra a { font-weight: 800; text-decoration-color: var(--yellow); text-decoration-thickness: .16em; }

.casa-form { display: grid; gap: 1.15rem; margin-top: 1.5rem; }
.casa-form__filera { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.casa-form__campu { display: grid; gap: .35rem; margin: 0; min-width: 0; }
.casa-form__campu > label {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
/* «opcional» al llau de la etiqueta y non dientro del campu: un marcador
   dientro del campu desapaez en cuantes se empieza a escribir, que ye
   xustamente cuando fai falta. */
.casa-form__opcional {
  margin-left: .4rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.casa-form__pista { color: var(--muted); font-family: var(--serif); font-size: .92rem; line-height: 1.4; }

.casa-form input,
.casa-form textarea {
  width: 100%;
  padding: .72rem .8rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
}
.casa-form textarea { min-height: 9.5rem; line-height: 1.5; resize: vertical; }
.casa-form input:focus-visible,
.casa-form textarea:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* La casilla nun ye un campu de testu: hai que desfacer lo de riba. */
.casa-form input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 0;
  accent-color: var(--blue-text);
}

.casa-form__acuerdu {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .65rem;
  margin: 0;
}
.casa-form__acuerdu label { color: var(--ink-soft); font-size: .92rem; line-height: 1.4; }
.casa-form__unviar { margin: 0; }

/* ⚠ EL CAMPU TRAMPA. Sácase de la pantalla col CSS y non con `hidden` nin con
   `display: none`: un robot llee el HTML y salta lo que ta escondío de manera
   evidente, pero rellena lo que paez un campu normal. Ver la nota de
   `va_pintar_formulariu()`. */
.casa-form__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* L'avisu de vuelta. Trés estaos con trés formes distintes, ensin nengún color
   nuevu: el azul claru ye'l de `.article-note`, el mariellu y la tinta son los
   del sitiu. */
.casa-avisu {
  margin: 1.3rem 0 0;
  padding: .95rem 1.1rem;
  border-left: 6px solid;
  font-family: var(--sans);
  font-size: .98rem;
  line-height: 1.45;
}
.casa-avisu strong { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.casa-avisu--bien { border-color: var(--blue-text); background: #e9f6fc; }
.casa-avisu--falta { border-color: var(--ink); background: var(--yellow); }
.casa-avisu--mal { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   6 · LES PUERTES A LES OTRES PÁXINES
   -------------------------------------------------------------------------- */

.casa-puertes { padding-bottom: var(--space-8); }
.casa-puertes__filera {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 2px solid var(--ink);
  list-style: none;
}
.casa-puerta { min-width: 0; }
.casa-puerta + .casa-puerta { border-left: 1px solid var(--ink); }
.casa-puerta a {
  position: relative;
  display: block;
  min-height: 100%;
  padding: 1.1rem 3rem 1.1rem 1.2rem;
  text-decoration: none;
}
.casa-puerta a:hover { background: var(--yellow); }
.casa-puerta .eyebrow { display: block; margin-bottom: .25rem; }
.casa-puerta strong {
  display: block;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  letter-spacing: -.025em;
  line-height: 1.05;
}
.casa-puerta__flecha { position: absolute; top: 50%; right: 1.2rem; font-size: 1.35rem; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   7 · PANTALLES ESTRECHES
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
  /* La columna de datos de Contactu debaxo del formulariu: al llau nun cabe
     ensin dexar el formulariu en 400 px, que ye onde los campos empiecen a
     partise. */
  .casa-contautu { grid-template-columns: minmax(0, 1fr); }
  .casa-puertes__filera { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casa-puerta:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--ink); border-left: 0; }
}

@media (max-width: 760px) {
  .casa-cabecera h1 { font-size: clamp(2rem, 9vw, 2.9rem); }
  /* Nome y corréu ún debaxo d'otru: dos campos de testu a 160 px cada ún nun
     se rellenen col deu. */
  .casa-bloque,
  .casa-ficha,
  .casa-puertes__filera,
  .casa-form__filera { grid-template-columns: minmax(0, 1fr); }
  .casa-bloque { gap: var(--space-3); }
  .casa-ficha { gap: .45rem; }
  .casa-puerta + .casa-puerta,
  .casa-puerta:nth-child(3) { grid-column: auto; border-top: 1px solid var(--ink); border-left: 0; }
  .casa-formulariu__caxa { padding: 1.25rem 1.1rem; }
  /* ⚠ EQUÍ NUN VA NENGÚN `padding-inline`. Púnxose ún de 1 rem pensando que
     `.container` yera tol anchu en móvil, y NON lo ye: la única regla que-y pon
     `width: 100%` ta dientro de `@media print`. Midío a 375 px: la caxa del
     formulariu quedaba a 32 px de los cantos y les tarxetes a 16, o seya la
     caxa metida un deu respeuto a tolo demás. */
}

/* ==========================================================================
   LES PÁXINES LLEGALES · 0.16.1

   Avisu llegal, privacidá, cookies y accesibilidá pásense per `page.php`, que
   yá-yos da la columna de llectura y la tipografía del artículu. Lo que faltaba
   son dos coses que nengún artículu del sitiu tenía y estos documentos sí:
   **una tabla** y **códigu en llinia**.
   ========================================================================== */

/* La tabla de la política de cookies. Nun hai nenguna otra nel sitiu, y por eso
   nun había estilu: `wp-block-styles` dexábala ensin bordes y ensin aire, que
   nuna llista de «qué se guarda y cuánto dura» ye xustamente lo que se llee.

   ⚠ Queda a `--reading` (760) y non a `--prosa` (680), como les figures: ye una
   rexa de datos, non testu de siguío. Ver «LA COLUMNA DE LLECTURA». */
.article-content table {
  width: 100%;
  margin: 1.9rem 0;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.4;
}
.article-content th,
.article-content td {
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.article-content thead th {
  border-bottom: 2px solid var(--ink);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.article-content td .meta { display: block; }

/* El nome d'una clave que se pue buscar nel navegador. Ye datu, non prosa: va
   na condensada y con fondu caliente pa que se vea que ye una cadena esacta. */
.article-content code {
  padding: .1em .35em;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: .92em;
  overflow-wrap: break-word;
}

/* La tira coles otres llegales, al pie de caúna. Les píldores son les del
   sitiu; lo único propio ye'l titulín de riba. */
.llegales-mas { padding-bottom: var(--space-7); }
.llegales-mas h2 {
  margin: 0 0 .75rem;
  padding-top: .9rem;
  border-top: 3px solid var(--ink);
  color: var(--muted);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  /* Trés columnes de tabla a 343 px parten les pallabres. La cabecera pierde
     el sentíu al apilar, asina que se esconde y cada celda diz lo que ye pola
     so posición: qué, pa qué, cuánto. */
  .article-content thead { display: none; }
  .article-content table,
  .article-content tbody,
  .article-content tr,
  .article-content td { display: block; width: 100%; }
  .article-content tr {
    margin-bottom: 1.1rem;
    padding-bottom: .9rem;
    border-bottom: 2px solid var(--ink);
  }
  .article-content td { padding: .2rem 0; border: 0; }
  .article-content td:first-child { font-weight: 800; }
}

/* ==========================================================================
   LES ENCUESTES · 0.17.0

   ⚠ NUN SAL DE NENGÚN HTML DE `03-diseno/`: ye la primera pieza del tema que
   nun tien orixinal aprobáu, porque les encuestes del sitiu vieyu taben aloxaes
   fuera y perdiéronse na migración. Constrúise colos xestos que'l sitiu yá
   tien, y nada más:

     · la caxa en `--paper-warm` con borde de 2 px ye la de `.casa-formulariu`,
       que ye como esti sitiu marca «equí faise daqué» y non «equí hai testu»;
     · los campos van en `--paper` dientro d'ella, igual que nel formulariu;
     · el botón ye `.button--solid`, el mesmu de toles aiciones;
     · l'antetítulu lleva les midíes de `.eyebrow`.

   ⚠ Queda a `--reading` (760) y NON a `--prosa` (680). Ye la mesma decisión que
   la tabla de la política de cookies: una encuesta ye una rexa de datos y
   d'aiciones, non testu de siguío. Por eso `.va-encuesta` NUN ta na llista de
   `.article-content > *` que baxa a `--prosa`.
   ========================================================================== */

.va-encuesta {
  margin: 2.6rem 0;
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border: 2px solid var(--ink);
  background: var(--paper-warm);
  font-family: var(--sans);
}

/* El cuestionariu ye la unidá visible. Les encuestes que lleva dientro siguen
   siendo pieces independientes pal votu, pero pierden les sos caxes pa nun
   obligar a percorrer diez bloques llargos. Ensin JS queden apilaes y útiles. */
.va-cuestionariu {
  margin: 1.6rem 0;
  padding: clamp(.8rem, 2vw, 1.1rem);
  border: 2px solid var(--ink);
  background: var(--paper-warm);
  font-family: var(--sans);
}
.va-cuestionariu__cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .15rem .8rem;
  margin-bottom: .8rem;
  padding-bottom: .65rem;
  border-bottom: 2px solid var(--ink);
}
.va-cuestionariu__antetitulu {
  grid-column: 1;
  display: none;
  margin: 0;
  color: var(--blue-text);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.va-cuestionariu__titulu {
  grid-column: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.15;
}
.va-cuestionariu__progresu {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.va-cuestionariu__barra {
  position: relative;
  grid-column: 1 / -1;
  display: none;
  height: 4px;
  margin-top: .4rem;
  background: var(--line);
  overflow: hidden;
}
.va-cuestionariu__barra span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--blue-text);
  transition: width 120ms linear;
}
.va-cuestionariu .va-encuesta {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.va-cuestionariu .va-encuesta__antetitulu { display: none; }
.va-cuestionariu__panel + .va-cuestionariu__panel {
  margin-top: 2.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line);
}
.va-cuestionariu__panel[hidden] { display: none; }
.va-cuestionariu__final[hidden] { display: none; }
.va-cuestionariu__nav {
  display: none;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .8rem;
  padding-top: .65rem;
  border-top: 1px solid var(--line);
}
.va-cuestionariu.ye-interactivu .va-cuestionariu__barra,
.va-cuestionariu.ye-interactivu .va-cuestionariu__nav { display: flex; }
.va-cuestionariu.ye-final .va-cuestionariu__nav { display: none; }
.va-cuestionariu.ye-interactivu .va-cuestionariu__panel + .va-cuestionariu__panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.va-cuestionariu__nav .button:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.va-encuesta__antetitulu {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
/* ⚠ ENSIN FONDU NIN EN HOVER NIN EN SELECCIÓN, como tolos titulares grandes del
   sitiu: con `line-height` per debaxo de 1 la caxa que pinta'l fondu ye más
   alta que l'avance ente llinies y la segunda llinia tapa un trozu de la
   primera. La midía ta escrita nel bloque del tronco común. Equí lo único que
   fai falta ye nun ponelu. */
.va-encuesta__entruga {
  margin: 0 0 .6rem;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  letter-spacing: -.035em;
  line-height: 1.04;
}
.va-encuesta__estau:focus { outline: none; }

/* --------------------------------------------------------------------------
   LOS MEDIOS
   -------------------------------------------------------------------------- */

.va-encuesta__media { display: block; margin: 0 0 1.1rem; }
.va-encuesta__media img,
.va-encuesta__media video {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--ink);
}
.va-encuesta__media video { background: var(--ink); }
.va-cuestionariu .va-encuesta__media img,
.va-cuestionariu .va-encuesta__media video {
  max-height: min(34vh, 260px);
  object-fit: contain;
}
.va-encuesta__media audio,
.va-opcion__media audio { width: 100%; }

/* --------------------------------------------------------------------------
   LES OPCIONES

   ⚠ `flex` y non `grid` na opción: el marcáu ye siempre el mesmu —mandu, medio,
   testu— y na reya de tarxetes el medio tien que subir a una llinia propia. Con
   `order: -1` y `flex: 0 0 100%` eso son dos regles; con grid habría que
   recolocar tres celdes y camudar les columnes.
   -------------------------------------------------------------------------- */

.va-encuesta__pista {
  margin: 0 0 .7rem;
  color: var(--muted);
  font-family: var(--serif);
  font-size: .95rem;
}
.va-encuesta__opciones {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ⚠ `minmax(min(170px, 100%), 1fr)` y non `minmax(170px, 1fr)`: con un mínimu
   fixu, una tarxeta de 170 px nun cabe nuna pantalla de 320 col padding puestu
   y la reya desborda a lo ancho ensin barra que lo delate. Ye la mesma trampa
   que `minmax(0, 1fr)` en toles otres rexes del ficheru. */
.va-encuesta__opciones--reya { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.va-cuestionariu .va-encuesta__opciones--reya { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.va-opcion {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 40px;
  padding: .5rem .65rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
.va-opcion:hover { background: var(--blue); }
/* La opción marcada lleva'l mariellu de la marca. `:has()` ye lo único que dexa
   pintar la etiqueta dende l'estáu del mandu que tien dientro. */
.va-opcion:has(input:checked) { background: var(--yellow); }
.va-opcion:has(input:focus-visible) { outline: 3px solid var(--blue-text); outline-offset: 2px; }
.va-opcion input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--blue-text);
}
.va-opcion__testu { min-width: 0; overflow-wrap: break-word; }
.va-opcion__media { flex: 0 0 auto; line-height: 0; }
.va-opcion__media img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--ink);
}
.va-encuesta__opciones--reya .va-opcion { flex-wrap: wrap; }
.va-encuesta__opciones--reya .va-opcion__media { order: -1; flex: 0 0 100%; }
.va-encuesta__opciones--reya .va-opcion__media img {
  width: 100%;
  height: min(15vh, 110px);
  object-fit: cover;
}

.va-encuesta .va-encuesta__unviar {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0;
}
.va-cuestionariu.ye-interactivu .va-encuesta[data-encuesta-tipu="una"] .va-encuesta__unviar { display: none; }
.va-encuesta.ye-unviando .va-opcion { pointer-events: none; }
.va-encuesta.ye-unviando .va-opcion:not(:has(input:checked)) { opacity: .55; }

/* --------------------------------------------------------------------------
   SEÑALAR NUNA IMAXE O MAPA
   -------------------------------------------------------------------------- */

.va-mapa { margin: 0; }
.va-mapa__lienzu,
.va-mapa__resultau {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  line-height: 0;
}
.va-mapa__lienzu { cursor: crosshair; }
.va-mapa__lienzu:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 3px; }
.va-mapa__lienzu img,
.va-mapa__resultau img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(42vh, 300px);
  object-fit: contain;
}
.va-mapa__marca,
.va-mapa__puntu {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 3px solid var(--paper);
  background: var(--blue-text);
  color: var(--paper);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -50%);
  outline: 2px solid var(--ink);
}
.va-mapa__marca::before { content: "+"; }
.va-mapa__marca[hidden] { display: none; }
.va-mapa__alternativa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-top: .7rem;
}
.va-mapa__alternativa label { display: grid; gap: .3rem; font-size: .82rem; font-weight: 800; }
.va-mapa__alternativa input { width: 100%; }
.ye-mapa-interactivu .va-mapa__alternativa { display: none; }
.va-mapa__puntu { left: var(--x); top: var(--y); }
.va-mapa__puntu--mio { background: var(--error); }
.va-mapa__puntu--bonu { background: var(--success); }

/* --------------------------------------------------------------------------
   LA BARRA QUE S'ARRASTRA

   ⚠ NUN SE-Y TOCA EL PULGAR. Un `range` con `::-webkit-slider-thumb` propiu hai
   que pintalu tres veces —WebKit, Gecko y el respaldu— y en cuantes se toca una,
   piérdese'l comportamientu de tecláu que'l navegador yá trai. Lo único que se-y
   pon ye `accent-color`, que-y da'l color de la marca ensin quitar nada, y 44 px
   d'alto pa que se pueda agarrar col deu.
   -------------------------------------------------------------------------- */

.va-barra { margin: 0; }
.va-barra__cifra {
  display: block;
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.va-barra__mandu {
  width: 100%;
  height: 44px;
  margin: .7rem 0 0;
  accent-color: var(--blue-text);
}
.va-barra__estremos {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   LOS RESULTAOS
   -------------------------------------------------------------------------- */

.va-resultaos { margin: 0; }
.va-resultaos__llista {
  display: grid;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.va-resultau__cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8rem;
  margin: 0 0 .35rem;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
}
.va-resultau__testu { min-width: 0; overflow-wrap: break-word; }
.va-resultau__cifra { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.va-resultau {
  padding: .55rem .65rem .65rem;
  border-left: 6px solid transparent;
}
.va-resultau--mala { border-left-color: var(--error); background: var(--error-soft); }
.va-resultau--bona { border-left-color: var(--success); background: var(--success-soft); }
.va-resultau__simbolu {
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  margin-left: .35rem;
  border: 2px solid currentColor;
  color: var(--success);
  font-size: .9rem;
  font-weight: 900;
  line-height: 1;
  vertical-align: .05em;
}
.va-resultau--mala .va-resultau__simbolu { color: var(--error); }

/* La barra ye `aria-hidden`: el porcentaxe yá ta escritu enriba, en testu. El
   anchu vien de la variable `--parte`, que la pon PHP col valor esactu. */
.va-resultau__barra {
  position: relative;
  display: block;
  height: 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.va-resultau__barra::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--parte, 0) * 1%);
  background: var(--blue);
}
.va-resultau--mia .va-resultau__barra::before { background: var(--yellow); }
.va-resultau--mala .va-resultau__barra::before { background: var(--error); }
.va-resultau--bona .va-resultau__barra::before { background: var(--success); }

.va-media-cifra { margin: 0 0 .6rem; text-align: center; }
.va-media-cifra strong {
  display: block;
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.va-media-cifra span {
  display: block;
  margin-top: .2rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Doce tramos, y el más altu al 100 % del alto. Midíos sobre'l total serín doce
   rayes del 8 % y nun se vería la forma de nada. */
.va-histograma {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 88px;
  margin: 0 0 .25rem;
  border-bottom: 2px solid var(--ink);
}
.va-histograma__tramu {
  flex: 1 1 0;
  min-width: 0;
  height: calc(var(--alto, 0) * 1%);
  min-height: 2px;
  background: var(--blue);
}

.va-resultaos__respuestes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: .65rem;
  margin-top: 1rem;
}
.va-resultaos--curtiu .va-resultaos__respuestes { margin-top: 0; }
.va-respuesta {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  padding: .75rem .85rem;
  border: 2px solid currentColor;
  font-size: 1.2rem;
}
.va-respuesta--mala { color: var(--error); background: var(--error-soft); }
.va-respuesta--bona { color: var(--success); background: var(--success-soft); }
.va-respuesta__simbolu {
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}
.va-respuesta__media { flex: 0 0 auto; margin: 0; }
.va-respuesta__media img { display: block; width: 64px; height: 52px; object-fit: cover; }
.va-resultaos__total {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.va-resultaos__total span {
  display: block;
  margin-top: .3rem;
  font-family: var(--serif);
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* El xuiciu del xuegu: acertasti o non. Caxa de `.article-note` col taco de la
   marca cuando ta bien y col azul del sitiu cuando non. */
.va-encuesta__xuiciu {
  margin: 1.1rem 0 0;
  padding: .8rem 1rem;
  border-left: 6px solid var(--error);
  background: var(--paper);
  font-size: 1.02rem;
  font-weight: 800;
}
.va-encuesta__xuiciu.ye-mala { color: var(--error); background: var(--error-soft); }
.va-encuesta__xuiciu.ye-bona { border-left-color: var(--success); color: var(--success); background: var(--success-soft); }

.va-encuesta__gracies { margin: 0; font-size: 1.08rem; font-weight: 800; }
.va-encuesta__gracies span {
  display: block;
  margin-top: .3rem;
  color: var(--muted);
  font-family: var(--serif);
  font-size: .92rem;
  font-weight: 400;
}

/* ⚠ L'AVISO TA SIEMPRE NEL HTML, tamién cuando nun hai nada que dicir: tien que
   quedar quietu pa que `aria-live` cante lo que se-y meta dientro. Asina que
   cuando ta vacíu hai que escondelu, y sal de PHP ensin nin un espaciu dientro,
   que ye lo que `:empty` pide pa casar. */
.va-encuesta__aviso {
  margin: 1rem 0 0;
  color: var(--blue-text);
  font-size: .96rem;
  font-weight: 800;
}
.va-encuesta__aviso:empty { display: none; }

/* El cierre pertenece a la misma caja editorial: confirma que no quedan más
   pasos y, si la redacción lo pide, resume sólo las preguntas puntuables. */
.va-cuestionariu__final {
  max-width: 62ch;
  margin: 0 auto;
  padding: .8rem 0 .2rem;
  text-align: center;
}
.va-cuestionariu__final > .va-cuestionariu__final-simbolu {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto .6rem;
  border: 2px solid var(--success);
  color: var(--success);
  font-size: 1.35rem;
  font-weight: 900;
}
.va-cuestionariu__final h2 {
  margin: 0;
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1;
}
.va-cuestionariu__final > p:not(.va-cuestionariu__final-simbolu, .va-cuestionariu__final-accion) {
  margin: .55rem auto 0;
  font-family: var(--serif);
}
.va-cuestionariu__puntuacion {
  margin-top: .9rem;
  padding: .8rem;
  border-block: 1px solid var(--line);
}
.va-cuestionariu__puntuacion p { margin: .35rem 0 0; }
.va-cuestionariu__cifra {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .45rem;
}
.va-cuestionariu__cifra strong {
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.va-cuestionariu__cifra > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.va-cuestionariu__final-accion {
  display: flex;
  justify-content: center;
  margin: .9rem 0 0;
}

.va-encuesta__pie {
  margin: 1rem 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: .88rem;
  line-height: 1.45;
}
.va-encuesta__contextu {
  margin-top: .8rem;
  padding: .7rem .8rem;
  border-left: 5px solid var(--blue-text);
  background: var(--paper);
  font-family: var(--serif);
  font-size: .92rem;
  line-height: 1.45;
}
.va-encuesta__contextu p { margin: 0; }
.va-encuesta__contextu a {
  display: inline-block;
  margin-top: .45rem;
  color: var(--blue-text);
  font-family: var(--sans);
  font-weight: 850;
}

@media (max-width: 760px) {
  /* La reya de tarxetes baxa a dos columnes fixes: con `auto-fit` y 170 px de
     mínimu, a 375 px de pantalla cabe una sola, y una encuesta de seis opciones
     con foto quedaría en seis pantallazos. */
  .va-encuesta__opciones--reya,
  .va-cuestionariu .va-encuesta__opciones--reya { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .va-histograma { height: 68px; }
	.va-cuestionariu { padding: .7rem; }
	.va-cuestionariu__cab { grid-template-columns: minmax(0, 1fr) auto; }
	.va-cuestionariu__progresu { grid-column: 2; grid-row: 1; margin-top: 0; }
	.va-cuestionariu__nav .button { padding-inline: .8rem; }
	.va-mapa__alternativa { grid-template-columns: 1fr; }
}

/* ==========================================================================
   XIXÓN TOURS · 0.23.1

   Una páxina de campaña dientro del mesmu sistema editorial: tinta, papel,
   azul y cantos rectos. Nun hai tarxetes flotantes nin animación; la presencia
   propia sal de la escala, el mosaicu fotográficu y la llista numerada.
   ========================================================================== */

.xt-hero { background: var(--ink); color: var(--paper); border-bottom: 12px solid var(--blue); }
.xt-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  min-height: min(660px, calc(100vh - 150px));
  padding-block: var(--space-6);
  gap: var(--space-6);
  align-items: center;
}
.xt-hero__copy { max-width: 590px; }
.xt-marca {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 var(--space-4);
  color: var(--blue);
  font-size: .92rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.xt-marca span { font-size: 1.5rem; line-height: 0; }
.xt-hero h1 {
  max-width: 10ch;
  margin: 0;
  color: var(--paper);
  font-size: clamp(4rem, 7.8vw, 7.8rem);
  line-height: .86;
  letter-spacing: -.045em;
}
.xt-hero__entradilla {
  max-width: 34rem;
  margin: var(--space-4) 0 0;
  color: var(--line);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.65vw, 1.35rem);
  line-height: 1.45;
}
.xt-boton {
  display: inline-block;
  margin-top: var(--space-5);
  padding: .88rem 1.2rem .74rem;
  border: 2px solid var(--blue);
  background: var(--blue);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}
.xt-boton:hover { background: var(--ink); color: var(--blue); }
.xt-boton:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

.xt-hero__mosaicu {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  height: min(520px, 62vh);
  min-height: 390px;
  overflow: hidden;
}
.xt-hero__foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.xt-hero__foto--1 { grid-row: 1 / 3; }

.xt-claves { border-bottom: 1px solid var(--line); background: var(--paper-warm); }
.xt-claves__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xt-claves p {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 1.4rem var(--space-4);
  border-left: 1px solid var(--line);
}
.xt-claves p:first-child { border-left: 0; }
.xt-claves strong { font-size: 1.12rem; }
.xt-claves span { color: var(--muted); font-family: var(--serif); font-size: .9rem; line-height: 1.45; }

.xt-programacion {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  gap: 0 var(--space-6);
  margin-block: var(--space-7);
  padding-block: var(--space-5);
  border-block: 3px solid var(--ink);
}
.xt-programacion .eyebrow { grid-column: 1; margin: 0 0 .5rem; color: var(--blue-text); }
.xt-programacion h2 { grid-column: 1; margin: 0; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: .9; }
.xt-programacion__testu { grid-column: 2; grid-row: 1 / 3; align-self: center; max-width: 65ch; font-family: var(--serif); font-size: 1.08rem; line-height: 1.62; }
.xt-programacion__testu > :first-child { margin-top: 0; }
.xt-programacion__testu > :last-child { margin-bottom: 0; }

.xt-percorridos { margin-bottom: var(--space-8); }
.xt-percorridos__cabecera { max-width: 820px; margin-bottom: var(--space-5); }
.xt-percorridos__cabecera h2 { margin: 0; font-size: clamp(2.7rem, 5vw, 4.8rem); line-height: .9; letter-spacing: -.025em; }
.xt-llista { border-top: 4px solid var(--ink); }
.xt-ruta {
  display: grid;
  grid-template-columns: 4.6rem minmax(260px, .85fr) minmax(0, 1.15fr);
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--ink);
}
.xt-ruta__numero { align-self: start; margin: 0; color: var(--blue-text); font-size: 3.3rem; font-weight: 900; line-height: .8; font-variant-numeric: tabular-nums; }
.xt-ruta__media { min-width: 0; }
.xt-ruta__galeria {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-color: var(--blue-text) var(--line);
  background: var(--ink);
}
.xt-ruta__galeria:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 3px; }
.xt-ruta__diapositiva { flex: 0 0 100%; margin: 0; aspect-ratio: 16 / 10; scroll-snap-align: start; overflow: hidden; }
.xt-ruta__diapositiva img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xt-ruta__galeria-controles { display: flex; align-items: center; justify-content: space-between; min-height: 2.35rem; border-top: 1px solid var(--paper); background: var(--ink); color: var(--paper); }
.xt-ruta__galeria-controles span { font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.xt-ruta__galeria-boton { width: 2.8rem; align-self: stretch; border: 0; background: var(--blue); color: var(--ink); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.xt-ruta__galeria-boton:hover { background: var(--paper); }
.xt-ruta__galeria-boton:disabled { background: var(--ink); color: var(--muted-light); cursor: default; }
.xt-ruta__galeria-boton:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.xt-ruta__cuerpu { max-width: 620px; }
.xt-ruta__cuerpu h3 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: .92; }
.xt-ruta__descripcion { margin-top: var(--space-3); font-family: var(--serif); font-size: 1rem; line-height: 1.58; }
.xt-ruta__descripcion > :first-child { margin-top: 0; }
.xt-ruta__descripcion > :last-child { margin-bottom: 0; }
.xt-ruta__datos { display: grid; gap: .75rem; margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.xt-ruta__datos div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-3); }
.xt-ruta__datos dt { color: var(--blue-text); font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.xt-ruta__datos dd { margin: 0; font-family: var(--serif); line-height: 1.45; }
.xt-ruta__reserva {
  display: inline-block;
  margin-top: var(--space-4);
  padding-bottom: .15rem;
  border-bottom: 3px solid var(--blue);
  font-weight: 900;
  text-decoration: none;
}
.xt-ruta__reserva:hover { color: var(--blue-text); border-color: var(--ink); }
.xt-ensin-rutes { padding: var(--space-6); border-block: 3px solid var(--ink); background: var(--paper-warm); font-family: var(--serif); }

.mobile-nav .xixon-tours-link { background: var(--blue); color: var(--ink); padding-inline: .35rem; }
.mobile-nav .xixon-tours-link:hover { background: var(--ink); color: var(--blue); }

@media (max-width: 1050px) {
  .xt-hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 590px; gap: var(--space-5); }
  .xt-hero h1 { font-size: clamp(3.7rem, 7.5vw, 6rem); }
  .xt-ruta { grid-template-columns: 3.8rem minmax(220px, .8fr) minmax(0, 1.2fr); gap: var(--space-4); }
}

@media (max-width: 760px) {
  .xt-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: var(--space-5); }
  .xt-hero__copy { max-width: none; }
  .xt-hero h1 { max-width: 9ch; font-size: clamp(3.55rem, 16.5vw, 5.6rem); }
  .xt-hero__entradilla { font-size: 1rem; }
  .xt-hero__mosaicu { height: 310px; min-height: 0; }
  .xt-claves__grid { grid-template-columns: minmax(0, 1fr); }
  .xt-claves p { border-left: 0; border-top: 1px solid var(--line); padding-inline: 0; }
  .xt-claves p:first-child { border-top: 0; }
  .xt-programacion { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-block: var(--space-6); }
  .xt-programacion .eyebrow,
  .xt-programacion h2,
  .xt-programacion__testu { grid-column: 1; grid-row: auto; }
  .xt-programacion__testu { margin-top: var(--space-2); font-size: 1rem; }
  .xt-percorridos__cabecera h2 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .xt-ruta { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
  .xt-ruta__numero { grid-column: 1; grid-row: 1; font-size: 2.3rem; }
  .xt-ruta__media { grid-column: 2; grid-row: 1; }
  .xt-ruta__diapositiva { aspect-ratio: 4 / 3; }
  .xt-ruta__cuerpu { grid-column: 1 / 3; grid-row: 2; max-width: none; }
  .xt-ruta__cuerpu h3 { font-size: clamp(2rem, 10vw, 3rem); }
  .xt-ruta__datos div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}

@media print {
  .xt-hero { background: none; color: var(--ink); border-bottom-color: var(--ink); }
  .xt-hero h1, .xt-hero__entradilla { color: var(--ink); }
  .xt-boton { display: none; }
  .xt-ruta { break-inside: avoid; }
}