/* =============================================================================
   Portal 7Quedas — folha de estilo única.

   A identidade NÃO foi inventada aqui: o cliente chegou com marca fechada, e
   marca fechada manda. Do manual vieram, sem discussão, o azul-marinho da
   base, o azul de meio-tom do "7", o azul claro da queda d'água e o desenho
   geométrico pesado do logotipo.

   Duas vozes tipográficas, com papéis separados:

     Montserrat        títulos, navegação, rótulos. É a família que concorda
       com o logotipo — uma grotesca geométrica pesada. O site tem de parecer
       da mesma casa que a marca, não discutir com ela.

     Source Serif 4    corpo das matérias. Geométrica em texto corrido de
       jornal cansa; a serifada aguenta a leitura longa.

   A estrutura da capa veio do tema `mural` e continua valendo: a manchete
   sustenta a primeira tela em tipo, o plantão marca a hora, a procedência
   aparece antes da dobra. O que este portal tem e nenhum outro tem é a área
   de transmissão das sessões de câmara, que toma o topo quando há sessão no ar
   — é o serviço central que ele presta, e não um acessório.
   ========================================================================== */

/* ------------------------------------------------------------------- tokens */
:root {
    --papel:        #F4F7FA;   /* claro com viés azul: a página é da mesma família da marca */
    --folha:        #FFFFFF;
    --folha-fria:   #E9EFF6;
    --tinta:        #0B1E37;   /* o marinho da marca também é a cor do texto */
    --tinta-forte:  #0B1E37;
    --tinta-2:      #4A5D74;
    --tinta-3:      #7C8CA0;
    --fio:          #D8E2EC;
    --fio-forte:    #A9BACB;

    --marca:        #1B6FC4;   /* o azul do "7" */
    --marinho:      #0B1E37;   /* a base escura */
    --marinho-2:    #0E2742;   /* um degrau acima: barra de estado, painéis */
    --noite:        #050D19;   /* o fundo do palco, mais fundo que a marca */
    --queda:        #4FA8E8;   /* o azul claro da água */
    --espuma:       #E6F1FB;   /* realce muito claro, para fundos de destaque */
    --fio-escuro:   #1B3654;   /* o fio de 1px sobre o marinho */

    /* Escala de estado das transmissões e dos avisos — reservada, nunca usada
       como cor de marca: o "ao vivo" precisa poder gritar. */
    --nivel-info:    #4A5D74;
    --nivel-atencao: #A25E00;
    --nivel-urgente: #C42121;
    --no-ar:         #E02424;

    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --cond:  "Montserrat", "Helvetica Neue", Arial, sans-serif;

    --largura: 1200px;
    --goteira: 28px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --papel:        #071120;
        --folha:        #0E2036;
        --folha-fria:   #132B45;
        --tinta:        #E8F0F8;
        --tinta-forte:  #E8F0F8;
        --tinta-2:      #9FB3C8;
        --tinta-3:      #74899F;
        --fio:          #1C3855;
        --fio-forte:    #2C5175;

        --marca:        #4FA8E8;
        --marinho:      #071120;
        --marinho-2:    #0E2036;
        --noite:        #03080F;
        --queda:        #7FC4F5;
        --espuma:       #132B45;
        --fio-escuro:   #1C3855;

        --nivel-info:    #9FB3C8;
        --nivel-atencao: #E0A44A;
        --nivel-urgente: #F07B7B;
        --no-ar:         #FF5A5A;
    }
}

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

html { -webkit-text-size-adjust: 100%; }

/* A geométrica é a voz padrão do site — é ela que concorda com o logotipo.
   A serifada não sumiu: ficou com a única função em que ganha, que é texto
   longo. O manifesto do tema já dizia isso; a implementação é que fazia o
   contrário, e era daí que vinha a sensação de marca e página em séculos
   diferentes. */
body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--cond);
    font-size: 16px;
    line-height: 1.55;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}

/* Onde a serifada ganha: leitura longa, e o texto de apoio que precisa
   contrastar com o título geométrico sem competir com ele. */
.materia__corpo,
.materia__linhafina,
.manchete__linhafina,
.chamada__linhafina,
.card__resumo,
.evento__resumo,
.abre__lf,
.carta__lf,
.pub__lf,
.sessao-detalhe__resumo,
.linha-tempo__resumo { font-family: var(--serif); }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--cond);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.028em;
}

/* Linguagem de forma: um raio, uma elevação, um fio. A capa antiga não
   tinha regra nenhuma — tinha ZERO raio e ZERO sombra, e era isso que o
   cliente chamou de "quadrado demais". O problema não era faltar enfeite,
   era não haver sistema. */
:root {
    --raio: 5px;
    --raio-g: 6px;
    --sombra: 0 1px 2px rgba(11, 30, 55, .05), 0 10px 30px -16px rgba(11, 30, 55, .28);
    --sombra-alta: 0 2px 4px rgba(7, 17, 32, .10), 0 24px 48px -24px rgba(7, 17, 32, .55);
}

p { margin: 0; }

.container {
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 var(--goteira);
}
.container--estreito { max-width: 760px; }

.visualmente-oculto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular-para-conteudo {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--marca); color: #fff; padding: 12px 18px;
    font-family: var(--cond); font-weight: 600;
}
.pular-para-conteudo:focus { left: 0; }

/* ========================================================== cabeçalho ==
   Um bloco marinho, não duas faixas claras.

   O tema herdou de `mural` uma cabeça de jornal: nome centralizado, data por
   cima, tudo sobre branco. Ficou bonito e ficou errado — aquele desenho diz
   "saio uma vez por dia", e este portal diz "entro no ar às 19h". A marca
   também não concordava com a página: o logotipo é uma grotesca geométrica
   pesada e o nome vinha em serifada.

   Agora a marca fica à esquerda, com folga, sobre o marinho dela mesma; e
   logo abaixo vem a barra de estado, que nunca some: ou diz o que está no ar,
   ou diz a que horas entra.
   ====================================================================== */
/* O desenho da faixa do logotipo — fundo, arranjo, marca e nome — mora em
   `cabecalho.css`, junto com as camadas que o painel liga e desliga. Está lá,
   e não aqui, porque a prévia do painel carrega AQUELE arquivo sozinha: se a
   tipografia da marca ficasse neste, a prévia mostraria uma imitação e
   envelheceria sozinha. */

/* ------------------------------------------------------------------- menu */

/* O menu ganha a própria linha, como a barra de seções de jornal impresso.
   Não é preferência: com cinco editorias, as páginas marcadas para o menu e
   as seções próprias do portal (Sessões, Notas, Agenda, Fotos, Vídeos...) a
   barra passa de dez itens e não cabe ao lado da marca em largura nenhuma —
   ficava cortada no meio de uma palavra, que é o que parece defeito. Encolher
   a tipografia até caber só troca um problema por outro.

   A marca e a busca dividem a primeira linha; o menu fica embaixo, encostado
   na faixa de estado, e continua rolando lateralmente quando nem a linha
   inteira basta. */
.cabecalho__topo { flex-wrap: wrap; row-gap: 13px; }

.menu {
    order: 3;
    flex: 1 0 100%;
    min-width: 0;
    border-top: 1px solid var(--fio-escuro);
    padding-top: 11px;
}

.busca { margin-left: auto; }

/* Com muitas seções a barra rola. A máscara à direita faz o corte parecer
   "tem mais adiante" em vez de "quebrou". */
.menu__lista {
    display: flex;
    /* Apertado de propósito: são catorze itens quando o portal está com tudo
       ligado, e cada pixel de vão aqui é uma seção que some para a direita. */
    gap: 17px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 26px;
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}
.menu__lista::-webkit-scrollbar { display: none; }

.menu__lista a {
    font-family: var(--cond);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 4px 0 3px;
    border-bottom: 2px solid transparent;
    color: #B7CCE2;
}
.menu__lista a:hover,
.menu__lista a[aria-current="page"] {
    text-decoration: none;
    color: #fff;
    border-bottom-color: var(--cor-item, var(--queda));
}

.menu-botao {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px; height: 38px;
    background: none; border: 0; cursor: pointer; padding: 0;
    margin-left: auto;
}
.menu-botao span { display: block; height: 2px; background: #EAF2FA; }

/* ------------------------------------------------------ barra de estado --
   O que está no ar, ou a que horas entra. Nunca vazia, nunca ausente. */
.estado {
    background: var(--marinho-2);
    border-top: 1px solid var(--fio-escuro);
    border-bottom: 1px solid var(--fio-escuro);
}

.estado__int {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: var(--cond);
    font-size: 13px;
}

.pulso {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    font-size: 11px; font-weight: 800; letter-spacing: 0.13em;
    text-transform: uppercase; color: #fff;
}
.pulso::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--no-ar); box-shadow: 0 0 0 4px rgba(224, 36, 36, 0.22);
}
.pulso--espera { color: var(--queda); }
.pulso--espera::before { background: var(--queda); box-shadow: 0 0 0 4px rgba(79, 168, 232, 0.18); }

