/* ============================================================
   HABILI - Responsividade (mobile first ajustes)
   ============================================================ */

/* Tablets */
@media (max-width: 960px) {
    .grade-4 { grid-template-columns: repeat(2, 1fr); }
    .grade-3 { grid-template-columns: repeat(2, 1fr); }
    h1 { font-size: 2rem; }
    .hero { padding: 56px 0 64px; }
    .hero-busca { padding: 36px 0 56px; }
    .filtros-grade { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Celulares */
@media (max-width: 640px) {
    .conteudo { padding: 0 16px; }

    .menu-topo { display: none; }
    .menu-topo.aberto {
        display: flex;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: var(--branco);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px 16px;
        border-bottom: 1px solid var(--cinza-borda);
        box-shadow: var(--sombra-media);
        z-index: 51;
    }
    .menu-topo.aberto a {
        padding: 14px 0;
        width: 100%;
        border-bottom: 1px solid var(--cinza-borda);
        font-size: 1rem;
    }
    .menu-topo.aberto .botao {
        margin-top: 8px;
        text-align: center;
        border-bottom: none;
    }

    .botao-menu-mobile { display: inline-flex; margin-left: auto; }

    .grade, .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr !important; }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
    .hero { padding: 32px 0 40px; }
    .hero h1 { font-size: 1.5rem; line-height: 1.3; }
    .hero .subtitulo { font-size: .98rem; margin-bottom: 24px; }

    .busca { flex-direction: column; padding: 12px; }
    .busca .campo { flex: 1 1 auto; }
    .busca .botao { width: 100%; }

    .rodape .colunas {
        flex-direction: column;
        gap: 24px;
    }
    .faixa-cta { padding: 28px 20px; }

    .pagina-acesso { margin: 20px auto; }
    .pagina-acesso .cartao { padding: 24px 18px; }

    .painel-topo { padding: 24px 0; }
    .painel-topo h1 { font-size: 1.3rem; }

    .secao { padding: 36px 0; }

    .hero-busca { padding: 24px 0 48px; }
    .hero-busca h1 { font-size: 1.4rem; }
    .filtros-grade { grid-template-columns: 1fr !important; }
    .filtros-acoes { flex-direction: column; }
    .filtros-acoes .botao { width: 100%; }
    .grade-resultados .cartao-profissional { padding: 24px 16px; }
    .paginacao { flex-wrap: wrap; }

    /* Chat mobile */
    .chat-layout { flex-direction: column; min-height: 400px; }
    .chat-lista { width: 100%; border-right: none; border-bottom: 1px solid var(--cinza-borda); max-height: none; }
    .chat-lista-oculta-mobile { display: none; }
    .chat-voltar { display: inline-flex; }
    .chat-msg { max-width: 85%; }

    /* Perfil/empresa: stack vertical no mobile */
    .cartao-topo-perfil {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .cartao-topo-perfil .info-perfil {
        min-width: 100%;
        text-align: center;
    }
    .cartao-topo-perfil .acoes-perfil {
        justify-content: center;
    }

    /* Botoes e formularios */
    .botao-grande { padding: 13px 20px; font-size: .98rem; }

    .campo-form input,
    .campo-form select,
    .campo-form textarea { font-size: .95rem; padding: 11px 12px; }
}

/* Botao do menu mobile (oculto no desktop) */
.botao-menu-mobile {
    display: none;
    background: transparent;
    border: 1.5px solid var(--cinza-borda);
    border-radius: var(--raio-pequeno);
    padding: 8px 10px;
    cursor: pointer;
    transition: border-color .15s;
}
.botao-menu-mobile:hover { border-color: var(--verde); }
.botao-menu-mobile svg { width: 22px; height: 22px; color: var(--azul); }

/* ----- Menu inferior fixo (area logada no celular) ----- */
.menu-inferior { display: none; }
@media (max-width: 760px) {
    .menu-inferior {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: var(--branco);
        border-top: 1px solid var(--cinza-borda);
        z-index: 60;
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    }
    .menu-inferior a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        font-size: .7rem;
        font-weight: 600;
        color: var(--cinza-texto);
        padding: 6px 0;
    }
    .menu-inferior a.ativo { color: var(--verde); }
    .menu-inferior a svg { width: 22px; height: 22px; }
    .menu-inferior a:hover { text-decoration: none; }

    body { padding-bottom: 68px; }
}