/* =========================================================================
   Mesa de RPG v2, base
   Depende de tokens.css. Nenhuma sombra neste arquivo, de proposito:
   a elevacao vem de cor de papel e de regua.
   ========================================================================= */

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

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

body {
  margin: 0;
  background-color: var(--fundo);
  color: var(--texto);
  font-family: var(--f-corpo);
  font-size: var(--t-base);
  line-height: var(--entrelinha-corpo);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grao de papel: um feTurbulence inline, nenhum arquivo raster. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grao-opacidade);
  mix-blend-mode: var(--grao-mistura);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

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

/* ---------- Tipografia base ---------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: var(--entrelinha-titulo);
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--e-4); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Utilitarios de tipo. font-stretch mapeia o eixo wdth de Anybody. */
.display     { font-family: var(--f-display); }
.comprimido  { font-stretch: 72%; }
.normal-wd   { font-stretch: 100%; }
.expandido   { font-stretch: 125%; }

.rotulo {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-suave);
  line-height: 1.3;
}

.meta {
  font-family: var(--f-rotulo);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  line-height: 1.5;
}

.olho {
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--texto-suave);
  max-width: 58ch;
}

.leitura { max-width: var(--medida); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pular-para-conteudo {
  position: absolute; left: var(--e-4); top: -100vh;
  z-index: 99;
  background: var(--realce); color: var(--realce-texto);
  padding: var(--e-3) var(--e-4);
  font-family: var(--f-rotulo); font-weight: 700;
}
.pular-para-conteudo:focus { top: var(--e-4); }

/* ---------- Estrutura ------------------------------------------------ */

.envelope {
  width: min(100% - var(--gutter) * 2, var(--pagina));
  margin-inline: auto;
}

.grade-milimetrada {
  background-image:
    repeating-linear-gradient(to right,  var(--grade) 0 1px, transparent 1px 4mm),
    repeating-linear-gradient(to bottom, var(--grade) 0 1px, transparent 1px 4mm);
}

.regua      { border: 0; border-top: 1px solid var(--regua); margin: var(--e-6) 0; }
.regua--dupla { border: 0; border-top: 3px double var(--regua-forte); margin: var(--e-6) 0; }

/* ---------- Cabecalho ------------------------------------------------ */

.topo {
  border-bottom: 3px double var(--regua-forte);
  background: var(--fundo-sutil);
}

.cabecalho {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-5);
  padding: var(--e-5) 0;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 88%;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--marca);
  text-decoration: none;
}
.marca:hover { color: var(--link-hover); }

/* O simbolo original tem 120x90 e nao aguenta ampliacao: fica em 44px de
   altura, que e o limite antes de amolecer em tela retina. */
.marca__simbolo {
  height: 44px;
  width: auto;
  flex: none;
}

.marca__texto { display: block; }


.navegacao { display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: center; }

.navegacao a {
  font-family: var(--f-display);
  font-stretch: 118%;
  font-weight: 600;
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--texto);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.navegacao a:hover, .navegacao a[aria-current="page"] { border-color: var(--realce); color: var(--link); }

.botao-tema {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--regua-forte);
  padding: var(--e-2) var(--e-3);
  cursor: pointer;
  transition: background var(--dur-rapida) var(--ease);
}
.botao-tema:hover { background: var(--fundo-fundo); }

/* ---------- Carimbo -------------------------------------------------- */

.carimbo {
  display: inline-block;
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.3em 0.7em;
  border: 2px double currentColor;
  color: var(--link);
  background: transparent;
  transform: rotate(-2.2deg);
  transform-origin: left center;
  white-space: nowrap;
}
.carimbo--ouro   { color: var(--realce-texto); background: var(--realce); border-color: var(--ouro-48); }
.carimbo--claro  { color: var(--c-papel); border-color: currentColor; }
.carimbo--aberto { color: var(--realce-texto); background: var(--realce); border-color: var(--ouro-48); }
/* Sem opacity: ela derruba o contraste de um jeito que a medicao nao pega. */
.carimbo--fechado{ color: var(--texto-tenue); border-color: var(--regua-forte); }
.carimbo--direita { transform: rotate(2.4deg); transform-origin: right center; }

/* ---------- Campo de ficha (componente mais reutilizado) ------------- */

.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e-4) var(--e-5);
  margin: var(--e-5) 0;
}

.campo { display: grid; gap: 0.15rem; }

.campo__rotulo {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-suave);
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--regua);
}

.campo__valor {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 92%;
  font-size: var(--t-md);
  line-height: 1.2;
  padding-top: 0.25em;
}

.campo__valor--pequeno { font-size: var(--t-base); }

/* ---------- Capa tipografica gerada ---------------------------------- */

.capa {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--e-3);
  aspect-ratio: 16 / 9;
  padding: clamp(0.9rem, 0.5rem + 1.6vw, 1.6rem);
  background-color: var(--sis, var(--c-vinho));
  color: var(--c-papel);
  border: 1px solid var(--regua-forte);
  overflow: hidden;
  isolation: isolate;
}

.capa::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(to right,  rgb(255 255 255 / 0.13) 0 1px, transparent 1px 4mm),
    repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.13) 0 1px, transparent 1px 4mm);
}

.capa > * { position: relative; z-index: 1; }

.capa__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-3); }

.capa__titulo {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 72%;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.005em;
  font-size: clamp(1.35rem, 0.7rem + 3.1vw, 3.1rem);
  align-self: center;
  margin: 0;
  color: inherit;
}

