/* Levapan Elements — Línea de tiempo */

.lv-timeline {
	--lv-tl-visible: 5;
	--lv-tl-circle-size: 96px;
	--lv-tl-circle-border: 4px;
	--lv-tl-circle-border-color: #ffffff;
	--lv-tl-circle-border-color-active: #cf1d1d;
	--lv-tl-circle-bg: #ffffff;
	--lv-tl-circle-border-color-hover: #cf1d1d;
	--lv-tl-circle-bg-hover: #ffffff;
	--lv-tl-circle-scale-active: 1.25;
	/* Color del SVG del círculo. Se inyecta en línea con `fill: currentColor`, así
	   que alguien tiene que aportar ese color: no existe un «conserva los suyos».
	   Se fija un valor explícito en vez de `inherit` porque el botón ya usa
	   `color` para el año y el icono acabaría atado a él sin quererlo. */
	--lv-tl-circle-icon-color: #303030;
	--lv-tl-line-color: #d9d9d9;
	--lv-tl-line-width: 2px;
	--lv-tl-year-color: #303030;
	--lv-tl-year-color-active: #cf1d1d;
	--lv-tl-year-color-hover: #cf1d1d;
	--lv-tl-year-gap: 16px;
	--lv-tl-content-gap: 48px;
	--lv-tl-arrow-size: 44px;
	--lv-tl-arrow-icon-size: 18px;
	--lv-tl-arrow-color: #ffffff;
	--lv-tl-arrow-bg: #cf1d1d;

	/* Estados que sin valor propio heredan el normal: así el aspecto por
	   defecto es el mismo que antes de exponer estos controles. */
	--lv-tl-circle-bg-active: var(--lv-tl-circle-bg);
	--lv-tl-circle-icon-color-hover: var(--lv-tl-circle-icon-color);
	--lv-tl-circle-icon-color-active: var(--lv-tl-circle-icon-color);
	--lv-tl-arrow-color-hover: var(--lv-tl-arrow-color);
	--lv-tl-arrow-bg-hover: var(--lv-tl-arrow-bg);
	--lv-tl-arrow-opacity-disabled: 0.35;

	display: flex;
	flex-direction: column;
	gap: var(--lv-tl-content-gap);
}

/* --- Navegación --- */

