/* Impactun Hero — carrusel [hero_slider] + animaciones de entrada de los módulos de Divi.
   Tipografía, colores y espaciados del resto del hero se definen en Divi (variables de diseño / presets),
   no aquí. Este archivo solo contiene lo que Divi no puede expresar. */

.imp-slider {
	--imp-mint: #65e5a0;
	--imp-hairline: #e5e5e5;
	--imp-muted: #595959;
	--imp-ink: #000;
	--imp-placeholder: #f0eded;
	margin: 0;
}

/* ---------- Carrusel ---------- */

.imp-slider__frame {
	position: relative;
	aspect-ratio: 4 / 5; /* OPTIMIZACIÓN: reserva el hueco antes de que cargue la imagen (CLS 0) */
	border-radius: 16px;
	overflow: hidden;
	background: var(--imp-placeholder);
}

.imp-slider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	visibility: hidden;
}

/* Sin JS solo se ve la primera foto. */
.imp-slider__img[data-active],
.imp-slider__img[data-leaving] { visibility: visible; }
.imp-slider__img[data-active] { z-index: 2; }
.imp-slider__img[data-leaving] { z-index: 1; }
.imp-slider__img[data-entering] { animation: imp-fade 400ms ease-out both; }

.imp-slider__bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-top: 12px;
}

.imp-slider__caption {
	min-height: 44px;
	font-size: 14px;
	line-height: 22px;
	color: var(--imp-muted);
}

.imp-slider__toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -10px -8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--imp-ink);
	cursor: pointer;
	transition: background-color 150ms ease-out;
}
.imp-slider__toggle:hover { background: #f5f7f6; }
.imp-slider__toggle svg[hidden] { display: none; }

.imp-slider__segments {
	display: flex;
	gap: 8px;
	margin-top: -4px;
}

.imp-slider__seg {
	flex: 1;
	display: flex;
	align-items: center;
	height: 44px; /* área táctil ≥44px aunque la barra mida 4px */
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.imp-slider__toggle:focus-visible,
.imp-slider__seg:focus-visible {
	outline: 2px solid var(--imp-ink);
	outline-offset: 2px;
}

.imp-slider__track {
	display: block;
	width: 100%;
	height: 4px;
	overflow: hidden;
	background: var(--imp-hairline);
}

.imp-slider__fill {
	display: block;
	height: 100%;
	background: var(--imp-mint);
	transform: scaleX(0);
	transform-origin: left;
}

.imp-slider__seg[data-done] .imp-slider__fill,
.imp-slider__seg[aria-current] .imp-slider__fill { transform: scaleX(1); }

/* OPTIMIZACIÓN: el temporizador es la propia animación CSS (transform, en el compositor). */
.imp-slider[data-running] .imp-slider__seg[aria-current] .imp-slider__fill {
	transform: scaleX(0);
	animation: imp-fill var(--imp-slide-ms, 5000ms) linear forwards;
}
.imp-slider[data-paused] .imp-slider__seg[aria-current] .imp-slider__fill { animation-play-state: paused; }

@keyframes imp-fill { to { transform: scaleX(1); } }
@keyframes imp-fade { from { opacity: 0; } }

/* ---------- Movimiento (solo si el usuario no pide reducirlo) ---------- */

@media (prefers-reduced-motion: no-preference) {
	.imp-slider__img[data-entering] {
		animation: imp-wipe 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	/* Titular: se descubre de abajo arriba, mismo gesto que las fotos.
	   Va en el h1 del módulo de Texto con la clase imp-hero__title. */
	.imp-hero__title h1 {
		animation: imp-title 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	/* Opcional: si el h1 lleva <span class="imp-line">, cada frase entra por separado. */
	.imp-hero__title h1:has(.imp-line) { animation: none; }
	.imp-hero__title .imp-line { display: block; animation: imp-title 800ms cubic-bezier(0.16, 1, 0.3, 1) both; }
	.imp-hero__title .imp-line + .imp-line { animation-delay: 110ms; }

	/* Texto, botón y datos aparecen después del titular. */
	.imp-hero__reveal {
		animation: imp-appear 600ms 350ms ease-out both;
	}
}

@keyframes imp-wipe {
	from { clip-path: inset(100% 0 0 0); }
	to { clip-path: inset(0); }
}

@keyframes imp-title {
	from { clip-path: inset(100% 0 -0.2em 0); transform: translateY(0.35em); }
	to { clip-path: inset(-0.2em 0 -0.2em 0); transform: none; }
}

@keyframes imp-appear {
	from { opacity: 0; transform: translateY(8px); }
}