/* =========================================================
   RS77 - RESPONSIVE.CSS
   ========================================================= */

@media(max-width:1100px){
    .services-grid{grid-template-columns:repeat(2,1fr)}
    .gallery-grid{grid-template-columns:repeat(3,1fr)}
    .process-grid{grid-template-columns:repeat(2,1fr)}
    .two-columns{gap:45px}
}

@media(max-width:820px){
    .navbar{padding:0 5%;height:72px}
    .navbar.scrolled{height:64px}
    .menu-mobile{display:flex;position:relative;z-index:1002}
    .menu{
        position:fixed;
        inset:0 0 0 auto;
        width:min(360px,88vw);
        height:100vh;
        padding:110px 35px 35px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
        background:rgba(7,7,7,.98);
        backdrop-filter:blur(20px);
        border-left:1px solid var(--borde-verde);
        transform:translateX(100%);
        transition:.4s ease;
    }
    .menu.active{transform:translateX(0)}
    .menu a{font-size:.85rem;width:100%}
    .hero h1{font-size:clamp(5.5rem,22vw,9rem)}
    .two-columns,.contact-grid{grid-template-columns:1fr}
    .image-frame{order:2}
    .content-block{order:1}
    .image-frame img{height:430px}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .stat:nth-child(2){border-right:0}
    .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--borde)}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:560px){
    .section{padding:75px 0}
    .container{width:90%}
    .logo img{width:70px;height:52px}
    .hero-content{padding-top:65px}
    .hero h1{font-size:clamp(4.6rem,24vw,7rem);letter-spacing:-4px}
    .hero h2{font-size:1.1rem;letter-spacing:4px}
    .hero-buttons{flex-direction:column;align-items:flex-start}
    .btn{width:100%;max-width:290px}
    .section-title h2,.content-block h2{font-size:3rem}
    .services-grid,.process-grid,.gallery-grid{grid-template-columns:1fr}
    .gallery-item{height:330px}
    .stats-grid{grid-template-columns:1fr 1fr}
    .stat strong{font-size:3rem}
    .stat span{font-size:1.4rem}
    .stat{padding:28px 8px}
    .image-frame img{height:350px}
    .contact-grid{gap:40px}
    .footer-content{flex-direction:column;text-align:center}
    .whatsapp-float{right:18px;bottom:18px}
    .back-top{right:25px;bottom:86px}
}