/* slider.css */

/* Contenedor del slider */
.slider {
    position: relative;
    width: 100vw;      /* Asegura que ocupe todo el ancho de la ventana */
    height: calc(100vh - 71px);     /* Asegura que ocupe todo el alto de la ventana */
    overflow: hidden;  /* Evita que las imágenes se desborden */
    margin-top: 60px;
}

/* Cada slide */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;       /* Ancho al 100% */
    height: 100%;      /* Alto al 100% */
    opacity: 0;        /* Inicia con la imagen invisible */
    transition: opacity 1s ease-in-out;
}

/* Imagen activa (visible) */
.slide.active {
    opacity: 1;
    z-index: 1;        /* Asegura que la imagen activa esté encima de las demás */
}

/* Estilos de las imágenes */
.slide img {
    width: 100vw;           /* Hace que las imágenes ocupen el 100% del ancho */
    /*height: calc(100vh - 71px);*/          /* Hace que las imágenes ocupen el 100% del alto */
    height: 100%;
    object-fit: cover;     /* Hace que la imagen cubra todo el espacio, sin deformarse */
    object-position: center; /* Centra la imagen dentro del contenedor */
}

/* Body y html para asegurar que ocupen toda la pantalla */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Estilo para los botones de flecha */
.slider .arrow-button {
    position: absolute;
    top: 50%; /* Centrar verticalmente */
    transform: translateY(-50%);
    background-color: #DF1995; /* Fondo verde semi-transparente */
    color: white;
    border: none !important;
    /*padding: 15px;  Tamaño del botón */
    border-radius: 50%; /* Hacerlo redondeado */
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease; /* Suaviza la transición del hover */
    height: 40px;
    width: 40px;
}

/* Botón de flecha izquierda */
.slider .arrow-button.left {
    left: 10px; /* Posicionarlo a la izquierda */
}

/* Botón de flecha derecha */
.slider .arrow-button.right {
    right: 10px; /* Posicionarlo a la derecha */
}

/* Estilo para las flechas dentro de los botones */
.slider .arrow-button i {
    font-size: 20px; /* Ajustar el tamaño de las flechas */
    color: white; /* Color de las flechas */
}

/* Efecto cuando pasamos el mouse sobre los botones */
.slider .arrow-button:hover {
    background-color: rgba(0, 0, 0, 0.3); /* Quitar la transparencia en hover */
    color: rgba(0, 150, 64, 0.8) !important;
}

/* Opcional: si deseas un pequeño borde en los botones */
.slider .arrow-button {
    border: 2px solid rgba(0, 150, 64, 0.8); /* Bordes de color verde */
}

/* Nuevo contenedor que controla el alto proporcional */
.slide-wrapper {
    width: 100%;
    aspect-ratio: 16 / 6; /* proporción por defecto en desktop */
    overflow: hidden;
    height: 100%;
}

@media (max-width: 991.98px) {

    .slider {
        height: calc(45vh - 71px) !important; /* alto proporcional a pantalla */
        /*margin-top: 0 !important;*/ /* quita el hueco extra */
    }

    .slide{
        position:absolute;
        inset: 0;
        display:flex;
      /*  align-items:center;
        justify-content: center;*/
    }

    .slide-wrapper {
        aspect-ratio: 9 / 16; /* cambia a vertical */
    }

    .slide img {
        width: 100%;
        height: 100%;
        /*object-fit: contain;*/ /* llena el espacio */
        /*object-position: center;*/
        /*display: block;*/
    }
}