/* =========================================================================
   Site institucional. Depende de marca.css (fonte + cores), que vem antes.

   DIREÇÃO: o Villa é historiador, e o material dele é impresso. As artes da
   campanha já dizem isso (a da newsletter está sobre papel de jornal, a do
   WhatsApp sobre uma estante). Então a página é estruturada como página de
   livro, não como dashboard:

   - Marginália: cada seção tem uma coluna estreita à esquerda só para o rótulo,
     como nota de margem. É isso que dá o ritmo da página.
   - Fio, não caixa: as listas são separadas por fios de 1px, como um índice
     ou um sumário. Card arredondado com sombra é vocabulário de software, não
     de texto, e não diz nada sobre ele.
   - Tarja amarela: o destaque é texto sobre tarja, copiado do "É gratuito!" da
     arte oficial. É a assinatura da página e o único lugar onde ela levanta a voz.
   - Nada de hover que levanta elemento. A página é sobre ler, não sobre clicar.
   ========================================================================= */

:root {
  --papel: #e9e4d8;
  --tinta: #101f45;
  --fio: rgba(238, 242, 251, 0.13);
  --fio-papel: rgba(16, 31, 69, 0.16);
  --margem: 190px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: var(--navy-deep);
  /* scroll-padding-top compensa o topo fixo: sem isso a âncora entrega a seção
     com o título escondido atrás do menu. */
  scroll-padding-top: 92px;
}
/* Sem scroll-behavior: smooth de propósito. Ele não é só enfeite: no Chrome
   testado aqui, TODA rolagem que passava por ele era engolida e o menu não
   levava a lugar nenhum (com `auto`, a mesma âncora acerta o alvo na hora).
   Menu que talvez não role é pior do que menu sem animação. */

body {
  font-family: var(--fonte);
  background: var(--navy-deep);
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--gold); color: var(--navy-deep); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 32px; }

/* Grade de marginália: rótulo na margem, texto na coluna de leitura. */
.bloco { display: grid; grid-template-columns: var(--margem) 1fr; gap: 0 40px; }
.bloco > .margem { grid-column: 1; }
/* min-width: 0 é obrigatório, não estilo. Filho de grid nasce com min-width:auto,
   que é "não encolha abaixo do seu conteúdo". Aí o carrossel de livros (3528px de
   capas) estoura a coluna, ignora o overflow-x e põe barra de rolagem horizontal
   na PÁGINA INTEIRA. Com 0, o overflow volta a acontecer dentro da estante. */
.bloco > .corpo { grid-column: 2; max-width: 720px; min-width: 0; }

/* ---- Tipografia ---- */
.rotulo {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
  padding-top: 10px;
}
/* line-height folgado de propósito: a tarja é uma caixa com padding, e com
   entrelinha apertada ela invade a linha de cima. O respiro é o que deixa a
   tarja legível em vez de empilhada. */
h1, h2 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.22; }
h1 { font-size: clamp(38px, 5.6vw, 62px); }
h2 { font-size: clamp(29px, 3.6vw, 42px); }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }

/* A tarja: texto navy sobre amarelo, igual ao "É gratuito!" da arte.
   box-decoration-break faz a tarja acompanhar cada linha quando o texto quebra,
   em vez de virar um retângulo só atrás do parágrafo inteiro. */
.tarja {
  background: var(--gold);
  color: var(--navy-deep);
  padding: 0.02em 0.2em 0.1em;
  margin-left: -0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.chamada { font-size: clamp(18px, 1.5vw, 21px); color: var(--muted); line-height: 1.55; }
.texto { color: var(--muted); }
.texto p + p { margin-top: 18px; }
.texto strong { color: var(--text); font-weight: 700; }

/* ---- Topo ---- */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(6, 16, 38, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--fio);
}
.topo .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
/* O logo oficial substitui o nome em texto: ele é a marca, e a tarja amarela
   dele é a mesma tarja que a página usa como destaque. */
/* O logo preenche o header de cima a baixo, mas começa na régua da página, não
   na borda da tela: a placa tem que alinhar com o rótulo de cada seção abaixo. */
.marca { flex: none; align-self: stretch; display: flex; line-height: 0; }
.marca img { height: 100%; width: auto; }
.menu { display: flex; align-items: center; gap: 28px; }
/* :not(.botao) é essencial. Sem ele, `.menu a` (0,2,0) vence `.botao` (0,1,0)
   e pinta o texto do botão de branco translúcido sobre amarelo: 1,12:1 de
   contraste, ilegível. O conflito se resolve excluindo, não empilhando peso. */
