/* ==========================================================================
   Bourgeois Advocacia — site.css
   --------------------------------------------------------------------------
   Gramática: capitulada editorial (BRIEF.md). A página é uma peça impressa:
   folha de rosto, capítulos em I, II, III como na petição, fólio na margem
   e colofão no fim. Nenhuma barra fixa.

   O gesto desta versão é o dia passando enquanto se lê:
     · cada capítulo tem a sua hora, em corte seco, nunca em gradiente;
     · o fólio carrega um horizonte pequeno, com um sol que desce;
     · o colofão abre na noite, e o sol grande pousa no horizonte no
       último pixel de rolagem.

   O site tem de estar inteiro com JavaScript, movimento e cor de tela
   desligados. Sem JS, o sol já está pousado e tudo está visível.

   A inicial, desde 12/10/2026 (à noite), é outra coisa: uma landing de
   gramática própria (seção INICIAL abaixo). As páginas internas seguem a
   gramática capitulada.

   Ordem: base · cabeça · rosto · inicial · capítulos · fólio · imagem · listas ·
          artigo · colofão · movimento · telas estreitas · exceções
   ========================================================================== */


/* ==========================================================================
   BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--hora-manha);
}

body {
  margin: 0;
  background: var(--hora-manha);
  color: var(--texto);
  font-family: var(--fonte-serifada);
  font-size: var(--tipo-base);
  font-weight: 400;
  line-height: var(--entre-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Peso 400 em todo lugar, como no MVP. Hierarquia por corpo, cor e vazio. */
h1, h2, h3, h4, strong, b, dt, th { font-weight: 400; }

h1, h2, h3, h4 {
  font-family: var(--fonte-humanista);
  color: var(--texto);
  letter-spacing: var(--display-fechado);
  line-height: var(--entre-display);
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: var(--display-2); line-height: var(--entre-titulo); }
h3 { font-size: var(--display-1); line-height: var(--entre-titulo); }

p { margin: 0 0 var(--esp-paragrafo); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--pbg-ouro-100); color: var(--pbg-tinta); }

:focus-visible {
  outline: 2px solid var(--pbg-ouro-700);
  outline-offset: 3px;
  border-radius: 2px;
}

a { color: inherit; text-decoration: none; }

/* Ligação no corpo: o texto não muda de cor; o fio de ouro o distingue. */
.corrido a {
  border-bottom: 1px solid var(--pbg-ouro);
  border-radius: 0 0 var(--raio-sublinhado) var(--raio-sublinhado);
  padding-bottom: 1px;
  transition: border-color .18s ease-out;
}

.corrido a:hover { border-color: var(--pbg-tinta); }

.pagina {
  max-width: var(--medida-pagina);
  margin-inline: auto;
  padding-inline: var(--margem-viewport);
}

.rotulo,
.meta,
.legenda {
  font-family: var(--fonte-humanista);
  font-size: var(--tipo-sm);
  line-height: var(--entre-pequeno);
  color: var(--texto-terciario);
}

.rotulo {
  letter-spacing: var(--versal);
  text-transform: uppercase;
  line-height: var(--entre-versal);
  margin: 0 0 var(--esp-6);
}

.lead {
  font-size: var(--tipo-lg);
  line-height: var(--entre-titulo);
  color: var(--texto-secundario);
  letter-spacing: var(--display-fechado);
}

/* Andaime: sai em ouro escuro na tela para ninguém publicar com ele. Antes
   de subir, `grep -r PENDENTE *.html` tem de voltar vazio. */
.pendente { color: var(--acento-texto); }
.pendente-bloco {
  color: var(--acento-texto);
  border-left: 1px solid var(--pbg-ouro);
  padding-left: var(--esp-6);
}

.pular {
  position: absolute;
  left: var(--esp-4);
  top: -4rem;
  z-index: 10;
  padding: var(--esp-2) var(--esp-4);
  background: var(--pbg-tinta);
  color: var(--texto-inverso);
  font-family: var(--fonte-humanista);
  font-size: var(--tipo-sm);
}

.pular:focus { top: var(--esp-4); }


/* ==========================================================================
   CABEÇA — o cabeçalho da peça, não uma barra
   --------------------------------------------------------------------------
   Rola com a página. A gramática não tem barra fixa: quem guia dentro da
   página é o fólio, e o caminho para as outras páginas está aqui em cima e
   no colofão, lá embaixo.
   ========================================================================== */

.cabeca {
  background: var(--hora-manha);
  padding-top: env(safe-area-inset-top);
}

.cabeca__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4) var(--esp-8);
  padding-block: var(--esp-8);
}

.cabeca__marca { flex: 0 0 auto; }

/* 176 px: mínimo travado no capítulo 3. O menu cede, o logotipo não. O
   sufixo do arquivo nomeia o FUNDO: `-papel` é o logotipo em tinta. */
.cabeca__marca img { width: 176px; }

.cabeca nav { margin-left: auto; }

.cabeca__menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-8);
  margin: 0;
  padding: 0;
}

.cabeca__menu a,
.colofao__menu a {
  font-family: var(--fonte-humanista);
  font-size: var(--tipo-sm);
  letter-spacing: var(--versal);
  text-transform: uppercase;
  line-height: var(--entre-versal);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color .18s ease-out;
}

.cabeca__menu a:hover,
.cabeca__menu a[aria-current="page"] { border-bottom-color: var(--pbg-ouro); }

/* Seletor de idioma (pedido de Pedro, 24/10/2026): o canto de cima à
   direita, depois do menu. O português é a versão padrão, na raiz; inglês
   em en/ e francês em fr/, com a mesma estrutura. São ligações simples para
   a página equivalente: sem JS, sem lembrar a escolha, sem desviar pelo
   idioma do navegador. As bandeiras vão nas cores próprias, fora da
   paleta: são símbolo nacional, não cor da marca. O idioma corrente leva o
   mesmo fio de ouro da página corrente no menu. Alvo de 32 × 32 px. */
