/* =========================================================
   Clima en cifras — climaencifras.com
   Dirección: "The printed annual" · semilla 2132529810
   Paleta: carbón y primarios, invertida a papel
   Tipografía: Schibsted Grotesk

   El eje: todo arranca en el 42% del ancho. A la izquierda de esa línea
   van las notas al margen y las cifras; a la derecha, el texto. Es lo que
   sostiene la página entera, así que se respeta en todas las plantillas.
   ========================================================= */

:root {
  color-scheme: light dark;

  /* El reparto daba carbón de fondo. Lo invierto a papel por dos razones:
     el anuncio de Google se dibuja para fondo claro y sobre carbón queda
     como un parche, y un artículo de 2.000 palabras se lee mejor en papel.
     Los primarios del reparto se quedan tal cual, como campos sólidos. */
  --bg: #ffffff;
  --surface: #f1f1ef;
  --ink: #191919;
  --muted: #5a5a5a;

  --accent: #0c7866;
  --accent-ink: #ffffff;

  --campo-1: #d71e1e;  --campo-1-ink: #ffffff;
  --campo-2: #1e4bd7;  --campo-2-ink: #ffffff;
  --campo-3: #0c7866;  --campo-3-ink: #ffffff;
  --campo-4: #ffe927;  --campo-4-ink: #111111;

  /* el banner de consentimiento */
  --field: #191919;
  --field-ink: #ffffff;
  --field-muted: #a8a8a8;

  /* Siete escalones y ni uno más. El texto corrido nunca baja de 16px:
     aquí se viene a leer dos mil palabras, no a mirar un cartel. */
  --step-small: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --step-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 3.75rem);
  --step-cifra: clamp(2.5rem, 1.35rem + 3.9vw, 4.5rem);
  --step-display: clamp(2.75rem, 1.2rem + 6.6vw, 6.5rem);

  --margen: clamp(1.25rem, 4vw, 3rem);
  --hueco: clamp(4.5rem, 9vw, 11rem);
  --eje: 42%;

  --fuera: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --surface: #1e1e1e;
    --ink: #f4f4f4;
    --muted: #a6a6a6;
    --accent: #2fb79c;
    --accent-ink: #0d0d0d;
    --field: #f4f4f4;
    --field-ink: #121212;
    --field-muted: #5c5c5c;
  }
}
:root[data-theme="dark"] {
  --bg: #121212;
  --surface: #1e1e1e;
  --ink: #f4f4f4;
  --muted: #a6a6a6;
  --accent: #2fb79c;
  --accent-ink: #0d0d0d;
  --field: #f4f4f4;
  --field-ink: #121212;
  --field-muted: #5c5c5c;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-body);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

p { margin: 0; }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

::selection { background: var(--ink); color: var(--bg); }

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 0.9rem 1.2rem;
  z-index: 200;
}
.saltar:focus { left: 0; }

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

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(0.9rem, 2vw, 1.35rem) var(--margen);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
}

/* El nombre va en bloque sólido: es la marca y tiene que verse. */
.marca {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  padding: 0.42em 0.62em 0.5em;
  font-size: var(--step-body);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-decoration: none;
  transition: background-color .16s var(--fuera);
}
.marca:hover { background: var(--accent); color: var(--accent-ink); }

.cabecera nav {
  display: flex;
  gap: clamp(0.85rem, 2.2vw, 2rem);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cabecera nav a {
  font-size: var(--step-small);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .16s var(--fuera), color .16s var(--fuera);
}
.cabecera nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* En móvil el nombre se queda en su línea y el menú baja entero debajo,
   repartido: mejor eso que las dos columnas desiguales que salían antes. */
@media (max-width: 560px) {
  .cabecera { flex-wrap: wrap; gap: 0.7rem; padding-block: 0.75rem; }
  .marca { font-size: var(--step-small); white-space: nowrap; }
  .cabecera nav { flex: 1 1 100%; justify-content: space-between; gap: 0.5rem; }
}

/* ---------- el botón, uno solo en toda la web ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.9em 1.6em;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step-body);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .16s var(--fuera), transform .12s var(--fuera);
}
.boton:hover { background: var(--ink); color: var(--bg); }
.boton:active { transform: translateY(1px); }

/* ---------- portada: banda gráfica y declaración sobre el eje ---------- */

.portada__banda {
  margin: 0;
  height: clamp(210px, 40svh, 500px);
  overflow: hidden;
}
.portada__banda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.portada__texto {
  padding: clamp(2rem, 5vw, 4.5rem) var(--margen) clamp(2.5rem, 6vw, 5rem);
  display: grid;
  gap: clamp(1.1rem, 2.5vw, 1.8rem) clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
}

.portada__nota {
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--muted);
  max-width: 26ch;
  line-height: 1.45;
}

