/* =============================================================================
   historia.css · Página "Historia" del portal EdeE 2026

   Carga después de tokens.css y portal.css (no de documento.css). Mismo
   registro que metodologia.css: producto, no documento — Instrument Sans +
   Inter, scroll libre, revelado por fundido (sin desplazamiento).

   Eje de la página: "somos precursores e innovadores" — una línea de
   primeros reales, no una cronología institucional. Las fotos y el video
   de esta primera versión son PLACEHOLDERS a propósito (assets ya
   existentes del carrusel de Metodología) — se reemplazan por las
   apropiadas en una pasada posterior, sin tocar la estructura.
   ========================================================================== */

body.page--historia {
  background: var(--white);
  color: var(--dark);
}
.page--historia { --header-field: var(--black); }

.hist-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -----------------------------------------------------------------------------
   Revelado — mismo recurso que Metodología: fundido en el lugar, sin
   desplazamiento. Ver metodologia.css para el razonamiento completo.
   -------------------------------------------------------------------------- */
.js-reveal .reveal {
  opacity: 0;
  transition: opacity 1200ms var(--ease-standard);
}
.js-reveal .reveal.is-in { opacity: 1; }
.reveal--2 { transition-delay: 300ms; }
.reveal--3 { transition-delay: 600ms; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transition: none; }
}

/* -----------------------------------------------------------------------------
   1 · Apertura + contador
   -------------------------------------------------------------------------- */
.hist-hero {
  padding-block: clamp(4rem, 10vw, 7.5rem) clamp(2.5rem, 6vw, 4rem);
}
.hist-hero__eyebrow {
  display: block;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--red);
}
.hist-hero h1 { max-width: 20ch; color: var(--black); }
.hist-hero__line { display: block; }
/* La primera línea se dibuja con la página, sin fundido — solo "Cambiar de
   nuevo." aparece y cambia de color, para que el cambio de color sea el
   propio "cambiar de nuevo". */
.hist-hero__line--2 {
  color: var(--black);
}
.hist-hero__line--2.reveal {
  transition: opacity 1400ms var(--ease-standard), color 1400ms var(--ease-standard);
  transition-delay: 500ms;
}
.hist-hero__line--2.reveal.is-in { color: var(--gold); }

.hist-hero__sub {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  max-width: 34rem;
  font-size: var(--text-body-lg);
  color: var(--dark);
}
.hist-hero__accent {
  color: var(--black);
  border-bottom: 2px solid var(--gold);
}
.hist-hero .reveal--3 { transition-delay: 1900ms; }

/* El contador — "tipo countdown": cuenta desde 0 hasta el número real la
   primera vez que entra en foco. Vive en la apertura, no al pie. */
.counter {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--hairline-light);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 5vw, 3.5rem);
}
.counter__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-2);
  color: var(--black);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.counter__label {
  display: block;
  margin-top: 0.35em;
  color: var(--dark);
  font-size: var(--text-body-base);
}

/* Barra fija de números — aparece recién cuando el contador del hero sale
   de pantalla (historia.js decide el momento con IntersectionObserver);
   acá solo se define el aspecto y la transición. No repite la cuenta hacia
   arriba del hero: los números ya están puestos desde que carga la página.
   (Revertido 2026-09-06: se probó position:sticky pegada al hero y no
   convenció — se vuelve a la versión anterior.) */
.hist-stickystats {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 3rem);
  background: var(--black);
  color: rgba(255, 255, 255, 0.85);
  padding: 10px var(--gutter);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}
.hist-stickystats.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.hist-stickystats strong {
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-right: 0.35em;
}
@media (max-width: 640px) {
  /* Se prioriza legibilidad sobre completitud: en una franja angosta, los
     tres números apretados se leen peor que dos con aire. */
  .hist-stickystats span:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hist-stickystats { transition: none; }
}

/* Línea editorial antes de los hitos: qué es esto y qué no es. */
.hist-note {
  padding-block: clamp(1.5rem, 3vw, 2rem);
  max-width: 34rem;
  color: var(--dark);
  border-top: 1px solid var(--hairline-light);
}

/* -----------------------------------------------------------------------------
   2 · La línea de primeros — eras con verbo, no años sueltos.
   Cada .era pinta a lo ancho completo (fondo pleno de caja); .era__inner
   es quien vuelve a acotar el contenido a la medida del portal.

   La costura dorada del portal atraviesa todas las eras, continua, sea
   cual sea el fondo de cada una — "los formatos cambian, la línea
   permanece". Vive en el margen, no interrumpe fotos ni texto.
   -------------------------------------------------------------------------- */
.eras {
  position: relative;
  border-top: 1px solid var(--black);
}
.eras::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: var(--gutter);
  width: 2px;
  background: var(--gold);
  opacity: 0.55;
}
@media (max-width: 640px) {
  .eras::before { display: none; } /* en mobile el margen es demasiado angosto para que se lea como hilo */
}

.era { border-bottom: 1px solid var(--hairline-light); }
.era__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
@media (min-width: 860px) {
  .era__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: center; }
  .era--reverse .era__figure { order: -1; }
}

/* Fondos alternados — le dan ritmo a la línea de tiempo en vez de un
   blanco corrido de seis bloques iguales. */
.era--tint { background: var(--light); border-bottom-color: var(--hairline-light); }
.era--dark {
  background: var(--black);
  color: rgba(255, 255, 255, 0.82);
  border-bottom-color: var(--hairline-dark);
}
.era--dark .era__title,
.era--dark .era__marks li { color: var(--white); }
.era--dark .era__range { color: var(--gold); }
.era--dark .era__body p { color: rgba(255, 255, 255, 0.78); }
.era--dark .era__figure { background: rgba(255, 255, 255, 0.06); }

