/*!
 * Amunet Swiper — estilos base
 * El posicionamiento concreto de cada capa lo emite el PHP como <style>
 * inline por instancia. Aqui solo va lo estructural y los controles.
 *
 * Unidad de diseno: --as-u = 1 pixel del lienzo. Todo se mide en multiplos
 * de esa variable, de modo que el diseno completo escala en bloque.
 */

.amunet-swiper-outer {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* El contenedor de container-queries es el WRAPPER, para que tanto el
	   propio slider como sus capas puedan consultar el ancho del slider. */
	container-type: inline-size;
}

.amunet-swiper {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #eef4f8;
	/* aspect-ratio lo fija el CSS inline por breakpoint: reserva el hueco
	   antes de que cargue nada, de ahi que el CLS sea 0. */
}

/* Mientras Swiper no ha arrancado mostramos solo la primera slide, para que
   no se apilen las tres en vertical durante el primer pintado. */
.amunet-swiper:not(.swiper-initialized) .swiper-wrapper {
	display: block;
}
.amunet-swiper:not(.swiper-initialized) .amunet-swiper__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.amunet-swiper:not(.swiper-initialized) .amunet-swiper__slide:first-child {
	position: relative;
	opacity: 1;
}

.amunet-swiper__slide {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

/* ---- Fondo ------------------------------------------------------------- */

.amunet-swiper__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.amunet-swiper__bg-img,
.amunet-swiper__bg > picture,
.amunet-swiper__bg > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* El <img> real, este suelto o dentro del <picture> que anade Imagify.
   object-position y el zoom se toman de variables del contenedor, asi que
   da igual sobre que elemento quedaron las clases tras el envoltorio. */
.amunet-swiper__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--as-bg-pos, center center);
	transform: scale(var(--as-bg-scale, 1));
	transform-origin: center center;
	display: block;
	max-width: none;
}

/* ---- Lienzo de capas --------------------------------------------------- */

.amunet-swiper__canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.amunet-swiper__layer {
	position: absolute;
	box-sizing: border-box;
	margin: 0;
	transform: translate(
		calc(var(--as-tx, 0%) + var(--as-px, 0px)),
		calc(var(--as-ty, 0%) + var(--as-py, 0px))
	) rotate(var(--as-rot, 0deg));
	opacity: var(--as-op, 1);
}

/* Movimiento suave del parallax de raton. */
.amunet-swiper__layer[data-parallax] {
	transition: transform .18s cubic-bezier(.22, .61, .36, 1);
}

.amunet-swiper__layer--text,
.amunet-swiper__layer--button {
	white-space: pre-wrap;
}

/* NINGUNA capa captura el puntero por su caja: solo los enlaces son
   clicables. Asi una imagen decorativa o un texto con caja amplia nunca
   bloquea un boton/enlace que quede debajo, en ningun breakpoint. */
.amunet-swiper__layer {
	pointer-events: none;
}
.amunet-swiper__link {
	pointer-events: auto;
}

.amunet-swiper__layer--button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	white-space: nowrap;
	cursor: pointer;
	transition: filter .2s ease, transform .2s ease;
}

.amunet-swiper__layer--button:hover,
.amunet-swiper__layer--button:focus-within {
	filter: brightness(1.08);
}

.amunet-swiper__layer--button .amunet-swiper__link {
	display: block;
	color: inherit;
	text-decoration: none;
	/* El area clicable ocupa todo el boton, no solo el texto. */
	position: absolute;
	inset: 0;
	line-height: inherit;
	text-align: inherit;
}

.amunet-swiper__layer--button .amunet-swiper__btn-label {
	pointer-events: none;
}

.amunet-swiper__layer--image .amunet-swiper__img,
.amunet-swiper__layer--image picture,
.amunet-swiper__layer--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	max-width: none;
}
.amunet-swiper__layer--image picture {
	position: absolute;
	inset: 0;
}

.amunet-swiper__layer--image .amunet-swiper__link {
	display: block;
	width: 100%;
	height: 100%;
}

/* Capas "shape" con enlace: el <a> ocupa toda la capa para tener area
   clicable y foco reales. */
.amunet-swiper__layer--shape .amunet-swiper__link {
	display: block;
	position: absolute;
	inset: 0;
}

.amunet-swiper__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* ---- Animaciones de entrada -------------------------------------------- */

/* Estado de REPOSO de una capa animada: VISIBLE. La animacion de entrada es
   un extra no destructivo: si por cualquier motivo no corre (fallo de JS,
   reduced-motion, re-entrada de slide), la capa queda visible, nunca en
   blanco. Esto es deliberado tras ver que el enfoque anterior (opacity:0 de
   base) dejaba capas invisibles cuando la animacion no se reproducia. */
.amunet-swiper .is-anim {
	opacity: var(--as-op, 1);
	will-change: opacity, transform;
}