.portada__titulo {
  font-size: var(--step-display);
  line-height: 0.88;
  letter-spacing: -0.055em;
}
.portada__titulo .linea { display: block; overflow: hidden; padding-bottom: 0.04em; }
.portada__titulo .linea > span { display: block; }
.portada__titulo em { font-style: normal; color: var(--accent); }

.portada__pie {
  font-size: var(--step-lead);
  line-height: 1.3;
  max-width: 40ch;
  letter-spacing: -0.02em;
}

@media (min-width: 900px) {
  .portada__texto {
    grid-template-columns: var(--eje) 1fr;
    align-items: end;
  }
  .portada__nota { grid-column: 1; grid-row: 1 / span 3; align-self: end; }
  .portada__titulo { grid-column: 2; grid-row: 1; }
  .portada__pie { grid-column: 2; grid-row: 2; }
  .portada__accion { grid-column: 2; grid-row: 3; justify-self: start; }
}

/* ---------- anuncios ---------- */

.anuncio {
  background: var(--surface);
  display: grid;
  place-items: center;
  position: relative;
}
.anuncio > span {
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--muted);
}

.anuncio--linea {
  margin: clamp(2rem, 5vw, 3.5rem) var(--margen);
  min-height: 148px;
}

/* los intercalados a mitad de artículo van dentro de la columna de lectura */
.prosa > .anuncio--linea {
  margin: clamp(2.4rem, 5vw, 3.4rem) 0;
  min-height: 280px;
}

/* columna lateral del artículo, solo en escritorio */
.anuncio--rail {
  display: none;
  width: 100%;
  min-height: 600px;
}

/* Pie fijo en móvil, con cierre. Se esconde mientras el banner de
   consentimiento esté puesto: dos barras abajo a la vez es una tortura. */