.cabeca .linguas {
  margin-left: 0;
  padding-left: var(--esp-3);
  border-left: 1px solid var(--pbg-papel-500);
}

.linguas ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.linguas a {
  position: relative;
  display: block;
  padding: 9px 6px;
}

.linguas img {
  display: block;
  width: 20px;
  height: 14px;
  box-shadow: 0 0 0 1px var(--pbg-papel-500);
}

.linguas a::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 1px;
  background: transparent;
  transition: background-color .18s ease-out;
}

.linguas a:hover::after,
.linguas a[aria-current]::after { background: var(--pbg-ouro); }


/* ==========================================================================
   ROSTO — a folha de rosto
   --------------------------------------------------------------------------
   Só tipo, sobre a manhã. O título assenta baixo, perto da linha, e o fio
   de ouro na base é o horizonte. Não ocupa a tela inteira: o começo do
   capítulo I aparece embaixo, e é isso que diz que a página continua.
   ========================================================================== */

.rosto {
  background: var(--hora-manha);
  border-bottom: 1px solid var(--pbg-ouro);
}

.rosto__corpo {
  min-height: clamp(26rem, 72svh, 50rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: var(--esp-16);
  padding-bottom: var(--esp-16);
}

.rosto h1 {
  font-size: var(--display-4);
  max-width: 19ch;
}

.rosto__sub {
  max-width: 44ch;
  margin-top: var(--esp-8);
  font-size: var(--tipo-lg);
  line-height: var(--entre-titulo);
  color: var(--texto-secundario);
  letter-spacing: var(--display-fechado);
}

/* Páginas internas: rosto mais baixo, título na escala de página interna
   (display-2, decisão de Grade); publicação usa display-3. As regras de
   publicação (`--artigo`, `.publicacoes`, `.artigo__*`) ficam à espera da
   segunda versão: a primeira sai sem publicações (24/10/2026).
   Até 24/10/2026 o rosto interno tinha altura mínima (46svh), e o vão entre a
   cabeça e o rótulo variava com o texto de cada página, de ~190 a ~275 px a
   1440 × 900. Pedido de Pedro: menos espaço sem uso, ainda confortável. Agora
   o vão é um respiro fixo, de 96 a 128 px conforme a altura da tela, igual
   nas quatro internas; embaixo seguem os 64 px até o fio. A inicial não muda. */
.rosto--interna .rosto__corpo {
  min-height: 0;
  padding-top: clamp(var(--esp-24), 14svh, var(--esp-32));
}
.rosto--interna h1 { font-size: var(--display-2); max-width: 24ch; }
.rosto--artigo h1  { font-size: var(--display-3); max-width: 26ch; }
.rosto--interna .rotulo { margin-bottom: var(--esp-4); }
.rosto--interna .lead { max-width: 52ch; margin-top: var(--esp-6); }
.rosto--artigo .meta { margin-top: var(--esp-6); }


/* ==========================================================================
   INICIAL — a landing (12/10/2026, à noite)
   --------------------------------------------------------------------------
   Decisão de Pedro: a inicial é uma landing page, sem as frentes de
   atuação, com texto provisório (`data-mock`) e imagem usada com cautela,
   para compor a rolagem. O livro de 12/10 à tarde foi para
   `_estudos/abertura-livro/`, inteiro e navegável.

   Gramática "Suplemento" (BRIEF.md): a página de jornal moderna, como a
   do Suplemento Dominical do Jornal do Brasil, onde saiu o Manifesto
   Neoconcreto (Rio, 1959). Blocos assimétricos na grade de 12 colunas,
   muito vazio, nenhum fio entre colunas, e os planos chapados fazendo o
   papel do preto da página. O dia continua passando por corte seco, um
   fundo por seção: manhã, dia, tarde, poente, e a noite do colofão.

     1. entrada     a frase e um campo de planos que se abre em relevo
     2. manifesto   uma frase grande, em serifa, ancorada à direita
     3. método      o objeto articulado: a rolagem dobra as placas
     4. pausa       a composição II, aberta a partir do próprio corte
     5. assinatura  perfil e contato, só tipo: o silêncio
     colofão        o sol pousa (o mesmo de todas as páginas)

   Regras da obra, as mesmas das imagens travadas: só tokens, chapado,
   sem gradiente, sem transparência e sem ouro. Movimento só por
   `transform` e `clip-path`, escrito pelo js/site.js. Sem JavaScript e
   com movimento reduzido, tudo está no lugar e parado.
   ========================================================================== */

.inicio .cabeca { background: var(--hora-manha); }

/* ---- 1. Entrada ---------------------------------------------------------- *
 * O campo à direita é uma superfície dividida pela linha orgânica: o vão
 * claro que aparece entre dois planos encostados. Cada plano é um
 * polígono na caixa inteira da seção; os vãos são a distância entre os
 * polígonos, e o fundo `manhã` aparece neles. `--y` (px) é escrito pelo
 * JS a partir de `data-prof`: quanto maior, mais longe o plano parece, e
 * os vãos se abrem enquanto a página sobe. O corte inclinado (C1) vai de
 * (58%, 0) a (50%, 100%); a linha horizontal (C2) fica a 62%; a vertical
 * (C3), a 82%. Meia linha orgânica: --v.                                 */

.entrada {
  --v: 3px;
  position: relative;
  min-height: max(34rem, calc(100svh - 7rem));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--hora-manha);
}

.entrada__obra { position: absolute; inset: 0; pointer-events: none; }

.plano-e {
  position: absolute;
  inset: 0;
  display: block;
  transform: translate3d(0, var(--y, 0px), 0);
}

.js .plano-e { will-change: transform; }

/* C1 em y: x = 58% - 8% · y. Em y = 62%, x = 53,04%. */
.plano-e--noite {
  z-index: 2;
  background: var(--pbg-tinta);
  clip-path: polygon(calc(58% + var(--v)) 0, calc(82% - var(--v)) 0,
                     calc(82% - var(--v)) calc(62% - var(--v)),
                     calc(53.04% + var(--v)) calc(62% - var(--v)));
}

