/* ============================================================
   LOJA MAGAZINES — Responsivo
   breakpoints: 1024 · 880 · 768 (nav) · 560
   main.js alterna .active em .menu-toggle/.nav-list — painel
   mobile = .nav-list.active abaixo.
   ============================================================ */

@media (max-width: 1024px) {
    .categorias-grid { grid-template-columns: repeat(2, 1fr); }

    .hero .container { gap: 36px; }
}

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

    .hero p { max-width: none; }

    .hero-visual { max-width: 480px; }

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

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

    .nav-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--branco);
        border-bottom: 3px solid var(--ink);
        box-shadow: 0 4px 0 var(--oferta), 0 18px 30px rgba(34, 38, 43, 0.14);
        padding: 10px 24px 16px;
    }

    .nav-list a {
        display: block;
        padding: 13px 4px;
        border-radius: 0;
        border-bottom: 2px dashed var(--hairline);
    }

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

    .nav-list a::after { display: none; }

    .hero { padding: calc(var(--header-h) + 44px) 0 60px; }

    .secao { padding: 58px 0; }

    .conteudo-section { padding: 52px 0; }

    .secao-header { margin-bottom: 38px; }
}

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

    .hero-grid-display { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .hero-grid-item { min-height: 88px; }

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

    .footer-bottom { flex-direction: column; align-items: flex-start; }

    .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}