/* Diário de Notícia ES — folha base
 *
 * O DESENHO, EM UMA FRASE: agência de notícias, não aplicativo.
 *
 * A hierarquia é feita de FILETE, HORÁRIO e TIPOGRAFIA — nunca de caixa. Não
 * há cartão com sombra, canto arredondado nem botão em pílula, e a capa não é
 * uma grade de três colunas iguais. Manchete em sans pesada e apertada,
 * rótulo em versalete espaçado, texto em sans humanista.
 *
 * Todo par de cor daqui foi medido: ver IDENTIDADE-VISUAL.md.
 * Nenhum style= no HTML e nenhuma fonte de CDN — a CSP não permite.
 */

:root {
    /* Marca — as cores vêm da bandeira do Espírito Santo */
    --azul:        #0B3C8D;
    --rosa:        #EE7BA6;
    --rosa-forte:  #B4325F;
    --rosa-filete: #D46D94;

    /* Superfícies e tinta — tema claro.
     * O fundo é papel, levemente quente: o cinza-azulado de painel de
     * aplicativo é metade do ar de site gerado. */
    --fundo:        #FBFAF7;
    --fundo-cartao: #FFFFFF;
    --tinta:        #15161C;
    --tinta-apoio:  #5C6270;
    --linha:        #DAD7CF;
    --linha-forte:  #15161C;

    /* Cor de ação (botão) e a tinta que fica EM CIMA dela.
     * Existem como token por um motivo prático: cada componente tinha uma
     * regra extra ":root[data-tema=escuro] .botao" com a cor escrita à mão, e
     * com o terceiro estado do tema ("auto") cada uma viraria duas. Com token,
     * quem troca é só o bloco de cores abaixo. */
    --acao:                    var(--azul);
    --tinta-sobre-acao:        #FFFFFF;
    --acao-forte:              var(--rosa-forte);
    --tinta-sobre-acao-forte:  #FFFFFF;

    /* Quase nada é arredondado. O que sobra é 2px, que lê como corte de
     * gráfica, não como cartão de aplicativo. */
    --canto: 2px;
    --coluna: 64rem;

    /* Duas sans, não uma sans e uma serifada: a referência é portal
     * brasileiro (g1, ge, O Globo online), e portal não põe serifada na capa.
     * A Libre Franklin é a Franklin Gothic — a sans de manchete de jornal —, e
     * entra só em título, chapéu e rótulo. A Source Sans 3 é humanista e
     * segura o texto corrido sem o ar de interface que a Inter tinha.
     *
     * As duas são hospedadas em assets/fontes/ e declaradas em fontes.css. A
     * pilha atrás delas não é decoração: com font-display swap é ela que
     * desenha enquanto a nossa carrega, e é ela que fica se o arquivo não
     * chegar. Por isso são sans de largura parecida — a troca não pode
     * reflowar a página inteira debaixo de quem já começou a ler. */
    --fonte-titulo: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --fonte-corpo:  "Source Sans 3", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Nunca usar #FFF fixo como fundo de superfície: não muda com o tema e quebra
 * o modo escuro (erro nº 13). Por isso tudo abaixo usa token.
 *
 * SÃO TRÊS ESTADOS, não dois:
 *   data-tema="escuro"  quem clicou no botão e escolheu escuro
 *   data-tema="claro"   quem clicou e escolheu claro
 *   data-tema="auto"    ninguém escolheu — vale a configuração do aparelho
 *
 * O "auto" é o padrão, e é ele que faz o site abrir escuro no celular de quem
 * deixou o aparelho no escuro, sem ter de descobrir botão nenhum.
 *
 * OS DOIS BLOCOS ABAIXO TÊM DE TER AS MESMAS LINHAS. É a única duplicação da
 * folha, e o CSS puro não tem como evitá-la — mas testes/fase5.php compara os
 * dois e reprova se alguém mexer em um e esquecer o outro. */
:root[data-tema="escuro"] {
    --fundo:        #131318;
    --fundo-cartao: #1B1C22;
    --tinta:        #E9E7E2;
    --tinta-apoio:  #8A8F99;
    --linha:        #2E2F37;
    --linha-forte:  #E9E7E2;
    --azul:         #6A88B9;
    --rosa-forte:   #EE7BA6;

    --acao:                    var(--rosa-forte);
    --tinta-sobre-acao:        #131318;
    --acao-forte:              var(--rosa);
    --tinta-sobre-acao-forte:  #131318;
}

@media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] {
        --fundo:        #131318;
        --fundo-cartao: #1B1C22;
        --tinta:        #E9E7E2;
        --tinta-apoio:  #8A8F99;
        --linha:        #2E2F37;
        --linha-forte:  #E9E7E2;
        --azul:         #6A88B9;
        --rosa-forte:   #EE7BA6;

        --acao:                    var(--rosa-forte);
        --tinta-sobre-acao:        #131318;
        --acao-forte:              var(--rosa);
        --tinta-sobre-acao-forte:  #131318;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

.faixa {
    max-width: var(--coluna);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* Link que só aparece ao navegar por teclado */
.pular {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--fundo-cartao);
    color: var(--tinta);
    padding: 0.75rem 1rem;
    z-index: 10;
}

.pular:focus {
    left: 0;
}

/* Anel de foco visível — 3:1 medido contra o fundo claro */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid var(--rosa-filete);
    outline-offset: 2px;
}