.estado__agora {
    color: #EAF2FA; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.estado__agora strong { font-weight: 700; }

.estado__depois {
    margin-left: auto; flex: none;
    display: flex; align-items: center; gap: 20px;
    color: #8FB0D2; font-size: 12.5px;
}
.estado__seguinte em { font-style: normal; color: #EAF2FA; font-weight: 600; }
.estado__arquivo { color: var(--queda); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }

/* ------------------------------------------------------------------ busca */
.busca { position: relative; display: flex; align-items: center; }

/* A busca vive DENTRO do cabeçalho, e o cabeçalho pode ter foto atrás. Uma
   caixinha branca ali vira um adesivo colado sobre a imagem. Um campo de linha,
   translúcido, pertence à faixa: ele escurece de leve para se sustentar sobre
   qualquer fundo e acende quando recebe o cursor. */
.busca input {
    font-family: var(--cond);
    font-size: 14px;
    width: 168px;
    padding: 8px 32px 8px 12px;
    border: 0;
    border-bottom: 1.5px solid color-mix(in srgb, currentColor 34%, transparent);
    background: color-mix(in srgb, #000 18%, transparent);
    color: #EAF2FA;
    border-radius: 4px 4px 0 0;
}
.busca input::placeholder { color: color-mix(in srgb, currentColor 55%, transparent); }
.busca input:focus {
    width: 224px;
    outline: none;
    border-bottom-color: var(--queda, #4FA8E8);
    background: color-mix(in srgb, #000 30%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .busca input { transition: width 130ms ease-out; }
}

.busca button {
    position: absolute; right: 6px; color: #EAF2FA; opacity: .75;
    background: none; border: 0; cursor: pointer;
    color: var(--tinta-2); display: flex; padding: 4px;
}

.busca__sugestoes {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
    min-width: 280px;
    background: var(--folha);
    border: 1px solid var(--fio-forte);
}
.busca__sugestoes a {
    display: block; padding: 9px 12px;
    font-family: var(--cond); font-size: 14.5px;
    border-bottom: 1px solid var(--fio);
}
.busca__sugestoes a:last-child { border-bottom: 0; }
.busca__sugestoes a:hover { background: var(--espuma); text-decoration: none; }

/* ============================================================= o quadro ===
   A metade "mural" da tese: fundo chapado, fichas, tipografia condensada.
   É o único bloco do tema que quebra a regra do sem-moldura, e o contraste com
   a manchete serifada logo abaixo é exatamente o desenho.
   ======================================================================== */
/* A faixa era um bloco de azul chapado da marca. Entre o cabeçalho marinho e
   o palco escuro, virava uma terceira barra brigando com as outras duas — e
   clarear não resolveria: uma faixa clara espremida entre dois escuros é
   listra, não separação.

   Então ela deixou de ser barra e passou a ser a última camada do cabeçalho:
   mesmo marinho, sem cor chapada. A cor ficou reservada para o NÍVEL do
   aviso, que é o único lugar onde ela informa alguma coisa — e agora pode
   gritar, porque não disputa com um fundo colorido. */
.quadro {
    background: var(--marinho);
    color: #EAF2FA;
    padding: 11px 0 13px;
    border-bottom: 1px solid var(--fio-escuro);
}

.quadro__interna { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }

.quadro__rotulo {
    font-family: var(--cond);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--queda);
    flex-shrink: 0;
}

.quadro__fichas {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
    flex: 1; min-width: 0;
}

.ficha {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
    background: var(--marinho-2);
    border: 1px solid var(--fio-escuro);
    border-left: 3px solid #6F8CAB;
    border-radius: var(--raio);
    padding: 6px 12px;
    font-family: var(--cond);
    font-size: 14px;
    line-height: 1.35;
    color: #C7DBEE;
}

.ficha--atencao { border-left-color: #E0A44A; }
.ficha--urgente { border-left-color: #FF5A5A; }

.ficha__nivel {
    font-size: 10px; font-weight: 800; letter-spacing: 0.13em;
    text-transform: uppercase; color: #8FB0D2;
}
.ficha--atencao .ficha__nivel { color: #E0A44A; }
.ficha--urgente .ficha__nivel { color: #FF8A8A; }
.ficha__texto strong { font-weight: 700; color: #fff; }
.ficha__onde::before, .ficha__detalhe::before { content: "· "; color: #456B8E; }
.ficha__onde, .ficha__detalhe { color: #8FB0D2; }
.ficha__link {
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px;
}

/* ------------------------------------------------------------- live no topo */
.live { background: var(--tinta); color: #fff; }
.live__barra {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 0; font-family: var(--cond);
}
.live__selo {
    font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--nivel-urgente); color: #fff; padding: 3px 8px;
}
.live__titulo { font-size: 15px; flex: 1; min-width: 0; }
.live__alternar {
    font-family: var(--cond); font-size: 13px; font-weight: 600;
    background: none; border: 1px solid rgba(255,255,255,0.4); color: #fff;
    padding: 5px 12px; cursor: pointer;
}
.live__player { padding-bottom: 18px; }
.live__descricao { font-family: var(--cond); font-size: 14px; opacity: 0.8; padding-bottom: 12px; }

/* ================================================================= a capa == */
.conteudo { padding-bottom: 56px; }

/* ================================================================ o palco ==
   A primeira tela quando há sessão — escura, e não é notícia. Foi a escolha
   desconfortável do projeto, e tem motivo: transmitir sessão de câmara é o
   serviço que este portal presta.

   O fundo não é um degradê: são cinco camadas.
     1. base em diagonal — a luz não vem de cima, vem de onde a água cai;
     2. brilho de respingo, grande e fora do centro;
     3. contraluz fria no canto oposto, para o marinho não achatar;
     4. as SETE quedas, em traço longo (o svg no template);
     5. grão finíssimo, que dá matéria sem virar listra.
   Nenhuma é visível sozinha. Juntas, o marinho deixa de ser chapado.
   ====================================================================== */
.palco {
    position: relative;
    overflow: hidden;
    padding: 26px 0 250px;
    background: transparent;
}

.palco__fundo {
    position: absolute; inset: 0;
    background:
        radial-gradient(1150px 680px at 14% -16%, rgba(79, 168, 232, .11), transparent 60%),
        radial-gradient(760px 520px at 97% 110%, rgba(27, 111, 196, .10), transparent 58%),
        linear-gradient(158deg, #0A2039 0%, #06121F 48%, #03080F 100%);
}

.palco__fluxo { position: absolute; left: -4%; top: 0; width: 108%; height: 100%; pointer-events: none; }

.palco__grao {
    position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background: repeating-linear-gradient(101deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 7px);
}

/* ----------------------------------------------- a passagem para a folha --
   Um esmaecimento, sem forma nenhuma: nem onda, nem linha, nem borda. O
   escuro perde opacidade e quem aparece por baixo é a própria cor da página,
   então a mistura é real e não passa por nenhum cinza escolhido a dedo — era
   esse cinza inventado que sujava as primeiras tentativas.

   Três cuidados separam isto de uma faixa de degradê:

     · a rampa NÃO é linear. São onze paradas numa curva de desaceleração; um
       degradê linear fica tempo demais no meio, e é esse meio parado que o
       olho lê como "faixa";
     · 230px de percurso, não 96. Passagem curta tem borda; longa vira ar;
     · no meio dela passa um clarão frio — o azul da água. Sem ele o meio cai
       no cinza, que é o que sobra de misturar marinho com branco. Com ele a
       passagem tem cor da marca até o fim.
   -------------------------------------------------------------------------- */
.palco {
    --rampa: linear-gradient(180deg, #000 0, #000 calc(100% - 230px),
        rgba(0,0,0,.985) calc(100% - 206px), rgba(0,0,0,.945) calc(100% - 182px),
        rgba(0,0,0,.875) calc(100% - 158px), rgba(0,0,0,.775) calc(100% - 134px),
        rgba(0,0,0,.635) calc(100% - 110px), rgba(0,0,0,.475) calc(100% - 86px),
        rgba(0,0,0,.315) calc(100% - 64px), rgba(0,0,0,.175) calc(100% - 44px),
        rgba(0,0,0,.075) calc(100% - 26px), rgba(0,0,0,.02) calc(100% - 12px),
        transparent 100%);
}
.palco__fundo, .palco__fluxo, .palco__grao {
    -webkit-mask-image: var(--rampa);
            mask-image: var(--rampa);
}

.palco__clarao {
    position: absolute; left: 0; right: 0; bottom: 0; height: 250px;
    z-index: 1; pointer-events: none;
    background:
        radial-gradient(1400px 130px at 42% 44%, rgba(120, 190, 240, .34), transparent 70%),
        radial-gradient(900px 90px at 76% 52%, rgba(79, 168, 232, .22), transparent 72%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%, #000 62%, transparent 92%);
            mask-image: linear-gradient(180deg, transparent 0, #000 40%, #000 62%, transparent 92%);
}

/* O fundo respira devagar demais para alguém ver acontecendo — mas a tela
   nunca é exatamente a mesma duas vezes. */
@media (prefers-reduced-motion: no-preference) {
    .palco__fluxo { animation: respira 150s ease-in-out infinite alternate; }
}
@keyframes respira {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-1.5%, 1.2%, 0) scale(1.05); }
}

.palco__grade {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: 26px;
}
.palco__tela { min-width: 0; }

/* --------------------------------------------------- a semana no plenário */
.grade-semana {
    background: var(--marinho);
    border: 1px solid var(--fio-escuro);
    border-radius: var(--raio);
    padding: 18px;
    align-self: start;
}

.grade-semana__titulo {
    font-size: 11.5px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--queda);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fio-escuro);
}

.linha-semana {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 13px;
    padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.linha-semana:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.linha-semana:hover { text-decoration: none; }

.linha-semana__h {
    font-size: 15px; font-weight: 800; color: #fff;
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.linha-semana__h small {
    display: block; font-size: 10px; font-weight: 600;
    letter-spacing: 0.1em; color: #6F8CAB; margin-top: 2px;
}

.linha-semana__camara {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.13em; text-transform: uppercase;
}
.linha-semana__camara i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.linha-semana__titulo { display: block; font-size: 13.5px; font-weight: 600; color: #DCE9F5; margin-top: 3px; line-height: 1.35; }

.grade-semana__pe {
    display: block; margin-top: 16px;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--queda);
}

/* ================================================== a folha das publicações
   Sobe 42px para dentro do marinho: é dela que vem a profundidade da
   passagem, junto com o clarão. O fio d'água de 3px no topo é a mesma peça
   que aparece sob o cabeçalho — as duas partes do site falam a mesma língua.
   ====================================================================== */
.corpo { margin-top: -42px; position: relative; z-index: 3; }

/* Sem palco (módulo de sessões desligado, ou nenhuma sessão na semana) não há
   marinho para a folha invadir: ela vira uma seção comum. */
.corpo--sem-palco { margin-top: 26px; }

.folha {
    background: var(--folha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-alta);
    overflow: hidden;
}
.corpo--sem-palco .folha { box-shadow: var(--sombra); border: 1px solid var(--fio); }

.folha::before {
    content: ""; display: block; height: 3px;
    background: linear-gradient(90deg, var(--marca), var(--queda) 50%, var(--marca));
}
.folha__int { padding: 30px var(--goteira) 36px; }

/* ------------------------------------------------- a publicação que abre -- */
.abre {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 38px;
    align-items: center;
    padding-bottom: 32px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--fio);
}
.abre__texto { min-width: 0; }

.abre__titulo {
    font-size: clamp(28px, 3.5vw, 46px);
    line-height: 1.04;
    letter-spacing: -0.036em;
    margin-top: 12px;
    text-wrap: balance;
}

.abre__lf {
    font-size: 18px;
    line-height: 1.52;
    color: var(--tinta-2);
    margin-top: 15px;
    max-width: 48ch;
}

.abre__figura {
    display: block; aspect-ratio: 4 / 3;
    border-radius: var(--raio); overflow: hidden;
    box-shadow: var(--sombra);
    background: var(--folha-fria);
}
.abre__figura img { width: 100%; height: 100%; object-fit: cover; }

.assinatura--abre { margin-top: 18px; font-size: 13.5px; }
.assinatura--abre .assinatura__rosto { width: 34px; height: 34px; font-size: 13px; }

/* ------------------------------------------------- duas colunas de apoio -- */
.duas {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 40px;
    padding-top: 34px;
    margin-top: 32px;
    border-top: 1px solid var(--fio);
}
.duas > div > .chamada { margin-bottom: 14px; }
/* A coluna da direita é sempre a da direita: sem isto, num dia em que a
   redação não tem publicação suficiente para a coluna da esquerda, os painéis
   escorregam para o lugar dela e metade da tela fica vazia. */
.duas > aside { grid-column: 2; }

/* E quando SÓ há os painéis, eles se espalham em linha em vez de ficarem
   espremidos numa coluna com um vão do lado. */
.duas--so-apoio { grid-template-columns: 1fr; }
.duas--so-apoio > aside {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 20px;
    align-items: start;
}
.duas--so-apoio > aside > * { margin-bottom: 0; }

.painel {
    background: var(--folha);
    border: 1px solid var(--fio);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 18px;
    margin-bottom: 20px;
}
.painel__titulo {
    font-size: 11.5px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--marca);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fio);
    margin-bottom: 4px;
}

/* ----------------------------------------------- arquivo das sessões ----- */
.arquivada {
    display: block;
    background: var(--folha);
    border: 1px solid var(--fio);
    border-left: 3px solid var(--cor-item, var(--marca));
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 15px 16px;
}
.arquivada:hover { text-decoration: none; border-color: var(--cor-item, var(--marca)); }

.arquivada__camara {
    display: flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--cor-item, var(--marca));
}
.arquivada__camara i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.arquivada__titulo {
    display: block; font-size: 15.5px; font-weight: 700;
    color: var(--tinta); margin-top: 8px; line-height: 1.28;
    letter-spacing: -0.015em;
}
.arquivada__meta {
    display: flex; gap: 8px; flex-wrap: wrap;
    font-size: 12px; color: var(--tinta-3); margin-top: 8px;
}
.arquivada__meta strong { color: var(--tinta-2); font-weight: 600; }

/* ============================================================== a chamada ==
   Agora tem moldura: folha branca, um fio de 1px, um raio, uma elevação. A
   versão anterior não tinha nenhum dos quatro — e a página inteira tinha UM
   canto arredondado e NENHUMA sombra. Não faltava enfeite: faltava sistema.
   ====================================================================== */
.chamada {
    min-width: 0;
    background: var(--folha);
    border: 1px solid var(--fio);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chamada__texto { display: flex; flex-direction: column; gap: 7px; padding: 15px 17px 17px; flex: 1; }

.chamada__titulo {
    font-size: 18px;
    line-height: 1.24;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.chamada--destaque .chamada__titulo { font-size: 24px; }
.chamada--compacto .chamada__titulo { font-size: 17px; }

/* Compacta é a chamada de lista, sem imagem: sem moldura ela vira linha de
   índice, que é o que ela é. */
.chamada--compacto {
    background: none; border: 0; box-shadow: none; border-radius: 0;
    border-top: 1px solid var(--fio);
}
.chamada--compacto .chamada__texto { padding: 14px 0; }

.chamada--horizontal { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0; }
.chamada--horizontal .chamada__figura { aspect-ratio: 4 / 3; }

.chamada__linhafina {
    font-size: 15px;
    line-height: 1.46;
    color: var(--tinta-2);
}

.chamada__figura { display: block; aspect-ratio: 16 / 9; background: var(--folha-fria); }
.chamada__figura img { width: 100%; height: 100%; object-fit: cover; }
.chamada--destaque .chamada__figura { aspect-ratio: 3 / 2; }

/* ------------------------------------------------------- chapa d'água --
   O lugar da foto quando não há foto.

   A redação publica pouco e quase nunca com imagem; a capa antiga respondia a
   isso não mostrando nada, e foi assim que ela ficou oca. Aqui a ausência
   ganha forma: um campo da paleta da marca, com o nome da editoria no canto.
   Não é placeholder cinza, não é logotipo esticado — é superfície da marca,
   e por isso pode aparecer três vezes na mesma tela sem virar remendo.

   O campo é escolhido pelo id da publicação (`chapa--1` a `chapa--4`), não
   sorteado: a mesma matéria tem sempre a mesma cor, senão a capa piscaria a
   cada recarga. */
.chapa {
    display: block; position: relative; width: 100%; height: 100%;
    background: linear-gradient(152deg, #2E7DC4, #0B1E37 80%);
}
.chapa::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(85% 68% at 80% 10%, rgba(127, 196, 245, .5), transparent 62%),
        repeating-linear-gradient(106deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 16px);
}
/* Quatro campos que se distinguem de longe — quando três chamadas sem foto
   caem lado a lado, quatro variações do mesmo azul leriam como falha de
   carregamento, não como escolha. Variam o ângulo, o ponto de luz e a
   profundidade, mas nenhuma sai da paleta da marca. */
.chapa--2 { background: linear-gradient(196deg, #6FBEF2, #0E3357 72%); }
.chapa--2::after { background:
    radial-gradient(70% 90% at 18% 92%, rgba(255, 255, 255, .34), transparent 58%),
    repeating-linear-gradient(74deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 19px); }

.chapa--3 { background: linear-gradient(28deg, #0B1E37 18%, #1B6FC4 120%); }
.chapa--3::after { background:
    radial-gradient(60% 70% at 92% 96%, rgba(127, 196, 245, .42), transparent 62%),
    repeating-linear-gradient(-96deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 13px); }

.chapa--4 { background: linear-gradient(170deg, #123A63, #03080F 88%); }
.chapa--4::after { background:
    radial-gradient(95% 60% at 50% -8%, rgba(79, 168, 232, .46), transparent 64%),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 22px); }

.chapa__rotulo {
    position: absolute; left: 14px; bottom: 12px; z-index: 2;
    font-family: var(--cond);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}

/* ---------------------------------------------------- chapéu, editoria, crédito */
.chapeu {
    display: block;
    font-family: var(--cond);
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--marca);
    margin-bottom: 3px;
}
.chapeu--forte { font-size: 15px; letter-spacing: 0.09em; }

.editoria {
    font-family: var(--cond);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--cor-item, var(--marca));
    align-self: start;
}
.editoria--forte {
    display: inline-block;
    border-bottom: 2px solid var(--cor-item, var(--marca));
    padding-bottom: 3px;
    font-size: 13px;
}

/* A procedência: quem assinou, quando. É o que a prova mandou trazer para a capa. */
.assinatura {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
    font-family: var(--cond);
    font-size: 13px;
    color: var(--tinta-3);
}
.assinatura > * + *::before { content: "·"; margin-right: 8px; color: var(--fio-forte); }
.assinatura__autor { font-weight: 600; color: var(--tinta-2); }

/* Num portal de reportagem autoral quem assina é parte da credencial do
   texto, não uma linha de metadado. Por isso a assinatura tem rosto. */
.assinatura__rosto {
    display: inline-grid; place-items: center; flex: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(150deg, var(--marca), #0E4F94);
    color: #fff; font-size: 10px; font-weight: 800; letter-spacing: -0.02em;
    align-self: center;
}
.assinatura__rosto + * { margin-left: -4px; }
.assinatura__rosto + *::before { content: none; }

.assinatura--manchete {
    font-size: 14px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--fio);
}

/* ================================================================= seções == */
.secao { padding-top: 34px; }
.secao--coluna { padding-top: 0; }

.fio {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    border-top: 2px solid var(--cor-item, var(--tinta));
    padding-top: 10px;
    margin-bottom: 22px;
}

.fio h2 {
    font-family: var(--cond);
    font-size: 13.5px; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--cor-item, var(--tinta));
}
/* A segunda metade do título sai em azul. É o único lugar da página onde a
   cor da marca entra na tipografia, e é de propósito: marca um ritmo de
   seção sem precisar de mais um fio. */
.fio h2 i { font-style: normal; color: var(--marca); }
.fio--secao { border-top-width: 2px; padding-top: 11px; margin-bottom: 22px; }

.fio__link {
    font-family: var(--cond);
    font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--tinta-3);
}

/* Cada bloco declara suas colunas — não há uma grade única aplicada a tudo. */
.grade {
    display: grid;
    grid-template-columns: repeat(var(--colunas, 3), minmax(0, 1fr));
    gap: 30px 32px;
    /* O teto de largura evita o outro extremo: com uma chamada só, a coluna não
       estica por 1140px e vira uma linha de título ilegível. */
    max-width: calc(var(--colunas, 3) * 390px);
}

.colunas {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 40px;
    padding-top: 34px;
}

.secao--escura {
    background: var(--tinta);
    color: var(--papel);
    padding: 34px 0 38px;
    margin-top: 40px;
}
.secao--escura .fio { border-top-color: rgba(255,255,255,0.5); }
.secao--escura .fio h2, .secao--escura .fio__link { color: var(--papel); }

/* --------------------------------------------------------------- ranking -- */
.ranking { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.ranking li {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px;
    padding: 11px 0; border-bottom: 1px solid var(--fio);
    font-size: 16.5px; line-height: 1.32;
}
.ranking li:last-child { border-bottom: 0; }
.ranking__numero {
    font-family: var(--cond); font-size: 20px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--marca); line-height: 1.1;
}

/* ---------------------------------------------------------- cards de mídia */
.card { min-width: 0; }
.card__imagem { display: block; position: relative; background: var(--folha-fria); }
.card__texto { padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.card__titulo { font-size: 17.5px; font-weight: 600; line-height: 1.24; }
.card__resumo { font-size: 15px; color: var(--tinta-2); }
.card__meta { font-family: var(--cond); font-size: 13px; color: var(--tinta-3); }
.card__chapeu { display: block; font-family: var(--cond); font-size: 12.5px;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--marca); }
.card__play {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; font-size: 34px; text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.card__contador {
    position: absolute; right: 8px; bottom: 8px;
    font-family: var(--cond); font-size: 12px; font-weight: 600;
    background: rgba(0,0,0,0.7); color: #fff; padding: 2px 7px;
}

/* ---------------------------------------------------------------- agenda -- */
.agenda { display: grid; grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr)); gap: 22px 28px;
    max-width: calc(var(--colunas, 4) * 300px); }

.evento { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: start; }
.evento__data {
    text-align: center; border: 1px solid var(--fio-forte); padding: 6px 0 7px;
    font-family: var(--cond); line-height: 1;
}
.evento__dia { display: block; font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums; }
.evento__mes { display: block; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3); margin-top: 3px; }
.evento__titulo { font-size: 16.5px; font-weight: 600; line-height: 1.26; }
.evento__quando, .evento__local { font-family: var(--cond); font-size: 13.5px; color: var(--tinta-3); margin-top: 4px; }
.evento__resumo { font-size: 15px; color: var(--tinta-2); margin-top: 6px; }
.evento--passado { opacity: 0.6; }
.evento__cancelado { color: var(--nivel-urgente); font-weight: 600; }
.evento__ficha { display: grid; gap: 6px; font-family: var(--cond); font-size: 14.5px; margin-top: 16px; }
.evento__imagem { margin-top: 18px; }

/* --------------------------------------------------------------- matéria -- */
.materia { max-width: 720px; margin: 0 auto; padding-top: 30px; }
.materia__cabecalho { display: flex; flex-direction: column; gap: 10px; }
.materia__chapeu {
    font-family: var(--cond); font-size: 14px; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--marca);
}
.materia__titulo { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.024em; text-wrap: balance; }
.materia__linhafina { font-size: 19px; line-height: 1.5; color: var(--tinta-2); }
.materia__meta {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-family: var(--cond); font-size: 14px; color: var(--tinta-3);
    padding: 14px 0; margin-top: 6px;
    border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio);
}
.materia__figura { margin: 24px 0; }
.materia__figura figcaption {
    font-family: var(--cond); font-size: 13.5px; color: var(--tinta-3);
    padding-top: 7px; border-bottom: 1px solid var(--fio); padding-bottom: 10px;
}
.materia__corpo { font-size: 18.5px; line-height: 1.68; margin-top: 26px; }
.materia__corpo p { margin: 0 0 1.15em; }
.materia__corpo h2 { font-size: 26px; margin: 1.5em 0 0.5em; letter-spacing: -0.018em; }
.materia__corpo h3 { font-size: 21px; margin: 1.4em 0 0.45em; }
.materia__corpo a { color: var(--marca); text-decoration: underline; text-underline-offset: 3px; }
.materia__corpo img { margin: 22px 0; }
.materia__corpo blockquote {
    margin: 26px 0; padding-left: 20px;
    border-left: 3px solid var(--marca);
    font-size: 21px; line-height: 1.45; color: var(--tinta-2);
}
.materia__corpo ul, .materia__corpo ol { padding-left: 22px; margin: 0 0 1.15em; }
.materia__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.tag {
    font-family: var(--cond); font-size: 13px; font-weight: 600;
    letter-spacing: 0.05em;
    border: 1px solid var(--fio-forte); padding: 4px 10px; color: var(--tinta-2);
}

.migalhas { font-family: var(--cond); font-size: 13px; color: var(--tinta-3); padding-top: 18px; }
.migalhas a { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------ institucional */
.pagina-institucional { max-width: 720px; margin: 0 auto; padding-top: 30px; font-size: 18px; line-height: 1.66; }
.pagina-institucional h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.022em; margin-bottom: 18px; }
.pagina-institucional__atualizacao { font-family: var(--cond); font-size: 13px; color: var(--tinta-3); margin-top: 26px; }

.cabecalho-secao {
    display: flex; align-items: flex-start; gap: 18px; justify-content: space-between;
    padding-top: 28px; padding-bottom: 22px; border-bottom: 2px solid var(--tinta); margin-bottom: 26px;
}
.cabecalho-secao h1 { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -0.022em; }
.cabecalho-secao__descricao { font-size: 16.5px; color: var(--tinta-2); margin-top: 8px; max-width: 60ch; }
.cabecalho-secao__contagem { font-family: var(--cond); font-size: 13px; color: var(--tinta-3); white-space: nowrap; }
.cabecalho-secao__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

/* ------------------------------------------------------------- publicidade */
.publicidade { margin: 30px 0; text-align: center; }
.publicidade__rotulo {
    display: block;
    font-family: var(--cond); font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3);
    margin-bottom: 8px;
}
.publicidade img { margin: 0 auto; }

/* ------------------------------------------------------------- compartilhar */
.compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 30px; }
.compartilhar__rotulo { font-family: var(--cond); font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3); }
.compartilhar__botao {
    font-family: var(--cond); font-size: 13.5px; font-weight: 600;
    border: 1px solid var(--fio-forte); background: none; color: var(--tinta-2);
    padding: 6px 12px; cursor: pointer;
}
.compartilhar__botao:hover { border-color: var(--marca); color: var(--marca); text-decoration: none; }

/* ---------------------------------------------------------------- enquete -- */
.enquete { border: 1px solid var(--fio-forte); padding: 20px 22px 22px; }
.enquete__cabecalho { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.enquete__rotulo { font-family: var(--cond); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--marca); }
.enquete__pergunta { font-size: 20px; font-weight: 600; line-height: 1.22; margin-bottom: 6px; }
.enquete__descricao { font-size: 15px; color: var(--tinta-2); margin-bottom: 14px; }
.enquete__opcoes { display: flex; flex-direction: column; gap: 8px; }
.enquete__opcao {
    font-family: var(--serif); font-size: 16px; text-align: left;
    border: 1px solid var(--fio-forte); background: none; color: var(--tinta);
    padding: 10px 14px; cursor: pointer; width: 100%;
}
.enquete__opcao:hover { border-color: var(--marca); background: var(--espuma); }
.enquete__linha { position: relative; padding: 9px 14px; border: 1px solid var(--fio); overflow: hidden; }
.enquete__barra { position: absolute; inset: 0 auto 0 0; background: var(--espuma); z-index: 0; }
.enquete__linha > * { position: relative; z-index: 1; }
.enquete__resultado { display: flex; flex-direction: column; gap: 7px; }
.enquete__total { font-family: var(--cond); font-size: 13px; color: var(--tinta-3); margin-top: 12px; }

/* ------------------------------------------------------------ linha do tempo */
.linha-tempo { border-top: 2px solid var(--marca); padding-top: 16px; margin-top: 34px; }
.linha-tempo__cabecalho { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.linha-tempo__selo { font-family: var(--cond); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--marca); }
.linha-tempo__lista { list-style: none; margin: 0; padding: 0; }
.linha-tempo__item { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 14px;
    padding-bottom: 18px; position: relative; }
.linha-tempo__marco { width: 9px; height: 9px; border-radius: 50%; background: var(--fio-forte); margin-top: 7px; }
.linha-tempo__item--atual .linha-tempo__marco { background: var(--marca); }
.linha-tempo__data { font-family: var(--cond); font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); }
.linha-tempo__texto { font-size: 16.5px; font-weight: 600; line-height: 1.28; margin-top: 2px; }
.linha-tempo__resumo { font-size: 15px; color: var(--tinta-2); margin-top: 4px; }
.linha-tempo__voce { font-family: var(--cond); font-size: 12px; color: var(--marca); }
.linha-tempo__mais { font-family: var(--cond); font-size: 13.5px; font-weight: 600; }

/* ---------------------------------------------------------------- boletim -- */
.boletim { max-width: 720px; margin: 0 auto; padding-top: 30px; }
.boletim__cabecalho { border-bottom: 2px solid var(--tinta); padding-bottom: 18px; margin-bottom: 22px; }
.boletim__selo { font-family: var(--cond); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--marca); }
.boletim__tempo { font-family: var(--cond); font-size: 13.5px; color: var(--tinta-3); }
.boletim__abertura { font-size: 19px; line-height: 1.55; color: var(--tinta-2); margin-bottom: 24px; }
.boletim__itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.boletim__item { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 16px; }
.boletim__numero { font-family: var(--cond); font-size: 22px; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--marca); line-height: 1.1; }
.boletim__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.boletim__imagem { margin-bottom: 18px; }

/* --------------------------------------------------------------- colabore -- */
.colabore { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.campo-site { display: flex; flex-direction: column; gap: 6px; }
.campo-site > span { font-family: var(--cond); font-size: 13.5px; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-2); }
.campo-site small { font-family: var(--cond); font-size: 13px; color: var(--tinta-3); }
.campo-site input, .campo-site textarea, .campo-site select {
    font-family: var(--serif); font-size: 16.5px;
    border: 1px solid var(--fio-forte); background: var(--folha); color: var(--tinta);
    padding: 10px 12px; border-radius: 0; width: 100%;
}
.colabore__dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.colabore__local { display: flex; align-items: center; gap: 9px; font-family: var(--cond); font-size: 15px; }
.colabore__aviso { font-family: var(--cond); font-size: 13.5px; color: var(--tinta-3); line-height: 1.5; }
.colabore__resposta { padding: 14px 16px; font-family: var(--cond); font-size: 15.5px; border-left: 3px solid var(--fio-forte); }
.colabore__resposta--ok { border-left-color: var(--marca); background: var(--espuma); }
.colabore__resposta--erro { border-left-color: var(--nivel-urgente); color: var(--nivel-urgente); }

.botao {
    font-family: var(--cond); font-size: 15px; font-weight: 600;
    letter-spacing: 0.05em;
    background: var(--marca); color: #fff; border: 0;
    padding: 11px 22px; cursor: pointer; align-self: flex-start;
}
.botao:hover { text-decoration: none; opacity: 0.9; }

/* ----------------------------------------------------------------- abas --- */
.abas { display: flex; gap: 20px; border-bottom: 1px solid var(--fio); margin-bottom: 24px; }
.abas__item {
    font-family: var(--cond); font-size: 14.5px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3);
    padding-bottom: 9px; border-bottom: 2px solid transparent;
}
.abas__item--ativo { color: var(--marca); border-bottom-color: var(--marca); }

