/* Reseteo básico y box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  background-color: #f0f0f0; /* O el fondo que prefieras */
}

/* Contenedor principal del carrusel */
.modern-carousel-banner {
  width: 100%;
  /* El aspect-ratio inicial es un fallback, JS lo ajustará */
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden; /* Clave para ocultar slides fuera de vista */
  background-color: #333; /* Fondo mientras carga */
  /* Para interacciones táctiles y foco */
  touch-action: pan-y; /* Permite scroll vertical, previene horizontal manejado por JS */
  outline: none; /* Quitar outline si se le da foco programáticamente */
}

/* Contenedor del track (necesario para overflow) */
.mcb-track-container {
  height: 100%;
  overflow: hidden; /* Seguridad extra */
}

/* El track que contiene y mueve todas las diapositivas */
.mcb-track {
  display: flex;
  height: 100%;
  /* Transición SUAVE para el movimiento */
  transition: transform 0.5s ease-in-out;
  will-change: transform; /* Ayuda al navegador a optimizar la animación */
}

/* Cada diapositiva individual */
.mcb-slide {
  /* Cada slide ocupa el 100% del ancho del contenedor */
  flex: 0 0 100%;
  min-width: 100%; /* Asegura que no se encoja */
  height: 100%;
  position: relative; /* Para posible contenido superpuesto si lo hubiera */
  overflow: hidden; /* Por si acaso el contenido interno se desborda */
}

/* Enlace dentro de la diapositiva */
.mcb-slide-link {
  display: block; /* Ocupa todo el espacio */
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  outline: none; /* Quitar outline por defecto del enlace */
}
/* Opcional: Estilo de foco para el enlace (importante para accesibilidad) */
.mcb-slide-link:focus-visible {
  outline: 3px solid dodgerblue;
  outline-offset: -3px; /* Hacia adentro para no salirse */
}


/* Imagen dentro de la diapositiva */
.mcb-slide-img {
  display: block; /* Evita espacio extra debajo */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cubre el área sin distorsionar */
  /* object-position: center center; */ /* Puedes ajustar si es necesario */
}

/* --- Controles (Botones y Puntos) --- */

/* Estilo base de los botones Prev/Next */
.mcb-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10; /* Encima de las slides */
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  font-size: 2.5rem;
  padding: 0;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  -webkit-tap-highlight-color: transparent; /* Evita flash azul en móviles */
  opacity: 0.8;
}

.mcb-button:hover,
.mcb-button:focus-visible { /* Estilo de foco visible */
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 1;
  outline: none;
}

.mcb-button--prev { left: 15px; }
.mcb-button--next { right: 15px; }

/* Ocultar botones si están deshabilitados (ej. en primera/última slide si no hay loop) */
.mcb-button[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Contenedor de los puntos */
.mcb-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 12px;
  padding: 6px 10px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
}

/* Estilo de cada punto */
.mcb-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 0; /* Importante para botones sin texto */
  transition: background-color 0.3s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  appearance: none; /* Quitar estilos por defecto */
}

.mcb-dot:hover,
.mcb-dot:focus-visible {
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.1); /* Efecto sutil al pasar/focar */
  outline: none;
}

/* Estilo del punto ACTIVO */
.mcb-dot.is-active {
  background-color: white;
  transform: scale(1.2); /* Un poco más grande */
}


/* --- Media Queries para Responsividad --- */
@media (max-width: 768px) {
  .mcb-button {
    width: 44px;
    height: 44px;
    font-size: 2rem;
  }
  .mcb-button--prev { left: 10px; }
  .mcb-button--next { right: 10px; }

  .mcb-dots {
    bottom: 15px;
    gap: 10px;
    padding: 5px 8px;
  }
  .mcb-dot {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  /* Opcional: Ocultar botones en pantallas muy pequeñas si molestan */
  /* .mcb-button { display: none; } */
   .mcb-dots { bottom: 10px; }
}