/* ================================================================
   Regularize Consultoria — CSS separado (rascunho técnico)
   ----------------------------------------------------------------
   Gerado a partir de assets/css/custom.css para a fase de separação.
   Não substitui custom.css/custom.min.css automaticamente.
   Preserve a ordem de carregamento indicada no README antes de usar.
   ================================================================ */

.news-topic-shortcuts > span {
  display: inline-flex;
  align-items: center;
  border-color: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  /* Fundo mais sutil e texto branco: com 22% de branco o texto de 11 px ficava abaixo de 4,5:1. */
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---------- Notícias: hero da listagem alinhado ao padrão institucional ---------- */
.news-hero-content {
  position: relative;
}

.news-topic-shortcuts {
  max-width: 48rem;
}

.news-topic-shortcuts > span {
  border-radius: 999px;
}

@media (max-width: 639px) {
  .news-hero-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .news-hero-content > h1 {
    margin-bottom: 0.625rem;
  }

  .news-hero-content > p {
    line-height: 1.55;
  }

  .news-topic-shortcuts {
    gap: 0.5rem;
  }

  .news-topic-shortcuts > span {
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    line-height: 1rem;
  }
}

@media (min-width: 640px) and (max-width: 1279px) {
  .news-hero-content {
    margin-left: clamp(0.5rem, 2vw, 2rem);
  }

  .news-hero-content p {
    max-width: 48rem;
    line-height: 1.48;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .news-hero-section {
    padding-top: clamp(2.625rem, 5vw, 3rem);
    padding-bottom: clamp(2.625rem, 5vw, 3rem);
  }

  .news-hero-content > h1 {
    margin-bottom: 0.625rem;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .news-hero-section {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }
}

/* ---------- 15. Notícias e artigos: listagem, chips e corpo editorial ----------
   Mantém juntos os estilos da listagem /noticias/ e dos artigos individuais.
   Nesta fase, os subtítulos abaixo apenas documentam o bloco sem alterar regras. */

/* 15.1 Notícias: filtros e estados ativos da listagem */
/* A coluna de filtros fica no fluxo da página, sem sticky. Com 11 categorias
   ela mede cerca de 1.310 px: presa 9,5rem abaixo do topo, só caberia inteira
   numa janela com mais de 1.460 px de altura, e presa mais alta que a tela
   deixava os últimos controles fora do alcance. */

/* A coluna vem antes da lista no HTML e, desde 21/10/2026, também na tela em
   todas as larguras: a ordem do Tab é a ordem visual. A partir de 1024 px ela
   fica à esquerda com os quatro blocos. Abaixo disso ela fica compacta antes
   da lista: a pesquisa e, logo abaixo, uma faixa que rola na horizontal com as
   categorias e, no fim, a ordenação (sem acrescentar uma linha). Com mouse,
   as categorias viram um carrossel com setas e a ordenação fica fora dele
   (bloco "Com mouse" abaixo). O bloco
   "Atendimento técnico" sai abaixo de 1024 px com display: none, fora do Tab;
   a página já tem "Orientação técnica" e "Entrar em contato" depois da lista.
   Os blocos de categorias e de ordenação viram display: contents, os botões
   passam a ser itens da faixa e os títulos ficam só para leitores de tela.
   Até 21/10/2026 a coluna vinha depois da lista (order) e o
   assets/js/pages/noticias.js recolhia voltar ao topo e WhatsApp enquanto ela
   passava por eles. Agora a pesquisa e a faixa reservam a faixa da coluna
   fixa, como os outros blocos da listagem (seção "Listagem: blocos sem
   reserva própria"), e os botões não recolhem. */
.news-filters__block + .news-filters__block {
  margin-top: 1.5rem;
}

/* Setas do carrossel das categorias: só com mouse abaixo de 1024 px (bloco
   "Com mouse" abaixo), e só a do lado que tem categorias escondidas
   (assets/js/pages/noticias.js tira o hidden). */
.news-filters__arrow {
  display: none;
}

@media (max-width: 1023px) {
  .news-contact-card {
    display: none;
  }

  .news-filters__block,
  .news-filters__carousel,
  .news-filters__categories {
    display: contents;
  }

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

  /* O cartão tem as bordas dos outros blocos; a faixa que rola fica dentro
     dele e termina antes da coluna fixa (reserva abaixo), então nenhum botão
     passa por baixo dela. */
  .news-filters {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 0.25rem;
  }

  /* Sem barra aparente; o dedo arrasta e o Tab rola até o botão focado. O
     padding deixa o contorno de foco (2 px + 2 px de afastamento) inteiro. O
     esmaecido de 2,5rem na borda direita mostra que há mais itens; o
     scroll-padding faz o botão focado parar antes dele, e o espaço no fim
     (::after) deixa a ordenação sair dele quando a faixa chega ao fim. */
  .news-filters__strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0.375rem;
    scroll-padding-inline: 0.375rem 2.5rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }

  .news-filters__strip::-webkit-scrollbar {
    display: none;
  }

  .news-filters__strip::after {
    content: "";
    flex: 0 0 2.125rem;
    align-self: stretch;
  }

  /* Todos os botões da faixa com pelo menos 44 px de altura, com toque e com
     mouse (desde 21/10/2026; antes 42 px nas categorias e 36 px na
     ordenação). */
  .news-filters__strip .news-filter-button {
    flex: 0 0 auto;
    gap: 0.5rem;
    min-height: 2.75rem;
    white-space: nowrap;
  }

  .news-filters__sort {
    flex: 0 0 auto;
    margin-left: 0.25rem;
  }

  .news-filters__sort .news-sort-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    white-space: nowrap;
  }

  .news-filters__sort .news-sort-button span {
    display: inline;
  }

  .news-filters__sort .news-sort-button span + span {
    margin-left: 0.25rem;
  }
}

/* Com mouse (hover e ponteiro fino), abaixo de 1024 px, desde 23/10/2026: as
   categorias ficam num carrossel de uma linha que rola na horizontal, com
   setas nas laterais, e a ordenação fica fora dele, à direita, na mesma linha
   quando o carrossel ainda tem pelo menos 18rem, ou numa linha própria logo
   abaixo. A faixa que rola foi pensada para o dedo: na janela em meia tela,
   com mouse de roda, ela não tinha barra nem setas. De 21 a 23/10/2026 as
   categorias quebravam em linhas, todas à vista, mas em 2 ou 3 linhas a faixa
   ficava pesada.
   - Cada seta (2,75rem, a altura mínima dos botões) aparece só quando há
     categorias escondidas daquele lado e rola cerca de 80% da largura visível
     (assets/js/pages/noticias.js). Elas ficam fora do Tab (tabindex="-1" e
     aria-hidden="true"): o Tab passa por cada categoria e o carrossel rola até
     ela, e o scroll-padding faz o botão focado parar antes da seta.
   - O esmaecido fica só no lado que tem categorias escondidas (data-more-start
     e data-more-end, do mesmo script).
   - O carrossel rola por dentro (overflow-x), com padding de 0,25rem para o
     contorno de foco (2 px + 2 px de afastamento) e margem negativa igual, que
     mantém o alinhamento com a ordenação.
   Com toque, a faixa que rola com o dedo continua como acima, sem setas. */
@media (max-width: 1023px) and (hover: hover) and (pointer: fine) {
  .news-filters__strip {
    flex-wrap: wrap;
    gap: 0.5rem;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .news-filters__strip::after {
    content: none;
  }

  .news-filters__carousel {
    position: relative;
    display: block;
    flex: 1 1 18rem;
    min-width: 0;
  }

  .news-filters__categories {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin: -0.25rem;
    padding: 0.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-padding-inline: 3.25rem;
  }

  .news-filters__categories::-webkit-scrollbar {
    display: none;
  }

  .news-filters__carousel[data-more-end] .news-filters__categories {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
  }

  .news-filters__carousel[data-more-start] .news-filters__categories {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3.5rem);
    mask-image: linear-gradient(to right, transparent, #000 3.5rem);
  }

  .news-filters__carousel[data-more-start][data-more-end] .news-filters__categories {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
  }

  .news-filters__arrow:not([hidden]) {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-50%);
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    color: #334155;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
  }

  .news-filters__arrow:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
  }

  .news-filters__arrow--prev {
    left: 0;
  }

  .news-filters__arrow--next {
    right: 0;
  }

  /* Com o foco do teclado numa categoria, as setas e o esmaecido saem e o
     scroll-padding fica só com o espaço do contorno: o botão focado aparece
     inteiro, mesmo onde não caberia entre as duas setas (em 320 e 390 px, as
     categorias mais longas são mais largas que o espaço entre elas). O clique
     com mouse não liga o :focus-visible e as setas continuam. */
  .news-filters .news-filters__carousel:has(:focus-visible) .news-filters__arrow {
    display: none;
  }

  .news-filters .news-filters__carousel:has(:focus-visible) .news-filters__categories {
    -webkit-mask-image: none;
    mask-image: none;
    scroll-padding-inline: 0.25rem;
  }

  /* A ordenação pode encolher até a largura da faixa: onde os dois botões não
     cabem lado a lado com o texto numa linha (320 px), "Mais velha" desce
     para baixo de "A-Z", como a partir de 1024 px. */
  .news-filters__sort {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
  }

  .news-filters__sort .news-sort-button {
    flex-wrap: wrap;
    column-gap: 0.25rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .news-filters__sort .news-sort-button span + span {
    margin-left: 0;
  }
}

/* Reserva da coluna fixa (a mesma conta dos blocos da seção "Listagem: blocos
   sem reserva própria"): o conteúdo termina 0,5rem antes da borda esquerda da
   coluna, descontando o que já existe entre o bloco e a borda,
   (100cqw - 100%) / 2, e a borda de 1px do bloco. O padding original é o
   mínimo. Cada declaração com cqw vem depois da mesma conta com 100vw. */
@media (max-width: 639px) {
  .news-search-card {
    padding-right: max(1.25rem, calc((100% - 100vw) / 2 + 1.5rem + 2.75rem + 0.5rem - 1px));
    padding-right: max(1.25rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem - 1px));
  }

  .news-filters {
    padding-right: max(0.25rem, calc((100% - 100vw) / 2 + 1.5rem + 2.75rem + 0.5rem - 1px));
    padding-right: max(0.25rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem - 1px));
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .news-search-card {
    padding-right: max(1.25rem, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem - 1px));
    padding-right: max(1.25rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - 1px));
  }

  .news-filters {
    padding-right: max(0.25rem, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem - 1px));
    padding-right: max(0.25rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - 1px));
  }
}