.menu a:not(.botao) {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.menu a:not(.botao):hover { color: var(--text); border-color: var(--gold); }
.abrir-menu { display: none; }

/* ---- Botões ---- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--gold);
  color: var(--navy-deep);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  border: 1px solid var(--gold);
  border-radius: 2px;
  transition: filter 0.15s ease;
}
.botao:hover { filter: brightness(1.08); }
.botao svg { width: 18px; height: 18px; flex: none; }
.botao.vazado { background: transparent; color: var(--text); border-color: var(--fio); }
.botao.vazado:hover { border-color: var(--gold); filter: none; }
.botao.zap { background: var(--whatsapp); border-color: var(--whatsapp); color: #052b14; }
.botao.tinta { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.botao.tinta-vazado { background: transparent; color: var(--tinta); border-color: var(--fio-papel); }
.botao.tinta-vazado:hover { border-color: var(--tinta); filter: none; }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.menu .botao { padding: 10px 18px; font-size: 13.5px; }

/* ---- Hero ----
   A estante é o fundo: ela diz "historiador" antes de qualquer texto, e é a
   mesma estante da arte oficial do WhatsApp. Escurecida porque é textura, não
   assunto: quem tem que brilhar é o halo azul do recorte e a tarja amarela. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  border-bottom: 1px solid var(--fio);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("estante-fundo.webp") center / cover no-repeat;
  /* Sem filter aqui. Tentei brightness(1.75) para "revelar" a estante e o efeito
     foi o oposto: estourou os pretos, a estante virou borrão azul claro e o hero
     perdeu o navy. A arte já tem o contraste certo; o que ela precisa é de véu
     de menos, não de luz a mais. */
  opacity: 0.92;
}
/* Véu que garante contraste do texto sobre a estante. Sem ele o título compete
   com as lombadas dos livros e a leitura vira esforço. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Véu só onde há texto. À direita ele quase some, para a estante aparecer
     atrás do recorte sem precisar clarear a imagem. */
  background:
    linear-gradient(100deg, rgba(6, 16, 38, 0.96) 4%, rgba(6, 16, 38, 0.68) 36%, rgba(6, 16, 38, 0.06) 72%),
    linear-gradient(to top, var(--navy-deep) 0%, transparent 22%);
}

/* ---- Poeira ---- */
.poeira { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.poeira span {
  position: absolute;
  left: var(--x);
  bottom: -20px;
  width: var(--tam);
  height: var(--tam);
  border-radius: 50%;
  background: var(--cor);
  opacity: 0;
  /* Halo curto no lugar de bola sólida: grão de poeira espalha luz, não tem
     contorno. Bola sólida com borda definida é o que lia como bolha. */
  box-shadow: 0 0 4px 1px var(--cor);
  filter: blur(0.6px);
  animation: subir var(--dur) linear var(--atraso) infinite;
  will-change: transform, opacity;
}
@keyframes subir {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 0.28; }
  80% { opacity: 0.18; }
  100% { transform: translate3d(var(--desvio), -680px, 0); opacity: 0; }
}
/* Poeira é atmosfera, não informação: some inteira para quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .poeira { display: none; }
}
.hero-grade {
  position: relative;
  z-index: 1;
  display: grid;
  /* Coluna dele MAIOR que a do texto. É ele que carrega o hero: o texto explica,
     a foto reconhece. Antes o texto tinha a coluna maior e ele não tinha para
     onde crescer, então max-width na foto não adiantava nada. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 620px;
  padding-top: 28px;
}
/* O hero usa o MESMO container de todas as seções. Alarguei para 1320px para
   dar corpo à foto e o preço foi alto: a borda esquerda do hero deixou de bater
   com a de todas as seções abaixo, e a página inteira pareceu desalinhada.
   Alinhamento vale mais que uns centímetros de foto: ela ganha presença vazando
   pela direita (o .hero tem overflow: hidden), não furando a régua. */
/* 540px: largura mínima para os dois botões caberem lado a lado. Abaixo
   disso eles quebram em duas linhas e a base do bloco fica desengonçada. */
.hero-texto { max-width: 540px; padding: 24px 0 40px; }
.hero .rotulo { padding-top: 0; margin-bottom: 16px; }
/* Menor de propósito. O texto estava competindo com a foto em vez de apoiá-la:
   quatro linhas de manchete gigante afogam qualquer imagem ao lado. */
/* Menor de novo, e agora de verdade. A manchete não é o hero: ela apoia a foto.
   Com a tarja, cada linha destacada vira um bloco amarelo cheio, e bloco amarelo
   grande demais grita mais alto que o próprio candidato. */
