/* ===========================================================================
   guipaoficial.com  ·  editorial.css
   ---------------------------------------------------------------------------
   Camada EDITORIAL. Carregada sempre DEPOIS de styles.css, e só nas páginas
   de leitura longa: /papo-reto/, os posts, /quem-sou e /materiais.

   Este arquivo NÃO redefine nenhum token, nenhuma cor e nenhuma fonte. Toda
   cor daqui sai dos papéis já declarados no bloco 01 do styles.css. Se faltar
   um tom, o problema é de hierarquia tipográfica, não de paleta.

   Por que arquivo separado, e não mais um bloco no styles.css: três pessoas
   trabalham no site ao mesmo tempo e styles.css é de outra pessoa. Componente
   novo entra aqui; componente já existente (.foto, .citacao, .aviso, .btn,
   .carimbo, .num, .meta, .filtro__btn, .marca) é reaproveitado como está.

   Índice:
     E01  Cabeçalho de página interna
     E02  Índice do blog: filtro por categoria e lista de três
     E03  As três categorias explicadas
     E04  Post: cabeçalho, corpo de 19px e coluna de 68 caracteres
     E05  Passos numerados (post de utilidade)
     E06  Bloco "a proposta que responde a isso"
     E07  Navegação entre posts
     E08  Dobras de "Quem sou"
     E09  Lista de materiais
     E10  Bloco de sala de imprensa

   CONTRASTE DOS PARES NOVOS (WCAG 2.1; AA pede 4,5:1 em texto corrido):
     --acento-txt (var(--acento-txt)) sobre --papel-2 ....  8,86:1  passa
     --acento     (var(--acento)) sobre --papel-2 ....  5,61:1  passa
     --txt-2      (var(--tinta-2)) sobre --papel-2 ....  9,25:1  passa
     --txt        (var(--tinta)) sobre --papel-2 .... 18,52:1  passa
   Nenhum par novo usa --tinta-3, que reprova AA em texto pequeno e continua
   fora de uso em texto, como já registrado no styles.css.
   =========================================================================== */


/* ===========================================================================
   E01  CABEÇALHO DE PÁGINA INTERNA
   ---------------------------------------------------------------------------
   Rótulo em mono, h1 em HTML de verdade e um lede. O filete de baixo é a
   linha de divisória, não o traço de caneta: o traço vermelho continua sendo
   só do sublinhado de uma palavra do título.
   =========================================================================== */

.pag-cab {
  padding-block: var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--borda);
  margin-bottom: var(--s-5);
}
.pag-cab .meta { display: block; margin-bottom: var(--s-2); }
.pag-cab h1 { margin-bottom: var(--s-3); max-width: 22ch; }
.pag-cab .lede { margin: 0; }

/* Rótulo de categoria em mono. Mesmo papel do .card-post__cat da home, mas com
   nome próprio para não ficar preso à classe de um cartão. */
.cat {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento-txt);
  overflow-wrap: anywhere;
}


/* ===========================================================================
   E02  ÍNDICE DO BLOG
   ---------------------------------------------------------------------------
   Na estreia existem TRÊS posts, não trinta. Por isso a lista não é grade de
   cartões: grade de três colunas com três itens deixa buraco visível, e grade
   de nove buracos é o que faz um blog novo parecer abandonado.

   O desenho é de SUMÁRIO de documento: uma linha por texto, data em mono na
   coluna da esquerda, título grande na direita. Três linhas assim leem como
   índice completo, não como prateleira vazia. O mesmo componente aguenta
   trinta linhas sem mudar nada.

   FILTRO SEM JAVASCRIPT: os botões nascem com o atributo hidden no HTML e o
   script da própria página tira o hidden. Sem JavaScript o filtro não aparece
   e os três textos ficam todos visíveis. É por isso que existe a regra
   .filtro-cat[hidden] abaixo: sem ela, o display:flex da classe venceria o
   hidden do navegador e o filtro apareceria sem funcionar.
   =========================================================================== */

.filtro-cat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
}
.filtro-cat[hidden] { display: none; }
.pr-status[hidden] { display: none; }
.pr-status { display: block; margin-bottom: var(--s-4); }

.pr-lista {
  border-top: 2px solid var(--tinta);
  margin-bottom: var(--s-5);
}

.pr-item {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) 0 var(--s-4);
  border-bottom: 1px solid var(--borda);
  border-left: 3px solid transparent;
  text-decoration: none;
  color: var(--txt);
}
.pr-item:hover {
  border-left-color: var(--acento);
  background: var(--papel-2);
  padding-left: var(--s-3);
}
.pr-item:hover .pr-item__tit {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--acento);
}

/* Coluna de metadado à esquerda no desktop. minmax(0, 1fr) na segunda coluna
   porque sem o mínimo zero um título longo empurra a linha fora da tela quando
   a pessoa aumenta a letra do navegador. */
@media (min-width: 48rem) {
  .pr-item {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
  }
}

