@import url("../fonts/primero-fonts.css");

/* ══════════════════════════════════════════════════════════════════════════
   PRIMERO UNT · sistema de diseño web
   Implementa el Manual de Marca v2.0 (agosto 2026).
   Reglas duras que este archivo NO puede romper:
     · Dos fondos por pieza como máximo: azul o papel.
     · #00A3E0 nunca como color de texto sobre papel (va #00639B).
     · Peso 900 solo en UNT del logotipo. Mono siempre en altas.
     · Sin sombras, contornos, degradados, inclinaciones ni border-radius.
     · Iconos sólo en controles (menú, carrusel), con la geometría del
       sistema y nombre accesible; el isotipo es el único símbolo de marca.
     · La marca de hoy no se mueve del 60 %.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Paleta oficial (pág. 10) */
  --azul-primero:   #0B2450;
  --celeste-avance: #00A3E0;
  --azul-unt:       #12326B;
  --gris-por-hacer: #C9C6BE;
  --tinta:          #101418;
  --papel:          #F2F1ED;

  /* Funcionales sobre papel */
  --ficha:       #FFFFFF;
  --texto:       #3F4650;
  /* El manual usa #6B7280 para la etiqueta mono, pero sobre Papel da 4,28:1 y las
     etiquetas van en 11–13 px: no llega al 4,5:1 de WCAG AA. Este gris es el mismo
     tono medio punto más oscuro (4,74:1 sobre Papel, 5,36:1 sobre blanco) y no es
     un color de marca, así que corregirlo no toca la paleta oficial. */
  --etiqueta:    #646B79;
  --enlace:      #00639B;   /* celeste accesible: reemplaza al Celeste Avance en texto */
  --desactivado: #8A8177;

  /* Funcionales sobre azul */
  --az-etiqueta: #7FA3C9;
  --az-suave:    #B9CCE0;
  --az-texto:    #DDE6F0;
  --az-hecho:    #456C99;
  --az-filete:   #244572;

  --font-sans: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* El logotipo pide Light 300, pero el eje variable real de Schibsted Grotesk
     arranca en 400: es el mínimo disponible. El contraste con el 900 lo sostiene
     el tracking (+.155em contra -.045em).

     El manual da dos reglas para el logotipo que con la fuente real no cierran
     juntas: "UNT = 1,87 × PRIMERO" y "las dos líneas comparten el mismo ancho".
     Con 1,87, UNT queda 28 % más angosto —el 1,87 estaba calculado sobre el
     Light 300 que no existe—. Manda la regla visual: 2,58 iguala los anchos,
     que es lo que muestran las 14 instancias del manual y lo que sostiene la
     idea de que UNT carga todo el peso. */
  --peso-primero: 400;
  --peso-unt: 900;
  --ratio-logo: 2.58;

  --hoy: 60%;               /* invariante del sistema */
  --margen: clamp(1.25rem, 5.6vw, 4.5rem);
  --ancho: 74rem;
  --filete: 1px solid var(--gris-por-hacer);
}

/* ── Reset acotado ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--enlace); text-decoration: none; }
a:hover { color: var(--azul-primero); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--celeste-avance); outline-offset: 3px; }

.salto-contenido {
  position: absolute; left: 0; top: -4rem;
  background: var(--azul-primero); color: var(--papel);
  padding: .75rem 1rem; z-index: 100;
}
.salto-contenido:focus { top: 0; color: var(--papel); }

/* ══ 1 · TIPOGRAFÍA ═══════════════════════════════════════════════════════
   Escala del manual (600·52/100·−40 · 500·36/105·−35 · 500·25/115·−25 ·
   400·18/150·0 · mono·14·+160), llevada a web con clamp mobile-first.       */

