/* Botón Médico — Sliders (Swiper). Escalado por consulta de contenedor. */

.bmsw-envoltorio {
	container-type: inline-size;
	container-name: bmsw;
	width: 100%;
	position: relative;
}

.bmsw {
	position: relative;
	width: 100%;
	overflow: hidden;          /* capas rotadas/desbordadas no generan scroll horizontal */
	background: #E7E7E7;
	/* --bmsw-u y aspect-ratio los define el CSS por instancia */
}

.bmsw-slide {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* --- Capas --------------------------------------------------------------- */

.bmsw-capa {
	position: absolute;
	pointer-events: none;                 /* nada captura el puntero... */
	transform: rotate(var(--bmsw-rot, 0deg));
	will-change: transform, opacity;
}
.bmsw-capa .bmsw-enlace { pointer-events: auto; }   /* ...salvo los enlaces */

.bmsw-capa img,
.bmsw-capa picture,
.bmsw-capa picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Imagify y similares mueven clases al <picture>: estilamos descendientes */
}

/* Texto: sin min-height, se ajusta al contenido (evita falsos positivos de solape) */
.bmsw-capa.bmsw-texto {
	min-height: 0;
	line-height: 1.2;
}

/* --- Animaciones de entrada ---------------------------------------------
   REGLA: el estado de reposo es el final, visible y en posición.
   La animación solo ocurre mientras está la clase .bmsw-play, que el JS
   siempre retira con un temporizador garantizado. Si el JS falla, la capa
   se queda visible y en su sitio. */

.bmsw-anim { opacity: 1; transform: rotate(var(--bmsw-rot, 0deg)); }

.swiper-slide-active .bmsw-anim.bmsw-play {
	animation-duration: var(--bmsw-dur, 500ms);
	animation-delay: var(--bmsw-delay, 0ms);
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

.swiper-slide-active .bmsw-anim--aparecer.bmsw-play        { animation-name: bmsw-aparecer; }
.swiper-slide-active .bmsw-anim--entrar-abajo.bmsw-play    { animation-name: bmsw-abajo; }
.swiper-slide-active .bmsw-anim--entrar-arriba.bmsw-play   { animation-name: bmsw-arriba; }
.swiper-slide-active .bmsw-anim--entrar-izquierda.bmsw-play{ animation-name: bmsw-izquierda; }
.swiper-slide-active .bmsw-anim--entrar-derecha.bmsw-play  { animation-name: bmsw-derecha; }

@keyframes bmsw-aparecer  { from { opacity: 0 } to { opacity: 1 } }
@keyframes bmsw-abajo     { from { opacity: 0; transform: translateY(60%)  rotate(var(--bmsw-rot,0deg)) } to { opacity: 1; transform: translateY(0) rotate(var(--bmsw-rot,0deg)) } }
@keyframes bmsw-arriba    { from { opacity: 0; transform: translateY(-60%) rotate(var(--bmsw-rot,0deg)) } to { opacity: 1; transform: translateY(0) rotate(var(--bmsw-rot,0deg)) } }
@keyframes bmsw-izquierda { from { opacity: 0; transform: translateX(-70%) rotate(var(--bmsw-rot,0deg)) } to { opacity: 1; transform: translateX(0) rotate(var(--bmsw-rot,0deg)) } }
@keyframes bmsw-derecha   { from { opacity: 0; transform: translateX(70%)  rotate(var(--bmsw-rot,0deg)) } to { opacity: 1; transform: translateX(0) rotate(var(--bmsw-rot,0deg)) } }

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

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

.bmsw .swiper-button-prev,
.bmsw .swiper-button-next {
	color: #fff;
	background: rgba(0, 0, 0, .28);
	width: 44px; height: 44px;            /* objetivo táctil accesible */
	border: 0; border-radius: 50%;
	transition: background .2s;
}
.bmsw .swiper-button-prev:hover,
.bmsw .swiper-button-next:hover { background: rgba(0, 0, 0, .5); }
.bmsw .swiper-button-prev::after,
.bmsw .swiper-button-next::after { font-size: 17px; font-weight: 700; }

.bmsw .swiper-pagination-bullet { background: #fff; opacity: .55; width: 11px; height: 11px; }
.bmsw .swiper-pagination-bullet-active { opacity: 1; background: #3ebbc9; }

.bmsw-pausa {
	position: absolute; right: 12px; bottom: 12px; z-index: 20;
	width: 40px; height: 40px;
	border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	cursor: pointer; display: grid; place-items: center;
	transition: background .2s;
}
.bmsw-pausa:hover { background: rgba(0, 0, 0, .55); }
.bmsw-pausa:focus-visible,
.bmsw .swiper-button-prev:focus-visible,
.bmsw .swiper-button-next:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Pausa (dos barras) por defecto; play (triángulo) cuando está pausado */
.bmsw-pausa__icono {
	width: 12px; height: 14px;
	border-left: 4px solid #fff; border-right: 4px solid #fff;
	box-sizing: border-box;
}
.bmsw-pausa[aria-pressed="true"] .bmsw-pausa__icono {
	width: 0; height: 0;
	border: 0;
	border-left: 13px solid #fff;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	margin-left: 3px;
}

/* Diapositivas inactivas fuera del foco y del árbol de accesibilidad */
.bmsw .swiper-slide[aria-hidden="true"] a,
.bmsw .swiper-slide[aria-hidden="true"] button { visibility: hidden; }

/* Reserva de altura antes de que Swiper arranque (CLS 0) */
.bmsw:not(.swiper-initialized) .swiper-wrapper { display: block; }
.bmsw:not(.swiper-initialized) .bmsw-slide + .bmsw-slide { display: none; }

/* En contenedores estrechos los controles comen demasiado banner */
@container bmsw (max-width: 520px) {
	.bmsw .swiper-button-prev,
	.bmsw .swiper-button-next { display: none; }
	.bmsw-pausa { width: 30px; height: 30px; right: 8px; bottom: 8px; }
	.bmsw-pausa__icono { width: 9px; height: 11px; border-left-width: 3px; border-right-width: 3px; }
	.bmsw-pausa[aria-pressed="true"] .bmsw-pausa__icono {
		border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; margin-left: 2px;
	}
	.bmsw .swiper-pagination-bullet { width: 8px; height: 8px; }
}