/* ===========================================================================
   NÚMEROS · folha exclusiva de /numeros.html
   ---------------------------------------------------------------------------
   Carregada DEPOIS de styles.css e editorial.css. Só existe aqui porque
   nenhuma outra página do site tem gráfico. Se um dia tiver, promova o bloco
   GRÁFICO DE BARRAS para editorial.css e apague daqui.

   REGRA DO GRÁFICO NESTE SITE: o número sempre está escrito ao lado da barra.
   A barra é o desenho, não o dado. Isso resolve três coisas de uma vez:
   funciona sem JavaScript, funciona em leitor de tela e funciona impresso em
   preto e branco. Nenhum valor deste site depende de o olho medir comprimento.

   COMPRIMENTO DA BARRA: vem da variável inline --p, que é a porcentagem do
   valor sobre o MAIOR valor daquele gráfico. Calculado à mão na escrita do
   HTML, não em tempo de execução. Se trocar um número, recalcule o --p.
   =========================================================================== */


/* ===========================================================================
   FAIXA DE NÚMEROS GRANDES
   ---------------------------------------------------------------------------
   Abre a página e abre cada bloco temático. Mesmo papel da .prova da home,
   mas com uma linha de contexto abaixo do rótulo (a taxa, a variação), que a
   .prova não tem. Por isso é classe própria e não reuso.
   =========================================================================== */

.dados {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding: var(--s-4) 0;
  border-top: 2px solid var(--tinta);
  border-bottom: 1px solid var(--borda);
  margin-bottom: var(--s-5);
}

.dados__item { min-width: 0; }

.dados__n {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  margin: 0 0 var(--s-2);
}

/* O acento vermelho entra em UM número por faixa, o que a faixa quer que a
   pessoa leve embora. Vermelho em tudo vira ruído e para de significar. */
.dados__n--acento { color: var(--acento); }

.dados__r {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--txt);
  margin: 0 0 var(--s-1);
  max-width: 22ch;
}

/* A taxa por 100 mil, a variação contra o ano anterior. Metadado, mono. */
.dados__sub {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--txt-2);
  margin: 0;
}


/* ===========================================================================
   BLOCO TEMÁTICO
   ---------------------------------------------------------------------------
   Cada recorte de dado (feminicídio, violência sexual, São Paulo) é um bloco
   com cabeçalho próprio, divisória em cima e fonte no pé.
   =========================================================================== */

.bloco-dado {
  padding-top: var(--s-5);
  margin-bottom: var(--s-5);
  border-top: 1px solid var(--borda);
}

.bloco-dado__cab { margin-bottom: var(--s-4); }

.bloco-dado__cab h2,
.bloco-dado__cab h3 {
  font-size: clamp(1.5rem, 3.8vw, 2rem);
  margin: var(--s-1) 0 var(--s-2);
}

.bloco-dado__cab p {
  color: var(--txt-2);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 62ch;
  margin: 0;
}

/* A fonte fica no pé de CADA bloco, não só no fim da página. Decisão de
   escopo: o dado sai daqui em print de tela e em story, e sem a fonte junto
   ele vira boato. Repetir é chato e é o certo. */
.fonte-dado {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--txt-2);
  margin: var(--s-3) 0 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--borda);
  max-width: 80ch;
}


/* ===========================================================================
   GRÁFICO DE BARRAS
   ---------------------------------------------------------------------------
   Barra horizontal, não vertical. Motivo: rótulo de estado cabe deitado sem
   girar texto, e a lista cresce para baixo, que é o eixo que o celular tem
   de sobra. Gráfico de coluna em tela de 360px vira ilegível.

   Marcação: <ol class="graf"> com <li class="graf__l">, dentro
   .graf__uf (sigla) + .graf__barra (o traço) + .graf__v (o número).
   =========================================================================== */

/* A GRADE É DA LISTA INTEIRA, não de cada linha. Isto é o que garante que
   todas as barras comecem na MESMA vertical: sem uma base comum, comparar o
   comprimento de duas barras nao quer dizer nada. Medido em 07/09/2026, antes
   da correcao: no grafico de registros por feminicidio cada linha resolvia a
   propria largura de rotulo e as barras comecavam em 167px, 219px, 272px e
   334px, cada uma de um lugar. */