.pr-item__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: baseline; }
@media (min-width: 48rem) { .pr-item__meta { display: block; } }
.pr-item__data {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--txt-2);
}
@media (min-width: 48rem) { .pr-item__data { display: block; margin-bottom: var(--s-1); } }

.pr-item__tit {
  font-family: var(--f-corpo);
  font-weight: 800;
  font-size: clamp(1.375rem, 3.6vw, 1.875rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2);
  overflow-wrap: anywhere;
  hyphens: manual;   /* nada de palavra partida com hífen no título da matéria */
}
.pr-item__resumo {
  color: var(--txt-2);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 58ch;
  margin: 0 0 var(--s-2);
}
.pr-item__pe {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-2);
  margin: 0;
}

/* Estado de filtro sem resultado. Hoje é impossível chegar aqui, porque cada
   categoria tem um texto, mas quem publicar a quarta categoria vai precisar
   dele e é melhor já existir do que aparecer uma lista muda. */
.pr-nada {
  padding: var(--s-4) 0;
  color: var(--txt-2);
}


/* ===========================================================================
   E03  AS TRÊS CATEGORIAS EXPLICADAS
   ---------------------------------------------------------------------------
   Este bloco é o que faz o índice com três textos parecer intencional: em vez
   de espaço vazio esperando post, o resto da página explica o que cada formato
   é e com que frequência sai. Preenchido com tipografia, não com foto
   esticada nem cartão fantasma.
   =========================================================================== */

.formatos { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .formatos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } }
.formatos__item { border-top: 1px solid var(--tinta); padding-top: var(--s-2); }
.formatos__item h3 { font-size: 1.125rem; margin: var(--s-1) 0 var(--s-1); }
.formatos__item p { font-size: 0.9375rem; line-height: 1.5; color: var(--txt-2); margin: 0; }


/* ===========================================================================
   E04  POST
   ---------------------------------------------------------------------------
   Coluna única, no máximo 68 caracteres, corpo em 19px em qualquer largura.
   O corpo do site é 18px no celular, mas texto longo pede 19px também lá: são
   400 a 700 palavras de leitura contínua, não um cartão de três linhas.
   line-height 1.65 pelo mesmo motivo.
   =========================================================================== */

.artigo { padding-bottom: var(--s-6); }

.artigo__cab {
  padding-block: var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--borda);
  margin-bottom: var(--s-4);
  max-width: var(--leitura);
}
.artigo__cab .cat { display: block; margin-bottom: var(--s-2); }
.artigo__cab h1 {
  font-size: clamp(2rem, 6.5vw, 3.25rem);
  line-height: 1.06;
  margin-bottom: var(--s-3);
}
.artigo__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-2);
  margin: 0;
}

.artigo__corpo {
  max-width: var(--leitura);
  font-size: 1.1875rem;   /* 19px em qualquer largura */
  line-height: 1.65;
}
.artigo__corpo > p { margin: 0 0 1.15em; }
.artigo__corpo > p:last-child { margin-bottom: 0; }
.artigo__corpo h2 {
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  margin: var(--s-5) 0 var(--s-2);
}
.artigo__corpo h3 { margin: var(--s-4) 0 var(--s-1); font-size: 1.25rem; }
.artigo__corpo ul { margin: 0 0 1.15em; padding: 0; }
.artigo__corpo ul li {
  position: relative;
  padding-left: 1.15em;
  margin-bottom: 0.55em;
}
/* Marcador desenhado com o acento, e não com bullet do navegador: o traço
   curto de caneta é o vocabulário do site. É decoração, então fica em
   ::before e nunca carrega informação. */
.artigo__corpo ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.6em;
  height: 2px;
  background: var(--acento);
}
.artigo__corpo .citacao { max-width: 34ch; }

/* Primeiro parágrafo do post, um pouco maior. Não é lede de home: é abertura
   de texto, então continua em Manrope e não vira título. */
/* O seletor é mais específico do que precisaria porque .artigo__corpo também
   recebe a classe .prosa, e ".prosa > p" já pinta o parágrafo em --txt. Sem
   subir a especificidade aqui, a abertura sairia na cor errada. */
.artigo__corpo > p.artigo__abre {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--txt-2);
}

/* Faixa de socorro dentro do post. A caixa e as cores vêm do styles.css; aqui
   só a acomodação na coluna de leitura, porque a faixa nasceu para largura de
   seção e sem isto ela sairia mais larga que o texto que vem embaixo, o que
   faria a coluna parecer torta. Os dois parágrafos zeram margem porque quem
   controla o espaçamento aqui é o gap do flex da própria faixa. */
.artigo > .socorro {
  max-width: var(--leitura);
  margin-bottom: var(--s-4);
}
.artigo > .socorro p { margin: 0; }
.artigo > .socorro .socorro__oq { font-size: 1rem; }


/* ===========================================================================
   E05  PASSOS NUMERADOS
   ---------------------------------------------------------------------------
   Só no post de "O que fazer hoje". A numeração aqui é do procedimento, na
   mesma lógica de "o número é do documento": mono, vermelha, tabular.
   É <ol> de verdade, para leitor de tela anunciar "item 2 de 5".
   =========================================================================== */