.plano-e--tarde {
  z-index: 2;
  background: var(--pbg-azul-700);
  clip-path: polygon(calc(82% + var(--v)) 0, 100% 0,
                     100% calc(62% - var(--v)), calc(82% + var(--v)) calc(62% - var(--v)));
}

.plano-e--dia {
  z-index: 1;
  background: var(--pbg-papel-300);
  clip-path: polygon(calc(53.04% + var(--v)) calc(62% + var(--v)), 100% calc(62% + var(--v)),
                     100% 100%, calc(50% + var(--v)) 100%);
}

/* Uma lâmina azul que sai de baixo da linha horizontal: o único plano
   que atravessa um corte. Com a rolagem ela se adianta, e é isso que
   dá a frente do relevo. */
.plano-e--azul {
  z-index: 3;
  background: var(--pbg-azul);
  clip-path: polygon(64% calc(62% + var(--v)), 72% calc(62% + var(--v)),
                     72% 84%, 64% 84%);
}

/* O quadrado pequeno, na frente de tudo, contornado pelo vão claro. */
.plano-e--quadro {
  z-index: 4;
  inset: auto;
  left: 86%;
  top: 70%;
  width: clamp(2.5rem, 4.4vw, 4.25rem);
  aspect-ratio: 1;
  background: var(--pbg-tinta);
  box-shadow: 0 0 0 calc(var(--v) * 2) var(--hora-manha);
}

.entrada__texto {
  position: relative;
  z-index: 5;
  width: 100%;
  padding-top: var(--esp-16);
  padding-bottom: clamp(var(--esp-16), 15svh, var(--esp-32));
}

.entrada h1 {
  font-size: var(--display-4);
  line-height: var(--entre-display);
  max-width: 15ch;
}

.entrada__sub {
  max-width: 34ch;
  margin-top: var(--esp-6);
  font-size: var(--tipo-lg);
  line-height: var(--entre-titulo);
  color: var(--texto-secundario);
  letter-spacing: var(--display-fechado);
}

/* No largo a frase ocupa a metade esquerda e nunca encosta no campo,
   que embaixo começa em 50% da largura. */
@media (min-width: 46.0625rem) {
  .entrada h1 { max-width: min(18ch, 40vw); }
  .entrada__sub { max-width: min(30ch, 36vw); }
}

/* ---- 2. Manifesto -------------------------------------------------------- */

.manifesto {
  background: var(--hora-manha);
  padding-block: var(--esp-secao);
}

.manifesto__grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--goteira);
}

.manifesto__grade > * { grid-column: 1 / -1; }

/* Um quadrado pequeno de tinta abre a frase, como o bloco preto que
   abria a matéria na página de jornal moderna. No largo ele fica
   pendurado na margem, na altura da primeira linha. */
.manifesto__fio {
  display: block;
  width: 0.75rem;
  aspect-ratio: 1;
  background: var(--pbg-tinta);
  margin-bottom: var(--esp-8);
}

.manifesto__frase {
  font-family: var(--fonte-serifada);
  font-size: var(--display-4);
  line-height: 1.2;
  letter-spacing: var(--display-fechado);
  max-width: 22ch;
}

.manifesto__corpo {
  margin-top: var(--esp-12);
  max-width: var(--medida-leitura);
  color: var(--texto-secundario);
}

.manifesto__elo {
  margin-top: var(--esp-6);
  font-family: var(--fonte-humanista);
  font-size: var(--tipo-sm);
  letter-spacing: var(--versal);
  text-transform: uppercase;
}

@media (min-width: 64rem) {
  .manifesto__grade > * { grid-column: 3 / -1; }
  .manifesto__fio {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0.42em 0 0;
    font-size: var(--display-4);
    width: 0.24em;
  }
  .manifesto__frase { grid-row: 1; }
  .manifesto__corpo,
  .manifesto__elo { grid-column: 7 / -1; }
}

/* ---- 3. Método: o objeto articulado -------------------------------------- *
 * Quatro placas num quadrado: a base (embaixo, à esquerda), o topo (em
 * cima, à esquerda, preso à base por uma dobradiça horizontal), a asa
 * (o triângulo de baixo da metade direita, presa à base pela vertical do
 * meio) e a ponta (o triângulo de cima, presa à asa pela diagonal). Entre
 * as placas, a linha orgânica: 1,5% do lado, o fundo aparecendo.
 *
 * Não é 3D de CSS. O 3D aninhado com `backface-visibility` fez placas
 * sumirem no Chrome conforme a composição de camadas (12/10/2026, na
 * bancada `_estudos/bancada/bicho.html`). O JS gira as placas em torno
 * das dobradiças, projeta em perspectiva, ordena por profundidade e
 * reescreve os polígonos do SVG; a classe `avesso` diz qual face está
 * virada para quem olha. Sem JS, os pontos do HTML são a pintura plana.  */

.metodo { background: var(--hora-dia); }

.metodo__grade {
  display: grid;
  grid-template-columns: 1fr;
}

.metodo__palco {
  display: grid;
  place-items: center;
  padding-block: var(--esp-16);
}

.bicho {
  --s: min(24rem, 30vw, 50svh);
  width: var(--s);
  aspect-ratio: 1;
}

.bicho__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.lamina--base          { fill: var(--pbg-tinta); }
.lamina--base.avesso   { fill: var(--pbg-tinta-900); }
.lamina--topo          { fill: var(--pbg-azul); }
.lamina--topo.avesso   { fill: var(--pbg-papel-300); }
.lamina--asa           { fill: var(--pbg-azul-700); }
.lamina--asa.avesso    { fill: var(--pbg-tinta-500); }
.lamina--ponta         { fill: var(--pbg-papel-50); }
.lamina--ponta.avesso  { fill: var(--pbg-azul-300); }

