/* ===========================================================================
   Conectando Notícias
   Folha de estilo única. Sem framework, sem reset de terceiro, sem build.

   Organização:
     1. Fundamentos      variáveis, fontes, reset
     2. Tipografia
     3. Estrutura        container, grade principal
     4. Cabeçalho        barra utilitária, topo, editorias, plantão
     5. Componentes      manchete, cartões, listas, sidebar
     6. Matéria
     7. Blocos           Copa, clima, newsletter
     8. Rodapé
     9. Utilitários e estados
    10. Responsivo
    11. Impressão
   ======================================================================== */

/* ---------------------------------------------------------------------------
   1. Fundamentos
   ------------------------------------------------------------------------ */

/* Só o Montserrat é hospedado aqui, e apenas no recorte latino — 38 KB para
   toda a tipografia de manchete. O texto corrido usa a fonte do sistema:
   carrega instantaneamente, já está no aparelho e, em português, a diferença
   visual para a Roboto é mínima. São ~120 KB e duas conexões externas a menos.

   swap: o título aparece na fonte do sistema enquanto a Montserrat carrega,
   em vez de o leitor encarar espaço em branco. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../fontes/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  /* Identidade */
  --azul-naval:  #0a192f;
  --azul-corp:   #1a365d;
  --azul-claro:  #2c5282;
  --ouro:        #d4af37;
  --ouro-claro:  #f3e5ab;

  /* Superfícies e texto */
  --branco:      #ffffff;
  --papel:       #f7f8fa;
  --papel-fundo: #eef1f5;
  --linha:       #e2e6ec;
  --linha-suave: #eef0f4;
  --texto:       #16202e;
  --texto-medio: #4a5768;
  --texto-suave: #6b7787;

  /* Cor da editoria. Cada seção sobrescreve com a sua; este é o padrão. */
  --cor-editoria: var(--azul-corp);

  /* Tipografia */
  --fonte-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-texto:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fonte-leitura: Georgia, 'Times New Roman', serif;

  /* Ritmo vertical e medidas */
  --container: 1220px;
  --gap:       clamp(1rem, 2.2vw, 1.75rem);
  --raio:      10px;
  --raio-p:    6px;

  --sombra:      0 1px 3px rgb(10 25 47 / 8%), 0 6px 18px rgb(10 25 47 / 6%);
  --sombra-alta: 0 4px 12px rgb(10 25 47 / 12%), 0 16px 40px rgb(10 25 47 / 10%);

  --transicao: 180ms cubic-bezier(.4, 0, .2, 1);
}

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

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

body {
  margin: 0;
  background: var(--papel-fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.6;
  /* Sublinhado que passa por baixo das descidas das letras em vez de cortá-las. */
  text-underline-position: under;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, svg { max-width: 100%; }
img, video { height: auto; }
picture { display: block; }

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

/* Foco visível é requisito de acessibilidade, mas o anel padrão some sobre
   fundo escuro. Estes dois tons cobrem os dois casos. */
:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 2px;
  border-radius: 2px;
}

.tema-escuro :focus-visible,
.topo :focus-visible,
.rodape :focus-visible { outline-color: var(--ouro-claro); }

/* Conteúdo lido por leitor de tela, invisível na tela. */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Primeiro item da página: leva direto ao conteúdo, pulando o menu. */
.pular-para-conteudo {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ouro);
  color: var(--azul-naval);
  padding: 12px 24px;
  font-weight: 700;
  border-radius: 0 0 var(--raio-p) var(--raio-p);
  transition: transform var(--transicao);
}
.pular-para-conteudo:focus { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------------
   2. Tipografia
   ------------------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
  /* Evita que a última linha do título fique com uma palavra sozinha. */
  text-wrap: balance;
}

/* clamp() no lugar de media query: o tamanho acompanha a largura da tela de
   forma contínua, sem saltos em pontos arbitrários. */
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem); }
h3 { font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); }

p { margin: 0 0 1em; }

/* --- Chapéu ---------------------------------------------------------------
   A palavra curta acima do título, na cor da editoria. É o elemento que
   organiza a leitura de uma capa de portal: diz do que se trata antes de o
   leitor processar o título inteiro. */
.chapeu {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cor-editoria);
  margin-bottom: .4rem;
}
.chapeu--claro { color: var(--ouro); }