.news-filter-button[aria-pressed="true"] {
  background-color: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}

.news-filter-button[aria-pressed="true"] span {
  color: #fff !important;
}

/* Contagem das categorias: slate-500 sobre o branco do botão (o slate-400 do
   HTML ficava em 2,6:1). */
.news-filter-button > span:last-child {
  color: #64748b;
}

/* Categorias com pelo menos 44 px também na coluna lateral, a partir de
   1024 px (antes 42 px; abaixo de 1024 px a faixa já tinha 44). */
.news-filter-button {
  min-height: 2.75rem;
}

.news-sort-button[aria-pressed="true"] {
  background-color: #fff;
  color: var(--color-brand);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* "Ver mais notícias" (desde 23/10/2026): o botão secundário do site
   (.botao--secundario, em assets/css/botoes.css), com a contagem entre
   parênteses das notícias do resultado que ainda não aparecem
   (assets/js/pages/noticias.js). Antes era um link de texto azul, sem borda
   nem fundo, com 36 px. */

/* Até 639 px o botão centralizado passava sob a coluna fixa (voltar ao topo e
   WhatsApp) em 320 e 375 px. O bloco reserva a faixa dela, com a conta da
   pesquisa e da faixa de categorias (acima): o bloco já fica 1rem antes da
   borda (o recuo do container), e o botão centraliza no que sobra. */
@media (max-width: 639px) {
  #carregar-mais-wrapper {
    padding-right: calc(1.5rem + 2.75rem + 0.5rem - 1rem);
    padding-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem - 1rem);
  }
}