.consigna {
  font-weight: 600;
  font-size: clamp(2.375rem, 8.6vw, 4.5rem);
  line-height: 1.0;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.titular {
  font-weight: 500;
  font-size: clamp(1.75rem, 5.4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* Titular con énfasis: la parte marcada carga el peso y el resto se aliviana,
   como PRIMERO/UNT en el logotipo. Con 500 de base, el 600 del strong casi no
   se veía. Donde no hay :has(), queda 500/600: también se sostiene. */
.titular:has(strong) { font-weight: 400; }
.titular strong { font-weight: 600; }
.subtitulo {
  font-weight: 500;
  font-size: clamp(1.25rem, 3.4vw, 1.5625rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.cuerpo {
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.9vw, 1.125rem);
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: pretty;
}
.cuerpo--ancho { max-width: 34em; }

/* Mono: siempre en altas, dos trackings. */
.etiqueta, .dato {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  font-variant-ligatures: none;
}
.etiqueta { font-size: .8125rem; letter-spacing: .16em; color: var(--etiqueta); }
.dato     { font-size: .8125rem; letter-spacing: .14em; color: var(--texto); line-height: 1.75; }

strong, b { font-weight: 600; }

/* ══ 2 · LOGOTIPO ═════════════════════════════════════════════════════════
   Dos palabras apiladas, alineadas a izquierda. UNT = 1,87 × PRIMERO.       */

.logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  color: var(--azul-primero);
  font-size: 1rem;          /* cuerpo de PRIMERO: se ajusta desde afuera */
}
.logo__primero {
  font-weight: var(--peso-primero);
  font-size: 1em;
  line-height: 1;
  letter-spacing: .155em;
  /* el tracking deja aire sobrante a la derecha; se compensa para alinear cajas */
  margin-right: -.155em;
}
.logo__unt {
  font-weight: var(--peso-unt);
  font-size: calc(1em * var(--ratio-logo));
  line-height: .9;
  letter-spacing: -.045em;
  margin-right: -.045em;
}
/* Compensación óptica de la Light en cuerpos chicos (manual, pág. 06) */
.logo--chico { font-size: .75rem; }
.logo--chico .logo__primero { letter-spacing: .17em; margin-right: -.17em; }

.logo--negativo { color: var(--papel); }

/* Bloque logotipo + isotipo: el isotipo va a la izquierda, al pie de UNT. */
.marca { display: inline-flex; align-items: flex-end; gap: .9em; }

/* ══ 3 · ISOTIPO ══════════════════════════════════════════════════════════
   Cronograma condensado en cuadrado. Único símbolo del sistema.
   Anchos 44/52/36/30 % con offsets 0/8/24/60 %. Marca de hoy fija en 60 %.  */

/* Es un SVG con viewBox 0 0 100, no una pila de divs con porcentajes: la
   geometría del manual es exacta a cualquier tamaño y no depende de cómo el
   navegador resuelva un calc() de porcentajes.

   Dos correcciones respecto de la primera versión:
   · Separación = alto de barra, como pide el manual ("Separación · igual al
     alto de barra"). Con space-between los huecos salían del doble y el
     dibujo no se leía como cronograma.
   · Un respiro de 2,2 unidades a cada lado de la marca de hoy. Sin él las
     barras se sueldan a la línea y a tamaño chico el dibujo se lee como una
     letra, no como un cronograma. Es el único ajuste sobre la geometría del
     manual: la marca de hoy sigue en Celeste y en el 60 %. */

.iso { display: block; flex: none; width: 2.55em; height: auto; }
.iso__fondo { fill: var(--azul-primero); }
.iso__barra { fill: var(--papel); }
.iso__curso { fill: var(--celeste-avance); }
.iso__hoy   { fill: var(--celeste-avance); }

/* Sobre Azul Primero el fondo del isotipo pasa a Azul UNT, para que se
   despegue del lienzo sin agregar un color nuevo. */
.lienzo--azul .iso__fondo,
.pie .iso__fondo,
.iso--sobre-azul .iso__fondo { fill: var(--azul-unt); }

/* ══ 4 · BARRA DE AVANCE ══════════════════════════════════════════════════
   Tres tramos en un renglón: 46 / 32 / 22 %. Semántica de color no negociable:
   azul = hecho, celeste = en curso, gris = por hacer.                        */

.barra { display: flex; height: 9px; width: 100%; }
.barra i { display: block; height: 100%; }
.barra i:nth-child(1) { width: 46%; background: var(--azul-primero); }
.barra i:nth-child(2) { width: 32%; background: var(--celeste-avance); }
.barra i:nth-child(3) { width: 22%; background: var(--gris-por-hacer); }

.barra--negativo i:nth-child(1) { background: var(--az-hecho); }
.barra--negativo i:nth-child(3) { background: var(--papel); }

.barra--firma { width: min(13.375rem, 60%); height: 7px; }
.barra--divisor { height: 8px; }
.barra--tapa { height: 11px; }

/* ══ 5 · CRONOGRAMA ═══════════════════════════════════════════════════════
   Cada fila es un compromiso. La vertical marca el presente y no se mueve.
   Lo que queda a su izquierda está hecho; lo que la cruza está en curso.     */

/* El padding inferior reserva el renglón de la etiqueta "Hoy": sin él se
   monta sobre lo que venga abajo (la leyenda). */
.crono { position: relative; padding: 1.5rem 0 3.5rem; }
.crono__hoy {
  position: absolute; top: 0; bottom: 2.5rem; left: var(--hoy);
  width: 2px; background: var(--tinta); pointer-events: none;
}
.crono__hoy::after {
  content: "Hoy";
  position: absolute; bottom: -1.45rem; left: 8px;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta); white-space: nowrap;
}
.crono--negativo .crono__hoy { background: var(--celeste-avance); }
.crono--negativo .crono__hoy::after { color: var(--celeste-avance); }

/* La separación entre filas tiene que ser mayor que la que hay entre un riel
   y su propio pie; si no, la etiqueta se lee como si fuera de la barra de abajo. */
.crono__fila { display: block; width: 100%; text-align: left; padding: 0; }
.crono__fila + .crono__fila { margin-top: 1.15rem; }

.crono__riel { position: relative; height: 14px; background: var(--gris-por-hacer); }
.crono--negativo .crono__riel { background: var(--az-filete); }

/* --p = fracción hecha; el tramo en curso arranca donde termina lo hecho */
.crono__hecho {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  background: var(--azul-primero);
}
.crono--negativo .crono__hecho { background: var(--az-hecho); }
.crono__curso {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--p) * 100%);
  width: calc(var(--c, .14) * 100%);
  background: var(--celeste-avance);
}

