/* ══════════════════════════════════════════════════════════════════════════
   PRIMERO UNT · reglas propias de la portada
   Extiende primero.css. No redefine nada del sistema.
   ══════════════════════════════════════════════════════════════════════════ */

/* Saltos de línea que solo existen cuando hay ancho para sostenerlos.
   En teléfono la línea se rompe sola y el titular nunca desborda. */
.salto-md { display: none; }
@media (min-width: 40rem) { .salto-md { display: inline; } }

/* La cabecera es sticky: sin esto, al llegar a #hecho o #formula desde el menú
   el rótulo de la sección queda debajo del encabezado. Es la misma regla que
   propuestas.html ya tiene para .eje. */
main > section[id] { scroll-margin-top: var(--alto-cabecera); }

/* ── HERO ──────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3.5rem, 9vw, 6rem); }
.hero__banda { margin-bottom: clamp(2.5rem, 8vw, 4.5rem); }

/* Composición de afiche, como la plantilla vertical del manual: cintillo,
   consigna a ancho completo, y la foto documental abajo con la barra al pie.
   A una sola columna la consigna entra en dos líneas cómodas en vez de
   quebrarse contra una columna angosta. */
.hero__caja { display: grid; gap: clamp(2.5rem, 7vw, 4.5rem); }
.hero__caja > * { min-width: 0; }

/* Solo min-width:0 — un max-width:100% acá le ganaría por orden de cascada
   al max-width de .cuerpo--ancho y el párrafo se iría a todo el ancho. */
.hero__texto { display: flex; flex-direction: column; align-items: flex-start; }
.hero__texto > * { min-width: 0; }

/* PRIMERO mide ~5,7 em de ancho por el tracking; los topes están calculados
   para que el bloque no desborde ni a 320 px ni en el ancho máximo. */
.hero__logo { font-size: clamp(2.5rem, 13vw, 4.75rem); margin-bottom: clamp(1.75rem, 5vw, 2.75rem); }

.hero__consigna { margin-bottom: 0; }
/* La bajada vuelve literal a la consigna: va pegada a ella, con menos aire
   que el que la separa de la barra, para que se lean como una sola pieza. */
.hero__bajada { margin-top: clamp(1rem, 3vw, 1.5rem); }
/* Cápsulas de campaña, debajo de la bajada del hero. Celeste de fondo con
   texto en Azul Primero: la única combinación que el manual admite para el
   celeste como fondo. Redondas a pedido de la fórmula (desvío 5 del LEEME). */
.hero__hashtags {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin: clamp(1.5rem, 4vw, 2rem) 0 0;
}
.hero__hashtags span {
  font-family: var(--font-mono); font-weight: 500; font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--celeste-avance); color: var(--azul-primero);
  border-radius: 999px; padding: .5em 1.1em;
  white-space: nowrap;
}

.hero__barra { margin-block: clamp(2rem, 6vw, 3rem) 0; }

/* La foto es 3:2. Cuanto más panorámico el recorte, más alto se come —y las
   cabezas están arriba. Con 16/9 el recorte es del 16 % del alto y anclado
   cerca del borde superior no toca a nadie; con 12/5 se comía el 37 %.
   La chapa de nombres se apoya sobre el tercio inferior, que es torso: por eso
   el encuadre se ancla arriba y no al centro. */
.hero__foto { width: 100%; }
/* En teléfono el recorte es casi el del original (1020×842): con 3/2 la chapa
   se comía un tercio de una foto ya corta y las cabezas quedaban contra el
   borde de arriba. */
.hero__foto .foto img { aspect-ratio: 5 / 4; object-position: center top; }
@media (min-width: 48rem) {
  .hero__foto .foto img { aspect-ratio: 16 / 9; object-position: center 12%; }
}

/* ── Chapa de presentación sobre la foto ────────────────────────────────────
   Los dos apellidos a cuerpo grande, cada uno del lado en que está su
   candidato en la foto. No es un degradado —el manual no los admite—: es un
   plano de Azul Primero con la opacidad justa para que la foto se siga
   leyendo detrás, y la barra de avance al pie, que es el único overlay que el
   manual documenta. */
.chapa {
  --aire: clamp(.85rem, 2.6vw, 1.4rem);
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem;
  padding: var(--aire) clamp(1rem, 3vw, 1.75rem);
  padding-bottom: calc(var(--aire) + 9px);   /* 9px = alto de .barra */
  background: rgba(11, 36, 80, .88);
}