/* 15.2 Notícias: cards da listagem e barras decorativas por tipo */
.news-card {
  position: relative;
}

.news-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-brand), var(--color-brand-light));
  opacity: 0;
  transition: opacity 0.2s ease;
}

#news-article-list .news-card::before {
  left: 1.25rem;
  right: 1.25rem;
  height: 5px;
  border-radius: 999px;
  opacity: 1;
}

.news-card:hover::before,
.news-featured-card::before {
  opacity: 1;
}

.news-history-card::before {
  background: linear-gradient(90deg, #475569, #64748b, #94a3b8);
  opacity: 1;
}

.news-card > div:first-of-type > div:first-child > span:not(.category-chip):not([aria-hidden="true"]) {
  text-transform: uppercase;
}

/* 15.3 Notícias: dois modelos. O compacto é o de 3b1694f.
   Os cinco primeiros do resultado ordenado ou filtrado perdem news-card-compact
   no main.js e usam o modelo maior. "Ver mais" só revela; não promove o card. */
.news-card-compact {
  border-color: rgba(21, 101, 192, 0.2) !important;
  border-width: 1px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  padding: 1.25rem !important;
}

/* Cores, faixas e bordas dos quatro tipos (Atualização, Informativo, Urgente e Orientação) em pages/noticias-tipos.css. */

.news-card-compact::before {
  opacity: 1;
}

.news-card-compact:hover::before,
.news-card-compact:focus-within::before {
  opacity: 1;
}

.news-card-compact h2 {
  max-width: none !important;
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
  margin-bottom: 0.5rem !important;
}

.news-card-compact p {
  max-width: none !important;
  color: #64748b !important;
  font-size: 0.875rem !important;
  line-height: 1.625 !important;
  margin-bottom: 1rem !important;
}

/* Tamanho, cantos e fonte dos botões dos cards (os dois modelos): .botao-card,
   em assets/css/botoes.css, desde 23/10/2026 (antes 0,8125rem e 28 px no
   compacto). */
.news-card-compact > a {
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, box-shadow 0.15s ease !important;
}

/* Modelo maior: só quem não tem news-card-compact (os cinco primeiros do resultado). */
#news-article-list .news-card:not(.news-card-compact) {
  border-width: 2px !important;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.1) !important;
  padding: 1.5rem !important;
}

