/**
 * Zenth Timeline — Widget Elementor.
 * =====================================================================
 * Slider/carousel de hitos con progress bar interactivo.
 *
 * El widget genera el markup; este CSS controla solo lo visual.
 * Usa tokens --cr-* del child theme con fallbacks para que el widget
 * funcione standalone si se instala el plugin sin el child theme.
 *
 * Layout:
 *   ┌──────────────────────────────────────────────────────────────┐
 *   │ EYEBROW ROJO                                                 │
 *   │ TÍTULO SOLID                                                 │
 *   │ TÍTULO OUTLINE                                               │
 *   │                                                              │
 *   │ [⮘ rojo] [⮚ outline]   ← nav arrows                          │
 *   │                                                              │
 *   │ ○────●────────────────────────────────────────────  progress │
 *   │                                                              │
 *   │  ┌─────────────────┐   ┌──────────────────────────┐          │
 *   │  │ YEAR (outline)  │   │ Descripción del hito...  │          │
 *   │  │ TÍTULO          │   │                          │          │
 *   │  │                 │   │ [tag] [tag] [tag-filled] │          │
 *   │  └─────────────────┘   └──────────────────────────┘          │
 *   │     odd → year left           text right                     │
 *   │     even → year right         text left                      │
 *   └──────────────────────────────────────────────────────────────┘
 *
 * Línea bicolor (quiebre en el marker activo, vía --progress que setea el JS):
 *   track (gris)  → del inicio al marker activo (recorrido)
 *   fill  (rojo)  → del marker activo al extremo DERECHO del viewport
 *
 * Estados de markers controlados por JS:
 *   .is-past   → outline gris + centro negro (recorrido), tamaño base
 *   .is-active → filled rojo, más grande
 *   .is-future → invisible (opacity 0)
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Wrapper          → .zenth-timeline + __inner
 *   §2  Header           → eyebrow + título split (solid / outline)
 *   §3  Nav arrows       → __nav-prev / __nav-next (+ is-disabled)
 *   §4  Progress + markers→ track/fill bicolor + markers (past/active/future)
 *   §5  Stage + slides   → __stage / __slide (+ alternancia L/R por índice)
 *   §6  Slide head       → year (outline) + título
 *   §7  Slide body       → texto descriptivo
 *   §8  Tags / pills     → __tag (+ --filled, nth-child(2))
 *   §9  Responsive       → TODOS los @media de tamaño + a11y al final
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS (desktop es la base, sin media query)
 *   Desktop ≥1024 → re-aserción de stroke-width (min-width: 1024px)
 *   Tablet        → max-width: 1024px   (slide pasa de 2 col a 1)
 *   Mobile-small  → max-width: 600px    (títulos/year/marker más chicos)
 *
 *   Todos los @media de tamaño viven en §9. Hay además 1 media de
 *   accesibilidad (prefers-reduced-motion) en su propia subsección, que
 *   NO se consolida con los de tamaño.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · WRAPPER
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-timeline {
	width: 100%;
	padding: clamp(48px, 7vw, 96px) 0;
	background: var(--cr-color-black, #000);
	color: var(--cr-color-white, #fff);
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif);
}

.zenth-timeline:focus { outline: none; }
.zenth-timeline:focus-visible { outline: 2px solid var(--cr-color-primary, #c00000); outline-offset: -2px; }


.zenth-timeline__inner {
	max-width: var(--cr-container-max, 1440px);
	margin: 0 auto;
	padding: 0 var(--cr-container-pad, 32px);
	display: flex;
	flex-direction: column;
	gap: clamp(36px, 4.5vw, 64px);
	width: 100%;
	box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · HEADER — eyebrow + título split
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-timeline__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: clamp(14px, 1.5vw, 22px);
	width: 100%;
}

.zenth-timeline__eyebrow {
	color: var(--cr-color-primary, #c00000);
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}

.zenth-timeline__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(2px, 0.3vw, 6px);
	margin: 0;
	font-family: var(--cr-font-display, 'Super Brigade', Impact, sans-serif);
	font-style: italic;
	font-size: clamp(44px, 6.5vw, 104px);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--cr-color-white, #fff);
}

.zenth-timeline__title-line {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 0.32em;
}

.zenth-timeline__title-solid {
	color: var(--cr-color-white, #fff);
	-webkit-text-fill-color: var(--cr-color-white, #fff);
	font-family: inherit;
	font-weight: inherit;
}

.zenth-timeline__title-outline {
	display: inline-block;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: var(--cr-outline-width, 1.5px) var(--cr-color-white, #fff);
	font-family: inherit;
	font-weight: inherit;
	background: transparent;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · NAV ARROWS
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-timeline__nav {
	display: flex;
	flex-direction: row;
	gap: clamp(10px, 1.2vw, 14px);
	width: auto;
	padding: 0;
	margin: 0;
}

.zenth-timeline__nav-prev,
.zenth-timeline__nav-next {
	width: clamp(44px, 3.8vw, 56px);
	height: clamp(44px, 3.8vw, 56px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin: 0;
	padding: 0;
	cursor: pointer;
	transition: all 250ms ease;
	color: var(--cr-color-white, #fff);
}

.zenth-timeline__nav-prev {
	background: var(--cr-color-primary, #c00000);
	border: 1px solid var(--cr-color-primary, #c00000);
}

.zenth-timeline__nav-prev:hover,
button.zenth-timeline__nav-prev:focus {
	background: var(--cr-color-primary-hover, #e60000);
	transform: translateX(-2px);
}

.zenth-timeline__nav-next {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.zenth-timeline__nav-next:hover,
button.zenth-timeline__nav-next:focus {
	border-color: var(--cr-color-white, #fff);
	background: rgba(255, 255, 255, 0.06);
	transform: translateX(2px);
}

/* Estado "tope" (primer/último slide): el botón mantiene su apariencia
   normal — sin atenuación visual — pero el click no produce efecto.
   Decisión de diseño: el usuario prefiere ver siempre los botones
   activos en lugar de un disabled grisado. */
