/* ==========================================================================
   Info Bahêa — Portal de notícias e bastidores do Esporte Clube Bahia
   Paleta tirada direto dos arquivos oficiais da marca (entregues pelo Leiro
   via software-studio-ba/info-bahea-v2, 2026-08-13): Marinho #000046 (fundo
   do escudo oficial — tinta de cabeçalho/rodapé aqui) · Vermelho #ff2222 e
   Dourado #ffd500 (anel e estrelas do escudo oficial; --vermelho usa uma
   leve escurecida, #e0201f, só nos lugares com texto branco em cima, pra
   manter contraste WCAG AA — a cor de marca "pura" ainda aparece no anel do
   próprio logo). Azul-camisa #1b3f8f segue à parte — é a cor do MANTO do
   Bahia (não da marca Info Bahêa), usada só na faixa DIAGONAL, historicamente
   diferente da maioria dos tricolores brasileiros, que usam listras
   horizontais. Fundo "papel" #f5f4ef.
   Display: Big Shoulders Display (condensada, cheia de energia de escudo/
   uniforme) · Corpo: Public Sans (neutra, legível, voz de redação) · Dados/
   placar: Space Mono (relógio de estádio).
   Assinatura: a FAIXA DIAGONAL do manto — aparece só em 3 lugares: fita de
   destaque nas fotos de manchete, régua entre seções e sublinhado de link
   ativo. Fora isso, layout limpo, sem enfeite.
   ========================================================================== */

:root {
  --papel: #f5f4ef;
  --papel-dim: #ece8dd;
  --aco: #000046;
  --aco-soft: #4e5480;
  --azul: #1b3f8f;
  --azul-deep: #0f2c66;
  --vermelho: #e0201f;
  --ouro: #ffd500;
  --linha: rgba(0, 0, 70, 0.14);
  --branco: #fff;

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", Consolas, monospace;

  --container: 1180px;
  --radius: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --sash: linear-gradient(135deg, var(--azul) 0 42%, var(--branco) 42% 50%, var(--vermelho) 50% 100%);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--papel);
  scroll-padding-top: 104px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--aco);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  margin: 0;
  color: var(--aco);
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: none; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

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

/* ---------- HEADER ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--aco);
  color: var(--branco);
  border-bottom: 3px solid transparent;
  border-image: var(--sash) 1;
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.masthead__mark { width: 52px; height: 52px; border-radius: 50%; }

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

.nav__links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 26px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nav__links a {
  position: relative;
  padding: 6px 0;
  color: rgba(255,255,255,0.82);
  transition: color 0.2s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 3px;
  background: var(--sash);
  transition: right 0.25s var(--ease);
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--branco); }
.nav__links a:hover::after,
.nav__links a.is-active::after { right: 0; }

.masthead__social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.masthead__social a {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.masthead__social a:hover { background: var(--vermelho); color: var(--branco); }
.masthead__social svg { width: 17px; height: 17px; }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  color: var(--branco);
  align-items: center;
  justify-content: center;
}
.nav__toggle svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--aco-soft);
  padding: 8px 24px 20px;
}
.mobile-nav a {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: var(--branco);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.mobile-nav__social {
  display: flex;
  gap: 12px;
  padding-top: 16px;
}
.mobile-nav__social a {
  border: none;
  padding: 0;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.mobile-nav__social svg { width: 18px; height: 18px; }

body.nav-open .mobile-nav { display: flex; }

@media (max-width: 900px) {
  .nav__links, .masthead__social { display: none; }
  .nav__toggle { display: flex; margin-left: auto; }
}

/* ---------- AD SLOTS ---------- */