@media (min-width: 768px) {
  #news-article-list .news-card:not(.news-card-compact) {
    padding: 2rem !important;
  }
}

#news-article-list .news-card:not(.news-card-compact) h2 {
  max-width: none !important;
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
  margin-bottom: 1rem !important;
}

@media (min-width: 768px) {
  #news-article-list .news-card:not(.news-card-compact) h2 {
    font-size: 1.875rem !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 1024px) {
  #news-article-list .news-card:not(.news-card-compact) h2 {
    font-size: 2.25rem !important;
    line-height: 1.3 !important;
  }
}

#news-article-list .news-card:not(.news-card-compact) > p {
  max-width: none !important;
  color: #475569 !important;
  font-size: 1rem !important;
  line-height: 1.625 !important;
  margin-bottom: 1.5rem !important;
}

#news-article-list .news-card:not(.news-card-compact) > a {
  text-decoration: none !important;
  box-shadow: none !important;
}

.news-card-compact > a svg[aria-hidden="true"] {
  display: inline-block !important;
  transition: transform 0.15s ease !important;
}

.news-card-compact > a:hover svg[aria-hidden="true"],
.news-card-compact > a:focus-visible svg[aria-hidden="true"] {
  transform: translateX(2px) !important;
}

/* As cores e hover dos botões vêm exclusivamente de pages/noticias-tipos.css. */

/* 15.4 Notícias: chips, categorias e reguladores */
.category-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  padding: 0.25rem 0.625rem;
  border: 0;
  border-radius: 9999px;
  box-shadow: none;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