.chapa__uno { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.chapa__uno--der { align-items: flex-end; text-align: right; }

.chapa__rol {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--az-etiqueta); white-space: nowrap;
}
.chapa__nombre {
  font-weight: 600;
  font-size: clamp(1.375rem, 5.6vw, 2.875rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--papel);
}
@media (max-width: 22rem) { .chapa__rol { letter-spacing: .08em; } }

/* ── Bloque de dos columnas (titular + texto) ──────────────────────────── */

.dos-columnas { display: grid; gap: clamp(1.25rem, 4vw, 3rem); margin-bottom: clamp(2.5rem, 7vw, 4rem); }
.dos-columnas > * { min-width: 0; }
@media (min-width: 56rem) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* ── Los doce bloques, por estado de sus compromisos ──────────────────────
   Antes acá había un riel de avance con la marca de hoy encima. No decía lo
   que parecía decir: sobre una barra que arranca en cero, una vertical fija
   en el 60 % sólo se lee como "esto es lo que deberías haber alcanzado", y
   ningún bloque llegaba. El gráfico principal del sitio terminaba comunicando
   atraso.

   La marca de hoy viene del isotipo, donde las barras empiezan y terminan en
   momentos distintos —un cronograma de verdad— y la vertical las corta en
   lugares distintos. Traducida a barras de progreso perdió ese sentido, así
   que acá no está.

   Lo que se dibuja ahora es de qué está hecho cada bloque: cuántos de sus
   compromisos están avanzados, cuántos en curso y cuántos recién iniciados.
   Los tres tramos suman el total, así que la barra siempre está llena — y eso
   también es el dato: de los 112 no hay ninguno sin empezar. */

/* El padding inferior de .crono reservaba el renglón de la etiqueta "Hoy".
   Sin la vertical, esa reserva es un hueco. */
.crono--ejes { padding-bottom: 0; margin-bottom: 1.75rem; }
.nota-plan { margin-top: 2rem; padding-top: 1.75rem; border-top: var(--filete); }

/* Cada fila lleva a su bloque en el plan. Es un enlace, pero no debe teñirse
   de color de enlace: el color acá es dato, no navegación. */
.crono--ejes .crono__fila { color: inherit; text-decoration: none; }
.crono--ejes .crono__fila:hover .crono__nombre { color: var(--azul-primero); }

/* La barra de composición (.compo) pasó a primero.css: la portada del plan
   ahora la usa igual que esta sección. Acá queda sólo el hover de las filas. */
.crono--ejes .crono__fila:hover .compo i { opacity: .78; }

/* ── Cifras ────────────────────────────────────────────────────────────── */

.cifra { display: flex; flex-direction: column; gap: .5rem; }
.cifra__n {
  font-weight: 600;
  font-size: clamp(3rem, 9vw, 4.25rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--azul-primero);
  margin-block: .35rem .25rem;
}

/* ── Slider de compromisos que cruzaron la marca de hoy ────────────────── */

/* El carrusel es scroll-snap nativo: sin JS sigue siendo una tira que se
   arrastra con el dedo o con el teclado, y se ven los 20 igual. El JS sólo
   agrega el avance automático y los botones. */
.slider { position: relative; }

.slider__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border: 1px solid var(--az-filete);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  /* Aísla el subárbol: sin esto los 20 slides suman al scrollWidth del
     documento y el ancho de la página sólo lo salva el overflow-x:hidden del
     body, que es una red de contención, no una solución. */
  contain: paint;
}
.slider__pista::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .slider__pista { scroll-behavior: auto; } }

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: clamp(1.25rem, 3.4vw, 2rem);
  border-right: 1px solid var(--az-filete);
  background: var(--azul-primero);
}
@media (min-width: 40rem) { .slide { flex-basis: 50%; } }
@media (min-width: 62rem) { .slide { flex-basis: 33.3333%; } }

.slide__titular { color: var(--papel); margin-bottom: .15rem; }
.slide__texto { color: var(--az-suave); }
.slide__avance { margin-top: auto; padding-top: 1.25rem; }

/* La barra del slide lleva su propia marca de hoy: se ve de un vistazo que el
   tramo azul la pasó. Sobre azul el tramo "hecho" va en --az-hecho: con el
   --azul-primero por defecto sería del mismo color que el fondo del slide. */