.passos { margin: var(--s-4) 0; padding: 0; list-style: none; counter-reset: passo; }
.passos > li {
  counter-increment: passo;
  border-top: 1px solid var(--borda);
  padding-top: var(--s-2);
  margin-bottom: var(--s-4);
}
.passos > li::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  font-family: var(--f-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--acento);
  margin-bottom: var(--s-1);
}
.passos h3 { margin: 0 0 var(--s-1); font-size: 1.1875rem; }
.passos p { margin: 0 0 0.7em; }
.passos p:last-child { margin-bottom: 0; }


/* ===========================================================================
   E06  BLOCO "A PROPOSTA QUE RESPONDE A ISSO"
   ---------------------------------------------------------------------------
   Este bloco é o que faz o blog trabalhar a favor da tese do site em vez de
   virar mural solto: todo texto termina apontando para a proposta escrita que
   responde àquilo. Filete vermelho porque é bloco marcado, como o aviso e a
   citação.
   =========================================================================== */

.bloco-prop {
  border-left: 4px solid var(--acento);
  background: var(--papel-2);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  margin-top: var(--s-6);
  max-width: var(--leitura);
}
.bloco-prop > .meta { display: block; margin-bottom: var(--s-3); }
.bloco-prop__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.bloco-prop h2 { font-size: clamp(1.375rem, 3.4vw, 1.75rem); margin-bottom: var(--s-2); }
.bloco-prop p { font-size: 1rem; line-height: 1.55; color: var(--txt-2); }
.bloco-prop__nome {
  display: block;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-2);
  border-top: 1px solid var(--borda);
  padding-top: var(--s-1);
  margin-top: var(--s-3);
}


/* ===========================================================================
   E07  NAVEGAÇÃO ENTRE POSTS
   =========================================================================== */

.nav-post {
  border-top: 1px solid var(--borda);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  display: grid;
  gap: var(--s-3);
  max-width: var(--leitura);
}
@media (min-width: 48rem) { .nav-post { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
.nav-post a { text-decoration: none; color: var(--txt); display: block; }
.nav-post a:hover strong { text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--acento); }
.nav-post .meta { display: block; margin-bottom: var(--s-1); }
.nav-post strong { font-family: var(--f-corpo);
  font-weight: 800; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.02em; }


/* ===========================================================================
   E08  DOBRAS DE "QUEM SOU"
   ---------------------------------------------------------------------------
   Uma foto por dobra, alternando de lado no desktop. No celular a foto entra
   sempre DEPOIS do texto da dobra: quem chega pelo link da bio já conhece o
   rosto, e o que ela ainda não leu é o texto.
   =========================================================================== */

.dobra {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--borda);
}
.dobra:first-of-type { border-top: 0; }
@media (min-width: 60rem) {
  .dobra {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr);
    gap: var(--s-6);
    align-items: start;
    padding-block: var(--s-6);
  }
  /* Alterna o lado da foto. Ordem no HTML continua texto e depois foto, que é
     a ordem de leitura correta em qualquer largura e para leitor de tela. */
  .dobra--espelho > :first-child { order: 2; }
}
.dobra__texto { max-width: var(--leitura); }
.dobra__texto > .meta { display: block; margin-bottom: var(--s-2); }
.dobra__texto h2 { margin-bottom: var(--s-3); }
.dobra__texto p { color: var(--txt); }


/* ===========================================================================
   E09  LISTA DE MATERIAIS
   ---------------------------------------------------------------------------
   Uma linha por arquivo, com página e peso em mono ANTES do clique. Peso
   informado porque muita gente abre isso no 4G e tem direito de saber o que
   vai baixar.

   Item sem arquivo não é link: é <span class="btn btn--off">, com o motivo
   escrito em português. Nunca botão ativo que não baixa nada.
   =========================================================================== */

.mat-lista { border-top: 2px solid var(--tinta); }
.mat-item {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--borda);
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 48rem) {
  .mat-item { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: start; }
}
.mat-item h2 { font-size: clamp(1.375rem, 3.4vw, 1.75rem); margin-bottom: var(--s-2); }
.mat-item p { color: var(--txt-2); font-size: 1rem; line-height: 1.55; max-width: 56ch; }
.mat-item__ficha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-bottom: var(--s-2);
}
.mat-item__ficha span {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-2);
  overflow-wrap: anywhere;
}
/* Item em preparação: a linha inteira desbota um pouco, para o olho separar o
   que dá para pegar hoje do que ainda não existe, sem depender só de ler. */
.mat-item--off h2 { color: var(--txt-2); }


/* ===========================================================================
   E10  BLOCO DE SALA DE IMPRENSA
   ---------------------------------------------------------------------------
   Fecha "Quem sou" e "Materiais". Fundo de papel elevado, sem virar o bloco
   escuro: o escuro é de UMA seção só em todo o site, o CTA final da home.
   =========================================================================== */

