/* ============================================================
 * Componente global — Slider
 * Maqueta: Figma 359:5553 (component set, 3 variantes de 1440x520).
 *
 * Se monta sobre el Carousel de Bootstrap 5.3.3 (§8.3 de AGENTS.md):
 * el componente aporta indicadores, control de pausa y el tratamiento
 * visual; el comportamiento (transición, teclado, swipe, autoplay) es de
 * Bootstrap.
 *
 * El color de acento del CTA llega por diapositiva en la custom property
 * --mbn-slider-accent, inyectada inline desde el template.
 * ============================================================ */

.mbn-slider {
	position: relative;
	overflow: hidden;
	color: var(--mbn-surface-white, #FFFFFF);
}

.mbn-slider__carousel,
.mbn-slider .carousel-inner,
.mbn-slider__slide {
	min-height: var(--mbn-hero-height, 520px);
}

.mbn-slider__slide {
	position: relative;
	overflow: hidden;
}

/* El centrado vertical del copy necesita display:flex, pero declararlo sobre
   .mbn-slider__slide pisaría el display:none con el que Bootstrap oculta las
   diapositivas inactivas (misma especificidad, y este archivo carga después):
   las tres se apilarían. Por eso el flex se aplica solo a la diapositiva
   visible — o a todas cuando no hay carrusel. */
.mbn-slider__carousel--static .mbn-slider__slide,
.mbn-slider .carousel-item.active,
.mbn-slider .carousel-item-next,
.mbn-slider .carousel-item-prev {
	display: flex;
	align-items: center;
}

.mbn-slider__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 0;
}

.mbn-slider__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.mbn-slider__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	/* La diapositiva activa es un contenedor flex y sus hijos no encogen por
	   debajo de su contenido sin esto: en mobile el título desbordaba. */
	min-width: 0;
	max-width: var(--mbn-width-frame-desktop, 1440px);
	margin-inline: auto;
	padding: 48px 24px;
}

.mbn-slider__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: 620px;
}

.mbn-slider__icon {
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.30));
}

.mbn-slider__franja {
	display: block;
	width: 110px;
	height: 8px;
	margin-bottom: 8px;
}

/* base.css (Base Kit Digital de Siigsa) declara font-family y font-weight de
   h1-h6 con !important, así que la tipografía de marca del título solo se puede
   imponer con !important. Es la excepción documentada en §9 de AGENTS.md. */
