/* ====================================
   ESTILOS MOBILE (Max-width: 768px)
   ==================================== */
@media (max-width: 768px) {

    /* --- VARIÁVEIS GERAIS (Ajuste de Espaçamento) --- */
    :root {
        --espacamento: 10px;
        --raio-borda: 10px;
    }

    /* --- BASE --- */
    body {
        scroll-snap-type: none;
        height: auto;
    }

    h1 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    /* --- SEÇÕES PRINCIPAIS --- */
    .inicial,
    .principal,
    .Reportagem_1,
    .paginaSobre,
    .paginaReportagem,
    .paginaBaseados {
        scroll-snap-align: start;
        height: fit-content;
        min-height: 100vh;
        padding-top: 0;
        padding-bottom: 0;
        max-width: 100vh;
    }

    .principal {
        flex-direction: column;
        padding-left: var(--espacamento);
        padding-right: var(--espacamento);
        padding-top: 0%;
        height: 100vh;
    }

    .margemTexto {
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 0;
    }

    .rodape {
        justify-content: center;

        padding-left: var(--espacamento);
        padding-right: var(--espacamento);
    }

    .textoRodape {
        font-size: 24pt;
        text-align: center;
    }

    /* --- MAPA --- */
    .mapa {
        flex: none;
        height: 40vh;
        min-height: 300px;
        order: 1;
    }

    #Svg_Container {
        transform: scale(0.7);
        margin-top: -160px;
    }

    #textoMouse {
        font-size: 0;
        background-color: transparent;
        box-shadow: 0 0 0 0 transparent;
    }

    .tituloMapa {
        font-size: 0.8rem;
        margin-top: -15px;
    }

    .lateralDireita {
        flex: none;
        order: 2;
        height: auto;
        border-radius: var(--raio-borda);
        gap: 0px;
    }

    /* --- SELEÇÃO DE BAIRROS (ESQUERDA) --- */
    .Escolha_bairros {
        flex: none;
        min-height: 0;
        font-size: 0.8rem;
        gap: 0px;
    }

    #listaContainer {
        max-height: 100px;
        flex: none;
        margin-bottom: 0;
        gap: 0px !important;
    }

    /* --- INFORMAÇÕES (DIREITA) --- */

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

    .nomeDoBairro {
        grid-column: span 2;
        font-size: 1rem;
        margin-bottom: var(--espacamento);
    }

    .containerOpcaoToggle {
        font-size: 0.8rem;
    }

    .Nome_Bairro {
        font-size: 1rem;
    }

    .destaque {
        font-size: 0.8rem;
        grid-column: span 2;
    }

    .divinformacoes h3 {
        font-size: 0.7rem;
    }

    .divinformacoes h2 {
        font-size: 0.8rem !important;
    }
}