.lv-timeline__nav {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.lv-timeline__track {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	/* `overflow-x: auto` obliga a que `overflow-y` compute a `auto`, y el círculo
	   activo escalado genera desbordamiento vertical: aparecía scroll vertical
	   dentro de la pista. `clip` no crea contenedor de scroll en ese eje, así que
	   ni la rueda ni `scrollIntoView` pueden moverla en vertical. */
	overflow-y: hidden; /* Fallback Safari < 16 */
	overflow-y: clip;
	scrollbar-width: none;
	/* El activo crece por encima del resto: hace falta aire arriba. */
	padding-block-start: calc(var(--lv-tl-circle-size) * (var(--lv-tl-circle-scale-active) - 1) / 2);
}

.lv-timeline__track::-webkit-scrollbar {
	display: none;
}

.lv-timeline__points {
	position: relative;
	display: flex;
	align-items: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lv-timeline__point-wrap {
	position: relative;
	/* max(): en pantallas estrechas el reparto 100%/visible puede quedar por
	   debajo del círculo; los círculos se montaban unos sobre otros y tapaban
	   la línea. El mínimo reserva el círculo activo escalado + aire para que
	   la línea asome entre círculos; el track ya hace scroll horizontal. */
	flex: 0 0 max(
		calc(100% / var(--lv-tl-visible)),
		calc(var(--lv-tl-circle-size) * var(--lv-tl-circle-scale-active) + 16px)
	);
	display: flex;
	justify-content: center;
}

/* Línea horizontal que atraviesa los círculos: un segmento por hito en vez de
   un único ::before en el ul, porque el ul mide solo el ancho visible del
   track y un segmento único no acompañaba al contenido al hacer scroll (en
   responsive la línea moría antes de llegar a los últimos hitos). */
.lv-timeline__point-wrap::before {
	content: "";
	position: absolute;
	top: calc(var(--lv-tl-circle-size) / 2);
	inset-inline: 0;
	height: var(--lv-tl-line-width);
	background-color: var(--lv-tl-line-color);
	transform: translateY(-50%);
}

/* Especificidad doble a propósito: el Theme Style del kit estiliza `button`
   con `.elementor-kit-N button` y pisaría un selector de una sola clase. */
.lv-timeline .lv-timeline__point {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lv-tl-year-gap);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	cursor: pointer;
	color: var(--lv-tl-year-color);
	text-align: center;
}

/* El Theme Style del kit define `button:hover` / `button:focus` y repintaba el
   fondo del botón (la caja oscura tras el año). El reset normal no basta: hay
   que repetirlo en cada estado interactivo. */
.lv-timeline .lv-timeline__point:hover,
.lv-timeline .lv-timeline__point:focus,
.lv-timeline .lv-timeline__point:focus-visible,
.lv-timeline .lv-timeline__point:active {
	border: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: var(--lv-tl-year-color);
}

/* Sin anillo con el ratón, pero visible al navegar con teclado. */
.lv-timeline .lv-timeline__point:focus {
	outline: none;
}

.lv-timeline .lv-timeline__point:focus-visible {
	outline: 2px solid var(--lv-tl-circle-border-color-active);
	outline-offset: 4px;
	border-radius: 4px;
}

.lv-timeline__thumb {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--lv-tl-circle-size);
	height: var(--lv-tl-circle-size);
	border: var(--lv-tl-circle-border) solid var(--lv-tl-circle-border-color);
	border-radius: 50%;
	background-color: var(--lv-tl-circle-bg);
	overflow: hidden;
	/* `currentColor` del SVG en línea resuelve contra este `color`. Va aquí y no
	   en el botón porque el botón ya usa `color` para el año. */
	color: var(--lv-tl-circle-icon-color);
	transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.lv-timeline__thumb img,
.lv-timeline__thumb > svg {
	display: block;
	width: 100%;
	height: 100%;
}

.lv-timeline__thumb img {
	object-fit: cover;
}

/* Un <svg> en línea no es un elemento reemplazado como <img>: `object-fit` no
   manda sobre él. El recorte o el encaje lo decide el `preserveAspectRatio` que
   escribe Svg::sanitize() según «Ajuste de la imagen». El max-* es la red de
   seguridad para un archivo sin viewBox. */
.lv-timeline__thumb > svg {
	max-width: 100%;
	max-height: 100%;
	fill: currentColor;
}

/* Para logos: la imagen cabe entera dentro del círculo en vez de recortarse.
   El relleno lo fija cada hito con `--lv-tl-thumb-padding`; el 14% es el valor
   de siempre y sigue actuando cuando el hito no trae ninguno. */
.lv-timeline__thumb--contain img,
.lv-timeline__thumb--contain > svg {
	object-fit: contain;
	padding: var(--lv-tl-thumb-padding, 14%);
	box-sizing: border-box;
}

.lv-timeline__year {
	color: var(--lv-tl-year-color);
	transition: color 0.25s ease;
}

.lv-timeline__point.is-active .lv-timeline__thumb {
	border-color: var(--lv-tl-circle-border-color-active);
	background-color: var(--lv-tl-circle-bg-active);
	color: var(--lv-tl-circle-icon-color-active);
	transform: scale(var(--lv-tl-circle-scale-active));
}

.lv-timeline__point.is-active .lv-timeline__year {
	color: var(--lv-tl-year-color-active);
}

/* El punto activo no debe perder su estilo al pasar por encima: `:not(.is-active)`
   lo excluye en vez de depender del orden en la hoja. Especificidad doble por el
   mismo motivo que en `.lv-timeline .lv-timeline__point`. */
.lv-timeline .lv-timeline__point:hover:not(.is-active) .lv-timeline__thumb {
	border-color: var(--lv-tl-circle-border-color-hover);
	background-color: var(--lv-tl-circle-bg-hover);
	color: var(--lv-tl-circle-icon-color-hover);
}

.lv-timeline .lv-timeline__point:hover:not(.is-active) .lv-timeline__year {
	color: var(--lv-tl-year-color-hover);
}

/* --- Flechas --- */

.lv-timeline .lv-timeline__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--lv-tl-arrow-size);
	height: var(--lv-tl-arrow-size);
	margin: 0;
	margin-block-start: calc(
		var(--lv-tl-circle-size) / 2 - var(--lv-tl-arrow-size) / 2 +
		var(--lv-tl-circle-size) * (var(--lv-tl-circle-scale-active) - 1) / 2
	);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--lv-tl-arrow-bg);
	color: var(--lv-tl-arrow-color);
	font-size: var(--lv-tl-arrow-icon-size);
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* `:not(.is-disabled)`: una flecha sin más hitos hacia ese lado no reacciona. */
.lv-timeline .lv-timeline__arrow:hover:not(.is-disabled),
.lv-timeline .lv-timeline__arrow:focus-visible:not(.is-disabled) {
	background-color: var(--lv-tl-arrow-bg-hover);
	color: var(--lv-tl-arrow-color-hover);
}

.lv-timeline .lv-timeline__arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.lv-timeline .lv-timeline__arrow i {
	font-size: inherit;
}

.lv-timeline .lv-timeline__arrow.is-disabled {
	opacity: var(--lv-tl-arrow-opacity-disabled);
	cursor: default;
}

/* --- Contenido --- */

.lv-timeline__content > .e-con:not(.e-active) {
	display: none;
}