/* El año, tratado como pieza gráfica — no una etiqueta chica. */
.era__range {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-3);
  letter-spacing: -0.01em;
  color: var(--gold);
  margin-bottom: 0.5em;
}
.era__title {
  color: var(--black);
  margin-bottom: clamp(1.1rem, 3vw, 1.6rem);
}

/* Logo de un hito puntual (PresencialONLINE en 2012–2015) */
.era__brand {
  display: block;
  height: clamp(28px, 4vw, 36px);
  width: auto;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.era__marks {
  margin: 0 0 clamp(1.1rem, 3vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.era__marks li {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-body-lg);
  color: var(--black);
}
.era__body p { max-width: 34rem; color: var(--dark); }
.era__body p + p { margin-top: 0.85em; }

/* Convenio UNC — a propósito chico y perdido, no un hito más. */
.era__aside {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: 0.8125rem;
  color: var(--mid);
  max-width: 30rem;
}

.era__figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--light);
}
.era__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.1);
}

/* Collages — varias fotos en el lugar de una, con un hairline de separación
   entre ellas (el propio fondo de .era__figure hace de línea). */
.era__figure--collage {
  display: grid;
  gap: 3px;
}
.era__figure--collage-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.era__figure--collage-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 640px) {
  /* Tres columnas angostas no se leen bien en mobile: pasan a dos + una
     abajo, mismo criterio que el collage de 4. */
  .era__figure--collage-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .era__figure--collage-3 img:last-child { grid-column: 1 / -1; }
}

/* El hero real de HTML1, embebido y vivo — corre su propia animación de
   apertura de verdad, no una captura fija (un hero panorámico recortado a
   la fuerza en 4:3 siempre corta texto por algún lado). El iframe se dibuja
   a su tamaño natural de escritorio (para que dispare la coreografía — por
   debajo de 900px portal.js no anima nada) y se escala para entrar entero,
   sin recorte; historia.js calcula la escala según el ancho real de la caja. */
.era__figure--live {
  aspect-ratio: 16 / 9;
  position: relative;
  background: var(--black);
}
.era__figure--live iframe {
  position: absolute;
  top: 0; left: 0;
  width: 1280px;
  height: 720px;
  border: 0;
  transform-origin: top left;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   El momento de Bruno — ventana chica, ampliable (dialog nativo)
   -------------------------------------------------------------------------- */
.era-video {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--hairline-strong);
  padding: 8px 14px 8px 8px;
  max-width: 100%;
}
.era-video__thumb {
  position: relative;
  flex: none;
  width: 84px; height: 60px;
  overflow: hidden;
  background: var(--black);
}
.era-video__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.era-video__thumb::after {
  content: "▸";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 1.1rem;
}
.era-video__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-body-base);
  color: var(--black);
}

.era-video-dialog {
  border: 0;
  padding: 0;
  width: min(90vw, 780px);
  background: var(--black);
}
.era-video-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.era-video-dialog__bar {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}
.era-video-dialog__close {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-body-base);
}
.era-video-dialog video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--black);
}
.era-video-dialog__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--black);
}
.era-video-dialog__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.era-video-dialog figcaption {
  padding: 10px 16px 18px;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-body-base);
}

/* -----------------------------------------------------------------------------
   2.1 · El detalle — tabla real, no una tarjeta más. Prioriza legibilidad
   por sobre efecto: es la sección para quien quiere chequear el dato, no
   para quien ya está convencido.
   -------------------------------------------------------------------------- */
.hist-detail {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  border-top: 1px solid var(--hairline-light);
}
.hist-detail__lead {
  margin-top: clamp(0.75rem, 2vw, 1.25rem);
  max-width: 34rem;
  color: var(--dark);
}
.hist-detail__table-wrap {
  margin-top: clamp(2rem, 5vw, 3rem);
  overflow-x: auto;
}
.hist-detail__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  font-variant-numeric: tabular-nums;
}
.hist-detail__table th,
.hist-detail__table td {
  padding: 0.85em 1em;
  text-align: left;
  border-bottom: 1px solid var(--hairline-light);
}
.hist-detail__table td { text-align: right; }
.hist-detail__table thead th {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom-color: var(--hairline-strong);
}
.hist-detail__table thead th:not(:first-child) { text-align: right; }
.hist-detail__table tbody th {
  font-weight: 500;
  color: var(--black);
}
.hist-detail__jornadas th { font-weight: 400; color: var(--dark); }
.hist-detail__jornadas th span {
  display: block;
  font-size: 0.8125rem;
  color: var(--mid);
  font-weight: 400;
}
.hist-detail__table tfoot th,
.hist-detail__table tfoot td {
  border-bottom: none;
  border-top: 1px solid var(--black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-body-lg);
  color: var(--black);
}
.hist-detail__table tfoot td:nth-child(3),
.hist-detail__table tfoot td:nth-child(4) { color: var(--gold); }

/* -----------------------------------------------------------------------------
   3 · Cierre
   -------------------------------------------------------------------------- */
.hist-close {
  background: var(--black);
  color: var(--white);
  text-align: center;
  padding-block: clamp(4rem, 9vw, 6.5rem);
}
.hist-close h2 { color: var(--white); }
.hist-close__lead {
  margin: 0 auto clamp(1rem, 2.5vw, 1.5rem);
  max-width: 30rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-body-lg);
}
.hist-close__actions {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}