/* ===========================================================
   RESPONSIVE — mobile-first overrides
   Breakpoints: 1080px (tablet/laptop), 900px (nav), 640px (mobile), 420px (mobile chico)
=========================================================== */

/* ---------- <= 1080px : layout general / hero / secciones ---------- */
@media (max-width:1080px){
    :root{
        --section-space:88px;
        --header-height:80px;
    }

    .logo img{
        height:42px;
    }

    .hero-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .hero-content{
        padding-top:0;
        order:1;
        text-align:left;
    }

    .hero-image{
        order:2;
    }

    .hero-image-placeholder{
        height:420px;
    }

    .hero-image img{
        height:420px;
    }

    .hero-stats{
        gap:36px;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }

    .contact-cta-box{
        order:-1;
    }
}

/* ---------- <= 900px : navegación móvil ---------- */
@media (max-width:900px){
    .menu-toggle{
        display:flex;
    }

    .navbar > .btn-primary{
        display:none;
    }

    .menu{
        position:fixed;
        top:0;
        right:0;
        height:100vh;
        width:min(80%,340px);
        background:var(--grafito);
        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
        gap:28px;
        padding:40px;
        transform:translateX(100%);
        transition:transform .4s ease;
        z-index:9999;
    }

    .menu.open{
        transform:translateX(0);
        box-shadow:-20px 0 60px rgba(0,0,0,.3);
    }

    .menu a{
        font-size:1.2rem;
    }

    .menu-cta-mobile{
        display:block;
        margin-top:12px;
        width:100%;
    }

    .menu-cta-mobile .btn{
        width:100%;
    }
}

/* ---------- <= 768px : tipografía y espaciados ---------- */
@media (max-width:768px){
    :root{
        --section-space:64px;
    }

    .section-head{
        margin-bottom:44px;
    }

    .hero-title{
        margin:22px 0;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-buttons .btn{
        width:100%;
    }

    .hero-image-placeholder{
        height:320px;
        border-radius:20px;
    }

    .hero-image{
        border-radius:20px;
    }

    .hero-image img{
        height:320px;
    }

    .features-grid,
    .value-grid,
    .services-grid,
    .clients-grid{
        grid-template-columns:1fr;
    }

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

    .gallery-grid{
        grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
        gap:10px;
    }

    .gallery-filters{
        gap:8px;
    }

    .filter-btn{
        padding:8px 16px;
        font-size:.8rem;
    }

    .lightbox-nav{
        width:42px;
        height:42px;
    }

    .lightbox-prev{
        left:8px;
    }

    .lightbox-next{
        right:8px;
    }

    .service-photo{
        height:180px;
    }

    .regions{
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
    }

    .cta-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .cta-buttons .btn{
        width:100%;
    }

    .footer-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:28px;
    }

    .footer-inner .btn{
        width:100%;
        justify-content:center;
    }

    .footer-bottom{
        flex-direction:column;
    }
}

/* ---------- <= 480px : ajustes finos mobile ---------- */
@media (max-width:480px){
    .logo-text small{
        display:none;
    }

    .badge{
        font-size:.7rem;
        letter-spacing:1px;
        text-align:center;
    }

    .hero-stats{
        gap:24px;
    }

    .sectors-grid{
        grid-template-columns:1fr 1fr;
        gap:14px;
    }

    .sector-item{
        padding:20px 12px;
    }

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

    .contact-item{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

    .whatsapp-float{
        width:54px;
        height:54px;
        bottom:18px;
        right:18px;
    }

    .whatsapp-float svg{
        width:26px;
        height:26px;
    }

    .scroll-down{
        display:none;
    }
}