/* ==========================================================================
   judgeityourself.eu — Nyirád 2026
   Rediseño: la sala de dirección de carrera, no el periodismo.
   Hoja única, sin dependencias, sin preprocesador.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tipografías — autoalojadas, cero peticiones a terceros
   Archivo       rótulos. Eje de anchura fijado en 125%: el "Expanded" del
                 brief, servido como instancia estática (34 kB en vez de 88).
   Newsreader    cuerpo. Sobre Literata por carácter editorial y por tener
                 cursiva verdadera, que la cita de la Decisión necesita.
                 Eje óptico fijado en 18, que es el cuerpo de lectura.
   IBM Plex Mono datos: dorsales, horas, puntos, artículos, metadatos.
   Solo latin y latin-ext: español, inglés y los nombres húngaros, polacos,
   letones y checos de las clasificaciones. 246 kB en total.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:125%;font-display:swap;src:url('fonts/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:125%;font-display:swap;src:url('fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/newsreader-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/newsreader-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/newsreader-italic-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/newsreader-italic-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/plex-mono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/plex-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --------------------------------------------------------------------------
   1. Tokens

   El color significa de quién es cada cosa, no cuánto drama tiene:
     308 → negro, porque su sanción ES la bandera negra
     301 → óxido, el color de la tierra de Nyirád a la que lo echaron
     302 → gris, deliberadamente neutro: ningún color acusatorio para quien
           se benefició, porque eso sería interpretación

   No hay rojo señal. En automovilismo el rojo es la bandera que detiene la
   sesión, y aquí no se detuvo nada: usarlo etiquetaría el caso con la
   palabra equivocada en el vocabulario del propio deporte.

   Los tres valores se distinguen también en escala de grises, así que la
   información nunca depende solo del color.
   -------------------------------------------------------------------------- */
:root{
  color-scheme: dark;

  --base:    #0E0E10;   /* fondo */
  --surface: #17171A;   /* superficies elevadas: tarjetas, cajas, cita */
  --ink:     #E8E6E3;   /* texto principal   — 15,8:1 sobre --base */
  --grey:    #9A9894;   /* texto secundario  —  7,4:1 sobre --base */
  --rule:    #2C2C31;   /* filetes y bordes de celda */

  /* El óxido sube dos pasos respecto al diseño claro: #A8452A sobre #0E0E10
     daba 3,20:1 y no llegaba al AA. Este da 5,25:1. */
  --oxide:   #CE6B4A;   /* coche 301 y única nota cromática */

  /* La bandera negra sigue siendo negra: sobre fondo oscuro no puede ser color
     de TEXTO, así que vive en la placa y en la trama, no en las cifras. */
  --flag:    #000000;
  --hatch:   rgba(255,255,255,.045);

  /* Blanco literal, y a propósito: la placa de dorsal es una chapa blanca
     atornillada al coche, y los facsímiles son papel escaneado. Ninguno de los
     dos se invierte ni se filtra. */
  --paper:   #FFFFFF;

  --line:    #7E838C;   /* líneas neutras de gráfico (302, líder) */

  /* La placa de dorsal es una chapa blanca con el número en negro atornillada
     al coche: NO sigue al tema. Si siguiera, al invertir la página se quedaría
     blanco sobre blanco. El óxido sobre chapa blanca usa el tono oscuro, que
     ahí sí da 5,9:1. */
  --plate-ink:  #14161A;
  --plate-oxide:#A8452A;

  --disp: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --gut:     clamp(20px, 4vw, 56px);
  --rail:    clamp(96px, 11vw, 148px);
  --measure: 68ch;
  --step:    8px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

img, video{ max-width:100% }

a{ color:var(--oxide); text-underline-offset:3px; text-decoration-thickness:1px }
a:hover{ color:var(--ink) }
:focus-visible{ outline:2px solid var(--oxide); outline-offset:3px }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--base);
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 18px;
}
.skip:focus{ left:0 }

.wrap{ max-width:1240px; margin:0 auto; padding:0 var(--gut) }
.prose{ max-width:var(--measure) }

