:root {
	--swiper-navigation-size: 48px;
	--swiper-navigation-gap: 8px / 2;
}
.swiperNav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	position: relative;
	z-index: 0;
}
.swiperNav [class*=swiper-button-] {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	outline: 0;
	border: 0;
	background: transparent;
	border-radius: 0px;
	opacity: 1;
	/* FASE 08 (E-31): la unica propiedad que cambia en el propio boton es la opacidad
	   (.swiper-button-disabled la baja a .70); el desplazamiento de la flecha ocurre en
	   el .arrow hijo, con su propia transition. Con la abreviatura sin propiedad
	   (= all) se animaba tambien el anillo de foco, que debe ser instantaneo. */
	transition: opacity .25s cubic-bezier(0.645, 0.045, 0.355, 1);
	user-select: none;
}
.swiperNav [class*=swiper-button-] span {
	display: flex;
	min-width: 48px;
	width: 48px;
	height: 48px;
	background: #191F17;
	border-radius: 100%;
	overflow: hidden;
	transition: .25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.swiperNav [class*=swiper-button-] img {
	width: 100%;
	filter: brightness(0) invert(1);
}
.swiperNav [class*=swiper-button-]:after {
	display: none;
}
.swiperNav [class*=swiper-button-]:hover span .arrow {
	opacity: 1;
	transition: transform .27s ease;
}
.swiperNav [class*=swiper-button-].prev span {
	flex-direction: row;
}
.swiperNav [class*=swiper-button-].prev:hover span .arrow {
	transform: translateX(-100%);
}
.swiperNav [class*=swiper-button-].next span {
	flex-direction: row-reverse;
}
.swiperNav [class*=swiper-button-].next:hover span .arrow {
    transform: translateX(100%);
}
.swiperNav [class*=swiper-button-].up span {
	flex-direction: column;
}
.swiperNav [class*=swiper-button-].up:hover span .arrow {
    transform: translateY(-100%);
}
.swiperNav [class*=swiper-button-].down span {
	flex-direction: column-reverse;
}
.swiperNav [class*=swiper-button-].down:hover span .arrow {
    transform: translateY(100%);
}
.swiperNav [class*=swiper-button-].swiper-button-disabled {
	opacity: .70;
	cursor: default;
}
/* Estado que pone el JS cuando el slider no tiene suficientes slides para
   navegar (homeSwiperNavLock / innerSwiperNavLock): la flecha deja de ocupar
   sitio y el :has() del contenedor recalcula su alto. La maqueta usa la clase
   pero no la define en ninguna hoja. */
.swiperNav [class*=swiper-button-].swiper-button-lock {
	display: none;
}

/* Regla compartida verificada contra la maqueta (skeleton.css, bloques
   768-960 y max-767): reduce el circulo de la flecha en movil/tablet para
   TODOS los sliders del proyecto (hero home, habitaciones, ventajas,
   inner-banner, galeria). Vive aqui porque es del componente compartido
   .swiperNav, no de un bloque concreto; antes estaba duplicada dentro de
   skeleton.css (retirada de alli en el mismo cambio). En el resto de
   breakpoints de la maqueta (1601-2700, 1501-1600, 1366-1500, 961-1365,
   480-767) no hay ninguna regla de tamano para este selector: se omiten a
   proposito y el componente hereda el 48px base. */

/* #Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 960px) {

.swiperNav [class*=swiper-button-] span { min-width: 40px; width: 40px; height: 40px; }

}

/* #Mobile (Portrait)
================================================== */
@media only screen and (max-width: 767px) {

.swiperNav [class*=swiper-button-] span { min-width: 40px; width: 40px; height: 40px; }

}