/* Site público. Desenhado primeiro para o celular em pé. */

/* ---------- topo ---------- */

/* Duas faixas: a vermelha de ponta a ponta com a marca no meio, e abaixo
   uma barra fina com as editorias à esquerda e as redes mais a lupa à
   direita. No celular as editorias rolam de lado e as ações ficam
   sempre visíveis. */
.topo {
  background: var(--papel);
  border-bottom: 1px solid var(--fio-forte);
  position: sticky;
  top: 0;
  z-index: 40;
  /* Desliza para cima quando a pessoa desce a página. Transform, não
     altura: nada é empurrado e não há salto de layout. */
  transition: transform 200ms ease;
  will-change: transform;
}
.topo.topo-escondido {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .topo {
    transition: none;
  }
}

.topo-faixa {
  background: var(--vermelho);
  padding: 10px var(--gutter);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* O logotipo é o arquivo do cliente, com fundo transparente: a faixa
   vermelha aparece por trás dele e não existe borda para casar. */
.marca-logo {
  display: block;
  line-height: 0;
  max-width: 100%;
}
.marca-logo img {
  width: min(70vw, 340px);
  height: auto;
  display: block;
}

@media (min-width: 860px) {
  .topo-faixa {
    padding: 13px var(--gutter);
  }
  .marca-logo img {
    width: 400px;
  }
}

.topo-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--gutter);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.menu {
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* A lista rola de lado e o corte tem de parecer corte, não editoria
     escrita por cima do ícone: as últimas letras esmaecem. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}
.menu::-webkit-scrollbar {
  display: none;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0 26px 0 0;
  display: flex;
  gap: 18px;
  white-space: nowrap;
}
.menu li a {
  display: block;
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.menu li a:hover {
  color: var(--vermelho);
}

/* Os ícones ficam numa área própria, com fundo e fio à esquerda: assim a
   editoria que o corte comeu não parece estar embaixo do ícone. */
.topo-acoes {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 8px;
  background: var(--papel);
  border-left: 1px solid var(--fio);
  position: relative;
  z-index: 1;
}
.redes-topo {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.redes-topo a,
.botao-busca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--escuro);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.redes-topo a:hover,
.botao-busca:hover {
  color: var(--vermelho);
}
.redes-topo svg,
.botao-busca svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* Sem JavaScript o formulário fica aberto na barra e a lupa some. */
.topo:not(.com-busca-js) .botao-busca {
  display: none;
}
.topo.com-busca-js .busca {
  display: none;
}
.topo.com-busca-js.busca-aberta .busca {
  display: flex;
}

.busca {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 10px;
  width: 100%;
  order: 3;
}
.busca input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--fio-forte);
  background: var(--branco);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 15px;
}
.busca button[type='submit'] {
  padding: 9px 14px;
  border: 0;
  background: var(--escuro);
  color: var(--papel);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: 2px;
  cursor: pointer;
}
.busca-fechar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  color: var(--escuro);
  cursor: pointer;
  flex: 0 0 auto;
}
.busca-fechar svg {
  width: 18px;
  height: 18px;
}
.busca-fechar:hover {
  color: var(--vermelho);
}

/* No celular a barra tem duas linhas quando a busca abre: editorias e
   ações em cima, campo embaixo, ocupando a faixa inteira. */
.topo-barra {
  flex-wrap: wrap;
}

/* Tela bem estreita: os botões encolhem para sobrar faixa para as
   editorias, que é o que a pessoa usa para navegar. */
@media (max-width: 480px) {
  .redes-topo a,
  .botao-busca {
    width: 30px;
    height: 38px;
  }
  .redes-topo svg,
  .botao-busca svg {
    width: 17px;
    height: 17px;
  }
  .menu ul {
    gap: 15px;
  }
}

@media (min-width: 860px) {
  .menu ul {
    gap: 24px;
  }
  .menu li a {
    padding: 11px 0;
  }
  /* No desktop a busca abre ao lado dos ícones, não numa linha nova. */
  .busca {
    width: auto;
    order: 0;
    padding: 0;
    max-width: 330px;
  }
  .busca input {
    padding: 7px 10px;
    font-size: 14px;
  }
  .busca button[type='submit'] {
    padding: 7px 12px;
  }
}

/* ---------- blocos ---------- */

/* O conteúdo ocupa a tela inteira. Nada de coluna estreita com margem
   vazia dos lados: o respiro é interno, pequeno, e cresce com a tela. */