.imprensa-box {
  background: var(--papel-2);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--acento);
  border-radius: 0 0 var(--raio) var(--raio);
  padding: var(--s-4);
  margin-top: var(--s-5);
  max-width: 46rem;
}
.imprensa-box .meta { display: block; margin-bottom: var(--s-2); }
.imprensa-box h2 { font-size: clamp(1.375rem, 3.4vw, 1.75rem); margin-bottom: var(--s-2); }
.imprensa-box p { color: var(--txt-2); font-size: 1rem; line-height: 1.55; max-width: 54ch; }
.imprensa-box .btn { margin-top: var(--s-3); }


/* ===========================================================================
   FORMULÁRIO DE RELATO  ·  /reportar.html
   ---------------------------------------------------------------------------
   Entrou em 29/08/2026. Antes disso a página só oferecia um endereço de
   e-mail, e a decisão de não ter formulário estava escrita no topo do HTML.
   Ela foi revista: muita gente não tem programa de e-mail configurado no
   celular, e clicar num mailto que abre nada é um beco sem saída silencioso.
   O e-mail continua publicado do lado, para quem prefere.

   NÃO EXISTE COR NOVA AQUI. Campo é papel-2 com borda de linha, foco em
   dourado claro, que é o mesmo anel de foco do resto do site. Um formulário
   de denúncia não é lugar de inventar identidade visual.

   O ANEL DE FOCO É GROSSO DE PROPÓSITO (3px, com offset): esta página vai ser
   preenchida por gente nervosa, no celular, às vezes com o teclado. Saber
   onde se está tem que ser óbvio.
   =========================================================================== */

.relato {
  background: var(--sup-alta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--s-4);
  margin: var(--s-5) 0;
}

.relato__tit {
  font-family: var(--f-corpo);
  font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.2;
  margin: 0 0 var(--s-2);
  color: var(--txt);
}

.relato__intro {
  color: var(--txt-2);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 0 var(--s-4);
}

.relato__campo { margin-bottom: var(--s-3); }

.relato__campo label {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: var(--s-1);
  color: var(--txt);
}

/* A dica fica LIGADA ao campo por aria-describedby no HTML, não só visualmente
   por cima dele: quem usa leitor de tela precisa ouvir a dica junto do campo,
   e não como um parágrafo solto que ficou para trás. */
.relato__dica {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--txt-2);
  margin: calc(var(--s-1) * -1) 0 var(--s-1);
  line-height: 1.45;
}

.relato__campo input,
.relato__campo select,
.relato__campo textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--papel);
  color: var(--txt);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.75rem 0.875rem;
  font-family: var(--f-corpo);
  /* 1rem cravado: abaixo disso o Safari do iPhone dá zoom sozinho ao tocar no
     campo, e a pessoa perde a página de vista no meio da denúncia. */
  font-size: 1rem;
  line-height: 1.5;
}

.relato__campo textarea { min-height: 9rem; resize: vertical; }

.relato__campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--txt-2) 50%),
                    linear-gradient(135deg, var(--txt-2) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - 0.9rem) 1.35rem;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.relato__campo input:focus-visible,
.relato__campo select:focus-visible,
.relato__campo textarea:focus-visible,
.relato .btn:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-color: var(--foco);
}

.relato__opcional {
  font-weight: 400;
  color: var(--txt-2);
  font-size: 0.875rem;
}

/* ARMADILHA DE ROBÔ. Não pode ser display:none nem hidden: robô bom lê o CSS e
   pula campo escondido desse jeito. Isto tira o campo da tela sem tirar do
   documento, e o aria-hidden mais o tabindex garantem que leitor de tela e
   teclado nunca cheguem nele. Quem só vê a página não sabe que ele existe. */
.relato__armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.relato__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.relato__nota {
  font-size: 0.875rem;
  color: var(--txt-2);
  line-height: 1.5;
  max-width: 46ch;
  margin: var(--s-3) 0 0;
}

/* Resposta do envio. role="status" no HTML faz o leitor de tela anunciar sem
   roubar o foco de quem está digitando. */
.relato__resposta {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--papel);
  font-size: 1rem;
  line-height: 1.55;
}
.relato__resposta:empty { display: none; }
.relato__resposta--ok { border-color: var(--ouro); background: var(--acento-bg); color: var(--txt); }
.relato__resposta--erro { border-color: var(--ouro); background: var(--papel-3); color: var(--txt); }

.relato[aria-busy="true"] .btn { opacity: 0.6; pointer-events: none; }

/* Link "reportar isso" no fim de cada seção explicativa: leva ao formulário
   já com o assunto escolhido. Sem JavaScript ele ainda rola até lá. */
.doc-atalho {
  display: inline-block;
  margin-top: var(--s-2);
  font-weight: 700;
  font-size: 0.9375rem;
}

@media (max-width: 30rem) {
  .relato { padding: var(--s-3); }
  .relato__acoes { gap: var(--s-2); }
  .relato__acoes .btn { width: 100%; text-align: center; }
}


