/* ==========================================================================
   PixHero Carousel — Frontend
   ========================================================================== */

.phc-wrap {
	position: relative;
	max-width: var(--phc-width, 1280px);
	margin: 0 auto;
	padding: 0 20px;
}

.phc-wrap.phc-peek {
	overflow: visible;
}

.phc-swiper {
	overflow: visible;
	width: 100%;
	padding: 5% 5% 0%;
}

.phc-wrap:not(.phc-peek) .phc-swiper {
	overflow: hidden;
}

.swiper-wrapper {
	align-items: stretch;
}

.swiper-slide {
	height: auto;
}

/* Slide box */
.phc-slide {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--phc-h-desk, 600px);
	border-radius: var(--phc-radius, 15px);
	overflow: hidden;
	padding: 60px;
	isolation: isolate;
}

/* Media (imagen / gif / video), desktop y mobile alternados por breakpoint.
   Si el slide no tiene media mobile propia, se usa .phc-media-all (un único
   elemento visible siempre en vez de duplicar el mismo video/imagen dos veces). */
.phc-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.phc-media img,
.phc-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.phc-media-mobile { display: none; }

@media (max-width: 767px) {
	.phc-media-desktop { display: none; }
	.phc-media-mobile { display: block; }
}

/* Wrapper del contenido: imagen/gif secundaria (foreground) + textos, uno al
   lado del otro en desktop. Si el slide no carga imagen secundaria, .phc-fg-media
   no se imprime y esto se comporta exactamente como el hero clásico. */
.phc-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* Orden imagen/texto configurable por slide */
.phc-slide[data-layout="image-right"] .phc-inner {
	flex-direction: row-reverse;
}

.phc-fg-media {
	flex-shrink: 0;
	max-width: 42%;
}

.phc-fg-media img {
	display: block;
	max-width: 100%;
	width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: center;
}

/* Ajustes solo desktop para calzar con el diseño; mobile queda como está */
@media (min-width: 768px) {
	.phc-inner {
		gap: 40px;
	}

	.phc-fg-media img {
		height: 432px;
	}
}

/* Overlay en degradé, customizable por slide */
.phc-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, var(--phc-o-start, transparent) 0%, var(--phc-o-end, #BA2334) 100%);
	opacity: var(--phc-o-opacity, 0.75);
}

/* Contenido */
.phc-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: var(--phc-align, flex-start);
	gap: 40px;
	flex: 1;
	min-width: 0;
	color: #fff;
}

.phc-eyebrow-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.phc-eyebrow {
	font-size: clamp(48px, 6vw, 80px);
	font-weight: 700;
	line-height: 1;
}

.phc-subtitle {
	font-size: 16px;
	font-weight: 500;
	opacity: 0.9;
}

.phc-heading {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	max-width: 620px;
}

.phc-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--phc-cta-bg, #ff5100);
	color: var(--phc-cta-color, #fff);
	font-family: var(--phc-cta-font, inherit);
	text-decoration: none;
	font-weight: 500;
	font-size: 16px;
	padding: 14px 26px;
	border-radius: 10px;
	width: fit-content;
	transition: transform .25s ease, box-shadow .25s ease;
}

.phc-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0,0,0,.18);
	color: var(--phc-cta-color, #fff);
}

.phc-cta-arrow {
	transition: transform .25s ease;
}

.phc-cta:hover .phc-cta-arrow {
	transform: translateX(4px);
}

/* Flechas de navegación */
.phc-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	box-shadow: 0 6px 18px rgba(0,0,0,.15);
	color: #111;
	transition: background .2s ease;
}

.phc-nav:hover { background: #f2f2f2; }
.phc-nav-prev { left: -4px; }
.phc-nav-next { right: -4px; }

@media (max-width: 900px) {
	.phc-nav { display: none; }
}

/* Paginación */
.phc-pagination.swiper-pagination {
	position: relative;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.phc-pagination .swiper-pagination-bullet {
	width: 7px;
	height: 7px;
	border-radius: 3.5px;
	background: #111;
	opacity: 0.4;
	transition: width .25s ease, opacity .25s ease;
	margin: 0 !important;
}

.phc-pagination .swiper-pagination-bullet-active {
	width: 20px;
	opacity: 0.6;
}

/* .phc-media-all: un único elemento de media, visible en todos los tamaños
   (se usa cuando el slide no tiene una media mobile distinta a la de desktop). */
.phc-media-all { display: block; }

/* Clase pedida para el padding lateral del contenido en mobile */
@media (max-width: 767px) {
	.has-global-padding {
		padding-left: 5%;
		padding-right: 5%;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.phc-slide {
		min-height: var(--phc-h-mob, 520px);
		padding: 24px;
		justify-content: flex-end;
	}

	/* En mobile la imagen/gif secundaria siempre va arriba y el texto+botón abajo,
	   sin importar el orden elegido para desktop. */
	.phc-inner {
		flex-direction: column !important;
		align-items: center;
	}
	.phc-fg-media {
		order: 1;
		max-width: 100%;
		margin: 0 0 16px 0;
	}
	.phc-content {
		order: 2;
		align-items: center;
		text-align: center;
	}

	.phc-cta {
		padding: 12px 20px;
		width: fit-content;
		align-self: center;
	}

	.phc-swiper{
		    padding: 0px;
     		padding-top: 5%;
	}
}

/* ==========================================================================
   Animaciones de entrada
   ========================================================================== */

.phc-anim-el {
	opacity: 0;
}

.swiper-slide-active .phc-anim-el {
	animation-duration: .7s;
	animation-timing-function: cubic-bezier(.25,.46,.45,.94);
	animation-fill-mode: forwards;
	animation-delay: calc(var(--phc-delay, 0) * 1ms);
}

.phc-slide[data-anim="none"] .phc-anim-el { opacity: 1; }

.phc-slide[data-anim="fade-in-up"] .swiper-slide-active .phc-anim-el,
.swiper-slide-active .phc-slide[data-anim="fade-in-up"] .phc-anim-el { animation-name: phcFadeInUp; }

.swiper-slide-active .phc-slide[data-anim="fade-in"] .phc-anim-el { animation-name: phcFadeIn; }
.swiper-slide-active .phc-slide[data-anim="zoom-in"] .phc-anim-el { animation-name: phcZoomIn; }
.swiper-slide-active .phc-slide[data-anim="slide-in-left"] .phc-anim-el { animation-name: phcSlideInLeft; }
.swiper-slide-active .phc-slide[data-anim="slide-in-right"] .phc-anim-el { animation-name: phcSlideInRight; }

@keyframes phcFadeInUp {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes phcFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes phcZoomIn {
	from { opacity: 0; transform: scale(.9); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes phcSlideInLeft {
	from { opacity: 0; transform: translateX(-40px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes phcSlideInRight {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.phc-anim-el { opacity: 1 !important; animation: none !important; }
}