/* =========================================================================
BRADA · SITE V2 — o site NA LINGUAGEM da LP Assinatura para Empresas
=========================================================================
MUDANÇA DE ABORDAGEM (18/09/2026). A primeira V2 era um RE-TINTE: carregava
o `style.css` e trocava tokens por cima. Dava a cor certa e a estrutura
antiga. O Bender liberou refazer design, layout, fontes e palavras — então
agora é o contrário:
As páginas V2 RECONSTRUÍDAS carregam `lp-brada.css` e usam os componentes
`.emp-*` DA PRÓPRIA LP. Não imitam a linguagem: são escritas nela.
Este arquivo é só o que o SITE tem e a LP não: um menu de topo (a LP não
tem menu, e isso é a regra 8), grades de produto, galeria e o rodapé com
navegação. Carrega DEPOIS do `lp-brada.css`.
DUAS ESPÉCIES DE PÁGINA V2, e a diferença importa para quem for mexer:
· RECONSTRUÍDA — carrega `lp-brada.css` + este arquivo. HTML escrito à
mão, marcado com ``. O gerador NÃO a sobrescreve.
· TEMATIZADA — carrega `style.css` + `site-v2-tema.css`. É a original
com a paleta trocada. Gerada por `referencia/gerar-v2.py`.
Reconstruir uma página é mover ela da segunda espécie para a primeira.
⚠️ A FONTE DE DISPLAY É PROVISÓRIA. As comps da Gabi usam uma serifada e o
projeto não tem arquivo de serifada licenciado — só Poiret One, Parisienne
e Jost em `assets/fonts/`. Então `--disp` é uma PILHA DO SISTEMA de
serifada old-style: Iowan Old Style no iPhone e no Mac (é a mais próxima
das comps), Palatino no Windows, Georgia como piso universal. Nenhum
arquivo novo, nenhuma licença inventada. Quando a Gabi mandar a fonte
certa, é um `@font-face` e uma linha de `--disp`.
========================================================================= */
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;
src:url(fonts/jost-400.woff2) format('woff2')}
@font-face{font-family:'Parisienne';font-style:normal;font-weight:400;font-display:swap;
src:url(fonts/parisienne-400.woff2) format('woff2')}
@font-face{font-family:'Poiret One';font-style:normal;font-weight:400;font-display:swap;
src:url(fonts/poiret-one-400.woff2) format('woff2')}
:root{
--titulo:'Poiret One',Futura,'Century Gothic',sans-serif;
--script:'Parisienne',cursive;
--texto:'Jost','Segoe UI',system-ui,sans-serif;
color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
/* ⚠️ `overflow-x:clip` na RAIZ, e não só `hidden` no body.
Medido em 18/09/2026, num viewport de 375: a página rolava 300px de área
VAZIA — `documentElement.scrollWidth` dava 808 e a rolagem acontecia de
verdade. A causa não foi encontrada: nenhum elemento mede mais de 375px,
esconder cada um dos ~300 elementos um a um não reduz o `scrollWidth`,
zerar todos os pseudo-elementos não muda nada, e `elementFromPoint` na
faixa rolada não devolve NADA — é área em branco sem dono. O `hidden` no
body não bastava porque o body virava container de rolagem e o overflow
subia para o documento.
`clip` mata a rolagem sem transformar a raiz em container de rolagem
(o que quebraria o `position:sticky` do topo). Verificado depois: nenhum
conteúdo ficou inacessível — a área clipada era a área vazia.
FICA COMO PERGUNTA ABERTA, não como resolvida. */
html{overflow-x:clip}
body{margin:0;background:#F2ECE0;color:#2B1C12;font-family:var(--texto);
font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;
overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid #7A5D00;outline-offset:3px}
/* A serifada entra como display da linha. Substitui `--disp` do `.emp`, que
por padrão aponta para Poiret One. */
.emp{ --disp:'Iowan Old Style','Palatino Linotype','Book Antiqua',Palatino,
Georgia,'Noto Serif','Times New Roman',serif; }
/* A serifada tem eixo vertical e conta de caractere diferentes do Poiret:
sem afrouxar o tracking e apertar a entrelinha ela fica pesada no título. */
.emp .emp-t{letter-spacing:.005em;line-height:1.12;font-weight:400}
.emp .emp-t--g{line-height:1.05}
/* O wordmark continua em Poiret: é o logotipo, não título de seção.
⚠️ SEM o escopo `.emp`. O `lp-brada.css` declara `.emp-marca b{font-family:
var(--disp)}`, e `--disp` só existe DENTRO de `.emp`. O cabeçalho do site
fica FORA dele, então a variável vinha vazia e o logotipo caía para o Jost
herdado — o do topo em Jost, o do rodapé em Poiret, na mesma página. */
.emp-marca b{font-family:var(--titulo)}
/* =========================================================================
0a · A CALHA ÚNICA — o conserto da diagramação no desktop
=========================================================================
MEDIDO em 18/09/2026, num viewport de 1440: a home tinha QUATRO margens
esquerdas diferentes — 0, 72, 120 e 312. Nada alinhava, e era isso que
fazia a página parecer desmontada no navegador.
A causa é a mistura de duas convenções que, sozinhas, estão certas:
· os blocos do SITE centram uma coluna (`max-width:74rem` + `auto`);
· os blocos sangrados da LP usam a CALHA (`padding:var(--gut)`), porque
na LP a foto precisa encostar na borda da tela.
Num viewport de 1425 a primeira dá margem de 120px e a segunda dá 72px.
Duas réguas, dois alinhamentos.
O conserto é escolher UMA régua: a calha passa a ser a própria distância
até a coluna de 74rem, e as caixas centradas param de recentrar. Assim
todo bloco — sangrado ou não — começa no mesmo x, e em telas muito largas
a calha cresce sozinha em vez de o texto esticar.
========================================================================= */
:root{ --sv-gut: max(1.4rem, calc((100vw - 74rem) / 2)); }
.emp{ --gut: var(--sv-gut); }
/* Quem já centrava para de centrar: a calha agora faz esse trabalho, e
manter os dois gera a diferença de 8px entre o topo e o conteúdo. */
.sv-topo{ padding-inline:var(--sv-gut) }
.sv-topo__in,.sv-in,.emp-bl__in,.emp-pilares__in,.emp-rodape__in{ max-width:none }
/* O `--estreito` continua centrado DE PROPÓSITO: bloco curto e centralizado
é composição, não desalinho. */
.emp-bl__in--estreito{ max-width:50rem; margin-inline:auto }
/* A faixa somava a calha DEPOIS de centrar em 74rem — dava 192px. */
.emp-faixa__txt{ max-width:none; padding-inline:var(--sv-gut) }
/* No mosaico o texto é sempre a coluna da esquerda; ele encosta na calha de
um lado e respira do outro. */
.emp-mosaico__txt{ padding-left:var(--sv-gut); padding-right:clamp(1.4rem,3.4vw,3.4rem) }
/* A calha alargou as colunas de texto e a linha passou de 82 caracteres.
~34em ≈ 68 caracteres. Em `em`, nunca em `ch` (armadilha 3.2). */
.emp-rec__txt .emp-corpo,.emp-faixa__txt .emp-corpo,.emp-mosaico__txt .emp-corpo{
max-width:34em }
/* O `.emp-sub` so ganha medida quando esta num bloco centrado. Fora dele,
com a calha nova, ele corria os 1.169px inteiros. */
.emp-bl__in > .emp-sub,.sv-in > .emp-sub{ max-width:34em }
/* =========================================================================
0c · O HERO DE FOTO COM TEXTO POR CIMA (`.sv-hero`)
=========================================================================
O hero de painéis da LP separa texto e foto em duas faixas: você lê um
bloco, depois desce e vê a foto. O Bender pediu o molde da V1 — UMA cena
só, foto sangrada e o texto por cima dela. É também o que economiza uma
tela inteira de rolagem.
⚠️ O VÉU É MEDIDO, NÃO ESTIMADO (regra 3 do CLAUDE.md). Amostrando 16.740
pixels da região onde o texto se apoia no `hero-fundo.jpg`, contra o creme
#F2ECE0, o pior pixel dá:
véu 0,50 → 2,98:1 véu 0,60 → 4,02:1
véu 0,65 → 4,73:1 véu 0,70 → 5,50:1
Por isso o gradiente começa em 0,66 e não em 0,5: abaixo disso o título
reprova em cima da flor clara. TROCOU A FOTO DO HERO? REMEÇA — o script
está no fim deste arquivo, em comentário.
========================================================================= */
.sv-hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
min-height:min(82svh,720px);background:#3B2416;color:#F2ECE0;
padding:clamp(5rem,12vh,8rem) var(--sv-gut) clamp(2.4rem,5vh,3.6rem)}
.sv-hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center 45%}
.sv-hero::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(43,26,15,.66) 0%,rgba(43,26,15,.72) 45%,
rgba(43,26,15,.84) 100%)}
.sv-hero__in{position:relative;z-index:1;width:100%}
.sv-hero .emp-rot{color:#DFBC4E} /* 7,89:1 sobre o véu — medido */
.sv-hero .emp-t{color:#F2ECE0}
.sv-hero .emp-sub{color:#E4D9C4;max-width:32em;margin-top:1.1rem}
.sv-hero .emp-fil{background:#A8823C}
.sv-hero__acoes{display:flex;flex-wrap:wrap;gap:.9rem 1rem;align-items:center;
margin-top:clamp(1.6rem,3vw,2.4rem)}
.sv-hero__acoes .botao--vazado{border-color:#E4D9C4;color:#F2ECE0;background:transparent}
.sv-hero__acoes .botao--vazado:hover{background:rgba(242,236,224,.16);border-color:#F2ECE0}
@media (max-width:700px){
.sv-hero{min-height:min(86svh,680px)}
}
/* =========================================================================
0b · O HERO DA HOME NÃO É O HERO DA LP
Na LP o hero pode ocupar 1,5 tela: é página de uma decisão e o visitante
chegou por anúncio. Na home ele precisa deixar ver que há site embaixo.
Medido: painéis 534px + foto 801px = 1335px antes de qualquer conteúdo,
num viewport de 900. A foto ficava inteira abaixo da dobra.
========================================================================= */
@media (min-width:981px){
.emp-hero__foto{ aspect-ratio:auto; height:min(52svh,460px); min-height:0 }
/* A faixa sangrada ia a 76svh e engolia a tela inteira antes do texto
aparecer. Na LP isso e declaracao; numa home e parede. */
.emp-faixa__foto{ max-height:min(46svh,420px) }
/* O mosaico pedia 28rem de altura minima (448px) e crescia com o texto;
no desktop a foto ficava desproporcional ao lado. */
.emp-mosaico__foto{ min-height:0 }
}
/* =========================================================================
0 · OS BOTÕES
O `lp-brada.css` USA `.botao` mas não o DEFINE — na LP ele vem do
`style.css`. A página reconstruída não carrega o `style.css`, então sem
este bloco o botão vira um link pelado: sem fundo, sem borda, sem
padding. Era a causa dos dois ALTO de contraste no primeiro teste — um
`botao--vazado` com texto creme sobre fundo creme, 1,13:1.
Retângulo puro, caixa alta com tracking largo, 44px de altura mínima.
========================================================================= */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
min-height:48px;padding:1rem 2.3rem;font-family:var(--texto);font-weight:500;
font-size:max(.75rem,.78rem);letter-spacing:.24em;text-transform:uppercase;
line-height:1;text-align:center;
border:1px solid #3B2416;background:#3B2416;color:#F2ECE0;
transition:background .3s,color .3s,border-color .3s}
.botao:hover{background:#2B1A0F;border-color:#2B1A0F}
.botao--vazado{background:transparent;color:#3B2416;border-color:#3B2416}
.botao--vazado:hover{background:#3B2416;color:#F2ECE0}
.botao--claro{background:#A8823C;border-color:#A8823C;color:#2B1C12}
.botao--claro:hover{background:#8E6B2C;border-color:#8E6B2C;color:#F2ECE0}
.botao--pequeno{min-height:44px;padding:.75rem 1.5rem;letter-spacing:.18em}
/* Sobre a foto do hero o vazado escuro desaparece: inverte para creme.
O `lp-brada.css` já faz isso em `.emp-hero__acoes`, mas repetimos aqui
porque lá a regra depende do `.botao` base que agora vive neste arquivo. */
.emp-hero__acoes .botao--vazado{border-color:#E4D9C4;color:#F2ECE0;background:transparent}
.emp-hero__acoes .botao--vazado:hover{background:rgba(242,236,224,.16);border-color:#F2ECE0}
/* Em bloco cacau, o vazado também inverte. */
.sv-bl--choc .botao--vazado,.emp-bl--choc .botao--vazado{border-color:#A8823C;color:#F2ECE0}
.sv-bl--choc .botao--vazado:hover,.emp-bl--choc .botao--vazado:hover{background:#A8823C;color:#2B1C12}
/* =========================================================================
1 · O TOPO — o que a LP não tem
A LP é página de uma decisão e não tem menu (regra 8). O site precisa de
um. Na linguagem da linha: creme, um filete de bronze embaixo em vez de
sombra, rótulo em caixa alta com tracking largo, e o piso de 12px do
`max()` — sem ele o clamp entrega 10,6px no celular (armadilha 3.5).
========================================================================= */
.sv-topo{position:sticky;top:0;z-index:60;background:var(--cr,#F2ECE0);
border-bottom:1px solid #D8CCB4;padding-inline:var(--sv-gut)}
/* Sem `max-width` aqui: a calha (0a) e que define a coluna. Centrar de
novo devolvia a segunda regua e o logotipo saia 7px fora do resto. */
.sv-topo__in{min-height:4.4rem;
display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
/* 44px de altura no logotipo: ele é link para a home e no celular media 38px,
abaixo do alvo de toque da WCAG 2.5.8. Achado pelo `auditoria-lp.js`. */
.sv-topo .emp-marca{display:flex;flex-direction:column;justify-content:center;
min-height:44px}
.sv-topo .emp-marca b{font-size:1.5rem;letter-spacing:.2em}
.sv-topo .emp-marca i{font-size:.95rem}
/* A assinatura da tarja de pilares vem a 11,84px do `lp-brada.css` — caixa
alta com tracking largo abaixo de 12px não se lê (armadilha 3.5). Piso. */
.emp-pilares__ass{font-size:max(.75rem,clamp(.7rem,.95vw,.8rem))}
.sv-menu{display:flex;align-items:center;gap:clamp(.7rem,1.1vw,1.15rem)}
/* Onze itens e nao sete: o menu tem que ser o MESMO em toda pagina, senao a
pessoa clica em Eventos e descobre que existiam Natal e Parceiros. Com
onze, o tracking de .2em nao cabe em 1184px — .13em cabe e continua sendo
o rotulo em caixa alta da linha. */
.sv-menu a{font-size:max(.75rem,.76rem);letter-spacing:.13em;text-transform:uppercase;
font-weight:500;color:#5C3D28;position:relative;
display:inline-flex;align-items:center;min-height:44px}
.sv-menu a::after{content:"";position:absolute;left:0;right:100%;bottom:.9rem;
height:1px;background:#A8823C;transition:right .3s}
.sv-menu a:hover::after,.sv-menu a[aria-current="page"]::after{right:0}
.sv-menu a[aria-current="page"]{color:#2B1C12}
.sv-ham{display:none;min-width:44px;min-height:44px;align-items:center;
justify-content:center;color:#2B1C12}
.sv-ham svg{width:26px;height:26px}
.sv-movel{display:none;position:fixed;inset:4.4rem 0 auto 0;z-index:55;
background:var(--cr,#F2ECE0);border-bottom:1px solid #A8823C;
padding:.6rem var(--gut,1.4rem) 1.4rem;
transform:translateY(-12px);opacity:0;visibility:hidden;
transition:transform .3s,opacity .3s,visibility .3s}
.sv-movel.aberto{transform:none;opacity:1;visibility:visible}
.sv-movel a{display:flex;align-items:center;min-height:52px;
border-bottom:1px solid #D8CCB4;font-size:max(.8rem,.82rem);letter-spacing:.2em;
text-transform:uppercase;font-weight:500;color:#5C3D28}
/* `.sv-movel a` (0,1,1) vence `.botao` (0,1,0) e pintava o CTA do menu de
celular com a cor dos links: marrom #5C3D28 sobre o cacau do proprio
botao, 1,49:1. Devolve a cor do botao. */
.sv-movel .botao{margin-top:1.2rem;width:100%;color:#F2ECE0;letter-spacing:.24em}
.sv-movel .botao:hover{color:#F2ECE0}
@media (max-width:900px){
.sv-menu{display:none}
.sv-ham{display:inline-flex}
.sv-movel{display:block}
}
@media (prefers-reduced-motion:reduce){ .sv-movel{transition:none} }
/* =========================================================================
2 · GRADE DE PRODUTO — o cartão da linha
Nas comps o cartão não tem contorno nem canto redondo: tem um filete de
bronze no topo e se encosta no vizinho. `minmax(min(...),1fr)` é a
armadilha 3.3: `minmax(20rem,1fr)` cria um piso de 320px que estoura uma
coluna de 335px.
========================================================================= */
.sv-grade{display:grid;gap:1px;background:#D8CCB4;
grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
/* Cartão SEM foto precisa de coluna mais larga. Com a mesma grade dos
cartões com foto, as quatro ocasiões do `eventos` ficavam em 4 colunas de
243px — ~16em de medida, onde a linha comporta 30 caracteres e o texto
vira escada. Sem imagem para carregar o olho, duas colunas largas leem
muito melhor que quatro estreitas. */
.sv-grade:not(:has(.sv-cartao__foto)){
grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr))}
.sv-cartao{background:var(--cr,#F2ECE0);border-top:3px solid #A8823C;
padding:0 1.5rem 1.8rem;display:flex;flex-direction:column;gap:.7rem}
/* A FOTO SANGRA no cartão. Recuada pelo padding ela media 243px num cartão
de 291 e o resultado era um selo no meio de muito creme — nas comps os
painéis se encostam, não flutuam. As margens negativas cancelam o padding
lateral; o `margin-top:0` a encosta no filete de bronze do topo. */
.sv-cartao__foto{margin:0 -1.5rem 1.1rem;aspect-ratio:4/3;width:auto;overflow:hidden;
background:#E8E0CE}
/* Cartão sem foto (as ocasiões do `eventos`) precisa do respiro de volta. */
.sv-cartao:not(:has(.sv-cartao__foto)){padding-top:1.7rem}
.sv-cartao__foto img{width:100%;height:100%;object-fit:cover}
.sv-cartao h3{font-family:var(--disp);font-weight:400;font-size:1.3rem;
line-height:1.2;color:#2B1C12;margin:0}
.sv-cartao p{font-size:.95rem;line-height:1.6;color:#5C3D28;margin:0;max-width:30em}
.sv-cartao .botao{margin-top:auto;align-self:flex-start}
/* =========================================================================
2a · O PASSO COM TÍTULO
`.emp-passo` é uma grade de DUAS colunas: `2.6rem` para o número e `1fr`
para o resto. Na LP o passo tem dois filhos — o `` e o ``. Ao pôr
um `
` no meio, o terceiro filho volta para a PRIMEIRA coluna e o
parágrafo passa a viver numa faixa de 2,6rem: uma palavra por linha, e a
seção inteira estica para 2.340px de altura. Foi o que aconteceu no
`eventos-v2`.
Prender tudo o que não é o número na coluna 2 conserta o caso e qualquer
outro passo que venha a ganhar um título.
========================================================================= */
.emp-passo > :not(b){ grid-column:2 }
.emp-passo h3{ font-family:var(--disp);font-weight:400;font-size:1.15rem;
line-height:1.25;color:#2B1C12;margin:0 0 .35rem }
/* =========================================================================
2b · A GRADE DE ITENS CURTOS (`.emp-mot`)
Na LP ela recebe QUATRO motivos. Com seis ingredientes ela abriu seis
colunas de ~180px e o texto virou três palavras por linha — ilegível e
feio. O piso de 20rem faz cair para três colunas de ~390px, que é onde
uma frase curta ainda respira. `min()` para não estourar no celular.
========================================================================= */
.sv-bl .emp-mot,.emp-bl .emp-mot{
grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}
/* O item do `.emp-mot` tem fundo creme. Sobre uma seção creme ele some: na
prova social os três depoimentos viravam texto solto no vazio. O filete
de bronze no topo é o que faz o cartão existir em qualquer fundo — é o
mesmo recurso das comps, onde o painel se anuncia por uma barra e não
por um contorno. */
.emp-mot__i{border-top:3px solid #A8823C}
.sv-bl--cr2 .emp-mot__i{background:#F2ECE0}
/* =========================================================================
3 · GALERIA — mosaico sangrado, sem moldura
========================================================================= */
.sv-galeria{display:grid;gap:2px;
grid-template-columns:repeat(auto-fill,minmax(min(13rem,46%),1fr))}
.sv-galeria__i{margin:0;position:relative;aspect-ratio:4/3;width:100%;
overflow:hidden;background:#E8E0CE;cursor:zoom-in}
.sv-galeria__i img{width:100%;height:100%;object-fit:cover;
transition:transform .6s ease}
.sv-galeria__i:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){ .sv-galeria__i img{transition:none} }
/* =========================================================================
4 · O RODAPÉ com navegação
Reusa `.emp-rodape` da LP e acrescenta o menu que o site precisa. Os
links têm 44px de altura porque no celular eles são o alvo mais apertado
da página — foi um dos achados do `auditoria-lp.js`.
========================================================================= */
.sv-rodape__menu{display:flex;flex-wrap:wrap;gap:0 1.3rem;margin-top:.9rem}
.sv-rodape__menu a{color:#E4D9C4;font-size:max(.78rem,.8rem);letter-spacing:.14em;
text-transform:uppercase;display:inline-flex;align-items:center;min-height:44px}
.sv-rodape__menu a:hover{color:#E9C85A}
/* =========================================================================
5 · O BOTÃO DE WHATSAPP
========================================================================= */
.sv-whats{position:fixed;z-index:70;left:max(1rem,env(safe-area-inset-left));
bottom:max(1rem,env(safe-area-inset-bottom));
display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:0 1.2rem;
background:#3B2416;color:#F2ECE0;border:1px solid #A8823C;
font-size:max(.75rem,.78rem);letter-spacing:.16em;text-transform:uppercase;
font-weight:500;transition:background .25s}
.sv-whats:hover{background:#2B1A0F}
.sv-whats svg{width:20px;height:20px;flex:none;color:#DFBC4E}
@media (max-width:560px){ .sv-whats span{display:none} .sv-whats{padding:0 .95rem} }
/* =========================================================================
6 · A TARJA DOS TRÊS PILARES
Artesanal · Profissional · Brasileira — as três palavras que o Bender
apontou como o que a Brada é. A tarja é o componente `.emp-pilares` da
LP (nas comps ela fecha a peça com os pilares separados por um cano de
bronze), com as palavras da casa. Aparece em TODA página V2: declara os
três num lugar de baixa atenção, enquanto cada página PROVA um.
Repetir o bloco de três cartões em doze páginas viraria papel de parede.
========================================================================= */
.sv-pilares a{color:inherit;border-bottom:1px solid transparent;transition:border-color .3s}
.sv-pilares a:hover{border-bottom-color:#A8823C}
/* =========================================================================
7 · A ETIQUETA DE PILAR
O rótulo que marca QUAL pilar aquela seção prova. É `.emp-rot` com o nome
do pilar em bronze legível na frente. Não é decoração: é a legenda da
prova — a foto da chef montando prova "artesanal", a tabela de prazos
prova "profissional", o ingrediente com nome e lugar prova "brasileira".
========================================================================= */
.sv-prova{display:inline-flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.sv-prova b{font-weight:600;color:#7A5D00} /* 5,16:1 no creme — medido */
.sv-prova--claro b{color:#DFBC4E} /* 7,89:1 no cacau — medido */
.sv-prova i{font-style:normal;opacity:.55}
/* =========================================================================
7b · OS TRÊS PILARES, versão longa
O Bender apontou exatamente este bloco ("isso que está na imagem") como o
que a Brada é. A anatomia dele é mantida — numeral romano, nome, texto —
e só os materiais mudam para os da linha: numeral em bronze, nome na
serifada de display, divisória de fio em vez de borda em volta, canto
reto. As colunas se encostam, como os painéis das comps.
`minmax(min(...),1fr)` porque `minmax(16rem,1fr)` criaria um piso de
256px que estoura a coluna no celular (armadilha 3.3).
========================================================================= */
.sv-pilares-longo{display:grid;gap:1px;background:#D8CCB4;
grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.sv-pilar{background:#F2ECE0;padding:2rem 1.7rem 2.2rem;scroll-margin-top:6rem}
.sv-pilar__n{display:block;font-family:var(--disp);font-size:1.1rem;
letter-spacing:.3em;color:#7A5D00;margin-bottom:1.1rem}
/* #7A5D00 e nao o bronze #A8823C: sobre creme o bronze da 3,01:1 e o
numeral e TEXTO, nao ornamento. Regra 1 do CLAUDE.md. O derivado da
casa da 5,16:1 e mantem a familia da cor. */
.sv-pilar h2{font-family:var(--disp);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);
letter-spacing:.06em;line-height:1.15;color:#2B1C12;margin:0 0 .9rem}
.sv-pilar p{font-size:1rem;line-height:1.7;color:#5C3D28;margin:0 0 .8rem;max-width:30em}
.sv-pilar__prova{font-size:max(.75rem,.78rem);letter-spacing:.2em;text-transform:uppercase;
font-weight:500;color:#7A5D00;margin-top:1.3rem;display:block}
/* 44px: o link da prova e da tarja sao alvo de dedo no celular. */
.sv-pilar__prova a{border-bottom:1px solid #A8823C;
display:inline-flex;align-items:center;min-height:44px}
.sv-pilares a{display:inline-flex;align-items:center;min-height:44px}
/* O alvo aberto pelo link da tarja ganha um filete de bronze à esquerda —
quem clicou em "Profissional" precisa VER onde chegou. */
.sv-pilar:target{background:#E8E0CE;box-shadow:inset 3px 0 0 #A8823C}
/* =========================================================================
8 · AJUSTES DE RITMO
========================================================================= */
.sv-in{max-width:74rem;margin-inline:auto}
/* Mesmo clamp do `.emp-bl`: 90px contra 96px é diferença que ninguém vê
isolada e que faz o sistema parecer descuidado quando os dois tipos de
bloco se alternam na mesma página. */
/* Respiro apertado depois do retorno do Bender ("está tendo que rolar
muito"). De 96px para ~68px no desktop: continua sendo o dobro do que a
V1 usava no miolo, sem transformar cada seção numa tela. */
.sv-bl{padding:clamp(2.4rem,5vw,4.2rem) var(--gut,1.4rem)}
.emp-bl{padding:clamp(2.4rem,5vw,4.2rem) var(--gut)}
.emp-mosaico__txt{padding-block:clamp(2.2rem,4.5vw,3.8rem)}
.emp-faixa__txt{padding-block:clamp(2.2rem,4.5vw,3.6rem)}
.emp-mot,.emp-passos{margin-top:1.8rem}
.sv-bl--cr2{background:#E8E0CE}
.sv-bl--choc{background:#3B2416;color:#F2ECE0}
.sv-bl--choc .emp-t{color:#F2ECE0}
.sv-bl--choc .emp-sub,.sv-bl--choc .emp-corpo{color:#E4D9C4}
.sv-pular{position:absolute;left:-9999px}
.sv-pular:focus{position:static;display:inline-block;margin:.6rem;padding:.6rem 1rem;
background:#3B2416;color:#F2ECE0}
/* =========================================================================
9 · A LANDING DE CELEBRAÇÕES (`celebracoes-v2.html`)
=========================================================================
Uma URL serve quatro ocasiões via `?ocasiao=`, com os quatro painéis no
DOM — é a regra 8 do CLAUDE.md e continua valendo na V2: LP de anúncio,
sem menu, um CTA só.
⚠️ ESTA PÁGINA CARREGA `dados.js` + `app.js`, e as reconstruídas não.
Não é incoerência: o motor das abas e o envio do lead JÁ EXISTEM e estão
testados lá, incluindo a regra 9 (o WhatsApp não espera o banco) e a
regra 10 (honeypot + `levou_ms`). Reescrever isso em script inline seria
duplicar o que mais importa não divergir. O `app.js` é um IIFE de módulos
guardados por presença de elemento: o que não existe na página, não roda.
O preço é manter os ganchos que ele procura — `.lp-aba[data-oc]`,
`.lp-painel[data-oc]`, `#formLead`, `.form-estado` — e é o que fazemos.
========================================================================= */
.lp-abas{background:var(--cr2,#E8E0CE);padding:1.1rem var(--sv-gut);
border-bottom:1px solid #D8CCB4}
.lp-abas__interno{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem}
.lp-abas__rotulo{font-size:max(.75rem,.78rem);letter-spacing:.2em;text-transform:uppercase;
font-weight:500;color:#5C3D28;margin:0}
.lp-abas__botoes{display:flex;flex-wrap:wrap;gap:.5rem}
.lp-aba{font-family:var(--texto);font-size:max(.75rem,.78rem);letter-spacing:.14em;
text-transform:uppercase;font-weight:500;color:#5C3D28;
min-height:44px;padding:0 1.1rem;border:1px solid #BCAB8E;background:transparent;
transition:background .25s,color .25s,border-color .25s}
.lp-aba:hover{border-color:#5C3D28;color:#2B1C12}
/* A ocasião ativa é cacau sólido: nas comps o estado atual não é um tom mais
claro do mesmo, é a inversão do campo. */
.lp-aba--ativa{background:#3B2416;border-color:#3B2416;color:#F2ECE0}
.lp-painel{display:none}
.lp-painel--ativa{display:block}
/* ── o que costuma dar errado: a objeção com a resposta ────────────────── */
.sv-erro{display:grid;gap:1px;background:#D8CCB4;margin-top:1.8rem;
grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
.sv-erro__i{background:#F2ECE0;border-top:3px solid #A8823C;padding:1.5rem 1.4rem 1.7rem}
.sv-erro__i h3{font-family:var(--disp);font-weight:400;font-size:1.12rem;line-height:1.3;
color:#2B1C12;margin:0 0 .6rem}
.sv-erro__i p{font-size:.97rem;line-height:1.6;color:#5C3D28;margin:0;max-width:32em}
.sv-erro__i b{font-weight:500;color:#2B1C12}
/* ── a lista do "o que a gente faz" ───────────────────────────────────── */
.sv-lista{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.75rem}
.sv-lista li{display:grid;grid-template-columns:1.4rem 1fr;gap:.7rem;align-items:start;
font-size:1rem;line-height:1.55;color:#5C3D28;max-width:34em}
.sv-lista li::before{content:"";width:.55rem;height:2px;background:#A8823C;margin-top:.7rem}
/* ── o formulário ─────────────────────────────────────────────────────
O `style.css` não vem junto, então o formulário inteiro mora aqui. Campo
de 48px, rótulo em caixa alta, foco visível em bronze legível. */
.sv-form{background:#2B1A0F;color:#F2ECE0;padding:clamp(2.4rem,5vw,4.2rem) var(--sv-gut)}
.sv-form .emp-t{color:#F2ECE0}
.sv-form .emp-rot{color:#DFBC4E}
.sv-form .emp-sub{color:#E4D9C4}
.form-aval{margin-top:1.8rem;max-width:56rem}
.form-grade{display:grid;gap:1rem 1.4rem;
grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.campo{display:flex;flex-direction:column;gap:.45rem;
font-size:max(.75rem,.78rem);letter-spacing:.16em;text-transform:uppercase;
font-weight:500;color:#E4D9C4}
.campo--largo{grid-column:1/-1}
.campo input,.campo select,.campo textarea{
font-family:var(--texto);font-size:1rem;letter-spacing:normal;text-transform:none;
min-height:48px;padding:.7rem .9rem;color:#F2ECE0;
background:rgba(242,236,224,.07);border:1px solid rgba(242,236,224,.28);border-radius:0}
.campo textarea{min-height:7rem;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(242,236,224,.5)}
.campo select option{color:#2B1C12;background:#F2ECE0}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
outline:2px solid #DFBC4E;outline-offset:1px;border-color:#DFBC4E}
.campo i{font-style:normal;color:#DFBC4E}
/* Caixa de marcar: 44px de alvo, como no formulário da assinatura. */
.consentimento{display:flex;gap:.7rem;align-items:flex-start;min-height:44px;
padding:.5rem 0;margin-top:1.2rem;cursor:pointer;
font-size:.9rem;line-height:1.5;letter-spacing:normal;text-transform:none;color:#E4D9C4}
.consentimento input[type=checkbox]{width:1.35rem;height:1.35rem;flex:0 0 auto;
margin-top:.15rem;accent-color:#A8823C;cursor:pointer}
.form-acoes{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.6rem}
.form-acoes .botao{background:#A8823C;border-color:#A8823C;color:#2B1C12}
.form-acoes .botao:hover{background:#DFBC4E;border-color:#DFBC4E;color:#2B1C12}
.form-estado{font-size:.9rem;color:#DFBC4E;letter-spacing:normal;text-transform:none}
.oculto{position:absolute;left:-9999px}
/* ── os números da régua ──────────────────────────────────────────────── */
.sv-numeros{display:grid;gap:1px;background:#D8CCB4;margin-top:1.8rem;
grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr))}
.sv-numeros div{background:#F2ECE0;padding:1.3rem 1.2rem;border-top:3px solid #A8823C}
.sv-numeros b{display:block;font-family:var(--disp);font-weight:400;
font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;color:#2B1C12;margin-bottom:.4rem}
.sv-numeros span{font-size:.92rem;line-height:1.45;color:#5C3D28}
/* ── parceiros ────────────────────────────────────────────────────────── */
.sv-parceiros{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.4rem;
font-size:1rem;color:#5C3D28}
.sv-parceiros span{display:inline-flex;align-items:center;gap:.7rem}
/* A lista e lida como um paragrafo unico e corria os 1.169px. */
.sv-parceiros{max-width:38em}
.sv-parceiros span::before{content:"";width:.5rem;height:2px;background:#A8823C}
/* =========================================================================
10 · A GALERIA V2
Mosaico sangrado em três seções — mesas, bolos, doces. Sem moldura, sem
canto redondo: nas comps a foto encosta na vizinha e o respiro é o fio
de 2px entre elas.
A legenda NÃO fica por cima da foto. Texto sobre foto exige véu medido
(regra 3), e são 28 fotos com luminosidade diferente — medir 28 véus para
uma legenda de apoio é custo sem retorno. Ela vive embaixo, no creme.
========================================================================= */
.sv-mosaico{display:grid;gap:2px;background:#D8CCB4;
grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr))}
.sv-mosaico--miudo{grid-template-columns:repeat(auto-fill,minmax(min(15rem,46%),1fr))}
.sv-foto{margin:0;background:#F2ECE0;display:flex;flex-direction:column}
.sv-foto__q{position:relative;aspect-ratio:4/3;width:100%;overflow:hidden;
background:#E8E0CE;border:0;padding:0;cursor:zoom-in;display:block}
.sv-foto__q img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.sv-foto__q:hover img{transform:scale(1.04)}
.sv-foto__q:focus-visible{outline:2px solid #7A5D00;outline-offset:-3px}
.sv-foto figcaption{padding:.7rem .9rem 1rem;font-size:max(.78rem,.82rem);
line-height:1.45;color:#5C3D28}
@media (prefers-reduced-motion:reduce){ .sv-foto__q img{transition:none} }
/* ── a lupa ────────────────────────────────────────────────────────────
`