/* A sombra na mesa: chapada, um degrau abaixo do fundo, nunca
   transparente. O traço da mesma cor fecha a linha orgânica entre as
   sombras das placas, que na mesa não existe. Sem JS não tem pontos, e
   não aparece. */
.lamina--sombra {
  fill: var(--pbg-papel-300);
  stroke: var(--pbg-papel-300);
  stroke-width: 0.018;
  stroke-linejoin: round;
}

.metodo__texto {
  padding-bottom: var(--esp-secao);
}

.metodo__cabeca {
  padding-top: var(--esp-secao);
}

.metodo__cabeca h2 { max-width: 20ch; }
.metodo__cabeca .lead { max-width: 36ch; margin-top: var(--esp-6); }

.principio {
  min-height: 46svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--esp-12);
}

.principio h3 {
  font-size: var(--display-1);
  max-width: 22ch;
  margin-bottom: var(--esp-4);
}

.principio p {
  max-width: 40ch;
  color: var(--texto-secundario);
}

@media (min-width: 46.0625rem) {
  .metodo__grade {
    grid-template-columns: 5fr 6fr;
    column-gap: var(--esp-16);
  }

  .metodo__palco {
    position: sticky;
    top: 0;
    height: 100svh;
    padding-block: 0;
    align-self: start;
  }

  .metodo__cabeca { padding-top: max(var(--esp-secao), 28svh); }
  .metodo__texto  { padding-bottom: max(var(--esp-secao), 24svh); }
}

/* ---- 4. Pausa ------------------------------------------------------------ *
 * A composição II em toda a largura, quando a altura deixa. O palco fica
 * preso enquanto `--r` vai de 0 a 1 (JS). Em 0, a moldura mostra só a
 * fatia do corte inclinado do desenho (x de 1000 a 1120 em 1600: de
 * 62,5% a 70%); em 1, a imagem inteira. A imagem não muda: muda a
 * janela. A legenda chega no fim. Sem JS, `--r` é 1.                    */

.pausa {
  --r: 1;
  --corte-e: 62.5%;
  --corte-d: 30%;
  position: relative;
  background: var(--hora-tarde);
}

.pausa__palco {
  display: grid;
  place-items: center;
  padding-block: var(--esp-16);
}

.js .pausa { height: 170svh; }
.js .pausa__palco { position: sticky; top: 0; height: 100svh; padding-block: 0; }

.pausa__figura {
  margin: 0;
  width: min(100%, calc((100svh - 9rem) * 2));
}

.pausa__moldura {
  aspect-ratio: 2 / 1;
  overflow: hidden;
  clip-path: inset(0 calc((1 - var(--r)) * var(--corte-d)) 0 calc((1 - var(--r)) * var(--corte-e)));
}

.pausa__moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1 + (1 - var(--r)) * 0.08));
  transform-origin: 66% 50%;
}

.pausa .legenda {
  padding-inline: var(--margem-viewport);
  opacity: clamp(0, (var(--r) - 0.8) * 5, 1);
}

/* ---- 5. Assinatura ------------------------------------------------------- */

.assinatura {
  background: var(--hora-poente);
  padding-block: var(--esp-secao);
}

.assinatura__grade {
  display: grid;
  gap: var(--esp-16);
}

.assinatura h2 { font-size: var(--display-2); margin-bottom: var(--esp-6); }

.assinatura__perfil > p:not(.rotulo) { max-width: 38ch; }

/* O contato é o e-mail, e só ele (24/10/2026): uma linha de texto no corpo
   que os títulos das publicações tinham, não um botão. O endereço não tem
   onde quebrar; no telefone ele quebra onde precisar em vez de vazar. */
.assinatura__email {
  margin: 0;
  font-family: var(--fonte-humanista);
  font-size: var(--display-1);
  line-height: var(--entre-titulo);
  letter-spacing: var(--display-fechado);
  overflow-wrap: anywhere;
}

.assinatura__email a {
  border-bottom: 1px solid var(--pbg-ouro-700);
  padding-bottom: 1px;
  transition: border-color .18s ease-out;
}

.assinatura__email a:hover { border-color: var(--pbg-tinta); }

/* No poente o fio de ouro some (1,9:1); o da ligação desce para ouro-700. */
.assinatura .corrido a { border-bottom-color: var(--pbg-ouro-700); }

.assinatura .corrido {
  font-family: var(--fonte-humanista);
  font-size: var(--tipo-sm);
  letter-spacing: var(--versal);
  text-transform: uppercase;
}

@media (min-width: 64rem) {
  .assinatura__grade {
    grid-template-columns: 5fr 6fr;
    column-gap: var(--esp-24);
  }
}


/* ==========================================================================
   CAPÍTULOS — cada um na sua hora
   ========================================================================== */

.capitulos { position: relative; }

.capitulo {
  padding-block: var(--esp-secao);
  scroll-margin-top: 0;
}

.hora-manha  { background: var(--hora-manha);  }
.hora-dia    { background: var(--hora-dia);    }
.hora-tarde  { background: var(--hora-tarde);  }
.hora-poente { background: var(--hora-poente); }

/* O miolo abre espaço para o fólio à esquerda. Abaixo de 64 rem o fólio
   some e o miolo ocupa a página inteira. */
.miolo { position: relative; }

/* Cabeça corrente: o número do capítulo e, no telefone, o horizonte
   pequeno com o sol na altura daquela hora. */
.capitulo__cabeca {
  display: flex;
  align-items: flex-end;
  gap: var(--esp-4);
  margin: 0 0 var(--esp-4);
}

.capitulo__num {
  font-family: var(--fonte-humanista);
  font-size: var(--tipo-sm);
  letter-spacing: var(--versal);
  line-height: 1;
  color: var(--texto-terciario);
  margin: 0;
}

.capitulo h2 { margin-bottom: var(--esp-6); }

.capitulo__corpo > p { color: var(--texto-secundario); max-width: 46ch; }
.capitulo__corpo > p:first-child { color: var(--texto); }

