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

   DIREÇÃO: o brandbook da campanha (agosto/2026) é azul, serifado e reto. Ele
   tem três assinaturas, e a página usa as três:

   - O V. Nas pranchas 11 a 15 é sempre um V gigante que corta o azul e abre a
     foto. Aqui ele é SVG traçado (polyline com stroke grosso), não imagem:
     acompanha a altura da seção sem esticar e troca de cor por token.
   - O fio azul-claro. É o risco que abraça "PROFESSOR" e sublinha "VILLA" no
     logotipo. Virou o separador de toda lista e de todo bloco. Antes o fio era
     amarelo; no brandbook novo o amarelo é tinta de letra (1566, cargo), nunca
     linha.
   - Serifada na manchete, sem serifa no corpo. Platypi para título, número e
     slogan; a pilha Helvetica Neue para texto corrido, rótulo e botão. Nunca
     misture: título em sans lê como outra marca.

   O que ficou da versão anterior, porque não era do brandbook velho e sim da
   página: a marginália (rótulo numa coluna estreita à esquerda), a estante que
   rola, a cronologia com régua. Fio, não caixa: card arredondado com sombra é
   vocabulário de software, e o material do Villa é impresso.
   ========================================================================= */

:root {
  /* Superfície clara do brandbook: as pranchas 3 a 9 são logo e paleta sobre
     BRANCO. O creme de jornal da versão anterior não existe em prancha nenhuma. */
  --claro: #ffffff;
  --tinta: var(--azul);
  --fio: rgba(var(--azul-claro-rgb), 0.26);
  --fio-claro: rgba(var(--azul-rgb), 0.22);
  --margem: 190px;
  /* Escala de espaço do site. Só os degraus que a auditoria fixou: sem uma lista
     para consultar, quem edita chuta um número plausível e cria o vigésimo
     primeiro valor literal. */
  --e-4: 16px;
  --e-6: 32px;
  --e-7: 40px;
  --e-8: 48px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: var(--azul-noite);
  /* 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(--azul-noite);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--amarelo); color: var(--azul-noite); }
:focus-visible { outline: 2px solid var(--amarelo); 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;
  /* Tom de uso, não a cor de superfície: --azul-claro puro sobre a faixa .faixa-b
     dá 3,6:1 num texto de 11,5px. */
  color: var(--azul-claro-texto);
  line-height: 1.4;
  padding-top: 10px;
}
/* O número dentro do rótulo é o único amarelo dessa linha: é o que a pessoa
   digita na urna, então ele não pode ter o mesmo peso de "MDB". */
.rotulo .numero { color: var(--amarelo); font-weight: 800; letter-spacing: 0.12em; }

/* Manchete serifada, como todo texto grande do brandbook. O -0.02em é bem menos
   apertado que o -0.035em da versão sem serifa: serifa que se toca vira borrão,
   e a Platypi já tem cor de mancha alta. */
h1, h2 {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--branco);
}
h1 { font-size: clamp(2.375rem, 5.6vw, 3.875rem); }
h2 { font-size: clamp(1.8125rem, 3.6vw, 2.625rem); margin-bottom: var(--e-6); }
/* Deck colado no título. O colapso de margem pega o MAIOR, então reduzir o
   margin-top da .chamada não venceria os 32px: quem cede é a margem do h2. */
h2:has(+ .chamada) { margin-bottom: var(--e-4); }
h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--branco); }

/* .destaque (palavra amarela dentro da manchete) vive em marca.css. */
.chamada { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); color: var(--muted); line-height: 1.55; }
/* Medida de leitura: os 720px do .corpo davam ~92 caracteres a 17px, e ~97
   abaixo de 940px (o corpo cai para 16px e a largura não). Em `em` a medida
   acompanha a fonte: 33em = ~71 caracteres de prosa em português. */
.texto { color: var(--muted); max-width: 33em; }
.item p { max-width: 34em; }
.texto p + p { margin-top: 18px; }
.texto strong { color: var(--text); font-weight: 700; }

/* A frase de adesão da prancha 15: serifada, itálica, amarela, sempre embaixo
   do bloco que ela assina. */
.adesao {
  font-family: var(--fonte-titulo);
  font-style: italic;
  color: var(--amarelo);
  font-size: 1.0625rem;
  line-height: 1.4;
}

/* ---- Topo ---- */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(var(--azul-noite-rgb), 0.88);
  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 lockup horizontal (nome + 1566) é o que cabe numa barra de 72px sem
   encolher o número a ponto de não se ler. O logotipo empilhado inteiro fica
   para o rodapé, onde há altura. */
