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

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

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

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

    p {
        font-size: 1rem;
    }

    /* --- SEÇÕES PRINCIPAIS --- */
    .inicial,
    .principal,
    .Reportagem_1,
    .paginaSobre,
    .paginaReportagem,
    .paginaBaseados {
        scroll-snap-align: start;
        height: auto;
        min-height: 100vh;
        padding-top: var(--espacamento);
        padding-bottom: var(--espacamento);
    }

    .principal {
        flex-direction: column;
        padding-left: var(--espacamento);
        padding-right: var(--espacamento);
        height: auto;
    }

    .margemTexto {
        padding-left: var(--espacamento);
        padding-right: var(--espacamento);
    }

    .rodape {
        height: 200px;
        justify-content: center;
        padding: var(--espacamento) 0;
    }

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

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

    #Svg_Container {
        transform: scale(0.7);
    }

    #textoMouse {
        max-width: 80%;
    }

    /* --- LATERAL DIREITA (AGORA LADO A LADO) --- */
    .lateralDireita {
        width: 100%;
        flex: none;
        padding: var(--espacamento);
        order: 2;
        margin-top: var(--espacamento);
        height: auto;
        min-height: 0;
        border-radius: var(--raio-borda);

        /* IMPORTANTE — deixa lado a lado */
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }

    /* --- SELEÇÃO DE BAIRROS (ESQUERDA) --- */
    .Escolha_bairros {
        width: 45%;
        flex: none;
        overflow-y: auto;
        min-height: 0;
    }

    #listaContainer {
        overflow-y: auto;
        max-height: 280px;
        flex: none;
        margin-bottom: var(--espacamento);
    }

    #listaContainer li {
        font-size: 0.9rem;
    }

    /* --- INFORMAÇÕES (DIREITA) --- */
    
    .informacoes {
        width: 55%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .nomeDoBairro {
        grid-column: span 2;
        font-size: 1.3rem;
        margin-bottom: 5px;
    }

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

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

    /* --- SELECTOR DE VISUALIZAÇÃO --- */
    .seletor {
        gap: 8px;
        margin: 15px 0;
    }

    .seletor .opcao {
        padding: 6px 0;
        font-size: 10px;
    }
}