/* * * * * * Desktop * * * * * */

@media screen and (width >=1600px) {}

@media (width <=1280px) {
    .cs-footer .cs-cont-footer {
        grid-template-columns: 1.1fr 1fr 1.5fr 1fr;
        gap: 28px;
    }

    .cs-card-producto .cs-img-producto {
        height: 210px;
    }
}

/* * * * * * Ipads * * * * * */

@media (width <=1200px) and (orientation: landscape) {
    .cs-banner-initial {
        height: clamp(560px, 100vh, 800px);
    }

    .cs-quienes .cs-text-quienes {
        width: 55%;
    }

    .cs-ubicacion .cs-row-ubicacion {
        grid-template-columns: 1fr 1fr;
    }
}

@media (width <=1024px) and (orientation: landscape) {
    .cs-quienes {
        padding: 100px 0;
    }

    .cs-quienes .cs-text-quienes {
        min-height: 520px;
    }

    .cs-esencia,
    .cs-ubicacion {
        padding: 100px 0;
    }
}

/* * * * * * Tablet * * * * * * */

@media (width <=992px) {
    .cs-header .cs-cont-header {
        grid-template-columns: 1fr auto;
    }

    .cs-header .cs-cont-header>.cs-links,
    .cs-header .cs-cta-header {
        display: none;
    }

    .navbar-hamburger {
        display: block;
    }

    .cs-quienes {
        padding: 90px 0 0;
    }

    .cs-quienes .cs-text-quienes {
        width: 100%;
        min-height: unset;
        padding-bottom: 60px;
    }

    .cs-quienes .cs-text-quienes p {
        max-width: 100%;
    }

    .cs-quienes .cs-drop-mask {
        position: relative;
        display: block;
        margin: 0 0 0 auto;
        width: min(70vw, 460px);
    }

    .cs-esencia {
        padding: 90px 0;
    }

    .cs-esencia .cs-valores {
        margin-top: 50px;
        gap: 40px;
    }

    .cs-ubicacion {
        padding: 90px 0;
    }

    .cs-ubicacion .cs-row-ubicacion {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .cs-ubicacion .cs-shape-ubicacion {
        width: 90%;
        left: -25%;
    }

    .cs-portafolio {
        padding: 90px 0 120px;
    }

    .cs-portafolio .cs-head-portafolio {
        flex-direction: column;
        align-items: flex-start;
    }

    .cs-portafolio .cs-cards-portafolio {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-footer {
        padding-top: 150px;
    }

    .cs-footer .cs-cont-footer {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }

    .cs-footer .cs-brand-footer {
        grid-column: 1 / -1;
    }

    .cs-footer .cs-brand-footer img {
        width: 70px;
    }

}

/* * * * * * Mobile * * * * * * */

@media (width <=768px) and (orientation: portrait) {
    .cs-banner-initial {
        height: auto;
        min-height: 100svh;
    }

    .cs-banner-initial .carouselInit {
        position: absolute;
        inset: 0;
    }

    .cs-banner-initial .cs-text-banner {
        position: relative;
        min-height: 100svh;
        align-items: flex-end;
        padding: calc(var(--header-h) + 40px) 0 110px;
    }

    .cs-banner-initial .cs-img-carousel::after {
        background: linear-gradient(180deg, rgb(13 48 78 / 60%) 0%, rgb(13 48 78 / 92%) 100%);
    }

    .cs-esencia .cs-valores {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .cs-portafolio .cs-cards-portafolio {
        grid-template-columns: 1fr;
    }

    .cs-footer .cs-subfooter {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
        text-align: center;
    }

    .cs-footer .cs-subfooter p:first-child,
    .cs-footer .cs-subfooter p:nth-child(2),
    .cs-footer .cs-subfooter p:last-child {
        justify-self: center;
        text-align: center;
    }
}

@media (width <=480px) {
    :root {
        --header-h: 80px;
    }

    .cs-header {
        padding: 14px 0;
    }

    .cs-header .cs-brand img {
        width: 88px;
    }

    .cs-btn-default {
        white-space: normal;
    }

    .cs-quienes .cs-drop-mask {
        width: 80vw;
    }

    .cs-card-producto .cs-img-producto {
        height: 200px;
    }

    .cs-footer .cs-cont-footer {
        grid-template-columns: 1fr;
    }
}

@media (width <=400px) {
    .cs-ubicacion .cs-text-ubicacion .cs-btn-default {
        width: 100%;
        justify-content: center;
    }
}

@media (width <=360px) {}