/* Barra de composición: de qué está hecho un bloque —avanzados, en curso,
   iniciados—. Los tramos se reparten por flex-grow y no por porcentaje: el
   número del style es la cantidad de compromisos, sin cuentas intermedias.
   Un tramo en cero no ocupa nada, que es exactamente lo que corresponde.
   Siempre está llena: no mide contra la marca de hoy y no la lleva. */
.compo { display: flex; height: 14px; }
.compo i { display: block; min-width: 0; transition: opacity .15s ease; }
.compo--av { background: var(--azul-primero); }
.compo--cu { background: var(--celeste-avance); }
.compo--in { background: var(--gris-por-hacer); }
/* Sobre azul, la misma tríada que .barra--negativo. */
.crono--negativo .compo--av { background: var(--az-hecho); }
.crono--negativo .compo--in { background: var(--papel); }

.crono__pie {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-top: .3rem;
}
/* El nombre y el porcentaje llevan el fondo del lienzo: la marca de hoy cruza
   todo el bloque y, con nombres largos en pantallas angostas, le pasaba por
   encima al texto y lo partía. Con fondo propio el texto interrumpe la línea
   limpiamente, como una etiqueta sobre un eje. */
.crono__nombre, .crono__pct {
  position: relative;
  background: var(--papel);
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase;
}
.crono__nombre { color: var(--texto); padding-right: .5em; }
.crono__pct {
  color: var(--azul-primero); font-weight: 500;
  font-variant-numeric: tabular-nums; padding-left: .5em;
}
.crono--negativo .crono__nombre,
.crono--negativo .crono__pct { background: var(--azul-primero); }
.crono--negativo .crono__nombre { color: var(--az-suave); }
.crono--negativo .crono__pct { color: var(--celeste-avance); }

/* En pantallas angostas los nombres largos ocupan casi todo el renglón: se
   achican para que sigan entrando sin pisar el porcentaje. */
@media (max-width: 30rem) {
  .crono__nombre, .crono__pct { font-size: .6875rem; letter-spacing: .08em; }
}

/* Leyenda de la semántica de color */
.leyenda { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.leyenda span { display: inline-flex; align-items: center; gap: .5rem; }
.leyenda i { width: 1.5rem; height: 8px; flex: none; }
.leyenda .l-hecho    { background: var(--azul-primero); }
.leyenda .l-curso    { background: var(--celeste-avance); }
.leyenda .l-porhacer { background: var(--gris-por-hacer); }
.crono--negativo ~ .leyenda .l-hecho, .leyenda--negativo .l-hecho { background: var(--az-hecho); }
.leyenda--negativo .l-porhacer { background: var(--papel); }

/* ══ 6 · BANDA DE DATOS ═══════════════════════════════════════════════════ */

.banda {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .7rem 0;
  border-top: var(--filete); border-bottom: var(--filete);
  font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texto);
}
.banda--negativo {
  border-color: var(--az-filete); color: var(--az-etiqueta);
}
.banda > :last-child { text-align: right; }