main {
  width: 100%;
  margin: 0;
  padding: 0 var(--gutter) 60px;
}

@media (min-width: 700px) {
  :root {
    --gutter: 24px;
  }
}
@media (min-width: 1280px) {
  :root {
    --gutter: 32px;
  }
}

.bloco-titulo {
  margin: 44px 0 18px;
  border-top: 2px solid var(--escuro);
  padding-top: 10px;
}
.bloco-titulo h2 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--escuro);
}
.bloco-titulo a {
  text-decoration: none;
}
.bloco-titulo a:hover {
  color: var(--vermelho);
}

.cabecalho-secao {
  padding: 34px 0 6px;
  border-bottom: 2px solid var(--escuro);
  margin-bottom: 22px;
}
.cabecalho-secao h1 {
  font-size: 40px;
  letter-spacing: -0.02em;
}
.cabecalho-secao p {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--tinta-fraca);
  margin: 8px 0 14px;
}

/* ---------- card ---------- */

.chapeu {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vermelho);
  text-decoration: none;
  margin-bottom: 7px;
}
/* PLANTÃO é tarja, não chapéu colorido: com o destaque sendo sempre
   vermelho, a urgência não pode depender da cor do fundo.
   Discreta de propósito: ela marca, não ocupa. */
.chapeu-urgente {
  background: var(--escuro);
  color: var(--branco);
  padding: 3px 8px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 2px;
  /* Dentro de um bloco em coluna flex a tarja esticaria de ponta a ponta:
     ela é do tamanho da palavra e nada mais. */
  align-self: flex-start;
  width: fit-content;
}
/* Sobre fundo escuro ou vermelho a tarja inverte, e continua gritando. */
.card-texto.cor-escuro .chapeu-urgente,
.card-texto.cor-vermelho .chapeu-urgente,
.destaque .chapeu-urgente {
  background: var(--branco);
  color: var(--vermelho-fundo);
}
/* Na página da matéria o fundo é claro: aí a tarja é vermelha. */
.materia-topo .chapeu-urgente {
  background: var(--vermelho);
  color: var(--branco);
}

.selo-especial {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--escuro);
  padding: 2px 7px;
  margin-left: 6px;
  margin-bottom: 7px;
  vertical-align: 2px;
}

.manchete {
  font-family: var(--serifa);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
}

.linha-fina {
  font-family: var(--serifa);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--tinta-fraca);
  margin: 7px 0 0;
}

.grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--fio);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}