.marca { flex: none; display: flex; align-items: center; line-height: 0; }
.marca img { height: 40px; 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(--azul-claro); }
.abrir-menu { display: none; }
/* display: contents no desktop: o wrapper <details> desaparece do layout e o
   .menu volta a ser filho flex direto do .container. */
.gaveta { display: contents; }

/* ---- Botões ---- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--amarelo);
  color: var(--azul-noite);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  border: 1px solid var(--amarelo);
  border-radius: var(--raio);
  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(--azul-claro); filter: none; }
.botao.zap { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--whatsapp-texto); }
.botao.tinta { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
.botao.tinta-vazado { background: transparent; color: var(--tinta); border-color: var(--fio-claro); }
.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 ----
   Textura oficial ao fundo (prancha 10, textura 2), V atrás, recorte na frente.
   O recorte já traz o halo azul da peça, então o fundo escurece à esquerda para
   o halo ter contra o que brilhar e o texto ter contraste. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--azul-noite);
  border-bottom: 1px solid var(--fio);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("marca/textura-azul.webp") center / cover no-repeat;
  z-index: 0;
}
/* Véu só onde há texto. À direita ele quase some, para a textura e o V
   aparecerem atrás do recorte sem precisar clarear a imagem. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(var(--azul-noite-rgb), 0.94) 4%, rgba(var(--azul-noite-rgb), 0.62) 38%, rgba(var(--azul-noite-rgb), 0.04) 74%),
    linear-gradient(to top, var(--azul-noite) 0%, transparent 24%);
  z-index: 2;
}
/* A bandeira é posicionada CONTRA A FOTO, não contra a seção: ela é irmã do
   recorte dentro de .hero-foto e se centraliza nele com left:50% + translate.
   O arquivo foi reexportado com o vértice do V no meio exato da largura (ele
   estava a 66%, e por isso a ponta caía à direita do Villa quando eu alinhava
   pela borda). Enquanto o vértice estiver centrado no arquivo, isto continua
   certo em qualquer breakpoint sem número mágico. */
.hero-bandeira {
  position: absolute;
  left: 50%;
  /* Ancorada pela base: a ponta do V fica logo abaixo do corte na cintura. */
  bottom: -6%;
  transform: translateX(-50%);
  /* Maior que a foto de propósito: no brandbook o V nunca cabe inteiro na
     prancha, ele sangra pelos dois lados. Aqui o .hero (overflow: hidden) é
     quem corta. */
  height: 152%;
  width: auto;
  max-width: none;
  z-index: 1;
  pointer-events: none;
}

.hero-grade {
  /* Sem z-index: os filhos precisam se empilhar um a um em volta do véu
     (::after, z-index 2). Com z-index aqui, a grade inteira sobe junto e a
     bandeira vai junto com ela para cima do véu. */
  position: relative;
  display: grid;
  /* Coluna dele MAIOR que a do texto. É ele que carrega o hero: o texto explica,
     a foto reconhece. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 660px;
  padding-top: 28px;
}
/* 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 { position: relative; z-index: 3; max-width: 540px; padding: 24px 0 40px; }
.hero .rotulo { padding-top: 0; margin-bottom: 16px; }
/* O slogan é o h1: ele é a manchete da campanha no brandbook (prancha 15), e
   itálico porque lá ele é itálico. O tamanho é contido de propósito: a manchete
   apoia a foto, não briga com ela. */
.hero h1 { max-width: 13ch; font-size: clamp(2.125rem, 3.6vw, 3.25rem); font-style: italic; }
.hero .chamada { max-width: 42ch; margin-top: 20px; font-size: clamp(0.9375rem, 1vw, 1.0625rem); }
.hero .adesao { margin-top: 18px; }
.hero .botoes { margin-top: 28px; }

/* O recorte encosta no fim do hero, como se ele estivesse de pé na seção. */
.hero-foto { align-self: end; justify-self: start; position: relative; }
/* 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: -3vw; 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-retrato {
  position: relative;
  z-index: 3;
  /* O recorte é cortado na cintura, então ele NÃO chega ao chão da seção: a
     altura aqui é a do busto, não a de um corpo inteiro. Subir esse número não
     "aumenta o Villa", aumenta a cabeça dele. */
  height: clamp(400px, 58vh, 545px);
  width: auto;
  max-width: none;
  margin-bottom: -1px;
  /* Reforça o halo que já vem na peça, para ele descolar da textura. */
  filter: drop-shadow(0 0 90px rgba(var(--azul-claro-rgb), 0.42));
}