.capa__rodape {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  font-family: var(--f-rotulo);
  font-size: clamp(0.62rem, 0.5rem + 0.35vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-top: 1px solid rgb(255 255 255 / 0.35);
  padding-top: var(--e-2);
  opacity: 0.92;
}

.capa--alta { aspect-ratio: 4 / 5; }
.capa--larga { aspect-ratio: 21 / 9; }
.capa--miniatura { aspect-ratio: 1 / 1; }
.capa--miniatura .capa__titulo { font-size: clamp(0.9rem, 0.6rem + 1vw, 1.3rem); }
.capa--miniatura .capa__rodape { display: none; }

/* Variante com foto real: mesma moldura, a foto entra no lugar da cor.
   O titulo e a faixa de metadado somem, porque sobre foto nao da para
   garantir contraste. Quem sobrevive e o carimbo, e so na versao solida. */
.capa--foto { background: var(--fundo-fundo); }
.capa--foto::before { display: none; }              /* sem grade sobre a foto */
.capa--foto .capa__titulo,
.capa--foto .capa__rodape { display: none; }

.capa__foto {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Credito e legenda vao ABAIXO da moldura, nunca por cima da imagem. */
.capa-legenda {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--texto-suave);
  border-top: 1px solid var(--regua);
  padding-top: var(--e-2);
  margin-top: var(--e-2);
}
.capa-legenda b { font-weight: 700; color: var(--texto); }

/* Cores de sistema aplicadas por classe. */
.sis-dd         { --sis: var(--sis-dd); }
.sis-tormenta   { --sis: var(--sis-tormenta); }
.sis-vampiro    { --sis: var(--sis-vampiro); }
.sis-ordem      { --sis: var(--sis-ordem); }
.sis-pathfinder { --sis: var(--sis-pathfinder); }
.sis-cthulhu    { --sis: var(--sis-cthulhu); }
.sis-delta      { --sis: var(--sis-delta); }
.sis-savage     { --sis: var(--sis-savage); }
.sis-critical   { --sis: var(--sis-critical); }
.sis-discworld  { --sis: var(--sis-discworld); }
.sis-noticias   { --sis: var(--sis-noticias); }
.sis-crowd      { --sis: var(--sis-crowd); }

/* Selo de categoria: usa a cor do sistema como texto sobre papel. */
.selo {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sis, var(--c-vinho));
  text-decoration: none;
}
.selo::before {
  content: ""; width: 0.62em; height: 0.62em;
  background: var(--sis, var(--c-vinho));
  border: 1px solid currentColor;
}
.selo:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* No escuro a cor de sistema fica escura demais para texto: usa o ouro. */
:root[data-tema="escuro"] .selo { color: var(--c-ouro); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .selo { color: var(--c-ouro); }
}

/* ---------- Secoes numeradas (sistema de manual) ---------------------- */

.secao { margin-top: var(--e-8); }

.secao__cabeca {
  display: flex; align-items: baseline; gap: var(--e-2) var(--e-3);
  flex-wrap: wrap;               /* no celular o link de secao cai para baixo */
  border-bottom: 3px double var(--regua-forte);
  padding-bottom: var(--e-2);
  margin-bottom: var(--e-5);
}

.secao__num {
  font-family: var(--f-rotulo);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--texto-suave);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.secao__titulo {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 122%;
  font-size: var(--t-lg);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
}

.secao__link {
  margin-left: auto;
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* ---------- Manchete de capa (primeira dobra) ------------------------ */

.capa-do-dia {
  padding: var(--e-7) 0 var(--e-6);
  border-bottom: 3px double var(--regua-forte);
}

.capa-do-dia__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--e-6) var(--e-7);
  align-items: center;
}

.manchete {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 74%;
  font-size: var(--t-3xl);
  line-height: 0.9;
  letter-spacing: -0.018em;
  margin: var(--e-4) 0 var(--e-4);
  text-wrap: balance;
}
.manchete a { color: inherit; text-decoration: none; }
.manchete a:hover { color: var(--link); }

.assinatura {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  font-family: var(--f-rotulo);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--e-4);
}

/* Chamadas de capa, com condutor pontilhado, como sumario de manual. */
.chamadas { margin: var(--e-6) 0 0; padding: 0; list-style: none; }
.chamadas li { border-top: 1px solid var(--regua); }
.chamadas li:last-child { border-bottom: 1px solid var(--regua); }

.chamada {
  display: flex; align-items: baseline; gap: var(--e-3);
  padding: var(--e-3) 0;
  text-decoration: none;
  color: var(--texto);
}
.chamada:hover .chamada__titulo { color: var(--link); }

.chamada__num {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--texto-suave);
  min-width: 2.4em;
}

.chamada__titulo {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 92%;
  font-size: var(--t-base);
  line-height: 1.2;
  transition: color var(--dur-rapida) var(--ease);
}

.chamada__conduto {
  flex: 1 1 2rem;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--regua-forte);
  transform: translateY(-0.28em);
}

.chamada__marca {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
  white-space: nowrap;
}

/* ---------- Lista de ultimas (sem cartao) ---------------------------- */

.ultimas { list-style: none; margin: 0; padding: 0; }

.ultimas > li { border-top: 1px solid var(--regua); }
.ultimas > li:last-child { border-bottom: 1px solid var(--regua); }

.item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--e-4);
  padding: var(--e-4) 0;
  align-items: start;
}

.item__capa { grid-row: span 2; }