/* --- Rótulo: o versalete espaçado que aparece em tudo -------------------- */

.rotulo {
    font-family: var(--fonte-corpo);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tinta-apoio);
}

/* --- Cabeçalho ------------------------------------------------------------
 *
 * Uma linha só: marca à esquerda, dateline e busca à direita. Nada de bloco
 * central com logo grande — isso é capa de revista, e este é um portal que
 * publica o dia inteiro.
 */

.topo {
    background: var(--fundo);
}

.topo__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: 1rem 0.75rem;
}

.marca {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    text-decoration: none;
    color: var(--tinta);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    white-space: nowrap;
}

/* O "ES" no rosa da bandeira, como PALAVRA e não como etiqueta arredondada:
 * a pastilha de canto redondo é o vício visual que se quis tirar daqui. */
.marca__es {
    color: var(--rosa-forte);
}

.topo__direita {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    flex-wrap: wrap;
}

/* A dateline. É o detalhe que mais diz "jornal" por menos código: nenhum
 * painel de aplicativo escreve a data por extenso no cabeçalho. */
.datalinha {
    margin: 0;
    font-size: 0.78rem;
    color: var(--tinta-apoio);
    font-variant-numeric: tabular-nums;
}

/* --- Busca --------------------------------------------------------------- */

.busca {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.busca input {
    font: inherit;
    font-size: 0.85rem;
    color: var(--tinta);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--linha);
    border-radius: 0;
    padding: 0.15rem 0.1rem;
    width: 9rem;
    max-width: 40vw;
}

.busca input:focus-visible {
    outline: 0;
    border-bottom-color: var(--rosa-forte);
    border-bottom-width: 2px;
}

.busca__botao {
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tinta-apoio);
    background: none;
    border: 0;
    padding: 0.15rem 0;
    cursor: pointer;
}

.busca__botao:hover {
    color: var(--rosa-forte);
}

/* --- Editorias ------------------------------------------------------------
 *
 * Filete duplo embaixo — o de verdade, do border-style: double. É a assinatura
 * de página de jornal, e custa uma linha de CSS.
 */

.editorias {
    border-top: 1px solid var(--linha);
    border-bottom: 3px double var(--linha);
}

.editorias__linha {
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    padding-block: 0.55rem;
    scrollbar-width: thin;
}