/* ---- Faixa do número ----
   A campanha tem um número e ele é a única informação que a pessoa precisa
   levar da página para a urna. Ganha faixa própria, com o logotipo oficial em
   vez de 1566 redigitado: o número tem desenho, não é só quatro algarismos. */
.faixa-numero {
  background: var(--azul);
  border-bottom: 1px solid var(--fio);
  padding: 34px 0;
}
.faixa-numero .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 40px;
}
.faixa-numero img { height: 84px; width: auto; }
.faixa-numero p {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.0625rem, 1.8vw, 1.4375rem);
  line-height: 1.3;
  color: var(--branco);
  max-width: 22ch;
}

/* ---- 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(--azul-noite); }
.faixa-b { background: var(--azul); }

/* 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: var(--e-7); }
.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-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--amarelo);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.item p { color: var(--muted); font-size: 1rem; 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: var(--e-7); }
.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: 15px;
  letter-spacing: 0.01em;
  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(--amarelo);
  /* O anel do fundo separa o ponto da linha, senão vira um borrão contínuo. */
  box-shadow: 0 0 0 3px var(--azul-noite);
}
/* "Hoje" é o presente, não mais um marco: fica vazado, como ponto em aberto. */
.cronologia .item:last-child::before { background: var(--azul-noite); box-shadow: 0 0 0 2px var(--amarelo), 0 0 0 5px var(--azul-noite); }

/* 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(var(--azul-claro-rgb), 0.07); }
a.item h3 { color: var(--amarelo); }
a.item .seta { color: var(--amarelo); 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; }

/* ---- Citação sobre foto ----
   Prancha 17: frase serifada branca na base da imagem, adesão amarela embaixo.
   Full-bleed porque na prancha a foto sangra: emoldurar mataria o efeito. */
.citacao {
  position: relative;
  min-height: clamp(420px, 60vh, 620px);
  display: flex;
  align-items: flex-end;
  background: var(--azul-noite) center / cover no-repeat;
  border-block: 1px solid var(--fio);
  padding: 0;
}
.citacao::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(var(--azul-noite-rgb), 0.94) 2%, rgba(var(--azul-noite-rgb), 0.34) 46%, rgba(var(--azul-noite-rgb), 0.12) 100%),
    linear-gradient(to right, rgba(var(--azul-noite-rgb), 0.72), transparent 62%);
}
.citacao .container { position: relative; z-index: 1; padding-bottom: 56px; padding-top: 56px; }
.citacao blockquote {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.875rem, 4.2vw, 3.125rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--branco);
  max-width: 14ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.citacao .adesao { margin-top: 18px; }

/* ---- Vaquinha: o contraste ---- */
.contraste {
  margin-top: 34px;
  border-left: 2px solid var(--amarelo);
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.contraste li {
  list-style: none;
  font-family: var(--fonte-titulo);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--branco);
}

/* ---- Boletim: a seção clara ----
   Único ponto onde a página inverte, e ela inverte para o BRANCO das pranchas
   3 a 9 do brandbook, com o logotipo na versão azul. Todo o resto fica azul
   para que isto signifique alguma coisa. */
.claro { background: var(--claro); color: var(--tinta); }
.claro h2, .claro h3 { color: var(--azul); }
.claro .rotulo { color: var(--azul-forte); }
.claro .destaque { color: var(--amarelo-tinta); }
.claro .adesao { color: var(--amarelo-tinta); }
.claro .texto { color: rgba(var(--azul-rgb), 0.82); }
.claro .texto strong { color: var(--tinta); }
.claro .item { border-color: var(--fio-claro); }
.claro .item .indice { color: var(--azul-forte); }

/* ---- Rodapé ---- */
footer {
  border-top: 1px solid var(--fio);
  padding: 76px 0 44px;
  background: var(--azul-noite);
}
.rodape-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
footer .frase {
  font-family: var(--fonte-titulo);
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 15ch;
  color: var(--branco);
}
.rodape-logo { flex: none; }
.rodape-logo img { height: 168px; width: auto; }
.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: var(--raio);
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.rede:hover { color: var(--amarelo); border-color: var(--amarelo); }
.rede svg { width: 17px; height: 17px; }
.miudo { font-size: 0.78125rem; color: rgba(var(--text-rgb), 0.54); letter-spacing: 0.01em; }

