/**
 * Estilos Frontend — Bersoft Home: Hero Slider Makaha.
 * Transiciones 3D Cinemáticas, Animación de Capas y Controles Editoriales.
 *
 * @package Bersoft_Home
 * @version 0.1.2
 */

/* ==========================================================================
   1. ESTRUCTURA BASE, PERSPECTIVA 3D Y PREVENCIÓN DE FOUC / CLS
   ========================================================================== */

.bersoft-hero-section {
	width: 100%;
	position: relative;
	overflow: hidden;
	background-color: #07181F;
	box-sizing: border-box;
	contain: layout style;
}

.bersoft-hero-slider {
	width: 100%;
	position: relative;
	height: var(--bs-hero-h-d, 700px);
	overflow: hidden;
	perspective: 1400px;
	perspective-origin: 50% 50%;
}

.bersoft-hero-track {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
}

/* ==========================================================================
   2. DIAPOSITIVAS (SLIDES) Y CAPAS
   ========================================================================== */

.bersoft-hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 1;
	box-sizing: border-box;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-style: preserve-3d;
}

/* Slide Activo en Reposo */
.bersoft-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
	transform: none;
}

/* Capa 1: Fotografía Semántica con Focal Points */
.bersoft-hero-bg-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
	transform-style: preserve-3d;
}

.bersoft-hero-picture,
.bersoft-hero-bg-color {
	width: 100%;
	height: 100%;
	display: block;
}

.bersoft-hero-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--bs-bg-pos-d, center center);
	display: block;
	transform: scale(1.0);
	transition: transform 6.5s cubic-bezier(0.1, 1, 0.3, 1);
	will-change: transform;
}

.bersoft-hero-slide.is-active .bersoft-hero-bg-img {
	transform: scale(1.038);
}

/* Capa 2: Overlay Gradual */
.bersoft-hero-overlay-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

/* Capa 3: Contenedor de Contenido */
.bersoft-hero-container {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--bs-container-max, 1320px);
	margin: 0 auto;
	padding: 0 var(--bs-container-padding, 28px);
	box-sizing: border-box;
	display: flex;
	height: 100%;
	transform-style: preserve-3d;
}

/* Matriz Espacial de Posición */
.bersoft-hero-container.bersoft-pos-x-left   { justify-content: flex-start; }
.bersoft-hero-container.bersoft-pos-x-center { justify-content: center; }
.bersoft-hero-container.bersoft-pos-x-right  { justify-content: flex-end; }

.bersoft-hero-container.bersoft-pos-y-top    { align-items: flex-start; padding-top: 60px; }
.bersoft-hero-container.bersoft-pos-y-middle { align-items: center; }
.bersoft-hero-container.bersoft-pos-y-bottom { align-items: flex-end; padding-bottom: 70px; }

.bersoft-hero-content {
	width: 100%;
	box-sizing: border-box;
}

/* ==========================================================================
   3. TIPOGRAFÍA Y ACCIONES CTA
   ========================================================================== */