/* ------------------------------------------------------------- galeria etc. */
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mosaico__botao { border: 0; padding: 0; background: none; cursor: pointer; display: block; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 90; display: grid; place-items: center; }
.lightbox__figura { max-width: 92vw; max-height: 86vh; }
.lightbox__figura img { max-height: 80vh; width: auto; margin: 0 auto; }
.lightbox__figura figcaption { color: #fff; font-family: var(--cond); font-size: 14px; padding-top: 10px; text-align: center; }
.lightbox__fechar, .lightbox__nav {
    position: absolute; background: none; border: 0; color: #fff; font-size: 30px; cursor: pointer; padding: 12px;
}
.lightbox__fechar { top: 8px; right: 12px; }
.lightbox__nav--anterior { left: 8px; top: 50%; }
.lightbox__nav--proxima { right: 8px; top: 50%; }

.video-embed { position: relative; padding-top: 56.25%; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: 12px 0; border-bottom: 1px solid var(--fio); }

/* ------------------------------------------------------------- paginação -- */
.paginacao { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding-top: 34px; }
.paginacao__item {
    font-family: var(--cond); font-size: 14.5px; font-weight: 600;
    min-width: 38px; text-align: center;
    border: 1px solid var(--fio-forte); padding: 7px 10px; color: var(--tinta-2);
}
.paginacao__item--atual { background: var(--marca); border-color: var(--marca); color: #fff; }
.paginacao__reticencias { padding: 7px 4px; color: var(--tinta-3); }

/* ------------------------------------------------------------------ vazio -- */
.vazio {
    font-family: var(--cond); font-size: 16px; color: var(--tinta-2);
    border: 1px dashed var(--fio-forte); padding: 26px; text-align: center;
}

.erro { text-align: center; padding: 80px 0 60px; }
.erro__codigo { font-family: var(--cond); font-size: 76px; font-weight: 600; color: var(--marca); line-height: 1; }
.erro__mensagem { font-size: 19px; color: var(--tinta-2); margin: 12px 0 26px; }

/* ------------------------------------------------------------------ rodapé */
/* O rodapé fecha no mesmo marinho em que o cabeçalho abre — a página inteira
   fica entre duas margens da marca. Antes ele usava `--tinta`, que dá quase no
   mesmo tom mas não É a cor da marca, e o nome vinha em serifada, repetindo o
   desencontro que o cabeçalho tinha. */
.rodape { background: var(--marinho); color: #9FBBD6; margin-top: 50px; padding: 42px 0 26px; }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; }

.rodape__marca { display: inline-block; }
.rodape__marca img { max-height: 40px; width: auto; }
.rodape__marca--texto {
    font-family: var(--cond); font-size: 22px; font-weight: 800;
    letter-spacing: -0.04em; color: #fff;
}

.rodape__sobre { font-size: 14px; line-height: 1.6; margin-top: 12px; max-width: 38ch; }

.rodape__coluna h2, .rodape__coluna h3 {
    font-family: var(--cond); font-size: 11px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase; color: #fff; margin-bottom: 12px;
}
.rodape__coluna ul { list-style: none; margin: 0; padding: 0; }
.rodape__coluna a { display: block; font-family: var(--cond); font-size: 14px; padding: 4px 0; }
.rodape__coluna a:hover { color: #fff; }

.rodape__redes { display: flex; gap: 14px; margin-top: 16px; font-size: 13.5px; font-weight: 600; }
.rodape__redes a { color: var(--queda); }

.rodape__notificacoes {
    margin-top: 14px;
    font-family: var(--cond); font-size: 13.5px; font-weight: 600;
    background: none; border: 1px solid var(--fio-escuro); color: #C7DBEE;
    border-radius: var(--raio); padding: 8px 14px; cursor: pointer;
}
.rodape__notificacoes:hover { border-color: var(--queda); color: #fff; }

.rodape__base {
    margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--fio-escuro);
    font-family: var(--cond); font-size: 12px; color: #6F8CAB;
    display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}

/* =========================================================== transmissão ===
   A área de vídeo das sessões de câmara.

   Fundo marinho e não claro: vídeo pede moldura escura, e é o único bloco do
   site que se comporta como painel em vez de página de jornal. O contraste com
   o resto da capa é proposital — quem entra vendo isto entende em um segundo
   que a transmissão é o assunto.
   ========================================================================= */
/* A moldura não é mais um painel com cabeça e rodapé empilhados: é uma TELA.
   Identificação e botões passam por cima do próprio vídeo, como numa emissora,
   e a caixa toda ganha um fio claro de 1px — sem ele um vídeo escuro some
   dentro do marinho escuro do palco.

   A marcação não mudou: `.transmissao__palco` é o único filho em fluxo, então
   a altura da seção é a altura do vídeo, e cabeça e rodapé podem se sobrepor
   por posicionamento. Isso importa porque o JavaScript redesenha esta área
   procurando as mesmas classes — mexer no HTML custaria mais do que ganharia. */
.transmissao {
    position: relative;
    color: #fff;
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra-alta), 0 0 0 1px rgba(150, 195, 235, 0.16);
    background: #000;
}

/* A FAIXA DE CONTROLES do player, reservada.

   O vídeo é de terceiro — YouTube ou Facebook —, e a régua de tempo dele mora
   nos últimos quarenta e poucos pixels do quadro. É o controle mais usado de
   toda a página: é por ele que se volta o trecho que se perdeu.

   JÁ TENTAMOS reservar uma faixa e subir tudo o que desenhamos para cima dela.
   Ficou pior: o rodapé descolava da base do quadro e passava a flutuar no meio
   do vídeo, e a cortina ganhava um degrau visível. O custo de acabamento não
   pagou o ganho — a barra do player só aparece quando o cursor está em cima
   dela, e aí o próprio player escurece o que está atrás.

   O que ficou é o mínimo que resolve sem mexer na composição: quem desenhamos
   por cima do vídeo não RECEBE clique fora do que é botão (já era assim), e o
   alternador de municípios, que é o único elemento opaco que descia até a
   base, fica acima dela. O resto volta para onde estava. */
.transmissao { --faixa-controles: 48px; }

/* A cabeça cobre a tela inteira e distribui: o selo no alto (a informação de
   um relance — "está no ar?") e a identificação embaixo, logo acima dos
   botões. O véu escurece só as duas pontas, deixando o meio do quadro limpo. */
.transmissao__cabeca {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 18px 72px;
    pointer-events: none;
    background:
        linear-gradient(rgba(4, 12, 24, 0.72), transparent 22%),
        linear-gradient(transparent 46%, rgba(4, 12, 24, 0.86));
}
.transmissao__cabeca a { pointer-events: auto; }
.transmissao__cabeca .transmissao__identificacao { margin-top: auto; flex: none; width: 100%; }

/* O selo e as abas de canal ficam no alto, alinhados à esquerda. */
.transmissao__cabeca .transmissao__estado { align-self: flex-start; }

.transmissao__selo {
    font-family: var(--cond);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    padding: 5px 10px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.16);
    flex-shrink: 0;
}

/* O ponto que pulsa é o único movimento da página, e diz uma coisa só:
   isto está acontecendo agora. */
.transmissao__selo--ao_vivo {
    background: var(--no-ar);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.transmissao__selo--ao_vivo::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
}
@media (prefers-reduced-motion: no-preference) {
    .transmissao__selo--ao_vivo::before { animation: pulso-vivo 1.6s ease-in-out infinite; }
}
@keyframes pulso-vivo {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

.transmissao__selo--reconectando { background: var(--nivel-atencao); color: #fff; }
.transmissao__selo--encerrada    { background: rgba(255, 255, 255, 0.14); }

.transmissao__identificacao { flex: 1; min-width: 0; }

.transmissao__camara {
    font-family: var(--cond);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--queda);
    display: flex;
    align-items: center;
    gap: 7px;
}
.transmissao__camara::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 2px;
    background: var(--cor-camara, var(--queda));
}

.transmissao__titulo {
    font-family: var(--cond);
    font-size: clamp(17px, 1.7vw, 23px);
    font-weight: 800;
    letter-spacing: -0.024em;
    line-height: 1.16;
    margin-top: 4px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
    max-width: 34ch;
}

/* Fora da tela: a hora já está na barra de estado do cabeçalho e na grade da
   semana. Repeti-la sobre o vídeo só tira espaço do título. */
.transmissao__quando { display: none; }

/* ------------------------------------------------------------------ palco */
.palco__moldura {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(120% 90% at 22% 8%, rgba(79, 168, 232, 0.30), transparent 58%),
        linear-gradient(200deg, #14395F 0%, #0B1E37 52%, #071120 100%);
    max-height: 74vh;
    /* Com aspect-ratio, o max-height encolhe a largura junto. Centralizar faz
       as sobras virarem letterbox — que é o que se espera de vídeo — em vez de
       um bloco torto encostado à esquerda. */
    margin-inline: auto;
}
.transmissao--compacta .palco__moldura { max-height: 62vh; }

.palco__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.palco__aviso {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 40%, rgba(79, 168, 232, 0.16), transparent 62%),
        var(--marinho);
}

.palco__rotulo {
    font-family: var(--cond);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--queda);
}

.palco__relogio {
    font-family: var(--cond);
    font-size: clamp(38px, 8vw, 78px);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #fff;
}

.palco__texto {
    font-family: var(--cond);
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    max-width: 46ch;
}

/* O pulso da reconexão: devagar, porque a mensagem é "calma, estamos
   tentando" e não "corra". */
.palco__pulso {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 3px solid var(--nivel-atencao);
    border-top-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
    .palco__pulso { animation: girando 1.4s linear infinite; }
}
@keyframes girando { to { transform: rotate(360deg); } }

.palco__aviso--atencao .palco__rotulo { color: var(--nivel-atencao); }

/* ------------------------------------------------------------ alternador ==
   As abas de troca de município, sobre a borda direita do vídeo. Discretas em
   repouso e sempre visíveis, como o cliente pediu: encostadas na borda,
   mostrando só o ponto colorido e o nome; ao passar o mouse, avançam.
   ========================================================================= */
/* ------------------------------------------------------ canais da sessão

   A mesma sessão pode estar saindo pelo YouTube e pelo Facebook ao mesmo
   tempo. As abas de canal ficam ao lado do selo de estado, no alto: "AO VIVO
   pelo YouTube" é uma informação só, e quem chega no meio precisa dela junta.

   Embaixo, à esquerda, elas caíam em cima do título da sessão; no canto
   direito virariam irmãs do alternador de município, que responde a outra
   pergunta ("qual câmara", não "por onde").

   Aparecem só quando há dois canais no ar — com um só, oferecer escolha é
   inventar decisão para quem só quer assistir. */
.transmissao__estado {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    pointer-events: auto;
}

.canais {
    display: flex;
    gap: 6px;
    min-width: 0;
}

.canais__aba {
    font-family: var(--cond);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(8, 20, 36, 0.78);
    backdrop-filter: blur(3px);
    color: #C8DCF0;
    cursor: pointer;
    white-space: nowrap;
}
.canais__aba:hover { background: rgba(8, 20, 36, 0.95); color: #fff; }

/* O canal em uso é preenchido, e não só marcado: quem chega no meio precisa
   saber por onde está vendo sem comparar duas bordas. */
.canais__aba--ativa {
    background: #EAF2FA;
    border-color: #EAF2FA;
    color: var(--marinho);
}

@media (prefers-reduced-motion: no-preference) {
    .canais__aba { transition: background 140ms ease-out, color 140ms ease-out; }
}

/* O alternador encosta na borda direita, e nunca desce até a régua de tempo do
   player: `bottom` com a faixa reservada é o que o segura acima dela mesmo
   quando há municípios demais para a coluna. */
.alternador {
    position: absolute;
    right: 0;
    top: 74px;
    bottom: calc(var(--faixa-controles, 48px) + 8px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    z-index: 2;
    max-width: 62%;

    /* A coluna pode ter mais abas do que cabe: rolar é melhor que empurrar
       para cima do controle que acabamos de liberar. */
    overflow-y: auto;
    scrollbar-width: none;
    pointer-events: auto;
}
.alternador::-webkit-scrollbar { display: none; }

.alternador__aba {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px 9px 10px;
    background: rgba(8, 20, 36, 0.82);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-right: 0;
    border-radius: 4px 0 0 4px;
    color: #fff;
    font-family: var(--cond);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}
.alternador__aba:hover,
.alternador__aba:focus-visible {
    background: rgba(8, 20, 36, 0.95);
    text-decoration: none;
    padding-right: 16px;
}
@media (prefers-reduced-motion: no-preference) {
    .alternador__aba { transition: padding 140ms ease-out, background 140ms ease-out; }
}

.alternador__ponto {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--cor-camara, var(--queda));
    flex-shrink: 0;
}
.alternador__nome { overflow: hidden; text-overflow: ellipsis; }
.alternador__seta { opacity: 0.6; }

/* ----------------------------------------------------------------- rodapé
   Por cima do vídeo, colado na base, com um véu que escurece só o suficiente
   para o texto ficar legível sobre qualquer quadro.

   Colado na base de propósito: ele é a borda inferior do bloco, e flutuando
   acima dela vira uma tarja solta no meio do vídeo. Foi assim que ficou
   quando tentamos liberar a régua de tempo do player subindo-o — o remédio
   custou mais que a doença. */
.transmissao__rodape {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 56px 18px 16px;
    background: linear-gradient(transparent, rgba(4, 12, 24, 0.90));
    font-family: var(--cond);
    font-size: 13.5px;
    /* A caixa do rodapé cobre os 90px de baixo do vídeo, quase todos
       transparentes — e engolia o clique de tudo que estivesse ali, inclusive
       as abas de canal. Mesma solução já usada na cabeça: a moldura não
       recebe clique, só o que tem o que fazer com ele. */
    pointer-events: none;
}
.transmissao__rodape a,
.transmissao__rodape button { pointer-events: auto; }

/* A identificação da sessão vive aqui, antes dos botões. */
.transmissao__rodape::before { content: none; }
.transmissao__camara { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }

.botao-fora {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    padding: 9px 16px;
    border-radius: 3px;
    background: #fff;
    color: var(--marinho);
    text-decoration: none;
}
.botao-fora:hover { text-decoration: none; opacity: 0.9; }
.botao-fora--youtube  { background: #FF0000; color: #fff; }
.botao-fora--facebook { background: #1877F2; color: #fff; }

.transmissao__partes { color: rgba(255, 255, 255, 0.66); }

.transmissao__link {
    color: var(--queda);
    font-weight: 600;
    text-decoration: none;
}
.transmissao__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================== próximas sessões (sem live) */
.proximas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    background: var(--espuma);
    border-left: 3px solid var(--marca);
    border-radius: 0 4px 4px 0;
    padding: 14px 18px;
    margin: 24px 0 8px;
}

.proximas__rotulo {
    font-family: var(--cond);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--marca);
}

.proximas__lista {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    flex: 1; min-width: 0;
}

.proximas__item a {
    display: flex; align-items: baseline; gap: 8px;
    font-family: var(--cond); font-size: 14.5px; text-decoration: none;
}
.proximas__municipio { font-weight: 700; color: var(--tinta); }
.proximas__municipio::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px; border-radius: 2px;
    background: var(--cor-camara, var(--marca));
    margin-right: 7px;
}
.proximas__quando { color: var(--tinta-2); }

.proximas__todas {
    font-family: var(--cond); font-size: 13px; font-weight: 700;
    color: var(--marca); text-decoration: none; white-space: nowrap;
}

/* No celular a faixa deixa de ser uma linha e vira três.

   Em tela estreita as três partes continuavam disputando a MESMA linha: a
   lista tem `flex: 1` com base zero, então ela encolhia até quase nada, os
   municípios quebravam no meio do nome e o texto transbordava da caixa — e
   "Ver o arquivo", que não quebra, ficava impresso POR CIMA da data da segunda
   sessão. Transbordo de item flexível não empurra ninguém: ele atropela.

   Em grade de uma coluna cada parte tem a largura inteira e a sua própria
   linha, que é o que elas precisavam desde o começo: "Próximas sessões" é um
   rótulo, não uma coluna. */
@media (max-width: 720px) {
    .proximas {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        align-items: start;
        padding: 13px 15px;
    }

    /* Uma por linha: "São Domingos 02/10/2026 00:50" passa de 220px, e duas
       lado a lado em 390px voltariam a quebrar o nome do município. */
    .proximas__lista { gap: 7px; flex-direction: column; flex: none; }
    .proximas__item a { gap: 7px; }

    /* O link fecha a faixa, separado do que veio antes por um fio — sem ele,
       empilhado, vira só mais uma linha de lista. */
    .proximas__todas {
        padding-top: 9px;
        border-top: 1px solid var(--fio);
    }
}

/* ================================================== páginas das sessões === */
.fio--vivo { border-top-color: var(--no-ar); }
.fio--vivo h2 { color: var(--no-ar); }

.cartao-sessao {
    border: 1px solid var(--fio);
    border-top: 3px solid var(--cor-camara, var(--marca));
    border-radius: 3px;
    background: var(--folha);
    padding: 16px 18px 18px;
    display: flex; flex-direction: column; gap: 7px;
    min-width: 0;
}
.cartao-sessao--vivo { border-top-color: var(--no-ar); }

.cartao-sessao__selo {
    align-self: flex-start;
    font-family: var(--cond); font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.13em;
    background: var(--no-ar); color: #fff;
    padding: 4px 8px; border-radius: 2px;
}

.cartao-sessao__camara {
    font-family: var(--cond); font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--cor-camara, var(--marca));
}