.graf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-2);
}

/* A coluna do rótulo é "auto", NÃO uma largura fixa. Estava em 2.25rem, que
   é a medida de uma sigla de estado (SP, MG), e o gráfico foi depois
   reaproveitado para categorias escritas por extenso. Resultado medido em
   07/09/2026: "Medida protetiva descumprida" quebrava em SETE linhas dentro
   de 36px, virando uma torre de letras com a barra de 22px perdida no meio.
   Com "auto" cada gráfico se ajusta ao seu próprio rótulo mais longo, e o
   ranking de estados continua com os mesmos 36px de antes. */
.graf__l {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
}
/* "subgrid" faz a linha herdar as colunas da lista, entao a coluna do rotulo
   e medida pelo rotulo mais longo do grafico TODO e vale para todas as
   linhas. Onde nao houver subgrid, a regra acima continua valendo: as barras
   voltam a comecar em pontos diferentes, mas o grafico continua legivel. */
@supports (grid-template-columns: subgrid) {
  .graf__l {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}

.graf__uf {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--txt-2);
  /* Rótulo em uma linha só. É ele que define a largura da coluna: se
     quebrasse, "auto" perderia o sentido e a torre de letras voltaria. */
  white-space: nowrap;
}

.graf__barra {
  height: 1.375rem;
  background: var(--tinta-3);
  width: calc(var(--p) * 1%);
  /* 3px e não 2px: no gráfico de registros por feminicídio a menor barra vale
     1 contra 501,9, e com 2px ela sumia. Continua minúscula de propósito,
     porque a desproporção É o dado, mas agora dá para ver que existe. */
  min-width: 3px;
  border-radius: 0 4px 4px 0;
}

.graf__v {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  justify-self: end;
}

/* Estado em destaque na narrativa da página: São Paulo. É o único que ganha
   vermelho, e ganha porque a página inteira é sobre a escala de SP. */
.graf__l--foco .graf__barra { background: var(--acento); }
.graf__l--foco .graf__uf,
.graf__l--foco .graf__v { color: var(--acento-txt); font-weight: 500; }

.graf__tit {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-2);
  margin: 0 0 var(--s-3);
}


/* No celular a barra ganha a linha inteira, com rótulo e valor em cima dela.
   Motivo: com o rótulo por extenso ocupando a largura que ele precisa, sobrava
   uma tira de barra curta demais para comparar qualquer coisa numa tela de
   375px. Rótulo e valor na primeira linha, barra na segunda, e aí a barra usa
   a largura toda: é a mesma informação, lida de cima para baixo. */
@media (max-width: 40rem) {
  .graf {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-3);
  }
  .graf__l {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem var(--s-2);
  }
  .graf__uf { grid-area: 1 / 1 / 2 / 2; white-space: normal; }
  .graf__v  { grid-area: 1 / 2 / 2 / 3; }
  .graf__barra { grid-area: 2 / 1 / 3 / 3; }
}


/* ===========================================================================
   PAR GRÁFICO + LEITURA
   ---------------------------------------------------------------------------
   Gráfico à esquerda, o que ele significa à direita. No celular vira uma
   coluna só e o texto entra DEPOIS do gráfico, que é a ordem de leitura certa:
   primeiro o dado, depois a interpretação.
   =========================================================================== */

.par-dado { display: grid; gap: var(--s-4); }

@media (min-width: 56rem) {
  .par-dado {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
  }
}

.leitura-dado h3,
.leitura-dado h4 {
  font-size: 1.125rem;
  margin: 0 0 var(--s-2);
}

.leitura-dado p,
.leitura-dado li {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--txt-2);
}

.leitura-dado p { margin: 0 0 var(--s-3); }
.leitura-dado ul { margin: 0 0 var(--s-3); padding-left: 1.1rem; }
.leitura-dado li { margin-bottom: var(--s-1); }
.leitura-dado > :last-child { margin-bottom: 0; }