/* Perfil — no telefone o retrato abre e o texto vem embaixo (pedido de
   Pedro, 24/10/2026: a ordem é a do HTML); no largo, lado a lado. */
.miolo--par {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-12);
  align-items: center;
}

/* Atuação — uma frente por capítulo: o texto e, numa coluna menor, a
   composição travada daquela frente (LEIA-ME, "As imagens"). No telefone
   o texto vem primeiro e a imagem fecha o capítulo, mais estreita que a
   coluna. As disposições que só a inicial capitulada usava (prancha,
   recolhe) e a da Atuação só de texto (tese) saíram em 12/10/2026. */
.miolo--frente {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-12);
}

.miolo--frente .capitulo__corpo > p,
.miolo--frente .capitulo__corpo > ul { max-width: var(--medida-leitura); }

.miolo--frente .estante { max-width: 24rem; }

/* A composição II é 2:1 e entra inteira, sem corte. */
.estante--larga .estante__moldura { aspect-ratio: 2 / 1; }

/* Subtítulo dentro do corpo: versal pequeno, como o rótulo. É divisão do
   texto, não título de seção. */
.capitulo__corpo h3 {
  margin: var(--esp-8) 0 var(--esp-3);
  font-family: var(--fonte-humanista);
  font-size: var(--tipo-sm);
  letter-spacing: var(--versal);
  text-transform: uppercase;
  line-height: var(--entre-versal);
  color: var(--texto-terciario);
}

.capitulo__corpo ul {
  margin: 0 0 var(--esp-paragrafo);
  padding-left: 1.1em;
  color: var(--texto-secundario);
}

/* Lista que fecha o capítulo (Mercado de capitais, desde 24/10/2026) não
   leva o espaço de parágrafo embaixo, como o último parágrafo. */
.capitulo__corpo ul:last-child { margin-bottom: 0; }

.capitulo__corpo li { margin-bottom: var(--esp-2); padding-left: var(--esp-1); }
.capitulo__corpo li::marker { color: var(--pbg-azul); }

/* Texto denso, justificado (decisão de Pedro, 24/10/2026): o corpo das
   frentes da Atuação, a biografia do Perfil e a Privacidade. Nesses blocos
   reverte o "alinhado à esquerda" da decisão de Grade de 30/08; títulos,
   folhas de rosto, inicial, Contato e colofão seguem à esquerda. No
   telefone (até 46rem) o texto denso volta à esquerda, sem hifenização:
   ver TELAS ESTREITAS. A hifenização fecha os rios da justificação do
   tablet para cima: só parte palavra de 6 letras ou mais, com 2 de cada
   lado (a sílaba mínima do português), e nunca dentro de uma ligação. */
.capitulo__corpo > p,
.capitulo__corpo li,
.miolo--par .capitulo__texto > p,
.artigo p,
.artigo li {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 2 2;
}

.capitulo__corpo a,
.miolo--par .capitulo__texto a,
.artigo a { -webkit-hyphens: manual; hyphens: manual; }

/* Biografia do Perfil: os pontos principais em negrito (decisão de Pedro,
   24/10/2026). O resto do site segue com peso 400; a tipografia da marca
   admite ênfase por peso, e a Century Schoolbook tem o negrito de verdade.
   Dentro do negrito não se hifeniza: são nomes, e "Fa-culdade" partido em
   negrito chama mais atenção que o próprio destaque. */
.miolo--par .capitulo__texto strong {
  font-weight: 700;
  -webkit-hyphens: manual;
  hyphens: manual;
}



/* ==========================================================================
   FÓLIO — a margem do livro
   --------------------------------------------------------------------------
   Corre ao lado dos capítulos e sai com eles: é `sticky` dentro de uma
   coluna que só existe enquanto houver capítulo. Traz o nome da página,
   o índice clicável e o horizonte pequeno. `--dia` vai de 0 (manhã) a 1
   (fim do último capítulo) e é escrito pelo js/site.js; sem ele, o sol
   fica no meio.
   ========================================================================== */

.folio { display: none; }

.folio__corpo {
  position: sticky;
  top: var(--esp-12);
  display: grid;
  gap: var(--esp-6);
}

.folio__pagina {
  font-family: var(--fonte-humanista);
  font-size: var(--tipo-xs);
  letter-spacing: var(--versal);
  text-transform: uppercase;
  line-height: var(--entre-versal);
  color: var(--texto-terciario);
  margin: 0;
}

.folio__indice {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}

.folio__indice a {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  font-family: var(--fonte-humanista);
  font-size: var(--tipo-sm);
  line-height: 1.35;
  color: var(--texto-terciario);
  transition: color .18s ease-out;
}

.folio__indice a:hover { color: var(--texto); }

.folio__indice a[aria-current="true"] { color: var(--texto); }

.folio__indice a[aria-current="true"] .folio__titulo {
  text-decoration: underline;
  text-decoration-color: var(--pbg-ouro);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* O horizonte pequeno. Fio de ouro de 1 px e um sol que desce da esquerda
   alta para a direita baixa enquanto a leitura avança, e encosta na linha
   no fim do último capítulo. */
.horizonte {
  position: relative;
  display: block;
  height: 4rem;
  border-bottom: 1px solid var(--pbg-ouro);
}

.horizonte__sol {
  position: absolute;
  bottom: 0;
  left: calc(10% + var(--dia, 0.5) * 62%);
  width: 0.875rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%,
    var(--pbg-ouro-100) 0%, var(--pbg-ouro-300) 45%, var(--pbg-ouro) 100%);
  transform: translate3d(0, calc((1 - var(--dia, 0.5)) * -2.75rem), 0);
}

/* A cabeça corrente do telefone usa o mesmo desenho, menor e fixo na hora
   daquele capítulo (`--dia` no HTML). */
.horizonte--corrente {
  width: 3.5rem;
  height: 1.75rem;
  flex: 0 0 auto;
}