.item__titulo {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 88%;
  font-size: var(--t-md);
  line-height: 1.12;
  margin: 0.25rem 0 0.4rem;
}
.item__titulo a { color: inherit; text-decoration: none; }
.item__titulo a:hover { color: var(--link); }

.item__resumo { font-size: var(--t-sm); color: var(--texto-suave); margin: 0 0 0.4rem; max-width: 62ch; }

/* Grade de destaques dentro de um bloco de editoria. */
.blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-6) var(--e-5);
}

.bloco__titulo {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 86%;
  font-size: var(--t-md);
  line-height: 1.14;
  margin: var(--e-3) 0 var(--e-2);
}
.bloco__titulo a { color: inherit; text-decoration: none; }
.bloco__titulo a:hover { color: var(--link); }

/* ---------- Card de financiamento (o unico cartao do sistema) -------- */

.financiamento {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-4);
  background: var(--fundo-elevado);
  border: 1px solid var(--regua-forte);
}

.financiamento__titulo {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 88%;
  font-size: var(--t-md);
  line-height: 1.14;
  margin: 0;
}
.financiamento__titulo a { color: inherit; text-decoration: none; }
.financiamento__titulo a:hover { color: var(--link); }

.barra {
  height: 14px;
  background: var(--fundo-fundo);
  border: 1px solid var(--regua-forte);
  overflow: hidden;
}
.barra__preenchimento {
  height: 100%;
  max-width: 100%;   /* projeto acima da meta nao vaza a barra; o numero conta */
  background: var(--realce);
  background-image: repeating-linear-gradient(
    45deg, rgb(0 0 0 / 0.14) 0 4px, transparent 4px 8px
  );
}

.financiamento__numeros {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
  font-family: var(--f-rotulo);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.financiamento__numeros strong { color: var(--texto); font-weight: 700; }

/* ---------- Botoes e CTA --------------------------------------------- */

.botao {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: var(--e-3) var(--e-5);
  border: 2px solid var(--link);
  color: var(--link);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.botao:hover { background: var(--link); color: var(--fundo); }

.botao--cheio {
  background: var(--realce);
  border-color: var(--ouro-48);
  color: var(--realce-texto);
}
.botao--cheio:hover { background: var(--ouro-84); color: var(--realce-texto); }

.botao--largo { display: block; width: 100%; text-align: center; }

/* Box de CTA duplo: ouro como preenchimento, texto tinta (6,6:1). */
.cta-duplo {
  margin: var(--e-7) 0;
  padding: var(--e-5);
  background: var(--realce);
  color: var(--realce-texto);
  border: 1px solid var(--ouro-48);
}

.cta-duplo__titulo {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 92%;
  font-size: var(--t-lg);
  color: inherit;
  margin: 0 0 var(--e-2);
}

.cta-duplo__texto { font-size: var(--t-sm); margin: 0 0 var(--e-4); max-width: 60ch; color: inherit; }

.cta-duplo__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }

.cta-duplo .botao {
  border-color: var(--realce-texto);
  color: var(--realce-texto);
}
.cta-duplo .botao:hover { background: var(--realce-texto); color: var(--realce); }

.divulgacao {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  margin: var(--e-3) 0 0;
  opacity: 0.85;
}

/* ---------- Resumo em bullets (topo da materia) ---------------------- */

.resumo {
  background: var(--fundo-elevado);
  border-top: 3px double var(--regua-forte);
  border-bottom: 3px double var(--regua-forte);
  padding: var(--e-5);
  margin: var(--e-6) 0;
}

.resumo__rotulo {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--texto-suave);
  margin: 0 0 var(--e-3);
}

.resumo ul { margin: 0; padding-left: 1.1em; }
.resumo li { margin-bottom: var(--e-2); font-size: var(--t-base); }
.resumo li::marker { color: var(--realce); }

/* ---------- Slot de anuncio (reservado, desativado) ------------------ */

.slot-anuncio {
  display: grid;
  place-items: center;
  border: 1px dashed var(--regua-forte);
  background: var(--fundo-sutil);
  color: var(--texto-tenue);
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: var(--e-6) 0;
}
.slot-anuncio--topo    { min-height: 90px; }
.slot-anuncio--materia { min-height: 250px; }
.slot-anuncio--lateral { min-height: 600px; }

/* ---------- Cabeca de materia e de pagina -----------------------------
   Titulo e linha de apoio centralizados, ocupando mais largura que a
   coluna de leitura. O corpo do texto continua alinhado a esquerda: o
   centralizado serve para a entrada, nunca para texto corrido.        */

.cabeca {
  text-align: center;
  padding: var(--e-7) 0 var(--e-5);
}

.cabeca__interno {
  max-width: 60rem;          /* bem mais largo que os 68ch da leitura */
  margin-inline: auto;
}

.cabeca__titulo {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: var(--t-2xl);
  line-height: 0.94;
  letter-spacing: -0.015em;
  margin: var(--e-4) 0;
  text-wrap: balance;
}

.cabeca .olho {
  max-width: 74ch;           /* era 58ch: aproveita a largura disponivel */
  margin-inline: auto;
}

.cabeca .assinatura,
.cabeca .filtros { justify-content: center; }

.cabeca .selo,
.cabeca .carimbo { transform-origin: center; }

/* A ficha volta a ser alinhada a esquerda: campo rotulado centralizado
   fica ilegivel, porque o olho perde a coluna de leitura. */
.cabeca .ficha {
  text-align: left;
  max-width: 52rem;
  margin-inline: auto;
}

.cabeca--arquivo { border-bottom: 3px double var(--regua-forte); }

