/* =====================================================================
   ilia-linea-tiempo  (prefijo .iltl)
   Escritorio y tablet: línea central, hitos a ambos lados.
   Móvil (≤767px): línea a la izquierda, todo apilado a la derecha.
   ===================================================================== */
.iltl {
	--iltl-dot: 70px;
	--iltl-lw: 5px;
	--iltl-space: 140px;
	--iltl-tw: 62%;
	--iltl-ind: 40px;
	--iltl-ds: dashed;
	--iltl-dw: 4px;
	--iltl-iw: 88%;
	--iltl-ir: auto;
	--iltl-ir-r: 28px;

	--iltl-c-line: #6d1b8f;
	--iltl-c-dot: #6d1b8f;
	--iltl-c-dash: #6d1b8f;
	--iltl-c-year: #6d1b8f;
	--iltl-c-text: #6d1b8f;

	width: 100%;
	box-sizing: border-box;
}
.iltl *, .iltl *::before, .iltl *::after { box-sizing: border-box; }

/* ----- Hito: 3 columnas (lado · círculo · lado) ----- */
.iltl .iltl__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--iltl-dot) minmax(0, 1fr);
	grid-template-rows: auto var(--iltl-dot) auto var(--iltl-space);
	align-items: start;
}
.iltl .iltl__item.is-last,
.iltl .iltl__item.is-only { grid-template-rows: auto var(--iltl-dot) auto 0; }

/* Línea vertical (un tramo por hito) */
.iltl .iltl__line {
	grid-column: 2;
	grid-row: 1 / 5;
	justify-self: center;
	align-self: stretch;
	width: var(--iltl-lw);
	background: var(--iltl-c-line);
}
.iltl .iltl__item.is-first .iltl__line { grid-row: 2 / 5; margin-top: calc(var(--iltl-dot) / 2); }
.iltl .iltl__item.is-last .iltl__line  { grid-row: 1 / 3; margin-bottom: calc(var(--iltl-dot) / 2); }
.iltl .iltl__item.is-only .iltl__line  { display: none; }

/* Círculo */
.iltl .iltl__dot {
	grid-column: 2;
	grid-row: 2;
	align-self: center;
	justify-self: center;
	width: var(--iltl-dot);
	height: var(--iltl-dot);
	border-radius: 50%;
	background: var(--iltl-c-dot);
	position: relative;
	z-index: 1;
}

/* Línea horizontal (del círculo hacia el texto) */
.iltl .iltl__dash {
	grid-row: 2;
	align-self: center;
	width: var(--iltl-tw);
	height: 0;
	border-top: var(--iltl-dw) var(--iltl-ds) var(--iltl-c-dash);
}
.iltl .iltl__year, .iltl .iltl__text { width: var(--iltl-tw); }

/* Texto a la derecha del círculo */
.iltl .iltl__item--text-right .iltl__dash  { grid-column: 3; justify-self: start; }
.iltl .iltl__item--text-right .iltl__year  { grid-column: 3; grid-row: 1; justify-self: start; padding-left: var(--iltl-ind); }
.iltl .iltl__item--text-right .iltl__text  { grid-column: 3; grid-row: 3; justify-self: start; padding-left: var(--iltl-ind); }
.iltl .iltl__item--text-right .iltl__media { grid-column: 1; justify-self: end; }

/* Texto a la izquierda del círculo */
.iltl .iltl__item--text-left .iltl__dash  { grid-column: 1; justify-self: end; }
.iltl .iltl__item--text-left .iltl__year  { grid-column: 1; grid-row: 1; justify-self: end; padding-right: var(--iltl-ind); }
.iltl .iltl__item--text-left .iltl__text  { grid-column: 1; grid-row: 3; justify-self: end; padding-right: var(--iltl-ind); }
.iltl .iltl__item--text-left .iltl__media { grid-column: 3; justify-self: start; }

.iltl .iltl__year {
	margin: 0;
	padding-top: 0;
	padding-bottom: .05em;
	color: var(--iltl-c-year);
	font-size: clamp(3rem, 6.2vw, 7rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.01em;
	align-self: end;
}
.iltl .iltl__text {
	margin: 0;
	padding-top: 14px;
	color: var(--iltl-c-text);
	font-family: "IBM Plex Mono", "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: clamp(1rem, 1.5vw, 1.4rem);
	font-weight: 400;
	line-height: 1.45;
}

/* Imagen (lado opuesto, centrada en vertical respecto al hito) */
.iltl .iltl__media {
	grid-row: 1 / 4;
	align-self: center !important;
	width: var(--iltl-iw);
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--iltl-ir-r);
	line-height: 0;
}
/* !important: evita que reglas globales del tema/Elementor (img {height:100%}, object-fit, etc.) deformen la imagen */
.iltl .iltl__media .iltl__img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	aspect-ratio: var(--iltl-ir) !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}