/* --- Metadados (data, autor, tempo de leitura) --------------------------- */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--texto-suave);
}
.meta > * + *::before {
  content: '·';
  margin-right: .5rem;
  color: var(--linha);
}

/* ---------------------------------------------------------------------------
   3. Estrutura
   ------------------------------------------------------------------------ */

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

/* A sidebar acompanha a rolagem: em matéria longa, os blocos de mais lidas e
   newsletter continuam à vista em vez de sumirem no topo. */
.sidebar {
  position: sticky;
  top: calc(var(--altura-topo, 78px) + 1rem);
  display: grid;
  gap: 1.25rem;
}

.secao { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* --- Título de seção ----------------------------------------------------- */
.secao-titulo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.secao-titulo h2 {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  white-space: nowrap;
}
/* Traço vertical na cor da editoria, à esquerda do título. */
.secao-titulo h2::before {
  content: '';
  width: 5px;
  height: 1.15em;
  border-radius: 3px;
  background: var(--cor-editoria);
}
.secao-titulo .linha {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--linha), transparent);
}
.secao-titulo .ver-mais {
  font-size: .8rem;
  font-weight: 600;
  color: var(--cor-editoria);
  white-space: nowrap;
  transition: opacity var(--transicao);
}
.secao-titulo .ver-mais:hover { opacity: .7; }

/* ---------------------------------------------------------------------------
   4. Cabeçalho
   ------------------------------------------------------------------------ */

.utilbar {
  background: var(--azul-naval);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  color: #9fb0c7;
  font-size: .78rem;
}
.utilbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 36px;
}
.utilbar nav { display: flex; gap: 1.1rem; }
.utilbar a { transition: color var(--transicao); }
.utilbar a:hover { color: var(--ouro-claro); }
.utilbar .entrar { color: var(--ouro); font-weight: 600; }

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, #0d1f3a, var(--azul-naval));
  box-shadow: 0 2px 12px rgb(10 25 47 / 35%);
}
.topo .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 78px;
}
.marca { display: flex; align-items: center; flex-shrink: 0; }
.marca img {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 40%));
}

/* --- Busca --------------------------------------------------------------- */
.busca {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
}
.busca input {
  width: clamp(160px, 20vw, 240px);
  height: 38px;
  padding: 0 42px 0 16px;
  border: 1px solid rgb(212 175 55 / 40%);
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
  color: #fff;
  font: inherit;
  font-size: .875rem;
  transition: width var(--transicao), border-color var(--transicao), background var(--transicao);
}
.busca input::placeholder { color: #9fb0c7; }
.busca input:focus {
  width: clamp(200px, 26vw, 300px);
  border-color: var(--ouro);
  background: rgb(255 255 255 / 10%);
}
.busca button {
  position: absolute;
  right: 5px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--ouro);
  color: var(--azul-naval);
  cursor: pointer;
  transition: background var(--transicao);
}
.busca button:hover { background: var(--ouro-claro); }
.busca svg { width: 14px; height: 14px; }

/* --- Menu de editorias --------------------------------------------------- */
.editorias {
  background: var(--azul-corp);
  border-top: 3px solid var(--ouro);
}
.editorias ul {
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Em telas estreitas o menu rola na horizontal em vez de quebrar linha —
     comportamento que o leitor de portal já conhece. */
  overflow-x: auto;
  scrollbar-width: none;
}
.editorias ul::-webkit-scrollbar { display: none; }
.editorias a {
  position: relative;
  display: block;
  padding: .8rem 1rem;
  font-family: var(--fonte-titulo);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #cfd9e6;
  white-space: nowrap;
  transition: color var(--transicao);
}
.editorias a::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 3px;
  background: var(--ouro);
  transform: scaleX(0);
  transition: transform var(--transicao);
}
.editorias a:hover { color: #fff; }
.editorias a:hover::after,
.editorias .ativo::after { transform: scaleX(1); }
.editorias .ativo { color: #fff; }

/* --- Faixa de plantão ---------------------------------------------------- */
.plantao {
  background: #b5283b;
  color: #fff;
  overflow: hidden;
}
.plantao .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 42px;
}
.plantao .selo {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  font-family: var(--fonte-titulo);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.plantao .pulso {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: pulsar 1.6s ease-in-out infinite;
}
@keyframes pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* Sem overflow:hidden aqui, a lista em movimento passa por cima do selo
   "Plantão" à esquerda em vez de desaparecer sob ele. */
.ticker {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* Esmaece o texto ao entrar e sair, em vez de cortá-lo em seco. */
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 96%, transparent);
}

.plantao-lista {
  display: flex;
  gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  /* 100s para as 10 manchetes: a duração é fixa, mas quem manda na
     velocidade de leitura é a largura total da lista. Com 10 itens (~6.900px
     de percurso) isso dá ~70px/s, que dá para ler. As mesmas 40s de antes
     davam 173px/s — legível com 3 manchetes, borrão com 10. */
  animation: correr 100s linear infinite;
}
.plantao:hover .plantao-lista,
.plantao:focus-within .plantao-lista { animation-play-state: paused; }
.plantao-lista li { font-size: .85rem; }
.plantao-lista a:hover { text-decoration: underline; }
@keyframes correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------------
   5. Componentes de listagem
   ------------------------------------------------------------------------ */

/* --- Banner de campanha --------------------------------------------------- */

.banner-campanha {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.banner-campanha picture,
.banner-campanha img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio);
}

