@media (max-width: 992px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { order: -1; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .service-detail { grid-template-columns: 1fr; }
    .split-grid, .split-grid.contact-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
    /* Compact mobile top bar: keep the phone number tappable, drop the rest */
    .topbar { font-size: 0.78rem; }
    .topbar .container { justify-content: center; padding-top: 0.45rem; padding-bottom: 0.45rem; }
    .topbar-hide-mobile { display: none !important; }

    .navbar-links {
        position: fixed; top: 0; right: 100%; height: 100vh; width: min(320px, 85vw);
        background: var(--white); flex-direction: column; align-items: flex-start;
        padding: 6rem 2rem 2rem; box-shadow: var(--shadow-lg); transition: right 0.3s ease;
        gap: 1.5rem; z-index: 260; overflow-y: auto;
    }
    .navbar-links.open { right: 0; }
    .navbar-links a { font-size: 1.05rem; width: 100%; }
    .nav-toggle { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; }

    .nav-backdrop {
        display: none; position: fixed; inset: 0; background: rgba(7,23,48,0.55);
        z-index: 250; opacity: 0; transition: opacity 0.3s ease;
    }
    .nav-backdrop.open { display: block; opacity: 1; }
    body.nav-open { overflow: hidden; }

    .navbar-cta .btn-primary { padding: 0.6rem 1.1rem; font-size: 0.85rem; }
    .hero { padding: 3.5rem 0 3rem; }
    .hero-stats { gap: 1.5rem; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .split-grid, .split-grid.contact-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .feature-list { grid-template-columns: 1fr; }
    .section { padding: 3.5rem 0; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .cta-actions, .hero-actions { flex-direction: column; align-items: stretch; }
    .whatsapp-float { width: 50px; height: 50px; font-size: 1.4rem; bottom: 1.25rem; right: 1.25rem; }
}

@media (max-width: 480px) {
    .hero-stats { flex-direction: column; gap: 0.9rem; }
}