/* tipografía: rótulo ancho, cuerpo serif, datos mono */
h1, h2, h3{
  font-family:var(--disp); font-stretch:125%;
  margin:0; text-wrap:balance; letter-spacing:-.015em;
}
h1{ font-weight:700; font-size:clamp(32px, 4.6vw, 58px); line-height:1.02 }
h2{ font-weight:700; font-size:clamp(25px, 2.9vw, 38px); line-height:1.1; max-width:22ch; margin-bottom:calc(var(--step)*3) }
h3{ font-weight:600; font-size:clamp(18px, 1.4vw, 21px); line-height:1.25; margin:calc(var(--step)*5) 0 var(--step) }

p{ margin:0 0 calc(var(--step)*2.5) }
p:last-child{ margin-bottom:0 }

.prose, ul.clean li{
  text-align:justify; hyphens:auto; -webkit-hyphens:auto; text-wrap:pretty;
}

.lede{ font-size:clamp(19px, 1.7vw, 23px); line-height:1.5; max-width:52ch; color:var(--ink) }
.note{ font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--grey); max-width:74ch }

/* etiqueta mono: el idioma de todo dato y todo metadato */
.label{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
  margin:0;
}

/* --------------------------------------------------------------------------
   3. La placa de dorsal — elemento firma

   En este deporte la identidad de un piloto es un rectángulo blanco con un
   número negro atornillado al coche. Cada mención se renderiza así, en tablas,
   matriz, gráficos y esquemas. Es el sistema de identidad del propio deporte,
   es neutro respecto al idioma, y la bandera negra no es un elemento aparte:
   es un ESTADO de la placa (.plate--flag).
   -------------------------------------------------------------------------- */
.plate{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:3.4em; padding:.16em .42em;
  background:var(--paper); color:var(--plate-ink);
  border:1.5px solid var(--ink);
  font-family:var(--mono); font-weight:600; font-size:.92em; line-height:1.25;
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
  vertical-align:baseline;
}
/* la placa negra necesita borde claro o se funde con el fondo */
.plate--flag{ background:var(--flag); color:var(--paper); border-color:var(--ink) }
.plate--oxide{ border-color:var(--plate-oxide); color:var(--plate-oxide) }
.plate--lg{ font-size:1.25em; border-width:2px }

/* nombre junto a la placa; se puede ocultar desde el fichero de datos */
.driver{ display:inline-flex; align-items:baseline; gap:.55em; flex-wrap:wrap }
.driver .n{ font-family:var(--body) }

/* --------------------------------------------------------------------------
   4. Retícula de impreso — el esqueleto de la página

   La Decisión nº 07 es un formulario: columna estrecha de celdas gris con la
   etiqueta, columna ancha con el valor. Esa es la estructura de la página.
   -------------------------------------------------------------------------- */
.sec{ border-top:1px solid var(--rule); padding:calc(var(--step)*8) 0 }
.sec-grid{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:0 calc(var(--step)*4);
}
.rail{ grid-column:1 }
.rail-n{
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.16em; color:var(--ink);
  padding-top:.35em;
  display:block;
}
.rail-t{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey);
  margin:var(--step) 0 0; display:block; max-width:14ch;
}
.col{ grid-column:2; min-width:0 }

/* --------------------------------------------------------------------------
   5. Indicador persistente hechos / opinión
   Filete fijo a la izquierda que acompaña el scroll. En móvil, barra bajo la
   cabecera. Nadie debe leer un párrafo de la 06 sin saber dónde está, ni
   aunque entre por un enlace directo a un ancla.
   -------------------------------------------------------------------------- */
.status{
  position:fixed; left:0; top:0; bottom:0; width:34px; z-index:40;
  display:flex; align-items:center; justify-content:center;
  border-right:1px solid var(--rule);
  background:var(--base);
  transition:background .35s ease, border-color .35s ease;
}
.status-t{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--grey);
  writing-mode:vertical-rl; transform:rotate(180deg);
  white-space:nowrap;
  transition:color .35s ease;
}
.status[data-state="opinion"]{ background:var(--oxide); border-color:var(--oxide) }
.status[data-state="opinion"] .status-t{ color:var(--paper) }