.hero h1 { max-width: 18ch; font-size: clamp(27px, 2.7vw, 39px); }
.hero .chamada { max-width: 42ch; margin-top: 18px; font-size: clamp(14.5px, 0.95vw, 15.5px); }
.hero .botoes { margin-top: 28px; }

/* O recorte encosta no fim do hero, como se ele estivesse de pé na seção.
   align-self: end + margin-bottom negativo matam a folga que sobraria embaixo. */
.hero-foto { align-self: end; justify-self: start; }
/* A foto pode vazar do container: recorte encostando na borda dá presença,
   e não há texto ali para ser cortado. */
/* Sem centralizar na coluna: ele encosta no texto e o vazio some. O margin-right
   negativo deixa ele vazar para fora do container, que é o que o .hero recorta. */
.hero-foto { margin-left: -2vw; margin-right: -7vw; }
/* Dimensionada pela ALTURA, não pela largura: assim ela ocupa o hero inteiro e
   acompanha a viewport. Com width:100% ela ficava presa à largura da coluna e
   qualquer max-width era ignorado. */
.hero-foto img {
  height: clamp(400px, 62vh, 580px);
  width: auto;
  max-width: none;
  margin-bottom: -1px;
  /* Reforça o halo que já vem na peça, para ele descolar da estante. */
  filter: drop-shadow(0 0 90px rgba(37, 99, 235, 0.5));
}

/* ---- Seções ----
   Faixas alternadas dão o ritmo vertical e dizem onde uma seção acaba. Com a
   alternância, o fio entre seções vira redundante: a troca de cor já separa. */
section { padding: 104px 0; }
.faixa-a { background: var(--navy-deep); }
.faixa-b { background: var(--navy); }

/* Lista com fio: usada na carta de princípios, na cronologia e nas formas.
   O fio no topo de cada item faz o conjunto ler como sumário. */
.lista { margin-top: 40px; }
.item {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 26px;
  padding: 26px 0;
  border-top: 1px solid var(--fio);
}
.item:last-child { border-bottom: 1px solid var(--fio); }
.item .indice {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
.item p { color: var(--muted); font-size: 16px; margin-top: 6px; }

/* Cronologia: linha do tempo de verdade. O ano encosta na linha pela direita e
   o fato sai dela pela esquerda, então o olho lê a sequência antes de ler o
   texto. A ordem é o argumento da seção: ela precisa aparecer.
   Sem fio horizontal aqui (ao contrário das outras listas): dois eixos de régua
   brigariam, e o que importa é o vertical. */
.cronologia { position: relative; margin-top: 44px; }
.cronologia::before {
  content: "";
  position: absolute;
  left: 122px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--linha);
}
.cronologia .item {
  grid-template-columns: 122px 1fr;
  gap: 0;
  padding: 0 0 30px;
  border: 0;
  align-items: start;
  position: relative;
}
.cronologia .item:last-child { padding-bottom: 0; border: 0; }
.cronologia .indice {
  text-align: right;
  padding: 0 22px 0 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.cronologia .item p { margin: 0; padding-left: 26px; }
.cronologia .item::before {
  content: "";
  position: absolute;
  left: 118px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  /* O anel do fundo separa o ponto da linha, senão vira um borrão contínuo. */
  box-shadow: 0 0 0 3px var(--navy-deep);
}
/* "Hoje" é o presente, não mais um marco: fica vazado, como ponto em aberto. */
.cronologia .item:last-child::before { background: var(--navy-deep); box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px var(--navy-deep); }

/* Formas de participar: mesma lista, mas clicável. */
a.item { text-decoration: none; color: inherit; transition: background 0.15s ease; }
a.item:hover { background: rgba(255, 217, 0, 0.05); }
a.item h3 { color: var(--gold); }
a.item .seta { color: var(--gold); opacity: 0; transition: opacity 0.15s ease; }
a.item:hover .seta { opacity: 1; }
.item .titulo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* ---- Vaquinha: o contraste ---- */
.contraste {
  margin-top: 34px;
  border-left: 2px solid var(--gold);
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.contraste li { list-style: none; font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; letter-spacing: -0.02em; }

/* ---- Boletim: a seção de papel ----
   Único ponto onde a página inverte. O boletim é a palavra impressa, então ela
   aparece impressa. Todo o resto fica navy para que isto signifique alguma coisa. */
.papel { background: var(--papel); color: var(--tinta); }
.papel .rotulo { color: #8a6d00; }
.papel .texto { color: rgba(16, 31, 69, 0.72); }
.papel .texto strong { color: var(--tinta); }
.papel .item { border-color: var(--fio-papel); }
.papel h2 { color: var(--tinta); }

/* ---- Rodapé ---- */
footer { border-top: 1px solid var(--fio); padding: 76px 0 44px; }
footer .frase {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.28;
  max-width: 17ch;
}
.rodape-fim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--fio);
}
.redes { display: flex; gap: 8px; }
.rede {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fio);
  border-radius: 2px;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.rede:hover { color: var(--gold); border-color: var(--gold); }
.rede svg { width: 17px; height: 17px; }
.miudo { font-size: 12.5px; color: rgba(238, 242, 251, 0.38); letter-spacing: 0.01em; }

/* ---- Mobile ---- */
@media (max-width: 940px) {
  body { font-size: 16px; }
  .container { padding: 0 20px; }
  section { padding: 64px 0; }

  .bloco { grid-template-columns: 1fr; gap: 0; }
  .bloco > .margem, .bloco > .corpo { grid-column: 1; }
  .rotulo { padding-top: 0; margin-bottom: 14px; }
  /* No celular a composição empilha: foto primeiro (é o reconhecimento
     imediato), texto embaixo. */
  .hero-grade { grid-template-columns: 1fr; min-height: 0; padding-top: 24px; gap: 0; }
  .hero-foto { order: -1; justify-self: center; }
  .hero-foto img { max-width: 320px; margin-bottom: 0; }
  .hero-texto { padding: 8px 0 48px; }
  .botoes { width: 100%; }
  .botoes .botao { flex: 1 1 100%; }
  .item { grid-template-columns: 1fr; gap: 8px; }
  .item .indice { padding-top: 0; }
  /* A régua sai no celular: 122px de coluna só para o ano come metade da tela. */
  .cronologia::before { left: 4px; }
  .cronologia .item { grid-template-columns: 1fr; gap: 2px; padding-left: 24px; padding-bottom: 24px; }
  .cronologia .indice { text-align: left; padding: 0; }
  .cronologia .item p { padding-left: 0; }
  .cronologia .item::before { left: 0; top: 8px; }
  .rodape-fim { flex-direction: column; align-items: flex-start; }

  .abrir-menu {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--fio);
    border-radius: 2px;
    cursor: pointer;
    list-style: none;
  }
  .abrir-menu::-webkit-details-marker { display: none; }
  .abrir-menu svg { width: 18px; height: 18px; }
  .menu {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    background: var(--navy-deep);
    border-bottom: 1px solid var(--fio);
  }
  .menu a { padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--fio); }
  .menu a:hover { border-color: var(--fio); }
  .menu .botao { margin-top: 14px; padding: 14px; font-size: 15px; justify-content: center; }
}

