/* PCEX Hero – comportamiento del slider. El diseño base de cada slide vive en Elementor (clases globales pcex-*). */

.pcex-hero {
	--pcex-cream: var(--color-cream, #f9f9f1);
	--pcex-ink: var(--color-ink, #171612);
	--pcex-mint: var(--color-mint-light, #c1e9b8);
	--pcex-duration: 7000ms;
	--pcex-gutter: 6.25rem;
	--pcex-bottom: 6.5rem;
}

/* ---------- Slides apilados (solo cuando el JS está listo) ---------- */
.pcex-hero.is-ready .e-collection-loop-base,
.pcex-hero.is-ready .e-collection-loop-layout-base {
	position: static;
}

.pcex-hero.is-ready .pcex-slide {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.pcex-hero.is-ready .pcex-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
	transition: opacity 0.9s ease;
}

.pcex-hero.is-ready .pcex-slide-bg {
	transform: scale(1.07);
	transition: transform 9s ease-out;
}

.pcex-hero.is-ready .pcex-slide.is-active .pcex-slide-bg {
	transform: scale(1);
}

.pcex-hero.is-ready .pcex-slide-content > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.pcex-hero.is-ready .pcex-slide.is-active .pcex-slide-content > * {
	opacity: 1;
	transform: none;
}

.pcex-hero.is-ready .pcex-slide.is-active .pcex-slide-content > :nth-child(1) { transition-delay: 0.3s; }
.pcex-hero.is-ready .pcex-slide.is-active .pcex-slide-content > :nth-child(2) { transition-delay: 0.45s; }
.pcex-hero.is-ready .pcex-slide.is-active .pcex-slide-content > :nth-child(3) { transition-delay: 0.6s; }

/* ---------- Carril: progreso + miniaturas ---------- */
.pcex-hero__rail {
	position: absolute;
	right: var(--pcex-gutter);
	bottom: var(--pcex-bottom);
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: calc(100% - (var(--pcex-gutter) * 2));
	color: var(--pcex-cream);
	font-family: var(--font-body, Manrope), sans-serif;
}

.pcex-hero__progress {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.pcex-hero__track {
	position: relative;
	flex: 1;
	height: 2px;
	background: rgba(249, 249, 241, 0.22);
	overflow: hidden;
	border-radius: 2px;
}

.pcex-hero__bar {
	position: absolute;
	inset: 0;
	background: var(--pcex-mint);
	transform: scaleX(0);
	transform-origin: left center;
}

.pcex-hero.is-playing .pcex-hero__bar {
	animation: pcex-hero-progress var(--pcex-duration) linear forwards;
}

.pcex-hero.is-paused .pcex-hero__bar,
.pcex-hero.is-hold .pcex-hero__bar {
	animation-play-state: paused;
}

@keyframes pcex-hero-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.pcex-hero__count {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: 0.85;
}

.pcex-hero__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid rgba(249, 249, 241, 0.25);
	border-radius: 7px;
	background: rgba(249, 249, 241, 0.04);
	color: inherit;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.pcex-hero__toggle:hover,
.pcex-hero__toggle:focus-visible {
	background: rgba(249, 249, 241, 0.16);
	border-color: rgba(249, 249, 241, 0.5);
}

.pcex-hero__toggle svg { width: 12px; height: 12px; fill: currentColor; }
.pcex-hero__toggle .i-play { display: none; }
.pcex-hero.is-user-paused .pcex-hero__toggle .i-play { display: block; }
.pcex-hero.is-user-paused .pcex-hero__toggle .i-pause { display: none; }

.pcex-hero__thumbs {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcex-hero__thumbs li { margin: 0; padding: 0; }

.pcex-hero__thumb {
	display: flex;
	align-items: center;
	height: 5.25rem;
	padding: 0.375rem;
	border: 1px solid rgba(249, 249, 241, 0.16);
	border-radius: 12px;
	background: rgba(23, 22, 18, 0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	opacity: 0.7;
	overflow: hidden;
	transition: opacity 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
}

.pcex-hero__thumb:hover,
.pcex-hero__thumb:focus-visible { opacity: 1; border-color: rgba(249, 249, 241, 0.45); }
.pcex-hero__thumb[aria-current="true"] { opacity: 1; border-color: rgba(193, 233, 184, 0.7); background: rgba(23, 22, 18, 0.62); }

.pcex-hero__thumb img {
	display: block;
	flex: none;
	width: 6rem;
	height: 4.25rem;
	object-fit: cover;
	border-radius: 8px;
}

.pcex-hero__thumb-label {
	display: block;
	max-width: 0;
	margin-left: 0;
	overflow: hidden;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
	opacity: 0;
	transition: max-width 0.5s ease, margin-left 0.5s ease, opacity 0.4s ease 0.1s;
}

.pcex-hero__thumb[aria-current="true"] .pcex-hero__thumb-label {
	max-width: 11.5rem;
	margin-left: 0.875rem;
	margin-right: 0.5rem;
	opacity: 1;
}

.pcex-hero__rail :focus-visible,
.pcex-hero .pcex-slide a:focus-visible {
	outline: 2px solid var(--pcex-mint);
	outline-offset: 3px;
}

.pcex-hero__live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* ---------- Pantallas medianas, tablet y móvil: sin miniaturas, solo progreso ---------- */
@media (max-width: 1280px) {
	.pcex-hero { --pcex-bottom: 2.5rem; }
	.pcex-hero__rail { left: var(--pcex-gutter); }
	.pcex-hero__thumbs { display: none; }
}

@media (max-width: 1024px) {
	.pcex-hero { --pcex-gutter: 2rem; --pcex-bottom: 2rem; }
}

@media (max-width: 767px) {
	.pcex-hero { --pcex-gutter: 1.25rem; --pcex-bottom: 1.75rem; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	.pcex-hero.is-ready .pcex-slide,
	.pcex-hero.is-ready .pcex-slide.is-active,
	.pcex-hero.is-ready .pcex-slide-bg,
	.pcex-hero.is-ready .pcex-slide-content > * {
		transition: none !important;
		transform: none !important;
	}
}