/* ===========================================================================
   E13  AGENDA · MURAL DO CONTEÚDO DAS REDES
   ---------------------------------------------------------------------------
   Linha do tempo única, do mais novo para o mais antigo. Cada item é um post
   que já foi ao ar (reels, vídeo, card, live) ou uma data confirmada do que
   ainda vai ao ar.

   A CAPA É NOSSA, o vídeo mora na rede. Não existe player de Instagram nem de
   TikTok embutido aqui: player de terceiro carrega script de rastreio, derruba
   a velocidade e não entrega nada para busca, porque o texto fica dentro de um
   iframe que o buscador não credita a esta página. O que ranqueia é o que está
   escrito nesta página em HTML: título, resumo e a legenda da imagem. Ver o
   comentário de SEO no topo de /agenda.html antes de trocar isso.

   Proporção da capa: 4/5, que é o retrato do feed. Reels 9/16 e card quadrado
   entram na mesma caixa com object-fit: cover, então enquadre o assunto no
   centro ou a cabeça sai cortada.

   Item de vídeo ganha o losango de play sobre a capa. É desenho em CSS, não
   imagem: um arquivo a menos para carregar e não some se o CSS falhar sozinho.
   =========================================================================== */

.mural { display: grid; gap: var(--s-3); }
@media (min-width: 34rem) { .mural { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .mural { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mural-item {
  background: var(--sup-alta);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--acento);
  border-radius: 0 0 var(--raio) var(--raio);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: var(--txt);
  transition: border-color .15s ease;
}
a.mural-item:hover, a.mural-item:focus-visible { border-color: var(--acento); }
a.mural-item:hover h2 { text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--acento); }

.mural-item__capa { position: relative; background: var(--sup-faixa); }
.mural-item__capa img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 5; object-fit: cover;
}
/* Play do vídeo. Fica no canto de baixo para não tapar rosto no meio da capa. */
.mural-item__play {
  position: absolute; left: var(--s-2); bottom: var(--s-2);
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--acento);
  display: grid; place-items: center;
}
.mural-item__play::after {
  content: ""; margin-left: 0.2rem;
  border-style: solid; border-width: 0.45rem 0 0.45rem 0.75rem;
  border-color: transparent transparent transparent var(--papel);
}

/* VÍDEO NO PRÓPRIO SITE · o formato que mais rende em busca, porque o tempo de
   assistir conta para esta página e não para a rede social. preload="none" é
   obrigatório: sem ele o navegador começa a baixar todos os vídeos da página de
   uma vez e quem está no 4G paga por vídeo que talvez nem toque. A capa fica no
   atributo poster do <video>, então não existe imagem duplicada. */
.mural-item__video { display: block; width: 100%; aspect-ratio: 4 / 5; background: #000; object-fit: cover; }

/* Transcrição. Fechada por padrão para não empurrar o cartão seguinte, mas o
   texto está no HTML mesmo fechada, que é o que o buscador lê. Nunca troque por
   carregamento sob clique: aí o texto some da página para o Google. */
.mural-transcricao { border-top: 1px solid var(--borda); padding-top: var(--s-2); }
.mural-transcricao > summary {
  cursor: pointer;
  font-family: var(--f-mono); font-weight: 500; font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt-2);
}
.mural-transcricao > summary:hover { color: var(--acento); }
.mural-transcricao p { margin-top: var(--s-2); font-size: 0.9375rem; }

.mural-item__corpo { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); flex: 1 1 auto; }
.mural-item h2 { font-size: 1.125rem; line-height: 1.25; margin: 0; }
.mural-item p { font-size: 0.9375rem; line-height: 1.5; color: var(--txt-2); margin: 0; }

/* Rede, formato e data. A data é <time> com datetime legível por máquina. */
.mural-item__ficha {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2);
  font-family: var(--f-mono); font-weight: 500; font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.mural-item__ficha .rede { color: var(--acento-txt); }
.mural-item__ficha time { color: var(--txt-2); }

.mural-item__pe a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--acento); }
.mural-item__pe a:hover, .mural-item__pe a:focus-visible { color: var(--acento); }
.mural-item__pe {
  margin-top: auto; padding-top: var(--s-2);
  border-top: 1px solid var(--borda);
  font-family: var(--f-mono); font-weight: 400; font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt-2);
}

/* MARCADO PARA DEPOIS · o que ainda vai ao ar não tem capa nem link: é só a
   data e o que vai acontecer, numa faixa antes do mural. */
.ag-proximo {
  border: 1px solid var(--acento);
  background: var(--sup-alta);
  padding: var(--s-3);
  display: grid; gap: var(--s-2);
  margin-bottom: var(--s-5);
}
@media (min-width: 40rem) { .ag-proximo { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center; } }
.ag-proximo__data {
  font-family: var(--f-alt); font-weight: 800; color: var(--acento);
  font-size: 1.75rem; line-height: 1; margin: 0;
}
.ag-proximo h2 { font-size: 1.25rem; margin: 0 0 0.35rem; }
.ag-proximo p { color: var(--txt-2); font-size: 1rem; margin: 0; }

