/* ============================================================
   T4 · LÍNEA DE TIEMPO — hoja específica de la plantilla
   Requiere estilo-base.css cargado antes.
   ============================================================ */

.tl-hero{border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--brand-soft),transparent);}
/* la cabecera, los filtros y el eje comparten el mismo ancho y el mismo
   margen izquierdo, para que el título, los botones y la primera columna
   de fechas queden alineados en la misma vertical */
.tl-hero-in{max-width:900px; margin:0 auto; padding:52px 24px 40px;}
.crumb{font-family:var(--sans); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 18px;}
.crumb a{color:var(--muted); text-decoration:none;} .crumb a:hover{color:var(--accent);}
h1{font-size:clamp(34px,5.4vw,50px); line-height:1.05; letter-spacing:-.028em; margin:0 0 14px;}
.tl-hero p.lead{font-size:20px; line-height:1.55; color:var(--muted); max-width:60ch; margin:0;}

/* ---------- filtros ----------
   La barra se pega justo debajo de la cabecera. --h-cabecera trae la altura
   real, que el script de la página mide y actualiza al redimensionar; el
   valor de reserva cubre el caso normal y el arranque antes del script.
   Fondo opaco a propósito: con transparencia el texto se ve por detrás en
   los navegadores sin backdrop-filter. */
:root{--h-cabecera:53px;}
.filters{position:sticky; top:var(--h-cabecera); z-index:40;
  background:var(--bg); border-bottom:1px solid var(--line);}
.filters-in{max-width:900px; margin:0 auto; padding:12px 24px; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px; font-family:var(--sans);}
.filters .lbl{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-right:6px;}
.chip{border:1px solid var(--line); background:var(--card); color:var(--fg); font:600 13.5px var(--sans);
  padding:6px 14px; border-radius:20px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;}
.chip i{width:8px; height:8px; border-radius:50%; display:block; background:currentColor;}
.chip:hover{border-color:var(--accent);}
.chip[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg);}
.chip.c-ciencia i{color:var(--t-ciencia);} .chip.c-institucion i{color:var(--t-institucion);}
.chip.c-atmosfera i{color:var(--t-atmosfera);} .chip.c-internacional i{color:var(--t-internacional);}
.count{margin-left:auto; font-size:13px; color:var(--muted); white-space:nowrap;}

/* en móvil la barra pegajosa no puede ocupar un tercio de la pantalla:
   los filtros pasan a una sola fila que se desplaza en horizontal */
@media(max-width:720px){
  .filters-in{flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none; padding:10px 24px;}
  .filters-in::-webkit-scrollbar{display:none;}
  .filters .lbl{display:none;}
  .chip{flex:0 0 auto;}
  .count{margin-left:10px; padding-right:4px;}
}

/* ---------- eje ----------
   GEOMETRÍA: una sola variable manda.
   --col  ancho de la columna de fechas
   --gap  separación entre fecha y texto
   --eje  distancia del eje al borde del contenido = col + gap/2
   La línea, los puntos y la columna de fechas se derivan de ahí; cambiando
   --col y --eje juntos no se descuadra nada. Los puntos se posicionan
   respecto de .ev (no de .what) para que el recuadro de los hitos mayores
   —con su borde y su margen— no los desplace.
   ------------------------------------------------------------------ */
.tl{max-width:900px; margin:0 auto; padding:44px 24px 90px; position:relative;
  --col:116px; --gap:40px; --eje:136px;}
.tl::before{content:""; position:absolute; left:calc(24px + var(--eje)); top:0; bottom:90px; width:2px;
  background:linear-gradient(180deg,transparent,var(--line) 40px,var(--line) calc(100% - 60px),transparent);}
@media(max-width:720px){ .tl{--eje:7px;} }

.era{display:flex; align-items:center; gap:16px; margin:52px 0 26px; font-family:var(--sans);}
.era:first-child{margin-top:0;}
.era b{font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  background:var(--bg); padding-right:14px; position:relative; z-index:2;}
.era span{flex:1; height:1px; background:var(--line);}

.ev{position:relative; display:grid; grid-template-columns:var(--col) 1fr; gap:var(--gap); padding:0 0 26px;}
@media(max-width:720px){ .ev{grid-template-columns:1fr; gap:0; padding-left:32px;} }
.ev .when{font-family:var(--sans); font-size:13.5px; font-weight:700; color:var(--muted);
  text-align:right; padding-top:2px; padding-right:2px; line-height:1.35;
  font-variant-numeric:tabular-nums; hyphens:none;}
@media(max-width:720px){ .ev .when{text-align:left; padding-right:0; margin-bottom:4px;} }

/* el punto del eje: hijo absoluto de .ev, no de .what */
.ev::before{content:""; position:absolute; left:calc(var(--eje) - 5.5px); top:7px;
  width:11px; height:11px; border-radius:50%; background:var(--bg); border:2.5px solid var(--muted);}
.ev h3{font-size:19px; line-height:1.35; letter-spacing:-.012em; margin:0 0 5px;}
.ev h3 a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line);}
.ev h3 a:hover{color:var(--accent); border-bottom-color:var(--accent);}
.ev p{font-family:var(--sans); font-size:14.5px; line-height:1.6; color:var(--muted); margin:0;}
.ev .meta{font-family:var(--sans); font-size:12px; color:var(--muted); margin-top:7px;
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;}
.ev .theme{font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:11px;}

.ev[data-tema="ciencia"]::before{border-color:var(--t-ciencia);}
.ev[data-tema="ciencia"] .theme{color:var(--t-ciencia);}
.ev[data-tema="institucion"]::before{border-color:var(--t-institucion);}
.ev[data-tema="institucion"] .theme{color:var(--t-institucion);}
.ev[data-tema="atmosfera"]::before{border-color:var(--t-atmosfera);}
.ev[data-tema="atmosfera"] .theme{color:var(--t-atmosfera);}
.ev[data-tema="internacional"]::before{border-color:var(--t-internacional);}
.ev[data-tema="internacional"] .theme{color:var(--t-internacional);}

/* hitos mayores */
.ev.major .what{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0; padding:18px 22px;}
.ev.major::before{left:calc(var(--eje) - 6.5px); top:22px; width:13px; height:13px;
  background:var(--accent); border-color:var(--bg);}
.ev.major .when{padding-top:20px;}
@media(max-width:720px){ .ev.major .when{padding-top:2px;} }
.ev.major h3{font-size:22px;}
.ev.major p{color:var(--fg);}

/* estado oculto por filtro */
.ev.hide{display:none;}
.era.hide{display:none;}

.tl-foot{max-width:900px; margin:0 auto; padding:0 24px 40px;}