.slide__avance .crono__riel { height: 10px; background: var(--az-filete); }
.slide__avance .crono__hecho { background: var(--az-hecho); }
.slide__hoy {
  position: absolute; top: -4px; bottom: -4px; left: var(--hoy);
  width: 2px; background: var(--papel);
}

.slider__mando {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  margin-top: 1.25rem;
}
.slider__cuenta { color: var(--az-etiqueta); }
.slider__botones { display: flex; gap: .5rem; }

/* Botones de icono: chevrones y pausa/play dibujados con rectángulos y
   triángulos del sistema. El nombre accesible va en el aria-label. */
.slider__boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem;
  color: var(--papel);
  padding: .65rem .9rem;
  border: 1px solid var(--az-filete);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.slider__icono { height: .8125rem; width: auto; fill: currentColor; display: block; }
.slider__icono--play { display: none; }
.slider__boton[aria-pressed="true"] .slider__icono--pausa { display: none; }
.slider__boton[aria-pressed="true"] .slider__icono--play { display: block; }
.slider__boton:hover {
  background: var(--celeste-avance);
  border-color: var(--celeste-avance);
  color: var(--azul-primero);
}
.slider__boton[aria-pressed="true"] {
  background: var(--papel); border-color: var(--papel); color: var(--azul-primero);
}

/* ── La fórmula ────────────────────────────────────────────────────────── */

.formula { display: grid; gap: clamp(2rem, 6vw, 3.5rem); }
.formula > * { min-width: 0; }
@media (min-width: 56rem) {
  .formula { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.formula__foto .foto img { aspect-ratio: 3 / 2; }

/* ── Los dos candidatos ────────────────────────────────────────────────────
   Cierran la sección: primero quiénes son la fórmula y de dónde sale, después
   las fotos de trabajo, y recién ahí el resumen de cada uno con la puerta a
   su trayectoria completa. */

.trayectorias { margin-top: clamp(2.75rem, 8vw, 4.5rem); }
.trayectorias > .cuerpo { margin-top: .9rem; }

/* La fórmula, en confianza: los dos conversando, al lado del titular que
   abre sus trayectorias. No compite con la foto principal del hero ni con
   la del equipo: acá lo que cuenta es el vínculo. Ya es 3:2 de origen. */
.trayectorias__caja { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
.trayectorias__caja > * { min-width: 0; }
@media (min-width: 56rem) {
  .trayectorias__caja { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.trayectorias__foto .foto img { aspect-ratio: 3 / 2; }

.candidatos {
  display: grid;
  gap: 1px;
  background: var(--gris-por-hacer);
  border: 1px solid var(--gris-por-hacer);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 48rem) { .candidatos { grid-template-columns: repeat(2, 1fr); } }
/* A una columna, el filete de 1 px pegaba una ficha con la otra y los dos
   candidatos se leían como un solo bloque: apilados llevan aire de verdad,
   y el filete pasa a ser el borde de cada ficha. */
@media (max-width: 47.9375rem) {
  .candidatos { gap: 1rem; background: transparent; border: 0; }
  .candidato { border: 1px solid var(--gris-por-hacer); }
}

.candidato {
  background: var(--ficha);
  padding: clamp(1.5rem, 3.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  align-items: flex-start;
}
/* El apellido carga todo el peso del nombre, como UNT en el logotipo: el
   nombre de pila va liviano y el apellido en 600. Con 500 contra 600 la
   diferencia no se veía. */
.candidato__nombre { color: var(--azul-primero); font-weight: 400; }
.candidato__nombre strong { font-weight: 600; }
.candidato .boton { margin-top: auto; }

/* Foto de perfil del candidato: círculo con anillo celeste (desvío 5 del
   LEEME — el manual no admite redondeos; la fórmula los pidió acá). El
   encuadre se ancla arriba porque las caras están en el tercio superior,
   y el gris lo garantiza el filtro, venga la foto como venga. */
.candidato__foto { margin: 0 0 .25rem; }
.candidato__foto img {
  display: block;
  width: clamp(6rem, 14vw, 8.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(1);
  outline: 2px solid var(--celeste-avance);
  outline-offset: 4px;
}

/* ── Cierre ────────────────────────────────────────────────────────────── */

.cierre__nota { margin-bottom: 1rem; }
.cierre__bajada { margin-top: 1.75rem; }
.cierre__barra { margin-block: clamp(2.25rem, 6vw, 3rem) clamp(2rem, 5vw, 2.5rem); }