/* Estilos para la sección de la imagen de inicio */
.inicio__container {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    margin-bottom: 20vh;
    overflow: visible;
}

/* Estilos para el contenido en el centro */
.inicio__centerimg-box {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(0, 0, 0);
    
    opacity: 1;
    transition: opacity 1.5s linear;
}

.inicio__centerimg-box--entry {
    opacity: 1;
}

.inicio__centerimg {
    width: 0px;
    height: auto;
    opacity: 0;
    transition: width 1s ease, opacity 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.inicio__centerimg--entry {
    width: 300px;
    opacity: 1;
}

/* img background */

.inicio-img__container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);

}

.inicio__box-img{
    position: relative;
    height: 500px;
    overflow: hidden;
}

.inicio__img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: -200px;
    opacity: 0;
    left: 0px;
    filter: brightness(30%); 
    transition: filter 0.3s, transform 0.3s, opacity 1s ease, top 1s ease; 
}

.inicio__img-reverse{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    bottom: -200px;
    opacity: 0;
    left: 0px;
    filter: brightness(30%); 
    transition: filter 0.3s, transform 0.3s, opacity 1s ease, bottom 1s ease; 
}

.inicio__img--entry {
    top: 0px;
    opacity: 1;
}

.inicio__img-reverse--entry {
    bottom: 0px;
    opacity: 1;
}

.inicio__box-img:hover .inicio__img,
.inicio__box-img:hover .inicio__img-reverse{
    filter: brightness(100%); 
    transform: scale(1.1); 
}


/* img background */
@media (max-width: 600px){
    .inicio__centerimg {
        width: 0px;
        height: auto;
        opacity: 0;
        transition: width 1s ease, opacity 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    
    .inicio__centerimg--entry {
        width: 200px;
        opacity: 1;
    }
    .inicio-img__container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    
    }
    .inicio__box-img{
        position: relative;
        height: 300px;
        overflow: hidden;
    }
    .inicio__centerimg-box {
        position: absolute;
        top: 53%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: rgb(0, 0, 0);
    }
    .inicio__container {
        position: relative;
        width: 100%;
        margin: 0;
        overflow: visible;
    }
}