/* ==========================================================
   RESPONSIVO
   LC SUPLEMENTOS
========================================================== */

/* ==========================================================
   NOTEBOOKS
========================================================== */

@media (max-width:1400px){

    .landing{

        width:min(96%,1300px);

        gap:36px;

    }

    .cards-grid{

        grid-template-columns:
            repeat(3,minmax(260px,1fr));

        gap:22px;

    }

}

/* ==========================================================
   TABLETS GRANDES
========================================================== */

@media (max-width:1100px){

    .logo-img{

        width:108px;

    }

}

/* ==========================================================
   TABLETS
========================================================== */

@media (max-width:900px){

    .landing{

        gap:30px;

        padding:24px 0 50px;

    }

    .cards-grid{

        grid-template-columns:1fr;

        max-width:560px;

        margin:auto;

    }

    .whatsapp-section{

        width:min(1260px,90%);

    }

}

/* ==========================================================
   CELULARES
========================================================== */

@media (max-width:768px){

    .landing{

        width:94%;

        gap:24px;

    }

    .banner-img{

        border-radius:14px;

    }

    .logo-img{

        width:88px;

    }

    .cards-grid{

        gap:20px;

    }

}

/* ==========================================================
   CELULARES PEQUENOS
========================================================== */

@media (max-width:480px){

    .landing{

        width:92%;

        padding:20px 0 40px;

    }

    .logo-img{

        width:74px;

    }

    .cards-grid{

        gap:18px;

    }

    .whatsapp-section{

        width:100%;

    }

}

/* ==========================================================
   ANIMAÇÕES
========================================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}

@media (max-width:768px){

    .site-footer{

        margin-top:40px;

    }

}