/*-------------------------------------*/ /* Carrusel de imagenes con boton de accion */

/* Contenedor principal del carrusel */
.carousel-container {
    width: 100%; /* El carrusel ocupa el 100% del ancho de su contenedor padre. */
    overflow: hidden; /* Oculta cualquier contenido que se desborde del contenedor (como las imágenes fuera de vista). */
    position: relative; /* Establece el contexto de posicionamiento para los elementos hijos que usen 'position: absolute'. */
}

/* La pista o riel donde se mueven las imágenes del carrusel */
.carousel-track {
    display: flex; /* Convierte el track en un contenedor flex para que las imágenes se coloquen en línea. */
    transition: transform 0.3s ease-in-out; /* Aplica una transición suave de 0.3 segundos a la propiedad 'transform' (cuando las imágenes se deslizan). */
    will-change: transform; /* Sugiere al navegador que la propiedad 'transform' va a cambiar, lo que puede ayudar a optimizar la animación. */
}

/* Contenedor individual de cada imagen en el carrusel */
.carousel-item {
    width: 100%; /* Cada ítem ocupa el 100% del ancho del carrusel (una imagen a la vez). */
    flex-shrink: 0; /* Evita que los ítems se encojan cuando no hay espacio suficiente. */
    position: relative; /* Es crucial para posicionar el botón flotante *absolutamente* dentro de este ítem. */
}

/* Estilos de las imágenes dentro del carrusel */
.carousel-image {
    width: 100%; /* La imagen ocupa el 100% del ancho de su contenedor (.carousel-item). */
    height: auto; /* Mantiene la proporción original de la imagen al ajustar su ancho. */
    display: block; /* Elimina el espacio extra que algunos navegadores añaden debajo de las imágenes. */
    object-fit: cover; /* Asegura que la imagen cubra todo el espacio disponible sin distorsionarse, recortando si es necesario. */
}

/* Estilos para el botón flotante */
.floating-button {
    position: absolute; /* Posiciona el botón de forma absoluta con respecto a su padre posicionado más cercano (.carousel-item). */
    bottom: 20px; /* Coloca el botón a 20 píxeles del borde inferior de su contenedor padre. */
    left: 50%; /* Mueve el borde izquierdo del botón al 50% del ancho de su contenedor padre. */
    transform: translateX(-50%); /* Ajusta la posición del botón moviéndolo hacia la izquierda el 50% de su propio ancho, para centrarlo horizontalmente. */
    background-color: rgba(0, 0, 0, 0.7); /* Define un color de fondo negro semi-transparente (0.7 de opacidad). */
    color: white; /* Establece el color del texto del botón en blanco. */
    padding: 5px 20px; /* Añade un relleno de 5px arriba/abajo y 20px a los lados. */
    border: none; /* Elimina cualquier borde predeterminado del botón. */
    border-radius: 5px; /* Redondea las esquinas del botón con un radio de 5px. */
    cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el botón, indicando que es interactivo. */
    font-size: 16px; /* Establece el tamaño de la fuente del texto del botón en 16 píxeles. */
    text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces. */
    transition: background-color 0.3s ease; /* Aplica una transición suave de 0.3 segundos al color de fondo cuando cambia. */
    z-index: 10; /* Asegura que el botón esté en una capa superior y sea visible por encima de la imagen. */
}

/* Estilo para el botón flotante cuando el ratón está sobre él */
.floating-button:hover {
    background-color: rgba(0, 0, 0, 0.9); /* Cambia el color de fondo a un negro más opaco al pasar el ratón. */
}