/* ---------- Corpo da materia ----------------------------------------- */

.materia { padding: var(--e-6) 0 var(--e-8); }

.grade-lateral, .materia__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--e-7);
  align-items: start;
}

/* Cinto e suspensorio contra estouro de coluna em grid. */
.grade-lateral > *, .materia__grade > *,
.capa-do-dia__grade > *, .blocos > * { min-width: 0; }

.corpo { max-width: var(--medida); }
.corpo > h2 { font-size: var(--t-xl); font-stretch: 88%; margin: var(--e-7) 0 var(--e-3); }
.corpo > h3 { font-size: var(--t-lg); font-stretch: 94%; margin: var(--e-6) 0 var(--e-3); }
.corpo > p  { margin-bottom: var(--e-4); }
.corpo > ul, .corpo > ol { margin: 0 0 var(--e-4); padding-left: 1.3em; }
.corpo li { margin-bottom: var(--e-2); }

.corpo blockquote {
  margin: var(--e-6) 0;
  padding: var(--e-4) 0;
  border-top: 1px solid var(--regua-forte);
  border-bottom: 1px solid var(--regua-forte);
  font-size: var(--t-md);
  font-style: italic;
  color: var(--texto-suave);
}

.trilha {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
  padding: var(--e-4) 0 0;
}
.trilha a { color: inherit; }
.trilha span { margin: 0 0.5em; opacity: 0.6; }

.lateral { display: grid; gap: var(--e-6); position: sticky; top: var(--e-4); }

.lateral__titulo {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 120%;
  font-size: var(--t-base);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 3px double var(--regua-forte);
  padding-bottom: var(--e-2);
  margin: 0 0 var(--e-3);
}

.ranking { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.ranking li {
  counter-increment: r;
  display: grid; grid-template-columns: 2.2em 1fr; gap: var(--e-2);
  padding: var(--e-3) 0;
  border-top: 1px solid var(--regua);
}
.ranking li:first-child { border-top: 0; }
.ranking li::before {
  content: counter(r, decimal-leading-zero);
  font-family: var(--f-rotulo); font-weight: 700; font-size: var(--t-sm);
  color: var(--realce-suave);
  color: var(--texto-suave);
}
.ranking a {
  font-family: var(--f-display); font-weight: 600; font-stretch: 90%;
  font-size: var(--t-sm); line-height: 1.2; color: inherit; text-decoration: none;
}
.ranking a:hover { color: var(--link); }

/* ---------- Tabela de comparativo ------------------------------------ */

.tabela-envelope { overflow-x: auto; margin: var(--e-6) 0; }

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  min-width: 560px;
}
.tabela caption {
  text-align: left;
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-suave);
  padding-bottom: var(--e-3);
}
.tabela th, .tabela td {
  text-align: left;
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--regua);
  vertical-align: top;
}
.tabela thead th {
  font-family: var(--f-display);
  font-weight: 800; font-stretch: 108%;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--t-sm);
  border-bottom: 3px double var(--regua-forte);
}
.tabela tbody th {
  font-family: var(--f-rotulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--t-xs);
  color: var(--texto-suave);
  width: 12rem;
}
.tabela tbody tr:nth-child(even) { background: var(--fundo-sutil); }

/* ---------- Formularios (quiz, calculadora, contato) ----------------- */

.formulario { display: grid; gap: var(--e-5); }

.pergunta {
  border: 0; margin: 0; padding: var(--e-5) 0;
  border-top: 1px solid var(--regua);
}
.pergunta:first-of-type { border-top: 0; padding-top: 0; }

.pergunta legend {
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 92%;
  font-size: var(--t-md);
  line-height: 1.2;
  padding: 0;
  margin-bottom: var(--e-4);
}

.opcoes { display: grid; gap: var(--e-2); }

.opcao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--regua);
  background: var(--fundo-elevado);
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease), background var(--dur-rapida) var(--ease);
}
.opcao:hover { border-color: var(--regua-marca); }
.opcao input { margin-top: 0.35em; accent-color: var(--link); }
.opcao:has(input:checked) { border-color: var(--realce); background: var(--realce-suave); }
.opcao__texto { font-size: var(--t-sm); line-height: 1.45; }

.campo-entrada { display: grid; gap: var(--e-2); }
.campo-entrada label {
  font-family: var(--f-rotulo); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--texto-suave);
}
.campo-entrada input, .campo-entrada textarea, .campo-entrada select {
  font-family: var(--f-corpo);
  font-size: var(--t-base);
  color: var(--texto);
  background: var(--fundo-elevado);
  border: 1px solid var(--regua-forte);
  padding: var(--e-3);
  width: 100%;
}
.campo-entrada input:focus-visible,
.campo-entrada textarea:focus-visible { border-color: var(--foco); }

.ajuda { font-family: var(--f-rotulo); font-size: var(--t-xs); color: var(--texto-suave); }

.erro {
  font-family: var(--f-rotulo); font-size: var(--t-sm);
  color: var(--link);
  border-left: 0;
  border-top: 2px solid var(--link);
  padding-top: var(--e-2);
}

/* ---------- Paginacao ------------------------------------------------ */

.paginacao {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  justify-content: center;
  margin: var(--e-8) 0 var(--e-6);
  font-family: var(--f-rotulo);
  font-size: var(--t-sm);
}
.paginacao a, .paginacao span {
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--regua);
  text-decoration: none;
  color: var(--texto);
  min-width: 2.6em; text-align: center;
}
.paginacao a:hover { border-color: var(--regua-marca); color: var(--link); }
.paginacao [aria-current="page"] { background: var(--realce); color: var(--realce-texto); border-color: var(--ouro-48); font-weight: 700; }