.ad-slot {
  /* Formato IAB "leaderboard" (728x90) — proporção 8:1 fixa via aspect-ratio,
     escalando pra largura do container em telas menores que 728px (mobile
     inclusive) em vez de um min-height solto que deixava a imagem real do
     anunciante distorcer ou cortar dependendo do breakpoint. */
  margin: 28px auto;
  padding: 4px 14px;
  width: 100%;
  max-width: 728px;
  aspect-ratio: 728 / 90;
  border: 1px dashed var(--linha);
  border-radius: var(--radius);
  background: var(--papel-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aco-soft);
}
.ad-slot--tall {
  /* Sidebar fica fora do padrão 728x90 desta issue — mantém o formato
     vertical solto que já tinha antes (padding original, sem o aperto
     vertical que o formato 728x90 raso precisou). */
  padding: 18px;
  max-width: none;
  aspect-ratio: auto;
  min-height: 220px;
}
.ad-slot--live {
  padding: 0;
  border-style: solid;
  background: var(--branco);
  overflow: hidden;
}
.ad-slot--live a { display: block; width: 100%; height: 100%; }
.ad-slot--live img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- DESTAQUE: carrossel + feed youtube ---------- */

.destaque { margin-top: 28px; }
.destaque__grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 22px;
  align-items: stretch;
}

.carrossel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--aco);
  min-height: 420px;
}
.carrossel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease);
}
.carrossel__slide.is-active { opacity: 1; visibility: visible; position: relative; }
.carrossel__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carrossel__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(18,32,47,0.94) 0%, rgba(18,32,47,0.35) 55%, rgba(18,32,47,0.05) 100%);
}
.carrossel__ribbon {
  position: absolute;
  top: 20px; left: -34px;
  width: 160px;
  padding: 5px 0;
  background: var(--sash);
  color: var(--branco);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-40deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.carrossel__body {
  position: relative;
  padding: 32px 28px 56px;
  color: var(--branco);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 420px;
  justify-content: flex-end;
}
.carrossel__cat {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ouro);
}
.carrossel__body h1, .carrossel__body h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  color: var(--branco);
  max-width: 34ch;
}
.carrossel__dek { color: rgba(255,255,255,0.78); max-width: 46ch; font-size: 15px; }

.carrossel__dots {
  position: absolute;
  bottom: 20px; left: 28px;
  display: flex;
  gap: 8px;
}
.carrossel__dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.carrossel__dots button.is-active { background: var(--branco); width: 22px; border-radius: 5px; }

.carrossel__nav {
  /* As duas setas juntas no canto oposto à fita "Manchete" (top-left) —
     título/dek são ancorados embaixo (flex-end) e limitados em largura
     (max-width: 34ch/46ch), então o canto superior direito fica livre de
     texto em qualquer manchete, ao contrário do meio da lateral (testado
     e via de regra colidia com títulos de 3-4 linhas). */
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.carrossel__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mesmo tom "aço" translúcido do .carrossel__scrim (não o marinho de
     marca) — as setas são um controle sobre a foto, não um elemento de
     identidade, então ficam discretas nesse mesmo registro. Opacidade mais
     baixa que a primeira versão (essa já não fica em cima do texto, então
     não precisa de tanto contraste pra se destacar) — o blur ainda ajuda
     contra fotos muito claras. */
  background: rgba(18, 32, 47, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--branco);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.carrossel__arrow svg { width: 17px; height: 17px; }
.carrossel__arrow:hover { background: rgba(18, 32, 47, 0.7); }
.carrossel__arrow:active { transform: scale(0.9); }

@media (max-width: 560px) {
  .carrossel__nav { top: 10px; right: 10px; gap: 6px; }
  .carrossel__arrow { width: 30px; height: 30px; }
  .carrossel__arrow svg { width: 14px; height: 14px; }
}

.feed-card {
  border-radius: var(--radius);
  background: var(--branco);
  border: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.feed-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--aco);
  color: var(--branco);
}
.feed-card__head svg { width: 18px; height: 18px; color: var(--ouro); }
.feed-card__head h2 {
  font-size: 15px;
  letter-spacing: 0.04em;
}
.feed-card--youtube .feed-card__head { justify-content: space-between; }
.feed-card__head-title { display: flex; align-items: center; gap: 10px; }
.feed-card__cta {
  margin: 12px 16px 16px;
  align-self: flex-start;
}

