/* Colores fijos de la paleta D.P. SAS (tokens brand/accent de tailwind.src.css).
   Van en hex y no como var(--color-*): Tailwind v4 solo emite las variables
   que usa el markup, asi que no se puede contar con ellas desde este archivo. */
.aha-carousel {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #0049be 0%, #0b2466 100%);
	color: #fff;
	/* Suelo comun para que el alto no salte al rotar: la diapositiva con
	   mascota mide 480px de arte + 2x3.5rem de padding = 592px. */
	min-height: 600px;
}

.aha-carousel__track {
	position: relative;
	min-height: 600px;
	/* Swipe horizontal en JS; el scroll vertical sigue siendo del navegador. */
	touch-action: pan-y;
}

.aha-carousel__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.aha-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	position: relative;
}

.aha-carousel__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
	width: 100%;
	max-width: 1290px;
	margin: 0 auto;
	padding: 3.5rem 1.5rem;
	flex-wrap: wrap;
}

.aha-carousel__copy {
	flex: 1 1 380px;
	max-width: 560px;
}

/* Con .aha-carousel__copy delante para ganarle a ".aha-carousel__copy p". */
.aha-carousel__copy .aha-carousel__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* Punto verde de marca: el texto va en blanco porque accent-400 no llega a
   AA como texto pequeno sobre el azul. */
.aha-carousel__eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #99c919;
}

.aha-carousel__copy h2 {
	text-wrap: balance;
	color: #fff;
	font-size: clamp(1.75rem, 3.2vw, 2.6rem);
	line-height: 1.15;
	margin: 0 0 1rem;
}

.aha-carousel__copy p {
	color: #eef4ff;
	font-size: 1.1rem;
	margin: 0 0 1.5rem;
	text-wrap: pretty;
}

/* Cifras clave en fila, separadas por filetes finos. */
.aha-carousel__stats {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	margin: 0 0 1.75rem;
}

