/* ============================================================
   Paraibão · Home
   Estilo brutalista editorial. Borda preta como estrutura,
   vermelho da marca só como marcador.
   ============================================================ */

:root {
  /* tema claro */
  --vermelho: #aa0920;
  --base:     #f0f0f0;   /* fundo geral */
  --branco:   #fcfcfc;   /* barra do topo */
  --preto:    #12100f;   /* tinta: texto e bordas */
  --escuro:   #12100f;   /* superficies escuras: rodape, menu, jogo */
  --creme:    #f5f1e8;   /* faixa do ticker */
  --cinza:    #6b6866;
  --foto:     #c7c2ba;

  /* fixas nos dois temas: sempre claras porque vivem sobre vermelho ou preto */
  --linha:    #12100f;   /* traco das divisorias, separado da tinta do texto */

  --sobre-vermelho: #f5f1e8;
  --sobre-escuro:   #f0f0f0;
  --linha-clara:    rgba(240, 240, 240, .3);

  --borda: 1px solid var(--linha);
  --borda-clara: 1px solid var(--linha-clara);
  --gap: 24px;
  --max: 1440px;
}

:root[data-tema="dark"] {
  --vermelho: #e5455c;   /* o #aa0920 nao tem contraste suficiente no escuro */
  --base:     #171613;
  --branco:   #1e1c19;
  --preto:    #ece8e1;
  --escuro:   #211e1a;
  --creme:    #221f1b;
  --cinza:    #a09a91;
  --foto:     #3a3733;
  /* linha clara sobre fundo escuro irradia e parece mais grossa;
     por isso ela recua de contraste em vez de mudar de espessura */
  --linha:    #423d37;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--base);
  color: var(--preto);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   Neue Helvena · Zippie Letras · subconjunto latino em woff2
   ============================================================ */
@font-face {
  font-family: "Neue Helvena";
  src: url("fonts/NeueHelvena-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Helvena";
  src: url("fonts/NeueHelvena-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- tipografia ---------- */
.display {
  font-family: "Neue Helvena", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
}
/* a manchete principal ganha o peso mais alto */
.dobra__titulo, .materia__titulo { font-weight: 800; }
.rotulo {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rotulo--vermelho { color: var(--vermelho); }
.resumo { color: var(--cinza); font-size: 12px; line-height: 1.5; margin: 0; }
.tempo  { color: var(--cinza); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ============================================================
   1 · Header
   ============================================================ */
.topbar {
  display: flex;
  align-items: stretch;
  min-height: 80px;
  background: var(--branco);
  border-top: var(--borda);
  border-bottom: var(--borda);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: var(--base);
  border-right: var(--borda);
}
.topbar__cell--logo {
  background: var(--vermelho);
  flex: 0 0 auto;
}
.topbar__cell--logo img { width: 166px; height: 36px; }

/* o vão entre o logo e os botões, sem borda própria */
.topbar__espaco { flex: 1 1 auto; background: var(--base); border-right: var(--borda); }

.topbar__cell--icon { flex: 0 0 auto; padding: 0 28px; gap: 14px; }
.topbar__cell:last-child { border-right: 0; }

.topbar__botao {
  font: inherit;
  color: var(--preto);
  border-top: 0; border-bottom: 0; border-left: 0;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: background .22s ease, color .22s ease;
}

/* O botão cresce revelando o rótulo. Animo a largura do rótulo, e não a do
   botão, porque assim ele se ajusta sozinho ao texto e não depende de número
   mágico. O ícone fica ancorado à direita e o texto entra por trás dele. */
.topbar__rotulo {
  display: block;
  max-width: 0;
  margin-right: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(10px);
  transition:
    max-width   .42s cubic-bezier(.33, 1, .68, 1),
    margin-right .42s cubic-bezier(.33, 1, .68, 1),
    transform   .42s cubic-bezier(.33, 1, .68, 1),
    opacity     .26s ease .06s;
}
.topbar__botao:hover .topbar__rotulo,
.topbar__botao:focus-visible .topbar__rotulo {
  max-width: 160px;
  margin-right: 12px;
  opacity: 1;
  transform: none;
}
/* com o menu aberto o rótulo fica sempre visível, senão o "Fechar menu" some */
.menu-aberto #btn-menu .topbar__rotulo {
  max-width: 160px;
  margin-right: 12px;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .topbar__rotulo { transition: opacity .2s ease; }
}
.topbar__botao:hover { background: var(--vermelho); color: var(--sobre-vermelho); }
.topbar__botao:hover .burger span { background: currentColor; }

/* hambúrguer que vira X */
.burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 29px; }
.burger span {
  display: block; width: 34px; height: 5px; background: currentColor;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.menu-aberto .burger span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.menu-aberto .burger span:nth-child(2) { opacity: 0; }
.menu-aberto .burger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ============================================================
   Menu expandido
   ============================================================ */
.mega {
  position: sticky;
  top: 80px;
  z-index: 19;
  display: grid;
  grid-template-rows: 0fr;
  background: var(--escuro);
  color: var(--sobre-escuro);
  transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1);
}
.mega.is-open { grid-template-rows: 1fr; border-bottom: var(--borda); }
.mega__inner { overflow: hidden; min-height: 0; }

.mega__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 340px);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .3s ease .1s, transform .3s ease .1s;
}
.mega.is-open .mega__grade { opacity: 1; transform: none; }

.mega__col { padding: 32px 28px 36px; display: flex; flex-direction: column; gap: 4px; }
.mega__col + .mega__col,
.mega__destaque { border-left: 1px solid rgba(240,240,240,.28); }
.mega__col > .rotulo { margin-bottom: 14px; }

.mega__col a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(240,240,240,.22);
  transition: color .16s ease, padding-left .16s ease;
}
.mega__col a:last-of-type { border-bottom: 0; }
.mega__col a .display { font-size: 20px; }
.mega__col a em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
}
.mega__col a:hover { color: #ff5a70; padding-left: 8px; }

.mega__sociais { display: flex; gap: 10px; margin-top: 22px; }
.mega__sociais a { padding: 0; border: 0; }
.mega__sociais a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(240,240,240,.5);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.mega__sociais a:hover { background: var(--vermelho); border-color: var(--vermelho); color: var(--base); padding-left: 0; }
.mega__sociais svg { width: 19px; height: 19px; }

.mega__destaque { padding: 32px 28px 36px; display: flex; flex-direction: column; gap: 14px; }
.mega__badge { align-self: flex-start; padding: 5px 10px; background: var(--vermelho); color: var(--sobre-vermelho); }
.mega__destaque h3 { font-size: 19px; }
.mega__destaque img { width: 100%; height: 130px; object-fit: cover; }
.mega__botao {
  align-self: flex-start;
  margin-top: auto;
  padding: 11px 18px;
  background: var(--sobre-escuro);
  color: var(--escuro);
  transition: background .16s ease, color .16s ease;
}
.mega__botao:hover { background: var(--vermelho); color: var(--sobre-vermelho); }

/* ============================================================
   Corpo
   ============================================================ */
.corpo {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.bloco {
  background: var(--base);
  border: var(--borda);
}

/* ---------- ticker AGORA ---------- */
.agora {
  display: flex;
  align-items: stretch;
  background: var(--creme);
  border: var(--borda);
  overflow: hidden;
}
.agora__selo {
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: var(--vermelho);
  color: var(--sobre-vermelho);
  flex: 0 0 auto;
  z-index: 2;
}

/* a pista corta, os dois trilhos rodam colados criando o laço sem emenda */
.agora__pista { display: flex; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.agora__trilho {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 10px 14px 20px;
  flex: 0 0 auto;
  white-space: nowrap;
  animation: agora-correr 52s linear infinite;
}
.agora:hover .agora__trilho { animation-play-state: paused; }

@keyframes agora-correr { to { transform: translateX(-100%); } }

.agora__trilho a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .045em;
  transition: color .16s ease;
}
.agora__trilho a:hover { color: var(--vermelho); }
.agora__trilho time {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--vermelho);
}
.agora__ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--vermelho); flex: 0 0 auto; }