/* En pantalla angosta los dos datos enfrentados no entran y el de la derecha
   quedaba como renglón huérfano: pasan a correr como un solo texto, unidos
   por el punto medio del sistema, que si envuelve lo hace como prosa. */
@media (max-width: 40rem) {
  .banda { display: block; line-height: 1.7; }
  .banda > :last-child { text-align: left; }
  .banda > * + *::before { content: "· "; }
}

/* ══ 7 · LIENZOS Y GRILLA ═════════════════════════════════════════════════ */

.env { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

.lienzo { padding-block: clamp(3.5rem, 11vw, 7.5rem); }
.lienzo--azul  { background: var(--azul-primero); color: var(--az-texto); }
.lienzo--papel { background: var(--papel); color: var(--tinta); }
.lienzo--ficha { background: var(--ficha); color: var(--tinta); }

/* Dos lienzos del mismo fondo seguidos duplican el aire (la salida de uno
   más la entrada del otro: ~15rem de nada). El de abajo cede su padding
   superior: el rótulo con su filete ya marca el cambio de sección. */
.lienzo--papel + .lienzo--papel,
.lienzo--azul + .lienzo--azul { padding-top: 0; }

.lienzo--azul .titular, .lienzo--azul .consigna, .lienzo--azul .subtitulo { color: var(--papel); }
.lienzo--azul .etiqueta { color: var(--az-etiqueta); }
.lienzo--azul .cuerpo   { color: var(--az-texto); }
/* :not(.boton) — si no, esta regla le pisa el color al botón y el texto
   queda celeste sobre celeste. */
.lienzo--azul a:not(.boton) { color: var(--celeste-avance); }
.lienzo--azul a:not(.boton):hover { color: var(--papel); }

.lienzo--papel .titular, .lienzo--papel .consigna { color: var(--azul-primero); }
.lienzo--papel .cuerpo { color: var(--texto); }

/* Encabezado de sección: etiqueta mono sobre filete, como el manual */
.rotulo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-bottom: var(--filete); padding-bottom: .75rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.lienzo--azul .rotulo { border-color: var(--az-filete); }

/* Grilla cuyo fondo gris ES la línea divisoria (truco del manual, §6.5) */
.grilla-filete {
  display: grid; gap: 1px; background: var(--gris-por-hacer);
  border: 1px solid var(--gris-por-hacer);
}
.grilla-filete > * { background: var(--papel); padding: clamp(1.25rem, 3.4vw, 2rem); }
.lienzo--azul .grilla-filete { background: var(--az-filete); border-color: var(--az-filete); }
.lienzo--azul .grilla-filete > * { background: var(--azul-primero); }

@media (min-width: 40rem)  { .grilla-filete { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem)  { .grilla-filete--3 { grid-template-columns: repeat(3, 1fr); } }

.pila > * + * { margin-top: var(--gap, 1rem); }

/* ══ 8 · ENCABEZADO Y NAVEGACIÓN ══════════════════════════════════════════ */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--papel);
  border-bottom: var(--filete);
}
.cabecera__caja {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .85rem;
}
.cabecera .marca { gap: .7em; }
.cabecera .logo { font-size: .8125rem; }
.cabecera .logo__primero { letter-spacing: .17em; margin-right: -.17em; }
/* "El isotipo se alinea al pie de UNT y su alto iguala el del bloque de texto":
   13px de PRIMERO + 33,5px de UNT a interlínea .9 ≈ 43px ≈ 2,55em del cuerpo base. */
.cabecera .iso { width: 2.55em; }

.nav { display: flex; justify-content: flex-end; gap: .35rem clamp(.75rem, 3.5vw, 2rem); }
.nav a {
  /* 500: es navegación, no etiqueta — el ojo la tiene que encontrar primero. */
  font-family: var(--font-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--etiqueta);
  padding-block: .35rem; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--azul-primero); }
.nav a[aria-current="page"] { color: var(--azul-primero); border-bottom-color: var(--celeste-avance); }

/* En teléfono las cuatro entradas no entran al lado de la marca, y ni
   envolverlas ni apilarlas en un segundo piso se ve bien. Se resuelve como
   se resuelve hoy: la cabecera queda en una sola fila y el menú vive detrás
   de un botón que abre un panel. El botón lleva las tres barras —dibujadas
   con los rectángulos del isotipo— y la palabra, porque un icono con nombre
   es más claro que cualquiera de los dos solos. El panel es un <details>:
   abre y cierra sin JavaScript; menu.js sólo agrega cerrarlo al elegir un
   destino, con Escape o tocando afuera. */