.aha-carousel__stats > div {
	display: flex;
	flex-direction: column-reverse;
	/* En column-reverse, flex-end es arriba: los valores quedan alineados
	   aunque una etiqueta ocupe dos lineas. */
	justify-content: flex-end;
	gap: 0.2rem;
	padding: 0 1.5rem;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.aha-carousel__stats > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.aha-carousel__stats dd {
	margin: 0;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}

.aha-carousel__stats dt {
	color: #cfdcf5;
	font-size: 0.85rem;
	line-height: 1.3;
	max-width: 10.5rem;
}

.aha-carousel__cta {
	display: inline-block;
	background: #ffffff;
	color: #003c9f;
	font-weight: 600;
	padding: 0.75rem 1.6rem;
	border-radius: 4px;
	text-decoration: none;
	transition: transform 0.2s ease, background 0.2s ease;
}

.aha-carousel__cta:hover,
.aha-carousel__cta:focus-visible {
	background: #eef4ff;
	transform: translateY(-2px);
	color: #003c9f;
}

.aha-carousel :focus-visible {
	outline: 2px solid #99c919;
	outline-offset: 3px;
}

/* Entrada escalonada de la diapositiva activa. Solo tras el primer cambio
   (el JS pone data-direction), asi la carga inicial no se anima. --aha-dir
   hace que el texto entre por el lado hacia el que se navega. */
.aha-carousel[data-direction="next"] {
	--aha-dir: 1;
}

.aha-carousel[data-direction="prev"] {
	--aha-dir: -1;
}

.aha-carousel[data-direction] .aha-carousel__slide.is-active .aha-carousel__copy > * {
	animation: aha-carousel-copy-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.aha-carousel[data-direction] .aha-carousel__slide.is-active .aha-carousel__copy > :nth-child(2) {
	animation-delay: 0.08s;
}

.aha-carousel[data-direction] .aha-carousel__slide.is-active .aha-carousel__copy > :nth-child(3) {
	animation-delay: 0.16s;
}

.aha-carousel[data-direction] .aha-carousel__slide.is-active .aha-carousel__copy > :nth-child(4) {
	animation-delay: 0.24s;
}

.aha-carousel[data-direction] .aha-carousel__slide.is-active .aha-carousel__copy > :nth-child(5) {
	animation-delay: 0.32s;
}

/* El retardo de 0.15s coincide con ENTRANCE_DELAY_MS de carousel.js. */
.aha-carousel[data-direction] .aha-carousel__slide.is-active .aha-carousel__art {
	animation: aha-carousel-art-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@keyframes aha-carousel-copy-in {
	from {
		opacity: 0;
		transform: translateX(calc(var(--aha-dir, 1) * 32px));
	}
}

@keyframes aha-carousel-art-in {
	from {
		opacity: 0;
		transform: scale(0.92);
	}
}

.aha-carousel__art {
	flex: 0 0 auto;
	width: 260px;
	height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.aha-lottie {
	width: 100%;
	height: 100%;
	/* Parallax con el puntero (--px/--py entre -1 y 1, los pone el JS). Va en
	   translate y no en transform para no chocar con las animaciones. */
	translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -8px);
	transition: translate 0.4s ease-out;
}

/* Diapositiva con mascota: el arte se pinta a la izquierda sin alterar el
   orden del DOM (copy -> arte), que es el que leen los lectores de pantalla
   y el que se apila en movil. */
.aha-carousel__slide--reverse .aha-carousel__inner {
	flex-direction: row-reverse;
}

/* Anula el cuadrado 260x260 de la regla base: la mascota es vertical. */
.aha-carousel__art--stacked {
	position: relative;
	width: 380px;
	height: 480px;
}

/* Halo suave detras del Lottie: separa el producto del degradado. */
.aha-carousel__art--stacked::before {
	content: "";
	position: absolute;
	inset: -10%;
	background: radial-gradient(closest-side, rgba(153, 201, 25, 0.22), rgba(255, 255, 255, 0.08) 55%, transparent 75%);
	translate: calc(var(--px, 0) * -4px) calc(var(--py, 0) * -4px);
	transition: translate 0.4s ease-out;
	pointer-events: none;
}

/* Las diapositivas con producto juntan copy y arte en el centro: con
   space-between quedaba un hueco muerto de ~300px entre ambos. */
.aha-carousel__slide--art .aha-carousel__inner {
	justify-content: center;
	gap: 5rem;
}

/* El Lottie pasa a telon de fondo. Tiene que desbordar la caja del arte: el
   producto ocupa 320x480 dentro de ella y, mas pequeno, quedaba tapado. El
   gap de 5rem (80px) es mayor que los 70px que sobresale, asi que no pisa
   el texto. Centrado con margenes negativos (ver la variante sello): con
   inset: 0 + margin: auto todo el desborde se iba a la derecha. */
.aha-carousel__art--stacked .aha-lottie {
	position: absolute;
	inset: 50% auto auto 50%;
	margin: -260px 0 0 -260px;
	width: 520px;
	height: 520px;
	opacity: 0.75;
}

/* Variante sello: el disco del escudo es un telon grande centrado detras de
   la mascota, y el check (descentrado dentro de shield.json, ver
   build_shield()) cae en el hueco azul sobre la mano abierta, como si la
   mascota lo presentara. Sin atenuar: el disco ya es translucido. Desborda
   el gap con el texto, asi que no debe capturar clics. Centrado con margenes
   negativos: con inset: 0 + margin: auto, un absoluto mas ancho que su caja
   no se centra, todo el desborde se va a la derecha. */
.aha-carousel__art--badge .aha-lottie {
	inset: 50% auto auto 50%;
	margin: -280px 0 0 -280px;
	width: 560px;
	height: 560px;
	opacity: 1;
	pointer-events: none;
}

/* Aparece un poco despues del arte, como un sello que se estampa. */
.aha-carousel[data-direction] .aha-carousel__slide.is-active .aha-carousel__art--badge .aha-lottie {
	animation: aha-carousel-badge-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both;
}

@keyframes aha-carousel-badge-in {
	from {
		opacity: 0;
		transform: scale(0.6);
	}
}

/* El PNG trae canal alfa, asi que se recorta solo sobre el degradado. */
.aha-carousel__art-img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 10px);
	transition: translate 0.4s ease-out;
	animation: aha-carousel-float 6s ease-in-out infinite;
}

@keyframes aha-carousel-float {
	50% {
		transform: translateY(-6px);
	}
}

.aha-carousel.is-user-paused .aha-carousel__art-img,
.aha-carousel.is-offscreen .aha-carousel__art-img {
	animation-play-state: paused;
}

.aha-carousel__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	z-index: 2;
}

.aha-carousel__dots {
	display: flex;
	align-items: center;
	gap: 0.125rem;
}

/* Boton de 24px de alto (area de toque); el punto visible es ::before y el
   relleno de progreso del autoplay, ::after. */
.aha-carousel__dot {
	position: relative;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: width 0.3s ease;
}

.aha-carousel__dot::before,
.aha-carousel__dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 7px;
	right: 7px;
	height: 10px;
	margin-top: -5px;
	border-radius: 999px;
}

.aha-carousel__dot::before {
	border: 1px solid rgba(255, 255, 255, 0.7);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.aha-carousel__dot:hover::before {
	background: rgba(255, 255, 255, 0.35);
}

.aha-carousel__dot.is-active {
	width: 44px;
}

.aha-carousel__dot.is-active::before {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.5);
}