.editorias a {
    color: var(--tinta);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.editorias a:hover {
    color: var(--rosa-forte);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Destaques ------------------------------------------------------------
 *
 * A chamada principal ao lado de outras três, separadas por filete vertical.
 *
 * Antes havia uma abertura só, ocupando a largura inteira da página. Um bloco
 * gigante sozinho faz duas coisas ruins: empurra o resto da capa para baixo da
 * dobra e transforma tudo que vem depois em sobra. Quatro matérias de peso
 * parecido — a principal um pouco maior — dão a mesma hierarquia sem o buraco.
 *
 * Continua sem cartão: o que separa uma matéria da outra é filete, não caixa.
 */

.destaques {
    display: grid;
    grid-template-columns: 1.85fr 1fr;
    gap: 0 2rem;
    padding-block: 1.75rem;
    border-bottom: 3px double var(--linha);
}

@media (max-width: 54rem) {
    .destaques {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.destaque-principal__foto img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 0.85rem;
}

/* A foto vem antes do texto aqui, e é a única do site em que isso acontece:
 * na chamada principal ela é a âncora visual da página. Nas outras a imagem
 * acompanha o texto, nunca o contrário. */
.destaque-principal__titulo {
    margin: 0 0 0.6rem;
    font-family: var(--fonte-titulo);
    /* 800, não 700: em sans a manchete pesa pelo traço, não pelo corpo. Era
       o desenho da serifada que segurava a hierarquia antes; agora é o peso. */
    font-weight: 800;
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    line-height: 1.08;
    /* Sans grande precisa de mais aperto que serifada grande: o branco entre
       as letras cresce junto com o peso, e sem isto a manchete esparrama. */
    letter-spacing: -0.025em;
}

.destaque-principal__titulo a {
    color: inherit;
    text-decoration: none;
}

.destaque-principal__titulo a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

/* O filete vertical que separa a principal das outras três. No celular ele
 * vira horizontal, porque as colunas viram linhas. */
.destaques__apoio {
    display: grid;
    align-content: start;
    padding-left: 2rem;
    border-left: 1px solid var(--linha);
}

@media (max-width: 54rem) {
    .destaques__apoio {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--linha);
        padding-top: 1.25rem;
    }
}

.destaque {
    display: grid;
    gap: 0.6rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--linha);
}

.destaque:first-child {
    padding-top: 0;
}

.destaque:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.destaque__foto img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.destaque__chapeu {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--rosa-forte);
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.destaque__titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.22;
    letter-spacing: -0.011em;
}

.destaque__titulo a {
    color: inherit;
    text-decoration: none;
}

.destaque__titulo a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.destaque__olho {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--tinta-apoio);
    max-width: 52ch;
}

/* --- Espaços de anúncio ---------------------------------------------------
 *
 * SEM ANÚNCIO CADASTRADO NÃO EXISTE NADA DISTO NA PÁGINA: a parcial nem
 * imprime a etiqueta. Não há moldura tracejada, fundo cinza nem "espaço
 * disponível" — espaço vazio não se reserva (erro nº 16).
 *
 * A imagem é hospedada aqui. Rede de anúncio precisaria de script de terceiro,
 * e a CSP `default-src 'self'` não permite — afrouxá-la para caber o script
 * abriria o site inteiro para quem escreve esse script.
 */

.anuncio {
    margin-block: 1.5rem;
    padding-block: 0.75rem;
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    text-align: center;
}

/* O rótulo é obrigação editorial: o leitor tem de saber o que é notícia e o
 * que é anúncio pago. Pequeno, mas nunca ausente. */
.anuncio__rotulo {
    margin: 0 0 0.5rem;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--tinta-apoio);
}

.anuncio img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

/* Dentro da corrida o anúncio é um <li>, para o <ol> continuar válido. O
 * marcador some: ele não é a quinta notícia da lista. */
.corrida__anuncio {
    list-style: none;
}

.corrida__anuncio .anuncio {
    margin-block: 0;
    border-top: 0;
}

.previa--anuncio {
    max-width: 12rem;
}

/* --- Abertura: a chamada principal ----------------------------------------
 *
 * A FOTO VEM DEPOIS DA MANCHETE, e isso é proposital. Imagem no topo é o
 * reflexo automático de todo gerador de página; jornal põe o texto primeiro,
 * porque quem chega está lendo, não olhando.
 */

.abertura {
    padding-block: 2rem 1.5rem;
    border-bottom: 1px solid var(--linha);
}

.abertura__chapeu {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--rosa-forte);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.abertura__titulo {
    margin: 0 0 0.7rem;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: clamp(1.95rem, 5.2vw, 3.15rem);
    line-height: 1.04;
    /* A maior da página é a que mais precisa de aperto. */
    letter-spacing: -0.03em;
    max-width: 24ch;
}

.abertura__titulo a {
    color: inherit;
    text-decoration: none;
}

.abertura__titulo a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.abertura__olho {
    margin: 0 0 0.75rem;
    font-size: 1.075rem;
    line-height: 1.5;
    color: var(--tinta-apoio);
    max-width: 54ch;
}