/* ----- Entrada al hacer scroll ----- */
html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item .iltl__year,
html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item .iltl__text,
html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item .iltl__media {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
}
html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item .iltl__dot {
	transform: scale(0);
	transition: transform .6s cubic-bezier(.3, 1.5, .5, 1);
}
html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item .iltl__dash {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1s cubic-bezier(.65, 0, .2, 1) .15s;
}
html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item--text-left .iltl__dash { clip-path: inset(0 0 0 100%); }
html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item .iltl__text  { transition-delay: .15s; }
html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item .iltl__media { transition-delay: .25s; }

html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item.is-in .iltl__year,
html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item.is-in .iltl__text,
html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item.is-in .iltl__media { opacity: 1; transform: none; }
html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item.is-in .iltl__dot  { transform: none; }
html.iltl-js body:not(.elementor-editor-active) .iltl--anim .iltl__item.is-in .iltl__dash { clip-path: inset(0 0 0 0); }

/* ----- Tablet ----- */
@media (max-width: 1024px) {
	.iltl { --iltl-dot: 54px; --iltl-lw: 4px; --iltl-space: 100px; --iltl-tw: 80%; --iltl-ind: 24px; --iltl-iw: 92%; }
	.iltl .iltl__year { font-size: clamp(2.6rem, 7vw, 4.5rem); }
	.iltl .iltl__text { font-size: clamp(.85rem, 1.7vw, 1.05rem); }
}

/* ----- Móvil: línea a la izquierda ----- */
@media (max-width: 767px) {
	.iltl { --iltl-dot: 28px; --iltl-lw: 3px; --iltl-space: 56px; --iltl-tw: 100%; --iltl-ind: 0px; --iltl-iw: 100%; --iltl-dw: 3px; --iltl-off: calc(clamp(2.4rem, 11vw, 3.4rem) / 2 - var(--iltl-dot) / 2); }

	.iltl .iltl__item,
	.iltl .iltl__item.is-last,
	.iltl .iltl__item.is-only {
		grid-template-columns: var(--iltl-dot) minmax(0, 1fr);
		grid-template-rows: auto auto auto var(--iltl-space);
		column-gap: 18px;
	}
	.iltl .iltl__item.is-last, .iltl .iltl__item.is-only { grid-template-rows: auto auto auto 0; }

	.iltl .iltl__line { grid-column: 1; grid-row: 1 / 5; }
	.iltl .iltl__item.is-first .iltl__line { grid-row: 1 / 5; margin-top: calc(var(--iltl-off) + var(--iltl-dot) / 2); }
	.iltl .iltl__item.is-last .iltl__line  { grid-row: 1; margin-bottom: 0; align-self: start; height: calc(var(--iltl-off) + var(--iltl-dot) / 2); }

	.iltl .iltl__dot { grid-column: 1; grid-row: 1; align-self: start; margin-top: var(--iltl-off); }

	/* línea punteada: bajo el año */
	.iltl .iltl__dash { display: none; }

	.iltl .iltl__item--text-left .iltl__year,
	.iltl .iltl__item--text-right .iltl__year { grid-column: 2; grid-row: 1; justify-self: start; padding: 0; width: 100%; font-size: clamp(2.4rem, 11vw, 3.4rem); text-align: left; }
	.iltl .iltl__item--text-left .iltl__text,
	.iltl .iltl__item--text-right .iltl__text { grid-column: 2; grid-row: 2; justify-self: start; padding: 10px 0 0; width: 100%; text-align: left; font-size: .95rem; }
	.iltl .iltl__item--text-left .iltl__media,
	.iltl .iltl__item--text-right .iltl__media { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	html.iltl-js body .iltl--anim .iltl__year,
	html.iltl-js body .iltl--anim .iltl__text,
	html.iltl-js body .iltl--anim .iltl__media,
	html.iltl-js body .iltl--anim .iltl__dot,
	html.iltl-js body .iltl--anim .iltl__dash {
		opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
	}
}