.cartao-sessao__titulo {
    font-family: var(--cond); font-size: 17px; font-weight: 700;
    line-height: 1.25; letter-spacing: -0.01em;
}
.cartao-sessao__titulo a { text-decoration: none; }

.cartao-sessao__quando { font-family: var(--cond); font-size: 13px; color: var(--tinta-3); }

.filtro-camaras {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 18px 0 4px;
}
.filtro-camaras__item {
    font-family: var(--cond); font-size: 13.5px; font-weight: 600;
    border: 1px solid var(--fio-forte);
    border-radius: 3px; padding: 6px 13px;
    color: var(--tinta-2); text-decoration: none;
}
.filtro-camaras__item:hover { text-decoration: none; border-color: var(--cor-camara, var(--marca)); }
.filtro-camaras__item--ativo {
    background: var(--cor-camara, var(--marca));
    border-color: var(--cor-camara, var(--marca));
    color: #fff;
}

/* --------------------------------------------------- detalhe de uma sessão */
.sessao-detalhe {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 40px;
    padding-top: 10px;
}
.sessao-detalhe__tipo {
    font-family: var(--cond); font-size: 12px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--marca);
}
.sessao-detalhe__titulo {
    font-family: var(--cond);
    font-size: clamp(24px, 3.4vw, 36px);
    font-weight: 800; letter-spacing: -0.022em; line-height: 1.12;
    margin-top: 6px;
}
.sessao-detalhe__resumo { font-size: 18px; line-height: 1.55; color: var(--tinta-2); margin-top: 12px; }