.menu { display: none; }
@media (max-width: 39.9375rem) {
  .nav--linea { display: none; }
  .menu { display: block; }
}

.menu__boton {
  display: flex; align-items: center; gap: .55rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--azul-primero);
  padding: .75rem 0 .75rem .75rem;   /* zona de toque amplia hacia adentro */
}
.menu__boton::marker { content: none; }
.menu__boton::-webkit-details-marker { display: none; }
.menu__icono { width: .875rem; height: .875rem; fill: currentColor; flex: none; }
.menu__icono--cerrar { display: none; }
.menu__cerrar { display: none; }
.menu[open] .menu__icono--abrir { display: none; }
.menu[open] .menu__icono--cerrar { display: block; }
.menu[open] .menu__abrir { display: none; }
.menu[open] .menu__cerrar { display: inline; }

/* El panel cuelga de la cabecera a todo el ancho, por encima del contenido
   (la cabecera ya es sticky con z-index 50). Un destino por renglón, con el
   filete del sistema y el renglón actual subrayado en celeste. */
.nav--panel {
  position: absolute; left: 0; right: 0; top: 100%;
  flex-direction: column; gap: 0;
  background: var(--papel);
  border-bottom: var(--filete);
  padding: .25rem var(--margen) .5rem;
}
.nav--panel a {
  font-size: .8125rem;
  padding-block: 1rem;
  border-bottom: var(--filete);
}
.nav--panel a:last-child { border-bottom: 0; }
.nav--panel a[aria-current="page"] { border-bottom: 2px solid var(--celeste-avance); }

/* ══ 9 · BOTONES ══════════════════════════════════════════════════════════ */

.boton {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .95rem 1.5rem;
  background: var(--azul-primero); color: var(--papel);
  font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--azul-primero);
  transition: background .18s ease, color .18s ease;
}
.boton:hover { background: var(--celeste-avance); border-color: var(--celeste-avance); color: var(--azul-primero); }
.boton--negativo { background: var(--celeste-avance); border-color: var(--celeste-avance); color: var(--azul-primero); }
.boton--negativo:hover { background: var(--papel); border-color: var(--papel); color: var(--azul-primero); }
.boton--linea { background: transparent; color: var(--azul-primero); }
.boton--linea:hover { background: var(--azul-primero); color: var(--papel); }
.lienzo--azul .boton--linea { color: var(--papel); border-color: var(--az-filete); }
.lienzo--azul .boton--linea:hover { background: var(--papel); color: var(--azul-primero); border-color: var(--papel); }

/* La flecha de los botones: el chevrón del carrusel con su asta. En hover se
   adelanta un paso — es la única animación de movimiento del sistema. */
.boton__icono {
  height: .8125rem; width: auto; flex: none;
  fill: currentColor;
  transition: transform .18s ease;
}
.boton:hover .boton__icono { transform: translateX(4px); }

/* CTA principal: más cuerpo y el rótulo separado de la flecha. En teléfono
   ocupa el renglón entero, con la flecha contra el borde: es la puerta de la
   sección, no un botón de trámite. */
.boton--cta { font-size: .8125rem; padding: 1.1rem 1.4rem; gap: 1rem; }
@media (max-width: 40rem) {
  .boton--cta { width: 100%; justify-content: space-between; }
}

/* ══ 10 · FIRMA DE FÓRMULA ════════════════════════════════════════════════
   Apellidos debajo del logotipo, separados por la barra de avance,
   en mono con punto medio. Nunca por encima ni en mayor cuerpo.             */

.firma { display: flex; flex-direction: column; gap: .85rem; align-items: flex-start; }
.firma .logo { font-size: 1.0625rem; }
.firma__nombres {
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto);
}
.firma__cargo {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--etiqueta);
}
.firma--negativo .firma__nombres { color: var(--papel); }
.firma--negativo .firma__cargo { color: var(--az-etiqueta); }

/* ══ 11 · FOTOGRAFÍA ══════════════════════════════════════════════════════
   Documental, sin filtros ni recortes. El único overlay documentado es la
   barra de avance al pie.                                                   */