/* ---------- Rodape --------------------------------------------------- */

.rodape {
  margin-top: var(--e-9);
  border-top: 3px double var(--regua-forte);
  background: var(--fundo-sutil);
  padding: var(--e-7) 0 var(--e-6);
}

.rodape__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e-6);
}

.rodape h2 {
  font-family: var(--f-display); font-weight: 800; font-stretch: 120%;
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.1em;
  border-bottom: 1px solid var(--regua); padding-bottom: var(--e-2); margin: 0 0 var(--e-3);
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.rodape a { font-family: var(--f-rotulo); font-size: var(--t-sm); color: var(--texto); text-decoration: none; }
.rodape a:hover { color: var(--link); text-decoration: underline; }

.rodape__base {
  margin-top: var(--e-6); padding-top: var(--e-4);
  border-top: 1px solid var(--regua);
  font-family: var(--f-rotulo); font-size: var(--t-xs);
  color: var(--texto-suave);
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); justify-content: space-between;
}

/* ---------- Botao flutuante do grupo no WhatsApp ----------------------
   Discreto de proposito: usa a paleta do site, nao o verde do WhatsApp.
   O glifo sozinho ja identifica o servico. Para trocar por reconhecimento
   de marca, basta pintar .zap__icone de verde.                          */

.zap {
  position: fixed;
  right: clamp(0.75rem, 0.3rem + 1.6vw, 1.5rem);
  bottom: clamp(0.75rem, 0.3rem + 1.6vw, 1.5rem);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4) var(--e-2) var(--e-3);
  background: var(--fundo-elevado);
  color: var(--link);
  border: 1px solid var(--regua-marca);
  text-decoration: none;
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
  transition: background var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.zap:hover { background: var(--link); color: var(--fundo); }
.zap:hover .zap__icone { fill: var(--fundo); }

.zap__icone { width: 20px; height: 20px; flex: none; fill: currentColor; }

@media (max-width: 480px) {
  .zap { padding: var(--e-2) var(--e-3); }
  .zap__texto { display: none; }
}

/* ---------- Pagina de autor ------------------------------------------ */

.autor-cabeca {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--e-6);
  align-items: start;
  padding: var(--e-7) 0 var(--e-6);
  border-bottom: 3px double var(--regua-forte);
}
.autor-cabeca > * { min-width: 0; }

.autor-retrato {
  width: 132px; height: 132px;
  display: grid; place-items: center;
  background: var(--sis, var(--c-vinho));
  color: var(--c-papel);
  border: 1px solid var(--regua-forte);
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 80%;
  font-size: 3.2rem;
  line-height: 1;
}
.autor-retrato img { width: 100%; height: 100%; object-fit: cover; }

.autor-nome {
  font-family: var(--f-display);
  font-weight: 800; font-stretch: 80%;
  font-size: var(--t-2xl);
  line-height: 0.96;
  margin: var(--e-3) 0 var(--e-2);
}

.autor-funcao {
  font-family: var(--f-rotulo);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-suave);
  margin: 0 0 var(--e-4);
}

.autor-numeros {
  display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-6);
  font-family: var(--f-rotulo); font-size: var(--t-sm); color: var(--texto-suave);
  border-top: 1px solid var(--regua);
  padding-top: var(--e-4); margin-top: var(--e-4);
}
.autor-numeros b {
  display: block; font-family: var(--f-display); font-weight: 800; font-stretch: 88%;
  font-size: var(--t-lg); color: var(--texto); line-height: 1.1;
}

.credencial { border-top: 1px solid var(--regua); padding: var(--e-4) 0; display: grid; gap: 0.2rem; }
.credencial:last-of-type { border-bottom: 1px solid var(--regua); }
.credencial__tipo {
  font-family: var(--f-rotulo); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--texto-suave);
}
.credencial__valor { font-family: var(--f-display); font-weight: 700; font-stretch: 92%; font-size: var(--t-base); }
.credencial__onde { font-size: var(--t-sm); color: var(--texto-suave); }

@media (max-width: 560px) {
  .autor-cabeca { grid-template-columns: minmax(0, 1fr); }
  .autor-retrato { width: 104px; height: 104px; font-size: 2.6rem; }
}

/* ---------- Aviso de prototipo ---------------------------------------
   Marca visivelmente onde os numeros sao de exemplo. Some no tema real. */

.aviso-prototipo {
  background: var(--fundo-inverso);
  color: var(--texto-inverso);
  font-family: var(--f-rotulo);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: var(--e-2) 0;
  text-align: center;
}

/* ---------- Responsivo ----------------------------------------------- */

@media (max-width: 900px) {
  /* minmax(0, 1fr) e nao 1fr: item de grid tem min-width auto, e uma tabela
     ou um titulo longo empurra a coluna alem da tela. */
  .capa-do-dia__grade { grid-template-columns: minmax(0, 1fr); }
  .grade-lateral, .materia__grade { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; }
  .cabecalho { grid-template-columns: 1fr auto; row-gap: var(--e-4); }
  .navegacao { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 560px) {
  :root { --t-base: 1.0625rem; }
  .item { grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-3); }
  .cta-duplo__acoes .botao { width: 100%; text-align: center; }
  .chamada__conduto { display: none; }
}

/* ---------- Movimento reduzido --------------------------------------- */

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

