/* General body styles to ensure full page coverage and centering */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    min-height: 100vh; /* Asegura que el body ocupe al menos el 100% del alto del viewport */
    background-color: #f0f0f0; /* Color de fondo suave */
    overflow: hidden; /* Evita el scroll si el contenido es más grande que el viewport */
}

/* Contenedor principal del slider */
.slider-container {
    max-width: 1280px; /* Ancho máximo fijo para el slider */
    max-height: 760px; /* Alto máximo fijo para el slider */
    width: 100%; /* Ocupa el 100% del ancho disponible de su padre */
    height: auto; /* Altura automática para mantener la proporción */
    position: relative; /* Necesario para posicionar los botones de navegación */
    margin: auto; /* Centra el contenedor del slider */
    overflow: hidden; /* Oculta las partes de las imágenes que se salen */
    border-radius: 15px; /* Bordes redondeados para una apariencia moderna */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra para profundidad */
    background-color: #fff; /* Fondo blanco para el contenedor */
    aspect-ratio: 16 / 9; /* Establece la relación de aspecto 16:9 */
}

/* Estilo para las imágenes del slider */
.mySlides {
    width: 100%; /* Las imágenes ocupan todo el ancho de su contenedor */
    height: 100%; /* Las imágenes ocupan todo el alto de su contenedor */
    display: none; /* Por defecto, todas las imágenes están ocultas */
    object-fit: contain; /* Asegura que la imagen se escale para caber sin cortar */
    vertical-align: middle; /* Elimina espacio extra debajo de las imágenes */
}

/* Botones de navegación (anterior y siguiente) */
.prev, .next {
    cursor: pointer; /* Muestra un cursor de mano al pasar por encima */
    position: absolute; /* Posicionamiento absoluto dentro del slider-container */
    top: 50%; /* Centrado verticalmente */
    width: auto; /* Ancho automático según el contenido */
    padding: 16px; /* Espaciado interno */
    margin-top: -22px; /* Ajuste para centrar verticalmente */
    color: white; /* Color del icono */
    font-weight: bold; /* Texto en negrita */
    font-size: 20px; /* Tamaño de fuente del icono */
    transition: 0.6s ease; /* Transición suave para el efecto hover */
    border-radius: 0 5px 5px 0; /* Bordes redondeados solo a la derecha */
    user-select: none; /* Evita que el texto sea seleccionado */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
}

/* Posicionar el botón "siguiente" a la derecha */
.next {
    right: 0;
    border-radius: 5px 0 0 5px; /* Bordes redondeados solo a la izquierda */
}

/* Efecto hover en los botones de navegación */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo más oscuro al pasar el ratón */
}