.ficha-sessao {
    display: grid; gap: 12px;
    margin: 24px 0 0; padding-top: 18px;
    border-top: 1px solid var(--fio);
}
.ficha-sessao div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
.ficha-sessao dt {
    font-family: var(--cond); font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3);
    padding-top: 2px;
}
.ficha-sessao dd { margin: 0; font-size: 16px; }

/* ------------------------------------------------------------- as partes -- */
.partes__explicacao {
    font-size: 14.5px; line-height: 1.5; color: var(--tinta-2);
    background: var(--espuma); border-radius: 3px;
    padding: 12px 14px; margin-bottom: 16px;
}

.partes__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.parte { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; }
.parte--no-ar { --cor-parte: var(--no-ar); }

.parte__numero {
    font-family: var(--cond); font-size: 18px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cor-parte, var(--marca)); line-height: 1.2;
}
.parte__titulo { font-family: var(--cond); font-size: 15.5px; font-weight: 600; }
.parte__selo {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    background: var(--no-ar); color: #fff; padding: 2px 6px; border-radius: 2px; margin-left: 6px;
}
.parte__nota { font-size: 14px; color: var(--tinta-3); margin-top: 3px; }
.parte__link {
    font-family: var(--cond); font-size: 13px; font-weight: 600;
    color: var(--marca); text-decoration: none; display: inline-block; margin-top: 4px;
}
.parte__link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1000px) {
    .sessao-detalhe { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

@media (max-width: 720px) {
    .transmissao__cabeca { gap: 10px; }
    .transmissao__quando { width: 100%; }
    .alternador { max-width: 74%; }
    .alternador__aba { font-size: 12px; padding: 8px 10px 8px 9px; }
    .palco__moldura, .transmissao--compacta .palco__moldura { max-height: none; }
    .ficha-sessao div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ============================================================== as notas ==
   Texto curto da redação, para a capa não ficar quatro dias igual num portal
   que publica três reportagens por semana.

   O desenho é o que impede a nota de virar matéria curta: sem título, sem
   moldura, sem foto. Texto corrido numa coluna estreita, com um fio à
   esquerda e a hora ao lado — a forma de um caderno de redação, e não a de
   mais um cartão. Se ela parecesse chamada, a redação escreveria chamada.

   Também não é a faixa de utilidade pública: aquela tem nível e urgência e
   mora no cabeçalho. Esta é voz, e mora na coluna do que muda sozinho.
   ====================================================================== */
.notas__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--fio);
}

.nota {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0 12px 14px;
    position: relative;
}
.nota + .nota { border-top: 1px solid var(--fio); }

/* O ponto na régua: marca a linha do tempo sem virar bullet. */
.nota::before {
    content: "";
    position: absolute;
    left: -5px; top: 20px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fio-forte);
}
.nota--fixada::before { background: var(--marca); }

