/* ==================================================
   TABLETS (≤ 992px)
================================================== */

@media (max-width:992px){

    /* ==========================
       LAYOUT
    ========================== */

    .grid-2{

        grid-template-columns:1fr;

    }

    .grid-3{

        grid-template-columns:1fr 1fr;

    }

    .grid-4{

        grid-template-columns:1fr 1fr;

    }

    /* ==========================
       HERO
    ========================== */

    .hero-grid{

        grid-template-columns:1fr;

    }

    .hero-content{

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-image{

        height:450px;

    }

}

/* ==================================================
   MENÚ MÒBIL (≤ 900px)
================================================== */

@media (max-width:900px){

    /* ==========================
       HEADER
    ========================== */

    .menu-toggle{

        display:block;

    }

    .nav{

        position:fixed;

        top:90px;

        right:-100%;

        width:280px;

        height:calc(100vh - 90px);

        background:white;

        border-left:1px solid var(--color-border);

        padding:2rem;

        transition:.35s ease;

        opacity:0;

        visibility:hidden;

    }

    .nav.active{

        right:0;

        opacity:1;

        visibility:visible;

    }

    .nav-list{

        flex-direction:column;

        gap:2rem;

    }

    .header-container > .btn{

        display:none;

    }

    .nav-cta{

        width:100%;

        margin-top:2rem;

    }

}

/* ==================================================
   MÒBILS (≤ 768px)
================================================== */

@media (max-width:768px){

    /* ==========================
       GENERAL
    ========================== */

    .section{

        padding:60px 0;

    }

    .grid-3{

        grid-template-columns:1fr;

    }

    .grid-4{

        grid-template-columns:1fr;

    }

    /* ==========================
       HERO
    ========================== */

    .hero{

        min-height:auto;

    }

    .hero-title{

        font-size:clamp(2.5rem,8vw,4rem);

    }

    .hero-buttons{

        flex-direction:column;

        gap:1rem;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-image{

        height:350px;

    }

    /* ==========================
       EMPRESA
    ========================== */

    .empresa-image{

        min-height:350px;

    }

    /* ==========================
       SERVEIS
    ========================== */

    .services-grid{

        grid-template-columns:1fr;

    }

    /* ==========================
       PROJECTES
    ========================== */

    .projects-grid{

        grid-template-columns:1fr;

    }

    .project-large,
    .project-wide{

        grid-column:span 1;

        height:320px;

    }

    /* ==========================
       CONTACTE
    ========================== */

    .contact-box{

        padding:2rem;

    }

    .contact-box .btn{

        width:100%;

    }

     .footer{
        padding:3rem 0 1.5rem;
    }

    .footer-top{
        margin-bottom:2rem;
    }

    .footer-logo{
        width:150px;
    }

    .footer-description{
        font-size:.95rem;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:1rem;
    }

    .footer-card{
        padding:1.5rem 1rem;
        border-radius:16px;
    }

    .footer-icon{
        font-size:1.5rem;
        margin-bottom:.8rem;
    }

    .footer-card h3{
        font-size:1.2rem;
        margin-bottom:.4rem;
    }

    .footer-card p{
        font-size:.95rem;
    }

    .footer-bottom{
        margin-top:2rem;
        font-size:.85rem;
    }

    .footer-card{
    min-height:auto;
}

}