.horizonte--corrente .horizonte__sol {
  width: 0.625rem;
  transform: translate3d(0, calc((1 - var(--dia, 0.5)) * -1.1rem), 0);
}


/* ==========================================================================
   IMAGEM — em coluna própria
   --------------------------------------------------------------------------
   O nome `.estante` é histórico: até 12/10/2026 eram fotografias da estante
   do escritório. Hoje são as três composições da família Neoconcreto, em
   SVG, travadas (LEIA-ME, "As imagens"). Sem legenda desde 24/10/2026, a
   pedido de Pedro; o texto alternativo de cada uma continua.
   ========================================================================== */

.estante { margin: 0; }

.estante__moldura {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio-imagem);
  overflow: hidden;
  background: var(--pbg-papel-300);
}

.estante__moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.legenda { margin-top: var(--esp-3); }

/* Retrato: 4:5, a proporção do próprio arquivo (764 × 955), sem corte.
   Sem paralaxe nem cortina: o retrato não se mexe. Entrou em 24/10/2026
   (LEIA-ME, "O retrato"). */
.estante--retrato .estante__moldura { aspect-ratio: 4 / 5; }


/* ==========================================================================
   LISTAS — publicações e canais de contato
   --------------------------------------------------------------------------
   `.publicacoes` não tem página na primeira versão (24/10/2026); as páginas
   esperam em `_estudos/publicacoes-segunda-versao/`.
   ========================================================================== */

.publicacoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-24);
}

.publicacoes a { display: block; }

.publicacoes h2 {
  font-size: var(--display-2);
  margin: var(--esp-3) 0 var(--esp-4);
  max-width: 34ch;
  transition: color .18s ease-out;
}

.publicacoes a:hover h2 { color: var(--texto-secundario); }
.publicacoes p:last-child { color: var(--texto-secundario); }

.canais {
  margin: 0;
  display: grid;
  gap: var(--esp-12);
}

.canais dt {
  font-family: var(--fonte-humanista);
  font-size: var(--tipo-sm);
  letter-spacing: var(--versal);
  text-transform: uppercase;
  color: var(--texto-terciario);
  margin-bottom: var(--esp-2);
}

.canais dd {
  margin: 0;
  font-size: var(--tipo-lg);
  letter-spacing: var(--display-fechado);
}


/* ==========================================================================
   ARTIGO — leitura longa
   --------------------------------------------------------------------------
   Sempre na hora do dia (`papel`), do começo ao fim. Regra de exceção da
   linguagem visual: nada sob parágrafo. Aqui o dia só passa no fólio.
   ========================================================================== */

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

.artigo h2 {
  font-size: var(--display-1);
  margin: var(--esp-16) 0 var(--esp-6);
  scroll-margin-top: var(--esp-12);
}

.artigo h2:first-child { margin-top: 0; }

.artigo strong { font-weight: 400; font-style: italic; }

.artigo__colofao { margin-top: var(--esp-16); }
.artigo__volta   { margin-top: var(--esp-12); }


/* ==========================================================================
   COLOFÃO — a noite
   --------------------------------------------------------------------------
   O pico da página. Corte seco do último capítulo para `tinta`. O céu
   guarda o sol; o mar (`tinta-900`) sobe por cima dele com a página. O
   sol desce em relação ao colofão, e na tela sobe mais devagar do que o
   mar: é a diferença de velocidade que faz a profundidade.

   `--pouso` vai de 0 (topo do colofão a 60% da tela, quando o sol entra
   em quadro) a 1 (último
   pixel de rolagem, ou o horizonte chegando a 42% da tela, o que vier
   antes). Em 1 o sol fica com o centro exatamente sobre o fio. É o valor
   padrão: sem JavaScript e com movimento reduzido, o sol já está pousado.
   ========================================================================== */

.colofao {
  --pouso: 1;
  --ceu-h: clamp(22rem, 82svh, 50rem);
  --sol-d: clamp(8.5rem, 29vw, 21rem);
  --sol-x: 72%;
  --curso: calc(var(--ceu-h) - var(--sol-d) * 0.5 - var(--esp-12));

  position: relative;
  background: var(--hora-noite);
  color: var(--texto-inverso);
  overflow: hidden;
}

.colofao__ceu {
  position: relative;
  height: var(--ceu-h);
  /* O resto de luz perto do horizonte, em ouro escuro, que apaga um pouco
     enquanto o sol pousa e não some: é o crepúsculo. */
  background:
    radial-gradient(ellipse 55% 75% at var(--sol-x) 100%,
      rgb(116 84 42 / calc(0.46 - 0.2 * var(--pouso))) 0%,
      rgb(56 75 92 / 0.12) 48%,
      rgb(4 34 64 / 0) 72%),
    var(--hora-noite);
}

.colofao__sol {
  position: absolute;
  left: var(--sol-x);
  bottom: 0;
  width: var(--sol-d);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Disco luminoso e chapado, não esfera (regra do MVP para as placas):
     esfera sombreada lê como planeta. */
  background: radial-gradient(circle at 50% 50%,
    var(--pbg-ouro-100) 0%,
    var(--pbg-ouro-300) 34%,
    var(--pbg-ouro-300) 64%,
    var(--pbg-ouro)     100%);
  transform: translate3d(-50%, calc(50% - (1 - var(--pouso)) * var(--curso)), 0);
  will-change: transform;
}

/* O halo acompanha o sol e é cortado pelo mar junto com ele. */
.colofao__sol::before {
  content: "";
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgb(215 183 142 / 0.30) 0%,
    rgb(215 183 142 / 0.10) 36%,
    rgb(215 183 142 / 0) 62%);
  opacity: calc(0.55 + 0.45 * (1 - var(--pouso)));
  z-index: -1;
}

.colofao__mar {
  position: relative;
  z-index: 1;
  background: var(--hora-mar);
  border-top: 1px solid var(--pbg-ouro);
  padding-top: var(--esp-16);
  padding-bottom: max(var(--esp-12), env(safe-area-inset-bottom));
}