/* Estado vazio. Some quando entrar o primeiro item do mural. */
.ag-vazio {
  border: 1px dashed var(--borda);
  background: var(--sup-alta);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
}
.ag-vazio p { color: var(--txt-2); font-size: 1rem; line-height: 1.6; max-width: 56ch; margin: 0; }
.ag-vazio p + p { margin-top: var(--s-2); }


/* ===========================================================================
   E14  CADASTRO DE APOIO  ·  /participar.html
   ---------------------------------------------------------------------------
   Entrou em 05/09/2026. NÃO EXISTE ESTILO NOVO DE CAMPO AQUI: a página reusa
   inteiro o bloco .relato do formulário de reportar, que já está no ar, já foi
   medido em contraste e já resolve foco, tamanho de fonte no iPhone e
   armadilha de robô. O que este bloco acrescenta é só o que aquele formulário
   não tinha: pares de campo lado a lado e a caixa de aceite.

   POR QUE O ACEITE TEM MOLDURA PRÓPRIA: a LGPD pede consentimento DESTACADO
   quando o dado revela opinião política. "Destacado" não é figura de
   linguagem: se a caixa parecer só mais uma linha do formulário, o aceite fica
   frágil. A moldura dourada é o que faz a pessoa parar e ler.
   =========================================================================== */

.cad-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

/* Estado é a UF, duas letras. Um campo de largura inteira ao lado de "Cidade"
   convida a escrever "São Paulo" no lugar de "SP". */
.cad-linha__curto { max-width: 7rem; }

/* Alinha o par pelo topo do campo mesmo quando um dos dois tem dica e o outro
   não: sem isto, o campo sem dica sobe e fica desencontrado do vizinho. */
.cad-linha .relato__campo { display: flex; flex-direction: column; margin-bottom: var(--s-3); }
.cad-linha .relato__campo input { margin-top: auto; }

.cad-aceite {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  align-items: start;
  margin: var(--s-4) 0 0;
  padding: var(--s-3);
  border: 1px solid var(--ouro);
  border-radius: var(--raio);
  background: var(--acento-bg);
}

/* 1.25rem é alvo de toque pequeno, então a etiqueta inteira também marca a
   caixa (o for do label faz isso sozinho). O tamanho maior que o padrão do
   navegador existe porque no celular a caixa padrão some ao lado do texto. */
.cad-aceite input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--ouro);
  flex: none;
}

.cad-aceite label {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--txt);
  margin: 0;
  cursor: pointer;
}

.cad-aceite input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* AVISO DE PRIVACIDADE · o texto legal que fica entre o aceite e o botão.
   Cinza e menor de propósito: é a letra da lei, tem de estar na tela inteira
   e legível, mas não pode competir com o aceite, que é a decisão que a pessoa
   precisa tomar ali. Sem caixa e sem borda para não virar um segundo aceite. */
.cad-aviso {
  margin: var(--s-3) 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--txt-2);
}

.cad-aviso p { margin: 0 0 var(--s-2); }
.cad-aviso p:last-child { margin-bottom: 0; }

.cad-aviso__tit {
  letter-spacing: 0.04em;
  color: var(--txt);
}

@media (max-width: 34rem) {
  .cad-linha { grid-template-columns: 1fr; gap: 0; }
  .cad-linha__curto { max-width: none; }
}

/* Segunda linha do cabeçalho da página de participar. Desde 06/09/2026 são os
   eixos de ação da campanha, vindos do formulário de referência. Menor que a
   lede de propósito, porque é etiqueta, não é o argumento. */
.lede--miudo {
  font-size: 1rem;
  color: var(--txt-2);
  margin-top: var(--s-3);
}

/* ---------------------------------------------------------------------------
   POPUP DE CADASTRO ENVIADO · /participar
   ---------------------------------------------------------------------------
   Abre por cima da página quando o cadastro foi aceito. É o <dialog> nativo do
   navegador: ele prende o foco, fecha no Esc e pinta o fundo (::backdrop) sem
   código extra. A caixa segue o cartão do formulário (mesmo fundo, mesma
   borda, mesmo raio) e o título leva o filete dourado embaixo, o mesmo da
   sanfona acima do formulário. Sem vidro, sem sombra difusa, como no resto.

   ERRO NÃO ABRE POPUP. Erro fica ao lado do formulário, onde a pessoa corrige.
   --------------------------------------------------------------------------- */
.cad-popup {
  /* zera o que o navegador põe no dialog por padrão */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--txt);
  width: min(100% - 2rem, 30rem);
  max-width: none;
  margin: auto;
}
.cad-popup::backdrop { background: rgba(8, 8, 10, 0.82); }

.cad-popup__caixa {
  background: var(--sup-alta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--s-4);
  outline: none;
}
.cad-popup__caixa:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.cad-popup__etiqueta { margin: 0 0 var(--s-1); }

/* O seletor leva o pai de propósito: o popup mora dentro de .doc-legal, cujo
   h2 é Montserrat em caixa mista. Aqui o título volta a ser a manchete do
   site, Anton em caixa alta, porque é o momento de "conseguiu". */