/* Cartão de taxa: a lista de estados com maior risco proporcional, que é o
   contraponto do ranking absoluto. Fundo elevado para o olho separar. */
.taxas {
  background: var(--sup-alta);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--acento);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
}

.taxas p.meta { margin: 0 0 var(--s-2); }

.taxas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.taxas li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--borda);
  color: var(--txt-2);
  margin: 0;
}

.taxas li:last-child { border-bottom: 0; }
.taxas li strong { font-weight: 500; color: var(--txt); }


/* ===========================================================================
   GRADE DE CARTÕES DE CONTEXTO
   ---------------------------------------------------------------------------
   Os três cuidados de leitura e os três fatores do diagnóstico. Mesmo desenho
   do .compr da home (número, título, texto), mas em fundo elevado, porque
   aqui é ressalva e não compromisso: precisa ler como nota, não como promessa.
   =========================================================================== */

.notas {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.notas__item {
  background: var(--sup-alta);
  border: 1px solid var(--borda);
  padding: var(--s-3);
}

.notas__item h3,
.notas__item h4 {
  font-size: 1.0625rem;
  margin: var(--s-2) 0 var(--s-2);
}

.notas__item ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--txt-2);
}

.notas__item li { margin-bottom: var(--s-1); }
.notas__item li:last-child { margin-bottom: 0; }


/* ===========================================================================
   PROPORÇÃO EM DUAS PARTES
   ---------------------------------------------------------------------------
   "Onde a violência acontece": barra empilhada de 100%, com legenda escrita.
   Não é rosca. Rosca de duas fatias obriga o olho a comparar ângulo, e ângulo
   é o pior canal de leitura que existe. Barra empilhada compara comprimento.
   =========================================================================== */

.prop { margin-bottom: var(--s-4); }

.prop__tit {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-2);
  margin: 0 0 var(--s-2);
}

.prop__barra {
  display: flex;
  height: 2.5rem;
  border: 1px solid var(--tinta);
  overflow: hidden;
}

/* O neutro é --linha e não --papel-3. Motivo conferido em tela: ao lado de
   --acento-bg (rosa muito claro), o --papel-3 fica indistinguível, e a fatia
   de 3,9% some. --linha é bege acinzentado e separa de longe. */
.prop__parte {
  width: calc(var(--p) * 1%);
  min-width: 2px;
  background: var(--linha);
  border-right: 1px solid var(--tinta);
}

.prop__parte:last-child { border-right: 0; }
.prop__parte--forte { background: var(--acento); }
.prop__parte--medio { background: var(--acento-bg); }

.prop__legenda {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--txt-2);
}

.prop__legenda li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.prop__chave {
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--tinta);
  background: var(--linha);
  flex: none;
}

.prop__chave--forte { background: var(--acento); }
.prop__chave--medio { background: var(--acento-bg); }


/* ===========================================================================
   SÃO PAULO · COMPARAÇÃO DE DOIS PERÍODOS
   ---------------------------------------------------------------------------
   Mesma barra do .graf, mas duas por região (2025 e 2026). O ano fica escrito
   em cada barra: sem legenda de cor solta, que obriga a pessoa a subir e
   descer a tela para lembrar qual cor é qual ano.
   =========================================================================== */

.comp { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }

.comp__reg { margin: 0; }

.comp__nome {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 var(--s-2);
}

.comp__par { display: grid; gap: 0.35rem; }

.comp__l {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
}

.comp__ano {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--txt-2);
  white-space: nowrap;
}

.comp__barra {
  height: 1.125rem;
  width: calc(var(--p) * 1%);
  min-width: 3px;
  background: var(--tinta-3);
  border-radius: 0 4px 4px 0;
}

.comp__l--novo .comp__barra { background: var(--acento); }
.comp__l--novo .comp__v { color: var(--acento-txt); }

.comp__v {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  justify-self: end;
}

/* A variação de cada região, escrita. Alta em vermelho, queda em tinta. */
.comp__var {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--txt-2);
  margin: var(--s-1) 0 0;
}

.comp__var strong { color: var(--acento-txt); font-weight: 500; }