/* quem pede menos movimento vê a faixa parada e rolável na mão */
@media (prefers-reduced-motion: reduce) {
  .agora__trilho { animation: none; }
  .agora__pista { overflow-x: auto; }
  .agora__trilho[aria-hidden="true"] { display: none; }
}

/* ---------- faixa de seção ---------- */
.faixa-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  background: var(--vermelho);
  color: var(--sobre-vermelho);
}
.faixa-secao h2 { font-size: 23px; }
.faixa-secao a { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* ============================================================
   3 · Dobra
   ============================================================ */
.dobra { display: grid; grid-template-columns: minmax(0, 900fr) minmax(0, 492fr); }
.dobra__principal {
  padding: 32px 36px 0;
  border-right: var(--borda);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dobra__meta { display: flex; align-items: center; gap: 12px; }
.chip {
  display: inline-flex;
  padding: 6px 12px;
  background: var(--vermelho);
  color: var(--sobre-vermelho);
}
.dobra__titulo { font-size: 46px; }
.dobra__foto { width: 100%; height: 200px; object-fit: cover; background: var(--foto); }

/* os quatro itens dividem a altura da coluna, então não sobra vão morto embaixo */
.dobra__chamadas { display: flex; flex-direction: column; }
.chamada {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  min-height: 0;
}
.chamada + .chamada { border-top: var(--borda); }
/* foto larga o bastante pra se enxergar o que ela mostra, sem chegar a metade do card */
.chamada img {
  flex: 0 0 42%;
  width: 42%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  background: var(--foto);
}
.chamada__texto { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.chamada h3 { font-size: 16px; }

/* ============================================================
   Grade de 4 colunas (Em alta / Destaque da semana)
   ============================================================ */
.grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-4 > article { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.grade-4 > article + article { border-left: var(--borda); }
.grade-4 img { width: 100%; height: 176px; object-fit: cover; background: var(--foto); }
.grade-4 h3 { font-size: 19px; }

/* ============================================================
   5 · Últimas notícias
   ============================================================ */
.ultimas__destaque { display: grid; grid-template-columns: minmax(0, 694fr) minmax(0, 696fr); }
.ultimas__foto { padding: 28px; }
.ultimas__foto img { width: 100%; height: 356px; object-fit: cover; background: var(--foto); }
.ultimas__texto {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.ultimas__texto h3 { font-size: 31px; }
.ultimas__texto .resumo { font-size: 14px; }

/* a fileira de baixo das Últimas usa o mesmo card da grade, só com régua no topo */
.grade-4--continuacao { border-top: var(--borda); }

/* ============================================================
   6 · Próximo jogo
   ============================================================ */
.jogo { background: var(--escuro); color: var(--sobre-escuro); }
.jogo .faixa-secao { border-bottom: 1px solid var(--vermelho); }
.jogo__arena {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 48px 24px;
}
.jogo__confronto { display: flex; align-items: center; gap: 60px; }
.jogo__time { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.jogo__escudo { width: 104px; height: 104px; border-radius: 50%; background: #9e9c99; }
.jogo__time span { font-size: 18px; }
.jogo__vs { font-size: 46px; color: var(--vermelho); }
.jogo__quando {
  padding: 9px 20px;
  background: var(--vermelho);
  color: var(--sobre-vermelho);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.jogo__local { font-size: 22px; }

/* ============================================================
   7 · Vídeos + Tabela
   ============================================================ */
.duplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.duplo__lado + .duplo__lado { border-left: var(--borda); }

.video { display: flex; gap: 18px; padding: 22px 28px; }
.video + .video { border-top: var(--borda); }
.video__thumb { position: relative; flex: 0 0 auto; width: 170px; height: 108px; background: var(--foto); }
.video__thumb::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 22px solid var(--preto);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.video__texto { display: flex; flex-direction: column; gap: 8px; }
.video h3 { font-size: 16px; }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: 13px 0; text-align: center; }
.tabela th:first-child, .tabela td:first-child { text-align: left; padding-left: 28px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 28px; }
.tabela thead th {
  background: var(--vermelho);
  color: var(--sobre-vermelho);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 12px;
  padding-bottom: 12px;
}
.tabela tbody tr + tr td { border-top: var(--borda); }
.tabela td { font-size: 13px; font-weight: 500; }
.tabela__time { display: flex; align-items: center; gap: 12px; }
.tabela__escudo { width: 22px; height: 22px; border-radius: 50%; background: #9e9c99; flex: 0 0 auto; }

/* ============================================================
   9 · Rodapé
   ============================================================ */
/* de ponta a ponta, igual à navbar: sem margem lateral e sem borda externa */
/* faixa vermelha cheia marcando o comeco do rodape */
.rodape { background: var(--escuro); color: var(--sobre-escuro); border-top: 10px solid var(--vermelho); }
.rodape__topo { display: grid; grid-template-columns: 460px repeat(3, minmax(0, 1fr)); }
.rodape__marca { padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; border-right: var(--borda-clara); }
.rodape__marca img { width: 166px; height: 36px; }
.rodape__marca p { margin: 0; font-size: 13px; opacity: .75; }
.rodape__sociais { display: flex; gap: 10px; }
.rodape__sociais a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(240,240,240,.5);
  opacity: 1;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.rodape__sociais a:hover { background: var(--vermelho); border-color: var(--vermelho); }
.rodape__sociais svg { width: 18px; height: 18px; }
.rodape__col { padding: 36px 28px; display: flex; flex-direction: column; gap: 12px; }
.rodape__col + .rodape__col { border-left: var(--borda-clara); }
.rodape__col a { font-size: 13px; opacity: .8; }
.rodape__legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 32px;
  border-top: var(--borda-clara);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: .6;
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 1100px) {
  .dobra, .ultimas__destaque, .duplo { grid-template-columns: minmax(0, 1fr); }
  .dobra__principal { border-right: 0; border-bottom: var(--borda); }
  .duplo__lado + .duplo__lado { border-left: 0; border-top: var(--borda); }
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-4 > article:nth-child(3) { border-left: 0; }
  .grade-4 > article:nth-child(n+3) { border-top: var(--borda); }
  .rodape__topo { grid-template-columns: minmax(0, 1fr); }
  .rodape__marca { border-right: 0; border-bottom: var(--borda-clara); }
  .rodape__col + .rodape__col { border-left: 0; border-top: var(--borda-clara); }
}

@media (max-width: 1100px) {
  .mega__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega__col:nth-child(3) { border-left: 0; }
  .mega__col:nth-child(n+3), .mega__destaque { border-top: 1px solid rgba(240,240,240,.28); }
}

@media (max-width: 760px) {
  .topbar__cell--logo { flex: 1 1 auto; justify-content: flex-start; }
  .topbar__espaco { display: none; }
  .topbar__cell--icon { padding: 0 18px; }
  .topbar__rotulo { display: none; }
  .mega__grade { grid-template-columns: minmax(0, 1fr); }
  .mega__col + .mega__col, .mega__destaque { border-left: 0; border-top: 1px solid rgba(240,240,240,.28); }
  .dobra__titulo { font-size: 30px; }
  .ultimas__texto h3 { font-size: 23px; }
  .grade-4 { grid-template-columns: minmax(0, 1fr); }
  .grade-4 > article + article { border-left: 0; border-top: var(--borda); }
  .jogo__confronto { gap: 24px; }
  .jogo__vs { font-size: 32px; }
}

/* ============================================================
   Página de matéria
   ============================================================ */
.trilha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--creme);
  border: var(--borda);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.trilha span { opacity: .45; }
.trilha a:last-child { color: var(--vermelho); }

/* cabeçalho e foto lado a lado; o texto corrido vem depois, embaixo */
.materia__topo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.materia__cabecalho {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: var(--borda);
}
.materia__cabecalho .assinatura { margin-top: auto; }
.materia__titulo { font-size: 38px; }
.materia__olho {
  margin: 0;
  max-width: 62ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--cinza);
}
.assinatura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 20px;
  border-top: var(--borda);
}
.assinatura__quem { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; }
.assinatura__quem b { font-weight: 700; }
.assinatura__quem span { opacity: .5; }
.compartilhar { display: flex; align-items: center; gap: 8px; }
.compartilhar span { margin-right: 4px; }
.compartilhar a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: var(--borda);
  transition: background .16s ease, color .16s ease;
}
.compartilhar a:hover { background: var(--vermelho); color: var(--sobre-vermelho); border-color: var(--vermelho); }

.materia__figura { margin: 0; display: flex; flex-direction: column; }
.materia__figura img { flex: 1 1 auto; width: 100%; min-height: 420px; object-fit: cover; background: var(--foto); }
.materia__figura figcaption {
  padding: 14px 24px 16px;
  border-top: var(--borda);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--cinza);
}

.materia__corpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; border-top: var(--borda); }

.texto { padding: 40px 44px 44px; }
.texto > * { max-width: 68ch; }
.texto p { margin: 0 0 22px; font-size: 17px; line-height: 1.72; }
.texto p:last-child { margin-bottom: 0; }
.texto h2 { font-size: 25px; margin: 34px 0 16px; }
.texto blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--vermelho);
  font-size: 20px;
  line-height: 1.5;
}
.texto blockquote cite { display: block; margin-top: 10px; font-size: 11px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; padding-top: 26px; border-top: var(--borda); max-width: none; }
.tags a { padding: 7px 12px; border: var(--borda); font-size: 11px; font-weight: 500; }
.tags a:hover { background: var(--escuro); color: var(--sobre-escuro); }