@media (min-width: 640px) {
  .news-card .category-chip {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

.category-chip--anvisa {
  background-color: #e8f2fb;
  border-color: #bfd7ee;
  color: #174f8f;
}

.category-chip--farmacia-popular {
  background-color: #e7f6ef;
  border-color: #b9e4cc;
  color: #166534;
}

.category-chip--cnes {
  background-color: #e0f2fe;
  border-color: #bae6fd;
  color: #075985;
}

.category-chip--crf {
  background-color: #edf7f2;
  border-color: #c9e6d9;
  color: #176b55;
}

.category-chip--mapa {
  background-color: #ecf6e8;
  border-color: #cfe8bf;
  color: #3f6212;
}

.category-chip--sncr {
  background-color: #e6f5f4;
  border-color: #b9dedb;
  color: #0f5f63;
}

.category-chip--sngpc {
  background-color: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}

.category-chip--visa {
  background-color: #eef2f7;
  border-color: #cbd5e1;
  color: #334155;
}

.category-chip--pf {
  background-color: #e8edf5;
  border-color: #c7d2e3;
  color: #1e3a5f;
}

/* ---------- 17. Notícias: formato destaque (retirado em 12/10/2026) ----------
   Os cinco primeiros cards tinham título, resumo, botão, borda de 2px e padding
   maiores. Com o modelo único (15.3) a regra de borda deles saiu daqui. As regras
   do formato destaque em pages/noticias-tipos.css (seletores com
   :not(.news-card-compact)) não casam com nenhum card da listagem e ficaram sem
   efeito; a folha é compartilhada com as matérias e não foi alterada. */

/* Abaixo de 1360px a coluna fixa cobre a faixa direita do card.
   Título e resumo reservam só essa faixa e seguem na largura que
   sobra. A quebra é a do navegador. Não há corte, altura fixa nem
   regra por matéria ou por posição.
   A reserva é o quanto o conteúdo do card passa da faixa do botão:
   deslocamento do botão, largura dele e 0,5rem de folga, menos o
   recuo lateral do container e a borda e o padding do próprio card.
   Os valores acompanham components.css (botão de 2,75rem até 640px)
   e as classes do HTML (px-4, sm:px-6, lg:px-8). O recuo do card é o
   do próprio card: compacto 1px + 1.25rem; maior 2px + 1.5rem, ou 2rem
   a partir de 768px. A conta deixa 0,5rem (8px) entre o texto e o botão.
   De 1360px em diante a margem do container já livra o botão. */
#news-article-list {
  --news-recuo-container: 1rem;
  --news-botao-flutuante: 3rem;
}

@media (min-width: 640px) {
  #news-article-list {
    --news-recuo-container: 1.5rem;
  }
}

@media (min-width: 1024px) {
  #news-article-list {
    --news-recuo-container: 2rem;
  }
}

@media (max-width: 640px) {
  #news-article-list {
    --news-botao-flutuante: 2.75rem;
  }
}

#news-article-list .news-card {
  --news-recuo-card: calc(1px + 1.25rem);
}

#news-article-list .news-card:not(.news-card-compact) {
  --news-recuo-card: calc(2px + 1.5rem);
}

@media (min-width: 768px) {
  #news-article-list .news-card:not(.news-card-compact) {
    --news-recuo-card: calc(2px + 2rem);
  }
}

/* Layout comum (10/10/2026): a linha de selos e data do card (primeiro
   filho) entra na mesma reserva. O selo "POLÍCIA FEDERAL" do destaque
   ficava sob a coluna a 320px; com a reserva, ele passa para a linha
   seguinte e a data centralizada acompanha a largura que sobra. */
@media (max-width: 1359px) {
  #news-article-list .news-card :is(h2, p),
  #news-article-list .news-card > div:first-child {
    padding-right: max(0px, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + var(--news-botao-flutuante) + 0.5rem - var(--news-recuo-container) - var(--news-recuo-card)));
  }
}

/* ---------- Listagem: blocos sem reserva própria (layout comum) ----------
   Layout comum (10/10/2026). Os cards da lista já reservam a faixa (acima)
   e a coluna de filtros recolhe os botões ao passar por eles
   (assets/js/pages/noticias.js); nada disso muda. Ficavam sob Voltar ao
   topo e WhatsApp a caixa "Orientação técnica" depois da lista, o cartão
   "Sobre o conteúdo" e o CTA final. A faixa é a de components.css:
   max(1.5rem, safe-area), botão de 2.75rem até 640px e 3rem acima, e 0.5rem
   de folga. As seções viram contêineres de consulta (100cqw sem a barra
   clássica) e cada bloco reserva a faixa menos o que já existe entre ele e
   a borda, (100cqw - 100%) / 2, descontando a borda de 1px do cartão; o
   padding original é o mínimo. Até 1023px a caixa de orientação ocupa a
   largura do container e usa a mesma conta; de 1024px em diante ela fica
   na coluna direita da grade, encostada na borda direita do container
   (não centralizada), e reserva a faixa menos o recuo de 2rem do container
   e a margem dele, max(0, (100cqw - 80rem) / 2): a 1100px a última linha
   do parágrafo passava 2,6px sob o WhatsApp. O CTA final recebe a faixa no container, à
   direita até 639px e dos dois lados a partir de 640px. Cada declaração
   com cqw vem depois da mesma conta com 100vw, sem var(). */