.foto { position: relative; background: var(--azul-unt); }
/* Todas las fotos del sitio van en blanco y negro (30/08/2026). El filtro lo
   garantiza aunque el navegador tenga cacheada una versión vieja en color. */
.foto img { width: 100%; object-fit: cover; filter: grayscale(1); }
.foto .barra { position: absolute; left: 0; right: 0; bottom: 0; }
.foto__pie {
  margin-top: .75rem;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--etiqueta);
}
.lienzo--azul .foto__pie { color: var(--az-etiqueta); }

/* Marco de documento: filete, passe-partout y banda de datos monoespaciada
   arriba. Es la "banda de datos" del manual —"da carácter de documento y fija
   fecha, lugar o número"— usada como cartela de la foto. Nada de sombras ni
   esquinas redondeadas: el encuadre lo dan el filete y el aire. */
.marco {
  display: flex;
  flex-direction: column;
  gap: clamp(.6rem, 1.6vw, .9rem);
  padding: clamp(.6rem, 1.6vw, .9rem);
  border: 1px solid var(--gris-por-hacer);
  background: var(--ficha);
}
.marco__banda {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  padding-bottom: clamp(.5rem, 1.4vw, .7rem);
  border-bottom: 1px solid var(--gris-por-hacer);
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--etiqueta);
}
.marco__banda > :last-child { text-align: right; }

/* Sobre Azul Primero el marco pasa a Azul UNT, sin introducir un color nuevo. */
.lienzo--azul .marco { background: var(--azul-unt); border-color: var(--az-filete); }
.lienzo--azul .marco__banda { color: var(--az-etiqueta); border-color: var(--az-filete); }

/* ══ 12 · PIE DE PÁGINA ═══════════════════════════════════════════════════ */

.pie { background: var(--azul-primero); color: var(--az-texto); padding-block: clamp(2.75rem, 7vw, 4.5rem); }
.pie__grilla { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .pie__grilla { grid-template-columns: 1fr auto; align-items: end; } }
.pie .etiqueta { color: var(--az-etiqueta); }
.pie .subtitulo { color: var(--papel); max-width: 18em; }
.pie__cierre { display: flex; flex-direction: column; gap: .6rem; }
.pie__cierre a {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase;
}
@media (min-width: 48rem) { .pie__cierre { align-items: flex-end; text-align: right; } }
.pie a:not(.boton) { color: var(--celeste-avance); }
.pie a:not(.boton):hover { color: var(--papel); }
.pie__legal {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--az-filete);
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--az-etiqueta);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
}

/* ══ 13 · UTILIDADES ══════════════════════════════════════════════════════ */

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tabular { font-variant-numeric: tabular-nums; }

/* ══ 14 · PÁGINA EL PLAN ══════════════════════════════════════════════════
   Exclusivo de propuestas.html. No modifica ninguna regla anterior: agrega
   clases propias (.portada, .filtros, .eje, .ficha, .eje__volver) y un
   modificador nuevo sobre una pieza existente (.crono--resumen).
   Mobile-first: la base es 360 px y todas las media queries van hacia arriba.
   El avance se dibuja siempre igual — riel gris, tramo azul hecho, tramo
   celeste en curso y la vertical de hoy clavada en el 60 % (--hoy).          */

:root {
  /* Alto de .cabecera, para colgar la barra de filtros justo debajo. La
     cabecera es una sola fila en todos los anchos: padding (2 × .85rem) +
     marca (2,7rem) + filete. Es solo el arranque: plan.js mide la cabecera
     real y corrige la variable, porque el encabezado es markup compartido y
     su alto puede cambiar. La barra de filtros solo existe con JS, así que
     la medición siempre llega. */
  --alto-cabecera: calc(1.7rem + 2.7rem + 1px);
  --alto-filtros: 3rem;
}

/* ── 14.1 · Encabezado de página (sobre Azul Primero) ─────────────────── */

.portada__banda { flex-wrap: wrap; row-gap: .25rem; }
.portada__banda > * { flex: 1 1 auto; }

.portada__titular { margin-top: clamp(1.75rem, 6vw, 3rem); }
.portada__bajada  { margin-top: 1.25rem; }
.portada__rotulo  { margin-top: clamp(2.25rem, 7vw, 3.5rem); }

/* Cronograma-resumen: una fila por bloque, y cada fila es un enlace al bloque.
   Muestra composición —avanzados, en curso, iniciados—, no avance contra la
   marca de hoy: la misma decisión que la portada del sitio (home.css, "Los
   doce bloques"). Sin la vertical, la reserva del renglón "Hoy" es un hueco:
   por eso el padding inferior vuelve a cero. Es además el destino de los
   "Volver al índice": el scroll-margin le hace lugar a la cabecera sticky. */