/* =========================================================================
   Adições do tema WordPress
   O que vivia inline nos protótipos, mais as classes que o WP injeta.
   ========================================================================= */

/* ---------- Filtros de categoria no arquivo -------------------------- */

.filtros {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  margin-top: var(--e-5); justify-content: center;
}
.filtros a {
  font-family: var(--f-rotulo); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none; color: var(--texto);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--regua);
}
.filtros a:hover { border-color: var(--regua-marca); color: var(--link); }
.filtros a[aria-current="page"] {
  background: var(--realce); color: var(--realce-texto);
  border-color: var(--ouro-48); font-weight: 700;
}

/* ---------- Busca ----------------------------------------------------- */

.busca { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.busca input[type="search"] {
  flex: 1 1 12rem; min-width: 0;
  font-family: var(--f-corpo); font-size: var(--t-base);
  color: var(--texto); background: var(--fundo-elevado);
  border: 1px solid var(--regua-forte); padding: var(--e-3);
}
.busca input[type="search"]:focus-visible { border-color: var(--foco); }

/* ---------- Figura da capa ------------------------------------------- */

.capa-figura { margin: 0; }

/* ---------- Classes do WordPress ------------------------------------- */

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.alignleft  { float: left;  margin: var(--e-2) var(--e-5) var(--e-4) 0; }
.alignright { float: right; margin: var(--e-2) 0 var(--e-4) var(--e-5); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: none; width: auto; }

.corpo figure { margin: var(--e-6) 0; }
.corpo figcaption,
.wp-caption-text {
  font-family: var(--f-rotulo); font-size: var(--t-xs); line-height: 1.5;
  color: var(--texto-suave);
  border-top: 1px solid var(--regua);
  padding-top: var(--e-2); margin-top: var(--e-2);
}

.corpo table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.corpo th, .corpo td { text-align: left; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--regua); }

.sticky .item__titulo::before {
  content: "\2605"; color: var(--realce); margin-right: .4em;
}

.corpo pre {
  font-family: var(--f-rotulo); font-size: var(--t-sm);
  background: var(--fundo-elevado); border: 1px solid var(--regua-forte);
  padding: var(--e-4); overflow-x: auto;
}
.corpo code { font-family: var(--f-rotulo); font-size: 0.92em; }

/* ---------- Comentários ---------------------------------------------- */

.comments-area { max-width: var(--medida); margin: var(--e-8) auto 0; }
.comments-area .comment-list { list-style: none; margin: 0; padding: 0; }
.comments-area .comment-list li { border-top: 1px solid var(--regua); padding: var(--e-4) 0; }
.comments-area .comment-reply-title,
.comments-area .comments-title {
  font-family: var(--f-display); font-weight: 800; font-stretch: 120%;
  font-size: var(--t-lg); text-transform: uppercase;
  border-bottom: 3px double var(--regua-forte); padding-bottom: var(--e-2);
}
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea {
  font-family: var(--f-corpo); font-size: var(--t-base); width: 100%;
  color: var(--texto); background: var(--fundo-elevado);
  border: 1px solid var(--regua-forte); padding: var(--e-3);
}
.comments-area .submit {
  font-family: var(--f-display); font-weight: 700; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: .05em;
  padding: var(--e-3) var(--e-5);
  border: 2px solid var(--link); color: var(--link);
  background: transparent; cursor: pointer;
}
.comments-area .submit:hover { background: var(--link); color: var(--fundo); }

/* ---------- Barra de admin ------------------------------------------- */

body.admin-bar .painel-match { top: 32px; }
@media (max-width: 782px) { body.admin-bar .painel-match { top: 46px; } }

/* =========================================================================
   Ajustes v1.0.1 (11/08/2026)
   ========================================================================= */

/* ---------- Wordmark some da tela, fica para leitor de tela ----------
   O simbolo sozinho identifica a marca. O texto continua no HTML porque
   e ele que da nome acessivel ao link do logo: some do DOM e o link vira
   "link sem nome" no leitor de tela, e o Google perde o sinal.          */

.marca__texto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A linha de apoio sai do calculo do nome acessivel: escondida ela so
   polui o que o leitor de tela anuncia no link do logo. Sobra o nome do
   site, que e o que interessa. */

.marca { gap: 0; }
.marca__simbolo { height: 52px; }

@media (max-width: 560px) {
  .marca__simbolo { height: 42px; }
}

/* ---------- Manchete da capa em tamanho de leitura ------------------
   Antes chegava a 104px no desktop, o que empurrava tudo para baixo da
   dobra e deixava a manchete em uma ou duas linhas gigantes.           */

.manchete {
  font-size: clamp(2.6rem, 2.0rem + 1.6vw, 3.3rem);
  line-height: 0.96;
}

/* ---------- Foto de capa sempre em 4:5 ------------------------------
   Vale no mobile e no desktop. A miniatura de lista fica de fora: em
   88px de largura o retrato quebra o ritmo da lista.                   */

.capa--foto,
.capa--foto.capa--larga,
.capa--foto.capa--alta {
  aspect-ratio: 4 / 5;
}

.capa--foto.capa--miniatura { aspect-ratio: 1 / 1; }

/* Na dobra da home a foto divide a linha com a manchete: limita a altura
   para a primeira dobra não virar uma coluna de imagem. */
.capa-do-dia .capa--foto {
  max-height: 62vh;
  margin-inline: auto;
}