/* A arte costuma ser clara e o fundo do portal também: sem a borda, o banner
   flutua sem limite definido. A sombra é a mesma dos cartões. */
.banner-campanha img {
  box-shadow: var(--sombra);
}

.banner-campanha a {
  display: block;
  border-radius: var(--raio);
}

.banner-campanha a:focus-visible { outline-offset: 3px; }

/* --- Manchete ------------------------------------------------------------ */
.manchete {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--gap);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.manchete-principal {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--azul-naval);
  box-shadow: var(--sombra);
  min-height: 440px;
  isolation: isolate;
}
.manchete-principal picture,
.manchete-principal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2, 0, .2, 1);
}
.manchete-principal:hover img { transform: scale(1.04); }
/* Degradê que garante contraste do texto sobre qualquer foto — inclusive
   uma foto clara, onde texto branco puro seria ilegível. */
.manchete-principal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 25 47 / 10%) 30%, rgb(10 25 47 / 94%));
}
.manchete-principal .conteudo {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  color: #fff;
}
.manchete-principal h2 {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  margin-bottom: .5rem;
  text-shadow: 0 2px 12px rgb(0 0 0 / 50%);
  transition: color var(--transicao);
}
.manchete-principal:hover h2 { color: var(--ouro-claro); }
.manchete-principal .linha-fina {
  color: #d7dfeb;
  font-size: .95rem;
  max-width: 60ch;
  margin: 0;
}

.manchete-secundarias {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--gap);
}

/* --- Cartão sobre foto --------------------------------------------------- */
.cartao-foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--azul-naval);
  box-shadow: var(--sombra);
  min-height: 210px;
  isolation: isolate;
}
.cartao-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2, 0, .2, 1);
}
.cartao-foto:hover img { transform: scale(1.05); }
.cartao-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 25 47 / 5%) 35%, rgb(10 25 47 / 92%));
}
.cartao-foto .conteudo {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 1.1rem;
  color: #fff;
}
.cartao-foto h3 {
  font-size: 1.05rem;
  text-shadow: 0 2px 10px rgb(0 0 0 / 50%);
  transition: color var(--transicao);
}
.cartao-foto:hover h3 { color: var(--ouro-claro); }

/* --- Grade de cartões ---------------------------------------------------- */
.grade {
  display: grid;
  /* auto-fill com minmax: o número de colunas se ajusta sozinho ao espaço,
     sem uma media query para cada faixa de largura. */
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--gap);
}

.cartao {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-alta);
}
.cartao .thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--papel-fundo);
}
.cartao .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.2, 0, .2, 1);
}
.cartao:hover .thumb img { transform: scale(1.05); }
.cartao .corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.1rem 1.1rem;
}
.cartao h3 {
  margin-bottom: .5rem;
  transition: color var(--transicao);
}
.cartao:hover h3 { color: var(--cor-editoria); }
.cartao .linha-fina {
  flex: 1;
  font-size: .875rem;
  color: var(--texto-medio);
  margin-bottom: .75rem;
}

/* --- Lista horizontal ---------------------------------------------------- */
.lista-h { display: grid; gap: .9rem; }

