/* Portada — estilos específicos (prefijo .inicio- / .lt- / .linea-tiempo). */

/* --------------------------------------------------------------------------
   Hero oscuro con brillo rojo
   -------------------------------------------------------------------------- */
.inicio-hero { position:relative; overflow:hidden;
	padding-block:clamp(3.5rem,10vh,7rem) clamp(3rem,7vw,5.5rem); }
.inicio-hero__glow { position:absolute; inset:0; pointer-events:none;
	background:
		radial-gradient(60% 90% at 88% 22%, rgba(150,26,20,.5) 0%, rgba(90,15,12,.26) 34%, transparent 68%),
		radial-gradient(40% 60% at 78% 40%, rgba(231,97,28,.14) 0%, transparent 60%); }
.inicio-hero__cuerpo { position:relative; z-index:1; width:100%; }
.inicio-hero__titulo { font-family:var(--f-display); font-weight:600; color:var(--crema);
	font-size:clamp(2.6rem, 7vw, 6rem); line-height:.97; letter-spacing:-0.025em; max-width:16ch; }
.inicio-hero__titulo em { font-style:italic; color:var(--rojo); }
.inicio-hero__lede { font-family:var(--f-display); font-weight:600; color:var(--crema);
	font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.4; max-width:56ch; margin-top:1.5rem; }
.inicio-hero__filete { border-color:var(--linea-negro); margin-block:clamp(1.5rem,3vw,2.4rem); }
.inicio-hero__pie { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.inicio-hero__pie--botones { justify-content:flex-start; gap:1rem; }

/* --------------------------------------------------------------------------
   Línea de tiempo interactiva (patrón ARIA tabs)
   -------------------------------------------------------------------------- */
.linea-tiempo { margin-top:clamp(2.25rem,5vw,3.5rem); }
.linea-tiempo__cinta { display:flex; align-items:center; justify-content:space-between; gap:1rem;
	padding-bottom:.9rem; border-bottom:1px solid var(--linea-negro); }
.linea-tiempo__rotulo { color:var(--naranja); }
.linea-tiempo__controles { display:flex; gap:.5rem; }
.lt-flecha { width:34px; height:30px; display:grid; place-items:center; border:1px solid var(--linea-negro);
	border-radius:var(--radio); color:var(--crema); font-family:var(--f-mono); font-size:.9rem;
	transition:background .18s ease, color .18s ease, border-color .18s ease; }
.lt-flecha:hover { background:var(--crema); color:var(--negro); border-color:var(--crema); }

/* Riel horizontal desplazable */
.linea-tiempo__riel { display:flex; gap:1.5rem; overflow-x:auto; padding-block:1.4rem .6rem;
	scroll-snap-type:x proximity; scrollbar-width:thin; }
.linea-tiempo__riel::-webkit-scrollbar { height:4px; }
.linea-tiempo__riel::-webkit-scrollbar-thumb { background:var(--linea-negro); border-radius:99px; }

.lt-hito { flex:0 0 auto; width:9.5rem; display:grid; grid-template-rows:auto 20px auto;
	justify-items:center; row-gap:.5rem; text-align:center; scroll-snap-align:start;
	background:none; border:0; cursor:pointer; padding:0; }
.lt-hito__anio { font-family:var(--f-mono); font-size:.72rem; font-weight:600; letter-spacing:.14em;
	color:var(--crema-70); transition:color .18s ease; }

/* Banda central: eje continuo + punto encima */
.lt-hito__punto { position:relative; width:100%; min-height:20px; display:grid; place-items:center; }
.lt-hito__punto::before { content:''; position:absolute; top:50%; left:0; right:calc(-1.5rem); height:1px;
	background:var(--linea-negro); transform:translateY(-50%); }
.lt-hito:last-child .lt-hito__punto::before { right:0; }
.lt-hito__punto::after { content:''; position:relative; z-index:1; width:12px; height:12px; border-radius:50%;
	background:var(--crema-70); border:2px solid var(--negro); transition:background .18s ease, box-shadow .18s ease; }

.lt-hito__titulo { font-family:var(--f-sans); font-size:.82rem; line-height:1.25; color:var(--crema-70);
	transition:color .18s ease; }

.lt-hito:hover .lt-hito__anio,
.lt-hito:hover .lt-hito__titulo { color:var(--crema); }
.lt-hito:hover .lt-hito__punto::after { background:var(--crema); }
.lt-hito.es-activo .lt-hito__anio { color:var(--rojo); }
.lt-hito.es-activo .lt-hito__titulo { color:var(--crema); }
.lt-hito.es-activo .lt-hito__punto::after { background:var(--rojo); border-color:var(--negro);
	box-shadow:0 0 0 4px rgba(195,31,43,.28); }

/* Panel de cobertura del hito seleccionado */
.linea-tiempo__paneles { margin-top:1.25rem; border-top:1px solid var(--linea-negro); padding-top:1.5rem; }
.lt-panel[hidden] { display:none; }
.lt-panel__fecha { color:var(--naranja); }
.lt-panel__titulo { font-family:var(--f-display); font-weight:600; color:var(--crema);
	font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.1; letter-spacing:-0.01em; margin-top:.5rem; max-width:24ch; }
.lt-panel__desc { color:var(--crema-70); margin-top:.75rem; max-width:60ch; }
.lt-panel__enlace { color:var(--crema); margin-top:1rem; }
.lt-panel__enlace:hover { color:var(--rojo); }

/* --------------------------------------------------------------------------
   Viñeta destacada (4:5)
   -------------------------------------------------------------------------- */
.inicio-vineta__grid { display:grid; grid-template-columns:auto 1fr; gap:clamp(1.75rem,4vw,3.5rem); align-items:center; }
.inicio-vineta__marco { width:clamp(14rem,28vw,20rem); aspect-ratio:4/5; overflow:hidden;
	background:var(--bg-2); border:1px solid var(--borde); border-radius:var(--radio); }
.inicio-vineta__marco a { display:block; width:100%; height:100%; }
.inicio-vineta__marco img { width:100%; height:100%; object-fit:cover;
	transition:transform .5s ease, filter .5s ease; filter:saturate(.9); }
.inicio-vineta__marco:hover img { transform:scale(1.03); filter:saturate(1); }
.inicio-vineta__marco:not(:has(img)) { display:grid; place-items:center; color:var(--tenue); }
.inicio-vineta__titulo { font-family:var(--f-display); font-weight:600;
	font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.05; letter-spacing:-0.01em; margin-top:.6rem; }
.inicio-vineta__pie { margin-top:1rem; color:var(--fg-70); font-family:var(--f-display); font-style:italic;
	font-size:1.15rem; line-height:1.4; max-width:46ch; }
.inicio-vineta__texto .boton { margin-top:1.5rem; }

/* --------------------------------------------------------------------------
   Formación teaser
   -------------------------------------------------------------------------- */
.inicio-formacion__grid { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.inicio-formacion__titulo { font-family:var(--f-display); font-weight:600;
	font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.02; letter-spacing:-0.02em; margin-top:.75rem; }
.inicio-formacion__titulo em { font-style:italic; color:var(--rojo); }
.inicio-formacion__texto p { max-width:48ch; color:var(--fg-70); font-size:1.05rem; }
.inicio-formacion__texto .boton { margin-top:1.5rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:900px){
	.inicio-vineta__grid { grid-template-columns:1fr; }
	.inicio-vineta__marco { width:min(18rem,72vw); }
	.inicio-formacion__grid { grid-template-columns:1fr; }
}