/* =========================================================================
   v1.1.0 (17/08/2026): cabeçalho sticky, gaveta, logo por tema, imagem 16:9

   Este bloco fica no FIM do arquivo de proposito. Override de desktop escrito
   antes da regra base nunca vale: mesma especificidade, a ultima ganha.
   ========================================================================= */

:root { --barra: 64px; }

/* Ancora nao pode sumir atras da barra fixa. */
html { scroll-padding-top: calc(var(--barra) + 1rem); }

/* ---------- Barra do topo -------------------------------------------
   Sticky de uma linha. Ao contrario do gazeta-do-agro, que usa barra
   solida escura, aqui ela acompanha o papel do tema: e isso que faz o
   logo original funcionar no claro e o negativo no escuro.            */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fundo-sutil);
  border-bottom: 3px double var(--regua-forte);
}

.topo-linha {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: var(--barra);
}

.marca { gap: var(--e-3); flex: none; min-height: var(--barra); }

/* O texto da marca vive so para o leitor de tela: o simbolo sozinho
   deixaria o link sem nome acessivel. */
.marca__texto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.marca__simbolo { height: 52px; width: auto; flex: none; }

/* Um arquivo por tema, em vez do chip claro atras do mesmo arquivo. */
.marca__simbolo--escuro { display: none; }
:root[data-tema="escuro"] .marca__simbolo--claro  { display: none; }
:root[data-tema="escuro"] .marca__simbolo--escuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca__simbolo--claro  { display: none; }
  :root:not([data-tema="claro"]) .marca__simbolo--escuro { display: block; }
}

/* Navegacao em linha so no desktop. No celular tudo vive na gaveta. */
.navegacao { display: none; }

.topo-btns { display: flex; gap: var(--e-1); margin-left: auto; flex: none; }

.btn-icone {
  width: 44px; height: 44px;          /* alvo de toque minimo */
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--texto);
  transition: background var(--dur-rapida) var(--ease);
}
.btn-icone:hover { background: var(--fundo-fundo); }
.btn-icone svg { width: 20px; height: 20px; }

/* O botao mostra o destino, nao o estado atual: no claro aparece a lua. */
#btn-tema .i-sol { display: none; }
:root[data-tema="escuro"] #btn-tema .i-sol { display: block; }
:root[data-tema="escuro"] #btn-tema .i-lua { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) #btn-tema .i-sol { display: block; }
  :root:not([data-tema="claro"]) #btn-tema .i-lua { display: none; }
}

/* ---------- Veu e gaveta --------------------------------------------- */

.veu {
  position: fixed; inset: 0; z-index: 70;
  background: oklch(0.12 0.015 252 / 0.55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-lenta) var(--ease), visibility var(--dur-lenta) var(--ease);
}
.veu.aberta { opacity: 1; visibility: visible; }

.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
  width: min(22rem, 88vw);
  background: var(--fundo);
  color: var(--texto);
  display: flex; flex-direction: column;
  transform: translateX(101%);
  transition: transform var(--dur-lenta) var(--ease);
  overscroll-behavior: contain;
  border-left: 3px double var(--regua-forte);
  padding-bottom: env(safe-area-inset-bottom);
}
.gaveta.aberta { transform: translateX(0); }

.gaveta-topo {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--barra); padding-inline: var(--e-5); flex: none;
  border-bottom: 3px double var(--regua-forte);
  background: var(--fundo-sutil);
}

.gaveta-marca {
  font-family: var(--f-display);
  font-weight: 900; font-stretch: 88%;
  font-size: var(--t-md); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--marca);
}

.gaveta-fechar { position: absolute; right: var(--e-2); top: 50%; transform: translateY(-50%); }

.gaveta-rolo {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--e-5) var(--e-5) var(--e-7);
}

.gaveta-rotulo {
  font-family: var(--f-rotulo);
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--regua);
  padding-bottom: var(--e-2);
  margin: var(--e-6) 0 var(--e-2);
}

.gaveta-nav { display: flex; flex-direction: column; }
.gaveta-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  min-height: 44px; padding: var(--e-2) 0;
  font-family: var(--f-display); font-weight: 700; font-stretch: 94%;
  font-size: var(--t-base);
  color: var(--texto); text-decoration: none;
  border-bottom: 1px solid var(--regua);
}
.gaveta-nav a:hover, .gaveta-nav a[aria-current] { color: var(--link); }
.gaveta-nav--fina a { font-family: var(--f-rotulo); font-weight: 400; font-size: var(--t-sm); }

.gaveta-conta {
  font-family: var(--f-rotulo); font-size: var(--t-xs);
  color: var(--texto-suave); flex: none;
}

.gaveta .busca { margin-bottom: var(--e-4); }

/* ---------- Coluna lateral sob barra fixa ---------------------------- */

.lateral { top: calc(var(--barra) + var(--e-5)); }

/* ---------- Imagem destacada: 16:9 no desktop, 4:5 no celular --------
   Sao arquivos diferentes, servidos por <picture>. Recortar 16:9 numa
   caixa 4:5 por object-fit perde as laterais e decapita foto de pessoa. */

.capa--foto,
.capa--foto.capa--larga,
.capa--foto.capa--alta { aspect-ratio: 16 / 9; }

.capa--foto.capa--miniatura { aspect-ratio: 1 / 1; }

@media (max-width: 767px) {
  .capa--foto,
  .capa--foto.capa--larga,
  .capa--foto.capa--alta { aspect-ratio: 4 / 5; }
  .capa--foto.capa--miniatura { aspect-ratio: 1 / 1; }
}

.capa-do-dia .capa--foto { max-height: none; }