.nota__quando {
    font-family: var(--cond);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--tinta-3);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
    white-space: nowrap;
}
.nota--fixada .nota__quando { color: var(--marca); }

.nota__texto {
    font-size: 15px;
    line-height: 1.5;
    color: var(--tinta);
    text-wrap: pretty;
}

.nota__link {
    display: inline-block;
    margin-top: 5px;
    font-family: var(--cond);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--marca);
}

/* Na página /notas a coluna é a própria página: o texto pode respirar mais. */
.container--estreito .nota { grid-template-columns: 64px minmax(0, 1fr); padding-block: 15px; }
.container--estreito .nota__texto { font-size: 16.5px; }

/* ============================================================ responsivo == */
@media (max-width: 1000px) {
    .capa { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .plantao { border-left: 0; padding-left: 0; border-top: 1px solid var(--fio); padding-top: 20px; }
    .colunas { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .grade { --colunas: 2 !important; }
    .agenda { --colunas: 2; }
}

@media (max-width: 720px) {
    :root { --goteira: 18px; }
    body { font-size: 16.5px; }

    /* O menu solto sobre o cabeçalho marinho. Ancorado em `.cabecalho__topo`:
       a antiga `.barra__interna` sumiu quando o cabeçalho virou um bloco só, e
       sem âncora o painel caía no canto da janela. */
    .menu-botao { display: flex; }
    /* `nowrap` desfaz a quebra que o desktop usa para dar uma linha ao menu:
       aqui o menu já saiu da linha (virou painel), e deixar quebrar jogava a
       busca para uma segunda faixa, empurrando a capa inteira para baixo. */
    /* O `z-index` é o que faz o painel do menu cobrir a faixa de estado das
       sessões, logo abaixo. As duas eram nível 1 e empatavam — e no empate
       vence quem vem depois no HTML, que é a faixa. O menu abria por baixo
       dela, e os dois primeiros itens ficavam inalcançáveis no celular. */
    .cabecalho__topo { position: relative; z-index: 3; justify-content: space-between; flex-wrap: nowrap; }
    .menu {
        position: absolute; left: 0; right: 0; top: 100%;
        margin-left: 0;
        /* No celular o menu não é uma linha do cabeçalho, é um painel que
           abre: o respiro que ele ganha no desktop viraria um vão no topo. */
        padding-top: 0;
        background: var(--marinho-2);
        border-top: 1px solid var(--fio-escuro);
        border-bottom: 1px solid var(--fio-escuro);
        display: none; z-index: 60;
    }
    /* A classe é `aberto` porque é isso que o portal.js coloca. O seletor
       aqui era `[data-aberto]`, que o JavaScript nunca escreveu — ou seja,
       o menu do celular nunca abriu neste tema nem no `mural`. */
    .menu.aberto { display: block; }
    .menu__lista {
        flex-direction: column; gap: 0; padding: 0 var(--goteira);
        overflow: visible; mask-image: none;
    }
    .menu__lista a {
        padding: 13px 0; border-bottom: 1px solid var(--fio-escuro); border-left: 0;
        font-size: 13.5px;
    }
    .menu__lista a:last-child { border-bottom: 0; }

    .busca { order: 3; }

    .busca input { width: 108px; }
    .busca input:focus { width: 150px; }

    .grade { --colunas: 1 !important; gap: 26px; }
    .agenda { --colunas: 1; }
    .chamada--horizontal { grid-template-columns: minmax(0,1fr) 96px; }
    .capa__apoio { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .manchete__titulo { max-width: none; }
    .quadro__interna { flex-direction: column; align-items: stretch; }
    .quadro__fichas { flex-direction: column; }
    .materia__corpo { font-size: 17.5px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
    .barra, .quadro, .publicidade, .compartilhar, .rodape, .plantao { display: none; }
    body { background: #fff; color: #000; font-size: 12pt; }
}

/* ---- componentes da capa nova ----
   Este bloco fica no FIM do arquivo de propósito. Media query não tem
   especificidade extra: quem vence é quem vem depois. Com o responsivo no
   meio da folha, tudo que fosse escrito abaixo dele deixava de responder — foi
   assim que o palco nasceu quebrado no celular, com o vídeo espremido em 12px
   porque a grade de duas colunas continuava valendo em 390px de tela. */

@media (max-width: 1000px) {
    /* O painel da semana desce para baixo do vídeo: em tela estreita ele
       roubaria do palco a largura que o vídeo precisa. */
    .palco__grade { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .abre { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .abre__figura { order: -1; aspect-ratio: 16 / 9; }
    .duas { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .duas > aside { grid-column: 1; }
    .duas--so-apoio > aside { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (max-width: 720px) {
    .palco { padding: 18px 0 180px; }
    /* No celular a passagem encurta: a tela é muito mais alta que larga, e uma
       rampa de 230px comeria meia dobra só de esmaecimento. */
    .palco {
        --rampa: linear-gradient(180deg, #000 0, #000 calc(100% - 160px),
            rgba(0,0,0,.94) calc(100% - 138px), rgba(0,0,0,.83) calc(100% - 116px),
            rgba(0,0,0,.66) calc(100% - 94px), rgba(0,0,0,.46) calc(100% - 72px),
            rgba(0,0,0,.27) calc(100% - 50px), rgba(0,0,0,.11) calc(100% - 28px),
            transparent 100%);
    }
    .palco__clarao { height: 180px; }
    .corpo { margin-top: -36px; }
    .folha__int { padding: 24px 16px 28px; }

    /* A faixa de estado é uma linha só, e no celular não cabe: "no ar" +
       nome da câmara + próxima sessão + link do arquivo passavam de 500px de
       conteúdo em 390px de tela, e a página inteira ganhava rolagem lateral.
       A parte que sai é a que já está logo abaixo, em "A semana no plenário";
       o que fica é o que só existe aqui — o que está no ar agora. */
    .estado__depois { display: none; }

    .transmissao__titulo { font-size: 16px; max-width: none; }

    /* A régua de tempo do player é a MESMA altura em qualquer tela — ela não
       encolhe com o quadro. Num vídeo de 219px ela já é um quinto da imagem,
       então aqui a reserva é mais curta: o necessário para não cobri-la, e nem
       um pixel a mais de imagem perdida. */
    .transmissao { --faixa-controles: 40px; }

    /* No celular nada fica por cima do vídeo. Sobrepor funciona em tela
       larga, onde o quadro tem 500px de altura e sobra escuro nas pontas; em
       390px o vídeo tem 219px, o rodapé quebra em três linhas e a
       identificação da sessão acabava impressa por cima dele. Então a ordem
       vira a de sempre: quem está no ar em cima, o vídeo no meio, os botões
       embaixo. O quadro fica inteiro e cada texto tem o seu lugar. */
    .transmissao { display: flex; flex-direction: column; }

    /* Fora do vídeo, ela deixa de ser uma cortina e vira uma FICHA: o estado e
       o canal numa linha, a identificação embaixo, com um fio da cor do
       município à esquerda ligando as duas coisas. É o mesmo conteúdo da tela
       larga, arrumado para ser lido de cima para baixo em 390px — antes ele
       era só a versão sem fundo da sobreposição, e parecia o que era. */
    .transmissao__cabeca {
        position: static;
        order: -1;
        padding: 11px 0 13px 12px;
        gap: 9px;
        background: none;
        border-left: 3px solid var(--cor-camara, var(--queda));
    }
    .transmissao__cabeca .transmissao__identificacao { margin-top: 0; }

    /* O quadradinho de cor some: quem faz esse trabalho agora é o fio da
       esquerda, e dois sinais da mesma cor a 10px um do outro leem como erro. */
    .transmissao__camara { font-size: 11.5px; letter-spacing: 0.14em; }
    .transmissao__camara::before { display: none; }

    .transmissao__cabeca .transmissao__estado { gap: 8px; }

    /* O rodapé em linhas inteiras, e não no que sobrar.
       Os quatro itens somam bem mais que 390px, então eles quebravam onde
       calhava: o botão principal terminava espremido ao lado de meia frase, e
       o resto caía solto. Dando linha inteira ao que é ação e ao que é aviso,
       sobram os dois links para a última — cada linha diz uma coisa. */
    .transmissao__rodape .botao-fora {
        flex: 1 0 100%;
        justify-content: center;
    }
    .transmissao__partes {
        flex: 1 0 100%;
        font-size: 12px;
        opacity: 0.82;
    }
    .transmissao__rodape {
        position: static;
        padding: 12px 0 0;
        gap: 8px 12px;
        font-size: 12.5px;
        background: none;
    }
    .botao-fora { padding: 8px 13px; font-size: 12.5px; }

    .canais__aba { padding: 6px 11px; font-size: 12px; }

    /* Numa tela de 390px o vídeo tem 219px de altura: a coluna de abas na
       borda direita comeria metade da imagem. Vira fileira, logo ACIMA da
       régua de tempo do player — que é o único lugar da base que não pode ser
       coberto, e era exatamente onde ela estava. Continua sobreposta porque é
       filha da moldura, que é uma caixa de proporção fixa: tirá-la do lugar a
       jogaria para cima do vídeo. */
    .alternador {
        top: auto;
        bottom: calc(var(--faixa-controles, 40px) + 8px);
        left: 8px;
        right: 8px;
        flex-direction: row;
        max-width: none;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 7px;
    }
    .alternador__aba {
        border-right: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: var(--raio);
        flex: none;
        padding: 7px 11px;
        font-size: 12.5px;
    }

    .abre__titulo { font-size: clamp(26px, 8vw, 34px); }
    .duas--so-apoio > aside { grid-template-columns: 1fr; }
    /* Duas colunas de 54px e texto não cabem em 390px sem apertar a leitura:
       a hora sobe e vira etiqueta acima da nota. */
    .nota, .container--estreito .nota { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .nota__quando { padding-top: 0; }
    .chamada--horizontal { grid-template-columns: 96px minmax(0, 1fr); }
}