.anuncio--ancla {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  min-height: 64px;
  background: var(--surface);
}
@media (max-width: 1099px) {
  .anuncio--ancla { display: grid; }
  body.con-ancla { padding-bottom: 64px; }
}
body:has(#cec-banner) .anuncio--ancla { display: none; }

.anuncio__cerrar {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  cursor: pointer;
}

/* ---------- mosaico: fotografía y dos tejas de cifra ---------- */

.mosaico { margin-top: var(--hueco); }

.mosaico__titulo {
  font-size: var(--step-head);
  padding: 0 var(--margen);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  max-width: 16ch;
}

.mosaico__nota {
  padding: 0 var(--margen);
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
  font-size: var(--step-small);
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.55;
}

.mosaico__rejilla { display: grid; grid-template-columns: 1fr; }

.mosaico__foto { margin: 0; }
.mosaico__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.teja {
  padding: clamp(1.5rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  min-height: clamp(215px, 30vw, 330px);
}
.teja--a { background: var(--campo-2); color: var(--campo-2-ink); }
.teja--b { background: var(--campo-4); color: var(--campo-4-ink); }

.teja__cifra {
  font-size: var(--step-cifra);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.86;
}
.teja__pie {
  margin-top: 0.9rem;
  font-size: var(--step-small);
  font-weight: 500;
  line-height: 1.45;
  max-width: 28ch;
}

@media (min-width: 820px) {
  .mosaico__rejilla { grid-template-columns: 2fr 1fr; }
  .mosaico__foto { grid-row: 1 / span 2; }
  .mosaico__foto img { aspect-ratio: auto; height: 100%; }
}

/* ---------- las guías: fotografía fija y lista activa ---------- */

.guias { margin-top: var(--hueco); padding: 0 var(--margen); }

.guias__titulo {
  font-size: var(--step-head);
  max-width: 18ch;
  margin-bottom: clamp(1rem, 2.5vw, 1.8rem);
}

.guias__entrada {
  font-size: var(--step-lead);
  line-height: 1.3;
  max-width: 46ch;
  letter-spacing: -0.02em;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.guias__entrada a { color: var(--accent); text-underline-offset: 4px; }

.guias__cuerpo { display: grid; gap: clamp(1.5rem, 3vw, 3.5rem); }

.guias__escena { margin: 0; }
.guias__pila { display: grid; }
.guias__escena img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .3s var(--fuera);
}
.guias__escena img.esta { opacity: 1; }

.guias__lista { list-style: none; margin: 0; padding: 0; }

.guias__fila {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  padding: clamp(0.9rem, 2vw, 1.1rem) 0;
  color: var(--muted);
  transition: color .2s var(--fuera);
}
.guias__fila:hover,
.guias__fila:focus-visible,
.guias__fila.esta { color: var(--ink); }

.guias__nombre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: var(--step-lead);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.guias__cuenta {
  flex: 0 0 auto;
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.guias__texto {
  margin-top: 0.55rem;
  font-size: var(--step-small);
  line-height: 1.5;
  max-width: 40ch;
}

@media (min-width: 900px) {
  .guias__cuerpo { grid-template-columns: 5fr 7fr; align-items: start; }
  .guias__escena { position: sticky; top: 12vh; }
  .guias__escena img { aspect-ratio: 4 / 5; }
}

/* ---------- la calculadora: lo que escribes y lo que contesta ---------- */

.calculo {
  margin-top: var(--hueco);
  padding: 0 var(--margen);
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.calculo__titulo { font-size: var(--step-head); max-width: 16ch; }

.calculo__texto p {
  margin-top: 1.1rem;
  font-size: var(--step-small);
  color: var(--muted);
  line-height: 1.55;
  max-width: 44ch;
}

.calculo__panel {
  background: var(--surface);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  max-width: 38rem;
}

.campo { display: grid; gap: 0.45rem; }
.campo label { font-size: var(--step-small); font-weight: 600; letter-spacing: -0.01em; }
.campo__fila { display: flex; align-items: center; gap: 0.6rem; }
.campo__unidad { font-size: var(--step-small); font-weight: 600; color: var(--muted); }

.campo input,
.campo select {
  font: inherit;
  font-size: var(--step-body);
  font-weight: 500;
  width: 100%;
  min-height: 52px;
  padding: 0.6em 0.7em;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
}
.campo input:focus-visible,
.campo select:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.campo input { max-width: 9rem; }

.resultado {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 0.3rem;
}
.resultado > div {
  background: var(--campo-3);
  color: var(--campo-3-ink);
  padding: clamp(1rem, 2.5vw, 1.4rem);
}
.resultado > div + div { background: var(--ink); color: var(--bg); }

.resultado__valor {
  display: block;
  font-size: var(--step-h2);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.resultado__pie {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--step-small);
  font-weight: 500;
  line-height: 1.35;
}
.resultado__aviso {
  font-size: var(--step-small);
  color: var(--muted);
  line-height: 1.55;
  max-width: 46ch;
}

@media (min-width: 900px) {
  .calculo { grid-template-columns: var(--eje) 1fr; align-items: start; }
}

/* ---------- el contraste: dos casos, dos campos ---------- */

.contraste { margin-top: var(--hueco); }

.contraste__titulo {
  font-size: var(--step-head);
  padding: 0 var(--margen);
  max-width: 20ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.contraste__par { display: grid; grid-template-columns: 1fr; }

.contraste__caso {
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  min-height: clamp(255px, 28vw, 360px);
}
.contraste__caso:first-child { background: var(--campo-1); color: var(--campo-1-ink); }
.contraste__caso:last-child { background: var(--ink); color: var(--bg); }

.contraste__cifra {
  font-size: var(--step-cifra);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.86;
}
.contraste__caso p + p {
  margin-top: 1rem;
  font-size: var(--step-small);
  line-height: 1.55;
  max-width: 44ch;
}

@media (min-width: 820px) {
  .contraste__par { grid-template-columns: 1fr 1fr; }
}

/* ---------- quiénes: foto ancha, campo de color y datos ---------- */

.quienes { margin-top: var(--hueco); padding: 0 var(--margen); }

.quienes__titulo { font-size: var(--step-head); max-width: 18ch; }

.quienes__entrada {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  font-size: var(--step-lead);
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 50ch;
}

.quienes__mosaico {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: start;
}

.quienes__foto { margin: 0; position: relative; }
.quienes__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.quienes__nota {
  background: var(--bg);
  color: var(--ink);
  padding: 1.1rem;
  font-size: var(--step-small);
  line-height: 1.5;
}

.quienes__campo {
  background: var(--campo-3);
  color: var(--campo-3-ink);
  padding: clamp(1.3rem, 3vw, 1.8rem);
}
.quienes__campo svg { width: 100%; height: auto; display: block; }

.quienes__datos {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.quienes__dato strong {
  display: block;
  font-size: var(--step-h2);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}
.quienes__dato span {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--step-small);
  line-height: 1.35;
}

@media (min-width: 900px) {
  .quienes__mosaico { grid-template-columns: 8fr 4fr; }
  .quienes__nota {
    position: absolute;
    top: 0;
    right: 0;
    width: 19rem;
    max-width: 62%;
  }
}

/* ---------- cierre: tira de fotos y campo ---------- */

.cierre { margin-top: var(--hueco); }

.cierre__tira { display: grid; grid-template-columns: repeat(3, 1fr); }
.cierre__tira img {
  width: 100%;
  height: clamp(130px, 26svh, 290px);
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.cierre__campo {
  background: var(--campo-2);
  color: var(--campo-2-ink);
  padding: clamp(2rem, 5vw, 3.5rem) var(--margen);
  min-height: 36svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cierre__frase {
  font-size: var(--step-lead);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.035em;
  max-width: 28ch;
}
.cierre__frase a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}
.cierre__frase a:hover { background: var(--campo-2-ink); color: var(--campo-2); }
.cierre__pie {
  margin-top: 1.8rem;
  font-size: var(--step-small);
  line-height: 1.55;
  max-width: 42ch;
}

/* ---------- el pie: el correo es el titular ---------- */

.pie {
  margin-top: var(--hueco);
  background: var(--ink);
  color: var(--bg);
  padding: clamp(2rem, 4vw, 3rem) var(--margen) clamp(1.5rem, 3vw, 2.5rem);
  min-height: 78svh;
  display: flex;
  flex-direction: column;
}

.pie__alto { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; }
.pie__alto h2 {
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  margin-bottom: 0.7rem;
}
.pie__alto ul { list-style: none; margin: 0; padding: 0; }
.pie__alto li + li { margin-top: 0.42rem; }
.pie__alto a { font-size: var(--step-small); text-decoration: none; }
.pie__alto a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pie__correo { margin-top: auto; padding-top: clamp(2.5rem, 8vw, 7rem); }
.pie__correo a {
  display: inline-block;
  font-size: var(--step-cifra);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pie__correo a:hover { color: var(--campo-4); }

.pie__meta {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 0.7rem;
  font-size: var(--step-small);
  line-height: 1.55;
}
.pie__meta p { max-width: 68ch; }

@media (min-width: 760px) {
  .pie__alto {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: clamp(2rem, 6vw, 6rem);
  }
  .pie__meta { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------- la barra de avance de lectura ---------- */

.avance {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 80;
  pointer-events: none;
}
.avance i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- entrada de las secciones ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Entra cada pieza por su cuenta, no el bloque entero de golpe:
     el título, luego la entradilla, luego cada teja o cada fila. */
  .asoma > *,
  .asoma .mosaico__rejilla > *,
  .asoma .contraste__par > *,
  .asoma .cierre__tira > *,
  .asoma .guias__lista > li,
  .asoma .quienes__datos > li {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s var(--fuera), transform .55s var(--fuera);
  }
  .asoma.dentro > *,
  .asoma.dentro .mosaico__rejilla > *,
  .asoma.dentro .contraste__par > *,
  .asoma.dentro .cierre__tira > *,
  .asoma.dentro .guias__lista > li,
  .asoma.dentro .quienes__datos > li { opacity: 1; transform: none; }

  .asoma.dentro > *:nth-child(2),
  .asoma.dentro .mosaico__rejilla > *:nth-child(2),
  .asoma.dentro .contraste__par > *:nth-child(2),
  .asoma.dentro .cierre__tira > *:nth-child(2),
  .asoma.dentro .guias__lista > li:nth-child(2),
  .asoma.dentro .quienes__datos > li:nth-child(2) { transition-delay: .07s; }

  .asoma.dentro > *:nth-child(3),
  .asoma.dentro .mosaico__rejilla > *:nth-child(3),
  .asoma.dentro .cierre__tira > *:nth-child(3),
  .asoma.dentro .guias__lista > li:nth-child(3),
  .asoma.dentro .quienes__datos > li:nth-child(3) { transition-delay: .14s; }

  .asoma.dentro > *:nth-child(4),
  .asoma.dentro .guias__lista > li:nth-child(4),
  .asoma.dentro .quienes__datos > li:nth-child(4) { transition-delay: .21s; }

  .asoma.dentro .guias__lista > li:nth-child(5) { transition-delay: .28s; }
  .asoma.dentro .guias__lista > li:nth-child(6) { transition-delay: .35s; }

  .portada__titulo .linea > span {
    transform: translateY(105%);
    transition: transform .9s var(--fuera);
  }
  .portada.listo .portada__titulo .linea > span { transform: none; }
  .portada.listo .portada__titulo .linea:nth-child(2) > span { transition-delay: .11s; }

  .portada__nota,
  .portada__pie,
  .portada__accion { opacity: 0; transition: opacity .6s var(--fuera) .5s; }
  .portada.listo .portada__nota,
  .portada.listo .portada__pie,
  .portada.listo .portada__accion { opacity: 1; }
}


/* =========================================================
   Artículo, archivo de categoría y prosa.
   Se concatena con la hoja de la portada al preparar el contenido.

   Mismo eje que la portada: el 42%. A la izquierda, el índice de la
   guía y la nota de comprobación; a la derecha, el texto. La columna
   de lectura cae así en unos 60 caracteres, que es lo que se quiere.
   ========================================================= */

/* La banda de cabecera, igual que en la portada */
.banda {
  margin: 0;
  height: clamp(170px, 32svh, 400px);
  overflow: hidden;
}
.banda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.articulo,
.archivo {
  padding: clamp(2rem, 5vw, 3.5rem) var(--margen) 0;
  max-width: 90rem;
  margin-inline: auto;
}

/* ---------- cabecera del artículo ---------- */

.articulo__masthead {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.4rem) clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
}

.miga {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--muted);
}
.miga a { color: var(--muted); text-decoration: none; }
.miga a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.articulo h1,
.archivo h1 {
  font-size: var(--step-head);
  line-height: 0.92;
  letter-spacing: -0.05em;
  max-width: 22ch;
}

.articulo__fecha {
  font-size: var(--step-small);
  color: var(--muted);
  line-height: 1.5;
  max-width: 34ch;
}

.archivo__entrada {
  margin-top: 1.2rem;
  font-size: var(--step-lead);
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 42ch;
}

@media (min-width: 1100px) {
  .articulo__masthead {
    grid-template-columns: var(--eje) 1fr;
    align-items: end;
  }
  .miga { grid-column: 1; grid-row: 1; }
  .articulo__fecha { grid-column: 1; grid-row: 2; }
  .articulo h1 { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- cuerpo: índice y anuncio al margen, texto sobre el eje ---------- */

.articulo__cuerpo { margin-top: clamp(1.8rem, 4vw, 3rem); }

.rail { margin-bottom: clamp(1.5rem, 3vw, 2rem); }

@media (min-width: 1100px) {
  .articulo__cuerpo {
    display: grid;
    grid-template-columns: var(--eje) 1fr;
    gap: 0 clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }
  /* dentro de la rejilla manda la columna, no el tope de caracteres */
  .articulo__cuerpo > .prosa,
  .articulo__cuerpo > .prosa > * { max-width: none; }
  .articulo__cuerpo > .prosa { grid-column: 2; grid-row: 1; }
  .rail {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: clamp(5rem, 9vh, 7rem);
    margin-bottom: 0;
    max-width: 22rem;
  }
  .anuncio--rail { display: grid; min-height: 600px; }
}

/* ---------- el índice ---------- */

.indice {
  background: var(--surface);
  padding: clamp(1rem, 2.2vw, 1.4rem);
}

.indice summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--step-small);
  font-weight: 600;
}
.indice summary::-webkit-details-marker { display: none; }
.indice__titulo { letter-spacing: -0.01em; }
.indice__cuenta { color: var(--muted); }

.indice ol {
  list-style: none;
  margin: clamp(0.9rem, 2vw, 1.1rem) 0 0;
  padding: 0;
}
.indice li + li { margin-top: 0.5rem; }

.indice a {
  display: block;
  font-size: var(--step-small);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  padding-left: 0.7rem;
  border-left: 2px solid transparent;
  transition: color .16s var(--fuera), border-color .16s var(--fuera);
}
.indice a:hover { color: var(--accent); border-left-color: var(--accent); }
.indice a.esta {
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
}

@media (min-width: 1100px) {
  .indice summary { cursor: default; }
  .indice__cuenta { display: none; }
}

/* ---------- la prosa ---------- */

.prosa { max-width: 70ch; }
.prosa > * { max-width: 68ch; }
.prosa > .anuncio--linea,
.prosa > table,
.prosa > figure { max-width: none; }

.prosa p,
.prosa li {
  font-size: var(--step-body);
  line-height: 1.62;
  color: var(--ink);
}

.prosa p { margin: 0 0 1.25em; }

.prosa h2 {
  font-size: var(--step-h2);
  line-height: 1;
  letter-spacing: -0.045em;
  margin: clamp(2.6rem, 5.5vw, 3.8rem) 0 1rem;
  max-width: 24ch;
  scroll-margin-top: 6rem;
}

.prosa h3 {
  font-size: var(--step-lead);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin: clamp(1.9rem, 4vw, 2.6rem) 0 0.7rem;
  max-width: 30ch;
}

.prosa h4 {
  font-size: var(--step-body);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 1.7rem 0 0.5rem;
}

.prosa ul,
.prosa ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.prosa li { margin-bottom: 0.5em; }
.prosa li::marker { color: var(--muted); }

.prosa strong { font-weight: 600; }

.prosa a { color: var(--accent); text-underline-offset: 3px; }

/* citas: afirmaciones, no titulares */
.prosa blockquote {
  margin: clamp(1.8rem, 4vw, 2.4rem) 0;
  padding: clamp(1.2rem, 3vw, 1.7rem);
  background: var(--surface);
  font-size: var(--step-lead);
  line-height: 1.35;
  letter-spacing: -0.02em;
  max-width: 54ch;
}
.prosa blockquote p { font-size: inherit; line-height: inherit; margin: 0; }
.prosa blockquote p + p { margin-top: 0.6em; }

/* tablas: aquí sí hay líneas, es su convención */
.prosa table {
  width: 100%;
  border-collapse: collapse;
  margin: clamp(1.8rem, 4vw, 2.4rem) 0;
  font-size: var(--step-small);
}
.prosa thead th {
  text-align: left;
  font-weight: 600;
  padding: 0.75rem 0.9rem;
  background: var(--ink);
  color: var(--bg);
  vertical-align: bottom;
}
.prosa tbody td {
  padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--surface);
  vertical-align: top;
}
.prosa tbody tr:nth-child(even) { background: var(--surface); }

@media (max-width: 760px) {
  .prosa table { display: block; overflow-x: auto; white-space: nowrap; }
  .prosa table td, .prosa table th { white-space: normal; min-width: 9rem; }
}

.prosa hr { border: 0; height: 0; margin: clamp(2.5rem, 6vw, 3.5rem) 0; }

.prosa img { margin: clamp(1.8rem, 4vw, 2.4rem) 0; width: 100%; }

.prosa code {
  font-size: 0.92em;
  background: var(--surface);
  padding: 0.15em 0.4em;
}

/* las páginas legales van a una sola columna, sin índice ni lateral */
.prosa--sola { margin-top: clamp(1.8rem, 4vw, 3rem); }

/* ---------- hermanos de categoría y listas de archivo ---------- */

.hermanos {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.hermanos h2 {
  font-size: var(--step-h2);
  letter-spacing: -0.045em;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}

.hermanos ul,
.archivo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

@media (min-width: 860px) {
  .hermanos ul,
  .archivo__lista {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 3.5vw, 3rem) clamp(2.5rem, 5vw, 4.5rem);
  }
}

.archivo__lista { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.hermanos a,
.archivo__lista a {
  display: inline-block;
  font-size: var(--step-lead);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-decoration: none;
}
.hermanos a:hover,
.archivo__lista a:hover { color: var(--accent); }

.hermanos p,
.archivo__lista p {
  margin: 0.6rem 0 0;
  color: var(--ink);
  max-width: 46ch;
  font-size: var(--step-small);
  line-height: 1.5;
}

/* ---------- lo que se mueve en el artículo ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* La fotografía de cabecera se asienta al entrar: es el único
     movimiento grande de una página que está hecha para leerse. */
  .asoma.banda > img {
    transform: scale(1.07);
    transition: opacity .7s var(--fuera), transform 1.4s var(--fuera);
  }
  .asoma.banda.dentro > img { opacity: 1; transform: scale(1); }

  .asoma .indice li,
  .asoma .hermanos li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .45s var(--fuera), transform .45s var(--fuera);
  }
  .asoma.dentro .indice li,
  .asoma.dentro .hermanos li { opacity: 1; transform: none; }
  .asoma.dentro .indice li:nth-child(2) { transition-delay: .04s; }
  .asoma.dentro .indice li:nth-child(3) { transition-delay: .08s; }
  .asoma.dentro .indice li:nth-child(4) { transition-delay: .12s; }
  .asoma.dentro .indice li:nth-child(5) { transition-delay: .16s; }
  .asoma.dentro .indice li:nth-child(6) { transition-delay: .2s; }
  .asoma.dentro .hermanos li:nth-child(2) { transition-delay: .07s; }
  .asoma.dentro .hermanos li:nth-child(3) { transition-delay: .14s; }
  .asoma.dentro .hermanos li:nth-child(4) { transition-delay: .21s; }

  /* el texto corrido no se anima: estorba al leer */
  .articulo__cuerpo.asoma > .prosa { opacity: 1; transform: none; }
}

/* ---------- el pie se despega del contenido ---------- */

.articulo + .pie,
.archivo + .pie { margin-top: var(--hueco); }


/* =========================================================
   Banner de consentimiento

   Una sola barra baja: cuanto menos tape, mejor. El texto en una o dos
   líneas y los botones a la derecha, del mismo tamaño y con el mismo
   número de clics, que rechazar tiene que costar lo mismo que aceptar.
   ========================================================= */

#cec-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--field);
  color: var(--field-ink);
  padding: 0.9rem var(--margen);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem clamp(1rem, 3vw, 2.5rem);
}

.cec-banner__texto { flex: 1 1 30rem; }

.cec-banner__texto p {
  margin: 0;
  font-size: var(--step-small);
  line-height: 1.4;
  color: var(--field-ink);
  max-width: 86ch;
}
.cec-banner__texto a { color: var(--field-ink); text-underline-offset: 3px; }

.cec-banner__botones {
  display: flex;
  gap: 0.6rem;
  flex: 0 0 auto;
}

#cec-banner button {
  font: inherit;
  font-size: var(--step-small);
  font-weight: 600;
  padding: 0.7em 1.4em;
  min-height: 44px;
  border: 2px solid var(--field-ink);
  border-radius: 0;
  background: transparent;
  color: var(--field-ink);
  cursor: pointer;
  transition: background-color .16s var(--fuera), color .16s var(--fuera);
}
#cec-banner button:hover {
  background: var(--field-ink);
  color: var(--field);
}

#cec-banner .cec-banner__si {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
#cec-banner .cec-banner__si:hover {
  background: var(--field-ink);
  border-color: var(--field-ink);
  color: var(--field);
}

@media (max-width: 620px) {
  .cec-banner__botones { flex: 1 1 100%; }
  #cec-banner button { flex: 1 1 0; }
}

/* Deja hueco para que el banner no tape el pie mientras está puesto */
body:has(#cec-banner) { padding-bottom: 8rem; }
@media (min-width: 900px) {
  body:has(#cec-banner) { padding-bottom: 5rem; }
}