.item-h {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--linha-suave);
}
.item-h:last-child { border-bottom: 0; padding-bottom: 0; }
.item-h .thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--raio-p);
  background: var(--papel-fundo);
}
.item-h .thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-h h3 {
  font-size: .95rem;
  margin-bottom: .35rem;
  transition: color var(--transicao);
}
.item-h:hover h3 { color: var(--cor-editoria); }

/* --- Etiqueta de editoria ------------------------------------------------ */
.etiqueta {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 3px;
  background: var(--cor-editoria);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   6. Sidebar
   ------------------------------------------------------------------------ */

.widget {
  padding: 1.25rem;
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra);
}
.widget > h2 {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.widget > h2::before {
  content: '';
  width: 4px;
  height: 1.05em;
  border-radius: 2px;
  background: var(--ouro);
}

/* --- Mais lidas ---------------------------------------------------------- */
.mais-lidas {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: posicao;
}
.mais-lidas li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .75rem;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linha-suave);
}
.mais-lidas li:last-child { border-bottom: 0; padding-bottom: 0; }
.mais-lidas li::before {
  counter-increment: posicao;
  content: counter(posicao);
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--linha);
  transition: color var(--transicao);
}
.mais-lidas li:hover::before { color: var(--ouro); }
.mais-lidas a {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color var(--transicao);
}
.mais-lidas li:hover a { color: var(--azul-corp); }