.abertura__assinatura {
    margin: 0 0 1.25rem;
    font-size: 0.78rem;
    color: var(--tinta-apoio);
    font-variant-numeric: tabular-nums;
}

.abertura__foto {
    display: block;
    margin: 0;
}

.abertura__foto img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 0;
}

.credito {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: var(--tinta-apoio);
    text-align: right;
}

/* --- A corrida: a lista cronológica ---------------------------------------
 *
 * O miolo da capa. Cada matéria é uma LINHA separada por filete, com horário
 * à esquerda — a hierarquia é o relógio, não o tamanho da caixa.
 */

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

.corrida__item {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.35rem 1.25rem;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--linha);
}

/* No celular o horário sobe para cima do título: 7,5rem de coluna fixa numa
 * tela de 360px não deixaria largura para texto nenhum. */
@media (max-width: 40rem) {
    .corrida__item {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
}

.corrida__marca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding-top: 0.15rem;
}

.corrida__hora {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tinta-apoio);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.corrida__editoria {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--rosa-forte);
    text-decoration: none;
}

.corrida__editoria:hover {
    text-decoration: underline;
}

.corrida__texto {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.3rem;
}

/* Com foto, ela vai à DIREITA e é pequena: a imagem acompanha a linha, não
 * manda nela. Isso é o contrário do cartão, onde a foto ocupa o topo. */
.corrida__texto--com-foto {
    grid-template-columns: 1fr 7rem;
    gap: 0.3rem 1rem;
}

.corrida__titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.25;
    letter-spacing: -0.012em;
}

.corrida__titulo a {
    color: inherit;
    text-decoration: none;
}

.corrida__titulo a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.corrida__olho {
    grid-column: 1;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--tinta-apoio);
    max-width: 62ch;
}

.corrida__foto {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    align-self: start;
}

.corrida__foto img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (max-width: 30rem) {
    .corrida__texto--com-foto {
        grid-template-columns: 1fr 4.5rem;
    }
}

/* --- Faixa de editorias no pé da capa ------------------------------------- */

.secao-titulo {
    margin: 2.25rem 0 0;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--linha-forte);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.por-editoria {
    display: grid;
    gap: 0 2rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.25rem;
}

@media (max-width: 52rem) {
    .por-editoria { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 34rem) {
    .por-editoria { grid-template-columns: 1fr; }
}

.editoria-bloco {
    padding-bottom: 1.25rem;
}

.editoria-bloco__nome {
    margin: 0 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--linha);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.editoria-bloco__nome a {
    color: var(--rosa-forte);
    text-decoration: none;
}

.editoria-bloco__nome a:hover {
    text-decoration: underline;
}

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

.editoria-bloco li {
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--linha);
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

.editoria-bloco li:last-child {
    border-bottom: 0;
}

.editoria-bloco a {
    color: inherit;
    text-decoration: none;
}

.editoria-bloco li a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Cabeçalho de editoria e de busca ------------------------------------- */

.cabecalho-secao {
    padding-block: 1.75rem 1.25rem;
    border-bottom: 3px double var(--linha);
    margin-bottom: 0.5rem;
}

.cabecalho-secao .chapeu {
    margin-bottom: 0.35rem;
}

/* --- Página de matéria ----------------------------------------------------- */

.faixa--leitura {
    max-width: 46rem;
}

.materia {
    padding-top: 2rem;
}

.materia__topo {
    padding-bottom: 1.25rem;
}

.materia__titulo {
    margin: 0 0 0.75rem;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: clamp(1.85rem, 4.6vw, 2.75rem);
    line-height: 1.07;
    letter-spacing: -0.028em;
}

.materia__olho {
    margin: 0 0 1.25rem;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--tinta-apoio);
}

.assinatura {
    margin: 0;
    padding-block: 0.6rem;
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    font-size: 0.78rem;
    color: var(--tinta-apoio);
    font-variant-numeric: tabular-nums;
}

.assinatura__autor {
    font-weight: 600;
    color: var(--tinta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.materia__capa {
    margin: 1.5rem 0;
}

.materia__capa img {
    display: block;
    width: 100%;
    height: auto;
}

.materia__capa figcaption {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--tinta-apoio);
}

/* O corpo. Medida de leitura curta de propósito: linha comprida demais faz o
 * olho perder o começo da linha seguinte. */
.materia__corpo {
    font-size: 1.075rem;
    line-height: 1.75;
    max-width: 38rem;
}

.materia__corpo p {
    margin: 0 0 1.25rem;
}

.materia__corpo h2,
.materia__corpo h3 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.015em;
    margin: 2rem 0 0.75rem;
}

