/* =====================================================================
   RESPONSIVO — tablets e celulares
   ===================================================================== */
@media (max-width: 1100px) {
    .grade-4 { grid-template-columns: repeat(3, 1fr); }
    .nav-links a { padding: .45em .6em; font-size: .76rem; }
    .rodape-grid { grid-template-columns: repeat(3, 1fr); }
    .rodape-slogan { grid-column: span 3; justify-self: start; }
}

@media (max-width: 1180px) {
    .menu-mobile { display: inline-grid; }
    .nav-links {
        position: absolute; left: 18px; right: 18px; top: calc(100% + 8px);
        flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--branco); border-radius: 20px; padding: 10px; box-shadow: var(--sombra-lg);
        opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--trans);
    }
    .nav-links.aberto { opacity: 1; visibility: visible; transform: none; }
    .nav-links a { padding: .8em 1em; font-size: .9rem; }
    .nav-pilula { position: relative; }
    .nav-acoes { margin-left: auto; }
}

@media (max-width: 960px) {
    .menu-mobile { display: inline-grid; }
    .nav-links {
        position: absolute; left: 18px; right: 18px; top: calc(100% + 8px);
        flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--branco); border-radius: 20px; padding: 10px; box-shadow: var(--sombra-lg);
        opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--trans);
    }
    .nav-links.aberto { opacity: 1; visibility: visible; transform: none; }
    .nav-links a { padding: .8em 1em; font-size: .9rem; }
    .nav-pilula { position: relative; }
    .nav-acoes { margin-left: auto; }
    .seletor-cidade select { max-width: 110px; }

    .hero, .perfil-hero, .detalhe, .agendar, .historia, .auth { grid-template-columns: 1fr; }
    .auth-arte { min-height: 220px; padding: 28px; }
    .auth-arte::before, .auth-arte::after { display: none; }
    .perfil-arco { max-width: 420px; margin: 0 auto; order: -1; }
    .hero-grande { min-height: 300px; }
    .grade-3, .grade-4 { grid-template-columns: repeat(2, 1fr); }
    .passos { grid-template-columns: 1fr; }
    .explorar { grid-template-columns: 1fr; }
    .filtros { position: static; display: none; background: var(--azul-50); padding: 18px; border-radius: 16px; }
    .filtros.aberto { display: block; }
    .btn-filtros { display: inline-flex; margin-bottom: 16px; }
    .resumo-proc { position: static; }

    .painel { grid-template-columns: 1fr; }
    .menu-lateral { position: static; max-height: none; display: none; }
    .menu-lateral.aberto { display: block; }
    .btn-menu-painel { display: inline-flex !important; }
}

@media (max-width: 640px) {
    body { font-size: 14px; }
    .container { padding: 0 16px; }
    .topo { padding: 10px 10px 0; }
    .nav-pilula { padding: 6px 6px 6px 16px; gap: 8px; }
    .marca span, .nome-nav, .nav-acoes > a.btn-icone { display: none; }
    .avatar-btn { padding-right: 6px; }
    .seletor-cidade { padding-left: 8px; }
    .seletor-cidade select { max-width: 92px; font-size: .72rem; }
    .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr; }
    .grade-auto { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
    .form-grid .col-2 { grid-column: span 1; }
    .hero-texto { padding-left: 18px; }
    .hero-redes { display: none; }
    .mosaico { columns: 2 140px; column-gap: 10px; }
    .mosaico-item { margin-bottom: 10px; }
    .rodape-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
    .rodape-slogan { grid-column: span 2; }
    .compromisso { grid-template-columns: 62px 1fr; }
    .compromisso > :last-child { grid-column: span 2; }
    .card-linha { flex-wrap: wrap; }
    .card-linha .lado { width: 100%; align-items: stretch; }
    .toasts { left: 12px; right: 12px; max-width: none; top: 76px; }
    .cookie-banner { flex-direction: column; text-align: center; left: 10px; right: 10px; bottom: 10px; }
    .semana-dia { grid-template-columns: 1fr; }
    .dropdown-notif { width: calc(100vw - 30px); right: -60px; }
    .modal-caixa { padding: 22px 18px; }
}

.btn-menu-painel { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .topo, .rodape, .menu-lateral, .faixa-teste, .cookie-banner, .toasts { display: none !important; }
    .painel { grid-template-columns: 1fr; }
}