/* ---------- NO CANAL: vídeo em destaque reproduzível na sidebar ---------- */

.yt-sidebar__featured {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--aco);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.yt-sidebar__featured img { width: 100%; height: 100%; object-fit: cover; }
.yt-sidebar__featured iframe { width: 100%; height: 100%; display: block; }
.yt-sidebar__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,70,0.88) 0%, rgba(0,0,70,0.2) 45%, rgba(0,0,70,0.05) 100%);
}
.yt-sidebar__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--vermelho);
  display: grid;
  place-items: center;
  color: var(--branco);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.yt-sidebar__play svg { width: 18px; height: 18px; margin-left: 2px; }
.yt-sidebar__featured:hover .yt-sidebar__play {
  background: var(--azul);
  transform: translate(-50%, -50%) scale(1.08);
}
.yt-sidebar__featured-title {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  color: var(--branco);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.yt-sidebar__grid {
  list-style: none;
  margin: 6px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  background: var(--aco);
}
.yt-sidebar__grid li a {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--aco);
}
.yt-sidebar__grid li a img { width: 100%; height: 100%; object-fit: cover; }
.yt-sidebar__grid-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,70,0.9) 0%, rgba(0,0,70,0.15) 55%, transparent 100%);
}
.yt-sidebar__grid-title {
  position: absolute;
  left: 8px; right: 8px; bottom: 6px;
  color: var(--branco);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .yt-showcase__list { grid-template-columns: 1fr; }
}

/* ---------- LISTA DE NOTÍCIAS + SIDEBAR ---------- */

.feed-section { margin-top: 8px; }
.feed-section__grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 22px;
  align-items: start;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 3px;
  background: var(--sash);
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.news-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linha);
}
.news-row__frame {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--aco);
}
/* Mesmo bug do .article__frame (ver histórico) — sem isso a imagem ficava no
   tamanho natural dela dentro do quadro, sobrando --aco visível nas bordas.
   Usada tanto na Home ("Últimas notícias") quanto em /noticias/ — mesmo
   elemento (.news-row), mesmo script.js. */
.news-row__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-row__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vermelho);
}
.news-row h3 {
  font-size: 21px;
  margin: 6px 0 8px;
  text-transform: none;
  letter-spacing: 0;
}
.news-row p {
  color: var(--aco-soft);
  font-size: 14.5px;
}
.news-row time {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--aco-soft);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feed-card__x-embed {
  padding: 10px 16px;
  min-height: 260px;
}
.feed-card__x-embed a.twitter-timeline {
  font-size: 13.5px;
  color: var(--aco-soft);
}
.feed-card__x-fallback[hidden] {
  display: none;
}
.feed-card__x-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  min-height: 240px;
  text-align: center;
  padding: 16px;
}
.feed-card__x-fallback svg {
  width: 32px; height: 32px;
  color: var(--aco-soft);
  opacity: 0.6;
}
.feed-card__x-fallback p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--aco-soft);
  max-width: 220px;
}

.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 16px;
}
.insta-grid div {
  aspect-ratio: 1;
  border-radius: 3px;
  overflow: hidden;
}

.follow-note {
  margin: 0 16px 16px;
  font-size: 12.5px;
  color: var(--aco-soft);
}

/* ---------- BOTÕES ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}
.btn-primary { background: var(--vermelho); color: var(--branco); }
.btn-primary:hover { background: var(--azul); transform: translateY(-1px); }
.btn-ghost { border: 1.5px solid var(--aco); color: var(--aco); }
.btn-ghost:hover { background: var(--aco); color: var(--branco); }
.btn-gold { background: var(--ouro); color: var(--aco); }
.btn-gold:hover { background: var(--branco); transform: translateY(-1px); }
.btn-small { padding: 7px 14px; font-size: 12px; }

/* ---------- PRÓX. JOGOS + CLASSIFICAÇÃO ---------- */

