/*
 * Línea de tiempo: título, texto y una fila de hitos con un punto rojo sobre la línea.
 *
 *   Contenedor sección                → timeline
 *     Título                          → timeline__title
 *     Texto                           → timeline__lead
 *     Contenedor de hitos             → timeline__list
 *       Contenedor hito               → timeline__item   (por confirmar: timeline__item timeline__item--pending)
 *         Texto (año)                 → timeline__year
 *         Título H3                   → timeline__name
 *         Texto                       → timeline__text
 *
 * 1 columna en mobile, 2 en tablet, 4 en desktop.
 */

.timeline {
	--row-gap: 0px;

	display: block;
	width: 100%;
	padding: clamp(64px, 8vw, 120px) var(--wrap-gutter);
	background: var(--color-soft);
}

.timeline__title .elementor-heading-title {
	max-width: 11em;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(32px, 4.4vw, 64px);
	letter-spacing: -.04em;
	line-height: 1.02;
	color: var(--color-ink);
}

.timeline__lead {
	max-width: 28em;
	margin-top: 18px;
	padding-bottom: clamp(32px, 4vw, 48px);
	font-size: 19px;
	color: var(--color-muted);
}
.timeline__lead p { margin: 0; }

.timeline__list {
	--row-gap: 36px;
	--column-gap: 24px;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding-top: 10px;
}

.timeline__item {
	--timeline-accent: var(--color-brand-red);

	position: relative;
	display: block;
	padding: 28px 28px 0 0;
	border-top: 2px solid var(--color-ink);
}
.timeline__item::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--timeline-accent);
}
.timeline__item--pending { --timeline-accent: var(--color-muted); }

.timeline__year {
	font-size: clamp(34px, 3.6vw, 52px);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--timeline-accent);
}
.timeline__year p { margin: 0; }

.timeline__name { margin-top: 12px; padding-bottom: 6px; }
.timeline__name .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -.01em;
	line-height: 1.25;
	color: var(--color-ink);
}

.timeline__text {
	max-width: 19em;
	font-size: 16px;
	color: var(--color-muted);
}
.timeline__text p { margin: 0; }

@media (min-width: 521px) {
	.timeline__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.timeline__list {
		--row-gap: 0px;
		--column-gap: clamp(16px, 2vw, 32px);

		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}