.cad-popup .cad-popup__tit {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  line-height: 1.14;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--ouro);
}

.cad-popup__texto {
  margin: 0 0 var(--s-3);
  line-height: 1.55;
  color: var(--txt);
}

/* O e-mail digitado ganha caixa própria: é a chance de a pessoa ver que errou
   uma letra antes de ficar esperando um e-mail que nunca vai chegar. */
.cad-popup__email {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.cad-popup__rotulo { font-size: 0.8125rem; color: var(--txt-2); }
.cad-popup__email b { font-weight: 700; color: var(--txt); overflow-wrap: anywhere; }

.cad-popup__nota {
  margin: 0 0 var(--s-4);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--txt-2);
}

.cad-popup__acoes { margin: 0; }
.cad-popup__acoes .btn { width: 100%; justify-content: center; }
.cad-popup .btn:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

@media (max-width: 30rem) {
  .cad-popup__caixa { padding: var(--s-3); }
}

/* Entrada curta: a caixa sobe um pouco e aparece. Desligada para quem pediu
   menos movimento no sistema. */
@media (prefers-reduced-motion: no-preference) {
  .cad-popup[open] .cad-popup__caixa { animation: cad-popup-entra 0.2s ease-out; }
  @keyframes cad-popup-entra {
    from { opacity: 0; transform: translateY(0.75rem); }
    to   { opacity: 1; transform: none; }
  }
}

/* ===========================================================================
   FORMULÁRIO DE MAPEAMENTO · perguntas fechadas · /mapear
   ---------------------------------------------------------------------------
   ENTROU EM 07/09/2026 e foi REFEITO no mesmo dia, quando a página deixou de
   ser um canal de denúncia e virou uma contribuição para um levantamento. O
   que existia aqui antes eram abas (escrever / acompanhar pelo protocolo) e a
   conversa entre a denunciante e a equipe. As duas coisas saíram junto com o
   protocolo. Ver DESVIOS.md.

   REAPROVEITA TUDO DO BLOCO .relato ACIMA: campo, foco, botão, aviso e aceite
   são os mesmos. O que existe aqui é só o que aquele bloco não tinha: as
   escolhas em caixinha, que agora são o miolo do formulário.

   NÃO EXISTE COR NOVA AQUI. Um formulário sobre violência não é lugar de
   inventar identidade visual: a opção marcada se distingue pela borda dourada
   e por um fundo de apoio, os mesmos que o resto do site já usa.
   =========================================================================== */

/* A GRADE DAS OPÇÕES. auto-fit com mínimo de 13rem: no computador entram três
   ou quatro por linha, no celular vira uma coluna sozinha, sem media query. */
.mapa-ops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  border: 0;
}

/* Uma coluna só, para as listas de duas opções que precisam de peso (o momento,
   e o "registrou ou não"). Lado a lado elas ficariam pequenas demais para a
   pergunta mais importante da página. */
.mapa-ops--largo { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

/* A ETIQUETA INTEIRA É O ALVO DE TOQUE, não só a bolinha. No celular, acertar
   um radio de 1.25rem com o polegar é o tipo de detalhe que faz a pessoa
   desistir no meio. */
.mapa-op {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  align-items: start;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.75rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--txt);
  cursor: pointer;
  margin: 0;
}

.mapa-op input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.05rem 0 0;
  accent-color: var(--ouro);
  flex: none;
}

/* :has() é a razão de a marcação acender sem uma linha de JavaScript. Onde ele
   não existir, a opção continua funcionando: só não muda de cor. Perder o
   destaque é aceitável; perder a escolha não seria. */
.mapa-op:has(input:checked) {
  border-color: var(--ouro);
  background: var(--acento-bg);
}

.mapa-op:has(input:focus-visible) {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* O <legend> de cada grupo. Mesmo peso e tamanho do label dos outros campos:
   para quem olha a página, "pergunta" é uma coisa só, não importa se a resposta
   é um campo de texto ou uma lista de caixinhas. */
.mapa-grupo { margin: 0 0 var(--s-4); border: 0; padding: 0; }

.mapa-grupo__tit {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: var(--s-1);
  padding: 0;
  color: var(--txt);
}

.mapa-grupo__dica {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--txt-2);
  margin: 0 0 var(--s-2);
  line-height: 1.45;
}

/* O "por quê" só aparece para quem respondeu que não registrou. Nasce escondido
   no HTML: quem está sem JavaScript vê a pergunta sempre, que é melhor do que
   não ver nunca. */
.mapa-condicional { margin: var(--s-3) 0 0; }

/* O BLOCO DE IDENTIFICAÇÃO É VISUALMENTE SEPARADO DO RESTO, e isso não é
   enfeite: o documento da campanha exige que ele seja claramente facultativo e
   com propósito próprio. Uma linha de topo e um respiro maior fazem a pessoa
   perceber que ali começou outra coisa, que ela pode simplesmente não
   preencher. */
.mapa-bloco2 {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--borda);
}