.matchday { margin: 44px auto 56px; }
.matchday__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 22px;
}
.widget {
  /* Fundo azul-marca (pedido do Leiro, 2026-08-27) — mesmo marinho do
     header/footer, estendendo a identidade pros dois widgets de dado real.
     --widget-muted/--widget-line são a versão "sobre fundo escuro" de
     --aco-soft/--linha (pensados pra --papel/--branco, ilegíveis aqui),
     mesma técnica já usada em .carrossel__dek (branco translúcido) — não
     um token novo solto, só a mesma solução aplicada de novo. */
  --widget-muted: rgba(255, 255, 255, 0.64);
  --widget-line: rgba(255, 255, 255, 0.14);
  background: var(--aco);
  border: 1px solid var(--widget-line);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
  color: var(--branco);
}
.widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.widget__head h2 { font-size: 19px; color: var(--branco); }
.widget__sample {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Vermelho de marca (#e0201f) puro fica em ~4:1 sobre --aco — abaixo do
     AA de 4.5:1 pra texto pequeno. Aclarado só aqui, mesmo espírito da
     nota already-documentada sobre #ff2222 vs #e0201f no CLAUDE.md. */
  color: #ff4d4d;
  border: 1px solid #ff4d4d;
  border-radius: 4px;
  padding: 3px 7px;
}
.widget__note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--widget-muted);
}

.jogos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.jogo-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}
.jogo-item__competicao {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--widget-muted);
  text-transform: uppercase;
  width: 72px;
  flex-shrink: 0;
}
.jogo-item__confronto {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
}
.jogo-item__data {
  font-family: var(--font-mono);
  font-size: 12px;
  /* --azul (#1b3f8f) some sobre --aco (~2:1) — dourado é o acento
     "pontual" que a própria paleta da marca reserva pra isso, e garante
     contraste alto (~13.6:1) pro horário do jogo. */
  color: var(--ouro);
  text-align: right;
  flex-shrink: 0;
}

.tabela-classificacao { font-family: var(--font-mono); font-size: 12.5px; }
.tabela-classificacao th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--widget-muted);
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--widget-line);
}
.tabela-classificacao td {
  padding: 8px;
  border-bottom: 1px solid var(--widget-line);
}
.tabela-classificacao tr:last-child td { border-bottom: none; }
.tabela-classificacao tr.is-bahia {
  /* 0.08 era pensado pro fundo --papel-dim (creme); sobre --aco quase
     não aparecia — subiu pra 0.22 pra continuar como destaque visível. */
  background: rgba(224, 32, 31, 0.22);
  font-weight: 700;
}
.tabela-classificacao td:first-child, .tabela-classificacao th:first-child { text-align: center; width: 28px; }
.tabela-classificacao td:first-child { border-left: 3px solid transparent; }
.tabela-classificacao tr.zona-liberta td:first-child { border-left-color: #1b7a3d; }
.tabela-classificacao tr.zona-liberta-pre td:first-child { border-left-color: #74c48f; }
.tabela-classificacao tr.zona-sula td:first-child { border-left-color: var(--ouro); }
.tabela-classificacao tr.zona-rebaixamento td:first-child { border-left-color: var(--vermelho); }
.tabela-classificacao .col-time { font-family: var(--font-body); font-weight: 600; }

/* ---------- PÁGINA DE NOTÍCIA ---------- */

.article { max-width: 760px; margin: 40px auto 0; }
.article__cat {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vermelho);
}
.article h1 {
  font-size: clamp(30px, 5vw, 48px);
  margin: 10px 0 14px;
}
.article__dek {
  font-size: 18px;
  color: var(--aco-soft);
  font-family: var(--font-body);
  margin-bottom: 22px;
}
.article__meta {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--aco-soft);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 24px;
}
.article__frame {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
  aspect-ratio: 16/9;
  background: var(--aco);
}
/* Sem isso a imagem ficava no tamanho natural dela dentro do quadro 16:9,
   deixando o fundo --aco (azul-marinho) visível ao redor — o "quadro azul
   vazio" reportado pelo Leiro. */