.crono--resumen {
  padding-bottom: 0; margin-bottom: 1.75rem;
  scroll-margin-top: calc(var(--alto-cabecera) + 1rem);
}
.crono--resumen .crono__nombre { font-size: .6875rem; }
.crono--resumen .crono__fila:hover .crono__nombre,
.crono--resumen .crono__fila:hover .crono__pct { color: var(--papel); }
.crono--resumen .crono__fila:hover .compo i { opacity: .78; }

@media (min-width: 40rem) {
  .crono--resumen .crono__nombre { font-size: .75rem; }
}

/* ── 14.2 · Barra de filtros (sticky, bajo la cabecera) ───────────────── */

.filtros {
  position: sticky;
  top: calc(var(--alto-cabecera) - 2px);   /* solapa 2 px: nunca asoma el fondo */
  z-index: 40;                             /* la cabecera (50) manda siempre */
  background: var(--papel);
  border-bottom: var(--filete);
}
.filtros__caja { display: flex; align-items: center; gap: .75rem; padding-block: .45rem; }

/* En pantalla chica los trece rótulos no entran, y una tira con scroll
   horizontal es una mala manera de recorrer categorías. Hasta 62rem el filtro
   es un selector nativo —un toque y la lista del sistema, completa—; la tira
   de rótulos existe sólo donde entra entera, envuelta si hace falta. */
.filtros__lista {
  display: none; flex: 1 1 auto; min-width: 0;
  flex-wrap: wrap; gap: 2px;
}
.filtros__selector { flex: 1 1 auto; min-width: 0; }
/* 1rem y no menos: con tipografía más chica, iOS hace zoom al enfocar. */
.filtros__sel {
  width: 100%;
  font-family: var(--font-mono); font-size: 1rem; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul-primero);
  background: var(--ficha);
  border: 1px solid var(--gris-por-hacer);
  padding: .45rem .5rem;
}
.filtro {
  flex: none;
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--etiqueta);
  padding: .4rem .7rem;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.filtro:hover { color: var(--azul-primero); border-color: var(--gris-por-hacer); }
.filtro[aria-pressed="true"] {
  background: var(--azul-primero); border-color: var(--azul-primero); color: var(--papel);
}
/* Filete de separación: en pantalla chica la tira de rótulos se corta justo
   contra el contador y sin él los dos monos se leen como uno solo. */
.filtros__cuenta {
  flex: none;
  padding-left: .75rem; border-left: var(--filete);
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto); font-variant-numeric: tabular-nums;
}

@media (min-width: 62rem) {
  .filtros__lista { display: flex; }
  .filtros__selector { display: none; }
  .filtros__cuenta { padding-left: 0; border-left: 0; }   /* ya no hay corte */
}

/* ── 14.3 · Bloque temático ───────────────────────────────────────────── */

.eje { scroll-margin-top: calc(var(--alto-cabecera) + var(--alto-filtros)); }
.eje + .eje { margin-top: clamp(2.75rem, 8vw, 5rem); }
.eje[hidden] { display: none; }

/* El .rotulo del sistema es flex; acá apila. Su filete inferior es también el
   filete que abre la grilla de fichas: por eso no lleva margen abajo ni la
   grilla lleva borde arriba — dos líneas paralelas serían un error de dibujo. */
.eje__rotulo { display: block; margin-bottom: 0; }
.eje__titulo { margin-top: .35rem; }
.eje__bajada { margin-top: .6rem; max-width: 40em; }
.eje__medida { display: flex; flex-wrap: wrap; gap: .1rem 1.25rem; margin-top: .9rem; }
.eje__pct { color: var(--azul-primero); font-weight: 500; }

/* ── 14.4 · Ficha de compromiso ───────────────────────────────────────── */

.eje__grilla { display: grid; }

.ficha {
  display: flex; flex-direction: column;
  padding-block: 1.15rem 1.4rem;
  border-bottom: var(--filete);
}
.ficha[hidden] { display: none; }

.ficha__kicker { font-size: .6875rem; letter-spacing: .16em; }
.ficha__titular { margin-top: .4rem; color: var(--azul-primero); }

/* La vertical de hoy sobresale arriba y abajo del riel: se lee incluso cuando
   el tramo azul ya la cruzó. Es la única lectura de "pasó / no pasó". */