/* Tela maior ganha mais colunas, não cards gigantes. */
@media (min-width: 640px) {
  .grade {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .grade {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1360px) {
  .grade {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1750px) {
  .grade {
    grid-template-columns: repeat(5, 1fr);
  }
}

.card {
  background: var(--papel);
  display: flex;
}
.card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: 20px 18px 18px;
  width: 100%;
}
.card-link:hover .manchete {
  color: var(--vermelho);
}

.card .figura {
  margin: 14px 0 0;
  order: 2;
}
.card-texto-bloco {
  order: 1;
}
.card-pe {
  order: 3;
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--tinta-fraca);
  letter-spacing: 0.02em;
}

/* Card só de texto: cidadão de primeira classe, não defeito. */
.card-texto .card-link {
  padding: 26px 20px 22px;
  min-height: 210px;
  justify-content: space-between;
}
.card-texto .manchete {
  font-size: 26px;
}
.card-texto.cor-claro {
  background: var(--papel-fundo);
}
.card-texto.cor-escuro {
  background: var(--escuro);
}
.card-texto.cor-escuro .manchete,
.card-texto.cor-escuro .card-pe {
  color: var(--papel);
}
.card-texto.cor-escuro .linha-fina {
  color: var(--claro);
}
.card-texto.cor-escuro .chapeu {
  color: #FF8C8A;
}
.card-texto.cor-escuro .card-link:hover .manchete {
  color: #FF8C8A;
}
.card-texto.cor-vermelho {
  background: var(--vermelho-fundo);
}
.card-texto.cor-vermelho .manchete,
.card-texto.cor-vermelho .card-pe,
.card-texto.cor-vermelho .chapeu {
  color: var(--branco);
}
.card-texto.cor-vermelho .linha-fina {
  color: rgba(255, 255, 255, 0.86);
}
.card-texto.cor-vermelho .chapeu-urgente {
  background: var(--branco);
  color: var(--vermelho-fundo);
}
.card-texto.cor-vermelho .card-link:hover .manchete {
  color: rgba(255, 255, 255, 0.82);
}

.card-especial .card-texto-bloco {
  border-left: 3px solid var(--vermelho);
  padding-left: 12px;
}

/* Destaque da capa: SEMPRE em bloco vermelho, com ou sem foto. É a
   assinatura da capa, e com a tarja de plantão separada a urgência não
   depende mais da cor do fundo. */
.destaque {
  margin: 26px 0 8px;
  border-top: 2px solid var(--escuro);
  border-bottom: 1px solid var(--fio);
}
/* O destaque sem foto não usa mais a cor do card: o vermelho vem do
   bloco de texto, igual ao destaque com foto. */
.destaque .card.card-texto,
.destaque .card {
  background: transparent;
}
.destaque .card-link,
.destaque .card-texto .card-link {
  padding: 20px 0 18px;
  min-height: 0;
}
.destaque .card-texto-bloco {
  background: var(--vermelho);
  color: var(--branco);
  padding: 26px 24px 28px;
}
.destaque .chapeu,
.destaque .manchete,
.destaque .selo-especial {
  color: var(--branco);
}
.destaque .selo-especial {
  border-color: var(--branco);
}
.destaque .linha-fina {
  color: rgba(255, 255, 255, 0.88);
}
.destaque .card-link:hover .manchete {
  color: rgba(255, 255, 255, 0.84);
}
.destaque .manchete {
  font-size: 32px;
}
.destaque .linha-fina {
  font-size: 19px;
}
.destaque .figura {
  margin-top: 0;
}
/* A data fica FORA do bloco vermelho, no papel: precisa desfazer a cor
   que o card de texto vermelho dava a ela. */
.destaque .card-texto .card-pe,
.destaque .card-pe {
  color: var(--tinta-fraca);
}
.destaque .card-especial .card-texto-bloco {
  border-left: 0;
}

@media (min-width: 860px) {
  /* Sem foto, o bloco vermelho ocupa a largura toda: nada de metade da
     faixa vazia esperando uma imagem que não existe. */
  .destaque .card-texto .card-link {
    display: block;
  }
  /* Com foto, ela fica ao lado do bloco e com a mesma altura dele. */
  .destaque .card-link {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-areas: 'texto figura' 'pe figura';
    column-gap: 0;
    align-items: stretch;
  }
  .destaque .card-texto-bloco {
    grid-area: texto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Sem isto todo filho esticaria na largura do bloco, e o chapéu
       virava uma faixa branca de ponta a ponta. */
    align-items: flex-start;
    padding: 34px 32px 36px;
  }
  .destaque .figura {
    grid-area: figura;
    margin: 0;
    height: 100%;
  }
  .destaque .figura img {
    height: 100%;
    object-fit: cover;
  }
  .destaque .card-pe {
    grid-area: pe;
    align-self: end;
    margin-left: 32px;
  }
  /* No destaque a manchete vive numa coluna de pouco menos de metade da
     tela. Tamanho fixo de 44px ali dava uma palavra por linha em tablet,
     o mesmo defeito da página da matéria. */
  .destaque .manchete {
    font-size: clamp(32px, 3.2vw, 52px);
  }
}

/* ---------- figura ---------- */

.figura {
  margin: 0;
  position: relative;
  background: var(--papel-fundo);
}
.figura img {
  width: 100%;
}
.figura figcaption {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--tinta-fraca);
  padding-top: 6px;
  letter-spacing: 0.02em;
}

.figura.sensivel img {
  filter: blur(22px);
  transform: scale(1.06);
}
.figura.sensivel {
  overflow: hidden;
}
.figura.sensivel.revelada img {
  filter: none;
  transform: none;
}
.aviso-sensivel {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(55, 51, 51, 0.5);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-family: var(--sans);
}
.figura.sensivel.revelada .aviso-sensivel {
  display: none;
}
.aviso-titulo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.aviso-acao {
  font-size: 12px;
  opacity: 0.9;
}

/* ---------- página da matéria ---------- */

/* UMA grade só para a matéria inteira. Chapéu, manchete, linha fina, foto,
   texto, coluna lateral e tela da ponte partilham as mesmas bordas: o
   bloco inteiro tem uma largura máxima e é centralizado, e cada parte
   ocupa essa largura.

   Quem fica preso a uma medida legível é só o texto corrido, e isso sai
   da própria grade: a coluna de texto é o que resta depois da coluna
   lateral, calibrado para 75 a 80 caracteres por linha.

   Erro que isto conserta: a manchete herdava o limite de leitura (eram
   18em no cabeçalho) e saía com uma palavra por linha e um deserto à
   direita, numa grade diferente da do corpo. */