.materia__corpo h2 { font-size: 1.45rem; }
.materia__corpo h3 { font-size: 1.2rem; }

.materia__corpo a {
    color: var(--tinta);
    text-decoration: underline;
    text-decoration-color: var(--rosa-forte);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.materia__corpo a:hover {
    color: var(--rosa-forte);
}

.materia__corpo img {
    max-width: 100%;
    height: auto;
}

.materia__corpo figure {
    margin: 1.5rem 0;
}

.materia__corpo figcaption {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--tinta-apoio);
}

/* Citação com filete à esquerda, sem fundo colorido: fundo colorido em
 * citação é enfeite de apresentação, não de jornal. */
.materia__corpo blockquote {
    margin: 1.5rem 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--rosa);
    /* Sem serifada na folha, a citação se separa do texto pelo peso e pelo
       filete, não mais pelo desenho da letra. */
    font-family: var(--fonte-titulo);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.42;
}

.materia__corpo blockquote p {
    margin: 0;
}

.materia__corpo ul,
.materia__corpo ol {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
}

.materia__corpo li {
    margin-bottom: 0.4rem;
}

/* --- Compartilhar: link comum, sem script de rede social -------------------
 *
 * O botão oficial do Facebook ou do X rastreia o leitor antes de ele clicar em
 * nada (§2.8 do manual). Aqui são links de texto, e é só isso.
 */

.compartilhar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1.1rem;
    margin-top: 2rem;
    padding-block: 0.75rem;
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
}

.compartilhar__rotulo {
    margin: 0;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tinta-apoio);
}

.compartilhar a {
    color: var(--tinta);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.compartilhar a:hover {
    color: var(--rosa-forte);
}

/* --- Conteúdo comum ------------------------------------------------------- */

.chapeu {
    margin: 0 0 0.5rem;
    font-family: var(--fonte-corpo);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rosa-forte);
}

.chapeu a {
    color: inherit;
    text-decoration: none;
}

.chapeu a:hover {
    text-decoration: underline;
}

.manchete {
    margin: 0 0 0.75rem;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: clamp(1.7rem, 4.4vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.026em;
}

.manchete a {
    color: inherit;
    text-decoration: none;
}

.linha-fina {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    color: var(--tinta-apoio);
    max-width: 58ch;
}

.vazio {
    padding-block: 3rem;
}

.destaque,
.erro {
    padding: 2rem 0;
    margin-block: 1.5rem;
}

code {
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: var(--canto);
    padding: 0.1em 0.4em;
    font-size: 0.9em;
}

/* --- Botões: retos, sem pílula -------------------------------------------- */

.botao {
    display: inline-block;
    background: var(--acao);
    color: var(--tinta-sobre-acao);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.7rem 1.1rem;
    border-radius: var(--canto);
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.botao:hover {
    background: var(--acao-forte);
    color: var(--tinta-sobre-acao-forte);
}

.botao--calmo {
    background: transparent;
    color: var(--tinta);
    border: 1px solid var(--linha-forte);
}

.botao--calmo:hover {
    background: var(--tinta);
    color: var(--fundo);
    border-color: var(--tinta);
}

.botao--largo {
    width: 100%;
    text-align: center;
}

.botao-texto {
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--rosa-forte);
    background: none;
    border: 0;
    padding: 0.25rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Botão de tema --------------------------------------------------------
 *
 * Nasce com o atributo hidden no HTML e é o tema.js que o revela. Sem
 * JavaScript ele nunca aparece: botão que não funciona é pior do que botão
 * nenhum. O [hidden] precisa desta regra porque o display de um contêiner
 * flex vence o display:none que o navegador dá ao hidden.
 */

.tema[hidden] {
    display: none;
}

.tema {
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tinta-apoio);
    background: none;
    border: 0;
    padding: 0.15rem 0;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tema:hover {
    color: var(--rosa-forte);
}

/* --- Rodapé --------------------------------------------------------------- */

.rodape {
    margin-top: 2.5rem;
    padding-block: 1.5rem 2.5rem;
    border-top: 3px double var(--linha);
    color: var(--tinta-apoio);
    font-size: 0.85rem;
}

.rodape p {
    margin: 0 0 0.4rem;
}

.rodape__marca {
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--tinta);
}

.rodape__links a {
    color: var(--tinta-apoio);
    text-underline-offset: 3px;
}

.ajuda {
    margin: 0;
    font-size: 0.8rem;
    color: var(--tinta-apoio);
    max-width: 60ch;
}

/* --- Newsletter ----------------------------------------------------------- */

.assinar {
    padding-block: 1.5rem;
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    margin-bottom: 1.5rem;
}

.assinar__titulo {
    margin: 0 0 0.3rem;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--tinta);
}