.mbn-slider__title {
	margin: 0;
	font-family: var(--mbn-gobcl-h1-responsive-font-family, "gobCL", sans-serif) !important;
	font-weight: 700 !important;
	font-size: calc(36px * var(--mbn-text-scale, 1));
	line-height: 1.25;
	color: var(--mbn-surface-white, #FFFFFF);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
	overflow-wrap: break-word;
}

.mbn-slider__body {
	margin: 16px 0 0;
	max-width: 520px;
	font-family: var(--mbn-roboto-hero-body-responsive-font-family, "Roboto", sans-serif);
	font-weight: 400;
	font-size: var(--mbn-roboto-hero-body-responsive-font-size, 16px);
	line-height: var(--mbn-roboto-hero-body-responsive-line-height, 29.25px);
	color: var(--mbn-text-hero, rgba(255, 255, 255, 0.9));
}

.mbn-slider__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
	padding: 12px 24px;
	min-height: 48px;
	border-radius: var(--mbn-radius-pill, 50rem);
	background: #FFFFFF;
	color: var(--mbn-slider-accent, #0F69C4);
	font-family: var(--mbn-roboto-body-small-font-family, "Roboto", sans-serif);
	font-weight: 700;
	font-size: calc(16px * var(--mbn-text-scale, 1));
	line-height: calc(24px * var(--mbn-text-scale, 1));
	text-decoration: none;
	box-shadow: 0 10px 7.5px rgba(0, 0, 0, 0.10), 0 4px 3px rgba(0, 0, 0, 0.10);
	transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.mbn-slider__cta:hover,
.mbn-slider__cta:focus-visible {
	color: var(--mbn-slider-accent, #0F69C4);
	transform: translateY(-1px);
	box-shadow: 0 14px 9px rgba(0, 0, 0, 0.15), 0 6px 4px rgba(0, 0, 0, 0.10);
}

.mbn-slider__cta:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 3px;
}

/* La flecha se pinta con mask-image para que herede el color de acento de la
   diapositiva; un <img> no puede tomar currentColor. */
.mbn-slider__cta-arrow {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("../../images/components/icon-arrow-forward.svg") no-repeat center / contain;
	mask: url("../../images/components/icon-arrow-forward.svg") no-repeat center / contain;
	transition: transform 120ms ease-out;
}

.mbn-slider__cta:hover .mbn-slider__cta-arrow {
	transform: translateX(2px);
}

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

.mbn-slider__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

/* Neutraliza el posicionamiento absoluto propio de .carousel-indicators para
   que conviva en la misma fila con el botón de pausa. */
.mbn-slider__indicators.carousel-indicators {
	position: static;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Los indicadores de Bootstrap son barras de 30x3 px con bordes transparentes
   y opacidad 0.5, aplicados con `.carousel-indicators [data-bs-target]`. Hay
   que igualar esa especificidad para convertirlos en los puntos de la maqueta:
   un selector de clase simple pierde y deja las barras a la vista. */
.mbn-slider__indicators.carousel-indicators [data-bs-target] {
	position: relative;
	box-sizing: content-box;
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--mbn-radius-pill, 50rem);
	background-color: rgba(255, 255, 255, 0.50);
	opacity: 1;
	text-indent: 0;
	cursor: pointer;
	transition: background-color 160ms ease-out, width 160ms ease-out;
}

.mbn-slider__indicators.carousel-indicators [data-bs-target].active {
	width: 32px;
	background-color: #FFFFFF;
}

/* Amplía el área de activación a 24px de alto sin alterar el tamaño visual del
   indicador (WCAG 2.2 — 2.5.8 target size). El ancho se mantiene en la medida
   de la maqueta, que fija la separación entre indicadores en 8px. */
.mbn-slider__indicators.carousel-indicators [data-bs-target]::after {
	content: "";
	position: absolute;
	inset: -7px 0;
}

.mbn-slider__indicators.carousel-indicators [data-bs-target]:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

.mbn-slider__playpause {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.20);
	cursor: pointer;
	transition: background 160ms ease-out;
}

.mbn-slider__playpause:hover {
	background: rgba(255, 255, 255, 0.35);
}

.mbn-slider__playpause:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

/* Glifos dibujados con bordes: dos barras en estado "reproduciendo",
   un triángulo cuando está pausado. Evita añadir dos assets más. */
.mbn-slider__playpause::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.mbn-slider__playpause.is-playing::before {
	width: 4px;
	height: 12px;
	border-left: 3px solid #FFFFFF;
	border-right: 3px solid #FFFFFF;
	box-sizing: content-box;
}

.mbn-slider__playpause:not(.is-playing)::before {
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid #FFFFFF;
	transform: translate(-40%, -50%);
}

/* ---------- md ≥ 768px ---------- */

@media (min-width: 768px) {
	.mbn-slider__inner {
		padding: 56px 40px;
	}

	.mbn-slider__title {
		font-size: calc(44px * var(--mbn-text-scale, 1));
	}
}

/* ---------- xl ≥ 1200px (canvas 1440 del Figma) ---------- */

@media (min-width: 1200px) {
	.mbn-slider__inner {
		padding: 62px 160px;
	}

	.mbn-slider__icon {
		width: 68px;
		height: 68px;
	}

	.mbn-slider__franja {
		width: 149px;
	}

	.mbn-slider__title {
		font-size: calc(52px * var(--mbn-text-scale, 1));
		line-height: calc(65px * var(--mbn-text-scale, 1));
	}

	.mbn-slider__body {
		font-size: var(--mbn-roboto-hero-body-desktop-font-size, 18px);
		line-height: var(--mbn-roboto-hero-body-desktop-line-height, 29.25px);
	}
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
	.mbn-slider .carousel-item,
	.mbn-slider__cta,
	.mbn-slider__cta-arrow,
	.mbn-slider__indicators button {
		transition: none;
	}
}