/* ---------- Respiro entre a legenda da foto e a coluna lateral ------- */

@media (min-width: 901px) {
  .materia__grade { column-gap: var(--e-8); }
  .materia__grade > .lateral { padding-left: var(--e-2); }
  .capa-figura { margin-bottom: var(--e-6); }
}

/* ---------- Desktop: navegacao em linha, gaveta some ----------------- */

@media (min-width: 900px) {
  .navegacao {
    display: flex; align-items: center;
    flex: 1; min-width: 0;
    gap: var(--e-1);
    flex-wrap: nowrap; overflow: hidden;
    justify-content: flex-start;
  }
  .navegacao a {
    display: inline-flex; align-items: center;
    min-height: var(--barra);
    padding: 0 var(--e-3);
    padding-bottom: 0;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
  }
  .navegacao a:hover,
  .navegacao a[aria-current="page"] { border-bottom-color: var(--realce); }

  .btn-menu { display: none; }
}

/* =========================================================================
   Componentes que viviam inline nos protótipos: Conselho e hub
   ========================================================================= */

/* ---------- Placar e fonte de coleta (hub) --------------------------- */

.placar {
  display: flex; flex-wrap: wrap;
  gap: var(--e-5) var(--e-7);
  justify-content: center;
  margin-top: var(--e-5);
  font-family: var(--f-rotulo); font-size: var(--t-sm);
  color: var(--texto-suave);
}
.placar b {
  display: block;
  font-family: var(--f-display); font-weight: 800; font-stretch: 90%;
  font-size: var(--t-lg); color: var(--texto); line-height: 1.1;
}

.fonte { font-family: var(--f-rotulo); font-size: var(--t-xs); color: var(--texto-suave); margin: 0; }

/* ---------- Oferta do Conselho --------------------------------------- */

.oferta { padding: var(--e-8) 0 var(--e-7); border-bottom: 3px double var(--regua-forte); }

.oferta__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--e-7);
  align-items: start;
}
.oferta__grade > * { min-width: 0; }

.oferta__titulo {
  font-family: var(--f-display);
  font-weight: 800; font-stretch: 74%;
  font-size: var(--t-2xl);
  line-height: 0.94;
  text-transform: uppercase;
  margin: var(--e-4) 0;
}

.planos { display: grid; gap: var(--e-4); }

.plano {
  border: 1px solid var(--regua-forte);
  background: var(--fundo-elevado);
  padding: var(--e-5);
}
.plano--principal {
  background: var(--realce);
  color: var(--realce-texto);
  border-color: var(--ouro-48);
}
.plano__selo {
  font-family: var(--f-rotulo); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  margin: 0 0 var(--e-2);
}
.plano__preco {
  font-family: var(--f-display); font-weight: 900; font-stretch: 84%;
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 3.6rem);
  line-height: 1; margin: 0;
}
.plano__preco small {
  font-family: var(--f-rotulo); font-weight: 400; font-size: 0.26em;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.plano__dia { font-family: var(--f-rotulo); font-size: var(--t-sm); margin: var(--e-2) 0 var(--e-4); }

.plano--principal .botao { border-color: var(--realce-texto); color: var(--realce-texto); }
.plano--principal .botao:hover { background: var(--realce-texto); color: var(--realce); }

/* ---------- Lista de entregas ---------------------------------------- */

.entrega { list-style: none; margin: 0; padding: 0; }
.entrega li {
  display: grid; grid-template-columns: 1.6em 1fr; gap: var(--e-2);
  padding: var(--e-3) 0;
  border-top: 1px solid var(--regua);
}
.entrega li:first-child { border-top: 0; }
.entrega li::before { content: "\2713"; font-family: var(--f-rotulo); font-weight: 700; color: var(--link); }
.entrega b { font-family: var(--f-display); font-stretch: 92%; font-weight: 700; display: block; }
.entrega span { font-size: var(--t-sm); color: var(--texto-suave); }

/* ---------- Bloco de meta -------------------------------------------- */

.meta-bloco {
  display: grid; gap: var(--e-3);
  padding: var(--e-5);
  border: 1px solid var(--regua-forte);
  background: var(--fundo-elevado);
}
.meta-bloco h3 {
  font-family: var(--f-display); font-stretch: 88%; font-weight: 800;
  font-size: var(--t-md); margin: 0;
}
.meta-bloco .conta { font-family: var(--f-rotulo); font-size: var(--t-xs); color: var(--texto-suave); margin: 0; }
.meta-bloco p { font-size: var(--t-sm); margin: 0; }

/* ---------- Par de comparação ---------------------------------------- */

.comparacao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-5);
}
.comparacao > * { min-width: 0; }

/* ---------- FAQ ------------------------------------------------------- */

.faq details { border-top: 1px solid var(--regua); padding: var(--e-4) 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--regua); }
.faq summary {
  font-family: var(--f-display); font-weight: 700; font-stretch: 92%;
  font-size: var(--t-md);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: var(--e-4);
  min-height: 44px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-rotulo); color: var(--texto-suave); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: var(--e-3) 0 0; font-size: var(--t-sm); color: var(--texto-suave); max-width: 68ch; }

@media (max-width: 900px) {
  .oferta__grade { grid-template-columns: minmax(0, 1fr); }
}
/* O <picture> é filho direto de .capa e é pego por `.capa > *`, que o torna
   position:relative. Como o único filho dele é a <img> absoluta, ele colapsa
   para altura 0 e a imagem some. Ele precisa preencher a moldura. */
.capa--foto picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}