body:has(#news-article-list) main > section:not(.news-hero-section) {
  container-type: inline-size;
}

/* Vão entre "Orientação técnica" e "Sobre o conteúdo" (desde 23/10/2026): a
   caixa de orientação tinha margem embaixo (1,5rem; 2,5rem a partir de
   1024 px) e o vão somava ainda o padding de baixo da seção da lista e o de
   cima da seção "Sobre o conteúdo": 88 px em 390, 112 em 960 e 128 em 1440.
   Agora fica só o padding de baixo da seção da lista, 2rem (2,5rem a partir
   de 768 px), o mesmo vão que separa o herói da pesquisa. */
#news-article-list ~ .border-l-4.border-brand {
  margin-bottom: 0;
}

.news-about-section {
  padding-top: 0;
}

body:has(#news-article-list) main > section > .max-w-7xl > .p-5.sm\:p-7.md\:p-8.lg\:p-10 {
  padding-right: max(1.25rem, calc((100% - 100vw) / 2 + 1.5rem + 2.75rem + 0.5rem - 1px));
  padding-right: max(1.25rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem - 1px));
}

@media (max-width: 639px) {
  #news-article-list ~ .border-l-4.border-brand {
    padding-right: max(1.5rem, calc((100% - 100vw) / 2 + 1.5rem + 2.75rem + 0.5rem));
    padding-right: max(1.5rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem));
  }

  body:has(#news-article-list) main > section.bg-brand-dark > .max-w-3xl {
    padding-right: calc(1.5rem + 2.75rem + 0.5rem);
    padding-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem);
  }
}

@media (min-width: 640px) {
  body:has(#news-article-list) main > section > .max-w-7xl > .p-5.sm\:p-7.md\:p-8.lg\:p-10 {
    padding-right: max(1.75rem, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem - 1px));
    padding-right: max(1.75rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - 1px));
  }

  body:has(#news-article-list) main > section.bg-brand-dark > .max-w-3xl {
    padding-inline: max(1.5rem, calc(1.5rem + 3rem + 0.5rem - max(0px, (100vw - 48rem) / 2)));
    padding-inline: max(1.5rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - max(0px, (100cqw - 48rem) / 2)));
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  #news-article-list ~ .border-l-4.border-brand {
    padding-right: max(1.5rem, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem));
    padding-right: max(1.5rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem));
  }
}

@media (min-width: 768px) {
  body:has(#news-article-list) main > section > .max-w-7xl > .p-5.sm\:p-7.md\:p-8.lg\:p-10 {
    padding-right: max(2rem, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem - 1px));
    padding-right: max(2rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - 1px));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #news-article-list ~ .border-l-4.border-brand {
    padding-right: max(2rem, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem));
    padding-right: max(2rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem));
  }
}

@media (min-width: 1024px) {
  body:has(#news-article-list) main > section > .max-w-7xl > .p-5.sm\:p-7.md\:p-8.lg\:p-10 {
    padding-right: max(2.5rem, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem - 1px));
    padding-right: max(2.5rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - 1px));
  }

  body:has(#news-article-list) main > section.bg-brand-dark > .max-w-3xl {
    padding-inline: max(2rem, calc(1.5rem + 3rem + 0.5rem - max(0px, (100vw - 48rem) / 2)));
    padding-inline: max(2rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - max(0px, (100cqw - 48rem) / 2)));
  }
}

@media (min-width: 1024px) {
  #news-article-list ~ .border-l-4.border-brand {
    padding-right: max(2rem, calc(1.5rem + 3rem + 0.5rem - 2rem - max(0px, (100vw - 80rem) / 2)));
    padding-right: max(2rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - 2rem - max(0px, (100cqw - 80rem) / 2)));
  }
}