.materia {
  width: 100%;
  max-width: var(--materia-largura, none);
  margin-inline: auto;
  padding-top: 26px;
}

.materia-topo {
  margin-bottom: 20px;
}
.materia .manchete {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: none;
}
.materia .linha-fina {
  font-size: 19px;
  margin-top: 11px;
}

/* A manchete cresce com a tela, mas com teto. O teto existe para não
   sobrar uma palavra sozinha por linha em tablet, e o tamanho foi baixado
   em 2/11/2026 para ficar em proporção com o texto corrido: antes a
   manchete gritava mais alto que a matéria. */
@media (min-width: 700px) {
  .materia .manchete {
    font-size: clamp(30px, 2.6vw, 46px);
  }
  .materia .linha-fina {
    font-size: clamp(19px, 1.25vw, 23px);
  }
}

.materia-corpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 48px;
}

@media (min-width: 960px) {
  /* A largura da matéria é a soma da medida de leitura, do respiro e da
     coluna lateral. Assim a coluna de texto enche a célula dela: nada de
     faixa morta entre o texto e o autor. */
  .materia {
    --materia-largura: 1240px;
  }
  .materia-corpo {
    /* A primeira coluna é a medida de leitura: cabeçalho, foto e texto
       dividem exatamente a mesma caixa. O par é centralizado, e como
       TUDO está dentro desta grade não há duas grades para desalinhar. */
    grid-template-columns: minmax(0, 900px) minmax(240px, 290px);
    justify-content: center;
    align-items: start;
  }
  /* Cabeçalho, foto e texto empilhados na primeira coluna. É isso que faz
     a manchete parar onde a coluna do autor começa, em qualquer largura:
     a borda é a da grade, não um valor fixo. */
  .materia-topo {
    grid-column: 1;
    grid-row: 1;
  }
  .materia-corpo > .figura {
    grid-column: 1;
    grid-row: 2;
  }
  .materia-texto {
    grid-column: 1;
    grid-row: 3;
  }
  .materia-lado {
    grid-column: 2;
    grid-row: 1 / span 3;
    position: sticky;
    top: 110px;
    border-left: 1px solid var(--fio);
    padding-left: 22px;
  }
}

/* A medida de leitura, em pixel porque é assim que ela foi medida: 900px
   com a serifa a 23px dá 75 a 78 caracteres por linha, que é o teto.
   Estas regras vêm ANTES das media queries de propósito: elas são a base,
   e as media queries abaixo é que mandam em tela larga. */
.materia-texto {
  max-width: 900px;
}
.materia-texto > .resumo p,
.materia-texto > .texto-longo p,
.materia-texto > .texto-longo li {
  font-size: clamp(18px, 1.05vw + 14px, 23px);
  line-height: 1.62;
}

@media (min-width: 1500px) {
  /* Tela muito larga: a letra cresce e a coluna lateral engorda, em vez
     de a linha de leitura esticar. */
  .materia {
    --materia-largura: 1420px;
  }
  .materia-corpo {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: 8px 72px;
  }
  .materia-texto {
    /* A letra cresce para 25px, e com ela a medida: 1010px continuam
       dando os mesmos 78 caracteres por linha. */
    max-width: 1010px;
  }
  .materia-texto > .resumo p,
  .materia-texto > .texto-longo p,
  .materia-texto > .texto-longo li {
    font-size: 25px;
  }
}

.materia-lado {
  padding-bottom: 10px;
}

.autor-bloco {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}
/* Sem bio nem link o bloco é só a foto e o nome: aí ele volta a centrar. */
.autor-bloco:not(:has(.autor-bio)):not(:has(.autor-links)) {
  align-items: center;
}
.autor-foto {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 48px;
  background: var(--papel-fundo);
}
.autor-nome {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--escuro);
  text-decoration: none;
}
a.autor-nome:hover {
  color: var(--vermelho);
}
.autor-bio {
  font-family: var(--serifa);
  font-style: italic;
  font-size: 17px;
  color: var(--tinta-fraca);
  margin: 8px 0 0;
  text-transform: none;
}
.autor-link a {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--vermelho);
  word-break: break-all;
}

/* Os links do autor, pelo nome que o redator deu. Na coluna lateral da
   matéria eles ficam embaixo da bio, em linha, separados por um ponto. */