/* ANIMACIONES DE ENTRADA — seguras por diseno.
   Regla de oro (aprendida a golpes): el estado de REPOSO de toda capa es
   VISIBLE y en su posicion final (.is-anim de arriba => opacity 1, sin
   desplazamiento). La animacion SOLO se aplica mientras la capa lleva la
   clase .as-play, que el JS anade al activarse la slide y RETIRA siempre
   (con un temporizador garantizado). Consecuencias:
     - Si el JS no corre, la animacion no existe: la capa queda visible.
     - Si la animacion se atasca (pestana de fondo, dispositivo lento), el
       temporizador retira .as-play y la capa vuelve al reposo visible.
     - Con prefers-reduced-motion no se anade .as-play: todo aparece quieto.
   Asi cumplimos: "el estado final es siempre visible aunque la animacion no
   corra". */
.amunet-swiper .swiper-slide-active .is-anim.as-play {
	animation-name: as-in;
	animation-duration: var(--as-dur, 600ms);
	animation-delay: var(--as-delay, 0ms);
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

.amunet-swiper .is-anim--fade-up    { --as-from-y: 24px; }
.amunet-swiper .is-anim--fade-down  { --as-from-y: -24px; }
.amunet-swiper .is-anim--fade-left  { --as-from-x: 32px; }
.amunet-swiper .is-anim--fade-right { --as-from-x: -32px; }
.amunet-swiper .is-anim--zoom       { --as-from-scale: .88; }

@keyframes as-in {
	from {
		opacity: 0;
		transform: translate(
			calc(var(--as-tx, 0%) + var(--as-from-x, 0px)),
			calc(var(--as-ty, 0%) + var(--as-from-y, 0px))
		) scale(var(--as-from-scale, 1));
	}
	to {
		opacity: var(--as-op, 1);
		transform: translate(var(--as-tx, 0%), var(--as-ty, 0%)) scale(1);
	}
}

/* Respetamos la preferencia del sistema: sin movimiento, todo aparece ya
   colocado y sin retardo. */
@media (prefers-reduced-motion: reduce) {
	.amunet-swiper .is-anim,
	.amunet-swiper .swiper-slide-active .is-anim {
		animation: none !important;
		opacity: var(--as-op, 1);
	}
	/* Sin crossfade tampoco: el cambio de slide es instantaneo. */
	.amunet-swiper .swiper-slide {
		transition-duration: 0ms !important;
	}
}

/* ---- Controles --------------------------------------------------------- */

.amunet-swiper__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(27, 78, 99, .55);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.amunet-swiper__arrow:hover,
.amunet-swiper__arrow:focus-visible {
	background: #000;
}

.amunet-swiper__arrow:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.amunet-swiper__arrow--prev { left: 30px; }
.amunet-swiper__arrow--next { right: 12px; }

/* Boton de pausa/reproduccion (WCAG 2.2.2) */
.amunet-swiper__playpause {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 21;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(27, 78, 99, .55);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.amunet-swiper__playpause:hover,
.amunet-swiper__playpause:focus-visible { background: #000; }
.amunet-swiper__playpause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.amunet-swiper__playpause .amunet-swiper__icon-play { display: none; }
.amunet-swiper__playpause[data-state="paused"] .amunet-swiper__icon-pause { display: none; }
.amunet-swiper__playpause[data-state="paused"] .amunet-swiper__icon-play { display: block; }
.amunet-swiper__playpause svg { fill: currentColor; }

.amunet-swiper__arrow[disabled],
.amunet-swiper__arrow.swiper-button-disabled {
	opacity: .35;
	cursor: default;
}

/* Por debajo de 778px RevSlider ocultaba las flechas. Mantenemos ese
   comportamiento: en movil se navega deslizando. */
@media (max-width: 777px) {
	.amunet-swiper__arrow { display: none; }
}

.amunet-swiper__bullets.swiper-pagination {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	line-height: 0;
}

.amunet-swiper__bullets .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0;
	border-radius: 50%;
	background: rgba(12, 12, 12, .53);
	opacity: 1;
	transition: background-color .2s ease, transform .2s ease;
}

.amunet-swiper__bullets .swiper-pagination-bullet:hover,
.amunet-swiper__bullets .swiper-pagination-bullet:focus-visible {
	background: rgba(38, 131, 147, .51);
}

.amunet-swiper__bullets .swiper-pagination-bullet-active {
	background: rgba(38, 131, 147, .9);
	transform: scale(1.15);
}

.amunet-swiper__bullets .swiper-pagination-bullet:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---- Aviso de configuracion (solo administradores) --------------------- */

.amunet-swiper-error {
	padding: 1rem;
	border: 2px solid #c00;
	background: #fff5f5;
	color: #900;
	font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}