/* ---------------------------------------------------------------------------
   E17  AJUSTES DE CELULAR DO /mapear  ·  07/09/2026
   ---------------------------------------------------------------------------
   O formulário subiu com 41 opções, cada uma num cartão de largura inteira: no
   celular davam 10 telas de rolagem só de caixinha. Quem chega aqui não está
   passeando pelo site, e rolagem demais é desistência no meio.

   O que muda: as listas de resposta CURTA passam a duas colunas abaixo de
   34rem, as caixinhas ficam mais justas, e o aviso de emergência deixa de ser
   texto cinza de 13px para virar caixa com os dois telefones em botão de
   ligar. Nenhuma pergunta saiu, nenhuma palavra do texto mudou de sentido.

   AS DUAS COLUNAS SÓ VALEM ONDE O RÓTULO É CURTO, e por isso a classe é
   marcada à mão no HTML em vez de sair do auto-fit: "Ex-companheiro ou
   ex-marido" em meia tela vira três linhas e fica pior do que estava.
   ------------------------------------------------------------------------- */

/* O AVISO DE EMERGÊNCIA PRECISA PARECER UM AVISO. Antes ele herdava .cad-aviso,
   que é cinza, pequeno e sem moldura de propósito (é a letra da lei do
   /participar). Aqui a função é outra: é a informação que pode importar mais
   do que o formulário inteiro. */
.cad-aviso--caixa,
.cad-aviso--socorro {
  margin: var(--s-4) 0 0;
  padding: var(--s-3);
  border: 1px solid var(--ouro);
  border-radius: var(--raio);
  background: var(--acento-bg);
  font-size: 0.9375rem;
  color: var(--txt);
}

.cad-aviso--caixa .cad-aviso__tit,
.cad-aviso--socorro .cad-aviso__tit {
  color: var(--acento);
  font-size: 0.8125rem;
  margin-bottom: var(--s-2);
}

/* Os telefones viram alvo de toque de verdade. No celular o número é um link
   tel:, e um link de 13px no meio de um parágrafo é o pior alvo possível para
   quem está com pressa ou com a mão tremendo. */
.socorro-botoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
}

.socorro-botao {
  display: block;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ouro);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--txt);
  text-decoration: none;
  line-height: 1.25;
}

/* O link do site é sublinhado por padrão, e aqui o alvo é o cartão inteiro:
   sublinhar o número e a legenda faria o botão parecer três links soltos. */
.prosa a.socorro-botao,
.prosa a.socorro-botao span,
.socorro-botao,
.socorro-botao span { text-decoration: none; }

/* O número herda a cor de link do .prosa a, que é o ouro de texto; aqui ele
   precisa ser o ouro cheio da marca, porque é o elemento que a pessoa procura
   com o olho em cinco décimos de segundo. */
.prosa a.socorro-botao .socorro-botao__num { color: var(--acento); }
.prosa a.socorro-botao .socorro-botao__que { color: var(--txt-2); }

.socorro-botao__num {
  display: block;
  font-family: var(--f-titulo);
  font-size: 1.5rem;
  color: var(--acento);
  letter-spacing: 0.02em;
}

.socorro-botao__que {
  display: block;
  font-size: 0.8125rem;
  color: var(--txt-2);
  margin-top: 0.15rem;
}

.socorro-botao:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* ONDE A PESSOA ESTÁ DENTRO DO FORMULÁRIO. Três blocos longos sem nenhuma
   marca de progresso dão a sensação de que nunca acaba. É só uma etiqueta:
   não existe passo a passo, a página continua sendo uma só. */
.relato__passo {
  display: block;
  font-family: var(--f-corpo);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 var(--s-1);
}

.mapa-bloco2 .relato__passo { color: var(--txt-2); }

@media (max-width: 34rem) {
  /* Duas colunas para rótulo curto: corta pela metade a rolagem das listas
     grandes (tipo de violência, faixa de idade, cor ou raça). */
  .mapa-ops--curto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }

  /* Caixinha mais justa. O alvo de toque continua acima de 44px de altura,
     que é o mínimo para o polegar. */
  .mapa-op { padding: 0.625rem 0.7rem; gap: 0.5rem; }
  .mapa-ops { gap: 0.5rem; }
  .mapa-grupo { margin-bottom: var(--s-3); }

  /* O bloco de texto legal a 13px é pequeno demais na tela do celular. */
  .cad-aviso { font-size: 0.875rem; }

  .socorro-botao__num { font-size: 1.375rem; }
}

/* A PERGUNTA QUE FALTOU RESPONDER. Só aparece depois de tentar enviar, e some
   assim que a pessoa responde. Filete dourado à esquerda em vez de vermelho:
   nada aqui deu errado, só falta uma resposta, e um formulário sobre violência
   não precisa de tom de bronca. */
.mapa-grupo--falta {
  border-left: 3px solid var(--ouro);
  padding-left: var(--s-3);
  margin-left: calc(var(--s-3) * -1);
}

.mapa-falta-lista {
  margin: var(--s-2) 0 0;
  padding-left: 1.15rem;
}

.mapa-falta-lista li { margin: 0 0 0.25rem; }