.article__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article__body { display: flex; flex-direction: column; gap: 18px; font-size: 17px; line-height: 1.75; }
.article__body p { color: #1f2f42; }
/* A partir daqui, `bodyHtml` (conteúdo real vindo do WordPress) pode trazer
   imagem solta, embed (YouTube etc.), citação e lista — sem regra própria,
   cada um herdava um estilo bem diferente do resto do site. */
.article__body img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; }
.article__body figure { margin: 0; }
.article__body figcaption { font-size: 13px; color: var(--aco-soft); margin-top: 6px; }
.article__body iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: var(--radius); }
.article__body blockquote {
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--vermelho);
  font-style: italic;
  color: var(--aco-soft);
}
.article__body ul, .article__body ol { padding-left: 22px; }
.article__body a { color: var(--azul); text-decoration: underline; }

/* ---------- PÁGINA DE NOTÍCIAS (LISTAGEM) ---------- */

.noticias-page { max-width: 900px; margin: 40px auto 64px; }
.noticias-page__title { font-size: clamp(30px, 5vw, 44px); margin-bottom: 10px; }
.noticias-page__intro { color: var(--aco-soft); font-size: 15px; margin-bottom: 22px; }
.noticias-page__empty { color: var(--aco-soft); font-size: 14.5px; padding: 24px 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--linha);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--aco-soft);
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.chip:hover { border-color: var(--aco); color: var(--aco); }
.chip.is-active { background: var(--vermelho); border-color: var(--vermelho); color: var(--branco); }

.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.pagination__btn {
  min-width: 36px;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--linha);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--aco);
  text-align: center;
}
.pagination__btn:hover:not(:disabled) { border-color: var(--aco); }
.pagination__btn.is-active { background: var(--aco); border-color: var(--aco); color: var(--branco); }
.pagination__btn:disabled { color: var(--aco-soft); opacity: 0.5; cursor: not-allowed; }

/* ---------- PLACEHOLDER: Monte seu Time / Simulador ---------- */

.building {
  max-width: 620px;
  margin: 64px auto 96px;
  text-align: center;
  padding: 0 24px;
}
.building__badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--sash);
  color: var(--branco);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.building h1 { font-size: 36px; margin-bottom: 14px; }
.building p { color: var(--aco-soft); font-size: 16px; margin-bottom: 24px; }

/* ---------- FOOTER ---------- */

.site-footer {
  margin-top: 40px;
  background: var(--aco);
  color: rgba(255,255,255,0.8);
  border-top: 3px solid transparent;
  border-image: var(--sash) 1;
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 30px 0;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand__mark { width: 44px; height: 44px; border-radius: 50%; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13.5px; }
.footer-links a:hover { color: var(--ouro); }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.footer-social svg { width: 15px; height: 15px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 16px 0;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-bottom a { color: var(--ouro); }

/* ---------- REVEAL ---------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- RESPONSIVO ---------- */

@media (max-width: 900px) {
  .destaque__grid, .feed-section__grid, .matchday__grid { grid-template-columns: 1fr; }
  .carrossel, .carrossel__body { min-height: 320px; }
  .news-row { grid-template-columns: 120px 1fr; }
  .news-row h3 { font-size: 17px; }
}

@media (max-width: 560px) {
  .masthead__bar { height: 64px; }
  .masthead__mark { width: 42px; height: 42px; }
  .news-row { grid-template-columns: 1fr; }
  .news-row__frame { aspect-ratio: 16/9; }
  .article { margin-top: 24px; }

  /* Fita "Manchete" é fixa (top/left/width em px, não escala com a tela) —
     numa manchete de 3-4 linhas nesse breakpoint ela ficava por cima da
     categoria (ex. "Análise"), primeira linha de texto do card. Encolhida
     só aqui e o texto ganha mais respiro no topo pra sempre nascer abaixo
     dela, independente do tamanho do título daquele slide. */
  .carrossel__ribbon { top: 14px; left: -30px; width: 130px; font-size: 10px; padding: 4px 0; }
  .carrossel__body { padding-top: 92px; }
}