/* rótulos de entrada y salida dentro del propio flujo de la 06 */
.gate{
  display:flex; align-items:center; gap:calc(var(--step)*1.5);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--oxide);
  margin:calc(var(--step)*3) 0;
}
.gate::before, .gate::after{ content:""; height:1px; background:var(--oxide); flex:1 }
.gate::before{ flex:0 0 calc(var(--step)*4) }

/* la 06 lleva fondo propio a todo el ancho */
.band-opinion{ background:var(--surface); border-top:2px solid var(--oxide) }

/* --------------------------------------------------------------------------
   6. Bloque de asimetría −5 / +12 — la tesis del sitio
   Reutilizable: hero, sección 03 y cierre de la 06. Tiene que funcionar
   recortado y fuera de contexto.
   -------------------------------------------------------------------------- */
.asym{
  display:grid; grid-template-columns:1fr 1fr;
  border:1.5px solid var(--ink);
  background:var(--surface);
  margin:calc(var(--step)*4) 0;
}
.asym-half{ padding:calc(var(--step)*3) calc(var(--step)*3) calc(var(--step)*3.5) }
.asym-half + .asym-half{ border-left:1.5px solid var(--ink) }
.asym-fig{
  font-family:var(--disp); font-stretch:125%; font-weight:700;
  font-size:clamp(56px, 8.5vw, 116px); line-height:.88; letter-spacing:-.04em;
  margin:0; font-variant-numeric:tabular-nums;
}
/* sobre oscuro el negro no puede ser color de texto: la bandera la lleva la
   trama del fondo, y la cifra va en el color de texto principal */
.asym-half--sanctioned .asym-fig{ color:var(--ink) }
.asym-half--affected  .asym-fig{ color:var(--oxide) }
.asym-lab{
  font-family:var(--mono); font-size:11.5px; line-height:1.6;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grey);
  margin:calc(var(--step)*2) 0 0; max-width:26ch;
}
.asym-who{ display:block; margin-bottom:var(--step) }

/* campo de bandera negra detrás del bloque: la sanción, como textura */
.asym-half--sanctioned{
  background:
    repeating-linear-gradient(45deg,
      var(--hatch) 0 10px, transparent 10px 20px);
}

/* --------------------------------------------------------------------------
   7. Resumen "en 30 segundos"
   -------------------------------------------------------------------------- */
.brief30{ border-top:1px solid var(--rule); padding-top:calc(var(--step)*3); margin-top:calc(var(--step)*5) }
.brief30 ol{ list-style:none; margin:0 0 calc(var(--step)*3); padding:0; max-width:62ch }
.brief30 li{
  display:grid; grid-template-columns:2.6em 1fr; gap:calc(var(--step)*1.5);
  padding:var(--step) 0; border-bottom:1px solid var(--rule);
}
.brief30 li span:first-child{
  font-family:var(--mono); font-size:11px; color:var(--grey); padding-top:.35em;
}
.jump{ display:flex; gap:calc(var(--step)*2); flex-wrap:wrap }
.jump a{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none;
  border:1px solid var(--ink); color:var(--ink);
  padding:calc(var(--step)*1.25) calc(var(--step)*2);
}
.jump a:hover{ background:var(--ink); color:var(--base) }

/* --------------------------------------------------------------------------
   8. Tablas — y su colapso a fichas por debajo de 640
   -------------------------------------------------------------------------- */
.tbl{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:14px; margin:calc(var(--step)*3) 0 0 }
.tbl caption{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.tbl th{
  text-align:left; font-weight:400; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey);
  padding:0 calc(var(--step)*2) var(--step) 0;
  border-bottom:1.5px solid var(--ink); white-space:nowrap;
}
.tbl td{ padding:calc(var(--step)*1.75) calc(var(--step)*2) calc(var(--step)*1.75) 0; border-bottom:1px solid var(--rule); vertical-align:baseline }
.tbl .num{ color:var(--grey) }

