/* ============================================================================
PONTE ENTRE A LANDING E O APP NEXT
🚨 O PROBLEMA QUE ESTE ARQUIVO RESOLVE: o `app/layout.tsx` carrega o
`globals.css` (Tailwind + estilos do painel) em TODAS as páginas, inclusive
na landing. E os dois definem `body`:
globals.css (app) → background #1F2A44, color #DCE0E6, DM Sans
style.css (landing) → background var(--noite) #0B1D41, color var(--creme)
Como o `globals.css` é importado pelo layout (entra no bundle) e o
`style.css` é um estático, a ORDEM não é garantida entre builds. Sem
esta ponte, a landing podia acordar um dia com o azul do painel.
✅ A saída é não depender da ordem: aqui as regras são reafirmadas com
especificidade MAIOR (`body:has(.site-anfity)`), o que vence qualquer
`body {}` solto, venha de onde vier.
📌 Carregado DEPOIS de tokens.css e style.css, só na landing.
========================================================================= */
/* ---- O body, quando a página é a landing ---------------------------------- */
/* `:has()` é suportado por todos os navegadores atuais. Se um dia precisar de
fallback, a alternativa é o layout pôr uma classe no por rota. */
body:has(.site-anfity) {
background: var(--noite);
color: var(--creme);
font-family: var(--f-body);
font-size: var(--t-body);
line-height: var(--lh-body);
font-weight: 300;
}
/* 🚨 O `globals.css` do app tem `html { scroll-behavior: smooth }`, e isso
BRIGA com o Lenis: o navegador tenta animar o scroll ao mesmo tempo que a
biblioteca, e o resultado é rolagem travando ou "pulando". O Lenis exige
scroll nativo instantâneo. */
html:has(.site-anfity) {
scroll-behavior: auto;
}
/* ---- Isolamento do wrapper ------------------------------------------------- */
/* O
que envolve o HTML injetado não pode herdar nada de layout do app
(o Tailwind não aplica nada aqui, mas deixa explícito e à prova de mudança
futura no globals.css). */
.site-anfity {
display: block;
width: 100%;
margin: 0;
padding: 0;
font-family: var(--f-body);
}
/* O reset que o style.css aplica a elementos soltos vale igual aqui dentro. */
.site-anfity img,
.site-anfity svg,
.site-anfity video { display: block; max-width: 100%; }
.site-anfity a { color: inherit; }
/* ---- As páginas legais e a 404 --------------------------------------------
No protótipo em HTML puro elas usavam `` e
`` para pintar o fundo. No Next o é do
layout do app e não pode receber essas classes, então o wrapper as carrega
e o fundo é reafirmado por `:has()`, como na landing. */
body:has(.pagina-legal) { background: var(--claro); color: var(--texto-claro-fundo); }
body:has(.pagina-404) { background: var(--noite); color: var(--creme); }
/* ⚠️ Não basta pintar o `body`: o `globals.css` do app define `color` nele, e
os títulos da política herdavam o CINZA-CLARO do painel sobre o fundo claro
— texto quase invisível. Aqui a cor é reafirmada no wrapper, que é o pai
direto de todo o conteúdo. */
.pagina-legal { color: var(--texto-claro-fundo); }
.pagina-404 { color: var(--creme); }
/* O `font-family` também vem do body do app (DM Sans peso 300). A política usa
Fraunces nos títulos e o peso normal no corpo. */
.pagina-legal, .pagina-404 { font-family: var(--f-body); font-weight: 400; }
.pagina-legal img, .pagina-404 img,
.pagina-legal svg, .pagina-404 svg { display: block; max-width: 100%; }
.pagina-legal a, .pagina-404 a { color: inherit; }
/* 🚨 O RODAPÉ ESCURO É EXCEÇÃO ÀS DUAS REGRAS ACIMA (bug pego pelo Gustavo em
20/ago, na página /termos recém-publicada).
O `color: inherit` existe para os links do CORPO da página, que vivem sobre o
fundo CLARO. Só que o rodapé é navy e mora dentro do mesmo wrapper — então os
contatos herdavam o azul-escuro do texto e ficavam NAVY SOBRE NAVY: contraste
1:1, texto invisível. Na landing eles são creme, porque lá não existe wrapper
`.pagina-legal` reescrevendo a cor.
⚠️ A causa não era o `display: block` do SVG, embora parecesse: medido, o
`display` é idêntico nas duas páginas. O que sumia era só a COR. Sintoma de
layout nem sempre é causa de layout.
⚠️ `color: revert` NÃO serve aqui, e foi a primeira tentativa: ele volta ao
estilo do NAVEGADOR, não à regra anterior da folha — o resultado foi o azul
de link padrão (#9e9eff) sobre o navy. O token é o caminho certo.
📌 `--creme` é a mesma variável que o `style.css` usa nesses links, então a
cor continua vindo de um lugar só. O ícone não entra: o `color` do SVG é
definido dentro de `.rodape-contatos svg` e nunca dependeu do `inherit`. */
.pagina-legal .rodape a,
.pagina-404 .rodape a { color: var(--creme); }