/* ============================================================
   cedares — Home · Fechas clave (línea de tiempo)
   Figma: 61:6441 (desktop) · 324:4313 (móvil).
   Móvil: 2 columnas (el último hito a lo ancho). Desktop (>=1024px):
   fluye a 5 por fila + 4 en la segunda. El conector es una línea por punto
   (CSS responsive) en vez del SVG serpenteante fijo del Figma.
   ============================================================ */

.fechas {
	position: relative;
}

.fechas__inner {
	/* Cap en el rango móvil: el conector SVG (preserveAspectRatio:none) deforma
	   sus codos si el layout de 2 columnas se estira demasiado (tablets ~600-1023).
	   Capando el ancho, el conjunto conserva las proporciones del teléfono y las
	   curvas siguen redondas. Desktop restaura el ancho completo. */
	max-width: 520px;
	margin-inline: auto;
	padding: 80px 24px; /* móvil */
	display: flex;
	flex-direction: column;
	gap: 50px;
	position: relative;
	z-index: 1; /* contenido por encima del glow celeste de desktop */
}

/* Glow celeste de desktop: oculto por defecto (en móvil se usa .fechas__glow). */
.fechas__glow-desktop {
	display: none;
}

/* --- Encabezado --- */
.fechas__head {
	display: flex;
	flex-direction: column;
}

.fechas__title {
	margin: 0;
	font-weight: var(--ced-fw-bold);
	font-size: 30px; /* móvil (360px) */
	line-height: 1.24;
	color: #fff;
	word-break: break-word;
}

/* --- Timeline (contenedor) --- */
.fechas__timeline-wrap {
	position: relative;
}

/* Conector móvil (replica la técnica de desktop): línea horizontal por fila +
   un puente serpenteante (curva derecha → cruce → curva izquierda) por gap.
   La horizontal la dibuja SÓLO el hito de la columna izquierda (nth-child impar)
   y abarca el ancho del timeline (213% = 100% ÷ flex-basis 47%): así termina en
   el borde del contenido, donde baja la curva, sin pasarse al borde de pantalla.
   La última fila (2019, .hito--wide) no lleva horizontal: como en el Vector6 de
   Figma, el trazo sólo llega al punto y termina. */
.hito:nth-child(odd):not(.hito--wide)::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 17px;
	left: 17px; /* arranca en el centro del punto izquierdo */
	/* Termina donde arranca el codo de bajada del puente (x486.5 ≈ 201% del hito),
	   descontando el left (17px) para no pasarse a la derecha. */
	width: calc(201% - 20px);
	height: 1px;
	background: rgba(255, 255, 255, 0.16);
}

.hito__bridge {
	position: absolute;
	z-index: 0;
	top: 17px;
	left: 0;
	/* 100% ÷ flex-basis (47%) del hito ⇒ ancho del timeline; el -Npx mete el extremo
	   derecho hacia adentro (mismo inset que la horizontal ::before). */
	width: calc(213% - 3px);
	height: calc(100% + 72px); /* fila + row-gap ⇒ baja al punto de la fila siguiente */
	pointer-events: none;
}

.hito__bridge svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fechas__timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1; /* por encima del conector móvil */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 72px; /* móvil */
	/* En móvil NO se recorta: dejaría fuera el glow celeste que sobresale a la
	   izquierda. El recorte del conector desktop se hace en su media query. */
}

/* --- Hito --- */
.hito {
	position: relative;
	flex: 0 0 47%; /* móvil: 2 columnas */
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.hito--wide {
	flex-basis: 100%; /* móvil: 2019 ocupa el ancho completo */
}

/* Móvil: la columna derecha deja margen a la derecha para que su texto no toque
   la vertical del conector (que baja pegada al borde). Desktop lo resetea. */
.hito:nth-child(even) {
	padding-right: 14px;
}

/* El conector serpenteante (SVG) sólo se dibuja en desktop; ver el media query
   de abajo. En móvil el Figma usa un serpenteo distinto (pendiente). */
.hito__wire {
	display: none;
}

/* Glow celeste decorativo (Figma Ellipse 7, sólo móvil). Va dentro del hito de
   1967 para seguir a la fila 2; z-index -1 lo manda detrás del contenido (el
   timeline crea contexto con z-index:1, así el -1 queda contenido). La opacidad
   (0.36) y el blur ya están horneados en el PNG. */
.fechas__glow {
	position: absolute;
	z-index: -1;
	top: -300px;
	left: -342px;
	width: 680px;
	height: 680px;
	pointer-events: none;
	background: url('../img/fechas/glow-celeste.png') no-repeat center / contain;
}

.hito__top,
.hito__desc {
	position: relative;
	z-index: 1;
}

/* --- Punto (cuadro con punto magenta) --- */
.hito__top {
	display: flex;
	align-items: center;
	gap: 15px;
}

.hito__punto {
	flex: 0 0 auto;
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.30);
	background: rgba(18, 30, 66, 0.85);
}