/* A coluna de luz sobre a água: filetes horizontais sob o sol, só no
   vão acima do texto. Nunca fica atrás de uma linha de leitura. */
.colofao__reflexo {
  position: absolute;
  top: 0;
  left: var(--sol-x);
  width: calc(var(--sol-d) * 0.8);
  height: var(--esp-16);
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom,
    rgb(215 183 142 / 0.7) 0 1px, rgb(215 183 142 / 0) 1px 7px);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%, transparent 78%);
  opacity: calc(0.3 + 0.5 * (1 - var(--pouso)));
  pointer-events: none;
}

.colofao__corpo {
  position: relative;
  display: grid;
  gap: var(--esp-12);
}

/* O contato é uma linha de texto, não um botão. */
.colofao__convite {
  max-width: 40ch;
  margin: 0;
  font-size: var(--tipo-base);
  line-height: var(--entre-corpo);
  color: var(--texto-inverso);
}

.colofao__convite a {
  border-bottom: 1px solid var(--pbg-ouro-300);
  padding-bottom: 1px;
  transition: border-color .18s ease-out;
}

.colofao__convite a:hover { border-color: var(--pbg-papel); }
.colofao .pendente { color: var(--acento-inverso); }
.colofao :focus-visible { outline-color: var(--pbg-ouro-300); }

.colofao__base {
  display: grid;
  gap: var(--esp-8);
}

/* Logotipo sem símbolo: o símbolo já está na cena, em escala de paisagem.
   `-tinta` é a versão para fundo escuro (logotipo em papel). */
.colofao__marca img { width: 176px; }

.colofao__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-6);
}

.colofao__menu a { color: var(--texto-inverso); }
.colofao__menu a:hover,
.colofao__menu a[aria-current="page"] { border-bottom-color: var(--pbg-ouro-300); }

/* Bloco cadastral (CED art. 44). Sólido, contraste pleno: azul-300 sobre
   tinta-900 é 8,47:1, papel é 14,45:1. Nenhum efeito passa por cima. */
.cadastro {
  font-family: var(--fonte-humanista);
  font-size: var(--tipo-xs);
  line-height: var(--entre-pequeno);
  color: var(--pbg-azul-300);
  display: grid;
  gap: var(--esp-1);
}

.cadastro p { margin: 0; }

.nome-versal {
  font-family: var(--fonte-humanista);
  letter-spacing: var(--versal-largo);
  text-transform: uppercase;
  color: var(--texto-inverso);
}


/* ==========================================================================
   MOVIMENTO
   --------------------------------------------------------------------------
   Quatro coisas, todas em `transform`, `opacity` ou `clip-path`, todas
   escritas pelo js/site.js a partir da rolagem, e todas desligadas sob
   movimento reduzido:
     · [data-paralaxe]  a imagem desliza ±8% dentro da moldura (I)
     · [data-cortina]   a moldura abre de baixo para cima (II)
     · [data-entra]     o bloco aparece uma vez, em ordem de leitura (III)
     · --dia, --pouso   o sol do fólio e o do colofão
   A classe `.js` só existe com JavaScript ligado: sem ela, nada começa
   escondido.
   ========================================================================== */

/* scale(1.2) deixa 10% de folga em cada borda; o deslocamento vai a
   ±8% da própria imagem, então a borda da imagem nunca aparece, em
   moldura de qualquer tamanho. Em px fixos a folga do telefone (~16 px)
   era menor que o curso. */
[data-paralaxe] img {
  transform: translate3d(0, var(--desloca, 0%), 0) scale(1.2);
  will-change: transform;
}

.js [data-cortina] .estante__moldura {
  clip-path: inset(calc((1 - var(--abre, 1)) * 100%) 0 0 0 round var(--raio-imagem));
}