/* --- Newsletter ---------------------------------------------------------- */
.newsletter {
  background: linear-gradient(150deg, var(--azul-corp), var(--azul-naval));
  color: #fff;
}
.newsletter > h2 { color: #fff; }
.newsletter > h2::before { background: var(--ouro); }
.newsletter p {
  font-size: .875rem;
  color: #c6d2e2;
}
.newsletter form { display: grid; gap: .6rem; }
.newsletter input[type="email"] {
  width: 100%;
  height: 42px;
  padding: 0 .9rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--raio-p);
  background: rgb(255 255 255 / 8%);
  color: #fff;
  font: inherit;
  font-size: .9rem;
}
.newsletter input::placeholder { color: #93a4bb; }
.newsletter input:focus {
  outline: none;
  border-color: var(--ouro);
  background: rgb(255 255 255 / 12%);
}
.newsletter button {
  height: 42px;
  border: 0;
  border-radius: var(--raio-p);
  background: var(--ouro);
  color: var(--azul-naval);
  font-family: var(--fonte-titulo);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicao);
}
.newsletter button:hover:not(:disabled) { background: var(--ouro-claro); }
.newsletter button:disabled { opacity: .6; cursor: progress; }
.newsletter .aviso {
  font-size: .85rem;
  margin: 0;
  min-height: 1.2em;
}
.newsletter .aviso--ok { color: var(--ouro-claro); }
.newsletter .aviso--erro { color: #ffb4bd; }

/* Campo-armadilha: invisível para pessoas, preenchido por robô de spam. */
.armadilha {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   7. Blocos dinâmicos
   ------------------------------------------------------------------------ */

/* --- Clima --------------------------------------------------------------- */
.clima-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.clima-cidade {
  padding: .6rem .4rem;
  border-radius: var(--raio-p);
  background: var(--papel);
  text-align: center;
}
.clima-cidade .nome {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .25rem;
}
.clima-cidade .grau {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--azul-corp);
}
.clima-cidade .extremos {
  display: block;
  font-size: .68rem;
  color: var(--texto-suave);
}

/* --- Agenda da Copa ------------------------------------------------------ */
.copa {
  border-radius: var(--raio);
  background: linear-gradient(150deg, #10331f, #071a10);
  color: #fff;
  padding: 1.25rem;
  box-shadow: var(--sombra);
}
.copa > h2 { color: #fff; display: flex; align-items: center; gap: .6rem; font-size: 1rem; margin-bottom: 1rem; }
.copa > h2::before { content: ''; width: 4px; height: 1.05em; border-radius: 2px; background: var(--ouro); }

.jogos { display: grid; gap: .5rem; }
.jogo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
  padding: .65rem .8rem;
  border-radius: var(--raio-p);
  background: rgb(255 255 255 / 6%);
  font-size: .82rem;
}
.jogo .time {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}
.jogo .time:last-child { flex-direction: row-reverse; }
.jogo .time img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.jogo .time span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jogo .placar {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: .95rem;
  color: var(--ouro);
  white-space: nowrap;
}
.jogo .horario {
  font-size: .75rem;
  color: #9fc4ad;
  white-space: nowrap;
}
.copa .rodada {
  grid-column: 1 / -1;
  font-size: .68rem;
  color: #7fa891;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Placeholder enquanto o JavaScript busca os dados. */
.carregando {
  display: grid;
  gap: .5rem;
}
.carregando span {
  height: 44px;
  border-radius: var(--raio-p);
  background: linear-gradient(90deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 12%), rgb(255 255 255 / 5%));
  background-size: 200% 100%;
  animation: brilho 1.4s ease-in-out infinite;
}
@keyframes brilho {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------------
   8. Matéria
   ------------------------------------------------------------------------ */

.materia {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra);
}

.trilha {
  font-size: .78rem;
  color: var(--texto-suave);
  margin-bottom: 1rem;
}
.trilha a:hover { color: var(--cor-editoria); text-decoration: underline; }
.trilha span + span::before { content: '›'; margin: 0 .45rem; color: var(--linha); }

.materia > h1 { margin-bottom: .75rem; }

.materia .linha-fina {
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  line-height: 1.5;
  color: var(--texto-medio);
  margin-bottom: 1.25rem;
}

.assinatura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: .9rem 0;
  border-block: 1px solid var(--linha-suave);
  margin-bottom: 1.5rem;
  font-size: .82rem;
  color: var(--texto-suave);
}
.assinatura .autor { font-weight: 700; color: var(--texto); }
.assinatura img { border-radius: 50%; }

.materia figure.capa { margin: 0 0 1.5rem; }
.materia figure img { border-radius: var(--raio-p); width: 100%; }
.materia figcaption {
  margin-top: .5rem;
  font-size: .78rem;
  color: var(--texto-suave);
  line-height: 1.45;
}

/* --- Corpo do texto ------------------------------------------------------
   Serifada e um pouco maior: para texto longo lido de cima a baixo, a serifa
   ainda é mais confortável, e é o padrão dos grandes jornais. */
.texto {
  font-family: var(--fonte-leitura);
  font-size: 1.125rem;
  line-height: 1.75;
  /* Medida de leitura: acima de ~75 caracteres o olho se perde ao voltar
     para o começo da linha seguinte. */
  max-width: 68ch;
}
/* O espaçamento do texto vem SÓ daqui: cada elemento zera as margens e
   recebe um respiro acima, exceto o primeiro. É previsível e não depende de
   qual etiqueta o editor usou.

   Atenção à especificidade: a versão anterior tinha ".texto p { margin: 0 }"
   junto, que pesa mais que ".texto > * + *" e anulava o espaçamento de TODO
   parágrafo da matéria. Somado à margem negativa que os títulos tinham, o
   texto subia e encostava no título acima dele. Aqui os dois seletores têm o
   mesmo peso, e vence o que vem depois — que é a intenção. */
.texto > * { margin-top: 0; margin-bottom: 0; }
.texto > * + * { margin-top: 1.4em; }

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

/* Título respira mais acima, para separar do bloco anterior... */
.texto > h2 + *, .texto > h3 + * { margin-top: .7em; }
.texto > * + h2 { margin-top: 2.2em; }
.texto > * + h3 { margin-top: 1.9em; }
.texto a {
  color: var(--azul-claro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.texto a:hover { color: var(--azul-corp); }
.texto ul, .texto ol { padding-left: 1.5em; }
.texto li + li { margin-top: .5em; }
.texto img { border-radius: var(--raio-p); }
.texto figure { margin: 0; }

.texto blockquote {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--cor-editoria);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--texto-medio);
}
.texto blockquote cite {
  display: block;
  margin-top: .5rem;
  font-size: .85rem;
  font-style: normal;
  color: var(--texto-suave);
}

.texto table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fonte-texto);
  font-size: .95rem;
}
.texto th, .texto td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}
.texto th { background: var(--papel); font-weight: 700; }

.texto pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: var(--raio-p);
  background: var(--azul-naval);
  color: #e6edf5;
  font-size: .875rem;
}

/* Vídeo embutido responsivo, sem depender de wrapper no HTML. */
.texto iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--raio-p);
}

