.bhs,
.bhs__slides { position: absolute; inset: 0; z-index: auto; }

.bhs__slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	/* visibility cubre el estado estable, pero su cambio se retrasa lo que dura
	   el fundido a proposito (para no desaparecer un slide a medio fundir). Todos
	   los slides comparten z-index, asi que durante esa ventana el clic se lo
	   lleva el que va despues en el DOM: puede ser el que sale. pointer-events no
	   se anima, conmuta al instante, y tapa exactamente ese hueco. */
	pointer-events: none;
	transition: opacity var(--bhs-fundido, 1200ms) ease-in-out,
	            visibility 0s linear var(--bhs-fundido, 1200ms);
}
.bhs__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--bhs-fundido, 1200ms) ease-in-out,
	            visibility 0s linear 0s;
}
/* Elementor trae ".elementor img { height: auto }" con la MISMA especificidad
   (0,1,1) que ".bhs__slide img", y su hoja carga despues: sin el prefijo ".bhs"
   Elementor gana el empate y la <img> se dimensiona por su relacion de aspecto en
   vez de rellenar la caja, desbordando el contenedor en ventanas anchas (a partir
   de ~1500px, donde la proporcion real de la imagen supera la del hero). El
   prefijo ".bhs" sube la especificidad a (0,2,1) sin necesitar !important: no lo
   quites ni lo "simplifiques" a ".bhs__slide img", se reproduce el desbordamiento.
   Se aplica igual a picture por coherencia, aunque hoy no lo necesite. */
.bhs .bhs__slide picture { display: block; width: 100%; height: 100%; }
.bhs .bhs__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Astra estiliza TODOS los <button> del sitio: fondo beige al pasar el raton o al
   recibir el foco, y ademas inyecta
       @media (max-width: 768px) { button { padding: 10px 20px !important } }
   Los controles del slider son <button>, asi que heredaban ese estilo: en movil los
   puntos pasaban de 24x24 a 40x24 y, al pulsar uno, se quedaba pegado un recuadro
   beige (el boton conserva el foco despues del clic). El !important del padding es
   obligado: el de Astra tambien lo lleva y ninguna especificidad lo tumba. */
.bhs__dot,
.bhs__arrow {
	padding: 0 !important;
	border: 0;
	box-shadow: none;
}
.bhs__dot:hover,
.bhs__dot:focus,
.bhs__dot:active,
.bhs__arrow:hover,
.bhs__arrow:focus,
.bhs__arrow:active {
	background: none;
	border: 0;
	box-shadow: none;
}

.bhs__arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: #fff;
	opacity: .92;
	/* Las tres fotos tienen fondos muy claros (pared blanca, telas crudas): hacen
	   falta dos sombras, una cercana que perfile el trazo y un halo amplio que
	   despegue la flecha del fondo. Con una sola se pierde sobre la pared. */
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(0, 0, 0, .35));
	transition: opacity .25s ease;
	-webkit-tap-highlight-color: transparent;
}
.bhs__arrow:hover { opacity: 1; }
.bhs__arrow--prev { left: 12px; }
.bhs__arrow--next { right: 12px; }
.bhs__arrow svg {
	display: block;
	width: 30px;
	height: 30px;
	transition: transform .25s ease;
}
.bhs__arrow--prev:hover svg { transform: translateX(-2px); }
.bhs__arrow--next:hover svg { transform: translateX(2px); }
.bhs__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

.bhs__dots {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 14px;
	display: flex;
	justify-content: center;
	gap: 4px;
}
.bhs__dot {
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.bhs__dot::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	transition: background .25s ease, transform .25s ease;
}
.bhs__dot[aria-selected="true"]::before { background: #fff; transform: scale(1.35); }
.bhs__dot:focus-visible::before { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 767px) {
	.bhs__dots { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	/* Hay que nombrar .is-active explicitamente: lleva su propia declaracion de
	   transition, y con menor especificidad esta regla no la ganaria. */
	.bhs__slide,
	.bhs__slide.is-active,
	.bhs__arrow,
	.bhs__arrow svg {
		transition: none;
	}
	/* Sin transicion, la visibilidad debe seguir a la opacidad al instante: si no,
	   el slide inactivo se queda tabulable y clicable con reduced-motion activo. */
	.bhs__slide { visibility: hidden; }
	.bhs__slide.is-active { visibility: visible; }
}