.assinar__texto {
    margin: 0 0 0.9rem;
    color: var(--tinta-apoio);
    max-width: 52ch;
}

.assinar__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.assinar__form input[type="email"] {
    flex: 1 1 15rem;
    font: inherit;
    color: var(--tinta);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--linha-forte);
    border-radius: 0;
    padding: 0.55rem 0.1rem;
}

/* A ARMADILHA anti-robô.
 *
 * Fora da tela por position:absolute, NUNCA por display:none — robô procura
 * justamente por display:none e visibility:hidden para saber qual campo pular
 * (erro nº 15 do manual). Aqui o campo existe, ocupa lugar no HTML e some da
 * vista sem anunciar que sumiu. */
.armadilha {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Telas de entrada e primeiro acesso ---------------------------------- */

.corpo-limpo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.cartao-central {
    background: var(--fundo);
    border-top: 3px double var(--linha);
    border-bottom: 3px double var(--linha);
    padding: 2.5rem 0;
    width: 100%;
    max-width: 24rem;
}

.marca--central {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.titulo-form {
    margin: 0 0 1.25rem;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.018em;
}

/* --- Formulários ---------------------------------------------------------- */

.formulario {
    display: grid;
    gap: 1.1rem;
}

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

.campo label {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tinta-apoio);
}

.campo input,
.campo textarea,
.campo select {
    font: inherit;
    color: var(--tinta);
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: var(--canto);
    padding: 0.6rem 0.7rem;
    width: 100%;
}

.campo input:focus-visible,
.campo textarea:focus-visible,
.campo select:focus-visible {
    outline: 3px solid var(--rosa-filete);
    outline-offset: 1px;
    border-color: var(--rosa-filete);
}

/* Campo de caixa de marcar: o rótulo abraça a caixa, para o clique no texto
 * também marcar. Sem isto o .campo (que é grid) empilharia caixa e texto em
 * linhas separadas, e ninguém entenderia que uma pertence à outra. */
.campo--escolha label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.95rem;
    color: var(--tinta);
    cursor: pointer;
}

.campo--escolha input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--rosa-forte);
}

.dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

@media (max-width: 46rem) {
    .dupla { grid-template-columns: 1fr; }
}

.grupo {
    border: 1px solid var(--linha);
    border-radius: var(--canto);
    padding: 1.25rem;
    display: grid;
    gap: 1.1rem;
    margin: 0;
}

.grupo legend {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-inline: 0.5rem;
}

.botoes {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.cabecalho-lista {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--linha-forte);
}

.form-linha {
    display: inline;
    margin: 0;
}

.previa {
    display: block;
    max-width: 22rem;
}

/* --- Recados -------------------------------------------------------------- */

.recado {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--canto);
    font-size: 0.95rem;
    border-left: 4px solid var(--rosa-filete);
    background: var(--fundo-cartao);
}

/* Tinta escura sobre o rosa da bandeira: 6,89:1. Texto branco sobre esse
 * mesmo rosa daria 2,62:1 e reprovaria — ver IDENTIDADE-VISUAL.md. */
.recado--sucesso,
.recado--ok {
    background: var(--rosa);
    color: #15161C;
    border-left-color: var(--rosa-forte);
}

.recado--erro {
    background: var(--fundo-cartao);
    color: var(--tinta);
    border-left-color: var(--rosa-forte);
    font-weight: 500;
}

/* --- Tabela de diagnóstico e listas do painel ---------------------------- */

.diagnostico {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.925rem;
}

.diagnostico th,
.diagnostico td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--linha);
    vertical-align: top;
}

