/* ============================================================
   SACOLEIRA CHIQUE — Responsivo
   breakpoints: 1024 · 860 · 768 (nav) · 480
   main.js alterna .active em #mainNav/#menuToggle — o painel
   mobile é este .nav.active abaixo (transform/opacity).
   ============================================================ */

@media (max-width: 1024px) {
    .hero::before, .hero::after { display: none; }

    .blob-1 { width: 280px; height: 280px; }

    .blob-2 { width: 220px; height: 220px; }
}

@media (max-width: 860px) {
    .contato-box { grid-template-columns: 1fr; gap: 28px; }

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

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

    .nav {
        position: fixed;
        top: var(--header-h);
        left: 0;
        width: 100%;
        background: var(--panel);
        border-bottom: 1px solid var(--noir);
        padding: 18px 24px 22px;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        box-shadow: var(--shadow);
        z-index: 999;
    }

    .nav.active { transform: translateY(0); opacity: 1; visibility: visible; }

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

    .nav-link {
        display: block;
        padding: 13px 4px;
        border-bottom: 1px solid var(--line);
    }

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

    .hero { min-height: auto; }

    .hero-inner { padding: 56px 16px 64px; }

    .highlight { padding: 6px 18px; }

    .section { padding: 60px 0; }

    #fachada-moda .section-title::before,
    #energia-eventos-moda .section-title::before {
        font-size: 0.58rem;
        letter-spacing: 0.26em;
    }
}

@media (max-width: 480px) {
    .hero-cta { flex-direction: column; align-items: stretch; }

    .btn { width: 100%; max-width: 320px; margin-inline: auto; }

    .hero-highlights { flex-direction: column; gap: 8px; }

    .highlight { justify-content: center; }

    .highlight + .highlight { border-left: 0; border-top: 1px solid var(--line); }

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

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

    .contact-form { padding: 26px 22px; }
}