/* dos columnas enfrentadas: sancionado / perjudicado */
.facing{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); margin:calc(var(--step)*4) 0 }
.facing-col{ padding:calc(var(--step)*3) }
.facing-col + .facing-col{ border-left:1px solid var(--rule) }
.facing-hd{ display:flex; align-items:center; gap:var(--step); margin-bottom:calc(var(--step)*2.5) }
.facing dl{ margin:0; display:grid; gap:calc(var(--step)*2) }
.facing dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey) }
.facing dd{ margin:.3em 0 0; font-family:var(--mono); font-size:14px }


/* --------------------------------------------------------------------------
   10. Gráficos SVG (slope chart, esquema de campos)
   -------------------------------------------------------------------------- */
.fig{ margin:calc(var(--step)*4) 0 0 }
.fig svg{ display:block; width:100%; height:auto; overflow:visible }
.fig + .note{ margin-top:calc(var(--step)*2) }
.fig figcaption{ font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--grey); margin-top:calc(var(--step)*2); max-width:74ch }

/* --------------------------------------------------------------------------
   11. Panel de advertencia — sección 05
   Sostiene la honestidad de la página: caja propia, no una lista más.
   -------------------------------------------------------------------------- */
.caution{
  border:1.5px solid var(--ink);
  background:var(--surface);
  padding:calc(var(--step)*4);
  margin:calc(var(--step)*2) 0 0;
}
.caution-hd{
  display:flex; align-items:center; gap:calc(var(--step)*1.5);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink);
  border-bottom:1.5px solid var(--ink);
  padding-bottom:calc(var(--step)*2); margin-bottom:calc(var(--step)*3);
}

ul.clean{ list-style:none; padding:0; margin:0 0 calc(var(--step)*3); max-width:var(--measure) }
ul.clean li{ position:relative; padding-left:calc(var(--step)*3.5); margin-bottom:calc(var(--step)*2) }
ul.clean li::before{ content:""; position:absolute; left:0; top:.62em; width:10px; height:10px; background:var(--ink) }

.closing{
  font-family:var(--disp); font-stretch:125%; font-weight:600;
  font-size:clamp(20px, 2.1vw, 27px); line-height:1.22;
  max-width:32ch; margin:calc(var(--step)*4) 0 0;
}

/* --------------------------------------------------------------------------
   12. Vídeo — un único componente para los tres clips
   -------------------------------------------------------------------------- */
.clip{ margin:calc(var(--step)*4) 0 0 }
.clip-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--step); flex-wrap:wrap; margin-bottom:var(--step) }
.clip-box{ background:var(--ink); border:1px solid var(--ink) }
.clip-box video{ display:block; width:100%; height:auto }
.clip figcaption{ font-family:var(--mono); font-size:12px; line-height:1.65; color:var(--grey); margin-top:calc(var(--step)*1.5); max-width:74ch }

/* --------------------------------------------------------------------------
   13. Fichas de documento — sección 08
   -------------------------------------------------------------------------- */
.docs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:calc(var(--step)*2); margin-top:calc(var(--step)*3) }
.doc-card{
  display:block; text-decoration:none; color:var(--ink);
  border:1px solid var(--ink); background:var(--surface);
  padding:calc(var(--step)*2.5);
  transition:background .16s ease;
}
.doc-card:hover{ background:var(--surface); color:var(--ink) }
.doc-card .ico{ display:block; width:26px; height:32px; margin-bottom:calc(var(--step)*2) }
.doc-card .t{ display:block; font-family:var(--disp); font-stretch:125%; font-weight:600; font-size:15px; line-height:1.25; margin-bottom:var(--step) }
.doc-card .m{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey); line-height:1.7 }

/* --------------------------------------------------------------------------
   14. Fichas numeradas — preguntas abiertas
   -------------------------------------------------------------------------- */
.qs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:calc(var(--step)*2); margin:calc(var(--step)*3) 0 }
.q{ border-top:1.5px solid var(--ink); padding-top:calc(var(--step)*2) }
.q .n{ font-family:var(--mono); font-size:11px; color:var(--grey); display:block; margin-bottom:var(--step) }
.q p{ margin:0; font-size:16.5px; line-height:1.5 }

/* --------------------------------------------------------------------------
   15. Cabecera y pie
   -------------------------------------------------------------------------- */
