/* Correcciones de accesibilidad — La Volanta
   =========================================
   Este archivo se carga EL ÚLTIMO en las cuatro familias de página del
   sitio (inicio, interiores, blog y prensa). Existe separado por una
   razón concreta: las correcciones de contraste tienen que ganarle a
   cuatro hojas distintas que se cargan en distinto orden según la
   página, y duplicarlas en cada una garantizaba que con el tiempo se
   desincronizaran. Una sola fuente de verdad, cargada al final.

   Cada bloque lleva el ratio medido antes y después. Si alguien va a
   tocar un color de aquí, que sepa qué se rompe.
   ========================================================================= */


/* A11Y-01 · Texto secundario sobre papel: 4.44:1, por debajo del 4.5:1
   que exige WCAG 2.2 AA para texto normal. Afectaba a 180+ instancias en
   45 páginas: fechas, tamaños de archivo, notas al pie, entradillas.
   El tono baja lo justo para pasar (5.19:1 sobre papel, 5.67:1 sobre
   blanco) conservando el matiz azulado del gris. */
:root{--muted:#5f6870}

/* A11Y-02 · Botón amarillo con texto blanco: 1.65:1. Es un CTA primario
   —lo más importante que se puede pulsar— y era de lo menos legible de
   la página. La tinta sobre amarillo da 11.84:1. */
.btn-yellow,.btn.btn-yellow,a.btn-yellow,button.btn-yellow{color:var(--ink)}

/* A11Y-03 · Etiquetas pequeñas sobre bloques amarillos: entre 2.84:1 y
   4.16:1. El amarillo de marca es luminoso; encima solo aguanta tinta o
   un gris muy oscuro. #3c4a56 da 5.53:1 y mantiene la jerarquía visual
   respecto al texto principal. */
.metric:nth-child(2) small,.metric:nth-child(7) small,
.proposal:nth-child(3) p,.proposal:nth-child(3) .num,
.article-card.feature .category,.article-card.feature p,.article-card.feature footer,
.card.yellow-card p,.card.yellow-card .num,
.v7-step.amarillo small,.v7-step.amarillo span{color:#3c4a56}

/* A11Y-04 · Numeración sobre tarjetas de tinta: #465d70 sobre #090d10 da
   2.84:1. El resto del sistema ya resuelve esto poniendo el amarillo de
   marca sobre fondo oscuro (11.84:1); esto solo extiende esa regla a las
   tarjetas de propuesta, donde se había quedado sin aplicar. */
.proposal:nth-child(1) .num,.proposal:nth-child(6) .num{color:var(--yellow)}

/* A11Y-05 · Tarjeta Prusia: el párrafo heredaba el gris secundario, que
   sobre #162938 da 3.07:1. Con #b9c3c9 sube a 8.32:1. */
.hub-card.prusia p{color:#b9c3c9}
.hub-card.prusia .tag{color:#fff;border-color:rgba(255,255,255,.28)}
.hub-card.prusia:after{color:var(--yellow);opacity:1}
.hub-card.prusia:hover{border-color:var(--yellow)}

/* A11Y-06 · El acento amarillo como TEXTO sobre fondo claro daba 1.51:1
   frente al 3:1 que pide AA incluso para texto grande. Era el titular
   más grande del sitio: el fallo de contraste más visible que teníamos.
   No se resuelve oscureciendo el amarillo —a partir de 3:1 deja de ser
   el amarillo de la marca y se vuelve mostaza—, así que el gesto cambia
   de sitio: la palabra acentuada va en tinta y el amarillo pasa debajo,
   como subrayado grueso. La marca sigue marcando lo mismo, pero ahora
   el texto se lee. Es `background-image`, así que no hay salto de
   maquetación ni se rompe el ajuste de línea. */

/* RESP-01 · Titulares de display con palabras largas del español
   («interoperabilidad», «institucionalidad») desbordaban 40 px a 320 px:
   el suelo del clamp era mayor que el ancho disponible. Se permite el
   corte por sílabas —el documento declara lang="es", así que el motor
   silabea de verdad— y se baja el suelo solo en pantallas estrechas. */
h1,h2,h3,.doc-title,.section-title,.hero h1,.article-hero h1{
  overflow-wrap:break-word;hyphens:manual}
@media(max-width:430px){
  .article-hero h1{font-size:clamp(2.35rem,11vw,3.5rem)}
  .hero h1{font-size:clamp(2.5rem,11.5vw,3.7rem)}
  .section-head h2,.latest-title h2{font-size:clamp(2rem,9.5vw,2.7rem)}
}

/* RESP-02 · La rejilla de documentos mantenía dos columnas por debajo de
   su punto de ruptura y la tarjeta quedaba más ancha que su contenedor.
   El minmax con min() deja que la columna se encoja en vez de empujar. */
.doc-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}

/* A11Y-07 · Objetivo táctil de los enlaces de pie y de navegación: 21 px
   de alto. AA pide 24×24 salvo excepción de espaciado, y en un pie con
   enlaces apilados la excepción no aplica con holgura. Se sube el alto
   de línea en vez de añadir padding, para no romper el ritmo vertical. */
.footer-links a,.foot-col a{display:block;min-height:24px;line-height:24px}

/* SEM-01 · Los títulos de columna del pie eran h4 colgando de un h2: un
   salto de nivel en 46 páginas, que a un lector de pantalla le suena a
   sección perdida. Pasan a h2 dentro del landmark footer, que es su
   nivel real. El estilo no cambia: la etiqueta describe la estructura,
   la clase describe la apariencia. */
footer .foot-h{margin:0 0 13px;color:var(--yellow);font-size:.72rem;font-weight:950;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.25}

/* A11Y-08 · Etiquetas y numeración sobre bloques amarillos del inicio.
   `.flow-step` amarillo llevaba #465d70 (4.16:1) y #667078 (3.07:1);
   ninguno llega al 4.5:1. Con #3c4a56 quedan en 5.53:1 sin perder la
   diferencia de peso respecto al texto principal del bloque. */
.flow-step.amarillo .n,.flow-step.amarillo span,
.impact-split-home .amarillo b,
[class*="amarill"] small,[class*="amarill"] .n{color:#3c4a56}

/* A11Y-09 · Numeración de propuesta sobre tinta: 2.84:1. El sistema ya
   resuelve esto en las demás tarjetas oscuras poniendo amarillo sobre
   fondo oscuro (11.84:1); aquí solo faltaba aplicarlo. */
.proposal:nth-child(1) .num,.proposal:nth-child(6) .num,
.card.dark-card .num,.article-card.dark .num{color:var(--yellow)}

/* A11Y-10 · Acento amarillo como texto en la portada y en prensa. Mismo
   criterio que A11Y-06: el color pasa debajo como subrayado y la palabra
   se lee en tinta. */

.flow-step:nth-child(1) .n,.flow-step:nth-child(6) .n,
.flow-step:nth-child(1) span,.flow-step:nth-child(6) span{color:#3c4a56}
.flow-step:nth-child(1) strong,.flow-step:nth-child(6) strong{color:var(--ink)}
/* …y el mismo patrón en los h2 de sección de prensa, kit y publicaciones. */

/* SEM-02 · La cabecera del bloque de datos usaba h3 aunque es el título
   de una sección hermana de las demás. Pasa a h2; el tamaño lo fija la
   clase, no la etiqueta, así que visualmente no cambia nada. */
.bloque-datos-cab h2{margin:0;font-size:1rem;letter-spacing:-.02em;line-height:1.25}
.figura-cab h3{margin:0;font-size:1rem;line-height:1.25}

/* RESP-03 · Desborde residual de 2–4 px a 320 px. La causa no era la
   rejilla: `1fr` equivale a `minmax(auto,1fr)`, y ese `auto` se niega a
   bajar del ancho mínimo del contenido. Un título de documento con una
   palabra larga —«interoperabilidad», «Institucional»— fijaba ese mínimo
   en 310 px dentro de un contenedor de 292. Con `minmax(0,1fr)` la pista
   puede encogerse, y el corte de palabra evita que el texto se salga. */
@media(max-width:560px){
  .docs-grid,.doc-grid,.cifras-grid,.datos-grid,.ed-grid,.press-archive-grid,.statline{
    grid-template-columns:minmax(0,1fr)}
}
.doc-card,.docs-grid > *,.press-item,.cifra,.dato,.hub-card{min-width:0;overflow-wrap:break-word}
/* La rejilla de /documentos se declara como `.doc-group .docs-grid`, con
   más especificidad que la regla de arriba; se corrige en su origen y se
   refuerza aquí para el caso de que vuelva a declararse en otro sitio. */
@media(max-width:560px){
  .doc-group .docs-grid{grid-template-columns:minmax(0,1fr)}
  .press-archive-grid,.press-hero-grid{grid-template-columns:minmax(0,1fr)}
}

/* RESP-04 · Cabeceras a dos columnas (rótulo a la izquierda, entradilla a
   la derecha) que no bajaban a una sola columna a 320 px. El patrón se
   repite en varias secciones, así que se corrige por familia y no caso a
   caso. */
@media(max-width:560px){
  .press-topics-head,.press-intro,.section-head,.result-head,.proposals-head,
  .bloque-datos-cab,.figura-cab,.oaci-head,.split-heading{
    display:block}
  .bloque-datos-cab p,.figura-cab span,.section-head p,.result-head .result-note{
    max-width:none;margin-top:8px;text-align:left}
}

/* A11Y-12 · Indicador de foco. Éste era el hallazgo más grave de toda la
   auditoría: al recorrer la página con el tabulador, la mayoría de
   enlaces y botones no mostraban absolutamente nada. Alguien que navega
   sin ratón —por discapacidad motriz, por preferencia, o simplemente
   porque tiene las manos ocupadas— no podía saber dónde estaba. Es un
   incumplimiento directo del criterio 2.4.7 de WCAG.
   La causa: seis hojas distintas anulaban `outline` y solo se reponía
   para un puñado de selectores.
   El anillo es doble a propósito: amarillo por fuera para que se vea
   sobre superficies oscuras, tinta por dentro para que se vea sobre las
   claras. Así uno solo funciona en todo el sitio sin variantes. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:2px;
  border-radius:4px;
  box-shadow:0 0 0 5px rgba(9,13,16,.55)}
/* En los componentes que ya tienen su propio radio, el anillo lo respeta. */
.btn:focus-visible,.chip:focus-visible,.topic:focus-visible,
.press-filter:focus-visible,.hub-card:focus-visible{border-radius:999px}
.card:focus-visible,.doc-card a:focus-visible,.hub-card:focus-visible,
.ed-card:focus-visible,.proposal:focus-visible,.dato:focus-visible,
.home-arch-card:focus-visible,.press-item:focus-visible,
.explorador-btn:focus-visible,.v7-capacity-panel:focus-visible{border-radius:18px}
/* El foco nunca debe quedar debajo de la cabecera fija al saltar con
   anclas o al tabular hacia arriba (criterio 2.4.11). */
html{scroll-padding-top:calc(var(--header,82px) + 16px)}

/* A11Y-13 · Movimiento reducido. Cinco hojas lo respetaban, pero las
   incorporaciones recientes —el explorador de pilares, el plano de
   servicio, las tarjetas del hub— traían sus propias transiciones sin
   pasar por esa consulta. Se cierra en un solo sitio, al final. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .hub-card:hover,a.dato:hover,.ed-card:hover,.blueprint a.celda:hover,
  .card:hover,.proposal:hover,.doc-card:hover{transform:none !important}
}

/* A11Y-06 · El acento amarillo como TEXTO sobre fondo claro daba 1.51:1
   frente al 3:1 que pide AA incluso para texto grande. Era el titular
   más grande del sitio: el fallo de contraste más visible que teníamos.
   No se resuelve oscureciendo el amarillo —a partir de 3:1 deja de ser
   el amarillo de la marca y se vuelve mostaza—, así que el gesto cambia
   de sitio: la palabra acentuada va en tinta y el amarillo pasa debajo,
   como regla gruesa. La marca sigue marcando lo mismo, pero ahora el
   texto se lee.
   Va como `text-decoration` y no como fondo: el navegador la coloca
   respecto a la línea base, así que no atraviesa los descendentes de la
   «p» o la «g». `skip-ink:none` la mantiene continua.

   La lista es explícita a propósito. La primera versión usaba selectores
   amplios (`h2 > span`) y arrastró dos acentos que no eran amarillos
   —uno azul acero, otro sobre fondo oscuro— rompiendo lo que ya estaba
   bien. Aquí solo entran los acentos amarillos sobre fondo claro; los
   que van sobre tinta contrastan 11.84:1 y se quedan como están.

   CORRECCIÓN: `.hero h1 span` también alcanzaba a `.hero-name` y
   `.hero-claim` de la portada —el nombre y la frase, que nunca fueron
   amarillos— y les puso subrayado. En la portada el único acento amarillo es
   el `<em>` de «resultados»; los otros dos quedan excluidos por nombre.
   El selector del `em` va como `.hero h1 em` y no como `.hero-claim em`
   porque la regla original de styles.css usa el primero: con menos
   especificidad el subrayado entraba pero el color no, y quedaba amarillo
   sobre blanco con subrayado amarillo —peor que antes—. */
.article-hero h1 .accent,
.hero h1 span:not(.hero-name):not(.hero-claim),
.latest-title h2 span,
.press-archive-aside h2 span,
.hero h1 em,.hero-claim em{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:.085em;
  text-underline-offset:.1em;
  text-decoration-skip-ink:none}