.autor-links {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  text-transform: none;
}
.autor-links a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--vermelho);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.autor-links a:hover {
  color: var(--escuro);
}

/* Na coluna lateral a bio é menor: ali ela é legenda, não texto. */
.materia-lado .autor-bio {
  font-size: 15px;
  line-height: 1.45;
}

.cabecalho-autor {
  padding: 30px 0 10px;
  border-bottom: 2px solid var(--escuro);
  margin-bottom: 22px;
}
.autor-bloco-completo {
  border: 0;
  align-items: flex-start;
  gap: 18px;
  padding: 0;
}
.autor-bloco-completo .autor-foto {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
}
.autor-bloco-completo .autor-nome {
  font-family: var(--serifa);
  font-size: 34px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.02em;
  display: block;
}

/* ---------- elementos do texto rico ---------- */

.texto-longo h2,
.resumo h2:not(.resumo-titulo),
.texto-longo h3 {
  font-family: var(--serifa);
  font-size: clamp(22px, 1.6vw, 30px);
  font-weight: 600;
  margin: 1.5em 0 0.4em;
  letter-spacing: -0.01em;
}
.texto-longo blockquote,
.resumo blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--vermelho);
  font-family: var(--serifa);
  font-style: italic;
  font-size: clamp(20px, 1.4vw, 26px);
  line-height: 1.45;
  color: var(--escuro);
}
.texto-longo mark,
.resumo mark {
  background: #FDE9A8;
  color: inherit;
  padding: 0 2px;
}
.texto-longo a,
.resumo a {
  color: var(--escuro);
  text-decoration: underline;
  text-decoration-color: var(--vermelho);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.texto-longo a:hover,
.resumo a:hover {
  color: var(--vermelho);
}
.texto-longo ul,
.texto-longo ol,
.resumo ul,
.resumo ol {
  padding-left: 1.3em;
  margin: 1em 0;
}
.texto-longo li,
.resumo li {
  margin-bottom: 0.4em;
}

/* Imagem dentro do texto pode sair da coluna e ocupar a largura toda. */
.texto-figura {
  margin: 1.8em 0;
}
.texto-figura img {
  width: 100%;
}
.texto-figura figcaption {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--tinta-fraca);
  padding-top: 8px;
}
/* A imagem do meio do texto ocupa a largura da coluna de texto e para ali.
   Antes ela era calculada em 100vw: agora que a matéria é uma grade
   centralizada, isso a jogava para fora da borda direita e criava rolagem
   horizontal. */
.texto-figura.largura-total {
  width: 100%;
  max-width: 100%;
}

.assinatura {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--fio);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--tinta-fraca);
}
.assinatura .autor {
  font-weight: 600;
  color: var(--escuro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.materia .figura {
  margin: 22px 0 26px;
}

.resumo {
  border-left: 3px solid var(--vermelho);
  padding-left: 18px;
  margin: 0 0 30px;
}
.resumo-titulo {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vermelho);
  margin-bottom: 10px;
}
.resumo p {
  font-size: 19.5px;
  line-height: 1.6;
}

.texto-longo p {
  font-size: 19px;
  line-height: 1.68;
  margin-bottom: 1.15em;
}
.texto-longo p:first-child::first-letter {
  float: left;
  font-size: 62px;
  line-height: 0.82;
  padding: 6px 10px 0 0;
  font-weight: 600;
}

.materia-especial .manchete {
  font-weight: 500;
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 26px 0;
}
.tags a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  text-decoration: none;
  border: 1px solid var(--fio-forte);
  padding: 5px 11px;
  border-radius: 2px;
  color: var(--tinta-fraca);
}
.tags a:hover {
  border-color: var(--escuro);
  color: var(--escuro);
}

/* ---------- a tela da ponte ---------- */

.ponte {
  margin: 40px 0 10px;
  background: var(--escuro);
  color: var(--papel);
  padding: 28px 22px 24px;
}
.ponte-titulo {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FF8C8A;
  margin-bottom: 10px;
}
.ponte-texto {
  font-family: var(--serifa);
  font-size: 19px;
  line-height: 1.45;
  margin-bottom: 20px;
  color: var(--papel);
}
.ponte-botoes {
  display: grid;
  gap: 10px;
}
@media (min-width: 560px) {
  .ponte-botoes {
    grid-template-columns: 1fr 1fr;
  }
}
.ponte-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 18px;
  background: var(--papel);
  color: var(--escuro);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  border-radius: 2px;
  transition: background 0.15s ease;
}
.ponte-botao:hover {
  background: var(--vermelho);
  color: var(--branco);
}
.ponte-seta {
  font-size: 17px;
}