.diagnostico thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tinta-apoio);
    border-bottom: 2px solid var(--linha-forte);
}

.selo {
    display: inline-block;
    border-radius: var(--canto);
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.selo--passa   { background: var(--rosa);       color: #15161C; }
.selo--reprova { background: var(--rosa-forte); color: var(--tinta-sobre-acao); }
.selo--aviso   { background: var(--linha);      color: var(--tinta); }

/* Os números da capa do painel.
 *
 * Não é cartão: são colunas separadas por filete, como a tabela ao lado. A
 * regra da folha vale aqui também — caixa com sombra e canto redondo é
 * desenho de aplicativo, e o painel é a mesma publicação vista por dentro.
 *
 * O número vem antes do rótulo e em corpo grande porque é ele que se lê de
 * relance; o rótulo só existe para dizer do que se trata. */
.resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    border-block: 1px solid var(--linha);
}

.resumo__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.9rem 1.5rem 0.9rem 0;
    margin-right: 1.5rem;
    border-right: 1px solid var(--linha);
}

/* O último não desenha filete: sobraria um risco solto no fim da linha. */
.resumo__item:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}

.resumo__numero {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* O "/3" do contador de anúncios: é denominador, não número próprio. */
.resumo__de {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tinta-apoio);
    letter-spacing: 0;
}

.resumo__rotulo {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tinta-apoio);
}

@media (max-width: 40rem) {
    /* No celular a fila vira grade de duas colunas: cinco itens lado a lado
       espremeriam o número a ponto de ele perder a função de ser lido de
       relance. */
    .resumo {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .resumo__item {
        padding-right: 1rem;
        margin-right: 0;
        border-bottom: 1px solid var(--linha);
    }

    .resumo__item:nth-child(2n) { border-right: 0; }
    .resumo__item:last-child    { border-bottom: 0; }
}

/* --- Painel --------------------------------------------------------------- */

.topo--painel {
    border-bottom: 3px double var(--linha);
}

.faixa--painel {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-block: 1rem;
}

.menu {
    display: flex;
    gap: 1.25rem;
    margin-right: auto;
}

.menu a {
    color: var(--tinta);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-block: 0.25rem;
    border-bottom: 2px solid transparent;
}

.menu a:hover {
    border-bottom-color: var(--rosa-forte);
}

.conta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.85rem;
}

.conta__nome {
    font-weight: 600;
}

.selo--papel {
    background: var(--linha);
    color: var(--tinta);
}

.form-sair {
    margin: 0;
}

.corpo-painel main {
    padding-bottom: 3rem;
}

/* --- Editor de texto ------------------------------------------------------ */

.editor-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-bottom: 0;
    border-radius: var(--canto) var(--canto) 0 0;
    padding: 0.4rem;
}

.editor-barra button {
    font: inherit;
    min-width: 2.2rem;
    height: 2.2rem;
    color: var(--tinta);
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--canto);
    cursor: pointer;
}

.editor-barra button:hover {
    border-color: var(--rosa-filete);
}

.editor-separador {
    width: 1px;
    height: 1.4rem;
    background: var(--linha);
    margin-inline: 0.3rem;
}

.editor {
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: 0 0 var(--canto) var(--canto);
    padding: 1.25rem;
    min-height: 20rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

.editor:focus-visible {
    outline: 3px solid var(--rosa-filete);
    outline-offset: -1px;
}

.editor h2,
.editor h3 {
    font-family: var(--fonte-titulo);
}

.editor h2 { font-size: 1.4rem; }
.editor h3 { font-size: 1.15rem; }

.editor blockquote {
    margin: 1rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--rosa);
    color: var(--tinta-apoio);
}

.editor img {
    max-width: 100%;
    height: auto;
}

.editor figcaption {
    font-size: 0.85rem;
    color: var(--tinta-apoio);
}

.editor-rodape {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--tinta-apoio);
}

/* O textarea é a fonte de verdade que vai no POST. Fica escondido quando o
 * editor visual está de pé, e reaparece sozinho se o JavaScript não rodar. */
.editor-fonte {
    font: inherit;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85rem;
    width: 100%;
    margin-top: 0.5rem;
    color: var(--tinta);
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: var(--canto);
    padding: 0.65rem;
}

.escondido {
    display: none;
}