/* ---- Estante ----
   Capa de livro não tem proporção padrão: se eu travar a LARGURA, cada capa sai
   com uma altura e o conjunto vira serrilha. Travo a ALTURA e deixo a largura
   livre, então as capas se alinham pela base, de pé numa prateleira, com larguras
   diferentes como livros de verdade. O fio embaixo é a prateleira.

   Sem título sob cada capa na fileira: a capa já traz o título impresso, e uma
   legenda por livro empilha ruído. O título aparece no hover e no aria-label,
   e volta como texto fixo quando a estante expande.

   Todas as capas estão sempre no HTML: o botão só troca o layout. Sem JS, a
   fileira continua rolando e nenhum livro fica inacessível. */
.estante {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 44px;
  padding: 4px 4px 20px;
  margin-left: -4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  border-bottom: 1px solid var(--linha);
  scrollbar-width: thin;
  scrollbar-color: var(--fio) transparent;
  cursor: grab;

  /* Fade nas bordas: a capa cortada em seco parece bug; desbotando, ela lê como
     "tem mais coisa para o lado". Os 0px de cada lado viram 56px só quando há o
     que rolar naquela direção, senão a primeira capa nasceria apagada. */
  --fade-esq: 0px;
  --fade-dir: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-esq),
    #000 calc(100% - var(--fade-dir)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-esq),
    #000 calc(100% - var(--fade-dir)), transparent 100%);
}
.estante.tem-esq { --fade-esq: 56px; }
.estante.tem-dir { --fade-dir: 56px; }
.estante.arrastando { cursor: grabbing; scroll-snap-type: none; }
/* Durante o arrasto a imagem não pode ser "pegada" pelo drag nativo do navegador. */
.estante.arrastando img { pointer-events: none; }
.estante.expandida { cursor: auto; }
.estante .livro { flex: 0 0 auto; scroll-snap-align: start; }
.estante .livro img { height: 216px; width: auto; max-width: none; }
/* Na fileira o título é sobreposto; na grade ele volta a ser texto embaixo. */
.estante:not(.expandida) .livro-titulo,
.estante:not(.expandida) .livro-ano {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 10px 9px;
  background: linear-gradient(to top, rgba(6, 16, 38, 0.96), rgba(6, 16, 38, 0));
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.estante:not(.expandida) .livro-ano { display: none; }
.estante:not(.expandida) .livro:hover .livro-titulo,
.estante:not(.expandida) .livro:focus-visible .livro-titulo { opacity: 1; }

.estante.expandida {
  -webkit-mask-image: none;
  mask-image: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  align-items: start;
  gap: 34px 22px;
  overflow: visible;
  border-bottom: 0;
  padding-bottom: 0;
}
/* Altura travada também na grade, pelo mesmo motivo da fileira: com altura
   livre cada capa termina numa linha diferente e os títulos desalinham. Largura
   automática e centralizada: nunca esticar nem cortar capa. */
.estante.expandida .livro img { height: 248px; width: auto; margin: 0 auto; }
.estante.expandida .livro { justify-content: flex-start; }
.estante.expandida .livro-titulo { text-align: center; }
.estante.expandida .livro-ano { text-align: center; }

.livro { text-decoration: none; color: inherit; display: flex; flex-direction: column; position: relative; }
.livro img {
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 22px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.livro:hover img { box-shadow: 0 0 0 1px var(--gold), 0 12px 26px rgba(0, 0, 0, 0.5); }
.livro-titulo {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
}
.livro:hover .livro-titulo { color: var(--gold); }
.livro-ano { margin-top: 3px; font-size: 11.5px; color: rgba(238, 242, 251, 0.42); font-variant-numeric: tabular-nums; }

.livro-fora {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 2px;
  background: rgba(6, 16, 38, 0.88);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.livro:hover .livro-fora, .livro:focus-visible .livro-fora { opacity: 1; }

.expandir {
  margin-top: 24px;
  padding: 11px 22px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--fio);
  border-radius: 2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.expandir:hover { border-color: var(--gold); color: var(--gold); }

/* ---- Boletim: texto + arte lado a lado ---- */
.corpo.com-arte { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; max-width: none; }
.arte-boletim img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(16, 31, 69, 0.14), 0 14px 32px rgba(16, 31, 69, 0.22);
}
.ler-edicoes { margin-top: 20px; font-size: 14px; color: rgba(16, 31, 69, 0.62); }
.ler-edicoes a { color: var(--tinta); font-weight: 700; text-underline-offset: 2px; }

/* O form.css é escrito para as LPs (fundo navy). Aqui ele cai sobre papel,
   então os tons invertem. Só cor: a mecânica do consentimento não muda. */
.papel { --acento: var(--tinta); --acento-texto: var(--papel); }
.papel .campo input {
  border-color: var(--fio-papel);
  background: rgba(255, 255, 255, 0.5);
  color: var(--tinta);
}
.papel .campo input:focus { background: #fff; border-color: var(--tinta); }
.papel .campo label { color: rgba(16, 31, 69, 0.5); }
.papel .consentimento { color: rgba(16, 31, 69, 0.72); }
.papel .consentimento input[type="checkbox"] { border-color: var(--fio-papel); background: rgba(255, 255, 255, 0.6); }
.papel .consentimento a { color: var(--tinta); }
.papel .aviso { color: rgba(16, 31, 69, 0.55); }
.papel button { border-radius: 2px; }
.papel .sucesso p { color: rgba(16, 31, 69, 0.72); }
.papel .sucesso h2 { color: var(--tinta); }
/* O modal é sempre escuro: ele sai do fluxo da página e é texto jurídico longo. */
.papel .modal-fundo { --acento: var(--gold); --acento-texto: var(--navy-deep); color: var(--text); }

@media (max-width: 940px) {
  .corpo.com-arte { grid-template-columns: 1fr; gap: 32px; }
  .arte-boletim { max-width: 300px; }
}

/* A arte da vaquinha é quase quadrada (1352x1086), então pede mais largura que
   a do Boletim, que é retrato. Mesmo padrão: peça fechada, sem moldura. */
.arte-vaquinha img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 16px 36px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.15s ease;
}
.arte-vaquinha:hover img { box-shadow: 0 0 0 1px var(--gold), 0 16px 36px rgba(0, 0, 0, 0.45); }
#vaquinha .corpo.com-arte { grid-template-columns: 1fr 360px; }

@media (max-width: 940px) {
  #vaquinha .corpo.com-arte { grid-template-columns: 1fr; }
  .arte-vaquinha { max-width: 420px; }
}