/* ============================================================
   T3 · HITO HISTÓRICO — hoja específica de la plantilla
   Requiere estilo-base.css cargado antes.
   ============================================================ */

.hero{border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--brand-soft),transparent);}
.hero-in{max-width:820px; margin:0 auto; padding:56px 24px 44px;}
.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);}
.year{font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.18em; color:var(--accent); margin:0 0 10px;}
h1{font-size:clamp(34px,6vw,52px); line-height:1.06; letter-spacing:-.025em; margin:0 0 14px;}
.tagline{font-size:22px; color:var(--muted); font-style:italic; margin:0 0 26px;}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 26px; font-family:var(--sans); font-size:13px;
  color:var(--muted); border-top:1px solid var(--line); padding-top:18px;}
.badge{display:inline-flex; align-items:center; gap:6px; font-weight:600;}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ok);}

/* minmax(0,1fr) y no 1fr: con 1fr la columna nunca baja de su ancho
   mínimo de contenido y una cadena larga desplaza la página en horizontal */
.layout{max-width:var(--wide); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:minmax(0,1fr);}

/* ORDEN IMPORTANTE: la regla base de .toc-side va ANTES de la consulta de
   medios. Estaba después, y como tiene la misma especificidad ganaba por ser
   posterior: el índice lateral quedaba en display:none también en escritorio,
   la columna de 220 px se quedaba vacía y el artículo entero se metía en ella.
   La página se veía en una columna estrechísima. */
.toc-side{display:none; position:sticky; top:78px; align-self:start; max-height:calc(100vh - 100px);
  overflow-y:auto; font-family:var(--sans); font-size:13.5px; padding-bottom:40px;}
@media(min-width:1000px){
  .layout{grid-template-columns:220px minmax(0,1fr); gap:56px; padding-top:48px;}
  .toc-side{display:block;}
}
.toc-side p{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 12px;}
.toc-side a{display:block; color:var(--muted); text-decoration:none; padding:5px 0 5px 12px;
  border-left:2px solid var(--line); line-height:1.4;}
.toc-side a:hover{color:var(--accent); border-left-color:var(--accent);}

article{max-width:var(--read); padding:40px 0 80px;}
@media(min-width:1000px){ article{padding-top:0} }
.standfirst{font-size:21px; line-height:1.6; border-left:4px solid var(--accent); padding-left:22px; margin:0 0 44px;}
article h2{font-size:15px; font-family:var(--sans); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin:56px 0 14px; padding-top:26px; border-top:1px solid var(--line);}
article h3{font-size:22px; letter-spacing:-.01em; margin:34px 0 8px;}
article p{margin:16px 0;}
article ul, article ol{padding-left:24px;} article li{margin:8px 0;}

@media print{ .toc-side{display:none} .layout{display:block; padding:0} article{max-width:none; padding:0} }

/* ---------- listas de tareas (generadas por generar_hitos.py) ----------
   Aparecen en «Puntos abiertos» y en los apartados sobre el elemento
   material: son cosas que el proyecto todavía tiene que conseguir. Se
   pintan como casillas, no como viñetas, porque son trabajo pendiente
   y no una enumeración cualquiera. */
ul.tareas{list-style:none; margin:18px 0; padding:0;}
ul.tareas li{position:relative; padding:0 0 0 30px; margin:10px 0; line-height:1.6;}
ul.tareas li::before{content:""; position:absolute; left:0; top:.42em;
  width:14px; height:14px; border:2px solid var(--muted); border-radius:3px;}
/* pendiente en ámbar, igual que los ⚠ del resto del sitio: es trabajo por hacer */
ul.tareas li.porhacer::before{border-color:var(--warn);}
ul.tareas li.hecho::before{background:var(--ok); border-color:var(--ok);}
ul.tareas li.hecho::after{content:""; position:absolute; left:4px; top:calc(.42em + 2px);
  width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
ul.tareas li.hecho{color:var(--muted);}