/**
 * Zenth Toolkit — zenth-timeline: mecánica de la línea de tiempo de hitos.
 *
 * Solo layout/estructura (fila flex, desplazamiento por transform, riel de
 * progreso, reset de flechas). Sin colores de marca ni tipografías ni
 * medidas de página (paddings/radios del mockup): esos viven en el bloque
 * gestionado del tema (seeds/style-header.css, bloque "NOSOTROS"),
 * anidados bajo la clase de la sección.
 *
 * Geometría del desplazamiento: la variable --zenth-tl-n (total de hitos,
 * impresa inline por PHP en .zenth-tl__track) fija el ancho de la pista en
 * N por ciento de la caja .zenth-tl y el de cada hito en 1/N de esa pista
 * — es decir, cada hito vuelve a medir el 100% de .zenth-tl. Con eso, un
 * transform: translateX(-(100/N)·index %) sobre la pista (porcentaje
 * relativo al ANCHO PROPIO de la pista, que es N veces el de la caja)
 * desplaza exactamente "index" cajas completas, sin necesitar recalcular
 * nada en JS al redimensionar la ventana. Misma técnica que
 * assets/css/zenth-area-carousel.css ("--zenth-acar-n"), aquí con UN solo
 * hito visible en vez de un grupo.
 *
 * Riel de progreso: --zenth-tl-progress (0..1, en .zenth-tl) posiciona
 * .zenth-tl__dot a lo largo de .zenth-tl__rail con un simple "left:
 * calc(var(...) * 100%)". PHP la imprime ya calculada para el hito activo
 * inicial; assets/js/zenth-timeline.js la actualiza en cada navegación.
 */

.zenth-tl {
	position: relative;
	overflow: hidden;
	/* El swipe horizontal (assets/js/zenth-timeline.js, Pointer Events) no debe
	   robarle el scroll vertical de la página a un gesto táctil: solo se
	   captura el eje X, el navegador maneja Y de forma nativa. */
	touch-action: pan-y;
	/* Colchón vertical para que el anillo de foco de las flechas prev/next
	   no se recorte contra este overflow:hidden (mismo truco que
	   zenth-area-carousel: padding compensado por margin negativo igual,
	   los hijos no se mueven, solo crece el área de recorte). */
	padding: 6px 0;
	margin: -6px 0;
}

.zenth-tl__rail {
	position: relative;
}

/* Oculta visualmente el estado del aria-live ("zenth-tl__status" en
   class-zenth-timeline.php) sin quitarlo del árbol de accesibilidad —
   patrón "clip" estándar, mismo criterio que ".screen-reader-text" de WP
   core: 1 por 1 px, recortado, fuera del flujo. Nunca "display:none" ni
   "visibility:hidden" (eso SÍ lo sacaría del árbol de accesibilidad y el
   aria-live dejaría de anunciar). */
.zenth-tl__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.zenth-tl__dot {
	position: absolute;
	top: 50%;
	left: calc( var( --zenth-tl-progress, 0 ) * 100% );
	transform: translate( -50%, -50% );
	transition: left 0.4s ease;
	display: block;
}

.zenth-tl__track {
	display: flex;
	align-items: stretch;
	width: calc( 100% * var( --zenth-tl-n, 1 ) );
	transition: transform 0.4s ease;
	will-change: transform;
}

.zenth-tl__item {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc( 100% / var( --zenth-tl-n, 1 ) );
	width: calc( 100% / var( --zenth-tl-n, 1 ) );
	min-width: 0;
}

/* Solo el hito activo es interactivo/legible; el resto queda fuera del
   flujo de lectura mientras dura la transición (zenth-timeline.js además pone
   tabindex="-1" en los controles del hito oculto, si tuviera alguno: un
   elemento aria-hidden no debe contener foco). */
.zenth-tl__item[aria-hidden='true'] {
	pointer-events: none;
}

.zenth-tl__media {
	flex: 0 0 auto;
	min-width: 0;
	overflow: hidden;
}

.zenth-tl__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zenth-tl__nav {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Selector de dos clases (0,2,0): le gana por especificidad a
   "button:hover{…}" del reset.css de Hello Elementor (0,1,1), sin
   necesitar "!important" (regla de oro del proyecto) — mismo criterio que
   ".zenth-pswitch .zenth-pswitch__tab" en zenth-panel-switch.css. */
.zenth-tl .zenth-tl__prev,
.zenth-tl .zenth-tl__next {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.zenth-tl .zenth-tl__prev:hover,
.zenth-tl .zenth-tl__next:hover {
	background: transparent;
	color: inherit;
}

.zenth-tl .zenth-tl__prev:focus-visible,
.zenth-tl .zenth-tl__next:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Salto directo, sin animación, para quien pide menos movimiento. */
@media ( prefers-reduced-motion: reduce ) {
	.zenth-tl__track,
	.zenth-tl__dot {
		transition: none;
	}
}