.aha-carousel__dot.is-active::after {
	background: #99c919;
	transform-origin: left center;
	animation: aha-carousel-progress var(--aha-autoplay, 6000ms) linear both;
}

.aha-carousel.is-paused .aha-carousel__dot.is-active::after {
	animation-play-state: paused;
}

/* Sin autoplay (movimiento reducido): pastilla llena, sin progreso. */
.aha-carousel.is-static .aha-carousel__dot.is-active::after {
	animation: none;
}

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

.aha-carousel__arrow {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}

.aha-carousel__arrow:hover,
.aha-carousel__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.3);
}

.aha-carousel__arrow:active {
	transform: scale(0.94);
}

.aha-carousel__arrow[hidden] {
	display: none;
}

/* Boton de pausa: muestra el icono de la accion disponible. */
.aha-carousel__toggle .aha-carousel__icon--play,
.aha-carousel.is-user-paused .aha-carousel__toggle .aha-carousel__icon--pause {
	display: none;
}

.aha-carousel.is-user-paused .aha-carousel__toggle .aha-carousel__icon--play {
	display: block;
}

@media (max-width: 680px) {
	/* Suelo para la diapositiva mas alta (con etiqueta, titulo de dos lineas y cifras),
	   para que el alto no salte al rotar. */
	.aha-carousel,
	.aha-carousel__track {
		min-height: 790px;
	}

	.aha-carousel__slide--art .aha-carousel__inner {
		gap: 2rem;
	}

	.aha-carousel__copy p {
		font-size: 1rem;
		margin-bottom: 1rem;
	}

	.aha-carousel__inner {
		flex-direction: column;
		text-align: center;
		padding: 2.5rem 1.25rem 4rem;
	}

	/* En columna, el flex-basis de 380px se volveria alto, no ancho. */
	.aha-carousel__copy {
		flex: 0 0 auto;
		/* Con align-items: center el ancho seria el max-content (hasta 560px):
		   el texto largo de OXELIA se salia por los lados. */
		width: 100%;
	}

	.aha-carousel__stats {
		justify-content: center;
		margin-bottom: 1.25rem;
	}

	.aha-carousel__stats > div {
		padding: 0 0.85rem;
	}

	.aha-carousel__stats dd {
		font-size: 1.25rem;
	}

	.aha-carousel__stats dt {
		font-size: 0.75rem;
		max-width: 6.5rem;
	}

	.aha-carousel__art {
		width: 190px;
		height: 190px;
	}

	/* El flex-direction: column del inner gana sobre row-reverse, asi que
	   aqui tambien apila copy -> arte como las demas diapositivas. */
	.aha-carousel__art--stacked {
		width: 280px;
		/* 320 y no 360: las diapositivas con producto llevan etiqueta y cifras
		   y tienen que caber en el suelo de 790px. */
		height: 320px;
	}

	/* Desborda la columna, pero .aha-carousel recorta con overflow: hidden,
	   asi que no aparece scroll horizontal. */
	.aha-carousel__art--stacked .aha-lottie {
		margin: -190px 0 0 -190px;
		width: 380px;
		height: 380px;
	}

	.aha-carousel__art--badge .aha-lottie {
		margin: -187px 0 0 -187px;
		width: 374px;
		height: 374px;
	}

	/* En movil se navega con swipe y puntos; las flechas solo ocupan sitio. */
	.aha-carousel__arrow--prev,
	.aha-carousel__arrow--next {
		display: none;
	}

	.aha-carousel__controls {
		gap: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aha-carousel__slide {
		transition: none;
	}

	.aha-carousel[data-direction] .aha-carousel__slide.is-active .aha-carousel__copy > *,
	.aha-carousel[data-direction] .aha-carousel__slide.is-active .aha-carousel__art,
	.aha-carousel[data-direction] .aha-carousel__slide.is-active .aha-carousel__art--badge .aha-lottie,
	.aha-carousel__art-img,
	.aha-carousel__dot.is-active::after {
		animation: none;
	}

	.aha-lottie,
	.aha-carousel__art--stacked::before,
	.aha-carousel__art-img {
		translate: none;
		transition: none;
	}

	/* El JS deja el Lottie en un fotograma fijo: detras de la mascota se
	   atenua para que no compita con ella. */
	.aha-carousel__art--stacked .aha-lottie {
		opacity: 0.4;
	}

	/* El sello no es fondo: se ve entero, con el check dibujado. */
	.aha-carousel__art--badge .aha-lottie {
		opacity: 1;
	}
}