/* CONFIGURAÇÃO PARA ALINHAR INFOS */

/* PEGUEI DA FORMA ATUALIZADA DO ESTADÃO */

:root {
    --cor-pilula: #313131;
    --cor-texto: #313131;
    --cor-inicial-barra-legenda:#ededed;
    /* SE PRECISAR, UMA COR INTERMEDIÁRIA */
    --cor-intermedia-barra-legenda:#0093D6; 
    --cor-maxima-barra-legenda:#005d92;

}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXjeu.woff2") format("woff2");
}
@font-face {
    font-family:"Open Sans" ;
    src: url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
}

.titulo-infografia {
    font-family: "Open Sans", sans-serif;
    text-align: left;
    margin:0;
}

.titulo-infografia__abre {
    font-size: 1.6rem;
    text-align: left;
    color: #333333;
    margin-bottom: 0;
    font-weight: 300;
}

.titulo-infografia__linha-fina {
    font-size: 1.35rem;
    color: #7D7D7D;
    margin-top: 1px;
    text-align: left;
    font-weight: 200;
}


.rodape-infos {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--cor-texto);
}
.titulo-infografia {
    font-family: "Lato", sans-serif;
    text-align: center;
}

/* Escala de cor de 0% a 100% */
.legenda-cor-em-porct {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 150px;
    max-width: 420px;
    margin: 0 auto 20px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
}

.legenda-cor-em-porct__barra {
    flex: 1;
    height: 20px;
    border-radius: 20px;
    background: linear-gradient(to right, var(--cor-inicial-barra-legenda) 0%, var(--cor-maxima-barra-legenda) 100%);
}

.legenda-cor-em-porct__label {
    font-size: 13px;
    color:var(--cor-texto);
    white-space: nowrap;
}

.mapas-wrapper {
    position: relative; /* Referência para a camada de anotação posicionar em % */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.box-maior {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px; /* Espaço entre as duas infografias */
    width: 100%;
}

/* Camada de anotação sobre os mapas */
.anotacoes-mapa {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none; /* deixa cliques e hover passarem para o mapa por baixo */
}

.anotacoes-mapa__caixa {
    position: absolute;
    top: var(--top, 0);
    left: var(--left, 0);
    max-width: 200px;
    padding: 10px 14px;
    font-family: "Lato", sans-serif;
    font-size: 13px;
    line-height: 1.3;
    color: var(--cor-texto);
}

.anotacoes-mapa__caixa p {
    margin: 0;
}

/* Linha em L: sai do ponto marcado no mapa, sobe e depois vira até a caixa */
.anotacoes-mapa__linha-vertical {
    position: absolute;
    top: var(--top, 0);
    left: var(--left, 0);
    width: 3px;
    height: var(--altura, 0);
    background: #000;
    border: 1px solid #fff;
}

.anotacoes-mapa__linha-horizontal {
    position: absolute;
    top: var(--top, 0);
    left: var(--left, 0);
    width: var(--largura, 0);
    height: 3px;
    background: #000;
    border: 1px solid #fff;
    z-index: 33;
}

/* Faz com que cada coluna ocupe 50% do espaço e centralize a pílula */
.infografia-esquerda,
.infografia-direita {
    flex: 1; /* Divide o espaço igualmente entre os dois lados */
    min-width: 0; /* Evita que o iframe estoure a coluna do flex */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza a pílula sobre o iframe */
    margin: 10px;
}

.flourish-embed {
    width: 100%;
}

.pilula {
    padding: 10px 20px;
    background-color:var(--cor-pilula);
    text-align: center;
    border-radius: 30px;
    color: #fff;
    font-family: "Lato", sans-serif;
    width: fit-content;
    margin-bottom: 10px; /* Distância entre a pílula e o mapa */
    font-size: 20px;
}


.flourish-credit {
    display: none;
}


/* Responsividade: no celular, as infografias ficam uma embaixo da outra */
@media (max-width: 640px) {
    .box-maior {
        flex-direction: column;
        align-items: stretch; /* Faz as colunas ocuparem toda a largura e centralizarem o conteúdo */
        gap: 30px; /* Espaço entre os dois mapas empilhados */
    }
}

@media (max-width: 640px) {
    body {
        padding: 12px;
    }

    .infografia-esquerda,
    .infografia-direita {
        margin: 0;
    }

    .pilula {
        font-size: 16px;
        padding: 8px 16px;
        margin-bottom: 6px;
    }
    .rodape-infos {
        font-size: 10px;
        padding: 8px 16px;
        margin-bottom: 6px;
    }

    /* No celular a anotação continua sobre os mapas, com a caixa e as
    linhas de conexão — só o círculo do ponto some, pra não ficar
    muito poluído numa tela pequena.

    Posição específica pro mobile: edite os valores abaixo (não mexem
    nas variáveis --top/--left do HTML, só sobrescrevem a posição
    aqui dentro do media query). */
    .anotacoes-mapa__caixa {
        top: 24%;
        left: 50%;
    }

    .anotacoes-mapa__linha-vertical {
        top: 15%;
        left: 45%;
        height: 11%;
    }

    .anotacoes-mapa__linha-horizontal {
        top: 26%;
        left: 45%;
        width: 5%;
    }

    .anotacoes-mapa__ponto {
        display: none;
    }
}