.ficha__avance { margin-top: 1rem; }
.ficha__riel { margin-block: 5px; }
.ficha__hoy {
  position: absolute; top: -5px; bottom: -5px; left: var(--hoy);
  width: 2px; background: var(--tinta);
}
.ficha__medida {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
  margin-top: .5rem;
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.ficha__pct { color: var(--azul-primero); font-weight: 500; }
.ficha__estado { color: var(--etiqueta); }

.ficha__bloques { margin-top: 1.05rem; }
.ficha__bloque + .ficha__bloque {
  margin-top: .8rem; padding-top: .8rem; border-top: var(--filete);
}
.ficha__etiqueta { font-size: .6875rem; letter-spacing: .16em; margin-bottom: .3rem; }
.ficha__texto { font-size: .9375rem; line-height: 1.45; color: var(--texto); text-wrap: pretty; }

.ficha__cifras {
  display: flex; flex-wrap: wrap; gap: .2rem 1rem;
  list-style: none; padding: 0;
  font-family: var(--font-mono); font-weight: 500; font-size: .8125rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--azul-primero); font-variant-numeric: tabular-nums;
}

/* Dos y tres columnas. El filete vertical cae en el medio del gap: cada ficha
   se estira 1,25rem hacia el lado que le toca y las de borde no se estiran,
   así el filete horizontal no se corta y nada se sale del envase. */
@media (min-width: 40rem) {
  /* Con las fichas lado a lado, dos renglones de titular reservados alinean
     las barras de avance en la misma línea y el bloque se escanea de un tirón. */
  .ficha__titular { min-height: 2.3em; }

  .eje__grilla { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; }
  .eje__grilla > .ficha { padding-right: 1.25rem; margin-right: -1.25rem; }
  .eje__grilla > .ficha:nth-child(2n) {
    padding-right: 0; margin-right: 0;
    padding-left: 1.25rem; margin-left: -1.25rem;
    border-left: var(--filete);
  }
}

@media (min-width: 62rem) {
  .eje__grilla { grid-template-columns: repeat(3, 1fr); }
  .eje__grilla > .ficha:nth-child(2n) {          /* deshace el tramo de dos columnas */
    padding-right: 1.25rem; margin-right: -1.25rem;
    padding-left: 0; margin-left: 0;
    border-left: 0;
  }
  .eje__grilla > .ficha:not(:nth-child(3n+1)) {
    padding-left: 1.25rem; margin-left: -1.25rem;
    border-left: var(--filete);
  }
  .eje__grilla > .ficha:nth-child(3n) { padding-right: 0; margin-right: 0; }
}

/* La vuelta al índice de la portada, al pie de cada bloque: la página entera
   es larga y la barra de filtros no reemplaza al mapa completo. */
.eje__volver { margin-top: 1.75rem; }
.eje__volver a {
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ══ 15 · EVIDENCIA (DATO EN GRILLA) ══════════════════════════════════════════════════
   Las placas "info" no muestran avance sino proporción: cien celdas, N
   pintadas. El manual no tiene ficha para esto, así que se resuelve por
   analogía con el isotipo —"barras rectas, ángulos rectos, sin curvas"—:
   celdas cuadradas, no puntos redondos. Y con la fuente del dato citada al
   pie, porque una cifra sin respaldo no entra a una pieza.               */

.evidencia {
  border: 1px solid var(--gris-por-hacer);
  background: var(--ficha);
  padding: clamp(1.25rem, 3.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.6vw, 1.5rem);
}

.evidencia__cabeza { display: flex; flex-direction: column; gap: .5rem; }
.evidencia__titular { color: var(--azul-primero); }

.evidencia__grilla {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(3px, .9vw, 5px);
  max-width: 22rem;
}
.evidencia__grilla i {
  display: block;
  aspect-ratio: 1;
  background: var(--gris-por-hacer);
}
.evidencia__grilla i.lleno { background: var(--azul-primero); }

.evidencia__texto { color: var(--texto); max-width: 40em; }
.evidencia__fuente {
  padding-top: .85rem;
  border-top: var(--filete);
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--etiqueta);
}

@media (min-width: 52rem) {
  .evidencia { flex-direction: row; align-items: flex-start; gap: clamp(2rem, 4vw, 3rem); }
  .evidencia__grilla { flex: none; width: min(19rem, 42%); }
  .evidencia__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
}