.hito__punto::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 34px;
	background: var(--ced-magenta); /* cta_default #E41069 */
}

/* --- Año --- */
.hito__anio {
	font-family: var(--ced-font-mono);
	font-weight: 700; /* Roboto Mono Bold (peso 700 sintetizado: sólo 500 self-hosted) */
	font-size: 25px; /* móvil (360px) */
	line-height: 1.07;
	letter-spacing: 0.02em;
	color: #fff;
	white-space: nowrap;
}

/* --- Descripción --- */
.hito__desc {
	display: flex;
	flex-direction: column;
	color: rgba(255, 255, 255, 0.85);
}

.hito__lead {
	margin: 0 0 8px; /* móvil */
	font-weight: 800; /* ExtraBold */
	font-size: 15px; /* móvil (360px) */
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.hito__text {
	margin: 0;
	font-weight: var(--ced-fw-regular);
	font-size: 15px; /* móvil (360px) */
	line-height: 1.4;
	letter-spacing: 0.01em;
}

/* ============================================================
   Desktop (>=1024px) — Figma 61:6441
   ============================================================ */
@media (min-width: 1024px) {
	.fechas__inner {
		max-width: 1664px; /* restaura el ancho completo (el cap es sólo móvil) */
		padding: 130px 112px;
		gap: 80px;
	}

	.fechas__title {
		font-size: 48px;
	}

	.fechas__timeline {
		row-gap: 90px;
	}

	.hito {
		flex-basis: 18%; /* 5 por fila → 5 + 4 */
	}

	.hito:nth-child(even) {
		padding-right: 0; /* el margen derecho es sólo para el móvil */
	}

	/* El glow celeste móvil (dentro del hito) es sólo del diseño móvil. */
	.fechas__glow {
		display: none;
	}

	/* Glow celeste de desktop (Figma node 36:1009): mismo PNG mostrado a 1.6×
	   (680→1088 ⇒ disco 435, blur 162.5, como el diseño). A nivel de section,
	   detrás del contenido; asoma por la izquierda a la altura de la fila 2. */
	.fechas__glow-desktop {
		display: block;
		position: absolute;
		z-index: 0;
		top: 80px;
		left: -480px;
		width: 1088px;
		height: 1088px;
		pointer-events: none;
		background: url('../img/fechas/glow-celeste.png') no-repeat center / contain;
	}

	/* Recorta el conector serpenteante (SVG) que desborda el timeline. */
	.fechas__timeline {
		overflow: hidden;
	}

	/* Conector serpenteante (Figma Vector5): el SVG va anclado al 1.er hito y
	   se estira para cubrir todo el timeline. Ancho = 100% ÷ flex-basis (18%)
	   del hito ⇒ 555.56%. Alto = fila 1 (100%) + row-gap ⇒ baja justo a la
	   línea de la 2.ª fila. non-scaling-stroke mantiene el grosor 1px parejo. */
	.hito::before,
	.hito__bridge {
		display: none; /* en desktop manda el conector .hito__wire */
	}

	.hito__wire {
		display: block;
		position: absolute;
		z-index: 0;
		top: 17px;
		left: 0;
		width: 555.56%; /* 100% ÷ flex-basis (18%) del hito ⇒ ancho del timeline */
		height: calc(100% + 90px);
		pointer-events: none;
	}

	.hito__wire svg {
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	.hito--wide {
		flex-basis: 18%; /* en desktop 2019 es un hito normal de la 2.ª fila */
	}

	.hito__anio {
		font-size: 28px;
	}

	.hito__lead {
		margin-bottom: 8px;
		font-size: 15px;
	}

	.hito__text {
		font-size: 15px;
	}
}

/* Desktop estrecho (1024–1279): con el padding completo las 5 columnas quedan muy
   angostas → filas altas → el SVG del conector se estira en vertical y deforma los
   codos. Reduciendo el padding lateral las columnas ensanchan, las filas bajan y el
   conector recupera proporciones. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.fechas__inner {
		padding-left: 48px;
		padding-right: 48px;
	}
}