/* --- Rodapé da matéria --------------------------------------------------- */
.materia-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
}
.materia-tags a {
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--papel);
  font-size: .78rem;
  color: var(--texto-medio);
  transition: background var(--transicao), color var(--transicao);
}
.materia-tags a:hover { background: var(--cor-editoria); color: #fff; }

.compartilhar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha-suave);
}
.compartilhar span {
  font-size: .8rem;
  font-weight: 600;
  color: var(--texto-suave);
  margin-right: .25rem;
}
.compartilhar a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--papel);
  color: var(--texto-medio);
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.compartilhar a:hover {
  background: var(--cor-editoria);
  color: #fff;
  transform: translateY(-2px);
}
.compartilhar svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------------------
   9. Paginação, busca e vazios
   ------------------------------------------------------------------------ */

.paginacao {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-top: 2rem;
}
.paginacao .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .75rem;
  border-radius: var(--raio-p);
  background: var(--branco);
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--sombra);
  transition: background var(--transicao), color var(--transicao);
}
.paginacao .page-numbers:hover { background: var(--papel); }
.paginacao .current {
  background: var(--azul-corp);
  color: #fff;
}

.vazio {
  padding: clamp(2rem, 6vw, 4rem);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra);
  text-align: center;
}
.vazio h1 { margin-bottom: .75rem; }
.vazio p { color: var(--texto-medio); max-width: 48ch; margin-inline: auto; }
.vazio .busca-grande {
  display: flex;
  gap: .5rem;
  max-width: 420px;
  margin: 1.5rem auto 0;
}
.vazio .busca-grande input {
  flex: 1;
  height: 46px;
  padding: 0 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  font: inherit;
}
.vazio .busca-grande button {
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--raio-p);
  background: var(--azul-corp);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   10. Rodapé
   ------------------------------------------------------------------------ */

.rodape {
  margin-top: clamp(2rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  background: var(--azul-naval);
  color: #9fb0c7;
  font-size: .875rem;
}
.rodape-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  padding-bottom: 2rem;
}
.rodape h2 {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: .9rem;
}
.rodape ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.rodape a { transition: color var(--transicao); }
.rodape a:hover { color: #fff; }
.rodape .marca-rodape img { height: 46px; width: auto; margin-bottom: .9rem; }

.redes { display: flex; gap: .6rem; margin-top: 1rem; }
.redes a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(255 255 255 / 8%);
  transition: background var(--transicao), transform var(--transicao);
}
.redes a:hover { background: var(--ouro); color: var(--azul-naval); transform: translateY(-2px); }
.redes svg { width: 17px; height: 17px; }

.rodape-base {
  padding: 1.1rem 0;
  border-top: 1px solid rgb(255 255 255 / 8%);
  font-size: .8rem;
}
.rodape-base .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
}

/* ---------------------------------------------------------------------------
   11. Responsivo
   ------------------------------------------------------------------------ */

@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  .manchete { grid-template-columns: minmax(0, 1fr); }
  .manchete-principal { min-height: 340px; }
  .manchete-secundarias { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .utilbar nav a:not(.entrar) { display: none; }
  .topo .container { min-height: 64px; gap: 1rem; }
  .marca img { height: 40px; }
  .busca { order: 3; width: 100%; margin: 0 0 .75rem; }
  .busca input, .busca input:focus { width: 100%; }
  .topo .container { flex-wrap: wrap; padding-top: .75rem; }

  .manchete-secundarias { grid-template-columns: minmax(0, 1fr); }
  .item-h { grid-template-columns: 96px minmax(0, 1fr); }
  .texto { font-size: 1.0625rem; }
}

/* Quem pediu menos animação no sistema recebe menos animação. Vestibular e
   sensibilidade a movimento são motivos reais, não preferência estética. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   12. Impressão
   Matéria impressa ou salva em PDF é uso real em redação e assessoria.
   ------------------------------------------------------------------------ */

@media print {
  .utilbar, .topo, .editorias, .plantao, .sidebar,
  .compartilhar, .rodape, .paginacao, .pular-para-conteudo { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .layout { display: block; padding: 0; }
  .materia { box-shadow: none; padding: 0; }
  .texto { max-width: none; font-size: 11pt; line-height: 1.5; }

  /* Endereço do link impresso ao lado do texto — sem isso a referência se
     perde no papel. */
  .texto a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}