/* ---------- anúncio ---------- */

.anuncio {
  margin: 0 0 30px;
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
  padding: 14px 0;
}
.anuncio-rotulo {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--claro);
  margin-bottom: 8px;
}

/* ---------- /agora ---------- */

.agora-topo h1 {
  font-size: 34px;
}
.lista-agora {
  display: grid;
  gap: 1px;
  background: var(--fio);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}
.lista-agora .card-link {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 14px;
}
.lista-agora .card-texto-bloco {
  flex: 1;
  order: 1;
}
.lista-agora .figura {
  order: 2;
  width: 94px;
  flex: 0 0 94px;
  margin: 0;
}
.lista-agora .manchete {
  font-size: 19px;
}
.lista-agora .linha-fina {
  display: none;
}
.lista-agora .card-pe {
  display: none;
}

/* ---------- paginação, vazio, erro ---------- */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 34px 0;
  font-family: var(--sans);
  font-size: 14px;
}
.paginacao a {
  text-decoration: none;
  border: 1px solid var(--fio-forte);
  padding: 8px 14px;
}
.paginacao a:hover {
  border-color: var(--escuro);
}

.vazio {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--tinta-fraca);
  padding: 40px 0;
  text-align: center;
}

.erro {
  text-align: center;
  padding: 70px 0 30px;
}
.erro-codigo {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--vermelho);
  font-weight: 700;
}
.erro-titulo {
  font-size: 38px;
  margin: 8px 0 12px;
}
.erro-texto {
  font-size: 19px;
  color: var(--tinta-fraca);
}
.botao {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: var(--escuro);
  color: var(--papel);
  padding: 11px 20px;
  margin-top: 10px;
  border-radius: 2px;
}

.busca-pagina {
  max-width: 480px;
  margin-bottom: 26px;
}

/* ---------- rodapé ---------- */

.rodape {
  border-top: 2px solid var(--escuro);
  background: var(--papel-fundo);
  margin-top: 30px;
}
.rodape-dentro {
  max-width: none;
  margin: 0 auto;
  padding: 34px var(--gutter) 44px;
}
.rodape-texto {
  font-family: var(--serifa);
  font-style: italic;
  font-size: 17px;
  color: var(--tinta-fraca);
  margin: 12px 0 18px;
}
.rodape-redes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 22px;
}
.rodape-redes a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--escuro);
  padding: 8px 15px;
  border-radius: 2px;
}
.rodape-redes a:hover {
  background: var(--escuro);
  color: var(--papel);
}
.rodape-fino {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--tinta-fraca);
  margin: 0;
}

/* ---------- pop-up da capa ---------- */

/* No celular ele sobe de baixo, como um painel, e nunca cobre a tela
   inteira logo que a página abre. O JavaScript só o revela depois de
   alguns segundos ou de uma rolagem. */
.popup[hidden] {
  display: none;
}
.popup {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.popup-fundo {
  position: absolute;
  inset: 0;
  background: rgba(38, 34, 34, 0.45);
  animation: popup-fundo 0.25s ease both;
}
@keyframes popup-fundo {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.popup-caixa {
  position: relative;
  background: var(--papel);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  border-top: 4px solid var(--vermelho);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
  animation: popup-sobe 0.28s ease both;
}
@keyframes popup-sobe {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.popup-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 248, 245, 0.92);
  color: var(--escuro);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.popup-x:hover {
  background: var(--vermelho);
  color: #fff;
}
.popup-imagem {
  width: 100%;
}
.popup-texto {
  padding: 20px 22px 26px;
}
.popup-texto h2 {
  font-family: var(--serifa);
  font-size: 26px;
  margin-bottom: 8px;
}
.popup-texto p {
  font-family: var(--serifa);
  font-size: 18px;
  color: var(--tinta-fraca);
}
.popup-botao {
  display: inline-block;
  margin-top: 8px;
  background: var(--vermelho);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 3px;
}
.popup-botao:hover {
  background: var(--vermelho-fundo);
}

@media (min-width: 700px) {
  .popup {
    align-items: center;
  }
  .popup-caixa {
    border-radius: 4px;
    animation: popup-aparece 0.22s ease both;
  }
  @keyframes popup-aparece {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
  }
}