.lateral { border-left: var(--borda); }
.lateral__titulo {
  padding: 14px 22px;
  background: var(--vermelho);
  color: var(--sobre-vermelho);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lateral__item { display: flex; gap: 14px; padding: 18px 22px; }
.lateral__item + .lateral__item { border-top: var(--borda); }
.lateral__item img { width: 66px; height: 58px; object-fit: cover; background: var(--foto); flex: 0 0 auto; }
.lateral__item h3 { font-size: 13px; }
.lateral__item .texto-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lateral__numero { font-size: 22px; color: var(--vermelho); flex: 0 0 auto; }

@media (max-width: 1100px) {
  .materia__topo { grid-template-columns: minmax(0, 1fr); }
  .materia__cabecalho { border-right: 0; border-bottom: var(--borda); }
  .materia__corpo { grid-template-columns: minmax(0, 1fr); }
  .lateral { border-left: 0; border-top: var(--borda); }
}
@media (max-width: 760px) {
  .materia__cabecalho { padding: 28px 20px; }
  .materia__titulo { font-size: 27px; }
  .materia__figura img { min-height: 240px; }
  .materia__olho { font-size: 16px; }
  .texto { padding: 28px 20px; }
  .materia__figura img { height: 240px; }
  .materia__figura figcaption { padding: 12px 20px 16px; }
}

/* manchete clicável: o link ocupa o bloco todo do título */
h1 .display, h1 > a, h3 > a { display: block; transition: color .16s ease; }
h3 > a:hover, h1 > a:hover { color: var(--vermelho); }
.chamada:hover img, .grade-4 article:hover img,
.lateral__item:hover img { opacity: .82; }


/* ============================================================
   Interruptor de tema
   ============================================================ */
.tema__icone { display: none; }
:root:not([data-tema="dark"]) .tema__icone--lua { display: block; }
:root[data-tema="dark"] .tema__icone--sol { display: block; }

html { color-scheme: light; }
:root[data-tema="dark"] { color-scheme: dark; }

/* no escuro a foto pede um leve recuo de brilho pra nao estourar */
:root[data-tema="dark"] img:not([src$=".svg"]) { filter: brightness(.92); }

/* ============================================================
   Hover do card: o conteúdo inteiro desliza junto, não só o título.
   O deslocamento vai nos filhos diretos, e não no card, porque
   mover o card empurraria também a borda e o fundo dele.
   ============================================================ */
.dobra__principal > *,
.chamada > *,
.grade-4 article > *,
.mega__destaque > *,
.lateral__item > *,
.video > * {
  /* as duas propriedades na mesma declaração: transition não soma entre regras,
     a última vence inteira e zeraria a animação da outra */
  transition: transform .34s cubic-bezier(.33, 1, .68, 1), opacity .34s ease;
}
.dobra__principal:hover > *,
.chamada:hover > *,
.grade-4 article:hover > *,
.mega__destaque:hover > *,
.lateral__item:hover > *,
.video:hover > * {
  transform: translateX(5px);
}

/* a cor do título continua reagindo, sem deslocamento próprio pra não somar 16px */
.dobra__principal h1 > a,
.chamada h3 > a,
.grade-4 article h3 > a,
.mega__destaque h3 > a,
.lateral__item h3,
.video h3 { display: block; transition: color .26s ease; }

.dobra__principal:hover h1 > a,
.chamada:hover h3 > a,
.grade-4 article:hover h3 > a,
.mega__destaque:hover h3 > a,
.lateral__item:hover h3,
.video:hover h3 { color: var(--vermelho); }

@media (prefers-reduced-motion: reduce) {
  .dobra__principal:hover > *, .chamada:hover > *, .grade-4 article:hover > *,
  .mega__destaque:hover > *,
  .lateral__item:hover > *, .video:hover > * { transform: none; }
}
}


/* ---------- destaque da home com olho e assinatura ---------- */
.dobra__olho {
  margin: 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--cinza);
}
.dobra__principal .assinatura { margin-top: 4px; padding-bottom: 24px; }