.js [data-entra] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .62s var(--saida), transform .62s var(--saida);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js [data-entra].dentro > * {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   TELAS LARGAS — o fólio aparece e o miolo abre as colunas
   ========================================================================== */

@media (min-width: 64rem) {
  .folio {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(var(--margem-viewport),
              calc((100% - var(--medida-pagina)) / 2 + var(--margem-viewport)));
    width: var(--folio-l);
    padding-block: var(--esp-secao);
    z-index: 2;
  }

  .capitulo .miolo { margin-left: calc(var(--folio-l) + var(--folio-folga)); }

  /* No largo, o horizonte do capítulo é o do fólio. */
  .capitulo__cabeca .horizonte--corrente { display: none; }

  /* A imagem acompanha a leitura: presa no alto enquanto o texto da
     frente passa. Começa na altura do título. */
  .miolo--frente {
    grid-template-columns: 7fr 4fr;
    column-gap: var(--esp-16);
    align-items: start;
  }

  .miolo--frente .estante {
    position: sticky;
    top: var(--esp-12);
    max-width: none;
    margin-top: var(--esp-12);
  }

  /* Retrato à esquerda, texto à direita. Desde 24/10/2026 a biografia tem
     quatro parágrafos: o texto fica com a coluna maior e começa no alto,
     junto com o retrato. */
  .miolo--par {
    grid-template-columns: 5fr 6fr;
    gap: var(--esp-16);
    align-items: start;
  }

  .colofao__base {
    grid-template-columns: auto 1fr;
    align-items: end;
    column-gap: var(--esp-16);
  }

  .colofao__menu { justify-content: flex-end; }
  .colofao__base .cadastro { grid-column: 1 / -1; }
}


/* ==========================================================================
   TELAS ESTREITAS
   ========================================================================== */

@media (max-width: 46rem) {
  .cabeca__linha { padding-block: var(--esp-6); }
  .cabeca nav { margin-left: 0; width: 100%; order: 3; }
  .cabeca__menu { gap: var(--esp-3) var(--esp-6); }

  /* As bandeiras sobem para a linha do logotipo, no canto direito; o menu
     desce para a linha inteira de baixo. */
  .cabeca .linguas {
    order: 2;
    width: auto;
    margin-left: auto;
    margin-right: -6px;
    padding-left: 0;
    border-left: 0;
  }

  /* Texto denso no telefone: à esquerda e sem hifenização (decisão de
     Pedro, 24/10/2026). Na coluna de ~38 caracteres a justificação abria
     vãos largos, sobretudo junto dos negritos da biografia. */
  .capitulo__corpo > p,
  .capitulo__corpo li,
  .miolo--par .capitulo__texto > p,
  .artigo p,
  .artigo li {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  .rosto__corpo {
    min-height: clamp(22rem, 64svh, 34rem);
    padding-top: var(--esp-12);
    padding-bottom: var(--esp-12);
  }

  .rosto--interna .rosto__corpo { min-height: 0; padding-top: var(--esp-8); }

  .capitulo { padding-block: var(--esp-16); }

  /* Inicial, entrada: a obra em cima, a frase embaixo, nunca uma sobre a
     outra. Os planos são redesenhados para a caixa da obra: o corte
     inclinado vira a borda de baixo da noite, de (0, 70%) a (64%, 62%). */
  .entrada { display: block; min-height: 0; }
  .entrada__obra { position: relative; inset: auto; height: clamp(15rem, 44svh, 24rem); overflow: hidden; }
  .plano-e--noite  { clip-path: polygon(0 0, calc(64% - var(--v)) 0, calc(64% - var(--v)) calc(62% - var(--v)), 0 calc(70% - var(--v))); }
  .plano-e--tarde  { clip-path: polygon(calc(64% + var(--v)) 0, 100% 0, 100% calc(62% - var(--v)), calc(64% + var(--v)) calc(62% - var(--v))); }
  .plano-e--dia    { clip-path: polygon(0 calc(70% + var(--v)), calc(64% - var(--v)) calc(62% + var(--v)), 100% calc(62% + var(--v)), 100% 100%, 0 100%); }
  .plano-e--azul   { clip-path: polygon(72% calc(62% + var(--v)), 84% calc(62% + var(--v)), 84% 88%, 72% 88%); }
  .plano-e--quadro { left: 12%; top: 80%; width: 2.25rem; }
  .entrada__texto { padding-top: var(--esp-8); padding-bottom: var(--esp-12); }
  .entrada h1 { font-size: var(--display-3); }
  .entrada__sub { font-size: var(--tipo-md); margin-top: var(--esp-4); }

  .manifesto__frase { font-size: var(--display-3); }

  /* Método: o objeto numa faixa presa no alto da seção; o texto passa
     por baixo dela. A faixa tem o fundo da seção, opaco. */
  .metodo__palco {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 40svh;
    padding-block: var(--esp-4);
    background: var(--hora-dia);
  }
  .bicho { --s: min(13rem, 24svh, 58vw); }
  .metodo__cabeca { padding-top: var(--esp-8); }
  .principio { min-height: 44svh; }

  /* Pausa: moldura 4:3 de borda a borda, deslocada a 60%: a janela vai
     de x = 320 a 1387 do desenho e guarda a faixa clara, o corte e o
     canto do quadrado. O corte cai de 63,75% a 75% dela. O desenho não
     muda; a fatia inicial acompanha a moldura nova. */
  .pausa { --corte-e: 63.75%; --corte-d: 25%; }
  .pausa__figura { width: 100%; }
  .pausa__moldura { aspect-ratio: 4 / 3; }
  .pausa__moldura img { object-position: 60% 50%; transform-origin: 70% 50%; }

  /* No telefone o sol fica mais à direita e maior em proporção, e o céu
     é mais baixo: o quadro final tem de caber com o texto embaixo. */
  .colofao {
    --ceu-h: clamp(16rem, 56svh, 28rem);
    --sol-d: clamp(7.5rem, 40vw, 11rem);
    --sol-x: 70%;
  }

  .colofao__mar { padding-top: var(--esp-12); }
  .colofao__reflexo { height: var(--esp-12); }
  .colofao__corpo { gap: var(--esp-8); }
}



/* ==========================================================================
   EXCEÇÕES
   --------------------------------------------------------------------------
   O site tem de estar inteiro, legível e correto com tudo isto desligado.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-paralaxe] img { transform: none; will-change: auto; }
  .js [data-cortina] .estante__moldura { clip-path: none; }
  .js [data-entra] > * { opacity: 1; transform: none; transition: none; }
  .colofao { --pouso: 1 !important; }
  .js .plano-e { transform: none; will-change: auto; }
  .js .pausa { height: auto; --r: 1 !important; }
  .js .pausa__palco { position: relative; height: auto; padding-block: var(--esp-16); }
  .colofao__sol { will-change: auto; }
  a, .folio__indice a, .publicacoes h2 { transition: none; }
}

@media print {
  .cabeca nav, .folio, .colofao__ceu, .colofao__reflexo,
  .horizonte, .estante, .pular { display: none !important; }

  /* A inicial imprime só o texto. */
  .entrada__obra, .metodo__palco, .pausa, .manifesto__fio { display: none !important; }
  .entrada, .manifesto, .metodo, .assinatura { min-height: 0 !important; background: #fff !important; padding-block: var(--esp-8) !important; }
  .principio { min-height: 0; padding-block: var(--esp-4); }

  html, body, .rosto, .capitulo, .colofao, .colofao__mar {
    background: #fff !important;
    color: #000;
  }

  body { font-size: 11pt; }
  .rosto__corpo { min-height: 0; padding-block: 0 var(--esp-8); }
  .capitulo { padding-block: var(--esp-8); }
  .capitulo .miolo { margin-left: 0; }

  .colofao__mar { border-top: 1px solid var(--pbg-azul); padding-top: var(--esp-8); }
  .colofao__convite, .nome-versal, .cadastro { color: var(--texto); }
  .colofao .pendente { color: var(--acento-texto); }
  .colofao__marca, .colofao__menu { display: none; }

  .js [data-entra] > * { opacity: 1; transform: none; }
  a { border-bottom: 0 !important; }
}