.bersoft-hero-eyebrow {
	display: inline-block;
	font-family: var(--bs-font-family-body, 'DM Sans', sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 12px;
	line-height: 1.2;
}

.bersoft-hero-title {
	font-family: var(--bs-font-family-heading, 'DM Sans', sans-serif);
	font-size: clamp(32px, 4.5vw, 56px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
	margin: 0 0 16px 0;
	text-wrap: balance;
}

.bersoft-hero-desc {
	font-family: var(--bs-font-family-body, 'DM Sans', sans-serif);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.55;
	margin: 0 0 28px 0;
	text-wrap: pretty;
}

.bersoft-hero-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Botones CTA */
.bersoft-hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	min-height: 48px;
	font-family: var(--bs-font-family-body, 'DM Sans', sans-serif);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--bs-cta-radius, 8px);
	background-color: var(--bs-cta-bg, #0F4C5C);
	color: var(--bs-cta-color, #FFFFFF);
	transition: background-color 200ms ease, color 200ms ease, transform 180ms ease, border-color 200ms ease;
	box-sizing: border-box;
	cursor: pointer;
}

.bersoft-hero-cta.is-style-solid {
	border: 1.5px solid var(--bs-cta-bg, #0F4C5C);
}

.bersoft-hero-cta.is-style-solid:hover {
	background-color: var(--bs-cta-hover-bg, #0B3844);
	color: var(--bs-cta-hover-color, #FFFFFF);
	border-color: var(--bs-cta-hover-bg, #0B3844);
	transform: translateY(-2px);
}

.bersoft-hero-cta.is-style-outline {
	background-color: transparent;
	color: var(--bs-cta-color, #FFFFFF);
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.bersoft-hero-cta.is-style-outline:hover {
	background-color: var(--bs-cta-hover-bg, rgba(255, 255, 255, 0.15));
	color: var(--bs-cta-hover-color, #FFFFFF);
	border-color: #FFFFFF;
	transform: translateY(-2px);
}

.bersoft-hero-cta:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

/* Mini-Card de Producto Opcional */
.bersoft-hero-product-badge {
	margin-top: 24px;
	display: inline-block;
}

.bersoft-hero-product-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px 8px 8px;
	background: rgba(7, 24, 31, 0.8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	text-decoration: none;
	color: #FFFFFF;
	transition: background 200ms ease, transform 180ms ease;
}

.bersoft-hero-product-link:hover {
	background: rgba(15, 76, 92, 0.9);
	transform: translateY(-2px);
}

.bersoft-hero-product-thumb {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
}

.bersoft-hero-product-info {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.bersoft-hero-product-title {
	font-size: 13px;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 1.2;
}

.bersoft-hero-product-price {
	font-size: 13px;
	font-weight: 700;
	color: #E0F2FE;
	margin-top: 2px;
}

.bersoft-hero-product-btn {
	color: #FFFFFF;
	margin-left: 6px;
	opacity: 0.8;
}

/* ==========================================================================
   4. FAMILIA DE TRANSICIONES 3D Y CINEMÁTICAS NATIVAS
   ========================================================================== */

/* 4.1. TRANSICIÓN: Makaha Cinematic & Fade */
.bersoft-hero-slide.effect-makaha_cinematic.is-anim-entering,
.bersoft-hero-slide.effect-fade.is-anim-entering {
	animation: bs-anim-fade-in var(--bs-slide-dur, 800ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.bersoft-hero-slide.effect-makaha_cinematic.is-anim-leaving,
.bersoft-hero-slide.effect-fade.is-anim-leaving {
	animation: bs-anim-fade-out var(--bs-slide-dur, 800ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes bs-anim-fade-in {
	0%   { opacity: 0; visibility: visible; }
	100% { opacity: 1; visibility: visible; }
}
@keyframes bs-anim-fade-out {
	0%   { opacity: 1; visibility: visible; }
	100% { opacity: 0; visibility: hidden; }
}

/* 4.2. TRANSICIÓN: Turn 3D Vertical */
.bersoft-hero-slide.effect-turn_3d_vertical {
	transform-origin: 50% 50%;
}
.bersoft-hero-slide.effect-turn_3d_vertical.is-anim-entering {
	animation: bs-anim-turn-3d-vert-in var(--bs-slide-dur, 1800ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
	z-index: 3;
}
.bersoft-hero-slide.effect-turn_3d_vertical.is-anim-leaving {
	animation: bs-anim-turn-3d-vert-out var(--bs-slide-dur, 1800ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
	z-index: 2;
}

@keyframes bs-anim-turn-3d-vert-in {
	0% {
		opacity: 0;
		transform: perspective(1400px) rotateX(75deg) translateZ(80px);
		visibility: visible;
	}
	40% {
		opacity: 0.85;
	}
	100% {
		opacity: 1;
		transform: perspective(1400px) rotateX(0deg) translateZ(0);
		visibility: visible;
	}
}

@keyframes bs-anim-turn-3d-vert-out {
	0% {
		opacity: 1;
		transform: perspective(1400px) rotateX(0deg) translateZ(0);
		visibility: visible;
	}
	60% {
		opacity: 0.4;
	}
	100% {
		opacity: 0;
		transform: perspective(1400px) rotateX(-75deg) translateZ(80px);
		visibility: hidden;
	}
}

/* 4.3. TRANSICIÓN: Turn 3D Horizontal */
.bersoft-hero-slide.effect-turn_3d_horizontal {
	transform-origin: 50% 50%;
}
.bersoft-hero-slide.effect-turn_3d_horizontal.is-anim-entering {
	animation: bs-anim-turn-3d-horiz-in var(--bs-slide-dur, 1800ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
	z-index: 3;
}
.bersoft-hero-slide.effect-turn_3d_horizontal.is-anim-leaving {
	animation: bs-anim-turn-3d-horiz-out var(--bs-slide-dur, 1800ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
	z-index: 2;
}

@keyframes bs-anim-turn-3d-horiz-in {
	0% {
		opacity: 0;
		transform: perspective(1400px) rotateY(-80deg) translateZ(100px);
		visibility: visible;
	}
	40% {
		opacity: 0.85;
	}
	100% {
		opacity: 1;
		transform: perspective(1400px) rotateY(0deg) translateZ(0);
		visibility: visible;
	}
}

@keyframes bs-anim-turn-3d-horiz-out {
	0% {
		opacity: 1;
		transform: perspective(1400px) rotateY(0deg) translateZ(0);
		visibility: visible;
	}
	60% {
		opacity: 0.35;
	}
	100% {
		opacity: 0;
		transform: perspective(1400px) rotateY(80deg) translateZ(100px);
		visibility: hidden;
	}
}

/* 4.4. TRANSICIÓN: Cube 3D */
.bersoft-hero-slide.effect-cube_3d.is-anim-entering {
	animation: bs-anim-cube-in var(--bs-slide-dur, 1600ms) cubic-bezier(0.2, 1, 0.3, 1) forwards;
	z-index: 3;
}
.bersoft-hero-slide.effect-cube_3d.is-anim-leaving {
	animation: bs-anim-cube-out var(--bs-slide-dur, 1600ms) cubic-bezier(0.2, 1, 0.3, 1) forwards;
	z-index: 2;
}

@keyframes bs-anim-cube-in {
	0% {
		opacity: 0;
		transform: perspective(1400px) rotateY(90deg) translateZ(400px);
		visibility: visible;
	}
	50% {
		opacity: 0.9;
	}
	100% {
		opacity: 1;
		transform: perspective(1400px) rotateY(0deg) translateZ(0);
		visibility: visible;
	}
}

@keyframes bs-anim-cube-out {
	0% {
		opacity: 1;
		transform: perspective(1400px) rotateY(0deg) translateZ(0);
		visibility: visible;
	}
	100% {
		opacity: 0;
		transform: perspective(1400px) rotateY(-90deg) translateZ(400px);
		visibility: hidden;
	}
}

/* 4.5. TRANSICIÓN: Fold / Reveal 3D */
.bersoft-hero-slide.effect-fold_3d.is-anim-entering {
	animation: bs-anim-fold-in var(--bs-slide-dur, 1500ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
	z-index: 3;
	transform-origin: left center;
}
.bersoft-hero-slide.effect-fold_3d.is-anim-leaving {
	animation: bs-anim-fold-out var(--bs-slide-dur, 1500ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
	z-index: 2;
	transform-origin: right center;
}

@keyframes bs-anim-fold-in {
	0% {
		opacity: 0;
		transform: perspective(1400px) rotateY(-60deg) scale(0.92);
		visibility: visible;
	}
	100% {
		opacity: 1;
		transform: perspective(1400px) rotateY(0deg) scale(1.0);
		visibility: visible;
	}
}

@keyframes bs-anim-fold-out {
	0% {
		opacity: 1;
		transform: perspective(1400px) rotateY(0deg) scale(1.0);
		visibility: visible;
	}
	100% {
		opacity: 0;
		transform: perspective(1400px) rotateY(60deg) scale(0.92);
		visibility: hidden;
	}
}

/* 4.6. TRANSICIÓN: Slide Horizontal & Slide Vertical */
.bersoft-hero-slide.effect-slide_horizontal.is-anim-entering {
	animation: bs-anim-slide-h-in var(--bs-slide-dur, 850ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.bersoft-hero-slide.effect-slide_horizontal.is-anim-leaving {
	animation: bs-anim-slide-h-out var(--bs-slide-dur, 850ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bs-anim-slide-h-in {
	0%   { transform: translateX(100%); opacity: 1; visibility: visible; }
	100% { transform: translateX(0);    opacity: 1; visibility: visible; }
}
@keyframes bs-anim-slide-h-out {
	0%   { transform: translateX(0);     opacity: 1; visibility: visible; }
	100% { transform: translateX(-100%); opacity: 0.7; visibility: hidden; }
}

.bersoft-hero-slide.effect-slide_vertical.is-anim-entering {
	animation: bs-anim-slide-v-in var(--bs-slide-dur, 850ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.bersoft-hero-slide.effect-slide_vertical.is-anim-leaving {
	animation: bs-anim-slide-v-out var(--bs-slide-dur, 850ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bs-anim-slide-v-in {
	0%   { transform: translateY(100%); opacity: 1; visibility: visible; }
	100% { transform: translateY(0);    opacity: 1; visibility: visible; }
}
@keyframes bs-anim-slide-v-out {
	0%   { transform: translateY(0);     opacity: 1; visibility: visible; }
	100% { transform: translateY(-100%); opacity: 0.7; visibility: hidden; }
}

/* 4.7. TRANSICIÓN: Zoom In */
.bersoft-hero-slide.effect-zoom_in.is-anim-entering {
	animation: bs-anim-zoom-in var(--bs-slide-dur, 900ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.bersoft-hero-slide.effect-zoom_in.is-anim-leaving {
	animation: bs-anim-zoom-out var(--bs-slide-dur, 900ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bs-anim-zoom-in {
	0%   { transform: scale(1.15); opacity: 0; visibility: visible; }
	100% { transform: scale(1.0);  opacity: 1; visibility: visible; }
}
@keyframes bs-anim-zoom-out {
	0%   { transform: scale(1.0);  opacity: 1; visibility: visible; }
	100% { transform: scale(0.92); opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   5. ANIMACIÓN INDEPENDIENTE DEL CONTENIDO
   ========================================================================== */

/* 5.1. Modo Stagger Escalonado */
.bersoft-hero-slide.content-anim-stagger .bersoft-hero-eyebrow,
.bersoft-hero-slide.content-anim-stagger .bersoft-hero-title,
.bersoft-hero-slide.content-anim-stagger .bersoft-hero-desc,
.bersoft-hero-slide.content-anim-stagger .bersoft-hero-actions,
.bersoft-hero-slide.content-anim-stagger .bersoft-hero-product-badge {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
}

.bersoft-hero-slide.content-anim-stagger.is-active .bersoft-hero-eyebrow       { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.bersoft-hero-slide.content-anim-stagger.is-active .bersoft-hero-title         { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.bersoft-hero-slide.content-anim-stagger.is-active .bersoft-hero-desc          { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.bersoft-hero-slide.content-anim-stagger.is-active .bersoft-hero-actions       { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.bersoft-hero-slide.content-anim-stagger.is-active .bersoft-hero-product-badge { opacity: 1; transform: translateY(0); transition-delay: 400ms; }

/* 5.2. Modo Fade Up */
.bersoft-hero-slide.content-anim-fade_up .bersoft-hero-content {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
	            transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}
.bersoft-hero-slide.content-anim-fade_up.is-active .bersoft-hero-content {
	opacity: 1;
	transform: translateY(0);
}

/* 5.3. Modo Fade Left */
.bersoft-hero-slide.content-anim-fade_left .bersoft-hero-content {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
	            transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}
.bersoft-hero-slide.content-anim-fade_left.is-active .bersoft-hero-content {
	opacity: 1;
	transform: translateX(0);
}

/* 5.4. Modo Fade Right */
.bersoft-hero-slide.content-anim-fade_right .bersoft-hero-content {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
	            transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}
.bersoft-hero-slide.content-anim-fade_right.is-active .bersoft-hero-content {
	opacity: 1;
	transform: translateX(0);
}

/* 5.5. Modo Soft Reveal */
.bersoft-hero-slide.content-anim-soft_reveal .bersoft-hero-content {
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1) 100ms,
	            transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 100ms;
}
.bersoft-hero-slide.content-anim-soft_reveal.is-active .bersoft-hero-content {
	opacity: 1;
	transform: scale(1.0);
}

/* 5.6. Modo None */
.bersoft-hero-slide.content-anim-none .bersoft-hero-content,
.bersoft-hero-slide.content-anim-none .bersoft-hero-eyebrow,
.bersoft-hero-slide.content-anim-none .bersoft-hero-title,
.bersoft-hero-slide.content-anim-none .bersoft-hero-desc,
.bersoft-hero-slide.content-anim-none .bersoft-hero-actions {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   6. CONTROLES DE NAVEGACIÓN EDITORIALES Y PROPORCIONADOS
   ========================================================================== */

/* Flechas Laterales */
.bersoft-hero-arrows {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
	z-index: 10;
	pointer-events: none;
}

.bersoft-hero-arrow {
	pointer-events: auto;
	width: var(--bs-arrow-size, 46px);
	height: var(--bs-arrow-size, 46px);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.20);
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
	padding: 0;
	box-sizing: border-box;
}

.bersoft-hero-arrow svg {
	width: var(--bs-arrow-icon-size, 20px);
	height: var(--bs-arrow-icon-size, 20px);
	display: block;
}

/* En Desktop (dispositivos con puntero preciso y hover): flechas ocultas en reposo y visibles al posar el cursor sobre el Hero */
@media (hover: hover) and (pointer: fine) {
	.bersoft-hero-prev {
		opacity: 0;
		transform: translateX(-10px);
		pointer-events: none;
	}
	.bersoft-hero-next {
		opacity: 0;
		transform: translateX(10px);
		pointer-events: none;
	}

	.bersoft-hero-section:hover .bersoft-hero-prev,
	.bersoft-hero-section:focus-within .bersoft-hero-prev {
		opacity: 1;
		transform: translateX(0);
		pointer-events: auto;
	}

	.bersoft-hero-section:hover .bersoft-hero-next,
	.bersoft-hero-section:focus-within .bersoft-hero-next {
		opacity: 1;
		transform: translateX(0);
		pointer-events: auto;
	}

	.bersoft-hero-prev:hover {
		background-color: var(--bs-hero-accent, #0F4C5C);
		border-color: rgba(255, 255, 255, 0.6);
		transform: translateX(0) scale(1.06);
	}

	.bersoft-hero-next:hover {
		background-color: var(--bs-hero-accent, #0F4C5C);
		border-color: rgba(255, 255, 255, 0.6);
		transform: translateX(0) scale(1.06);
	}
}

.bersoft-hero-arrow:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
	opacity: 1 !important;
	transform: translateX(0) !important;
	pointer-events: auto !important;
}

/* Barra Inferior (Dots Editoriales + Botón Pausa) */
.bersoft-hero-bottom-bar {
	position: absolute;
	bottom: 24px;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	z-index: 10;
	pointer-events: none;
}

.bersoft-hero-dots {
	display: flex;
	align-items: center;
	gap: 8px;
	pointer-events: auto;
}

.bersoft-hero-dot {
	width: 36px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bersoft-dot-inner {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	transition: width 250ms ease, background-color 250ms ease, border-radius 250ms ease;
	display: block;
}

.bersoft-hero-dot.is-active .bersoft-dot-inner {
	width: 26px;
	height: 6px;
	border-radius: 4px;
	background-color: #FFFFFF;
}

.bersoft-hero-dot:hover .bersoft-dot-inner {
	background-color: rgba(255, 255, 255, 0.85);
}

.bersoft-hero-dot:focus-visible {
	outline: none;
}
.bersoft-hero-dot:focus-visible .bersoft-dot-inner {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

/* Botón de Pausa / Reanudar Accesible */
.bersoft-hero-pause-btn {
	pointer-events: auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(15, 23, 42, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease;
	padding: 0;
}

.bersoft-hero-pause-btn:hover {
	background-color: var(--bs-hero-accent, #0F4C5C);
	border-color: rgba(255, 255, 255, 0.5);
}

.bersoft-hero-pause-btn:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

.bersoft-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   7. RESPONSIVE BREAKPOINTS (DESKTOP, LAPTOP, TABLET, MÓVIL)
   ========================================================================== */

/* Laptop (1024px - 1279px) */
@media (max-width: 1279px) {
	.bersoft-hero-slider {
		height: var(--bs-hero-h-l, 640px);
	}
	.bersoft-hero-bg-img {
		object-position: var(--bs-bg-pos-l, center center);
	}
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
	.bersoft-hero-slider {
		height: var(--bs-hero-h-t, 560px);
	}
	.bersoft-hero-bg-img {
		object-position: var(--bs-bg-pos-t, center center);
	}
	.bersoft-hero-arrows {
		padding: 0 16px;
	}
}

/* Móvil (< 768px) */
@media (max-width: 767px) {
	.bersoft-hero-slider {
		height: var(--bs-hero-h-m, 600px);
	}
	.bersoft-hero-bg-img {
		object-position: var(--bs-bg-pos-m, center top);
	}
	
	/* Ocultar elementos marcados para móvil */
	.bs-hide-mobile,
	.bs-hide-on-mobile {
		display: none !important;
	}
	
	.bersoft-hero-container {
		padding: 0 20px;
	}
	.bersoft-hero-container.bersoft-pos-y-middle {
		align-items: center;
	}
	.bersoft-hero-title {
		font-size: clamp(26px, 7.5vw, 36px);
		margin-bottom: 12px;
	}
	.bersoft-hero-desc {
		font-size: 14.5px;
		margin-bottom: 22px;
		line-height: 1.5;
	}
	.bersoft-hero-actions {
		gap: 12px;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.bersoft-hero-cta {
		width: auto;
		max-width: 100%;
		display: inline-flex;
		padding: 12px 26px;
		min-height: 46px;
		font-size: 14.5px;
		box-sizing: border-box;
	}
	.bersoft-hero-cta.cta-mobile-full {
		width: 100%;
	}
	.bersoft-hero-cta.cta-mobile-auto {
		width: auto;
	}
	.bersoft-hero-bottom-bar {
		bottom: 18px;
	}
}

/* ==========================================================================
   8. ACCESIBILIDAD — PREFERS-REDUCED-MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bersoft-hero-slide,
	.bersoft-hero-bg-img,
	.bersoft-hero-content,
	.bersoft-hero-eyebrow,
	.bersoft-hero-title,
	.bersoft-hero-desc,
	.bersoft-hero-actions,
	.bersoft-hero-product-badge,
	.bersoft-hero-arrow,
	.bersoft-dot-inner {
		animation: none !important;
		transition: opacity 150ms ease !important;
		transform: none !important;
	}
	.bersoft-hero-slide.is-anim-entering {
		opacity: 1 !important;
		visibility: visible !important;
	}
	.bersoft-hero-slide.is-anim-leaving {
		opacity: 0 !important;
		visibility: hidden !important;
	}
}