.top{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--base) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.top-in{ max-width:1240px; margin:0 auto; padding:6px var(--gut); display:flex; align-items:center; justify-content:space-between; gap:var(--step)*2 }
.mark{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey) }
.mark b{ color:var(--ink); font-weight:600 }
.langs{ display:flex; gap:4px }
.langs button{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  min-width:46px; min-height:44px;
  background:none; border:1px solid var(--rule); color:var(--grey); cursor:pointer;
}
.langs button:hover{ color:var(--ink); border-color:var(--grey) }
.langs button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--base); font-weight:600 }

footer{ border-top:1.5px solid var(--ink); padding:calc(var(--step)*7) 0 calc(var(--step)*9) }
.foot-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--step)*4) }
.foot-cols h3{ font-size:14px; margin:0 0 var(--step) }
.foot-cols p{ font-size:15px; color:var(--grey); margin:0 0 calc(var(--step)*1.5) }
.foot-mail{ font-family:var(--mono); font-size:15px; margin-top:calc(var(--step)*1.5) }
.foot-legal{
  margin-top:calc(var(--step)*6); padding-top:calc(var(--step)*3);
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10.5px; line-height:1.8;
  letter-spacing:.08em; text-transform:uppercase; color:var(--grey); max-width:84ch;
}

/* --------------------------------------------------------------------------
   16. Adaptación
   -------------------------------------------------------------------------- */
@media (min-width:900px){
  body{ padding-left:34px }        /* hueco del filete de estado */
}

@media (max-width:899px){
  /* el filete pasa a barra bajo la cabecera */
  .status{
    position:sticky; left:auto; top:0; bottom:auto;
    width:100%; height:26px; flex-direction:row;
    border-right:0; border-bottom:1px solid var(--rule);
  }
  .status-t{ writing-mode:horizontal-tb; transform:none }
  .sec-grid{ grid-template-columns:minmax(0,1fr) }
  .col{ grid-column:1 }
  .rail{ display:flex; align-items:baseline; gap:calc(var(--step)*1.5); margin-bottom:calc(var(--step)*2) }
  .rail-t{ margin:0; max-width:none }
  .foot-cols{ grid-template-columns:1fr 1fr }
}

@media (max-width:639px){
  body{ font-size:17px }
  .prose, ul.clean li{ text-align:left; hyphens:manual }
  .asym{ grid-template-columns:1fr }
  .asym-half + .asym-half{ border-left:0; border-top:1.5px solid var(--ink) }
  .facing{ grid-template-columns:1fr }
  .facing-col + .facing-col{ border-left:0; border-top:1px solid var(--rule) }
  .foot-cols{ grid-template-columns:1fr }

  /* tablas → fichas. Ni una barra de scroll horizontal. */
  .tbl, .tbl thead, .tbl tbody, .tbl tr, .tbl th, .tbl td{ display:block }
  .tbl thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
  .tbl tr{ border:1px solid var(--rule); padding:calc(var(--step)*2); margin-bottom:calc(var(--step)*1.5) }
  .tbl td{ border:0; padding:calc(var(--step)*.75) 0; display:grid; grid-template-columns:9em 1fr; gap:var(--step) }
  .tbl td::before{
    content:attr(data-th);
    font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey);
  }
}

/* --------------------------------------------------------------------------
   17. Movimiento reducido
   La única animación del sitio es la revelación del bloque de asimetría.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   18. Piezas que faltaban de los componentes generados
   -------------------------------------------------------------------------- */


/* la primera sección ya no lleva foto: sin borde superior y con algo más de
   aire arriba, para que el titular no arranque pegado a la cabecera */
.sec--hero{ border-top:0; padding-top:calc(var(--step)*7) }
.sec--hero h1{ margin-bottom:calc(var(--step)*4) }

/* revelación del bloque de asimetría: la única animación del sitio */
[data-js] .asym[data-reveal] .asym-fig{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease }
[data-js] .asym[data-revealed] .asym-fig{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .asym[data-reveal] .asym-fig{ opacity:1; transform:none }
}

/* sección 01: los campos del impreso.
   Celda de etiqueta gris + celda de valor, como en la Decisión. */
