@media (min-width: 1400px) {
    .container {
        max-width: 1300px;
    }
}

@media (max-width: 1400px) {

}

@media (max-width: 1200px) {
    .ambientes-section .col-xl-5 {
        margin-bottom: 80px;
    }

    .modal-producto .end-x{
        position: sticky !important;
        z-index: 101;
        background-color: var(--white);
        top: -2px;
    }

    .modal-producto .contenedor {
        overflow-y: auto;

        &::-webkit-scrollbar{
            width: 0;
            background-color: transparent;
        }
    }
}

@media (min-width: 1200px) {
    /* .section-producto .container .contenedor{
        height: 100vh;
        overflow: hidden;
        display: flex;
        background-color: red;
    } */
    
    .producto-derecha {
        overflow-y: auto;
        height: calc(90vh - 80px);
    }
    
    .producto-izquierda {
        position: sticky;
        top: 0;
    }
    
    .producto-derecha::-webkit-scrollbar{
        width: 0;
        background-color: transparent;
    }
    
}

@media (max-width: 992px) {

    .nav-sup {
        display: none;
    }

    .logo {
        width: 100px;
    }

    .categorias > li {
        margin: 0 !important;
        padding: 8px 0;
    }

    .categorias > li:not(:last-child) {
        border-bottom: 1px solid var(--black);
    }

    .mega-menu {
        padding-top: 0px !important;
    
        & .menu li {
            padding: 5px;
            margin: 0 !important;
            font-size: 0.875rem; /*14px*/
            background-color: transparent;
            width: 100px;
            color: var(--dark);
            cursor: pointer;
            list-style: none;
    
            &:hover {
                background-color: transparent;
            }
            
        }
    }

    .footer .around-x{
        max-width: 100%;
    }

    .info-empresa {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 1rem;

        & .img-fluid {
            margin-right: 1rem;
        }
    }

    .titulos {
        width: 80%;
    }

    .checkbox-label {
        margin-inline: 0rem !important;
    }

    .carrusel-testimonios .col-xl-8 {

        height: 100%;
        background-color: transparent !important;


        & video {
            max-width: 600px;
            margin-inline: 0;
            margin-bottom: 0.5rem;
        }
    }

    .testimonios-section .container .slick-dots {
        position: absolute;
        bottom: 5px;
        width: 100%;
    }
    
    .premio p {
        max-width: 100% !important;
    }

    .premio img {
        opacity: 1 !important;
        margin: 1.5rem 0 !important;
        width: 100%;
    }
    
} 


@media (max-width: 768px) {
    .footer .around-x{
        justify-content: start;

        & div {
            margin-inline: 5px;
        }
    }

    .banner {
        height: 500px;

        & h2 {
            margin-bottom: 1rem;
        }

        & .btn-base {
            margin-top: 1rem;
        }
    }

    .modal-producto {
        padding: 15px 25px;
    }

    .section-titulo h1, .section-empresa h2 {
        padding: 80px 0 60px 0;
    }

    .img-nosotros {
        height: 60dvh;
    }

    .pt-servicios-section {
        height: 200px
    }

    .section-contactar .btn-blanco-negro {
        width: 90%;
        margin-inline: 5%;
    }
} 

@media (max-width: 576px) {
    .titulos {
        width: 95%;
    }

    & .mosaico {
        & .center-x {
            flex-wrap: wrap !important;
        }
    
        & .center-y {
            margin-inline: 0;
            margin-bottom: 8px;
            flex-direction: row;
            flex-wrap: nowrap;
    
            & .img-fluid {
                margin-bottom: 1rem;
                margin-inline: 8px;
            }
        }
    
        & .center-y:nth-child(2) {
            margin-top: 0 !important;
        }
    
        & .center-y:nth-child(3) {
            margin-top: 0 !important;
        }
    }

    .modal-producto {
        padding: 10px 20px;
    }

    .section-titulo h1, .section-empresa h2 {
        padding: 60px 0 40px 0;
    }

    .img-nosotros {
        height: 40dvh;
    }

    .form-contacto {
        padding: 24px;
        padding-bottom: 30px;
    }

    .info-contacto {
        font-size: 15px;
        position: static;
        height: 340px;
        width: 100%;
        padding: 1rem;
    }
} 

@media (max-width: 420px) {

}