/* ============================================================
   RV STUDIO — Responsivo
   breakpoints: 1024 · 880 · 768 (nav) · 560
   main.js alterna .active em #menuToggle/#mainNav e adiciona
   .fade-in/.visible em .service-item/.portfolio-card.
   ============================================================ */

@media (max-width: 1024px) {
    .hero { padding: calc(var(--header-h) + 60px) 0 72px; }

    .hero-counters { gap: 30px; }

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

@media (max-width: 880px) {
    .services-grid { grid-template-columns: 1fr; }

    .sobre-content { columns: 1; }

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

    .footer-inner { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 768px) {
    .menu-toggle { display: block; }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--sala-deep);
        border-bottom: 1px solid var(--ambar);
        box-shadow: 0 18px 30px rgba(0, 0, 0, 0.6);
        padding: 8px 26px 14px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 0.28s ease, transform 0.28s ease;
    }

    .nav.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-link {
        display: block;
        padding: 13px 4px;
        border-bottom: 1px solid rgba(169, 173, 182, 0.16);
        border-radius: 0;
    }

    .nav-list li:last-child .nav-link { border-bottom: 0; }

    .section { padding: 56px 0; }

    .hero-counters { display: grid; grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 560px) {
    .portfolio-grid { grid-template-columns: 1fr; }

    .portfolio-img { height: 200px; }

    .service-num { font-size: 40px; }

    .hero-links .btn { width: 100%; text-align: center; }

    .whatsapp-float { right: 14px; bottom: 14px; }
}