.form{
  margin:calc(var(--step)*4) 0 0; display:grid; gap:0;
  border:1px solid var(--ink); background:var(--surface); max-width:640px;
}
.fld{ display:grid; grid-template-columns:11em minmax(0,1fr); align-items:baseline }
.fld + .fld{ border-top:1px solid var(--rule) }
.fld dt{
  background:var(--surface); color:var(--grey);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:calc(var(--step)*1.5) calc(var(--step)*2);
  border-right:1px solid var(--rule); align-self:stretch;
}
.fld dd{ margin:0; padding:calc(var(--step)*1.5) calc(var(--step)*2); font-family:var(--mono); font-size:14px }
.fld--flag dd{ font-weight:600; letter-spacing:.06em }
.fld--flag dd::before{
  content:""; display:inline-block; width:11px; height:11px;
  background:var(--flag); margin-right:.6em; vertical-align:baseline;
}

/* cita textual de la Decisión */
.verbatim{
  margin:calc(var(--step)*4) 0 0; padding:calc(var(--step)*2.5) calc(var(--step)*3);
  border-left:3px solid var(--oxide); background:var(--surface);
  font-family:var(--body); font-style:italic; font-size:17px; line-height:1.55;
  max-width:62ch;
}

/* recortes de facsímil, enlazados a su PDF */
.crop{ margin:calc(var(--step)*4) 0 0; max-width:760px }
/* Escaneados originales: NO se invierten ni se filtran. Se enmarcan sobre su
   propio blanco con aire alrededor, y se atenúan un punto para que no deslumbren
   sobre el fondo oscuro. Al pasar por encima o al enfocar, opacidad completa. */
.crop a{
  display:block; background:var(--paper);
  border:1px solid var(--rule);
  padding:calc(var(--step)*1.5);
}
.crop img{ opacity:.92; transition:opacity .18s ease }
.crop a:hover img, .crop a:focus-visible img{ opacity:1 }
.crop img{ display:block; width:100%; height:auto }
.crop figcaption{ margin-top:calc(var(--step)*1.5) }

.scroller{ overflow-x:auto }
@media (max-width:639px){ .scroller{ overflow-x:visible } }

/* slope chart */
.fig .axis{ stroke:var(--rule); stroke-width:1 }
/* sobre oscuro la banda necesita más cuerpo para leerse */
.fig .gapband{ fill:var(--oxide); fill-opacity:.20 }
.fig .gapn{ font-family:var(--mono); font-size:15px; font-weight:600; fill:var(--oxide) }
.fig .ln{ stroke:var(--line); stroke-width:2.5; fill:none }
.fig .ln--oxide{ stroke:var(--oxide); stroke-width:3 }
.fig .ln--flag{ stroke:var(--flag); stroke-width:3 }
.fig .ln--thin{ stroke:var(--grey); stroke-width:1.25; stroke-dasharray:5 4 }
.fig .dot{ fill:var(--line) }
.fig .dot--oxide{ fill:var(--oxide) }
.fig .dot--flag{ fill:var(--flag) }
.fig .dot--thin{ fill:var(--grey) }
.fig .v{ font-family:var(--mono); font-size:14px; font-weight:600; fill:var(--ink) }
.fig .p{ font-family:var(--mono); font-size:12px; fill:var(--grey) }
.fig .ax{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; fill:var(--grey) }

@media (max-width:639px){
  .fld{ grid-template-columns:1fr }
  .fld dt{ border-right:0; border-bottom:1px solid var(--rule) }
  .form{ max-width:none }
}


/* --------------------------------------------------------------------------
   19. Procedencia y avisos
   El lector tiene que ver de dónde sale cada cosa: el primer bloque de la 02
   viene de documentos firmados, el segundo de fuentes públicas enlazadas.
   -------------------------------------------------------------------------- */
.prov{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey);
  display:flex; align-items:center; gap:var(--step);
  margin:0 0 calc(var(--step)*3);
}
.prov::before{ content:""; width:10px; height:10px; flex:none }
.prov--fia::before{ background:var(--ink) }
.prov--public::before{ background:none; border:1.5px solid var(--grey) }


.tally{ margin:calc(var(--step)*3) 0 0 }
.tally .note{ margin-top:calc(var(--step)*1.5) }