/* ---- Mobile ---- */
@media (max-width: 940px) {
  body { font-size: 1rem; }
  .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; margin: 0; }
  .hero-retrato { height: auto; width: auto; max-width: 320px; margin-bottom: 0; }
  .hero-texto { padding: 8px 0 48px; }
  /* A bandeira acompanha a foto (ela é irmã dela), então no celular só muda o
     tamanho relativo: mais aberta, porque aqui ela é o único fundo que ele tem.
     Ela vaza para os lados e é o overflow:hidden do .hero que corta. */
  .hero-bandeira { height: 124%; bottom: -4%; }
  .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; }
  .faixa-numero { padding: 26px 0; }
  .faixa-numero .container { justify-content: flex-start; gap: 18px; }
  .faixa-numero img { height: 62px; }
  .citacao { min-height: 400px; }
  .rodape-topo { flex-direction: column; gap: 28px; }
  .rodape-logo img { height: 132px; }
  .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: var(--raio);
    cursor: pointer;
    list-style: none;
  }
  .abrir-menu::-webkit-details-marker { display: none; }
  .abrir-menu svg { width: 18px; height: 18px; }
  .gaveta { display: block; }
  .menu {
    position: absolute;
    /* 100% da barra, não 72px fixos: 72 era a altura do header no DESKTOP, e no
       mobile a gaveta abria por cima do próprio logo. */
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    background: var(--azul-noite);
    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: var(--e-7);
  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(var(--azul-noite-rgb), 0.96), rgba(var(--azul-noite-rgb), 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(--azul-claro), 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(--amarelo); }
.livro-ano { margin-top: 3px; font-size: 11.5px; color: rgba(var(--text-rgb), 0.52); 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(var(--azul-noite-rgb), 0.88);
  color: var(--amarelo);
  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: var(--raio);
  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(--azul-claro); color: var(--azul-claro); }

/* ---- Texto + arte lado a lado (vaquinha e boletim) ---- */
.corpo.com-arte { display: grid; grid-template-columns: 1fr 300px; gap: var(--e-8); align-items: start; max-width: none; }
.arte-boletim img {
  width: 100%;
  border-radius: var(--raio);
  box-shadow: 0 0 0 1px rgba(var(--azul-rgb), 0.16), 0 14px 32px rgba(var(--azul-rgb), 0.2);
}
/* A LP dá 28px antes do formulário; aqui o form encostava no parágrafo. */
#formulario { margin-top: var(--e-6); }
.ler-edicoes { margin-top: 20px; font-size: 14px; color: rgba(var(--azul-rgb), 0.78); }
.ler-edicoes a { color: var(--tinta); font-weight: 700; text-underline-offset: 2px; }

/* O form.css é escrito para fundo escuro. Aqui ele cai sobre branco, então os
   tons invertem. Só cor: a mecânica do consentimento não muda. */
.claro {
  --acento: var(--azul);
  --acento-texto: var(--branco);
  /* Sem isto o Chrome pinta o campo autopreenchido de azul escuro sobre o branco. */
  --campo-auto-fundo: #ffffff;
  --campo-auto-texto: var(--azul);
}
.claro .campo input {
  /* --fio-claro dava 1,3:1 na borda: o campo sumia no branco. */
  border-color: rgba(var(--azul-rgb), 0.5);
  background: rgba(var(--azul-rgb), 0.03);
  color: var(--tinta);
}
.claro .campo input:focus { background: #fff; border-color: var(--azul); }
.claro .campo label { color: rgba(var(--azul-rgb), 0.68); }
.claro .consentimento { color: rgba(var(--azul-rgb), 0.82); }
.claro .consentimento input[type="checkbox"] { border-color: rgba(var(--azul-rgb), 0.45); background: #fff; }
.claro .consentimento a { color: var(--tinta); }
.claro .aviso { color: rgba(var(--azul-rgb), 0.78); }
.claro .sucesso p { color: rgba(var(--azul-rgb), 0.82); }
.claro .sucesso h2 { color: var(--azul); }
/* --erro (#ff8a7a) foi escolhido para fundo escuro; sobre o branco dá 2,1:1,
   ou seja, a mensagem de erro do consentimento era ilegível justo aqui. */
.claro .msg[data-tipo="erro"] { color: #a51b12; }
.claro .consentimento.faltando input[type="checkbox"] {
  border-color: #a51b12;
  background: rgba(165, 27, 18, 0.1);
}
/* O modal é sempre escuro: ele sai do fluxo da página e é texto jurídico longo. */
.claro .modal-fundo { --acento: var(--amarelo); --acento-texto: var(--azul-noite); color: var(--text); }

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

/* A arte da vaquinha é quase quadrada, 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: var(--raio);
  box-shadow: 0 0 0 1px rgba(var(--azul-claro-rgb), 0.18), 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(--azul-claro), 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; }
}