.zenth-timeline__nav-prev.is-disabled,
.zenth-timeline__nav-next.is-disabled {
	opacity: 1;
	pointer-events: none;
	transform: none;
}

.zenth-timeline__nav-prev svg,
.zenth-timeline__nav-next svg {
	display: block;
	width: clamp(16px, 1.2vw, 20px);
	height: clamp(16px, 1.2vw, 20px);
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · PROGRESS BAR + MARKERS
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-timeline__progress {
	position: relative;
	width: 100%;
	padding: 16px 0;
}

/* Línea bicolor. El punto de quiebre es la posición del marker activo,
   que el JS expone como la variable --progress (0%..100% del ancho del
   contenedor de markers).

   - TRACK (gris): del inicio hasta el marker activo → el camino ya recorrido.
   - FILL  (rojo): del marker activo hacia el extremo DERECHO del viewport.
     El bleed es solo a la derecha: right:calc(50% - 50vw) saca el borde
     derecho del contenedor (centrado, max-width 1440px) hasta el viewport.
     Los markers permanecen dentro del contenedor. */
.zenth-timeline__progress-track {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 1;
	width: var(--progress, 0%);
	height: 2px;
	background: rgba(255, 255, 255, 0.35);
	transform: translateY(-50%);
	pointer-events: none;
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.zenth-timeline__progress-fill {
	position: absolute;
	top: 50%;
	left: var(--progress, 0%);
	right: calc(50% - 50vw);
	z-index: 1;
	height: 2px;
	background: var(--cr-color-primary, #c00000);
	transform: translateY(-50%);
	pointer-events: none;
	transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.zenth-timeline__markers {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

/* Markers: indican la posición del usuario en el recorrido. Solo se ven
   el activo y los ya recorridos; los futuros quedan ocultos (pero ocupan
   su lugar en el flex para que las posiciones no se desplacen).
   - past   → outline gris + centro negro (hito ya recorrido)
   - active → punto rojo sólido, más grande (hito actual)
   - future → invisible (opacity 0)

   !important + appearance:none: los markers son <button>, y Elementor/el
   theme inyectan un reset global de botones (background/border transparentes)
   que de lo contrario los vuelve invisibles. La línea (track/fill) son <span>
   por eso sí se ven. Blindamos las props visuales del botón. */
.zenth-timeline__marker {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	width: 11px !important;
	height: 11px !important;
	min-width: 0;
	border-radius: 50% !important;
	border: 2px solid rgba(255, 255, 255, 0.4) !important;
	background: var(--cr-color-black, #000) !important;
	box-shadow: none !important;
	cursor: pointer;
	padding: 0 !important;
	margin: 0;
	/* width/height con overshoot (back-ease) → pop al activarse. El resto
	   de props sin overshoot. NO usamos transform aquí para no chocar con
	   posibles tweens GSAP. */
	transition:
		width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
		height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
		background-color 0.3s ease,
		border-color 0.3s ease,
		opacity 0.3s ease;
	flex-shrink: 0;
	opacity: 0;
}

.zenth-timeline__marker:focus { outline: none; }
.zenth-timeline__marker:focus-visible {
	outline: 2px solid var(--cr-color-white, #fff);
	outline-offset: 3px;
	opacity: 1;
}

.zenth-timeline__marker.is-past {
	opacity: 1;
	background: var(--cr-color-black, #000) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
}

.zenth-timeline__marker.is-active {
	opacity: 1;
	background: var(--cr-color-primary, #c00000) !important;
	border-color: var(--cr-color-primary, #c00000) !important;
	width: 16px !important;
	height: 16px !important;
}

/* "Ping" radar: anillo rojo que emana del marker activo en loop. Le da
   vida al punto actual sin alterar su estado de reposo (círculo sólido). */
.zenth-timeline__marker.is-active::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid var(--cr-color-primary, #c00000);
	opacity: 0;
	pointer-events: none;
	animation: cr-timeline-ping 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes cr-timeline-ping {
	0%   { transform: scale(0.55); opacity: 0.65; }
	70%  { opacity: 0; }
	100% { transform: scale(2); opacity: 0; }
}

.zenth-timeline__marker.is-future {
	opacity: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · STAGE + SLIDES
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-timeline__stage {
	position: relative;
	width: 100%;
	min-height: clamp(280px, 32vw, 380px);
}

.zenth-timeline__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(40px, 5vw, 80px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
	pointer-events: none;
}

.zenth-timeline__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.45s ease;
	pointer-events: auto;
	position: relative; /* el activo determina la altura del stage */
}

/* Alternancia L/R por índice (data-index par/impar) */
.zenth-timeline__slide[data-index="1"] .zenth-timeline__slide-head,
.zenth-timeline__slide[data-index="3"] .zenth-timeline__slide-head,
.zenth-timeline__slide[data-index="5"] .zenth-timeline__slide-head,
.zenth-timeline__slide[data-index="7"] .zenth-timeline__slide-head,
.zenth-timeline__slide[data-index="9"] .zenth-timeline__slide-head {
	grid-column: 2;
	text-align: right;
	align-items: flex-end;
}

.zenth-timeline__slide[data-index="1"] .zenth-timeline__slide-body,
.zenth-timeline__slide[data-index="3"] .zenth-timeline__slide-body,
.zenth-timeline__slide[data-index="5"] .zenth-timeline__slide-body,
.zenth-timeline__slide[data-index="7"] .zenth-timeline__slide-body,
.zenth-timeline__slide[data-index="9"] .zenth-timeline__slide-body {
	grid-column: 1;
	grid-row: 1;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · SLIDE HEAD — year (outline) + título
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-timeline__slide-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(14px, 1.5vw, 22px);
}

.zenth-timeline__slide-year {
	display: inline-block;
	font-family: var(--cr-font-display, 'Super Brigade', Impact, sans-serif);
	font-style: italic;
	font-size: clamp(36px, 3.6vw, 56px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: var(--cr-outline-width, 1.5px) var(--cr-color-white, #fff);
	margin: 0;
}

.zenth-timeline__slide-title {
	font-family: var(--cr-font-display, 'Super Brigade', Impact, sans-serif);
	font-style: italic;
	font-size: clamp(40px, 4.5vw, 76px);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--cr-color-white, #fff);
	margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · SLIDE BODY — texto descriptivo
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-timeline__slide-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(20px, 2.5vw, 32px);
}

.zenth-timeline__slide-text {
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif);
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 400;
	color: var(--cr-color-text-muted, #81817f);
	line-height: 1.6;
	margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · TAGS / PILLS
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-timeline__slide-tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: clamp(8px, 1vw, 14px);
}

.zenth-timeline__tag {
	display: inline-block;
	padding: clamp(8px, 1vw, 12px) clamp(18px, 2.2vw, 28px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	background: transparent;
	color: var(--cr-color-primary, #c00000);
	font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif);
	font-size: clamp(10px, 0.85vw, 13px);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.zenth-timeline__tag--filled {
	background: var(--cr-color-gray-800, #2a2a2a);
	border-color: var(--cr-color-gray-800, #2a2a2a);
	color: var(--cr-color-white, #fff);
}

/* El SEGUNDO tag de cada hito recibe un tratamiento distinto: pill gris
   medio sólido (estilo "stat" destacado), en vez del outline rojo del
   resto. Por posición (:nth-child(2)); los demás conservan su estilo. */
.zenth-timeline__slide-tags .zenth-timeline__tag:nth-child(2) {
	background: #6b6b6b;
	border-color: transparent;
	color: var(--cr-color-white, #fff);
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 · RESPONSIVE — todos los @media de tamaño, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  Desktop ≥1024 (min-width, re-aserción de stroke-width) →
           Tablet (≤1024) → Mobile-small (≤600)
   Las reglas base correspondientes están ANTES (§1–§8), así el cascade
   es claro. Al final, accesibilidad (prefers-reduced-motion), que NO es
   un breakpoint de tamaño y no se consolida con los de arriba.
   ═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────── DESKTOP ≥1024 · min-width: 1024px ───────────────────
   Re-aserción del grosor del stroke en outline (§2 título-outline y §6 year).
   En desktop el -webkit-text-stroke shorthand del base ya lo aplica; este
   bloque lo vuelve a fijar vía la longhand stroke-width para blindarlo. */
@media (min-width: 1024px) {
	/* §2 · Título outline */
	.zenth-timeline__title-outline { -webkit-text-stroke-width: var(--cr-outline-width, 1.5px); }

	/* §6 · Year outline del slide */
	.zenth-timeline__slide-year { -webkit-text-stroke-width: var(--cr-outline-width, 1.5px); }
}


/* ───────────────────────── TABLET · max-width: 1024px ─────────────────── */
@media (max-width: 1024px) {
	/* §5 · Slide pasa de dos columnas a una sola */
	.zenth-timeline__slide {
		grid-template-columns: 1fr;
		gap: clamp(20px, 4vw, 32px);
	}

	.zenth-timeline__slide[data-index] .zenth-timeline__slide-head {
		grid-column: 1;
		text-align: left;
		align-items: flex-start;
	}

	.zenth-timeline__slide[data-index] .zenth-timeline__slide-body {
		grid-column: 1;
		grid-row: auto;
	}

	/* §2 · Título principal del widget */
	.zenth-timeline__title {
		font-size: clamp(40px, 8vw, 72px);
	}
}


/* ─────────────────────── MOBILE-SMALL · max-width: 600px ──────────────── */
@media (max-width: 600px) {
	/* §2 · Título principal del widget — clamp(40,8vw,72) del breakpoint
	   anterior se desbordaba en pantallas <380px. Bajamos al mínimo
	   para que "A UNA MARCA" o "DE UN SUEÑO" quepan sin scroll. */
	.zenth-timeline__title {
		font-size: clamp(28px, 9vw, 48px);
	}

	/* §2 · Título outline — re-aserción del grosor del stroke */
	.zenth-timeline__title-outline { -webkit-text-stroke-width: var(--cr-outline-width, 1.5px); }

	/* §6 · Year + título del slide más chicos */
	.zenth-timeline__slide-year {
		font-size: clamp(28px, 8vw, 40px);
		-webkit-text-stroke-width: var(--cr-outline-width, 1.5px);
	}

	.zenth-timeline__slide-title {
		font-size: clamp(28px, 8vw, 44px);
	}

	/* §4 · Markers más chicos */
	.zenth-timeline__marker {
		width: 9px !important;
		height: 9px !important;
		border-width: 1.5px !important;
	}

	.zenth-timeline__marker.is-active {
		width: 14px !important;
		height: 14px !important;
	}
}


/* ───────────────────── A11Y · prefers-reduced-motion ─────────────────────
   Subsección de accesibilidad. NO es un breakpoint de tamaño: va aparte y
   sin consolidar con los @media de arriba. */
@media (prefers-reduced-motion: reduce) {
	.zenth-timeline__progress-track,
	.zenth-timeline__progress-fill,
	.zenth-timeline__marker,
	.zenth-timeline__slide,
	.zenth-timeline__nav-prev,
	.zenth-timeline__nav-next {
		transition: none !important;
	}

	/* Sin "ping" radar cuando se pide reducir movimiento. */
	.zenth-timeline__marker.is-active::after {
		animation: none !important;
		display: none;
	}
}