/* ===========================================================================
   PONTE PARA AS PROPOSTAS
   ---------------------------------------------------------------------------
   O fim da página. Três colunas de tema, cada uma com links para as propostas
   que respondem àquele recorte do diagnóstico.
   =========================================================================== */

/* Três colunas OU uma, nunca duas. Com auto-fit, a largura intermediária
   dava duas colunas e uma órfã embaixo, desequilibrada. São três temas e a
   grade tem que mostrar os três lado a lado ou empilhados. */
.ponte { display: grid; gap: var(--s-4); }

@media (min-width: 58rem) {
  .ponte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
}

.ponte__col h3 {
  font-size: 1.125rem;
  margin: 0 0 var(--s-1);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--tinta);
}

.ponte__col > p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--txt-2);
  margin: var(--s-2) 0 var(--s-3);
}

.ponte__col ul { list-style: none; margin: 0; padding: 0; }

.ponte__col li {
  border-bottom: 1px solid var(--borda);
  margin: 0;
}

.ponte__col li a {
  display: block;
  padding: var(--s-2) 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--txt);
  text-decoration: none;
}

.ponte__col li a:hover {
  color: var(--acento-txt);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}


/* ===========================================================================
   OS QUATRO EIXOS · a espinha da página desde 07/09/2026
   ---------------------------------------------------------------------------
   ENTROU COM O DOCUMENTO "Ajustes e construção do portal", da campanha, que
   manda organizar o diagnóstico inteiro em Prevenir, Proteger, Responsabilizar
   e Incluir, nessa ordem e com esses nomes. Antes disso a página era uma
   sequência de recortes (feminicídio, São Paulo, violência sexual) que só se
   encontravam com os eixos na última seção.

   A IDENTIDADE DE CADA EIXO É A MESMA DO /eixos/, DE PROPÓSITO: número grande
   vazado em dourado, nome em Anton, sem cor própria. O documento pede "cor e
   ícone próprios" para cada eixo; este site tem uma cor de acento só, o
   dourado, e a página /eixos/ já resolveu essa identidade sem inventar quatro
   cores. Dar cor nova a cada eixo aqui deixaria as duas páginas falando de
   coisas iguais com caras diferentes. Registrado em DESVIOS.md: se a Wanessa
   quiser as quatro cores, é decisão dela e muda o site inteiro, não só esta
   página.
   =========================================================================== */

.eixo-secao {
  padding-top: var(--s-6);
  margin-bottom: var(--s-5);
  border-top: 2px solid var(--ouro);
}

.eixo-secao__topo {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.eixo-secao__num {
  font-family: var(--f-titulo);
  line-height: 0.9;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ouro);
}

.eixo-secao__topo h2 {
  font-family: var(--f-titulo);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1;
  margin: 0;
}

.eixo-secao__lema {
  margin: var(--s-2) 0 0;
  color: var(--txt-2);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 56ch;
  font-weight: 600;
}

/* O primeiro bloco de dado dentro de um eixo não repete a divisória: o topo
   dourado do eixo já separou. Sem isto ficam duas linhas coladas. */
.eixo-secao > .bloco-dado:first-of-type {
  border-top: 0;
  padding-top: var(--s-4);
}

/* ATALHOS PARA OS QUATRO EIXOS, logo depois dos cuidados de leitura. A página
   ficou longa: sem eles, chegar ao Incluir é rolar por tudo. */
.eixo-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.eixo-atalhos a {
  display: block;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--txt);
}

.eixo-atalhos a:hover,
.eixo-atalhos a:focus-visible { border-color: var(--ouro); background: var(--acento-bg); }

/* A ETIQUETA DE RECORTE GEOGRÁFICO. O documento aponta que hoje se confunde o
   que é dado do Brasil e o que é dado de São Paulo, e manda rotular os dois
   com clareza. Fica no cabeçalho de cada bloco, ao lado do olho. */
.recorte {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-txt);
  background: var(--acento-bg);
  border: 1px solid var(--ouro);
  border-radius: var(--raio);
  padding: 0.2rem 0.5rem;
  margin-left: var(--s-2);
  vertical-align: 0.15em;
}