, que
contém todas as seções), acompanhando a narrativa da página:
improviso (quente, topo) → risco (CFM, o ponto mais escuro, ~40%) →
reaquecimento (bônus ~61%) → decisão (oferta, o mais quente, ~79%) →
assentamento (FAQ/rodapé).
Dois respiros radiais COM FONTE: a lâmpada da VSL (~10%) e o calor da
oferta (~79%). Luz sem objeto que a justifique foi aposentada.
⚠️ As porcentagens são BANDAS LARGAS de propósito: mudou conteúdo, a
jornada continua fazendo sentido sem recalibrar. (Âncoras medidas a
1600px: VSL 10 · CFM 40 · módulos 44-54 (creme cobre) · bônus 61 ·
oferta 79 · quem 86-91 (creme cobre) · FAQ 96.)
⚠️ APOSENTADAS (display:none, HTML fica): .bg-glow/.bg-act (vinhetas
FIXAS de viewport — pintavam só a 1ª tela em captura de página inteira
e criavam o corte diagonal no topo), .bg-grid (recriada aqui ancorada
no documento, sem máscara) e os .orb (bolhas sem fonte). O radial da
.bonus-section morreu: era a EMENDA reta visível acima da comunidade.
Ficam as luzes com fonte: halo do player da VSL, glows do CTA/oferta.
⚠️ O JS pega .bg-act (linha ~357 do main.js) e anima opacity — segue
inofensivo com o elemento invisível. Não remover o nó do HTML.
========================================================================== */
.bg-glow,.bg-act,.bg-grid,.orb{display:none}
.bonus-section{background:none}
/* o body é o que aparece atrás do rodapé e no overscroll: cor do FIM da jornada */
body{background:#100a05}
/* ⚠️ SEM GRADE (decisão do dono, 19/08 noite): o grid quadriculado era o
último sobrevivente da linguagem CHANFRADA — o mesmo argumento que matou
cantoneiras e losangos vale para ele. E pela regra "luz só onde tem
fonte", NÃO substituir por manchas orgânicas soltas: a textura orgânica
do escuro é o film-grain + a própria jornada. */
main{
position:relative;
background:
/* respiros com fonte narrativa */
radial-gradient(90% 5% at 50% 10%,rgba(214,154,60,0.10),transparent 70%),
radial-gradient(110% 6% at 50% 79%,rgba(214,154,60,0.08),transparent 70%),
/* a jornada */
linear-gradient(180deg,
#1b1109 0%,
#191008 10%,
#150d06 24%,
#100904 44%, /* CFM recentralizada após a remoção da Comunidade (19/08) */
#150d07 54%,
#191008 61%,
#1c1109 70%,
#1e130a 79%,
#170e07 90%,
#110a05 100%);
}
/* ==========================================================================
MÓDULOS · A ABERTURA (19/08 noite, anexo do dono)
A seção deve parecer que o SITE SE ABRE e revela o claro. A 1ª troca das
tampas por border-radius no creme INVERTIA a curvatura (o creme recuava
nos cantos, em vez de o escuro se recolher) — o anexo mostra o certo:
o escuro é uma FOLHA POR CIMA, com curva bem acentuada e sombra projetada
no creme (profundidade). As tampas voltam com:
· curvas maiores que as originais (clamp 40-96px de raio);
· cor casada com a JORNADA na posição de cada emenda (topo ~44% do doc =
#120a05 · base ~54% = #160e07) — se a jornada recalibrar, recasar;
· sombra para DENTRO do creme (é ela que vende a folha flutuando);
· ABERTURA AO ROLAR: com o motor de cenas ativo, as folhas nascem mais
fechadas (scaleY 1.9, avançadas sobre o creme) e se RECOLHEM quando a
seção entra na tela (.scene-in) — transform puro, zero reflow, zero JS
novo. Sem JS / reduced-motion: estado final estático.
========================================================================== */
.mods-light{border-radius:0}
.mods-light::before,.mods-light::after{
content:"";display:block;
height:clamp(48px,6.5vw,104px);
position:relative;z-index:1;
}
.mods-light::before{
background:#120a05;
border-radius:0 0 clamp(40px,6vw,96px) clamp(40px,6vw,96px);
box-shadow:0 22px 38px -16px rgba(28,16,4,0.5);
transform-origin:50% 0;
}
.mods-light::after{
background:#160e07;
border-radius:clamp(40px,6vw,96px) clamp(40px,6vw,96px) 0 0;
box-shadow:0 -22px 38px -16px rgba(28,16,4,0.5);
transform-origin:50% 100%;
}
/* a abertura: fechadas antes da cena, recolhem ao entrar.
⚠️ A transição mora SÓ no estado .scene-in: o html.scenes chega DEPOIS do
1º paint, e uma transição permanente fazia o navegador animar plano →
fechado já no load (medido: pseudo preso em matrix identidade na aba
oculta). Com a transição apenas na chegada da cena, o fechado nasce
instantâneo e SÓ a abertura anima. */
html.scenes .mods-light:not(.scene-in)::before,
html.scenes .mods-light:not(.scene-in)::after{transform:scaleY(1.9)}
html.scenes .mods-light.scene-in::before,
html.scenes .mods-light.scene-in::after{
transition:transform 1s var(--ease-out,cubic-bezier(.22,.61,.36,1));
}
@media (prefers-reduced-motion:reduce){
html.scenes .mods-light:not(.scene-in)::before,
html.scenes .mods-light:not(.scene-in)::after{transform:none}
}
/* ==========================================================================
Camada · TIPOGRAFIA OUTFIT (19/08 noite, ordem do dono)
Saira Condensed (display) e Saira (corpo) saem; entra OUTFIT — geométrica,
redonda, moderna: o "premium Apple" que o dono vem pedindo.
O JETBRAINS MONO FICA de propósito: é a voz técnica/protocolo (eyebrows,
MÓDULO NN, contagem, preços com numeral TABULAR — a Outfit não tem tnum).
⚠️ COMPENSAÇÃO MÉTRICA obrigatória: a Saira Condensed era ESTREITA; a
Outfit é ~15% mais larga em caixa alta. Títulos grandes perdem ~10% de
corpo e o tracking cai para perto de zero (geométrica larga não pede ar
entre letras no display; pede só nos rótulos pequenos).
Hierarquia de pesos: 800 hero e preço · 700 títulos de seção · 600 CTAs e
títulos de card · 500 ênfases · 400 corpo.
========================================================================== */
:root{
--font-display:'Outfit',sans-serif;
--font-body:'Outfit',sans-serif;
}
/* hero: o único texto que PRECISA caber numa tela — corpo -10% */
.hero-title{letter-spacing:-.008em}
.hero-card .hero-title{font-size:clamp(27px,min(4.9vw,7vh),61px)}
/* títulos de seção: -10% de corpo, tracking mínimo, peso 800 mantido */
.section-title{font-size:clamp(23px,3.4vw,41px);letter-spacing:.014em}
.bonus-title{letter-spacing:.014em}
/* CTAs: geométrica larga em 600 lê melhor que 700 apertado */
.btn{font-weight:600;font-size:15.5px;letter-spacing:.05em}
/* preço grande: 800 fica; só aperta o tracking dos numerais redondos */
.oferta-preco{letter-spacing:-.02em}
/* pílulas dos módulos: título em 600 com um fio de ar */
.mods-duo .v4-mod b{font-size:14.5px;font-weight:600;letter-spacing:.025em}
/* card da frente do leque */
.fan-meta b{letter-spacing:.012em}
/* ==========================================================================
Camada · CARDS "PARA QUEM É" COM LUZ INTERNA (19/08 noite, ref. do dono)
O dono reprovou o CONTORNO dourado dos cards. A referência dele (bento
escuro premium) inverte a lógica: quem define o card é um BLOOM de luz
subindo do fundo + uma aresta de luz no topo; a borda vira um fio quase
invisível, só de definição. Tradução para o dourado da página:
· fundo = bloom radial quente ancorado na BASE sobre gradiente escuro;
· borda 0.07 (era var(--line-28)) + inset 1px de luz no topo;
· ícone vira CHIP LUMINOSO (gradiente + glow suave), sem caixa de borda;
· hover: o fio acende de leve e o card flutua 2px — nada do 0.6 antigo.
Escopado ao #para-quem (ordem do dono). Para levar à COMUNIDADE, basta
acrescentar "#comunidade" aos seletores — mesma anatomia de card.
========================================================================== */
/* v2 (2ª referência do dono): formato SQUIRCLE com o canto superior direito
RECORTADO em côncavo e o ícone FORA do card, num círculo solto dentro do
respiro — a mesma linguagem do canto recortado do hero. Sem borda nenhuma
(a referência é borderless): quem define o card é o bloom + a aresta de
luz. GEOMETRIA DO RECORTE: furo r=38px centrado a 26px do canto — cobre
as duas arestas (26<38) e engole a ponta do canto (√(26²+26²)=36.8<38);
o círculo do ícone tem 44px centrado no MESMO ponto → 16px de respiro.
⚠️ Mexeu no raio do furo ou na posição do ícone, refaça essa conta:
furo raso demais deixa uma ILHA da ponta do canto sobrando. */
/* ⚠️ A MÁSCARA MORA NO ::before, nunca no card: mask mascara os FILHOS
também, e o ícone vive exatamente dentro do furo — no card ele some
(bug real desta rodada). O ::before carrega fundo+furo em z-index:-1;
o card vira stacking context próprio (z-index:0) para o -1 não escapar. */
#para-quem .conq-card{
border:0;border-radius:24px;
position:relative;z-index:0;
background:none;box-shadow:none;
padding:26px 26px 30px;
transition:transform .35s;
}
/* RECORTE FLUIDO (3ª ref. do dono): a mordida circular seca saiu — o furo
agora tem OMBROS de raio 18 tangentes à concha (raio 32, centro a 32px do
canto) e às arestas, desenhados num SVG de 96×96 FIXO em px (ancorado no
canto: não distorce entre larguras de card). Tangentes calculadas:
topo (16,0)→(33.28,23.04) · concha até (72.96,62.72) · ombro até (96,80).
A máscara é a UNIÃO de 3 camadas (tile do canto + 2 retângulos) — o
composite padrão "add" resolve, sem mask-composite exótico. */
/* v3 — o recorte ABRAÇA o botão (correção do dono: a v2 tinha uma concha de
64px para um ícone de 44 = fosso escuro em volta; na referência a folga é
mínima). Ícone 42px com FOLGA DE 7px: concha R=28 centrada em (55,29) do
tile 84×84; ombros r=12. Tangentes: topo (18.8,0)→(29.66,17.1) · concha
até (66.9,54.34) · ombro até (84,65.2). */
#para-quem .conq-card::before{
content:"";position:absolute;inset:0;z-index:-1;
border-radius:24px;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0,0 H18 A18,18 0 0 1 36,18 V38 A22,22 0 0 0 58,60 H78 A18,18 0 0 1 96,78 V96 H0 Z' fill='%23000'/%3E%3C/svg%3E") top right/96px 96px no-repeat,
linear-gradient(#000,#000) top left/calc(100% - 96px) 96px no-repeat,
linear-gradient(#000,#000) bottom left/100% calc(100% - 96px) no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0,0 H18 A18,18 0 0 1 36,18 V38 A22,22 0 0 0 58,60 H78 A18,18 0 0 1 96,78 V96 H0 Z' fill='%23000'/%3E%3C/svg%3E") top right/96px 96px no-repeat,
linear-gradient(#000,#000) top left/calc(100% - 96px) 96px no-repeat,
linear-gradient(#000,#000) bottom left/100% calc(100% - 96px) no-repeat;
background:
radial-gradient(85% 72% at 50% 118%,
rgba(214,154,60,0.20), rgba(214,154,60,0.05) 55%, transparent 76%),
linear-gradient(180deg,#1f150c,#160e08);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
#para-quem .conq-card:hover{transform:translateY(-2px)}
/* o círculo do ícone mora no furo, FORA do preenchimento do card.
Como na referência: CONTORNO FINO VAZADO, não chip preenchido brilhante.
42px centrado em (55,29) do tile → top:8px, right:8px, folga de 7px. */
#para-quem .trust-head{position:absolute;top:8px;right:8px;z-index:1}
#para-quem .trust-ic{
width:20px;height:20px;padding:10.5px;box-sizing:content-box;
border:1.5px solid rgba(236,196,95,0.55);border-radius:50%;
clip-path:none;margin:0;
background:transparent;box-shadow:none;
color:var(--champagne);
}
/* Tipografia dos cards (correções do dono): título SEM caixa alta, peso 600
(não "tão bold"), entrelinhas soltas — moderno e legível. */
#para-quem .trust-card h3{
margin:0 0 12px;padding-right:60px;
text-transform:none;
font-weight:600;font-size:18.5px;line-height:1.38;letter-spacing:0;
}
#para-quem .trust-card p{font-size:15px;line-height:1.72}
/* ==========================================================================
Camada · OFERTA EM DOIS ATOS + RESPIRO GLOBAL (19/08 noite, /loop do dono)
Referências do dono: o PREÇO vira um ritual isolado (riscado pequeno →
parcela GIGANTE → à vista → formas de pagamento → CTA → segurança) e o
VALOR vive ao lado numa lista "você recebe" com os 3 bônus etiquetados.
O card único antigo (.oferta-card + .oferta-stack) morreu no HTML; as
regras antigas ficaram órfãs (inofensivas).
========================================================================== */
.oferta-duo{display:grid;grid-template-columns:1fr;gap:18px;margin-top:6px}
@media (min-width:1080px){
.oferta-duo{grid-template-columns:47fr 53fr;gap:22px;align-items:stretch}
/* preço à ESQUERDA como nas referências; no DOM a lista vem antes
(mobile lê valor → preço) */
.preco-card{grid-column:1;grid-row:1}
.recebe-card{grid-column:2;grid-row:1}
}
/* ---------- o ritual do preço ---------- */
.preco-card{
position:relative;border-radius:var(--r-panel);
background:linear-gradient(180deg,#231709,#180f08);
border:1px solid rgba(236,196,95,0.16);
box-shadow:0 34px 90px -44px rgba(0,0,0,0.85),inset 0 1px 0 rgba(255,255,255,0.05);
padding:clamp(28px,3vw,44px) clamp(22px,2.4vw,36px);
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;
}
.preco-card .brand{justify-content:center;margin-bottom:clamp(16px,2vw,24px)}
.px-de{
font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-mut);
}
.px-de s{color:var(--ink-dim);text-decoration-thickness:1.5px;text-decoration-color:rgba(236,196,95,0.55)}
.px-hero{display:flex;align-items:baseline;justify-content:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.px-12{
font-family:var(--font-mono);font-size:14px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-mut);
}
.px-val{
font-family:var(--font-display);font-weight:800;
font-size:clamp(54px,6vw,84px);line-height:.95;letter-spacing:-.02em;
background-image:linear-gradient(100deg,#ecc45f,#f7e3a8 50%,#d99a3a);
-webkit-background-clip:text;background-clip:text;color:transparent;
font-variant-numeric:tabular-nums;
}
.px-pix{margin-top:14px;font-size:16.5px;color:var(--ink-lede)}
.px-pix b{color:var(--gold-honey);font-weight:600;font-variant-numeric:tabular-nums}
.px-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.px-chips span{
font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-mut);
border:1px solid var(--line-20);border-radius:999px;padding:6px 13px;
}
.preco-card .btn{margin-top:24px;width:100%}
.px-safe{margin-top:14px;font-size:12.5px;color:var(--ink-dim)}
.px-prova{
margin-top:8px;font-family:var(--font-mono);font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mut);
}
.px-prova b{color:var(--gold-honey);font-variant-numeric:tabular-nums}
/* ---------- a lista "você recebe" ---------- */
.recebe-card{
border-radius:var(--r-panel);
background:linear-gradient(180deg,#1d130b,#170e08);
border:1px solid rgba(236,196,95,0.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
padding:clamp(26px,2.8vw,36px) clamp(22px,2.6vw,34px);
}
.rcb-head{
font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--label-gold);margin-bottom:14px;
}
.rcb-list{list-style:none;margin:0;padding:0}
.rcb-list li{
display:grid;grid-template-columns:minmax(0,1fr) auto;
column-gap:14px;row-gap:3px;align-items:baseline;
padding:14px 0;border-top:1px solid var(--line-15);
}
.rcb-list li:first-child{border-top:0;padding-top:2px}
.rcb-list b{
grid-area:1/1;font-size:15.5px;font-weight:600;color:var(--ink-title);line-height:1.35;
}
.rcb-list b::before{content:"✓";margin-right:10px;color:var(--gold-mid);font-weight:400}
.rcb-list em{
grid-area:1/2;font-family:var(--font-mono);font-style:normal;font-size:12px;
color:var(--ink-faint);white-space:nowrap;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.rcb-list span{grid-area:2/1/2/3;font-size:13.5px;line-height:1.62;color:var(--ink-body)}
/* bônus: etiqueta dourada em pílula acima do nome */
.rcb-bonus{grid-template-rows:auto auto auto}
.rcb-bonus i{
grid-area:1/1;justify-self:start;margin-bottom:2px;
font-style:normal;font-family:var(--font-mono);font-size:9.5px;
letter-spacing:.14em;text-transform:uppercase;color:#1d1206;
background:linear-gradient(135deg,#ecc45f,#d99a3a);
border-radius:999px;padding:3px 10px;
}
.rcb-bonus b{grid-area:2/1}
.rcb-bonus em{grid-area:2/2}
.rcb-bonus span{grid-area:3/1/3/3}
.rcb-total{
display:flex;justify-content:space-between;align-items:baseline;gap:14px;
border-top:1px solid var(--line-25);margin-top:2px;padding-top:16px;
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-mut);
}
.rcb-total em{
font-style:normal;font-size:15px;color:var(--gold-honey);
font-variant-numeric:tabular-nums;
}
/* a garantia-faixa continua logo abaixo do duo, largura cheia */
.oferta-duo + .garantia-card{margin-top:18px}
/* ---------- para-quem: mais respiro + hover de LUZ (sem movimento) ----------
O translateY do hover rasterizava a máscara com artefato quadrado
(reprovado pelo dono). Hover novo: o bloom da base ACENDE (::after com a
mesma máscara, opacity 0 → 1) e o anel do ícone acorda. Nada se move. */
#para-quem .conq-card{padding:clamp(28px,2.6vw,34px) clamp(26px,2.4vw,32px) clamp(32px,3vw,38px);transition:none}
#para-quem .conq-card:hover{transform:none}
#para-quem .conq-card::after{
content:"";position:absolute;inset:0;z-index:-1;border-radius:24px;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0,0 H18 A18,18 0 0 1 36,18 V38 A22,22 0 0 0 58,60 H78 A18,18 0 0 1 96,78 V96 H0 Z' fill='%23000'/%3E%3C/svg%3E") top right/96px 96px no-repeat,
linear-gradient(#000,#000) top left/calc(100% - 96px) 96px no-repeat,
linear-gradient(#000,#000) bottom left/100% calc(100% - 96px) no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0,0 H18 A18,18 0 0 1 36,18 V38 A22,22 0 0 0 58,60 H78 A18,18 0 0 1 96,78 V96 H0 Z' fill='%23000'/%3E%3C/svg%3E") top right/96px 96px no-repeat,
linear-gradient(#000,#000) top left/calc(100% - 96px) 96px no-repeat,
linear-gradient(#000,#000) bottom left/100% calc(100% - 96px) no-repeat;
background:radial-gradient(85% 72% at 50% 118%,
rgba(214,154,60,0.30), rgba(214,154,60,0.10) 55%, transparent 78%);
opacity:0;transition:opacity .5s ease;pointer-events:none;
}
#para-quem .conq-card:hover::after{opacity:1}
#para-quem .trust-ic{transition:border-color .5s,box-shadow .5s}
#para-quem .conq-card:hover .trust-ic{
border-color:rgba(236,196,95,0.85);
box-shadow:0 0 20px rgba(214,154,60,0.35);
}
/* ---------- SUAVIDADE GLOBAL (auditoria pedida pelo dono) ----------
As perguntas do FAQ em CAIXA ALTA display eram o último bloco de leitura
corrida gritado — mesma decisão dos cards: sentence case, 600. Entrelinhas
dos blocos de leitura sobem para ~1.7. */
.acc-q{text-transform:none;font-weight:600;font-size:16.5px;letter-spacing:.005em;line-height:1.4}
.acc-inner p{line-height:1.72}
.acesso-steps .step span{line-height:1.68}
#para-quem .trust-card p{color:var(--ink-body)}
/* ==========================================================================
Camada · COPYS 19/08 (rodada de texto do dono) — suportes visuais
========================================================================== */
/* ---------- HERO: assinatura da marca acima da headline ----------
O PDF oficial (Downloads/"Logo - Juliana Romanato - Paleta.pdf") define o
nome como ASSINATURA em script (fonte Twilight Darling, comercial, sem
webfont aqui) sobre paleta navy #1e2e53 / terracota #ba4820.
Aqui: Allura (Google Fonts), a mais próxima em monolinha e largura.
⚠️ A cor é o DOURADO da página, não a terracota da marca — o ouro é a
linguagem de toda a V3 e a terracota entraria como cor única e órfã.
Se o dono quiser fidelidade estrita, trocar o gradiente por #ba4820. */
.hero-marca{
display:flex;flex-direction:column;gap:1px;
margin:0 0 clamp(8px,1.4vh,16px);
}
.hm-produto{
font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
text-transform:uppercase;color:var(--hl-ink-3,#8a7b66);
}
.hm-por{
display:flex;align-items:baseline;gap:9px;
font-size:12.5px;color:var(--hl-ink-3,#8a7b66);
}
.hm-nome{
font-family:'Allura',cursive;font-style:normal;font-weight:400;
font-size:clamp(30px,min(2.9vw,4.4vh),44px);line-height:.9;
background-image:linear-gradient(120deg,#8a5a14,#c98a28 55%,#a86a18);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
@media (max-height:760px){ .hero-marca{margin-bottom:6px} }
/* ---------- HERO: fotos reais nos avatares empilhados ---------- */
.htf{overflow:hidden;padding:0}
.htf img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
/* ---------- DEPOIMENTOS: fotos reais nos avatares ---------- */
.tq-av img{width:100%;height:100%;object-fit:cover;display:block}
/* ---------- RODAPÉ enxuto (reescrito pelo dono em 19/08) ----------
⚠️ O disclaimer médico ("a IA é apoio e não substitui o julgamento do
médico") saiu junto com o texto antigo, por ordem explícita. Está na
lista de revisão jurídica — se voltar, é dentro do .footer-final. */
.site-footer{padding:clamp(38px,5vw,56px) 0 clamp(30px,4vw,42px)}
.footer-final{
display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
}
.footer-final .footer-links{
flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
}
.footer-final .footer-links a{font-size:14px}
.fl-sep{color:var(--ink-faint)}
.footer-copy{
margin:0;max-width:74ch;
font-size:12.5px;line-height:1.7;color:var(--ink-dim);
}
/* ---------- HERO: compensação de altura após as linhas de marca ----------
Medido: o bloco .hero-marca empurrou o cartão para 973px numa viewport de
950. O hero é a única seção que PRECISA fechar em uma tela, então o
excedente sai do próprio bloco novo e de ~3px do título. */
.hero-marca{margin-bottom:clamp(2px,0.6vh,8px)}
.hm-nome{font-size:clamp(26px,min(2.5vw,3.7vh),37px)}
.hm-produto{font-size:10.5px}
.hero-card .hero-title{font-size:clamp(26px,min(4.7vw,6.6vh),57px)}
.hero-card .hero-lede{margin-bottom:clamp(12px,1.8vh,20px)}
/* telas BAIXAS: o hero tem de fechar em uma tela mesmo com as linhas de marca.
⚠️ O .hero-micro repete PALAVRA POR PALAVRA o chip do topo ("O novo padrão
de prática médica com IA"); em altura curta ele é o primeiro a sair. */
@media (max-height:760px){
.hero-marca{margin-bottom:2px;gap:0}
.hm-nome{font-size:clamp(22px,3.4vh,30px)}
.hero-card .hero-micro{display:none}
.hero-card .hero-lede{margin-bottom:clamp(10px,1.4vh,16px)}
.hero-time{margin-top:clamp(8px,1.4vh,14px)}
}
/* ⚠️ Em telas MUITO baixas (1366x640 é laptop comum) o reserve inferior do
cartão de vidro está calibrado no limite (7px de folga medidos), então o
corte precisa sair do CONTEÚDO, nunca do padding-bottom. */
@media (max-height:700px){
.hero-card .hero-title{font-size:clamp(24px,min(4.4vw,5.6vh),46px)}
.hero-card .eyebrow-pill{margin-bottom:6px}
.hm-nome{font-size:clamp(20px,3vh,27px)}
.hero-card .hero-lede{font-size:14.5px;margin-bottom:8px}
}
/* ==========================================================================
Camada · RODADA 3 (19/08 noite) — VSL, CFM, módulos e refino da oferta
========================================================================== */
/* ---------- VSL: o vídeo é VERTICAL (1440x2560 na origem) ----------
O player nasceu 16:9; um 9:16 dentro dele viraria duas tarjas pretas.
Agora o frame acompanha o vídeo: retrato, com teto de altura para não
virar uma torre no desktop. */
.vsl-wrap{display:flex;flex-direction:column;align-items:center}
.vsl-frame{
width:auto;
max-width:min(400px,88vw);
margin-inline:auto;
}
.vsl-player{
aspect-ratio:9/16;
max-height:min(78vh,700px);
background:#0b0704;
}
.vsl-video{
width:100%;height:100%;display:block;
object-fit:cover;border-radius:inherit;
}
@media (max-width:760px){
.vsl-frame{max-width:min(340px,80vw)}
.vsl-player{max-height:70vh}
}
/* ---------- CFM: recortes descolados ----------
⚠️ PREMISSA FALSA, corrigida em 23/08: filter é aplicado ANTES de
clip-path no MESMO elemento (ordem da spec), então este drop-shadow
também era recortado — provado por sombra-teste vermelha (zero pixels
pintados). A sombra que funciona vive na camada REFINO #metodo + #quem
no fim do arquivo: rasgo no img, drop-shadow no figure. O box-shadow:none
abaixo segue útil (mata o box-shadow da regra base 3452). */
.nz{
box-shadow:none;
filter:drop-shadow(0 8px 10px rgba(20,10,2,.42));
}
/* ---------- MÓDULOS: contagem por COLUNA (00-05 à esquerda, 06-11 à direita)
Ordem pedida pelo dono: "seguir toda a primeira fileira e continuar na
segunda". Antes era ímpar/par (00,02,04… à esquerda), o que fazia a
leitura pular de dois em dois. ---------- */
@media (min-width:1100px){
.mods-duo{grid-template-rows:repeat(6,minmax(0,1fr))}
/* os 6 primeiros à ESQUERDA, por baixo do notebook */
.mods-duo .v4-mod:nth-of-type(-n+6){
grid-column:1;z-index:1;
margin-right:calc(-1 * clamp(72px,6.6vw,104px));
padding-right:clamp(80px,7vw,116px);
margin-left:0;
}
/* os 6 últimos à DIREITA, por cima */
.mods-duo .v4-mod:nth-of-type(n+7){
grid-column:3;z-index:3;
margin-left:calc(-1 * clamp(72px,6.6vw,104px));
margin-right:0;padding-right:16px;
box-shadow:0 2px 4px rgba(60,40,10,0.06),0 18px 38px -16px rgba(60,40,10,0.35);
}
/* linhas explícitas: item i e item i+6 dividem a mesma linha */
.mods-duo .v4-mod:nth-of-type(1),.mods-duo .v4-mod:nth-of-type(7){grid-row:1}
.mods-duo .v4-mod:nth-of-type(2),.mods-duo .v4-mod:nth-of-type(8){grid-row:2}
.mods-duo .v4-mod:nth-of-type(3),.mods-duo .v4-mod:nth-of-type(9){grid-row:3}
.mods-duo .v4-mod:nth-of-type(4),.mods-duo .v4-mod:nth-of-type(10){grid-row:4}
.mods-duo .v4-mod:nth-of-type(5),.mods-duo .v4-mod:nth-of-type(11){grid-row:5}
.mods-duo .v4-mod:nth-of-type(6),.mods-duo .v4-mod:nth-of-type(12){grid-row:6}
}
/* ---------- MÓDULOS: polimento das pílulas ----------
Problema apontado: alinhamento e respiro irregulares — títulos de 1 e de 2
linhas faziam caixas de alturas diferentes. Agora: linhas 1fr (as 12 caixas
com a MESMA altura), tipo menor e conteúdo centrado no eixo vertical. */
.mods-duo .v4-mod{
padding:12px 18px 12px 13px;
column-gap:12px;row-gap:1px;
align-content:center;
}
.mods-duo .v4-mod .ic{width:34px;height:34px;padding:8px;border-radius:11px}
.mods-duo .v4-mod span{font-size:9px;letter-spacing:.16em}
.mods-duo .v4-mod b{
font-size:13px;line-height:1.24;letter-spacing:.01em;font-weight:600;
text-transform:none;
}
/* ---------- OFERTA: refino do cartão de preço ----------
O dono pediu MENOS informação, com base nas referências. Saiu a linha
"12x de" solta e a prova social repetida; o preço ganhou o palco. */
.px-de{font-size:11.5px;letter-spacing:.16em}
.px-hero{margin-top:8px}
.px-val{font-size:clamp(58px,6.6vw,92px)}
.px-pix{margin-top:10px;font-size:15.5px}
.px-chips{margin-top:20px}
.preco-card .btn{margin-top:22px}
.px-safe{margin-top:12px;font-size:12px}
/* ---------- OFERTA: lista de UMA LINHA por item ---------- */
.rcb-list li{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:15px 0;border-top:1px solid var(--line-15);
}
.rcb-list li:first-child{border-top:0;padding-top:4px}
.rcb-list b{font-size:15px;font-weight:600;color:var(--ink-title);line-height:1.35}
.rcb-bonus i{
order:-1;flex:none;margin:0;
font-style:normal;font-family:var(--font-mono);font-size:9px;
letter-spacing:.14em;text-transform:uppercase;color:#1d1206;
background:linear-gradient(135deg,#ecc45f,#d99a3a);
border-radius:999px;padding:3px 9px;
}
.recebe-card{display:flex;flex-direction:column;justify-content:center}
/* ==========================================================================
Camada · AUDITORIA 1 (UI/visual) — 19/08 noite, /loop
========================================================================== */
/* 1 · raio fora de escala (a régua do projeto é 4/8/12/16/24/32 e NÃO usa
clamp+vw em canto). Os dois desvios eram código MEU desta sessão. */
.mods-duo .v4-mod .ic{border-radius:12px}
.vsl-frame{border-radius:26px}
.vsl-player,.vsl-video{border-radius:24px}
/* 2 · entrelinha dos blocos de leitura unificada em ~1.7
(o subtítulo de seção estava em 1.6, sozinho fora do padrão) */
.section-subtitle{line-height:1.7}
/* 3 · lista da oferta: o ✓ passa a ser o PRIMEIRO item de todas as linhas.
Nas linhas de bônus ele vinha DEPOIS da etiqueta, quebrando a margem
esquerda óptica da lista. */
.rcb-list b::before{content:none}
.rcb-list li::before{
content:"✓";flex:none;color:var(--gold-mid);font-weight:400;font-size:14px;
}
.rcb-bonus i{order:0}
/* 4 · ÚNICA falha de contraste AA da página (medida): o rótulo "MÓDULO NN"
nos cards brancos estava em 3.17:1. #7c6a54 leva a ~5.0:1. */
.mods-duo .v4-mod span{color:#7c6a54}
/* ==========================================================================
Camada · AUDITORIA 2 (UX/técnica) — 19/08 noite, /loop
========================================================================== */
/* 5 · ALVOS DE TOQUE: 44x44 é o mínimo da HIG da Apple e do WCAG 2.5.5.
Medidos no celular: .hs-btn tinha 42px de altura e as setas do leque 40px. */
@media (max-width:900px){
.fan-nav{width:44px;height:44px}
.hs-btn{min-height:44px}
}
/* 6 · piso de 11px para os rótulos mono no celular (estavam em 10.5px;
a referência de legibilidade da Apple para caption é ~11pt) */
@media (max-width:760px){
.eyebrow-pill span:not(.dot),.hm-produto,.hs-lbl,.px-prova,.fan-badge{font-size:11px}
}
/* 7 · micro-rótulos do CONTEÚDO (não os decorativos dentro de cards) sobem
para 10.5px no celular — "MÓDULO NN" estava em 9px, e são 12 deles na
área principal. Os rótulos do coverflow ficam como estão: são adorno
dentro de um card visto de relance. */
@media (max-width:760px){
.mods-duo .v4-mod span{font-size:10.5px}
.rcb-bonus i{font-size:10px}
.vbar-tip{font-size:10px}
}
/* 8 · VSL vertical no DESKTOP: um 9:16 de 394px sozinho num viewport de
1600 ficava perdido no escuro. O vídeo cresce e as notas sobem para o
lado dele, fechando a composição (no celular tudo volta a empilhar). */
/* Duas colunas foi TESTADO e descartado: o grupo vídeo+notas centrava como
bloco, deixando o vídeo à esquerda do eixo do título centralizado — lia
como desalinhamento. Eixo ÚNICO, que é a escolha limpa: título, vídeo e
notas no mesmo centro; o vídeo só cresce. */
@media (min-width:1080px){
.vsl-frame{max-width:min(460px,34vw)}
.vsl-notes{justify-content:center;gap:34px;margin-top:30px}
}
/* ==========================================================================
Camada · TRIO DA OFERTA (19/08, diagrama do dono) — /loop
Três colunas com o VALOR ELEVADO no centro: as laterais recuam no eixo
vertical (margin-block), então o cartão do preço "sobe" e "desce" além
delas, exatamente como o retângulo amarelo do diagrama.
A faixa de garantia e o trio de passos foram CONSOLIDADOS na coluna da
direita — não existem mais soltos abaixo (.garantia-card / .acesso-steps
ficaram órfãos no CSS, inofensivos).
========================================================================== */
.oferta-trio{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
/* ---------- colunas laterais ---------- */
.of-lado{
border-radius:var(--r-panel);
background:linear-gradient(180deg,#1d130b,#170e08);
border:1px solid rgba(236,196,95,0.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
padding:clamp(24px,2.6vw,34px) clamp(20px,2.4vw,30px);
display:flex;flex-direction:column;
}
.of-head{
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--label-gold);
margin-bottom:16px;
}
/* ---------- direita: garantia + informações ---------- */
.of-gar{display:flex;align-items:flex-start;gap:14px;padding-bottom:20px}
.of-selo{
flex:none;width:54px;height:54px;border-radius:50%;
display:grid;place-items:center;line-height:1;
border:1px solid rgba(236,196,95,0.42);
background:radial-gradient(closest-side,rgba(214,154,60,0.18),transparent);
color:var(--gold-honey);
}
.of-selo b{font-family:var(--font-display);font-weight:800;font-size:20px}
.of-selo i{font-family:var(--font-mono);font-style:normal;font-size:7.5px;letter-spacing:.16em}
.of-gar-txt b{display:block;font-size:15px;font-weight:600;color:var(--ink-title);line-height:1.35;margin-bottom:5px}
.of-gar-txt p{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-body)}
.of-info{padding:18px 0 0;border-top:1px solid var(--line-15);margin-top:auto}
.of-info + .of-info{margin-top:0}
.of-info b{display:block;font-size:14.5px;font-weight:600;color:var(--ink-title);margin-bottom:4px}
.of-info p{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-body)}
/* ---------- desktop: o trio com o centro elevado ---------- */
@media (min-width:1080px){
.oferta-trio{
grid-template-columns:1fr 1.06fr 1fr;
gap:clamp(14px,1.4vw,22px);
align-items:stretch;
}
/* AS LATERAIS RECUAM — é isto que faz o centro parecer elevado */
.of-lado{margin-block:clamp(26px,3vw,52px)}
.preco-card{margin-block:0;z-index:2}
/* o centro ganha presença: borda e brilho mais fortes que as laterais */
.preco-card{
border-color:rgba(236,196,95,0.24);
box-shadow:0 40px 100px -46px rgba(0,0,0,0.9),
0 0 0 1px rgba(236,196,95,0.06),
inset 0 1px 0 rgba(255,255,255,0.06);
}
}
/* a lista do "incluso" respira dentro da coluna */
.of-lado--esq .rcb-list{margin-top:auto;margin-bottom:auto}
/* ---------- celular: uma coluna, ordem do DOM ---------- */
@media (max-width:1079px){
.of-lado{margin-block:0}
}
/* ⚠️ A camada do layout ANTIGO (2 colunas) tem `.preco-card{grid-column:1}`
sem escopo — ela jogava o preço para a esquerda do trio. Posição explícita
aqui, e o container da oferta abre para 1280 (1120 espremia as 3 colunas
e quebrava "R$ 69,90" em duas linhas). */
@media (min-width:1080px){
.oferta-section .container--1120{max-width:1280px}
.oferta-trio{grid-template-columns:1fr 1.25fr 1fr}
.oferta-trio .of-lado--esq{grid-column:1;grid-row:1}
.oferta-trio .preco-card{grid-column:2;grid-row:1}
.oferta-trio .of-lado--dir{grid-column:3;grid-row:1}
.px-val{font-size:clamp(48px,4.8vw,78px)}
}
/* refino do trio: o ✓ estava quebrando para uma linha só dele (flex-wrap
com a etiqueta de bônus estourando a coluna). Vira GRADE: ✓ na coluna 1,
conteúdo na 2 — a etiqueta do bônus fica ACIMA do nome, sem empurrar. */
.rcb-list li{
display:grid;grid-template-columns:auto minmax(0,1fr);
column-gap:11px;row-gap:5px;align-items:baseline;flex-wrap:nowrap;
}
.rcb-list li::before{grid-column:1;grid-row:1}
.rcb-list b{grid-column:2}
.rcb-bonus i{grid-column:2;grid-row:1;justify-self:start;order:0}
.rcb-bonus b{grid-row:2}
/* CTA do trio numa linha só (a coluna central comporta em 14px) */
.oferta-trio .btn{font-size:14px;letter-spacing:.04em}
/* ==========================================================================
Camada · MÓDULOS VOLTAM AO PAINEL TRADICIONAL (19/08, decisão do dono)
A "abertura do site" (creme de borda a borda + tampas escuras arredondadas
nas emendas) foi DESCARTADA. Duas razões, além do gosto dele:
1. CONSISTÊNCIA — as outras duas seções claras (.depo-box e .quem-box) são
painéis arredondados recuados da borda; os módulos eram a única voz
diferente entre as três.
2. MANUTENÇÃO — as tampas eram `::before/::after` de cor CHAPADA que
precisavam ser recasadas à mão a cada mudança do fundo-jornada (um
pseudo-elemento não acompanha um gradiente do documento). No painel,
o escuro em volta É a página: acoplamento zero.
Some com a animação de abertura por cena junto — não há mais o que abrir.
========================================================================== */
.mods-light{
background:none;
padding-block:calc(var(--space-section) / 2);
border-radius:0;
}
.mods-light::before,.mods-light::after{display:none}
.mods-light .container{max-width:none;padding:0 var(--card-pad)}
/* o painel: mesma anatomia do .depo-box */
.mods-panel{
background:linear-gradient(180deg,#faf6ee,#f2ece0);
border:1px solid rgba(101,71,22,0.10);
border-radius:var(--r-panel);
box-shadow:0 40px 100px -50px rgba(0,0,0,0.9),inset 0 1px 0 rgba(255,255,255,0.6);
padding:clamp(38px,4.6vw,68px) clamp(20px,3vw,48px) clamp(42px,5vw,76px);
}
/* o conteúdo continua com a medida de leitura, centrado dentro do painel */
.mods-panel > *{max-width:1380px;margin-inline:auto}
/* ==========================================================================
Camada · OFERTA v4 (19/08, 2ª referência do dono para o trio)
A mudança de conceito: **só o CENTRO é caixa**. As laterais perdem fundo,
borda e sombra e passam a viver direto sobre a página escura, separadas
por filetes. Isso empurra toda a atenção para o preço — que ganha borda
dourada e brilho — e é o que a referência mostra.
========================================================================== */
/* ---------- laterais: sem cartão ---------- */
.of-lado{
background:none;border:0;box-shadow:none;padding:0;
align-self:center;
}
.of-head{
font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
text-transform:uppercase;color:var(--label-gold);
margin:0 0 22px;
}
/* o filete curto acima do rótulo, como na referência */
.of-head::before{
content:"";display:block;width:30px;height:1px;margin-bottom:14px;
background:linear-gradient(90deg,var(--gold-mid),transparent);
}
/* ---------- esquerda: incluso + bônus ---------- */
.of-inc,.of-bon{list-style:none;margin:0;padding:0}
.of-inc li{
display:grid;grid-template-columns:auto minmax(0,1fr);
column-gap:14px;align-items:start;
padding:11px 0;
font-size:15px;line-height:1.45;color:var(--ink-title);
}
.of-inc li::before{
content:"✓";color:var(--gold-mid);font-weight:400;font-size:14px;line-height:1.45;
}
/* filete separando o que é incluso do que é bônus */
.of-bon{border-top:1px solid var(--line-15);margin-top:16px;padding-top:20px}
.of-bon li{padding:11px 0}
.of-bon i{
display:inline-block;margin-bottom:8px;
font-style:normal;font-family:var(--font-mono);font-size:9.5px;
letter-spacing:.16em;text-transform:uppercase;
color:var(--gold-honey);
border:1px solid rgba(236,196,95,0.42);
border-radius:999px;padding:4px 11px;
background:none;
}
.of-bon b{
display:block;font-size:15px;font-weight:600;line-height:1.45;
color:var(--ink-title);
}
/* ---------- direita: garantia e acesso, com ícones contornados ---------- */
.of-item{
display:grid;grid-template-columns:auto minmax(0,1fr);
column-gap:16px;align-items:start;
padding:20px 0;border-top:1px solid var(--line-15);
}
.of-item:first-of-type{border-top:0;padding-top:0}
.of-ic{
position:relative;flex:none;
width:46px;height:46px;border-radius:50%;
display:grid;place-items:center;
border:1px solid rgba(236,196,95,0.34);
color:var(--gold-honey);
}
.of-ic .ic{width:19px;height:19px}
/* o selo de 7 dias: escudo contornado com o texto dentro */
.of-ic--escudo{border:0;width:50px;height:54px}
.of-ic--escudo .ic{
position:absolute;inset:0;width:100%;height:100%;
color:rgba(236,196,95,0.55);
}
.of-ic--escudo em{
position:absolute;inset:0;
display:grid;place-items:center;align-content:center;gap:1px;
font-style:normal;line-height:1;
}
.of-ic--escudo b{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--gold-honey)}
.of-ic--escudo i{font-family:var(--font-mono);font-style:normal;font-size:7px;letter-spacing:.14em;color:var(--ink-mut)}
.of-txt b{
display:block;font-size:15px;font-weight:600;line-height:1.4;
color:var(--ink-title);margin-bottom:6px;
}
.of-txt p{margin:0;font-size:13.5px;line-height:1.68;color:var(--ink-body)}
/* ---------- centro: a única caixa, agora luminosa ---------- */
.oferta-trio .preco-card{
border:1px solid rgba(236,196,95,0.30);
background:
radial-gradient(120% 80% at 50% 0,rgba(214,154,60,0.10),transparent 60%),
linear-gradient(180deg,#241809,#160e07);
box-shadow:
0 0 60px -12px rgba(214,154,60,0.20),
0 44px 110px -50px rgba(0,0,0,0.95),
inset 0 1px 0 rgba(255,255,255,0.07);
}
/* ---------- desktop: as laterais não recuam mais por margem ----------
Sem cartão não há o que recuar; o centro se destaca por ser a única
caixa. `align-self:center` mantém as colunas equilibradas. */
@media (min-width:1080px){
.of-lado{margin-block:0}
.oferta-trio{grid-template-columns:1fr 1.18fr 1fr;gap:clamp(28px,3.2vw,58px);align-items:center}
.oferta-trio .preco-card{padding:clamp(34px,3.4vw,52px) clamp(26px,2.8vw,40px)}
}
/* ---------- celular ---------- */
@media (max-width:1079px){
.of-lado{margin-block:0}
.oferta-trio{gap:34px}
}
/* refino v4: na referência os DOIS rótulos de coluna ficam na mesma altura e
o cartão do preço é que se centra. Com align-items:center as colunas
ficavam desencontradas (alturas de conteúdo diferentes). */
@media (min-width:1080px){
.oferta-trio{align-items:start}
.oferta-trio .preco-card{align-self:center}
.of-lado{padding-top:30px}
}
/* o selo: "7" maior, como na referência */
.of-ic--escudo{width:54px;height:58px}
.of-ic--escudo b{font-size:20px}
.of-ic--escudo i{font-size:7.5px}
/* ⚠️ `.of-lado{align-self:center}` da camada base vencia o `align-items:start`
do grid — as duas colunas ficavam desencontradas por terem alturas de
conteúdo diferentes. O align-self precisa ser sobrescrito aqui. */
@media (min-width:1080px){ .of-lado{align-self:start} }
/* ==========================================================================
Camada · CARTÃO DE PREÇO v5 — pesquisa de UX/CRO aplicada (19/08)
O que a pesquisa mudou aqui, ponto a ponto:
· NN/g "minimize cognitive load" + estudo de whitespace: menos elementos,
mais ar, uma informação por linha.
· Baymard (selos de confiança): marcas de PAGAMENTO estão entre os sinais
que os usuários mais reconhecem — chips de TEXTO ("CARTÃO EM ATÉ 12X")
não carregam esse reconhecimento. Viraram marcas de verdade.
· Baymard (excesso de selos): 6+ selos DIFERENTES derrubam a confiança.
Por isso são 2 linhas de confiança, não uma parede de selos.
· CRO (garantia junto ao CTA): a garantia detalhada continua na coluna da
direita, mas uma linha curta agora vive ABAIXO do botão — o momento de
maior ansiedade é o clique.
· Transparência de preço: o total à vista ganhou corpo, não é mais nota
de rodapé.
========================================================================== */
/* ---------- a âncora, agora legível ----------
Antes era mono 11.5px caixa-alta com tracking .16em e o riscado quase
invisível — a âncora é o 2º número mais importante do cartão. */
.px-anchor{
margin:0;font-size:14px;line-height:1.4;color:var(--ink-mut);
letter-spacing:0;text-transform:none;font-family:var(--font-body);
}
.px-anchor s{
color:var(--ink-lede);text-decoration-thickness:1.5px;
text-decoration-color:rgba(236,196,95,.7);
font-variant-numeric:tabular-nums;
}
/* ---------- o preço: o número domina, não o símbolo ----------
"R$" tinha o mesmo corpo dos dígitos e roubava metade do palco. Agora
é sobrescrito e menor; "12x" vira prefixo discreto. */
.px-hero{
margin:6px 0 0;display:flex;align-items:baseline;justify-content:center;
gap:8px;flex-wrap:nowrap;line-height:.92;
}
.px-par{
font-family:var(--font-mono);font-size:15px;letter-spacing:.06em;
color:var(--ink-mut);align-self:center;
}
.px-cur{
font-family:var(--font-display);font-weight:700;
font-size:clamp(20px,1.9vw,28px);color:var(--champagne);
align-self:flex-start;margin-top:.42em;
}
.px-val{
font-family:var(--font-display);font-weight:800;
font-size:clamp(56px,5.6vw,86px);letter-spacing:-.02em;
background-image:linear-gradient(100deg,#ecc45f,#f7e3a8 48%,#d99a3a);
-webkit-background-clip:text;background-clip:text;color:transparent;
font-variant-numeric:tabular-nums;
}
.px-avista{
margin:12px 0 0;font-size:16px;color:var(--ink-lede);
}
.px-avista b{color:var(--gold-honey);font-weight:600;font-variant-numeric:tabular-nums}
/* ---------- marcas de pagamento ----------
Monocromáticas e de mesma altura óptica: leem como "aceitamos", não como
um mural de logotipos. ⚠️ São desenhos SIMPLIFICADOS feitos aqui, não os
assets oficiais — trocar pelos da Kiwify antes de publicar. */
.px-pay{
display:flex;align-items:center;justify-content:center;
gap:clamp(14px,1.6vw,22px);flex-wrap:wrap;
margin-top:22px;padding-top:20px;
border-top:1px solid var(--line-15);
color:var(--ink-mut);
}
.pm{height:17px;opacity:.92}
.pm--w{width:44px}
.pm--mc{width:32px;height:19px}
.pm--elo{width:30px}
.pm--pix{width:19px;height:19px}
.pm--bol{width:31px}
/* ---------- CTA e as duas linhas de confiança ---------- */
.oferta-trio .preco-card .btn{margin-top:22px}
.px-trust{
list-style:none;margin:16px 0 0;padding:0;
display:flex;flex-direction:column;gap:9px;align-items:center;
}
.px-trust li{
display:flex;align-items:center;gap:9px;
font-size:12.5px;line-height:1.45;color:var(--ink-mut);text-align:left;
}
.px-trust .ic{width:14px;height:14px;flex:none;color:var(--gold-mid)}
.px-trust b{color:var(--ink-soft);font-weight:600}
@media (max-width:520px){
.px-hero{gap:6px}
.px-pay{gap:14px}
.px-trust li{font-size:12px}
}
/* refino v5.1 (auditoria da própria captura):
· "12x" estava centrado verticalmente num bloco de 86px e boiava solto —
agora acompanha o "R$" no alto, lendo como uma unidade só;
· marcas de pagamento com peso óptico equilibrado (a barra do boleto e o
losango do Pix pediam mais corpo que os wordmarks);
· CTA cabe em UMA linha: o texto é longo, então o respiro lateral do botão
cede — não o corpo da fonte, que é o que dá presença ao botão. */
.px-par{align-self:flex-start;margin-top:.55em;font-size:14px}
.px-hero{gap:7px}
.pm{height:18px}
.pm--pix{width:21px;height:21px}
.pm--bol{width:34px;height:16px}
.pm--mc{width:34px;height:20px}
.oferta-trio .preco-card .btn{padding-inline:18px;gap:8px}
/* ==========================================================================
Camada · TRIO: DISPOSIÇÃO DE TAMANHOS (19/08, mockup de proporções do dono)
Proporções medidas no mockup dele: centro ≈1,5x a LARGURA das laterais e
≈1,3x a ALTURA, com ~37px de SOBREPOSIÇÃO de cada lado (as laterais
encaixam POR BAIXO do cartão).
⚠️ Grid não aceita gap negativo — a sobreposição vem de `margin-inline`
negativo no cartão + z-index. As laterais ganham padding interno para o
texto nunca entrar na zona coberta.
========================================================================== */
@media (min-width:1080px){
.oferta-trio{
grid-template-columns:1fr 1.5fr 1fr;
gap:0;
align-items:center;
}
/* o cartão invade as duas laterais e fica por cima */
.oferta-trio .preco-card{
grid-column:2;grid-row:1;
z-index:3;align-self:center;
margin-inline:calc(-1 * clamp(24px,2.4vw,38px));
/* mais ar no eixo vertical: é o que o torna ~1,3x mais alto que as laterais */
padding-block:clamp(48px,4.6vw,72px);
}
/* as laterais recuam para trás e reservam a zona coberta */
.of-lado{z-index:1;align-self:center}
.of-lado--esq{grid-column:1;padding-right:clamp(46px,4.4vw,68px)}
.of-lado--dir{grid-column:3;padding-left:clamp(46px,4.4vw,68px)}
}
/* calibragem contra as proporções medidas do mockup:
1) largura estava 1:1.72 (alvo 1:1.54) → trilha central de 1.5fr para 1.35fr;
2) ALTURA estava 1:0.97 — o centro era MAIS BAIXO que a coluna da direita,
o oposto do mockup. A direita encolhe (texto mais justo, sem perder
palavra) e o centro ganha ar vertical, até o centro passar das duas. */
@media (min-width:1080px){
.oferta-trio{grid-template-columns:1fr 1.35fr 1fr}
.oferta-trio .preco-card{padding-block:clamp(54px,5.2vw,84px)}
.of-item{padding:17px 0}
.of-txt p{font-size:12.5px;line-height:1.6}
.of-txt b{font-size:14.5px;margin-bottom:5px}
.of-inc li{padding:10px 0}
.of-bon li{padding:10px 0}
}
/* o centro passava só 24px das laterais — visível, mas tímido para o efeito
de "elevado" do mockup. Com 104px de respiro vertical ele passa ~44px de
cada lado. ⚠️ Não perseguir o 1.32 exato do mockup: ele foi medido numa
colagem com a coluna direita mais curta, e forçar a razão aqui deixaria
o cartão VAZIO. O critério é visual: o centro tem de dominar sem ocar. */
@media (min-width:1080px){
.oferta-trio .preco-card{padding-block:clamp(64px,6vw,104px)}
}
/* ==========================================================================
Camada · TOPO DOS BÔNUS REESCRITO (19/08, ordem do dono)
O que estava bagunçado: "bônus" aparecia 3x em 4 linhas (ponte + chip +
H2), e entre o título e o mockup não havia copy NENHUMA — só um preço
gigante "por R$ 0,00", que soa barato para um público médico.
Agora: H2 de seção → lede curta → bloco do bônus principal com título,
argumento e o valor como NOTA discreta, não como manchete.
A seção-ponte foi removida (o H2 novo faz o trabalho dela).
========================================================================== */
.bonus-lede{
max-width:60ch;margin:0 auto;text-align:center;
font-size:16px;line-height:1.7;color:var(--ink-lede);
}
.kit-head{
max-width:74ch;margin:clamp(38px,4.4vw,64px) auto 0;text-align:center;
}
.kit-kicker{
display:inline-block;
font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold-honey);
border:1px solid rgba(236,196,95,0.34);border-radius:999px;
padding:5px 13px;
}
.kit-h3{
font-family:var(--font-display);font-weight:700;
font-size:clamp(24px,2.8vw,36px);line-height:1.12;letter-spacing:.01em;
color:var(--ink-title);margin:16px 0 0;text-wrap:balance;
}
.kit-lede{
margin:14px auto 0;max-width:66ch;
font-size:15.5px;line-height:1.75;color:var(--ink-body);
}
.kit-lede strong{color:var(--ink-soft);font-weight:600}
/* o valor vira NOTA, não manchete: era "por R$ 0,00" em corpo gigante */
.kit-valor{
display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;
justify-content:center;
margin:20px 0 0;
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-mut);
}
.kit-valor b{color:var(--gold-honey);font-weight:500;font-variant-numeric:tabular-nums}
.kit-valor span{
color:var(--label-gold);
border-left:1px solid var(--line-25);padding-left:10px;
}
@media (max-width:760px){
.bonus-lede{font-size:15px}
.kit-lede{font-size:14.5px}
.kit-valor{font-size:10px;letter-spacing:.1em}
}
/* ==========================================================================
Camada · TOPO DOS BÔNUS v2 — duas violações de leitura corrigidas (19/08)
O dono reprovou ("a Apple nunca faria isso") e a pesquisa deu a razão:
1. EYEBROW ANINHADO. Eyebrow existe acima do título de um CONTEÚDO, não
acima de subtítulos dentro dele. Eu tinha chip → h2 → texto → chip →
h3 → texto: lê como template, não como composição. O 2º chip morreu.
2. CORPO DE TEXTO CENTRALIZADO. Centralizar cria margem esquerda irregular
e quebra o "return sweep" do olho — 60% das pessoas leem mais rápido
alinhado à esquerda. Eram 5 linhas centradas. Agora é banda editorial:
título à esquerda, argumento à direita e ALINHADO À ESQUERDA.
Sobra UM chip, UM h2 e UMA lede curta centrada (frase curta centrada é
legítima; parágrafo não é).
========================================================================== */
.kit-banda{
max-width:1040px;margin:clamp(40px,4.6vw,68px) auto 0;
display:grid;grid-template-columns:1fr;gap:20px;
text-align:left;
padding-top:clamp(28px,3vw,40px);
border-top:1px solid var(--line-15);
}
@media (min-width:900px){
.kit-banda{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:clamp(36px,4vw,72px);align-items:start}
}
.kit-h3{
font-family:var(--font-display);font-weight:700;
font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:.01em;
color:var(--ink-title);margin:0;text-wrap:balance;
}
.kit-valor{
display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
margin:14px 0 0;
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-mut);
}
.kit-valor b{color:var(--gold-honey);font-weight:500;font-variant-numeric:tabular-nums}
.kit-valor span{color:var(--label-gold);border-left:1px solid var(--line-25);padding-left:10px}
.kit-lede{
margin:0;max-width:62ch;
font-size:15.5px;line-height:1.75;color:var(--ink-body);
}
.kit-lede strong{color:var(--ink-soft);font-weight:600}
.bonus-lede{
max-width:56ch;margin:0 auto;text-align:center;
font-size:16px;line-height:1.7;color:var(--ink-lede);
}
.bonus-lede strong{color:var(--ink-soft);font-weight:600}
@media (max-width:760px){
.bonus-lede{font-size:15px}
.kit-lede{font-size:14.5px}
}
/* ==========================================================================
Camada · SEÇÃO DA JULIANA v2 — 3 colunas + bento (19/08, referência do dono)
Sai a colagem em leque flutuante; entra a diagramação editorial da
referência: retrato com credencial SOBREPOSTA à esquerda, a carta ao
centro e um BENTO de fotos à direita com a citação ocupando uma célula.
Embaixo, a faixa dos quatro papéis. O painel continua cheio ("todo
preenchido"), sem vão morto.
⚠️ O CSS antigo (.quem-foto/.quem-lado/.quem-collage/.qc) ficou órfão.
========================================================================== */
.quem-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,3vw,44px)}
@media (min-width:1100px){
.quem-grid{
grid-template-columns:minmax(0,0.82fr) minmax(0,1.15fr) minmax(0,1.05fr);
gap:clamp(28px,2.8vw,48px);
align-items:start;
}
}
/* ---------- 1 · retrato + credencial sobreposta ---------- */
.qm-retrato{position:relative;border-radius:var(--r-xl,20px)}
.qm-retrato img{
width:100%;height:100%;object-fit:cover;display:block;
border-radius:18px;
border:1px solid rgba(138,90,20,.35);
box-shadow:0 30px 60px -34px rgba(60,40,10,.5);
}
@media (min-width:1100px){
.qm-retrato{height:100%;min-height:520px}
}
.qm-cred{
position:relative;margin:-46px 0 0 -8px;
display:inline-flex;align-items:center;gap:14px;
background:#fffdf8;border:1px solid rgba(101,71,22,.14);
border-radius:16px;padding:14px 20px 14px 16px;
box-shadow:0 18px 40px -22px rgba(60,40,10,.45);
}
@media (min-width:1100px){ .qm-cred{position:absolute;left:-14px;bottom:-22px;margin:0} }
.qm-cred-ic{
flex:none;width:38px;height:38px;border-radius:50%;
display:grid;place-items:center;color:#8a5a14;
border:1px solid rgba(138,90,20,.34);
}
.qm-cred-ic .ic{width:19px;height:19px}
.qm-cred-txt b{display:block;font-size:15px;font-weight:600;color:#241708;line-height:1.25}
.qm-cred-txt i{
display:block;font-style:normal;font-family:var(--font-mono);
font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#8a7b66;margin:2px 0 5px;
}
.qm-cred-txt p{
margin:0;font-family:var(--font-mono);font-size:10.5px;line-height:1.6;
color:#57493a;font-variant-numeric:tabular-nums;
}
/* ---------- 2 · a carta ---------- */
.qm-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.qm-eyebrow span{
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;color:#8a5a14;white-space:nowrap;
}
.qm-eyebrow::after{
content:"";flex:1;height:1px;
background:linear-gradient(90deg,rgba(138,90,20,.4),transparent);
}
.qm-h2{
font-family:var(--font-display);font-weight:800;
font-size:clamp(30px,3.4vw,46px);line-height:1.04;letter-spacing:-.01em;
text-transform:uppercase;color:#241708;margin:0 0 20px;text-wrap:balance;
}
.qm-carta p{
margin:0 0 14px;font-size:15px;line-height:1.75;color:#57493a;
max-width:56ch;
}
/* a virada da história, destacada no fluxo (é a mesma frase da citação) */
.qm-virada{
font-weight:600;color:#8a5a14 !important;font-size:16px !important;
margin:20px 0 18px !important;line-height:1.45 !important;
}
/* ---------- 3 · bento de fotos com a citação ---------- */
.qm-bento{
display:grid;grid-template-columns:1fr 1fr;
gap:clamp(10px,1vw,16px);
grid-auto-rows:minmax(0,1fr);
}
.qb{margin:0;overflow:hidden;border-radius:14px;background:#efe7d8}
.qb img{width:100%;height:100%;object-fit:cover;display:block}
.qb--a{aspect-ratio:4/3}
.qb--b{aspect-ratio:4/3}
.qb--d{grid-row:span 2;aspect-ratio:auto}
.qb--e{aspect-ratio:4/3}
.qb--f{aspect-ratio:4/3}
.qb-cita{
margin:0;border-radius:14px;
background:#fffdf8;border:1px solid rgba(101,71,22,.12);
padding:clamp(16px,1.6vw,24px);
display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.qb-aspas{
font-family:var(--font-display);font-weight:800;font-size:38px;line-height:.6;
color:#d69a3c;
}
.qb-cita p{
margin:0;font-family:var(--font-display);font-weight:600;
font-size:clamp(15px,1.35vw,20px);line-height:1.28;color:#241708;
}
.qb-cita em{font-style:italic;color:#8a5a14}
/* ---------- 4 · a faixa dos quatro papéis ---------- */
.qm-papeis{
list-style:none;margin:clamp(30px,3.4vw,48px) 0 0;padding:clamp(20px,2.2vw,28px) 0 0;
border-top:1px solid rgba(101,71,22,.14);
display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,26px);
}
@media (min-width:700px){ .qm-papeis{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .qm-papeis{grid-template-columns:repeat(4,1fr)} }
.qm-papeis li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.qmp-ic{
flex:none;width:38px;height:38px;border-radius:50%;
display:grid;place-items:center;color:#8a5a14;
border:1px solid rgba(138,90,20,.3);
}
.qmp-ic .ic{width:18px;height:18px}
.qm-papeis b{display:block;font-size:14.5px;font-weight:600;color:#241708;line-height:1.3}
.qm-papeis span{display:block;margin-top:3px;font-size:13px;line-height:1.55;color:#57493a}
/* ---------- celular ---------- */
@media (max-width:1099px){
.qm-retrato img{max-height:420px}
.qm-bento{grid-auto-rows:auto}
.qb--d{grid-row:auto;aspect-ratio:4/5}
}
/* ⚠️ `.quem-inner` era FLEX EM LINHA (do layout antigo retrato+lado): a faixa
dos papéis virava uma 4ª coluna espremida. Agora empilha em bloco: grade
de 3 colunas em cima, faixa embaixo. */
.quem-inner{display:block}
/* o retrato acompanha a altura da grade e a credencial fica ancorada nele */
@media (min-width:1100px){
.quem-grid{align-items:stretch}
.qm-retrato{height:auto;min-height:0;align-self:stretch;padding-bottom:26px}
.qm-retrato img{position:absolute;inset:0 0 26px 0;height:auto}
.qm-cred{left:16px;right:16px;bottom:0;justify-content:flex-start}
}
/* bento: linhas do mesmo tamanho, sem vão entre as fileiras */
.qm-bento{grid-auto-rows:1fr;align-content:stretch}
.qb--a,.qb--b,.qb--e,.qb--f{aspect-ratio:auto}
.qb--d{grid-row:span 2}
@media (min-width:1100px){ .qm-bento{height:100%} }
/* ⚠️ `inset:0 0 26px 0` com `height:auto` NÃO estica: com top e bottom
definidos é preciso deixar a altura resolver sozinha (height:100% + inset:0).
O retrato agora preenche a coluna inteira e a credencial ancora no pé dele. */
@media (min-width:1100px){
.qm-retrato{padding-bottom:0;align-self:stretch;min-height:560px}
.qm-retrato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.qm-cred{left:14px;right:14px;bottom:14px;width:auto}
}
/* ⚠️ O BENTO estava DEFININDO a altura da composição: com aspect-ratio nas
células ele tinha altura intrínseca de 1645px para uma carta de 696px.
Com `minmax(0,1fr)` nas linhas e `min-height:0` nas células ele perde a
altura própria e passa a ESTICAR até a altura da carta, que é quem deve
mandar. Regra geral de grid: filho que não pode encolher vira o teto. */
@media (min-width:1100px){
.quem-grid{min-height:640px}
.qm-bento{height:100%;grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
.qb,.qb-cita{min-height:0;aspect-ratio:auto}
.qb img{min-height:0}
.qm-retrato{min-height:0}
}
/* ⚠️ `height:100%` num item de grid resolve para AUTO quando a linha tem
altura indefinida — por isso o bento continuava ditando 1645px. A saída é
tirá-lo do fluxo: o invólucro é o item do grid (estica com a linha, que
a CARTA define) e o bento vive absoluto dentro dele. */
@media (min-width:1100px){
.qm-bento-wrap{position:relative;min-height:0;align-self:stretch}
.qm-bento{position:absolute;inset:0;height:auto}
.quem-grid{min-height:0}
}
@media (max-width:1099px){ .qm-bento-wrap{position:static} }
/* bento final: 6 células IGUAIS em 2x3 (5 fotos + citação). O `span 2` da
foto alta pedia 7 vagas numa grade de 6 e desalinhava tudo; e a citação
transbordava a própria célula. Grade regular resolve os dois. */
.qb--d{grid-row:auto}
.qb-cita{overflow:hidden}
.qb-cita p{font-size:clamp(13.5px,1.15vw,17px);line-height:1.3}
.qb-aspas{font-size:30px;margin-bottom:2px}
@media (min-width:1100px){
.qm-bento{grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(9px,0.85vw,14px)}
.qb-cita{padding:clamp(14px,1.3vw,20px)}
}
/* ==========================================================================
Camada · CORREÇÕES DA AUDITORIA (agente de tipografia) — 19/08
========================================================================== */
/* 1 · .bonus-title não declarava line-height e caía no body{1.6}: 74px de vão
entre as duas linhas do título, contra ~50px do padrão das outras seções.
O título chegava rasgado em dois blocos. */
.bonus-title{line-height:1.08}
/* 2 · O BOTÃO DE COMPRA era o MENOR CTA da página (14px contra 15.5px dos
outros). Medido: caixa de 431px úteis para um rótulo de 294px a 17px —
cabia folgado. O único botão que fecha venda volta a ser o mais forte. */
.oferta-trio .preco-card .btn{font-size:17px;letter-spacing:.05em}
/* 3 · EYEBROW ANINHADO em #oferta: ".sec-eyebrow" (MATRÍCULA) e ".of-head"
(TUDO QUE ESTÁ INCLUSO / GARANTIA E ACESSO) tinham a MESMA voz — mesma
cor, família, caixa e 0.5px de diferença de corpo. O rótulo de coluna
desce de nível: mantém o filete dourado como marcador, mas em tinta de
corpo, para o dourado ficar reservado ao nível de SEÇÃO. */
.of-head{font-size:10px;letter-spacing:.16em;color:var(--ink-mut)}
/* 4 · .kit-valor usava JetBrains Mono 500 — o único elemento da página com
esse peso, que obrigava a baixar um arquivo de fonte inteiro. Vai para
700, que já está carregado. */
.kit-valor b{font-weight:700}
/* 5 · .cfm-list era a única lista de leitura fora da faixa 1.6-1.8 */
.cfm-list li{line-height:1.65}
/* 6 · medida de leitura acima de 75 caracteres nos dois blocos mais longos */
.acc-inner p{max-width:62ch}
.kit-lede{max-width:62ch}
/* 7 · CONTRASTES abaixo de AA apontados na auditoria (medidos):
.fan-hint 3.77 · .qm-cred-txt i 4.05 · .hm-produto/.hm-por 3.41 */
.mods-light .fan-hint{color:#6f6152}
.qm-cred-txt i{color:#6f6152}
.hero--light .hm-produto,.hero--light .hm-por{color:#6d5f4c}
/* 8 · links do rodapé tinham 22.4px de altura de alvo — abaixo até do
mínimo AA de 24px (WCAG 2.5.8). Padding vertical resolve sem mexer no
desenho. */
.footer-final .footer-links a{display:inline-block;padding-block:8px}
/* 9 · o selo do coverflow vazava a viewport em 320px (left:-30px) */
@media (max-width:400px){ .cf-selo{left:0} }
/* ==========================================================================
Camada · CORREÇÕES DA AUDITORIA (agente de layout) — 19/08
Todos os números abaixo foram medidos pelo agente e reconferidos.
========================================================================== */
/* 1 · 🔴 #quem QUADRUPLICAVA de altura com 1px de diferença: 1006px a 1100
e 4052px a 1099 (+3046). Abaixo do breakpoint o bento perdia os limites
e as fotos passavam a ditar a altura pela razão intrínseca. Vale para
TODA a faixa 820-1099 (tablet deitado, 1024, laptop pequeno). */
@media (max-width:1099px){
.qm-bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px}
.qb,.qb-cita{aspect-ratio:4/3;min-height:0}
.qb--d{aspect-ratio:4/3;grid-row:auto} /* era 4/5: abria 237-255px de vão */
.qb img{height:100%}
}
/* 2 · retrato DECAPITADO em toda largura ≤1099: o `object-position` estava
preso dentro do @media de 1100. A 1024 mostrava 30% da foto, cortando
acima dos olhos. Agora o enquadramento é do caso BASE. */
.qm-retrato img{object-position:center 22%}
/* 3 · faixa morta de 416x639px ao lado da carta entre 700 e 1099: a coluna
tinha 1007px e o texto max-width:56ch (591px). Nessa faixa o retrato e a
carta dividem a linha e o bento passa para baixo, ocupando a largura. */
@media (min-width:700px) and (max-width:1099px){
.quem-grid{grid-template-columns:minmax(0,0.85fr) minmax(0,1.5fr)}
.qm-bento-wrap{grid-column:1/-1}
.qm-retrato img{max-height:none}
.qm-retrato{min-height:380px}
}
/* 4 · o cartão de vidro cobria 100% da altura da linha do texto do hero a
360px (182x35px de sobreposição, lendo "Entre para o time de m…"). */
@media (max-width:380px){
.hero-card .container{padding-bottom:clamp(190px,32vh,250px)}
.hero-time{margin-bottom:6px}
}
/* 5 · o "cartão elevado" da oferta ficava INVERTIDO de 1080 a ~1110: a
coluna direita (584px) ultrapassava o cartão (542px) em 21px acima e
abaixo — o oposto do desenho. O trio só entra a partir de 1120. */
@media (min-width:1080px) and (max-width:1119px){
.oferta-trio{grid-template-columns:1fr;gap:26px}
.oferta-trio .preco-card{grid-column:1;grid-row:auto;margin-inline:0;padding-block:clamp(34px,4vw,48px)}
.of-lado--esq,.of-lado--dir{grid-column:1;grid-row:auto;padding:0;margin-block:0}
}
/* 6 · .quem-box tinha METADE do respiro interno dos outros dois painéis
claros (32/32 contra 68/48 do .mods-panel e 64/48 do .depo-box a 1600). */
.quem-box{padding:clamp(34px,4.4vw,64px) clamp(18px,3vw,48px)}
/* 7 · pés das duas colunas do FAQ desalinhados 47-53px acima de 1280 */
@media (min-width:1280px){ .faq-grid{align-items:stretch} .faq-card{align-self:start} }
/* no tablet o bento ocupa a LARGURA CHEIA (abaixo do retrato+carta), então
3 colunas x 2 linhas aproveitam melhor que 2x3: 1100px de altura caem
para ~480px, sem encolher nenhuma foto. */
@media (min-width:700px) and (max-width:1099px){
.qm-bento{grid-template-columns:repeat(3,1fr)}
}
/* ==========================================================================
Camada · PACKS POR ESPECIALIDADE EM CLARO (20/08)
Pedido do dono: manter o layout do coverflow exatamente como esta e trocar
so a paleta para a versao CLARA da plataforma, casando com o mockup claro
do dashboard logo acima (assets/kit-app-claro.webp).
Superficie: a mesma linguagem do cartao branco canonico do projeto
(.mods-duo .v4-mod) — #fff, sombra em duas camadas, SEM contorno.
O contorno continua zero por decisao do dono (item 3 da camada do
coverflow, mais acima): sobre o fundo escuro da secao um cartao branco
ja se separa sozinho.
⚠️ COR DO TEXTO — a armadilha desta camada. A camada de 18/08 define
--pc-txt como `--pc misturado com 20% de BRANCO`, porque o cartao era
ESCURO. Em cartao BRANCO isso inverte: clarear a cor derruba o contraste.
Aqui cada pack recebe --pc-ink, que e a cor pura escurecida no MINIMO
necessario para bater 4.5:1 sobre o veu do card (medido pack a pack,
nao chutado — os 10 valores estao na tabela abaixo). --pc-txt passa a
apontar para --pc-ink, entao os seletores de 18/08 continuam valendo
sem serem reescritos.
A cor PURA (--pc) segue nas superficies: icone, veu do topo e selo.
========================================================================== */
.cf-face{
/* ⚠️ --lt-ink* sao definidos SO dentro de .depo-box/.mods-panel/
.quem-box. Fora deles a declaracao vira INVALIDA e o texto herda o creme
do tema escuro — medido: corpo do card a 2.32:1 sobre branco. Por isso os
tres tokens sao redeclarados aqui, como os paineis claros fazem.
--lt-ink-3 usa #75684f (4.68:1), o valor que a auditoria de 19/08 ja
escolheu para .depo-box; o #8a7c6a padrao da 3.48:1 e REPROVA. */
--lt-ink:#241708;
--lt-ink-2:#57493a;
--lt-ink-3:#75684f;
--pc-txt:var(--pc-ink);
background:
radial-gradient(122% 88% at 12% 0%,color-mix(in srgb,var(--pc) 12%,transparent),transparent 62%),
#fff;
box-shadow:0 1px 2px rgba(60,40,10,0.05),0 22px 46px -24px rgba(60,40,10,0.42);
}
/* corpo e rotulos na paleta clara do projeto */
.cf-desc{color:var(--lt-ink-2)}
.cf-meta,.cf-rodape{color:var(--lt-ink-3)}
.cf-meta,.cf-rodape{border-top-color:rgba(101,71,22,0.12)}
.cf-back li{color:var(--lt-ink-2);border-top-color:color-mix(in srgb,var(--pc) 24%,rgba(101,71,22,0.10))}
/* selo: superficie tingida, texto no tom acessivel */
.cf-selo{
background:color-mix(in srgb,var(--pc) 11%,#fff);
border-color:color-mix(in srgb,var(--pc) 26%,transparent);
}
/* --pc-ink por pack: minimo escurecimento para 4.5:1 sobre o proprio veu.
Medido com a formula WCAG contra color-mix(--pc 12%, #fff) — o centro do
veu radial, o ponto MAIS ESCURO do fundo. Medir contra branco puro
SUPERESTIMA: foi assim que a Cardiologia passou por 4.55 no papel e
mediu 4.48 na tela. */
.cf-card[data-i="0"]{--pc-ink:#4065CF} /* Clinica Medica 4.59:1 */
.cf-card[data-i="1"]{--pc-ink:#167E3C} /* Pediatria 4.64:1 */
.cf-card[data-i="2"]{--pc-ink:#C23737} /* Cardiologia 4.62:1 */
.cf-card[data-i="3"]{--pc-ink:#BA3979} /* Gineco e Obst. 4.59:1 */
.cf-card[data-i="4"]{--pc-ink:#0B7C56} /* Med. da Familia 4.66:1 */
.cf-card[data-i="5"]{--pc-ink:#AE500F} /* Ortopedia 4.69:1 */
.cf-card[data-i="6"]{--pc-ink:#7950D6} /* Radiologia 4.59:1 */
.cf-card[data-i="7"]{--pc-ink:#177985} /* Anestesiologia 4.66:1 */
.cf-card[data-i="8"]{--pc-ink:#8D47CF} /* Psiquiatria 4.62:1 */
.cf-card[data-i="9"]{--pc-ink:#9A6407} /* Dermatologia 4.56:1 */
/* ⚠️ VAZAMENTO PRE-EXISTENTE, exposto pelo cartao claro: no VERSO, os packs
com 5 itens e rotulo que quebra em 2 linhas (Clinica Medica +21px,
Pediatria +17px, Ortopedia +2px a 1600) empurravam o rodape para FORA do
cartao. No cartao escuro o texto vazado se perdia no fundo da secao; no
branco fica obvio. NAO e efeito desta camada — medido antes e depois.
Correcao pelo respiro das linhas, nao pela altura do cartao: mexer em
`--cfcw`/1.30 mudaria a geometria do coverflow inteiro. */
.cf-back li{padding:5px 0;line-height:1.3}
.cf-back ul{margin-top:8px}
/* O respiro das linhas resolveu 1440 e 1600, mas NAO a faixa 761-1300: ali
`--cfcw` bate no piso de 175px e o cartao cai para 227px de altura com o
MESMO conteudo (Clinica Medica vazava 31px). Encolher mais a tipografia
nao e opcao: a lista ja esta em 10.5px, o piso que a auditoria de 19/08
fixou para micro-rotulos de CONTEUDO. Entao o cartao ganha um PISO de
altura (273px), em vez de uma faixa: onde a proporcao 1.30 ja da altura
suficiente (>=1440) nada muda; onde ela encolhe demais, o piso segura.
A largura (`--cfcw`) nao muda, entao a geometria horizontal do coverflow
fica intacta — so a banda fica mais alta onde precisava.
⚠️ O corte e `min-width:760.05px`, nao 761: o par `max-width:760` +
`min-width:761` deixa um BURACO em viewport fracionario (medido: a 760,5px
as duas consultas dao false e o cartao voltava a 227px). O celular
(<=760) fica de fora de proposito — la nao havia vazamento. */
@media (min-width:760.05px){
.cf-stage,.cf-card{height:max(calc(var(--cfcw) * 1.30),273px)}
}
/* ==========================================================================
Camada · HERO SEM O SELO E SEM O CARTÃO DE VIDRO (21/08, pedido do dono)
Saíram do HTML o .eyebrow-pill ("O novo padrão de prática médica com IA")
e o .hero-stat (+1.239 / médicos na rotina + "Ver os resultados").
O CSS dos dois FICA no arquivo, sem uso, por decisão do dono: a limpeza
vira tarefa própria. O inventário está no HANDOFF.
⚠️ Esta camada vem DEPOIS da regra ~2727 e da camada ~4200, como elas
próprias exigem, e depois da media de 380px (~6570), que ela sobrescreve.
1. RECUO (só desktop). A coluna de texto começava a 94px da borda em 1440
(18,7 de --hero-pad + 31,3 da centragem do container + 44 de --pad-x),
e entrava cedo demais na arte. O deslocamento é margin-left no
.hero-content, e não padding no .container: mexer no container moveria
também o eixo de centragem e o max-width, e o hero perderia o
alinhamento com o resto da página. No celular fica 0 e o recuo atual
permanece intacto.
2. FAIXA INFERIOR (desktop e celular). O padding-bottom existia para
reservar o espaço do cartão de vidro — ver o piso de 198px documentado
na camada ~4200 e a media de 380px (~6570), escrita porque o cartão
cobria a linha "Entre para o time de m…". Sem o cartão os dois motivos
deixam de existir. A única peça que ainda ocupa a base é o canto
recortado: no desktop ele fica à DIREITA de 1040px enquanto a coluna
de texto termina antes de 780px, e no celular sobram ~150px de folga
vertical. Não há colisão possível em nenhuma das duas. A faixa encolhe
e o bloco volta ao centro óptico, compensando a altura que o selo
levou embora do topo (~52px no desktop, ~69px no celular).
========================================================================== */
@media (min-width:881px){
.hero-content{margin-left:clamp(0px,4.5vw,88px)}
.hero-card .container{padding-bottom:clamp(112px,min(13vh,10vw),168px)}
}
@media (min-width:881px) and (min-height:761px) and (max-height:920px){
.hero-card .container{padding-bottom:clamp(96px,12vh,124px)}
}
@media (min-width:881px) and (max-height:760px){
.hero-card .container{padding-bottom:clamp(92px,11.5vh,116px)}
}
/* Celular: sem deslocamento lateral, só a faixa inferior. Vence também a
media de 380px acima, que reservava de 190 a 250px para o cartão. */
@media (max-width:880px){
.hero-card .container{padding-bottom:clamp(96px,13.3vh,150px)}
}
/* ==========================================================================
Camada · MOCKUP DO APP EM HTML/CSS, PALETA ESCURA (21/08, pedido do dono)
Substitui assets/kit-app-claro.webp (102 KB, captura clara 2320x1522).
Zero biblioteca, zero framework, zero asset novo: só marcação e os tokens
que o :root da linha 7 já declarava.
⚠️ CONTRASTE — medido, não estimado. Sobre --bg-card #20150c:
--ink-title 15,52 · --ink-soft 13,09 · --ink-body 8,26 · --ink-mut 6,72
--gold-honey 10,76 · --gold-mid 7,28
Ficam FORA como cor de texto, por reprovarem: --ink-footer (2,43) e
--gold-dark (2,26). --gold-dark entra só como borda e fundo de tile, onde
não carrega texto.
⚠️ O CORTE NA BASE é intencional e replica a captura original: os cards
04, 05 e 06 não têm rodapé de contagem. A imagem terminava antes dele e
não existe fonte para esses números — derivar "20 prompts" da aritmética
seria dado inventado numa peça de publicidade médica.
========================================================================== */
.dash{
position:relative;overflow:hidden;
border-radius:clamp(12px,1.2vw,18px);
background:var(--bg-alt);
border:1px solid var(--line-20);
box-shadow:0 60px 140px -50px rgba(0,0,0,0.9),0 0 0 1px rgba(236,196,95,0.16),
0 0 70px -30px rgba(214,154,60,0.28);
font-family:var(--font-body);
container-type:inline-size;
}
/* véu que apaga a base, no lugar do corte seco da captura */
.dash::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:74px;
background:linear-gradient(180deg,transparent,rgba(10,8,6,0.92));
pointer-events:none;z-index:3;
}
.dash .di{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
/* ---------- chrome do navegador ---------- */
.dash-chrome{
display:flex;align-items:center;gap:14px;
padding:9px 14px;background:var(--bg-dark);
border-bottom:1px solid var(--line-12);
}
.dash-dots{display:flex;gap:6px}
.dash-dots i{width:9px;height:9px;border-radius:50%;background:var(--gold-dark);opacity:.75}
.dash-dots i:first-child{background:#8a3b2a;opacity:.9}
.dash-dots i:nth-child(2){background:#8a6a24;opacity:.9}
.dash-dots i:last-child{background:#2f6a45;opacity:.9}
.dash-url{
flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
font-family:var(--font-mono);font-size:10.5px;
color:var(--ink-mut);background:var(--bg);border:1px solid var(--line-12);
border-radius:var(--r-chip);padding:4px 12px;max-width:340px;margin:0 auto;
}
/* cadeado do sprite da própria página (#ic-lock), como na referência.
Nenhum SVG novo foi criado: o símbolo já existia. */
.dash-url .di{font-size:11px;color:var(--ink-dim)}
/* ---------- corpo ---------- */
.dash-body{display:grid;grid-template-columns:186px minmax(0,1fr);min-height:430px}
.dash-side{
padding:18px 14px;background:var(--bg-dark);
border-right:1px solid var(--line-12);
}
.dash-logo{font-family:var(--font-display);font-size:19px;letter-spacing:.01em;color:var(--ink-title)}
.dash-logo b{color:var(--gold-mid);font-weight:inherit}
.dash-navlbl{
margin:20px 0 9px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
text-transform:uppercase;color:var(--ink-dim);
}
.dash-nav{display:flex;flex-direction:column;gap:2px}
.dash-navi{
display:flex;align-items:center;gap:10px;padding:8px 10px;
border-radius:var(--r-sm);font-size:12.5px;color:var(--ink-body);
}
.dash-navi .di{font-size:15px;color:var(--ink-dim)}
.dash-navi.is-on{background:rgba(214,154,60,0.10);color:var(--ink-title);border:1px solid var(--line-20);padding:7px 9px}
.dash-navi.is-on .di{color:var(--gold-mid)}
.dash-badge{
margin-left:auto;font-family:var(--font-mono);font-size:9.5px;font-weight:400;
color:var(--gold-honey);background:rgba(214,154,60,0.12);
border:1px solid var(--line-20);border-radius:var(--r-chip);padding:1px 7px;
}
/* ---------- topo ---------- */
.dash-main{padding:16px 18px 0;min-width:0}
.dash-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.dash-crumb{font-size:12px;color:var(--ink-mut)}
.dash-tools{display:flex;align-items:center;gap:9px;margin-left:auto}
.dash-busca{
display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:11.5px;
color:var(--ink-mut);background:var(--bg);border:1px solid var(--line-15);
border-radius:var(--r-chip);
}
.dash-busca .di{font-size:13px}
.dash-busca b{
font-family:var(--font-mono);font-size:9px;font-weight:400;color:var(--ink-dim);
border-left:1px solid var(--line-15);padding-left:8px;
}
.dash-av,.dash-tema{
width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
font-size:11px;border:1px solid var(--line-20);
}
.dash-av{background:rgba(214,154,60,0.14);color:var(--gold-honey);font-weight:600}
.dash-tema{background:var(--bg);color:var(--ink-mut)}
.dash-tema .di{font-size:13px}
/* ---------- saudação e indicadores ---------- */
.dash-saud{
padding:20px 22px;border-radius:var(--r-lg);
background:linear-gradient(140deg,var(--bg-card),var(--bg-alt) 70%);
border:1px solid var(--line-15);
}
.dash-oi{margin:0;font-size:12.5px;color:var(--ink-mut)}
.dash-nome{
margin:2px 0 6px;font-family:var(--font-display);font-weight:700;
font-size:clamp(20px,2.4cqi,30px);line-height:1.08;color:var(--ink-title);
}
.dash-sub{margin:0;font-size:11.5px;color:var(--ink-body)}
.dash-kpis{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
margin-top:16px;padding-top:14px;border-top:1px solid var(--line-12);
}
.dash-kpi{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-right:12px}
.dash-kpi+.dash-kpi{border-left:1px solid var(--line-12);padding-left:16px}
.dash-kpi .di{font-size:19px;color:var(--gold-mid)}
.dash-kpi b{font-family:var(--font-display);font-size:20px;color:var(--ink-title);line-height:1}
.dash-kpi i{
flex-basis:100%;margin-left:28px;font-family:var(--font-mono);font-style:normal;
font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
}
/* ---------- bloco do kit ---------- */
.dash-sech{margin:22px 0 0;font-family:var(--font-display);font-size:17px;color:var(--ink-title)}
.dash-secm{margin:3px 0 14px;font-family:var(--font-mono);font-size:10px;color:var(--ink-dim)}
/* ---------- cards de categoria ---------- */
.dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:26px}
.dash-cat{
display:flex;flex-direction:column;padding:14px;
border-radius:var(--r-md);background:var(--bg-card);
border:1px solid var(--line-12);
}
.dash-cat-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.dash-tile{
width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
}
.dash-tile .di{font-size:18px}
.dash-ix{font-family:var(--font-mono);font-style:normal;font-size:9px;color:var(--ink-dim)}
.dash-cat-h{font-family:var(--font-display);font-size:14px;line-height:1.15;margin-bottom:5px}
.dash-cat-d{font-size:10.5px;line-height:1.45;color:var(--ink-body)}
.dash-cat-pe{
display:flex;align-items:baseline;gap:5px;margin-top:12px;padding-top:10px;
border-top:1px solid var(--line-12);font-size:10px;color:var(--ink-mut);
}
.dash-cat-pe b{font-family:var(--font-display);font-size:14px;color:var(--ink-soft)}
.dash-cat-pe em{margin-left:auto;font-family:var(--font-mono);font-style:normal;font-size:9px;color:var(--ink-dim)}
/* ==========================================================================
COR DOS CARDS · DOURADO ÚNICO (escolha do dono, 21/08)
As seis categorias compartilham o acento do projeto. A distinção é o
índice (01/10 … 06/10) e a posição na grade, não a cor.
Foi montada e descartada uma alternativa com as SEIS MATIZES da captura
original rebaixadas para fundo escuro (#D77E69, #7C96C8, #A28DC0,
#B1923C, #46A871, #D08447, todas medidas em ~6,0:1). A razão da recusa
está na referência de estilo: dentro do chrome do navegador ela é
monocromática dourada, e a cor aparece UMA vez na cena, nos packs
sobrepostos à base. Como o coverflow também vai para escuro e tem cores
próprias, um dashboard multicolorido faria a seção competir consigo
mesma.
⚠️ O GRADIENTE DO TILE É ESTREITO DE PROPÓSITO. A primeira tentativa foi
gold-deep → gold-dark com glifo claro, e ela REPROVOU: medido, o glifo
--champagne dava 5,71 na ponta escura mas 2,69 na ponta clara. Com um
gradiente daquela largura NENHUMA cor de glifo passa nas duas pontas
(--on-gold: 4,96 e 2,34; --bg-dark: 5,35 e 2,52). A correção não é trocar
o glifo, é estreitar o gradiente: gold-mid → gold-deep são ambos claros,
e aí o glifo ESCURO --on-gold passa nas duas pontas (7,54 e 4,96).
========================================================================== */
.dash-tile{
background:linear-gradient(140deg,var(--gold-mid),var(--gold-deep));
border:1px solid var(--line-28);color:var(--on-gold);
}
.dash-tile .di{stroke-width:1.8}
.dash-cat-h{color:var(--ink-title)}
/* ==========================================================================
RESPONSIVO
A peça é a MAQUETE de um app de computador, então ela não vira um app de
celular: a barra lateral continua existindo, encolhida para uma tira de
ícones, e a grade perde colunas. Assim continua legível como "a plataforma
no computador", em vez de encolher até o texto sumir, que era o defeito da
imagem que ela substitui.
Os cortes são em CONTAINER, não em viewport: o mockup vive dentro de um
.kit-shot de no máximo 1080px e precisa reagir à largura DELE.
========================================================================== */
@container (max-width:820px){
.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dash-body{grid-template-columns:164px minmax(0,1fr)}
}
@container (max-width:620px){
.dash-body{grid-template-columns:52px minmax(0,1fr)}
.dash-logo{font-size:0;text-align:center}
.dash-logo b{font-size:19px}
.dash-navlbl{display:none}
.dash-navi{justify-content:center;padding:9px 0;font-size:0;gap:0}
.dash-navi.is-on{padding:8px 0}
.dash-navi .di{font-size:17px}
.dash-badge{display:none}
.dash-side{padding:14px 6px}
.dash-main{padding:12px 12px 0}
.dash-busca b,.dash-crumb{display:none}
.dash-grid{grid-template-columns:minmax(0,1fr)}
.dash-kpis{grid-template-columns:minmax(0,1fr);gap:10px}
.dash-kpi+.dash-kpi{border-left:0;padding-left:0;border-top:1px solid var(--line-12);padding-top:10px}
}
@container (max-width:420px){
.dash-saud{padding:14px}
.dash-sub{display:none}
.dash-url{font-size:9px}
}
/* ==========================================================================
ETAPA 1 · GEOMETRIA DA CENA EM CAMADAS — SEM ACABAMENTO
Superfícies chapadas, contorno de 1px, tipografia no lugar. Nenhum
gradiente, brilho, sombra elaborada ou borda dupla: isso é a Etapa 2.
O objetivo aqui é validar posição, proporção e sobreposição antes de
gastar acabamento sobre uma geometria errada.
========================================================================== */
/* ---------- a cena: satélite | centro | satélite ----------
Alarga por margem negativa simétrica, NUNCA por transform: o elemento
carrega data-reveal e o motor de entrada anima transform nele.
Sem padding lateral: box-sizing:border-box faria o padding subtrair do
width e encolher o centro. */
.cena{
/* ⚠️ O vão de 80px separava. Na referência os satélites quase tocam o
mockup e é por isso que a seta é curta: a distância é curta. Com 20px a
cena encolhe de 1360 para 1240 e as peças passam a se tocar em vez de
ficarem alinhadas com respiro entre elas. */
--cena-w:min(1240px, calc(100vw - 48px));
--sat-w:180px;
--gap:20px;
width:var(--cena-w);
margin-inline:calc((100% - var(--cena-w)) / 2);
margin-top:clamp(28px,4vh,52px);
display:grid;
grid-template-columns:var(--sat-w) var(--gap) minmax(0,1fr) var(--gap) var(--sat-w);
align-items:center;
}
.cena-centro{grid-column:3;position:relative;z-index:2}
/* o mockup perde o alargamento próprio: quem alarga agora é a cena */
.cena .kit-shot{width:100%;max-width:none;margin:0}
/* O mockup é CORTADO no desktop, e é o painel que faz o corte.
Sem isso sobrava uma faixa da base do dashboard visível ENTRE o painel e o
leque, e a oclusão ficava pela metade. O corte também é o que centra os
satélites: com o mockup em 520px, o meio da linha do grid cai praticamente
na linha dos indicadores, que é onde a referência ancora os satélites e as
setas. Os dois problemas têm a mesma causa e a mesma correção. */
.cena .dash{max-height:520px}
.cena .dash::after{display:none} /* o véu não tem função sob o painel */
/* ---------- satélites ---------- */
.sat{
position:relative;z-index:1;
padding:26px 18px 20px;
background:var(--bg-card);
border:1px solid var(--line-20);
border-radius:var(--r-lg);
}
.sat--esq{grid-column:1}
.sat--dir{grid-column:5}
.sat-h{
margin:14px 0 8px;font-family:var(--font-display);font-size:17px;
line-height:1.15;color:var(--ink-title);
}
.sat-d{margin:0;font-size:12px;line-height:1.5;color:var(--ink-body)}
/* ---------- selos ---------- */
.selo{
display:inline-block;padding:4px 12px;
font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
text-transform:uppercase;color:var(--label-gold);
background:var(--bg-alt);border:1px solid var(--line-25);
border-radius:var(--r-chip);
}
/* o selo do painel cavalga a borda superior: metade dentro, metade fora */
.selo--painel{
position:absolute;top:0;left:50%;margin-left:-52px;
transform:none; /* posicionado por margin, não por transform */
translate:0 -50%;
z-index:3;
}
/* ---------- medalhões ---------- */
.med{
display:grid;place-items:center;
width:56px;height:56px;border-radius:50%;
background:var(--bg-alt);border:1px solid var(--line-25);
color:var(--gold-mid);
}
.med .ic{width:26px;height:26px}
.med--lg{width:76px;height:76px}
.med--lg .ic{width:34px;height:34px}
/* ---------- setas apontando para o centro ----------
Curtas e dentro do vão. A primeira versão usava width:100% e virava uma
linha reta atravessando a cena por baixo do mockup, lendo como divisória.
A ponta é um triângulo por borda, sem SVG novo. */
.seta{
grid-row:1;align-self:center;
position:relative;width:16px;height:1px;
border-top:1px dashed var(--line-30);
}
.seta::after{
content:"";position:absolute;top:-4px;
border:4px solid transparent;
}
.seta--esq{grid-column:2;justify-self:center;margin-left:0}
.seta--esq::after{right:-4px;border-left-color:var(--line-45)}
.seta--dir{grid-column:4;justify-self:center;margin-right:0}
.seta--dir::after{left:-4px;border-right-color:var(--line-45)}
/* ---------- painel do Bônus 1 ----------
OCLUI a base do mockup. A oclusão é por elemento sólido, e o topo do
painel cai logo depois da linha de indicadores do dashboard. O valor
negativo é medido, não estimado: ver o relatório da Etapa 1. */
.painel{
position:relative;z-index:2;
/* ⚠️ o negativo é relativo ao FIM do mockup, não ao topo. Quando o mockup
passou a ser cortado em 520px, o -372 original subiu o painel junto e ele
engoliu os indicadores. Com 520 de mockup, -144 recoloca o topo do painel
em 376px do topo do dashboard, logo depois da linha de indicadores. */
margin:-144px auto 0;
/* ⚠️ HIERARQUIA DE LARGURAS DA CENA — a ordem importa e ela é:
painel < leque < mockup
Cada camada é coberta pela seguinte, e o mockup é a única que sobra
visível dos dois lados. Do painel só se vê a FAIXA DE CIMA, com selo,
medalhão e texto: as laterais e a base somem atrás dos cards.
Estava invertido — o painel a 1014 era mais largo que o leque a 920, os
cards ficavam contidos dentro dele e a cena não fechava.
⚠️ MEDIR SEMPRE O LEQUE VISÍVEL, não a extensão bruta dos cards. O
translateZ do coverflow recua os vizinhos e a perspectiva os encolhe: a
extensão bruta dá 1311px e o leque visível, 745px na variante A. Foi a
medição bruta que levou à conclusão errada de que o leque já era o mais
largo dos três.
⚠️ AS TRÊS LARGURAS FICAM PRÓXIMAS, com dezenas de pixels entre elas, e
não centenas. "Painel menor que o leque" não significa MUITO menor: numa
primeira tentativa o painel caiu para 660 e o mockup teve de encolher de
1070 para 780 para não expor o dashboard nas laterais — a cena perdeu a
presença que o mockup largo dava. A conta certa é por CIMA: o painel fica
próximo do interior do mockup e quem cresce é o leque. */
width:min(1006px, calc(100% - 56px));
/* ⚠️ Estes valores existem para o painel ULTRAPASSAR a base do mockup.
Antes ele tinha 142px e terminava 2px ANTES dela, então o bloco
"mockup + painel" tinha a mesma altura do mockup sozinho, e centrar os
satélites em um ou em outro dava o mesmo resultado — desvio ZERO,
medido. Não havia o que recentrar: o que faltava era o painel descer.
Com mais respiro ele passa da base, o bloco cresce, e os satélites
acompanham sozinhos pelo align-items:center. */
padding:48px 34px 44px;
display:flex;align-items:center;gap:24px;
background:var(--bg-card);
border:1px solid var(--line-25);
border-radius:var(--r-lg);
}
.painel-txt{min-width:0}
.painel-h{
margin:0 0 6px;font-family:var(--font-display);font-size:26px;
line-height:1.1;color:var(--ink-title);
}
.painel-d{margin:0;font-size:13px;line-height:1.5;color:var(--ink-body);max-width:52ch}
/* ---------- leque de packs: ocluí a base do painel ---------- */
.bonus-section .cfw{
position:relative;z-index:3;
margin-top:-84px;
}
/* ---------- faixa de chips: encaixada sob o leque ----------
⚠️ margin-top ZERO, não negativo. Com o arco do leque (LIFT no main.js) os
cards laterais DESCEM 30px em relação ao central, e o -34px original
passou a deixar o card mais baixo cobrindo os chips em 33px — medido.
Subir mais o leque não resolveria: ele passaria a cobrir o título do
painel. Quem cede é a faixa. O encaixe continua, agora encostado na base
do card mais baixo em vez de por baixo dele.
⚠️ margin-top fica em 2px, não em 30: na referência os chips formam faixa
CONTÍNUA com o leque, sem vão. Os 2px são só a folga mínima que evita a
colisão medida com o card mais baixo do arco. */
.chips{
position:relative;z-index:2;
margin:2px auto 0;
width:min(760px, calc(100% - 32px));
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
/* superfície CONTÍNUA, não tabela. A versão com gap:1px sobre um fundo de
linha desenhava divisórias verticais e a faixa lia como quatro células. */
background:var(--bg-card);
border:1px solid var(--line-20);
border-radius:var(--r-md);
padding:4px;
}
.chip{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:12px 16px;
}
.chip i{display:grid;place-items:center;color:var(--gold-mid);flex:none}
.chip .ic{width:19px;height:19px}
.chip b{font-family:var(--font-display);font-size:15px;color:var(--ink-title);line-height:1.1}
.chip em{
flex-basis:100%;margin-left:29px;font-style:normal;
font-size:11px;color:var(--ink-mut);line-height:1.2;
}
/* ---------- linha do cadeado, abaixo do CTA ---------- */
.acesso{
display:flex;align-items:center;justify-content:center;gap:8px;
margin:14px 0 0;font-size:12px;color:var(--ink-mut);
}
.acesso .ic{width:14px;height:14px;color:var(--ink-dim)}
/* ---------- correções de geometria, ainda sem acabamento ---------- */
/* A dica do coverflow FICA: o leque continua interativo e sem ela ninguém
descobre que arrasta. Ela colidia com os chips porque vinha DENTRO do .cfw,
no fim dele, e os chips sobem 34px justamente sobre essa faixa. Mexer em
z-index não resolveria: o lugar dela no fluxo é que estava errado. Foi
movida no HTML para depois dos chips, e aqui só ganha o respiro.
Não é referenciada pelo main.js, então mover é seguro. */
.bonus-section .cf-hint{
margin:16px 0 0;
font-size:10px;letter-spacing:.14em;color:var(--ink-dim);
}
/* Quebras iguais às da referência.
O H2 quebra depois de EXCLUSIVOS por MEDIDA (22ch). Funciona e continua
fluido, mas é frágil: depende da fonte carregar. Se a quebra escapar,
trocar por
com a mesma mecânica do lede abaixo.
O lede quebra depois de "sem custo adicional." por
EXPLÍCITO, porque
calibrar por max-width não segura a quebra exata: testei de 42ch a 56ch e
todas davam duas linhas com a quebra no lugar errado. O
some no
celular, onde a frase precisa fluir. */
.bonus-title{max-width:22ch;margin-inline:auto}
.bonus-lede{max-width:56ch}
@media (max-width:880px){ .q-lede{display:none} }
/* ==========================================================================
ETAPA 2 · ACABAMENTO DA CENA
Entra sobre a geometria já aprovada. Todos os valores saem dos tokens do
:root; nenhum hex novo foi inventado.
========================================================================== */
/* ---------- 1. VINHETA DE FUNDO ----------
⚠️ ITEM DE MAIOR RISCO desta camada, e por precedente registrado.
A .bonus-section já teve um radial próprio (linha ~657) e ele foi ANULADO
na ~5177 com a razão anotada: "era a EMENDA reta visível acima da
comunidade". Aplicar o radial na SEÇÃO faz o gradiente chegar às bordas
dela, e o corte com a seção seguinte aparece como uma linha reta.
A saída aqui é a que eu mesmo registrei como caminho seguro: prender o
brilho a um elemento de LARGURA DEFINIDA, e não à seção. O ::before mora
na .cena, que tem 1360px e margem para os lados, então o gradiente morre
dentro do próprio bloco e nunca encosta na borda da seção. Não há emenda
possível porque não há aresta compartilhada.
A .bonus-section continua com background:none. Não mexer nisso. */
.cena{position:relative}
.cena::before{
content:"";position:absolute;z-index:0;pointer-events:none;
left:50%;top:50%;translate:-50% -50%;
width:132%;height:190%;
background:radial-gradient(ellipse at 50% 42%,
rgba(214,154,60,0.13) 0%,
rgba(181,119,30,0.06) 38%,
transparent 68%);
}
.cena > *{position:relative;z-index:1}
/* ---------- 2. BORDA LUMINOSA DO CENTRO ----------
Luz implícita vindo de cima: a borda superior fica mais clara que a
inferior. Isso não se faz com `border`, que é uniforme nos quatro lados.
Faz-se com um gradiente na moldura, por ::before de 1px. */
.cena .dash{
border-color:transparent;
box-shadow:
0 60px 140px -50px rgba(0,0,0,0.9),
0 0 90px -20px rgba(214,154,60,0.32);
}
.cena .kit-shot{position:relative}
.cena .kit-shot::after{
content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
border-radius:clamp(12px,1.2vw,18px);
padding:1px;
background:linear-gradient(180deg,
var(--gold-honey) 0%,
var(--gold-mid) 22%,
var(--line-30) 62%,
var(--line-15) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
}
/* ---------- painel: mesma linguagem, um passo abaixo do mockup ---------- */
/* ⚠️ O painel usa o MESMO tratamento de borda e halo do mockup, não um
grau abaixo. Com --gold-mid no topo e halo em 0.26 ele se dissolvia no
mockup atrás e a cena perdia a leitura de camada sobreposta. Agora:
--gold-honey no topo e halo em 0.32, idênticos aos do .kit-shot::after.
A hierarquia da cena continua existindo, mas ela mora nos SATÉLITES
(--line-12 e halo 0.10), não em rebaixar o painel — que é centro, não
periferia. */
.painel{
border-color:transparent;
background:linear-gradient(160deg,var(--bg-card),var(--bg-alt) 70%);
box-shadow:
0 40px 90px -40px rgba(0,0,0,0.85),
0 0 90px -20px rgba(214,154,60,0.32);
}
.painel::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
border-radius:var(--r-lg);padding:1px;
background:linear-gradient(180deg,
var(--gold-honey) 0%,
var(--gold-mid) 22%,
var(--line-30) 62%,
var(--line-15) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
}
/* ⚠️ NÃO usar `.painel > *` aqui. O selo é filho direto e tem
position:absolute; uma regra `> *` com position:relative tem a MESMA
especificidade e, vindo depois, derruba o absolute — o selo cai para
dentro do painel e senta em cima do título. Alvo explícito nos dois
filhos que precisam subir sobre o ::before, e só neles. */
.painel > .med,
.painel > .painel-txt{position:relative;z-index:1}
/* ---------- 3. HIERARQUIA DE PROFUNDIDADE ----------
Os satélites precisam ler como RECUADOS, não como iguais menores. O recuo
é feito por quatro coisas somadas, e nenhuma delas é opacity no bloco
inteiro: baixar a opacidade do card apagaria o texto junto e derrubaria o
contraste, que precisa continuar passando.
superfície --bg-alt em vez de --bg-card (mais escura que o centro)
contorno --line-12 em vez de --line-25 (metade da presença)
halo rgba(214,154,60,0.10) contra 0.32 do mockup
escala 0.965 (recuo óptico)
O texto fica intacto: título em --ink-soft e corpo em --ink-body, ambos
medidos sobre --bg-alt na tabela de contraste abaixo. */
.sat{
background:var(--bg-alt);
border-color:var(--line-12);
box-shadow:0 24px 60px -34px rgba(0,0,0,0.8),
0 0 44px -22px rgba(214,154,60,0.10);
scale:0.965;
}
.sat-h{color:var(--ink-soft)}
.sat-d{color:var(--ink-body)}
/* ---------- 4. MEDALHÕES ---------- */
.med{
background:radial-gradient(120% 120% at 50% 12%,
rgba(214,154,60,0.16),rgba(24,15,8,0.9) 68%);
border:1px solid var(--line-25);
color:var(--gold-honey);
box-shadow:inset 0 1px 0 var(--line-30);
}
.med--lg{
border-color:var(--line-40);
color:var(--champagne);
box-shadow:inset 0 1px 0 var(--line-45),
0 0 34px -12px rgba(214,154,60,0.45);
}
/* o medalhão do satélite também recua */
.sat .med{border-color:var(--line-15);color:var(--gold-mid);box-shadow:none}
/* ---------- 5. SETAS ---------- */
.seta{border-top-color:var(--line-30)}
.seta--esq::after{border-left-color:var(--gold-mid)}
.seta--dir::after{border-right-color:var(--gold-mid)}
/* ---------- 6. SELOS, com o tratamento do selo do cabeçalho ----------
O selo do cabeçalho usa canto chanfrado por clip-path, mono, 0.22em de
entreletra e --label-gold. Os selos da cena herdam a mesma gramática, em
escala menor, para a página não passar a ter dois tipos de rótulo. */
.selo{
border-radius:0;
--cut:8px;
clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
letter-spacing:.22em;
border-color:var(--line-40);
background:var(--bg-dark);
}
.selo--painel{
border-color:var(--line-45);
color:var(--champagne);
box-shadow:0 0 26px -8px rgba(214,154,60,0.5);
}
.sat .selo{border-color:var(--line-20);color:var(--label-gold)}
/* ---------- selo do CABEÇALHO: texto novo + glifos ----------
A referência traz glifos decorativos dos dois lados. O sprite não tem
equivalente, e a orientação foi usar caractere tipográfico em vez de criar
SVG: ✦ (U+2726) e ◇ (U+25C7), que o mono do projeto desenha. Entram por
::before/::after, então NÃO vão para o fluxo de texto nem são lidos por
leitor de tela — são ornamento, não conteúdo. */
.bonus-eyebrow span{display:inline-flex;align-items:center;gap:10px}
.bonus-eyebrow span::before{content:"\2726";font-size:9px;opacity:.85}
.bonus-eyebrow span::after{content:"\25C7";font-size:8px;opacity:.85}
/* ---------- 7. FAIXA DE CHIPS ---------- */
.chips{
background:linear-gradient(180deg,var(--bg-card),var(--bg-alt));
border-color:var(--line-20);
box-shadow:0 24px 60px -40px rgba(0,0,0,0.9),
inset 0 1px 0 var(--line-12);
}
.chip i{color:var(--gold-mid)}
.chip b{color:var(--ink-title)}
/* ==========================================================================
ETAPA 3 · REFLOW M2 — "FAIXA COMPACTA"
Os satélites deixam de ser cards verticais e viram LINHAS horizontais:
medalhão à esquerda, texto à direita. Mesma informação, muito menos
altura, porque a largura do celular passa a ser aproveitada.
========================================================================== */
@media (max-width:880px){
.cena{
--cena-w:100%;
width:100%;margin-inline:0;
display:flex;flex-direction:column;gap:10px;
}
.cena-centro{order:1}
.sat--esq{order:2}
.sat--dir{order:3}
.seta{display:none}
/* satélite vira linha: medalhão fixo à esquerda, texto fluindo à direita */
.sat{
scale:1;
display:grid;grid-template-columns:auto minmax(0,1fr);
grid-template-areas:"selo selo" "med tit" "med txt";
grid-template-rows:auto auto auto;
gap:6px 14px;align-items:start;
padding:16px 16px 18px;
}
.sat .selo{grid-area:selo;justify-self:start}
.sat .med{grid-area:med;width:44px;height:44px;margin-top:4px}
.sat .med .ic{width:21px;height:21px}
.sat-h{grid-area:tit;margin:0;font-size:16px}
.sat-d{grid-area:txt;margin:4px 0 0;font-size:12px}
/* o mockup encolhe e o painel continua ocluindo */
.cena .dash{max-height:352px}
.painel{
margin:-96px auto 0;width:calc(100% - 24px);
padding:24px 20px 22px;
flex-direction:column;align-items:flex-start;gap:12px;
}
.painel-h{font-size:21px}
.painel-d{font-size:12.5px}
.med--lg{width:52px;height:52px}
.med--lg .ic{width:24px;height:24px}
/* chips numa faixa de 2x2 mais baixa */
.chips{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-top:16px}
.chip{padding:10px 14px}
/* ⚠️ O leque sobe -84px do desktop. No celular, com a cena empilhada, esse
valor faz os cards cobrirem o satélite 3. A subida é proporcional ao
painel no desktop; aqui não há painel logo acima, há um card de bônus. */
.bonus-section .cfw{margin-top:10px}
/* ⚠️ OS INDICADORES VOLTAM PARA UMA LINHA no celular.
A regra de container do mockup empilha os três KPIs em coluna abaixo de
620px, e isso empurra o fim dos indicadores para 364px — depois do ponto
onde o painel entra (256px). Resultado: o painel cortava os indicadores
no meio, que é exatamente o que a composição não pode fazer, porque eles
são o último conteúdo que precisa ficar visível. Em linha, terminam bem
antes e o painel volta a ocluir DEPOIS deles. Economiza altura de quebra. */
.cena .dash-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.cena .dash-kpi{padding-right:6px}
.cena .dash-kpi+.dash-kpi{border-left:1px solid var(--line-12);border-top:0;padding-left:8px;padding-top:0}
.cena .dash-kpi .di{font-size:15px}
.cena .dash-kpi b{font-size:16px}
.cena .dash-kpi i{margin-left:0;flex-basis:100%;font-size:7.5px}
.cena .dash-sub{display:none}
/* com os KPIs em linha o mockup pode encolher e o painel entra depois deles */
.cena .dash{max-height:296px}
/* -46 e nao -84: com o mockup em 296 e os indicadores terminando em 232,
o -84 punha o topo do painel em 212 e ainda cortava os indicadores por
20px. O negativo se mede a partir do FIM do mockup, nunca do topo. */
.painel{margin-top:-46px}
/* leque um pouco menor no celular, para a seção não passar de duas telas */
.bonus-section .cfw{--cfcw:min(52vw,178px)}
}
/* ==========================================================================
ETAPA 4b · CARDS DO LEQUE — TOM QUENTE, FORMA MAIS FECHADA E BANDEJA
Ajustes sobre a P1 (packs claros), aprovada.
========================================================================== */
/* ---------- 1. TOM QUENTE, no lugar do branco puro ----------
O gradiente é o MESMO que o .depo-box já usa (#faf6ee → #f2ece0), o
off-white quente do projeto. Não é valor novo: é o padrão de casa para
superfície clara, e por isso os cards passam a conviver com o dourado em
vez de brigar com ele.
⚠️ AS DEZ CORES FORAM RECALIBRADAS, e não por preciosismo. As da camada
de 20/08 foram calibradas contra BRANCO PURO e ficaram no limite, de
4,56:1 a 4,70:1. Medidas contra o novo tom, TODAS AS DEZ REPROVAM, caindo
para 3,94 a 4,05 — o piso escurece e a conta muda. As de baixo miram
4,80:1 contra o ponto MAIS ESCURO do card (base do gradiente + véu de
--pc 12%), com folga deliberada sobre o AA para não repetir o erro de
ficar no limite. */
.cf-face{
/* ⚠️ --lt-ink-3 TAMBÉM precisou descer, de #75684f para #695E47.
O valor antigo media 4,64:1 contra a base do gradiente e eu quase o dei
por aprovado assim — mas a superfície REAL do card não é a base, é a base
COM o véu de --pc 12% por cima. Medido no DOM renderizado, a .cf-meta
caía para 4,01:1 na Cardiologia, que tem o véu mais escuro dos dez.
O novo valor mira 4,70 no pior caso e dá 4,71 a 5,04 nos dez.
É o mesmo erro de método que esta camada já documenta duas vezes:
medir contra a superfície nominal em vez da superfície pintada. */
--lt-ink-3:#695E47;
background:
radial-gradient(122% 88% at 12% 0%,color-mix(in srgb,var(--pc) 12%,transparent),transparent 62%),
linear-gradient(180deg,#faf6ee,#f2ece0);
}
.cf-card[data-i="0"]{--pc-ink:#174EE8} /* Clínica Médica 4,80:1 */
.cf-card[data-i="1"]{--pc-ink:#1E6F3C} /* Pediatria 4,81:1 */
.cf-card[data-i="2"]{--pc-ink:#B62121} /* Cardiologia 4,80:1 */
.cf-card[data-i="3"]{--pc-ink:#AE2368} /* Gineco e Obst. 4,81:1 */
.cf-card[data-i="4"]{--pc-ink:#146D50} /* Med. da Família 4,82:1 */
.cf-card[data-i="5"]{--pc-ink:#994A13} /* Ortopedia 4,80:1 */
.cf-card[data-i="6"]{--pc-ink:#6A37E0} /* Radiologia 4,81:1 */
.cf-card[data-i="7"]{--pc-ink:#1F6B75} /* Anestesiologia 4,81:1 */
.cf-card[data-i="8"]{--pc-ink:#8322DF} /* Psiquiatria 4,80:1 */
.cf-card[data-i="9"]{--pc-ink:#845A12} /* Dermatologia 4,80:1 */
/* ---------- 2. FORMA MAIS FECHADA ----------
⚠️ A proporção NÃO foi fechada baixando a altura, e a razão está no
comentário da camada de 20/08: existe um PISO de 273px porque abaixo dele
o verso do card vaza (medido: Clínica Médica vazava 31px a 227px de
altura). Com o piso ativo, reduzir o multiplicador não faria efeito nenhum
em telas grandes — o piso seguraria — e nas menores traria o vazamento de
volta.
A saída é a inversa: o card fica mais quadrado ficando mais LARGO. A
altura permanece na casa dos 273px, o verso continua cabendo com folga a
mais, e a proporção cai de 1,30 para 1,12. */
.cfw{--cfcw:clamp(200px,17vw,248px)}
@media (min-width:760.05px){
.cf-stage,.cf-card{height:max(calc(var(--cfcw) * 1.12),273px)}
}
/* raio menor: os cantos muito arredondados eram --r-card (24px) */
.cf-face{border-radius:14px}
/* ---------- 3. SEM BANDEJA: TRÊS CAMADAS QUE SE CORTAM ----------
⚠️ A primeira tentativa foi uma BANDEJA: uma caixa escura com borda
própria atrás do leque. Estava errada, e o sintoma era visível — a borda
de topo dela desenhava uma linha horizontal logo abaixo do texto do
painel, linha que não existe na referência.
Na referência não há superfície nova. O que existe é uma pilha em que
cada camada corta a anterior:
mockup tem a base ocluída pelo painel
painel tem a base ocluída pelo leque
leque fica por cima, sem nada cortando
O painel apenas DESCE mais, e a borda inferior dele nunca aparece porque
está atrás dos cards. Por isso o padding-bottom é grande e assimétrico:
ele não é respiro tipográfico, é comprimento de camada a ser cortado. */
.painel{padding-bottom:132px}
/* a moldura do painel já morre para baixo (--line-15 no fim do gradiente),
então a base dele não desenha linha nenhuma sob os cards */
.bonus-section .cf-frame{position:relative;z-index:1}
.bonus-section .cf-nav{z-index:2}
/* o leque sobe mais: com -84 sobravam 93px de painel VAZIO entre o fim do
texto e o card mais alto, e o corte perdia a força. Com -130 o vão cai
para ~47px e o leque passa a cortar 87px do painel. */
.bonus-section .cfw{margin-top:-130px}
@media (max-width:880px){
.painel{padding-bottom:104px}
}
/* --- VARIANTE A: card 230 - sobreposicao forte --- */
/* ⚠️ O mockup encolhe de 1070 para 780. Com o painel a 660 e o mockup a
1070, sobravam 162px de dashboard visível de CADA lado do painel, e nessa
faixa aparecia conteúdo cortado da grade de categorias ("…latórios",
"03/10"). A correção NÃO é encolher o mockup: é aproximar as três larguras
por cima, com o painel perto do interior do mockup e o leque crescendo. */
.cena{--cena-w:min(1400px, calc(100vw - 40px));--sat-w:165px;--gap:0px}
.cfw{--cfcw:clamp(180px,17vw,230px)}
@media (min-width:760.05px){
/* piso de altura MEDIDO, nao herdado: o verso precisa de 253 a 258px na
faixa de 200 a 245 de largura. O piso de 273 era conservador. */
.cf-stage,.cf-card{height:max(calc(var(--cfcw) * 1.12),258px)}
}
.seta{display:none}
/* ==========================================================================
REVERSAO 22/08 — a cena remedida contra a referencia
==========================================================================
Duas decisoes registradas acima sao REVOGADAS aqui, de proposito, e as
antigas ficam legiveis logo antes para o historico nao sumir.
⚠️ REVERSAO 1 — A HIERARQUIA DE LARGURAS INVERTE NA PONTA DE CIMA.
O comentario grande da `.painel` (acima) declara `painel < leque < mockup`
e diz que o mockup e a unica camada que sobra visivel dos dois lados.
NAO E MAIS. A ordem passa a ser:
painel < mockup < leque
820 876 945
Agora e o LEQUE que sobra por fora, cobrindo o mockup nas duas pontas em
34,5px de cada lado. O mockup deixa de ser a moldura da cena e vira camada
coberta. O painel continua sendo o mais estreito e continua so mostrando a
faixa de cima.
⚠️ REVERSAO 2 — CINCO CARDS SEM SOBREPOSICAO CAI.
O comentario dentro de `pintar()` no main.js registra "o dono nao quer card
cortado na ponta" e, a partir disso, cards separados por vao POSITIVO
(GAP 0.12). O que o dono nao quer continua sendo CORTE na ponta, e isso e
mantido: seguem CINCO cards, seguem inteiros, nenhum recortado. O que cai e
a exigencia de NAO se sobreporem. Os cards passam a se cobrir, e e essa
sobreposicao que encolhe o leque visivel de 1055 para 945 sem encostar em
`--cfcw`.
⚠️ `--cfcw` FICA EM 230 E NAO E NEGOCIAVEL. Encolher o card reabre a altura
do verso, que ja fechou em 258 (ver o piso medido logo acima). Toda a
reducao do leque sai de sobreposicao, nenhuma de largura de card.
O ORCAMENTO HORIZONTAL, e ele fecha exato:
2 x 200 (satelite) + 2 x 62 (vao) + 876 (mockup) = 1400
O mockup NAO e declarado: e a pista central `minmax(0,1fr)` do grid, logo
ele e o resto da conta. Mexer em --sat-w ou --gap tira do mockup 2x.
PROPORCAO CONTRA A REFERENCIA:
satelite 200 = 14,3% da cena referencia 14,5%
vao 62 = 4,4% referencia 4,5%
mockup 876 = 62,6% referencia 61,4%
leque 945 = 67,5% referencia 67,5% */
.cena{--sat-w:200px;--gap:62px}
/* ==========================================================================
AUDITORIA 22/08 — itens E, C, B, A, G aplicados nesta ordem
==========================================================================
A ordem nao e estetica, e de dependencia: cada item muda a medida do
seguinte. E (entrelinha) muda a altura de todo bloco de texto; C (piso do
titulo) depende da entrelinha nova; B depende da altura da primeira linha;
A e geometria de glifo; G e a calibracao final contra as alturas ja
fechadas. O item D foi CANCELADO pelo dono. */
/* ---------- E · entrelinha 1,5 unificada e margin-bottom proporcional ----
MEDIDO: das tres descricoes da cena, duas ja estavam em 1,5 e uma nao:
.painel-d 13px x 1,5 = 19,5 ok
.sat-d 12px x 1,5 = 18 ok
.dash-cat-d 10,5px x 1,45 = 15,22 <-- a fora da regra
Entao E nao e "unificar tudo", e corrigir UMA. O resto da unificacao ja
tinha acontecido antes e afirmar que as tres estavam soltas seria repetir
uma medicao velha.
MARGIN-BOTTOM PROPORCIONAL, e a definicao importa: proporcional ao CORPO
do titulo (0,5em), arredondado ao passo da escala de base 8 do item G.
Sem o arredondamento, E e G brigam: 0,5em daria 8,5 e 13, que nao estao
na escala, e G viria depois e sobrescreveria. Com ele, os dois itens
dizem a mesma coisa.
.sat-h 17px -> 0,5em = 8,5 -> passo 8
.painel-h 26px -> 0,5em = 13 -> passo 16
Era 8 e 6: o titulo MAIOR tinha o respiro MENOR, que e o avesso da regra. */
.dash-cat-d{line-height:1.5}
.painel-h{margin-bottom:16px}
/* ---------- C · piso de duas linhas no titulo do satelite ----------------
MEDIDO, por offsetTop e nunca por rect, com o satelite em 200:
Bonus 2 titulo 1 linha (20px) descricao comeca em 151
Bonus 3 titulo 2 linhas (39px) descricao comeca em 170
19px de descompasso entre dois cards irmaos, e a causa e so a contagem de
linhas do titulo. O piso reserva as duas linhas sempre, e as descricoes
passam a partir do mesmo y.
2,3em = 2 linhas x 1,15 de entrelinha. Em `em`, entao acompanha o corpo se
ele mudar; um valor em px voltaria a descolar.
⚠️ SO NO DESKTOP, e a media query nao e decoracao. C existe para alinhar
DOIS satelites LADO A LADO: reservar duas linhas faz a descricao de ambos
comecar no mesmo y. No celular eles empilham em coluna unica e nao ha nada
com que alinhar — o piso vira 19px de ar morto em cada card, por card.
Sem esta media query a regra ainda VENCE a do celular (linha ~7389), que
vem antes no arquivo, e injeta piso e margin-top nos dois satelites
empilhados. Medido: custava 81px em 360 e levava a secao de 2,127 para
2,229 telas, estourando o teto de 2,2. */
@media (min-width:760.05px){
.sat-h{min-height:2.3em;margin-top:16px}
}
/* ---------- B · unificacao pela primeira linha --------------------------
⚠️ B FECHA NOS CHIPS, e a regra de encerramento e do proprio dono: se o
satelite EMPILHA o medalhao acima do titulo, B termina ali. Medido, ele
empilha (`.sat` e fluxo de bloco: selo, medalhao, titulo, descricao), e um
medalhao empilhado nao esta alinhado a linha nenhuma — nao ha duas
gramaticas para unificar, ha uma so.
Os chips ja medem delta ZERO contra o centro da primeira linha, nos
quatro. Nada a aplicar. Nenhuma declaracao aqui, de proposito.
REGISTRADO, FORA DE ESCOPO: o `.painel` NAO empilha (e flex com
align-items:center) e alinha o medalhao pelo bloco inteiro, com delta
MEDIDO de 22,5px contra o centro da primeira linha do titulo. E o mesmo
defeito que B descreve, num terceiro caso que o handoff nao nomeou. Nao
foi corrigido porque o escopo de B foi fechado nos chips pelo dono. */
/* ---------- A · centragem optica dos glifos -----------------------------
Metodo: cada simbolo do sprite usado na cena foi RASTERIZADO a 128px e o
centro de massa saiu da media das posicoes ponderada pelo alfa. Nao e o
centro da caixa: e onde o peso do desenho realmente esta. Limiar de 3%.
⚠️ O `ic-gift` NAO E O CASO. O handoff o aponta como "o caso obvio,
lacada em cima e caixa embaixo". Medido, ele da -0,73% e PASSA folgado: a
lacada e leve e vazada, a caixa e larga mas de contorno fino, e os dois
pesos se equilibram. A intuicao estava errada e a medicao desmente.
Os dois que estouram os 3% sao outros:
ic-lock +5,09% massa ABAIXO do centro (o corpo do cadeado pesa
mais que a alca, que e so um arco vazado)
ic-brain -3,49% massa ACIMA (as circunvolucoes ficam no topo e a
base do desenho e quase vazia)
Os outros seis medidos: ic-chat -2,71 · ic-escudo -1,81 · ic-shield -1,59
· ic-gift -0,73 · ic-bolt -0,20 · ic-stack 0,00. Todos passam.
A compensacao pertence ao GLIFO, nao a instancia: onde ele aparecer na
cena, aparece corrigido. Por isso o seletor casa o `use`, e nao o lugar.
Percentual, nao px: em translate a porcentagem e da propria caixa do
elemento, entao a correcao acompanha os tamanhos (26px no medalhao,
~15px na linha do cadeado, 11px na barra de endereco do mockup). */
.bonus-section svg:has(use[href="#ic-lock"]){transform:translateY(-5.09%)}
.bonus-section svg:has(use[href="#ic-brain"]){transform:translateY(3.49%)}
/* ---------- G · escala de espacamento, base 8 --------------------------
Escala: 8 / 16 / 24 / 32 / 48. Base 8 e nao 16, por decisao do dono: uma
escala com piso em 16 nao serve a uma cena que precisa de relacoes abaixo
disso (o titulo->descricao do satelite e 8).
Aplicada POR ULTIMO, contra as alturas ja fechadas por E e C, porque cada
um deles mexeu na altura dos blocos e medir antes seria medir duas vezes.
MEDIDO DEPOIS DE E E C, e o que mudou:
eyebrow -> titulo 20 -> 16
titulo -> lede 35 -> 32
lede -> cena 40 -> 32
selo -> medalhao 0 ja on-scale (zero e valido)
medalhao-> titulo 16 ja on-scale (veio do margin-top de C)
titulo -> descricao 8 ja on-scale
painel-h-> painel-d 16 ja on-scale (veio de E)
chips -> dica 16 ja on-scale
dica -> botao 30 -> 32
botao -> acesso 14 -> 16
⚠️ DUAS EXCECOES, e as duas sao MEDIDAS, nao concessoes.
1. `.chips{margin-top:2px}` FICA EM 2 E ESTA CERTO. O valor de CAIXA esta
fora da escala de proposito: o leque nao chega a base da propria .cfw,
sobra ~6px de caixa vazia embaixo do card mais baixo. Medido, o vao
OPTICO entre a base do leque e o topo dos chips e 8,2px — ou seja, ja
cai no primeiro passo da escala. Subir a caixa para 8 levaria o optico
a 14,2 e QUEBRARIA o ritmo em vez de arrumar. A escala vale para o que
se ve, nao para o que o box model diz.
2. `.painel .med -> .painel-h` da -80 e NAO e vao nenhum. O `.painel` e
flex com align-items:center: o medalhao fica AO LADO do texto, nao
acima. Medir vao vertical entre irmaos de uma linha flex produz numero
sem significado. Fica anotado para nao ser "corrigido" numa proxima
passada.
⚠️ TROCA REGISTRADA no vao lede -> cena: era `clamp(28px,4vh,52px)`, um
valor que RESPONDE A ALTURA da janela, e por isso dava 40 nesta medicao e
daria outro numero noutra. Virou 32 fixo. Trocou-se responsividade
vertical por um vao que pertence a escala. Se o dono preferir o contrario,
e so voltar o clamp e anotar este vao como terceira excecao. */
.bonus-eyebrow{margin-bottom:16px}
#bonus .bonus-title{margin-bottom:clamp(24px,2.6vw,32px)}
.cena{margin-top:32px}
.bonus-section .acesso{margin-top:16px}
/* ==========================================================================
ACABAMENTO 22/08 — o painel contra o recorte ampliado da referencia
==========================================================================
Cinco itens, so no desktop. Nenhum texto muda. Tres medicoes antes:
1. `.painel` tem overflow VISIBLE nos dois eixos e clip-path:none. O
`.kit-shot` e a `.cena-centro` tambem. NAO ha recorte em lugar nenhum
do caminho, entao o selo pode crescer sem risco de decapitacao. Hoje
ele ja transborda 11,2px acima da borda e nao e cortado.
2. O painel PARA antes dos cards? Nao: ja entra 86,9px atras deles. Mas
termina 199,5px ACIMA da base do leque, entao nao atravessa a faixa.
3. A borda ja e PSEUDO-ELEMENTO com mascara: `.painel::before`, inset:0,
padding:1px, `linear-gradient(180deg)` e o par de mascaras com
`mask-composite:exclude` que recorta o anel. Nao e `border` real, nao e
`border-image`, nao e box-shadow. Entao nao ha migracao a fazer: o
item 2 tem onde morar. O `::after` do painel esta LIVRE (content:none).
---------- 1 · O PAINEL DESCE POR TRAS DOS CARDS --------------------
Altura acrescentada: 214,6px (de 265,6 para 480,2). A base sai de
10156,4 para 10371,0 e passa 15,1px ABAIXO da base do leque (10355,9),
em vez de parar 199,5px antes dela.
⚠️ O CRESCIMENTO NAO PODE ENTRAR NO FLUXO. O `.cfw` e IRMAO da `.cena` e
sobe por `margin-top:-130px`; se a `.cena` crescer 214,6px, o leque desce
junto e a secao inteira cresce. Por isso o `margin-bottom` NEGATIVO de
-214,6: a caixa PINTADA cresce, a caixa de MARGEM continua com os mesmos
265,6px, e nada abaixo se move. Verificado: altura da secao inalterada.
---------- 3 · CENTRAGEM NA FAIXA VISIVEL ---------------------------
A faixa que se ve e do topo do painel ate o topo dos cards: 178,7px, com
centro em 89,4. O conteudo estava centrado em 90,8, entao o desvio era de
1,4px — bem menor do que parecia, e a razao e que o `padding-bottom:132px`
ja empurrava o conteudo para cima de forma nao intencional.
`padding-top` de 48 para 46,6 zera o desvio. O `padding-bottom` absorve a
diferenca para a caixa crescer exatamente 214,6.
⚠️ E O ALINHAMENTO DO MEDALHAO JA ESTA CERTO, medido: delta ZERO entre o
centro optico do medalhao e o centro optico do bloco de texto. Nao e
sorte: o painel e flex de UMA linha com altura automatica, entao a
altura da linha e a do item mais alto (o texto, 83,6) e o
`align-items:center` centra o medalhao (76) nela. Nao ha o que corrigir,
e mexer aqui quebraria o que ja funciona. O item B da auditoria de fato
nao se aplica: aqui o alinhamento e por bloco, nao por primeira linha.
⚠️ OS CINCO ITENS SAO SO DO DESKTOP, e a media query abaixo nao e zelo:
sem ela estas regras vencem as do celular, que vem ANTES no arquivo. A
`.painel{padding-bottom:104px}` do celular seria sobrescrita pelos 348 e a
secao em 360 subia de 1714 para 1766px, de 2,143 para 2,208 telas,
ESTOURANDO o teto de 2,2. E a mesma armadilha que o item C da auditoria
ja tinha mostrado: regra nova no fim do arquivo nao respeita breakpoint
por conta propria. Medido e corrigido. */
@media (min-width:760.05px){
.painel{padding-top:46.6px;padding-bottom:348px;margin-bottom:-214.6px}
/* ---------- 2 · ESMAECIMENTO DA CAMADA DE ACABAMENTO ----------------
NAO e `opacity` no painel: baixar a opacidade do bloco faria o mockup
transparecer atraves do texto e do medalhao e a camada perderia a leitura
de solido. O corpo escuro continua OPACO ate o fim; quem dissolve e so a
borda e o brilho.
CALIBRAGEM, medida contra a altura final de 480,2px:
topo dos cards .......... 37,2% do painel
fim do trecho solido .... 28% = 134,5px = 44,2px ACIMA dos cards
transparencia total ..... 58% = 278,5px, muito antes da base do
leque (que fica a 96,8%)
A dissolucao ja esta em curso quando o card comeca a cobrir, que era o
pedido, e termina bem antes de o painel reaparecer embaixo do leque.
⚠️ A MASCARA TEM TRES CAMADAS, e a ordem importa. As duas de baixo sao as
que ja existiam e recortam o ANEL de 1px (content-box excluida da caixa
inteira). A de cima e o fade, composta com `intersect`. Sem o intersect o
fade substituiria o anel em vez de multiplicar por ele.
E `mask-composite` PRECISA vir depois do atalho `mask`, senao o atalho o
reseta para `add` e o anel vira um retangulo cheio.
---------- 5 · BRILHO IRREGULAR NA BORDA ---------------------------
Gradiente LINEAR distribui o brilho de forma monotonica e le como
degrade. Conico com paradas irregulares le como LUZ. As paradas nao sao
equidistantes de proposito: 0 / 48 / 92 / 238 / 330 — espacamento regular
voltaria a ler como padrao.
ANGULOS CONFERIDOS PELA GEOMETRIA DA CAIXA (820 x 480,2, centro no meio),
e nao chutados. Com `from 210deg`, a posicao p de um ponto do perimetro e
(theta - 210) mod 360, onde theta e o angulo do ponto visto do centro:
canto superior esquerdo theta 300,4 -> p 90,4 -> quase forte ✓
meio da lateral direita theta 90 -> p 240 -> quase fraco ✓
centro da base theta 180 -> p 330 -> forte ✓
O ponto de partida sugerido (paradas em 70/140/250) punha p=90,4 entre
fraco e forte, com o canto superior esquerdo APAGADO — o oposto do
pedido. As paradas foram deslocadas para 48/92/238 para trazer o maximo
para o canto certo.
Interpolacao em oklch para nao passar pelo meio-tom sujo entre os dois
dourados. Os tokens globais NAO foram convertidos: os dois locais saem
por `color-mix(in oklch, ...)` a partir de --gold-honey e --gold-mid. */
.painel::before{
--ouro-forte:color-mix(in oklch,var(--gold-honey) 92%,var(--champagne));
--ouro-fraco:color-mix(in oklch,var(--gold-mid) 16%,transparent);
background:conic-gradient(in oklch from 210deg,
var(--ouro-forte) 0deg,
var(--ouro-fraco) 48deg,
var(--ouro-forte) 92deg,
var(--ouro-fraco) 238deg,
var(--ouro-forte) 330deg,
var(--ouro-forte) 360deg) border-box;
-webkit-mask:
linear-gradient(to bottom,#000 0%,#000 28%,transparent 58%),
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask:
linear-gradient(to bottom,#000 0%,#000 28%,transparent 58%),
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:source-in,xor;
mask-composite:intersect,exclude;
}
/* O BRILHO tambem tem de esmaecer, e ele NAO cabe no ::before: um
box-shadow ali seria recortado pelo anel de 1px da mascara e sumiria.
Vai para o ::after, que estava livre, limitado aos mesmos 62% de altura
em que o fade da borda ja terminou. Assim o halo dourado nunca emana da
base nova do painel, que fica 15,1px abaixo dos cards.
O box-shadow dourado sai do `.painel`; a sombra ESCURA de profundidade
fica, porque ela nao e acabamento, e a que assenta a camada. */
.painel{box-shadow:0 40px 90px -40px rgba(0,0,0,0.85)}
.painel::after{
content:"";position:absolute;left:0;right:0;top:0;height:62%;
z-index:0;pointer-events:none;border-radius:var(--r-lg);
box-shadow:0 0 90px -20px rgba(214,154,60,0.32);
}
/* O MESMO tratamento no mockup, DEFASADO em 180 graus (`from 30deg`) para
as duas bordas nao pulsarem em fase. Sem mascara de fade aqui: o mockup
nao desce por tras de nada. */
.cena .kit-shot::after{
--ouro-forte:color-mix(in oklch,var(--gold-honey) 92%,var(--champagne));
--ouro-fraco:color-mix(in oklch,var(--gold-mid) 16%,transparent);
background:conic-gradient(in oklch from 30deg,
var(--ouro-forte) 0deg,
var(--ouro-fraco) 48deg,
var(--ouro-forte) 92deg,
var(--ouro-fraco) 238deg,
var(--ouro-forte) 330deg,
var(--ouro-forte) 360deg) border-box;
}
/* ---------- 4 · O SELO BONUS 1 ---------------------------------------
Na referencia ele e elemento de destaque, com preenchimento dourado e
glow proprio, nao rotulo discreto. Cresce em corpo, em respiro interno e
em brilho, e inverte: texto escuro sobre ouro, em vez de ouro sobre
escuro.
corpo 9px -> 12px
respiro 4/12 -> 9/24
chanfro 8px -> 11px (--cut acompanha, senao a aresta encolhe
em proporcao e o selo perde o desenho)
BONUS 2 e BONUS 3 NAO mudam. A assimetria e intencional e acompanha a
lede, que diz que o principal e o Kit.
⚠️ A CENTRAGEM DEIXA DE SER POR `margin-left:-52px`. Aquele -52 era
metade da largura ANTIGA, cravada: com o selo maior ele sairia do centro
para a esquerda. Passa a `translate:-50% -50%`, que centra por proporcao
e nao depende da largura.
Cabe inteiro: a medicao 1 mostrou overflow VISIBLE em todo o caminho
(`.painel`, `.kit-shot`, `.cena-centro`) e clip-path apenas no proprio
selo, que e o desenho dele. */
.selo--painel{
margin-left:0;
translate:-50% -50%;
--cut:11px;
padding:9px 24px;
font-size:12px;
color:var(--bg-dark);
background:linear-gradient(180deg,var(--champagne),var(--gold-mid));
border-color:var(--gold-honey);
box-shadow:0 0 34px -6px rgba(214,154,60,0.75);
}
/* ======================================================================
VOLTA 2 DA AUDITORIA — dez correcoes contra a referencia
======================================================================
Ordem de aplicacao ditada pela interacao entre elas, nao por gosto. Os
itens 4, 6, 7, 8 e 9 mexem TODOS na mesma faixa de luminancia da cena;
calibrar um isolado quebra o seguinte. Por isso a amostragem completa foi
refeita depois de tudo aplicado, e nao item a item.
Ficaram de fora por decisao do dono: o 11 (o chanfro do selo e assinatura
do sistema visual) e o 12 (glifo de navegacao exige olhar a pagina toda,
virou pendencia separada).
---------- 4 e 10 · GRAMATICA DE PROFUNDIDADE, agora explicita --------
REGRA DA CENA, e ela vale para toda camada nova daqui em diante:
CAMADA MAIS A FRENTE E MAIS ESCURA.
Nao e estilo, e o que faz a pilha ler como pilha. Estava sendo violada
justamente pela camada central. Medido antes:
mockup 14,9 painel 19,1 a 22,3 satelite 14,9
O painel, que esta NA FRENTE do mockup, era 28 a 50% mais CLARO que ele.
O satelite ja obedecia, mas por acidente e nao por regra: ninguem tinha
escrito a regra em lugar nenhum.
O painel sai de --bg-card (o tom mais claro do sistema) para uma mistura
de --bg-alt com --bg-dark, ficando abaixo do mockup nos dois extremos do
gradiente. Os cards do leque sao a excecao consciente: sao claros porque
sao a camada de conteudo, nao de superficie. */
.painel{
background:linear-gradient(160deg,
color-mix(in oklch,var(--bg-alt) 55%,var(--bg-dark)),
var(--bg-dark) 70%);
}
/* ---------- 1 e 2 · O FADE PASSA A EXTINGUIR ANTES DO CARD -----------
MEDIDO: o card cobre a borda em y=1003, 49,2% do painel, NOS DOIS LADOS —
a geometria e simetrica. A mascara so zerava em 58%, entao a borda era
cortada ainda com 29% da opacidade, e o corte tinha aresta.
A assimetria que se via NAO era geometrica, era fotometrica: no ponto de
corte a esquerda media 42,8 e a direita 32,4, porque o conico do item 5 e
assimetrico DE PROPOSITO. Por isso a correcao e uma so, no fade, e nao
uma de cada lado: baixando o teto, os dois caem juntos e o que sobra de
diferenca fica abaixo do limiar de percepcao.
Novo fade: solido ate 18%, transparente em 46% = y 987, com 16px de folga
acima da linha do card. */
.painel::before{
-webkit-mask:
linear-gradient(to bottom,#000 0%,#000 18%,transparent 46%),
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask:
linear-gradient(to bottom,#000 0%,#000 18%,transparent 46%),
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:source-in,xor;
mask-composite:intersect,exclude;
}
/* ---------- 3 · A LINHA NA BASE DO MOCKUP DISSOLVE -------------------
MEDIDO: a aresta inferior do anel do mockup (y=910,8) aparecia como DOIS
cotocos ladeando o painel — x 282..310 com pico 69,3 e x 1128..1158 com
pico 173,6, contra fundo 17,1. O direito era DEZ VEZES o fundo. Na
referencia essa linha nao existe.
⚠️ E eu tinha errado o diagnostico: supus que o anel desenhava POR CIMA do
painel, porque tem z-index 4 contra 2. Nao desenha. O `.kit-shot` tem
z-index:1 e cria contexto de empilhamento, que prende o ::after abaixo do
painel. Por isso a linha so aparece nos dois cotocos laterais.
Mesma tecnica do painel, com o teto mais alto porque aqui nao ha card
cobrindo: solido ate 55%, transparente em 85% = y 833, bem acima da base
em 910,8. O topo do mockup, que esta correto, fica intacto. */
.cena .kit-shot::after{
-webkit-mask:
linear-gradient(to bottom,#000 0%,#000 55%,transparent 85%),
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask:
linear-gradient(to bottom,#000 0%,#000 55%,transparent 85%),
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:source-in,xor;
mask-composite:intersect,exclude;
}
/* ---------- 6, 7 e 8 · O TRIO DA LUMINANCIA -------------------------
Aplicados JUNTOS de proposito. Os tres disputam a mesma faixa de tons
escuros: um halo mais largo CLAREIA a moldura, uma vinheta mais fechada a
ESCURECE, e a poca sob os cards depende do fundo que sobrar. Calibrar um
de cada vez faria o seguinte desmentir o anterior.
6 · HALO DO MOCKUP. Media alcance de ~50px (41 na borda, 25 a 50px, fundo
em 70px). O spread negativo de -20 comia metade do desfoque. Vai para
160px de desfoque com spread -10: envolve a cena em vez de contornar.
7 · VINHETA. Media razao borda/centro de 0,79 — quase nenhuma. O fundo da
cena vem so do `.cena::before`; a `.bonus-section` esta com
`background:none` desde a emenda da comunidade. Entra uma camada
propria de vinheta no ::before da secao, com z-index 0 para ficar
ATRAS de tudo (o ::before vem antes dos filhos na ordem de pintura;
um ::after ficaria por cima e apagaria a cena).
8 · POCA SOB OS CARDS. Media delta de 4 a 5 niveis, quase nada. A causa
era dupla: spread -24 anulando o alcance, e cor MARROM (60,40,10) que
sobre fundo escuro nao escurece. Vira preto com spread -12. */
.cena .dash{
box-shadow:
0 60px 140px -50px rgba(0,0,0,0.9),
0 0 160px -10px rgba(214,154,60,0.38);
}
.bonus-section::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(78% 62% at 50% 46%,
transparent 0%,transparent 42%,rgba(0,0,0,0.62) 100%);
}
.bonus-section .cf-face{
box-shadow:
0 1px 2px rgba(0,0,0,0.08),
0 26px 54px -12px rgba(0,0,0,0.55);
}
/* ---------- 9 · BORDA DOS SATELITES ---------------------------------
Depois do item 4 de proposito: o contraste da borda e relativo ao
interior, e o interior da cena mudou de tom. Media 27,9 contra fundo
20,4 — sete niveis e meio, praticamente invisivel. --line-12 vai para
--line-25, que e o mesmo contorno do painel antes desta rodada. */
.sat{border-color:var(--line-25)}
/* ---------- 5 · AS SETAS VOLTAM -------------------------------------
⚠️ REVERSAO DE UMA DECISAO MINHA, e a premissa e que caiu. Eu desliguei as
setas quando o vao entre satelite e mockup era ZERO: nao havia onde
desenha-las. Com o vao em 62px ha espaco de sobra, e a referencia mostra
as duas. Manter escondido virou teimosia, nao economia.
A geometria ja estava pronta e nunca foi removida: `.seta` vive nas
colunas 2 e 4 do grid, que valem `var(--gap)`, com justify-self:center e
align-self:center. Com 16px de haste num vao de 62 sobram 23px de cada
lado, e a ponta (4px de borda, ancorada em -4) chega a 19px da borda do
mockup. Nao encosta em nada. Conferido por medicao.
No celular segue escondida pela regra do proprio breakpoint. */
.seta{display:block}
/* ---------- D1 · A VINHETA PARA DE ESCURECER O CAMPO DO H1 ----------
O item 7 fechou as bordas em TODA a altura da secao, e o H1 mora nela.
MEDIDO, no campo atras do titulo (y=165 e y=290):
ponta esq 20,6 centro 24,9 ponta dir 20,9 razao 0,83
As pontas da primeira linha caiam num fundo mais fechado que o miolo, o
que a referencia nao faz.
A vinheta nao muda de forma nem de intensidade: ganha uma MASCARA vertical
que a mantem fora da faixa do cabecalho. Transparente ate 23% da secao
(y=368, logo abaixo da base da lede em 358,8) e cheia em 30% (y=480). O
topo do mockup, em 390,8, cai no meio da rampa, entao a vinheta entra
junto com a cena e nao ha emenda horizontal visivel.
⚠️ CORRECAO DE REFERENCIA DE MEDIDA: a razao 0,49 da volta 2 foi medida em
y=250, que e exatamente a faixa que este ajuste manda uniformizar. Ela vai
subir para perto de 1,0 la, DE PROPOSITO. A razao da vinheta na faixa da
CENA tem de ser lida numa linha de fundo limpo dentro dela: y=1520, que
media 0,55 antes e e o numero a preservar. */
.bonus-section::before{
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 23%,#000 30%);
mask-image:linear-gradient(to bottom,transparent 0%,transparent 23%,#000 30%);
}
/* ---------- D2 · PRESENCA DAS SETAS --------------------------------
⚠️ SUBIR LUMINANCIA ERA A ALAVANCA ERRADA, e a medicao mostra por que. Na
altura da seta (y=711), luminancia bruta:
fundo do vao 33,7
borda do MOCKUP 38,7 (+5 de contraste)
borda do SATELITE 43,0 (+26, o fundo dela e ~17)
HASTE da seta 68 (+34)
PONTA da seta 104 (+70)
A seta ja estava ACIMA das duas bordas. Ela lia como tracinho por
TAMANHO: 1px de haste e ponta de 8px. A leitura de "fraca" vinha da massa,
nao do brilho.
Entao o ajuste inverte: a haste ENGROSSA de 1 para 2px e a ponta cresce de
8 para 14px, e as duas ESCURECEM para caber na regra de nao passar das
bordas. Alvo de contraste entre +5 (mockup) e +26 (satelite):
haste --line-30 -> --line-15 composto ~52 (+19)
ponta gold-mid opaco -> 22% composto ~59 (+25)
⚠️ E fica registrado que a regra "nunca acima das duas" e mais apertada em
luminancia BRUTA do que em contraste: o vao esta a 33,7 por causa do halo
do mockup, entao a faixa 38,7 a 43,0 vale so +5 a +9 sobre o proprio
fundo, e uma seta ali seria menos visivel do que a de hoje. A calibragem
acima usa CONTRASTE, nao luminancia bruta, e reporta os dois. */
.seta{
height:2px;
border-top:2px dashed var(--line-15);
width:20px;
}
.seta::after{
top:-6px;
border-width:7px;
}
.seta--esq::after{right:-7px;border-left-color:color-mix(in oklch,var(--gold-mid) 13%,transparent)}
.seta--dir::after{left:-7px;border-right-color:color-mix(in oklch,var(--gold-mid) 13%,transparent)}
/* ---------- M4 · TEXT-WRAP PRETTY NAS DESCRICOES DOS SATELITES -------
Mata a orfa "senior." do Bonus 2 sem tocar no texto: o algoritmo evita que
a ultima linha fique com uma palavra so. O Firefox ignora a palavra-chave
e cai no comportamento de hoje, sem quebra visual.
Fica NO DESKTOP de proposito. E la que a orfa foi medida, e mante-lo fora
do celular garante que 360 continue byte a byte igual ao commit anterior,
que e uma condicao de verificacao desta rodada. */
.sat-d{text-wrap:pretty}
} /* fim de @media (min-width:760.05px) — acabamento + volta 2 + D1/D2 + M4 */
/* ======================================================================
CELULAR — M2 contencao · R1 reordenacao · R2 orcamento · R3 faixa
======================================================================
⚠️ DUAS DECLARACOES DE CELULAR ESTAVAM MORTAS, e essa e a causa raiz do
transbordo original. Media query NAO soma especificidade: uma regra
igual, sem media query, declarada DEPOIS, vence a do celular.
`.cena{--cena-w:100%}` (bloco 880px) morta pela
`.cena{--cena-w:min(1400px,...)}` declarada depois
`.bonus-section .cfw{margin-top:10px}` (bloco 760px) morta pela
`.bonus-section .cfw{margin-top:-130px}` declarada depois
O -130px puxava o leque para dentro da cena e o fazia cobrir o satelite
do Bonus 3. Era transbordo VERTICAL por acidente de cascata, nao
horizontal.
⚠️ TROCAR `100vw` POR `100%` NO --cena-w E PROIBIDO. Medido, aplicado de
verdade e revertido: o bloco contedor da cena e a caixa de conteudo do
`.container` (1092 em 1440), nao a viewport — a cena FURA o container por
margem negativa e por isso mede contra a viewport. Com `100%` a cena cai
de 1400 para 1052 e a pista do mockup de 876 para 528. E em 360 nao muda
nada: a contaminacao de barra de rolagem la e ZERO (clientWidth 360 =
innerWidth 360).
R1 · A ORDEM DO CELULAR E OUTRA, e sem mover HTML. Os cards do leque sao
o CONTEUDO do Bonus 1 e ficam grudados nele:
centro (mockup + painel do Kit) → faixa de cards → dica → Bonus 2 →
Bonus 3 → chips → CTA → acesso
O leque e IRMAO da .cena no DOM, e os satelites sao FILHOS dela: `order`
sozinho nao intercala arvores diferentes. A solucao e `display:contents`
na .cena (a caixa dela some e os filhos sobem para o flex do .container)
+ `order` explicito em todos os participantes.
Custos do display:contents, todos tratados:
- o ::before do glow perderia o bloco contedor -> migra para o
.cena-centro, mesmo gradiente;
- o data-reveal da .cena nao anima mais (transform/opacity sem caixa
nao tem efeito) -> os filhos aparecem sem a animacao de entrada, SO
no celular;
- o margin-top:32 da .cena morre -> reposto no .cena-centro.
R2 · O ORCAMENTO VOLTA PARA AS 2,2 TELAS POR CIMA, nao por sobreposicao:
- mockup: max-height 296 -> 280. O corte cai no vao entre a base dos
KPIs (266) e o titulo seguinte (303): nada decapitado.
- painel: margin-top -46 -> -8. ⚠️ O -46 DECAPITAVA os rotulos dos
KPIs: punha o topo do painel em 250 com os KPIs terminando em 266.
Com -8 o painel entra em 272, seis px abaixo deles, e ainda cobre a
aresta reta do corte do dash.
- painel: padding 24/20/104 -> 16/16/24. O 104 era COMPRIMENTO DE
OCLUSAO (a faixa que o leque cobria por cima no desktop de antes);
na ordem nova nada cobre o painel e ele virou ar morto. O passo
literal imediatamente inferior da escala seria 48, mas 48 tambem e
ar morto: 24 e o respiro de fim de card. Se o dono preferir o
literal, sao +24px e a secao NAO fecha em 1760.
- secao: padding-block 70 -> 48, o passo da escala imediatamente
inferior.
R3 · A FAIXA: um card centralizado por vez, espiada simetrica de 35px de
cada lado ((324-230)/2 - 12 de gap). A centragem do primeiro e do ultimo
NAO vem de padding no stage: padding-inline-end nao entra na area de
rolagem no Chromium e o ultimo card pararia 47px fora do centro. Vem de
MARGEM no primeiro e no ultimo card (margem de item conta na area de
rolagem), calc(50% - var(--cfcw)/2) de cada lado. Sem scroll-padding.
Altura do card: a MESMA regra medida do desktop, max(1.12 x card, 258).
O 1.30 da regra base dava 299 e eram 41px de ar.
⚠️ SAO DEZ CARDS NA FAIXA, nao cinco: o fan do desktop mostra 5 de 10
pela janela de opacidade. Aqui os dez packs aparecem.
⚠️ PENDENCIA REGISTRADA: a dica diz "CLIQUE NO CARD PARA VER O CONTEUDO"
mas o flip e do motor, que NAO liga no celular (setPointerCapture
engoliria a rolagem nativa). No celular o clique nao vira o card. Texto
nao muda nesta rodada: ou o flip ganha um listener proprio de celular,
ou o texto muda, e a decisao e do dono. */
@media (max-width:760px){
/* --- R1 · reordenacao --- */
.bonus-section .container{display:flex;flex-direction:column}
.cena{display:contents}
.bonus-section .bonus-eyebrow{order:1}
.bonus-section .bonus-title{order:2}
.bonus-section .bonus-lede{order:3}
.cena-centro{order:4;margin-top:32px}
.bonus-section .cfw{order:5}
.bonus-section .cf-hint{order:6}
.sat--esq{order:7;margin-top:16px}
.sat--dir{order:8;margin-top:8px}
.bonus-section .chips{order:9}
.bonus-section .btn-row{order:10}
.bonus-section .acesso{order:11}
/* o glow migra da .cena (sem caixa) para o centro, mesmo gradiente */
.cena::before{display:none}
.cena-centro::before{
content:"";position:absolute;z-index:0;pointer-events:none;
left:50%;top:50%;translate:-50% -50%;
width:132%;height:190%;
background:radial-gradient(ellipse at 50% 42%,
rgba(214,154,60,0.13) 0%,
rgba(181,119,30,0.06) 38%,
transparent 68%);
}
/* --- M2 · contencao (mantida: o clip segura regressao do fan) --- */
.bonus-section .cfw{margin-top:16px;overflow:clip;overflow-clip-margin:24px}
/* --- R2 · orcamento --- */
.bonus-section{padding-block:48px}
.cena .dash{max-height:280px}
.painel{margin-top:-8px;padding:16px 16px 24px}
/* --- M3 + R3 · a faixa de rolagem --- */
.bonus-section .cfw{--cfcw:230px}
.cfw .cf-frame{
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
perspective:none;
padding:0 0 24px;
cursor:default;
scrollbar-width:none;
}
.cfw .cf-frame::-webkit-scrollbar{display:none}
.cf-stage{display:flex;gap:12px;height:auto;transform-style:flat;padding:0}
.cf-card{
position:relative;left:auto;top:auto;
flex:0 0 var(--cfcw);
height:max(calc(var(--cfcw) * 1.12),258px);
scroll-snap-align:center;
transform:none !important;
opacity:1 !important;
z-index:auto !important;
will-change:auto;
}
.cf-card:first-child{margin-left:calc(50% - var(--cfcw)/2)}
/* a margem-end de flex item TAMBEM nao conta na area de rolagem do
Chromium (medido: scrollWidth 2455 com e sem ela, ultimo card 47px
fora do centro). O espacador final e um ITEM de verdade, via ::after:
itens contam. O -12px desconta o gap que o proprio item ganha. */
.cf-stage::after{content:"";flex:0 0 calc(50% - var(--cfcw)/2 - 12px)}
}
/* O MESMO desligamento sob movimento reduzido, em qualquer largura: quem
pediu menos movimento nao deve receber um carrossel 3D com arrasto de
inercia. A guarda do main.js casa com as duas condicoes. A REORDENACAO
nao entra aqui: ela e do celular, nao do movimento reduzido. */
@media (prefers-reduced-motion:reduce){
.cfw .cf-frame{
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
perspective:none;
padding:0 0 24px;
scrollbar-width:none;
}
.cfw .cf-frame::-webkit-scrollbar{display:none}
.cf-stage{display:flex;gap:12px;height:auto;transform-style:flat;padding:0}
.cf-card{
position:relative;left:auto;top:auto;
flex:0 0 var(--cfcw);
height:max(calc(var(--cfcw) * 1.12),258px);
scroll-snap-align:center;
transform:none !important;opacity:1 !important;z-index:auto !important;
}
.cf-card:first-child{margin-left:calc(50% - var(--cfcw)/2)}
/* a margem-end de flex item TAMBEM nao conta na area de rolagem do
Chromium (medido: scrollWidth 2455 com e sem ela, ultimo card 47px
fora do centro). O espacador final e um ITEM de verdade, via ::after:
itens contam. O -12px desconta o gap que o proprio item ganha. */
.cf-stage::after{content:"";flex:0 0 calc(50% - var(--cfcw)/2 - 12px)}
}
/* ======================================================================
FECHAMENTO 22/08 — F1 a F5, a ultima rodada de acabamento da secao
======================================================================
Tudo desktop, por ordem do dono. O F0 (flip por tap) vive no main.js,
no ramo do celular. Depois deste bloco a secao ENCERRA: divergencia
nova vira pendencia registrada no handoff, nao rodada. */
@media (min-width:760.05px){
/* ---------- F1 · O CORPO DO MOCKUP DISSOLVE ATRAS DOS CARDS --------
O que sobrava: os cantos inferiores do dash visiveis ao lado do painel
(28px de tira de cada lado), com raio e aresta, terminando reto em
y=910,8 da secao.
⚠️ A RECEITA LITERAL (mask no .dash + max-height maior + margin
negativo) FOI DERRUBADA POR DOIS LIMITES, antes de aplicar:
1. mask-clip e border-box: mascarar o .dash apagaria TODO o
box-shadow externo, inclusive o halo dourado do item 6 — tudo
que o elemento pinta fora da caixa vira alfa zero.
2. crescer o max-height REVELA conteudo do dashboard (a grade de
categorias) meio-transparente nas tiras laterais, que e
exatamente o defeito que a variante A ja tinha condenado.
O mesmo resultado visual sai do ::after do proprio .dash, que estava
display:none (o veu morto): um prolongamento ABSOLUTO do fundo,
colado na base, que continua o corpo e se extingue em gradiente.
Absoluto = zero altura de fluxo, a secao fica em 1599 POR CONSTRUCAO,
sem margin-bottom compensatorio. O contexto z-index:1 do .kit-shot
nao muda; o painel (z 2) segue na frente do prolongamento.
O raio inferior do dash zera para o ::after colar sem mordida de
canto. Extincao: 910,8 + 220 = y 1130,8, antes da base do leque
(1231,9), com a dissolucao em curso quando os cards cobrem (topo das
pontas em 996,9). */
.cena .dash{border-bottom-left-radius:0;border-bottom-right-radius:0}
/* ⚠️ O PROLONGAMENTO NAO PODE MORAR NO ::after DO PROPRIO .dash: o dash
tem overflow:hidden e RECORTA o pseudo — ele computava (display,
altura, gradiente, tudo) e nunca pintava um pixel, a armadilha 3 em
versao de clip. So a amostragem pegou: o dourado abaixo da base era o
HALO do dash aparecendo sem cobertura, com degrau de 13,5/px na
aresta da caixa.
Mora no ::before do .kit-shot (overflow visible) com z-index:1: no
contexto do kit-shot ele pinta NA FRENTE do dash e do halo (z auto),
e o painel (z 2, contexto de fora) segue na frente dele. Os 2px de
sobreposicao com a base somem sob o proprio fundo, mesma cor. */
.cena .kit-shot::before{
content:"";display:block;position:absolute;z-index:1;
left:1px;right:1px;top:calc(100% - 6px);height:226px;
pointer-events:none;
background:linear-gradient(to bottom,
var(--bg-alt) 0%,
color-mix(in oklch, var(--bg-alt) 78%, transparent) 38%,
transparent 100%);
}
/* ---------- F2 · OS TRES SELOS ARREDONDAM -------------------------
Medido antes: os tres carregavam o MESMO chanfro por clip-path
(--cut 11px no painel, 8px nos satelites). A gramatica de canto e uma
so na referencia, entao a linguagem se aplica aos tres de uma vez.
10px, calibrado contra o recorte ampliado (faixa pedida: 8 a 12).
A centragem do selo do painel por translate:-50% -50% fica. */
.bonus-section .selo{clip-path:none;border-radius:10px}
/* ---------- F3 · A FAIXA DE CHIPS ---------------------------------
Medido ANTES de mexer: as quatro pistas JA eram iguais (187,5px cada,
repeat(4,minmax(0,1fr))) e as duas linhas de base JA estavam zeradas
nos quatro chips (base dos valores 10398,8 e dos rotulos 10423,3,
identicas). Os itens 1 e 2 do F3 nao tinham o que corrigir.
O item 3 tinha: o glifo centrava na PRIMEIRA LINHA (10390,6), decisao
do item B da auditoria. A referencia centra NO BLOCO (10402,8, delta
12,2px) — e o que a referencia mostrar vence, entao a decisao B fica
REVOGADA nos chips. O flex com wrap vira grid de duas linhas com o
glifo em span 2, align center; o margin-left de 29px do rotulo (que
imitava a coluna) morre com o grid de verdade.
Item 4: a correcao optica de ic-lock e ic-brain JA FOI aplicada na
auditoria A (translateY de -5,09% e +3,49% no proprio glifo, onde
quer que ele apareca na secao). Nos chips vivem ic-chat, ic-stack,
ic-bolt e ic-shield — nenhum dos dois; o ic-lock esta na barra do
mockup e na linha do cadeado, o ic-brain no medalhao do Bonus 2, e
nos dois lugares a correcao ja computa. */
/* row-gap 8 (escala) + min-height 66: o grid apertou o ritmo interno
do chip (vao valor->rotulo caiu de 11,3 para o row-gap) e a faixa
encolheu 11px, tirando a secao do invariante de 1599. O min-height
congela a caixa do chip na altura anterior e devolve o 1599 por
construcao — MEDIDO na escada 65->1598, 66->1599, 67->1600; o valor
e o que fecha a soma com os subpixels da cadeia, nao a caixa
aritmetica de 67. A sobra e distribuida pelas rows pelo grid. */
.chip{
display:grid;grid-template-columns:auto minmax(0,1fr);
align-items:center;column-gap:10px;row-gap:8px;
min-height:66px;
}
.chip i{grid-row:1/span 2}
.chip em{margin-left:0}
/* ---------- F4 · O GRUPO DO PAINEL CENTRALIZA ---------------------
Medido antes: offset esquerdo 1px, direito 207,5px — o grupo todo
encostado a esquerda. Centraliza o GRUPO; o texto continua alinhado a
esquerda dentro do bloco. O max-width segura a linha; a centragem
vertical na faixa visivel (do acabamento) nao muda. */
.painel{justify-content:center}
.painel-txt{max-width:56ch;flex:0 1 auto}
/* ---------- F5 · O VIDRO ------------------------------------------
Os boxes liam secos: preenchimento chapado, borda uniforme. Vidro
escuro por gradiente e aresta, SEM backdrop-filter: atras dos
satelites e dos chips so existe o fundo da secao, o desfoque nao
teria o que desfocar e custaria composicao.
No PAINEL entra so preenchimento e aresta: a borda dele e a conica
com fade da volta 2 e nao se toca.
Nos SATELITES a borda uniforme (--line-25, item 9) vira gradiente
vertical no ::before (mesma tecnica do painel), topo mais claro,
laterais no valor do item 9, base um passo abaixo. A guarda do item
9 vale: nenhum trecho pode voltar a ser menos legivel que a borda de
antes do item 9 (--line-12). */
.sat{
border-color:transparent;
background:
linear-gradient(170deg, color-mix(in oklch, var(--gold-mid) 7%, transparent), transparent 45%),
var(--bg-alt);
box-shadow: inset 0 1px 0 rgba(255,240,200,0.12), 0 8px 24px rgba(0,0,0,0.35);
}
.sat::before{
content:"";position:absolute;inset:0;padding:1px;pointer-events:none;
border-radius:var(--r-lg);
background:linear-gradient(180deg,
var(--line-45) 0%,
var(--line-25) 34%,
var(--line-15) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
}
.bonus-section .chips{
border-color:transparent;
background:
linear-gradient(170deg, color-mix(in oklch, var(--gold-mid) 6%, transparent), transparent 45%),
linear-gradient(180deg,var(--bg-card),var(--bg-alt));
box-shadow:
inset 0 1px 0 rgba(255,240,200,0.12),
0 8px 24px rgba(0,0,0,0.35),
0 24px 60px -40px rgba(0,0,0,0.9);
}
.bonus-section .chips::before{
content:"";position:absolute;inset:0;padding:1px;pointer-events:none;
border-radius:var(--r-md);
background:linear-gradient(180deg,
var(--line-40) 0%,
var(--line-20) 34%,
var(--line-12) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
}
.painel{
background:
linear-gradient(170deg, color-mix(in oklch, var(--gold-mid) 5%, transparent), transparent 45%),
linear-gradient(160deg,
color-mix(in oklch,var(--bg-alt) 55%,var(--bg-dark)),
var(--bg-dark) 70%);
box-shadow: inset 0 1px 0 rgba(255,240,200,0.10), 0 40px 90px -40px rgba(0,0,0,0.85);
}
/* ---------- A1 · OS FLANCOS DO MOCKUP (rodada final) ---------------
Donos identificados por ALTERNANCIA DE CAMADA com varredura numerica
(regiao direita, x1132-1200 y767-1030, pixels com delta>10):
baseline 691 | sem anel 626 | sem cards de categoria 410 |
sem prolongamento 684
-> o dono principal da DIREITA sao os CARDS DE CATEGORIA do dashboard
(281px de delta): a coluna direita da grade termina em x=1139 e a
fatia de 9px, com canto arredondado e borda, desce visivel na tira
ao lado do painel. O crop confirma dois cantos.
-> na ESQUERDA, a "emenda" e o fundo da sidebar (--bg-dark, ~8 de
luminancia) encontrando o prolongamento (--bg-alt, ~15) em y=911,
mais a parede/anel.
-> o anel lateral (65px) e a fronteira corpo/HALO completam os dois.
Correcao pela regra do dono: conteudo interno se resolve por COBERTURA
OPACA, nao por mascara no .dash — e sem mascara o halo fica intacto
POR CONSTRUCAO (a guarda do box-shadow nem e exercitada).
As TIRAS moram no ::before do proprio .dash (estava livre): o
overflow:hidden nao as corta porque vivem inteiras dentro da caixa, e
com z-index:3 pintam na frente do conteudo (filhos sem z-index).
Cobrem da linha do painel (top:376px) ate a base, 30px de cada lado.
A BANDA DOURADA na fronteira externa e o que dissolve a PAREDE: a
fronteira fisica corpo(15)/halo(30-40) mede delta 15-25 e nenhuma
mascara a remove sem matar o halo; a banda leva a borda interna a ~39
(color-mix 18% de ouro), casando com o halo do outro lado — a
fronteira cai para delta <10 e a transicao interna de 9px e suave.
A decapitacao das bordas de card em y=767 fica exatamente sob a linha
do topo do painel, onde o olho ja espera um corte.
O dashboard ACIMA do painel nao e tocado: a tira comeca na linha dele. */
.cena .dash::before{
content:"";position:absolute;z-index:3;pointer-events:none;
left:0;right:0;top:376px;bottom:0;
background:
linear-gradient(var(--bg-alt),var(--bg-alt)) left top/31px 100% no-repeat,
linear-gradient(var(--bg-alt),var(--bg-alt)) right top/31px 100% no-repeat;
}
/* as BANDAS douradas vivem no ::after (o veu morto do desktop) com
FADE-IN vertical de 24px: nascendo duras na linha 767 elas mesmas
geravam segmento horizontal de 8px com delta 23-30 contra o fundo
escuro da sidebar (esq) e o fundo do main (dir). Nascendo em rampa, o
delta por pixel cai para ~1,5. */
.cena .dash::after{
content:"";display:block;position:absolute;z-index:3;pointer-events:none;
/* height:auto explicita: o veu base .dash::after carrega height:74px e,
sem isso, top+bottom perdem e a banda morria em y=842 - medido. */
left:0;right:0;top:376px;bottom:0;height:auto;opacity:1;
background:
linear-gradient(to right,
color-mix(in oklch, var(--gold-mid) 18%, var(--bg-alt)) 0,
var(--bg-alt) 10px, transparent 11px) left top/11px 100% no-repeat,
linear-gradient(to left,
color-mix(in oklch, var(--gold-mid) 18%, var(--bg-alt)) 0,
var(--bg-alt) 10px, transparent 11px) right top/11px 100% no-repeat;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24px);
mask-image:linear-gradient(to bottom,transparent 0,#000 24px);
}
/* ⚠️ o vale de 1px: a tira ancora na PADDING box e o overflow:hidden do
dash recorta qualquer extensao para fora — a coluna da borda transparente
ficava descoberta (19 de luminancia entre halo 38 e banda 39, medido).
A propria borda lateral ganha o tom da banda: acima de y765 o anel pinta
por cima na mesma coluna e esconde; abaixo, ela continua a banda. A borda
inferior segue transparente. */
.cena .dash{
/* border-image com rampa vertical: a cor da borda NASCE em sincronia
com o fade-in da banda interna (72,3%..77% = y767..791). Com cor
chapada a borda nascia plena e abria 17px de coluna com delta 23-29
contra a banda ainda fraca. O border-image ignora o border-radius,
mas o trecho pintado começa abaixo do topo e o raio visivel do topo
e desenhado pelo anel, nao pela borda. */
border-image:linear-gradient(to bottom,
transparent 0%,transparent 72.3%,
color-mix(in oklch, var(--gold-mid) 18%, var(--bg-alt)) 77%,
color-mix(in oklch, var(--gold-mid) 18%, var(--bg-alt)) 100%) 1;
}
/* o anel extingue NO TOPO DO PAINEL (72% = y765), em sincronia com o
inicio da dissolucao — o fade da volta 2 (85%) deixava a lateral viva
ate y833 dentro da faixa certificada */
/* ⚠️ BUG DE COMPOSICAO NOS CANTOS, achado por alternancia + mask brutal:
a receita de TRES camadas (fade ∩ (cheia XOR content-box)) falha nos
cantos arredondados no Blink — o arco do raio inferior ignorava o fade
e pintava sozinho em y=890-910 (35px de delta na quina; com mascara
simples de uma camada, 3px). A reformulacao dispensa o intersect:
anel com fade = fade MENOS miolo (content-box)
Duas camadas, um subtract. O mesmo conserto vale para o anel do
PAINEL logo abaixo, que tem a doenca latente nos cantos inferiores
(hoje atras dos cards, mas o painel desce 15px alem do leque). */
.cena .kit-shot::after{
-webkit-mask:
linear-gradient(to bottom,#000 0%,#000 52%,transparent 72%),
linear-gradient(#000 0 0) content-box;
mask:
linear-gradient(to bottom,#000 0%,#000 52%,transparent 72%),
linear-gradient(#000 0 0) content-box;
-webkit-mask-composite:source-out;
mask-composite:subtract;
}
.painel::before{
-webkit-mask:
linear-gradient(to bottom,#000 0%,#000 18%,transparent 46%),
linear-gradient(#000 0 0) content-box;
mask:
linear-gradient(to bottom,#000 0%,#000 18%,transparent 46%),
linear-gradient(#000 0 0) content-box;
-webkit-mask-composite:source-out;
mask-composite:subtract;
}
/* o prolongamento e reescrito: cobre 1px ALEM das colunas de borda (o
kit-shot nao tem overflow nem borda, pode), ganha as MESMAS bandas
douradas laterais das tiras, e o decaimento vertical sai do background e
vira MASK unica — assim as bandas e o corpo morrem JUNTOS, acompanhando
o halo que tambem decai, em vez de a banda ficar opaca ate o fim e abrir
fronteira nova la embaixo. */
.cena .kit-shot::before{
left:-1px;right:-1px;
background:
linear-gradient(to right,
color-mix(in oklch, var(--gold-mid) 18%, var(--bg-alt)) 0,
var(--bg-alt) 10px, transparent 11px) left top/11px 100% no-repeat,
linear-gradient(to left,
color-mix(in oklch, var(--gold-mid) 18%, var(--bg-alt)) 0,
var(--bg-alt) 10px, transparent 11px) right top/11px 100% no-repeat,
linear-gradient(var(--bg-alt),var(--bg-alt));
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6px,rgba(0,0,0,0.78) 38%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 6px,rgba(0,0,0,0.78) 38%,transparent 100%);
}
/* ---------- A2 · RITMO INTERNO DOS SATELITES ----------------------
Medido antes: vaos 29 / 0 / 16 / 8 / 22 e recuos 18/18/18/18 nos dois
satelites — recuo unico e medalhoes identicos (56px) JA valiam; fora da
escala so o vao do topo (29) e o da base (22).
O 29 nao era padding: era padding 26 + ~3 de MEIA-LEADING do selo
inline-block (o line box empurra). display:block + width:fit-content
zera o leading e deixa o padding mandar sozinho: 32/24, da escala.
Alturas: os cards diferem (desc de 4 x 3 linhas). Por ordem, ficam
IGUAIS entre si via min-height do maior; o vao descricao->base do
Bonus 3 absorve a diferenca (reportado) e a pilha central continua
ditando a altura da linha do grid. */
.sat{padding:32px 18px 24px}
.sat .selo{display:block;width:fit-content}
.sat{min-height:273px}
} /* fim do FECHAMENTO F1-F5 + A1 + A2 */
/* ---------------------------------------------------------------------
EMENDA DO MARQUEE DOS DEPOIMENTOS — bugfix de defeito PRE-EXISTENTE,
exposto pela verificacao da remocao de um depoimento (22/08).
O keyframe anda translateY(-50%), percentual DA CAIXA DO TRACK. O
`.depo-box .tcol{display:flex}` com align stretch forcava o track a
712px (altura do box), entao o loop andava 356px num conteudo de
periodo 1028px e SALTAVA no reinicio — com 6 depoimentos ou com 5, a
conta nunca fechou desde que o .depo-box entrou. height:max-content
devolve ao track a altura do conteudo: -50% volta a ser exatamente uma
metade e a emenda fecha por construcao (metades espelhadas, conferido:
as tres colunas com a mesma ordem na copia e na duplicata).
Sem media query: no celular a lista e estatica (animation:none) e
max-content e igual ao auto. PROVA por diff de captura A/B: track em 0
contra track em -50%, pixels diferentes 16,7% antes, ~0 depois. */
.depo-box .tcol-track{height:max-content}
/* A4 · carona: a linguagem de canto dos selos e uma so nos dois
breakpoints — o mesmo border-radius:10px do F2, agora no celular. */
@media (max-width:760px){
.bonus-section .selo{clip-path:none;border-radius:10px}
}
/* ==========================================================================
Camada · REFINO #metodo + #quem (23/08)
Auditoria de 5 lentes + verificação adversarial independente; cada número
foi medido no harness (shot.mjs/CDP) antes e depois, e cada regra testada
nesta posição de cascata (fim do arquivo). Nada toca zonas protegidas.
========================================================================== */
/* --- #metodo ---------------------------------------------------------- */
/* 1 · Banda 760-899: o bloco @media 899 assumia empilhado, mas o auto-fit
da base (441) mantinha 2 colunas de ~352px — a pilha de 4 recortes
flutuava com ~180px mortos ACIMA e ABAIXO (align-items:center) e o CTA
quebrava em 2 linhas. Uma declaração efetiva o empilhamento que o bloco
3548 já supõe. Medido a 800: morto abaixo cai de 180px para 1px. */
@media (max-width:899px){
.urgencia-grid{grid-template-columns:1fr}
}
/* 2 · O h2 da seção era o único título sem o tracking da camada Outfit
(.014em, linha 5277) e com leading 1.02 contra 1.08 do cânone. 4 linhas
antes e depois em 11 larguras (360-2560); folga mínima 1px em ≥1920
(MEDICINA BRASILEIRA 516,9px numa coluna de 518) — se atualização de
fonte requebrar, o rollback é só do letter-spacing. */
.urgencia-grid h2{letter-spacing:.014em;line-height:1.08}
/* 3 · .cfm-list li a 15.5px intercalado entre parágrafos de 16px no mesmo
fluxo — corpo MENOR com tinta MAIS clara (ênfase), sinal misto. Escopado
em .urgencia-grid de propósito: .cfm-list--card li{14px} (linha 1120) é
CSS morto hoje, mas apendar .cfm-list li{16px} o fliparia por ordem
(mesma especificidade 0,1,1) se o padrão --card voltar. */
.urgencia-grid .cfm-list li{font-size:16px}
/* 4 · O CTA quebrava com órfã curta (“da norma”, linha de 89px sob uma de
198) em 360/390; em linha única pede 401px, não cabe. balance equilibra
(126/161) sem mudar altura; no desktop (1 linha) é no-op medido. */
.urgencia-grid .btn{text-wrap:balance}
/* 5 · .news-tag pedia 335px em linha única (.16em) contra 324 de container
em 360 — quebrava com órfã “PUBLICOU”. Com .12em pede 317,5px: linha
única em 360 (folga 6,5), duas linhas BALANCEADAS em 320. Desktop
intacto (media não aplica). */
@media (max-width:760px){
.news-tag{letter-spacing:.12em;text-wrap:balance}
}
/* 6 · SOMBRA DOS RECORTES, a reforma. A camada da linha 5642 nunca
funcionou: filter é aplicado ANTES do clip-path no MESMO elemento, então
o drop-shadow também era recortado (sombra-teste vermelha: zero pixels;
comentário de lá corrigido). Forma que funciona: o RASGO vai para o img
(papel = background+padding no img; os três polígonos copiados byte a
byte da base 3457/3479/3501) e o drop-shadow fica no figure, que já não
recorta nada. dy pequeno + blur 12: a sombra vaza ACIMA da borda de cada
papel da frente e desenha a emenda — dy grande morre atrás do irmão
seguinte, que pinta por cima na ordem do DOM. Medido: emendas
papel-sobre-papel caem de lum 253-255 para 223-242, rim sutil no fundo
(20,12,6 → 16,10,5), geometria pixel-idêntica em 1440/1024/360. */
.nz,.nz:nth-child(3n+2),.nz:nth-child(3n){clip-path:none}
.nz{background:none;padding:0;box-shadow:none;filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}
.nz img{
background:#fbf8f1;
padding:clamp(14px,1.6vw,20px) clamp(10px,1.2vw,16px);
clip-path:polygon(
0.0% 1.7%, 1.8% 3.1%, 3.5% 2.6%, 5.6% 0.5%, 7.9% 0.5%, 10.1% 0.6%,
11.9% 2.1%, 14.6% 0.8%, 16.5% 3.0%, 19.5% 2.8%, 21.6% 4.5%, 23.3% 4.0%,
25.3% 0.9%, 27.1% 1.6%, 29.8% 1.1%, 32.2% 3.0%, 34.3% 2.7%, 36.0% 0.6%,
37.9% 3.2%, 40.1% 1.7%, 42.5% 2.2%, 44.5% 3.7%, 47.1% 1.3%, 49.5% 2.6%,
52.4% 3.4%, 54.4% 4.5%, 56.1% 2.1%, 58.8% 1.0%, 61.1% 0.5%, 63.6% 3.6%,
66.0% 4.1%, 68.0% 3.3%, 70.5% 2.8%, 72.7% 3.9%, 75.6% 2.3%, 78.2% 0.6%,
80.8% 3.1%, 83.7% 3.8%, 85.7% 2.0%, 88.3% 0.4%, 90.5% 1.0%, 92.3% 0.6%,
95.0% 0.9%, 96.9% 2.0%, 99.7% 0.6%, 100.0% 2.0%, 98.6% 13.3%, 99.3% 24.6%,
99.2% 33.7%, 98.5% 45.1%, 99.4% 52.9%, 99.3% 61.0%, 98.9% 70.5%, 99.6% 78.8%,
99.2% 87.9%, 100.0% 95.6%, 97.4% 97.5%, 95.0% 96.8%, 93.3% 95.8%, 90.6% 95.9%,
87.9% 98.0%, 85.7% 99.3%, 83.2% 99.4%, 81.5% 98.8%, 79.7% 98.2%, 78.0% 99.7%,
76.2% 99.3%, 74.1% 99.6%, 71.3% 97.1%, 69.5% 98.6%, 67.4% 98.1%, 65.6% 96.0%,
62.6% 97.7%, 60.4% 99.3%, 58.6% 98.2%, 56.6% 96.1%, 54.8% 99.6%, 51.9% 97.4%,
50.1% 97.4%, 48.4% 97.4%, 45.5% 96.0%, 42.9% 98.6%, 40.8% 99.0%, 38.1% 97.4%,
35.4% 98.3%, 33.5% 96.2%, 30.5% 96.0%, 27.8% 96.2%, 25.2% 98.7%, 22.8% 98.2%,
21.2% 99.6%, 19.2% 98.6%, 16.6% 95.6%, 14.4% 95.7%, 11.4% 95.6%, 9.3% 98.8%,
7.4% 98.9%, 5.5% 97.0%, 2.7% 96.1%, 0.4% 96.9%, 0.0% 99.4%, 1.5% 93.4%,
1.3% 82.4%, 0.6% 73.1%, 0.8% 62.1%, 1.6% 51.1%, 0.9% 42.1%, 1.3% 30.4%,
0.6% 22.5%, 1.5% 14.8%);
}
.nz:nth-child(3n+2) img{
clip-path:polygon(
0.0% 4.3%, 2.9% 4.1%, 4.6% 2.8%, 6.8% 2.6%, 8.6% 1.1%, 10.8% 1.3%,
13.1% 0.4%, 14.8% 3.4%, 17.0% 2.5%, 19.6% 1.8%, 21.3% 3.7%, 23.7% 3.1%,
26.2% 4.5%, 28.3% 3.6%, 30.4% 2.8%, 32.9% 1.7%, 34.7% 2.3%, 37.3% 2.8%,
39.5% 3.1%, 41.3% 1.1%, 43.4% 3.8%, 45.3% 0.8%, 47.0% 0.5%, 49.0% 2.8%,
51.7% 1.7%, 53.9% 1.5%, 55.9% 3.6%, 58.3% 1.4%, 60.0% 3.7%, 62.6% 3.9%,
64.5% 2.6%, 67.4% 2.8%, 70.3% 1.0%, 73.3% 0.5%, 75.5% 0.4%, 78.2% 3.3%,
81.2% 3.8%, 84.1% 2.6%, 87.1% 3.5%, 89.2% 4.5%, 91.3% 1.1%, 93.0% 2.3%,
94.9% 4.3%, 97.8% 1.2%, 99.6% 2.6%, 100.0% 2.0%, 99.3% 12.9%, 98.5% 22.0%,
99.2% 31.2%, 98.6% 42.7%, 98.8% 54.1%, 98.8% 63.2%, 98.8% 74.4%, 99.2% 82.6%,
98.7% 91.6%, 100.0% 97.3%, 97.2% 99.2%, 94.8% 98.3%, 92.4% 96.1%, 90.4% 95.6%,
88.7% 97.3%, 86.4% 98.7%, 84.0% 97.7%, 81.7% 96.6%, 80.1% 98.1%, 77.4% 99.1%,
74.6% 98.8%, 72.1% 99.0%, 69.8% 97.9%, 68.1% 96.7%, 65.9% 96.7%, 63.5% 97.3%,
61.2% 98.4%, 58.3% 99.3%, 55.5% 96.0%, 53.2% 96.4%, 50.6% 97.1%, 48.6% 98.3%,
46.5% 98.4%, 43.6% 98.2%, 41.5% 97.9%, 38.7% 97.6%, 36.3% 98.6%, 34.3% 99.3%,
32.4% 98.6%, 29.7% 97.5%, 27.9% 97.7%, 26.1% 97.3%, 23.9% 96.0%, 21.9% 96.0%,
20.0% 95.5%, 17.5% 99.5%, 14.8% 98.5%, 12.7% 99.1%, 9.9% 99.3%, 7.3% 98.0%,
4.7% 98.4%, 3.0% 95.8%, 0.5% 99.0%, 0.0% 96.9%, 0.4% 95.3%, 0.6% 85.2%,
1.0% 74.6%, 1.1% 64.0%, 1.4% 53.2%, 1.1% 43.1%, 0.6% 34.5%, 1.4% 27.0%,
0.9% 19.0%, 1.1% 10.4%);
}
.nz:nth-child(3n) img{
clip-path:polygon(
0.0% 1.9%, 1.9% 1.0%, 4.8% 2.8%, 7.4% 2.7%, 9.5% 3.4%, 11.9% 3.7%,
14.4% 3.9%, 16.7% 1.0%, 18.5% 3.4%, 20.3% 3.1%, 22.8% 0.6%, 25.5% 0.4%,
28.3% 3.9%, 30.2% 3.4%, 32.8% 0.8%, 35.3% 0.8%, 38.2% 3.3%, 41.2% 0.5%,
43.2% 3.0%, 45.7% 1.1%, 48.5% 3.9%, 50.6% 0.9%, 53.1% 2.1%, 55.6% 2.4%,
57.8% 0.4%, 59.6% 2.3%, 62.2% 2.1%, 64.8% 2.6%, 67.7% 3.1%, 69.7% 0.9%,
71.4% 0.5%, 74.2% 4.1%, 76.9% 0.8%, 79.4% 0.8%, 82.2% 3.1%, 84.9% 2.9%,
87.1% 3.9%, 90.0% 1.3%, 92.2% 3.5%, 94.8% 2.1%, 97.0% 4.5%, 99.0% 1.2%,
100.0% 1.2%, 99.2% 13.4%, 99.1% 25.0%, 98.7% 36.4%, 99.3% 47.1%, 99.6% 54.9%,
98.8% 62.8%, 99.3% 70.1%, 99.4% 80.0%, 99.3% 88.6%, 100.0% 99.2%, 97.0% 97.1%,
94.4% 97.3%, 92.1% 95.5%, 89.3% 96.2%, 87.6% 97.2%, 84.7% 97.0%, 82.4% 96.9%,
80.5% 96.6%, 77.8% 99.4%, 75.5% 97.1%, 73.4% 96.8%, 70.5% 95.8%, 68.5% 99.0%,
65.7% 97.1%, 62.9% 96.0%, 61.0% 97.2%, 58.9% 96.3%, 56.4% 98.7%, 54.1% 97.1%,
52.1% 98.9%, 49.9% 99.4%, 47.6% 95.7%, 44.8% 99.5%, 42.1% 96.6%, 39.5% 99.6%,
36.8% 98.9%, 34.1% 98.3%, 32.0% 99.0%, 29.2% 98.7%, 26.3% 97.5%, 24.5% 96.9%,
22.2% 99.6%, 19.4% 98.5%, 17.8% 96.4%, 15.2% 98.0%, 13.3% 97.4%, 10.9% 96.7%,
8.6% 97.3%, 6.0% 98.9%, 4.2% 97.6%, 1.5% 96.2%, 0.0% 98.3%, 0.5% 93.1%,
0.5% 84.2%, 1.6% 73.0%, 1.3% 62.7%, 1.4% 53.8%, 0.8% 46.4%, 1.4% 37.6%,
0.6% 29.8%, 1.4% 22.3%, 1.5% 13.7%);
}
/* --- #quem ------------------------------------------------------------ */
/* 7 · `.qm-papeis span` (6425) engolia o próprio círculo de ícone, que
TAMBÉM é um span: display:block (perdia o place-items da 6420) e
margin-top:3px — glifo 18px encostado no canto do círculo de 38
(desvio do centro dx=dy=-9) nos 4 itens, nos dois breakpoints.
Contraprova: .qm-cred-ic, o mesmo círculo, mede dx=dy=0. */
.qm-papeis .qmp-ic{display:grid;margin-top:0}
/* 8 · Na faixa 700-1099 a credencial ficava EM FLUXO (margin-top:-46px da
base 6332; a âncora absoluta só existia em ≥1100): transbordava o
retrato em 91-127px e cobria até 99px da 1ª foto do bento. Mesma âncora
do desktop; a linha da grade é da carta, então nada mais se move
(before/after byte-idêntico fora do cartão). 700 e não 760.05 porque o
fix casa com a faixa EXISTENTE do layout de 2 colunas (6560/6592). */
@media (min-width:700px) and (max-width:1099px){
.qm-cred{position:absolute;left:14px;right:14px;bottom:14px;margin:0}
}
/* 9 · Banda 1100-1209: “Dra. Juliana Romanato” (156px a 15px) não cabia na
caixa de 133px e o cartão crescia a 190px, cobrindo 22,7% do retrato.
Compressão mínima só na banda: caixa vai a 155px e o nome a 14px pede
145,6 — 1 linha, cartão 149px (17,8%). Inerte fora da banda (medido
1099/1220/1240/1280/1440). */
@media (min-width:1100px) and (max-width:1219px){
.qm-cred{left:10px;right:10px;gap:10px;padding:12px 14px 12px 12px}
.qm-cred-txt b{font-size:14px}
}
/* 10 · O rótulo MÉDICA a 9px era o menor tipo móvel da página, abaixo dos
pisos das próprias camadas de auditoria (10px .cf-selo 4132; 11px mono
móvel 4112). 10px segue o precedente do .cf-selo; a largura do cartão
não muda (quem dita é o de 10.5px), altura +2px absorvida. */
.qm-cred-txt i{font-size:10px}
/* 11 · Eyebrow do #quem com .18em contra .22em canônico dos 6 eyebrows
mono da página (5 .sec-eyebrow + .bonus-eyebrow, todos 2.31px). Só
desktop: a 360 os 301px de .22em não cabem na coluna de 299 (2px). */
@media (min-width:760.05px){
.qm-eyebrow span{letter-spacing:.22em}
}
/* 12 · .qm-h2 computava 30px em 360 — único h2 de seção fora do piso de
26px que a camada de escala (4050-4051) normalizou. Acima de 882px o
clamp novo é idêntico ao antigo; a quebra segue 2 linhas balanceadas
(“Prazer, eu / sou a Juliana.”). */
.qm-h2{font-size:clamp(26px,3.4vw,46px)}
/* 13 · O nowrap do eyebrow travava o min-content da coluna em 299px:
abaixo de 359 a credencial pintava 22px FORA do painel, sobre o fundo
escuro. Guarda estreita: em 360 já cabe (287 ≤ 288) e nada muda. */
@media (max-width:358px){
.qm-eyebrow span{white-space:normal}
}
/* 14 · Citação do bento espremida pela célula 4/3 (6547) em ≤~420: em 360
scrollHeight 117 contra 106 de célula — padding declarado de 16px
comprimido a 6 e overflow:hidden (6483) armado. Solto SÓ onde o defeito
existe (teto 429, não 699: acima disso a fileira do meio inflaria pela
razão intrínseca da foto alta sem necessidade). Em 360 as fileiras vão
a 108/180/108, clip 0, e a foto par (.qb--d) acompanha sem vão. */
@media (max-width:429px){
.qb-cita{aspect-ratio:auto;min-height:0}
.qb--d{aspect-ratio:auto}
}
/* 15 · Três raios no mesmo painel: retrato 18px fixo (6324), bento e
citação 14px (6386/6394), credencial 16px. 18 e 14 não são degraus da
escada re-tokenizada (4489-4501) no desktop; o precedente da própria
varredura (4517: o retrato antigo .quem-foto → --r-lg=16) decide o
degrau. Painel interno unificado em 16px. */
.qm-retrato img{border-radius:var(--r-media)}
.qb,.qb-cita{border-radius:var(--r-media)}
/* 16 · Aspas da citação em #d69a3c: 2,42:1 sobre o cartão creme — quase
somem — e segundo dourado a centímetros do em em #8a5a14 (5,81:1).
#8a5a14 é a tinta canônica de glifo dourado em superfície clara
(eyebrows, .qm-virada, ícones da própria seção, o em vizinho). */
.qb-aspas{color:#8a5a14}
/* ---------- Foco unificado do .btn: complemento medido (23/08) ----------
Com a regra da era do chanfro removida (ex-1027), o anel externo da 4541
passou a aparecer de verdade e a medicao por teclado revelou o buraco da
lista da 4124: o CTA dos modulos senta no creme do .mods-panel e o anel
gold-honey mede 1,42:1 (hero 5,44 e depoimentos 5,06 com #8a5a14; fundos
escuros 10,8-11,6 com gold-honey). Mesmo remedio da 4124, mesmo dourado
escuro dos paineis claros. */
.mods-panel a:focus-visible{outline-color:#8a5a14}
/* ==========================================================================
Camada · RODADA DE LAYOUT #metodo + #quem (23/08, referência visual do
dono). A referência é IMAGEM DE IA com conteúdo fabricado: ela governa
só moldura, sombra, arranjo e o cartão — os seis screenshots reais são
o conteúdo e NÃO mudam. Nenhum texto mudou (spans envolvem palavras que
já existiam; certificado por strip de tags contra o HEAD).
INVENTÁRIO DE ÓRFÃOS desta camada (neutralizados por cascata, mantidos
no arquivo como os demais órfãos do projeto):
· o RASGO inteiro dos recortes: os 3 polígonos da base (3457/3479/3501),
as cópias em .nz img da camada REFINO, o papel por background+padding
no img e o drop-shadow no figure (REFINO item 6 + camada 5642);
· a família da citação do bento: .qb-cita/.qb-aspas (6393-6407,
6483-6488) e o bloco max-width:429 da camada REFINO (o .qb--d volta
ao 4/3 aqui, porque a citação que pedia a fileira alta saiu);
· o .news-tag centrado em bloco (3536-3540): agora vive na régua
.cfm-foot, em flex.
========================================================================== */
/* --- E2 · cartão do miolo (linguagem do painel de bônus) ---------------- */
/* Gramatica de profundidade: fundo do entorno medido em rgb(20,12,6)
(lum ~13,6); o cartão desce para #120b06→#0c0703 (lum 12,5→8,0), camada
à frente mais escura. Borda, sombra e medalhão são as receitas do painel
(7255-7273) e do .med (7306), com o medalhão QUADRADO da referência. */
.cfm-card{
position:relative;margin-top:26px;
background:linear-gradient(160deg,#120b06,#0c0703 70%);
border-radius:var(--r-lg);
padding:clamp(20px,2.2vw,30px) clamp(18px,2vw,28px);
box-shadow:0 40px 90px -40px rgba(0,0,0,0.85),0 0 90px -20px rgba(214,154,60,0.18);
}
.cfm-card::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
border-radius:var(--r-lg);padding:1px;
background:linear-gradient(180deg,
var(--gold-honey) 0%,
var(--gold-mid) 22%,
var(--line-30) 62%,
var(--line-15) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
}
/* alvo explícito, nunca `> *` (armadilha do selo do painel, 7274) */
.cfm-card-head,.cfm-card p,.cfm-card .btn{position:relative;z-index:1}
.cfm-card-head{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.cfm-med{
flex:none;width:60px;height:60px;border-radius:12px;
display:grid;place-items:center;
background:radial-gradient(120% 120% at 50% 12%,rgba(214,154,60,0.16),rgba(24,15,8,0.9) 68%);
border:1px solid var(--line-25);color:var(--gold-honey);
box-shadow:inset 0 1px 0 var(--line-30);
}
.cfm-med .ic{width:30px;height:30px}
.cfm-card-title{
margin:0;font-size:clamp(19px,1.75vw,25px);line-height:1.25;
font-weight:700;color:var(--ink-title);text-wrap:balance;
}
/* o p do cartão herdava o mb 34 do p:last-of-type da base (450) */
.urgencia-grid .cfm-card p{margin:0 0 22px}
/* e o p de intro virou o único p direto da coluna: sem isto ele herdaria
os mesmos 34px e abriria a intro da lista */
.urgencia-grid h2 + p:last-of-type{margin-bottom:16px}
/* --- E3 · checks: do traço fino ao glifo cheio arredondado -------------- */
/* mesma caixa de renderização nos quatro por construção: content vazio +
19x19 fixo + máscara (a cor segue no background, canônico gold-honey).
A animação de reveal (1150-1155) transforma o ::before e segue valendo. */
.cfm-list li::before{
content:"";flex:none;width:19px;height:19px;margin-top:3px;
background:var(--gold-honey);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8l4.8 4.8L19.5 7' fill='none' stroke='%23000' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8l4.8 4.8L19.5 7' fill='none' stroke='%23000' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* --- E4 · recortes viram cartões ---------------------------------------- */
/* Sai o rasgo (órfãos no inventário acima). O papel volta ao figure, sem
clip em lugar nenhum — então box-shadow volta a funcionar direto, sem
drop-shadow. Sombra em duas camadas na estrutura da casa (contato curto
+ ambiente difusa, 5076), com opacidade de fundo escuro. Rotações
±1,7/1,4° → −0,5/+0,4° (quase alinhado); cascata mais apertada
−23 → −42px no desktop, com os títulos conferidos visíveis. */
.nz img,.nz:nth-child(3n+2) img,.nz:nth-child(3n) img{clip-path:none;background:none;padding:0}
.nz{
background:#fbf8f1;
padding:clamp(12px,1.4vw,18px) clamp(10px,1.2vw,14px);
border-radius:12px;filter:none;
box-shadow:0 2px 5px rgba(0,0,0,0.4),0 26px 54px -26px rgba(0,0,0,0.65);
}
.nz:nth-child(odd){transform:rotate(-0.5deg)}
.nz:nth-child(even){transform:rotate(0.4deg)}
.nz + .nz{margin-top:clamp(-42px,-2.4vw,-24px)}
/* A régua é o TERCEIRO filho do grid e, ocupando 1/-1, impede o auto-fit
de colapsar a trilha fantasma: as colunas caíam de 518 para 327px. Coluna
explícita no degrau que já existe (a costura 899/900 da banda da base):
≤899 segue 1fr pela camada REFINO; ≥900 vira o par de colunas de sempre. */
@media (min-width:900px){
.urgencia-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* --- E5 · régua de rodapé da seção -------------------------------------- */
.cfm-foot{
grid-column:1/-1;display:flex;align-items:center;
justify-content:space-between;gap:18px;margin-top:10px;
}
.cfm-foot .news-tag{display:inline-flex;align-items:center;gap:10px;margin-top:0;text-align:left}
.cfm-foot .news-tag .ic{flex:none;width:15px;height:15px;color:var(--gold-mid)}
.cfm-foot .news-tag span{display:block;text-wrap:balance}
.cfm-ecg{flex:none;width:clamp(84px,9vw,140px);height:24px;color:var(--gold-mid)}
@media (max-width:760px){
.cfm-ecg{width:72px}
.cfm-foot{gap:14px}
}
/* --- Q1 · bento em seis fotos ------------------------------------------- */
/* A citação saiu do grid (a frase segue na carta, .qm-virada). O slot é um
.qb vazio (paleta da seção, mesma proporção), PENDENTE: foto real. A
fileira alta que a citação pedia em ≤429 morre com ela: o .qb--d volta
ao 4/3 e as três fileiras ficam uniformes de novo no celular. */
@media (max-width:429px){
.qb--d{aspect-ratio:4/3}
}
/* --- Q2 · faixa de papéis: tratamento A3 dos chips ----------------------- */
/* Medido antes: caixas 18x18 idênticas, vão 14,0 nos quatro, tops de
título e de descrição uniformes, corpo 14.5/13 idêntico — já no padrão.
Dois defeitos reais: (1) glifos em gold-honey (#ecc45f) sobre o creme
do painel = 1,4:1, quase invisíveis — vão à família #8a5a14 calibrada
para fundo claro nesta seção (~4,9:1); (2) centroide de alfa da bandeira
(ic-flag) a −7,5%/−8,3% do centro (mastro à esquerda, pano no topo) —
nudge de +1,4/+1,5px devolve ao alvo de 3%. Os outros três já estão
dentro (users +1,1/+0,5; cross 0/−2,1; book 0/−1,9). */
.qm-papeis .qmp-ic .ic{color:#8a5a14}
.qm-papeis li:nth-child(4) .ic{transform:translate(1.4px,1.5px)}
/* ---------- Fotos do bento + escudo da credencial (23/08, rodada curta) --
O placeholder PENDENTE saiu do HTML; ele nunca teve CSS próprio (reusava
.qb), então nada vira órfão aqui. As seis células agora servem
bento-0N-560.webp (560x560 = 2x da célula mais larga, 280px em 960).
1) Na selfie com os filhos (qb--c) os olhos da filha ficam a ~10% do
topo: o corte vertical das células 4/3 (12,5% por lado no centro)
passaria NA linha dos olhos. center 30% desloca a janela (corte
7,5% topo / 17,5% base) e protege os três rostos; sem media query
porque vale nos dois regimes (nas células altas o eixo vertical é
inteiro e a declaração é quase inerte).
2) Escudo da credencial: mesmo defeito dos papéis — glifo gold-honey
sobre o cartão branco, 1,64:1 medido. Mesma correção, #8a5a14
(família calibrada para claro nesta seção). O escudo do rodapé do
#metodo usa var(--gold-mid) em seletor próprio (.cfm-foot .news-tag
.ic) e não compartilha token com esta regra. */
.qb--c img{object-position:center 30%}
.qm-cred-ic .ic{color:#8a5a14}
/* ==========================================================================
Camada · RODADA MOBILE M1-M6 (23/08). Publicada a página, os ajustes de
celular pedidos pelo dono + o M1 (desktop e mobile). Cada número medido
no harness antes e depois; a causa raiz do M5 está no comentário dele.
========================================================================== */
/* --- M1 · #para-quem vira painel claro (desktop E mobile) ---------------- */
/* Mesma anatomia do .depo-box/.mods-panel: o .container vira o painel (a
seção não tem wrapper interno e o padrão dos vizinhos é painel recuado
por --card-pad). Tokens --lt-* definidos AQUI porque só existem dentro
dos painéis claros (aviso da 6627). Cards invertem para a linguagem do
cartão branco canônico (.v4-mod: #fff, borda 101,71,22/.10, sombra em 2
camadas) e os medalhões vão à família #8a5a14 como os papéis da #quem. */
#para-quem .container{
max-width:none;margin:0 var(--card-pad);width:auto;
--lt-ink:#241708;--lt-ink-2:#57493a;--lt-ink-3:#8a7c6a;
background:linear-gradient(180deg,#faf6ee,#f2ece0);
border:1px solid rgba(101,71,22,0.10);
border-radius:clamp(26px,3.2vw,48px);
padding:clamp(34px,4.6vw,72px) clamp(18px,3vw,52px) clamp(38px,4.6vw,64px);
box-shadow:0 40px 100px -50px rgba(0,0,0,0.9),inset 0 1px 0 rgba(255,255,255,0.6);
}
#para-quem .container > *{max-width:1380px;margin-inline:auto}
/* no depo o painel e flex align-center e o eyebrow encolhe (210px); o
container-painel daqui e block, entao o fit-content reproduz o pill */
#para-quem .sec-eyebrow{width:fit-content;border-color:rgba(101,71,22,0.22);background:rgba(255,255,255,0.7)}
#para-quem .sec-eyebrow span{color:#8a5a14}
#para-quem .sec-eyebrow .dot{background:#b5771e;box-shadow:none}
#para-quem .section-title{color:var(--lt-ink)}
#para-quem .section-title::after{opacity:.35}
#para-quem .section-title .gold-accent{
background:linear-gradient(135deg,#8a5a14,#c98a28);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
#para-quem .section-subtitle{color:var(--lt-ink-2)}
/* A superficie do card e o ::before mascarado (squircle v3 do dono, 5336:
furo no canto + icone vazado; o card e background:none e o ::before
pinta ACIMA do fundo do elemento, ordem de pintura do stacking context).
A inversao entao recolore o ::before: branco canonico + bloom dourado
suave + anel interno na tinta clara (a mascara recorta box-shadow
externo, entao a definicao e por inset, que a mascara acompanha). O
medalhao segue VAZADO como a v3 manda, so trocando o gold-honey (1,4:1
no creme) pela familia #8a5a14. */
#para-quem .conq-card{background:none;border:0;box-shadow:none}
#para-quem .conq-card::before{
/* C1 item 2 (23/08): bloom da base reduzido 0.16/0.05 -> 0.07/0.02 —
a tinta na base media (7,16,31) de delta sobre o branco e lia como
mancha no painel claro; no novo nivel mede ~(3,7,13), brilho sutil. */
background:
radial-gradient(85% 72% at 50% 118%,
rgba(201,138,40,0.07), rgba(201,138,40,0.02) 55%, transparent 76%),
linear-gradient(180deg,#ffffff,#faf5ec);
box-shadow:inset 0 0 0 1px rgba(101,71,22,0.12),inset 0 1px 0 rgba(255,255,255,0.9);
}
#para-quem .conq-card h3{color:var(--lt-ink)}
#para-quem .conq-card p{color:var(--lt-ink-2)}
#para-quem .trust-ic{
background:none;
border:1.5px solid rgba(138,90,20,0.55);
color:#8a5a14;
}
#para-quem .conq-card:hover .trust-ic{
border-color:rgba(138,90,20,0.9);
box-shadow:0 0 20px rgba(138,90,20,0.22);
}
/* anel de foco pela regra da 4124: dourado escuro em contexto claro */
#para-quem a:focus-visible{outline-color:#8a5a14}
/* --- M2 · depoimentos no celular: lista estática mascarada --------------- */
/* ≤940 já empilha, desliga a animação e esconde os .dup (2798-2811; o
prefers-reduced-motion desliga o marquee no desktop na 2807, conferido).
Aqui só falta o M2: as colunas 2-3 fora do DOM visível e a janela de
3 cards inteiros + metade do 4º. Medido em 360: card 184, gap 16 →
3×184 + 3×16 + 92 = 692px. Sem scroll interno: overflow hidden, o
resto da página segue na rolagem natural. */
@media (max-width:760px){
.depo-box .tcol--2,.depo-box .tcol--3{display:none}
/* a 4451 (.depo-box .tq, mesma especificidade, posterior a 2805)
ressuscitava os .dup; e a 4469 fixava a pista em 504. */
.depo-box .tq.dup{display:none}
/* V4 (23/08): sai a janela de 716 com o 4º cortado; ficam EXATAMENTE 3
depoimentos inteiros em altura natural. O nth-of-type conta as figures
da coluna 1 (1-5 únicas, 6-10 duplicatas): n+4 esconde 4º e 5º — só
aqui; no desktop os cinco seguem no loop. */
.depo-box .tcol:first-child .tq:nth-of-type(n+4){display:none}
.depo-box .tcols{height:auto;max-height:none;overflow:visible;
-webkit-mask-image:none;mask-image:none}
}
/* --- M3 · #metodo no celular: prova de terceiros antes do pitch ---------- */
/* Ordem nova ≤760: título → checks → recortes → cartão+CTA. A coluna 1
vira display:contents e os filhos entram no grid (1 coluna ≤899) com
order — sem mover HTML. ⚠¹ o data-reveal da coluna perde a caixa: o
reveal não anima esses filhos no celular (conteúdo sempre visível —
aceito, seguro para conversão). ⚠² gap:0 porque o row-gap somaria com
as margens próprias dos blocos em todos os vãos. */
@media (max-width:760px){
.urgencia-grid{gap:0}
.urgencia-grid > div:first-child{display:contents}
.urgencia-grid h2{order:1}
.urgencia-grid h2 + p{order:2}
.urgencia-grid .cfm-list{order:3}
.urgencia-visual{order:4;margin-top:16px}
/* V5 (23/08): a régua é legenda dos recortes e sobe colada neles;
o cartão com o CTA fecha a seção. */
/* L5 (23/08): a regua saiu da pagina; a regra de ordem que a
posicionava morreu junto (o cartao com o CTA segue em order:6). */
.urgencia-grid .cfm-card{order:6;margin-top:30px}
}
/* --- M4 · módulos no celular: faixa nativa, receita da faixa de bônus --- */
/* O motor coverflow rodava em qualquer largura e os cards de 151px saiam
cortados nas bordas do painel. ≤760 o motor NÃO liga (patch no main.js:
o setPointerCapture engoliria a rolagem nativa — a lição do cf) e o CSS
monta a faixa: card inteiro central (min(64vw,230px) → 230 em 360, com
espiada simétrica de ~20px), snap por card, espaçador ::after como item
REAL (margem-end não conta na área de rolagem do Chromium) e
touch-action:auto anulando o pan-y do motor (4303). Setas escondidas:
cobririam as bordas do card; o arrasto nativo + dica bastam. --meta
liberado: na faixa todo card é "frente" e mostra o título. */
@media (max-width:760px){
/* C2+F1 (23/08): card FIXO 200px por ordem do dono ("proporcionalmente
menores"); altura segue a proporcao 2/3 do poster = 300 em 200.
Sistema C2 mantido: trilho full-bleed, padding-inline 24, gap 12,
scroll-padding 24, snap center; Chromium ignora padding-END (licao
da rodada R), o espacador e item real. Com card fixo as guardas
derivadas viram funcao da viewport. G1/G2a (23/08, referencias do
dono): fatia da espiada de 40px MEDIDA no vizinho ja escalado a .9
(a borda rendida recua 0.05*card); janela = 200+2*(12+40+10) =
324, inset com clamp em zero para viewport menor que a janela (a
fatia encolhe naturalmente). */
.fan{--fanw:200px}
/* G3-correcao (23/08): o overflow-x:clip do .mods-light .fan e
contencao do LEQUE 3D do desktop; aqui ele apertava a pintura a
caixa do container e comia a fatia do vizinho (25px pintados onde
a conta por rect dava 40 - as sondas da G/G2 mediram contra o
clip-path e nao viram este clip). No mobile quem corta e o
clip-path do proprio scroller, entao o clip do .fan abre. A faixa
nao vaza pagina: o stage e o scroller e contem os cards. */
.mods-light .fan{overflow-x:visible}
.fan-stage{
display:flex;gap:12px;height:auto;perspective:none;transform-style:flat;
overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
touch-action:auto;cursor:default;padding:0 24px 18px;scrollbar-width:none;
width:100vw;margin-inline:calc((100% - 100vw)/2);
scroll-padding-inline:24px;
/* o CORTE da guarda C2: o padding nao mascara conteudo rolado; quem
corta e o clip do proprio scroller. G2a: janela recalibrada para
a fatia VISIVEL do vizinho escalado ficar em 40. Quem CALA o
vizinho segue sendo o G2 (badge/titulo so no .is-center). */
clip-path:inset(0 max(0px,calc((100vw - 324px)/2)));
}
.fan-stage::-webkit-scrollbar{display:none}
.fan-card{
position:relative;left:auto;top:auto;
flex:0 0 var(--fanw);width:var(--fanw);
transform:none;opacity:1;z-index:auto;will-change:auto;
scroll-snap-align:center;
}
/* extremos CENTRADOS no repouso (D2): 24 + margem do 1o =
(100vw-200)/2 poe o card no centro, independente do inset; o fim
centra sozinho porque o fan-stage e o proprio scroller e o
padding-right DELE conta na area de rolagem (12 gap + espacador +
24 pad = (100vw-200)/2). Fatia identica em todas as posicoes. */
.fan-card:first-child{margin-left:calc(50vw - 124px)}
.fan-stage::after{content:"";flex:0 0 calc(50vw - 136px)}
.fan-meta{opacity:1}
.fan-nav{display:none}
/* G2+G2a-c (23/08): vizinhos MUDOS e RECUADOS - so o card .is-center
(marcado pelo main.js no ramo sem motor) mostra badge e titulo; os
demais encolhem a scale(.9) com origem no centro (recuo vertical
de ~15px em cima e embaixo; transform nao move layout nem snap) e
recebem o recuo de LUZ pela propria .fan-veil da secao (opacity
.26 sobre o poster escuro, carta em espera). Fade ASSIMETRICO
(G2c): sainte apaga/encolhe em .1s (transition do estado :not),
entrante acende/cresce em .25s (transition do estado base) -
opacidade, escala e luz juntas. Sem JS nao ha marca e nada muda. */
html.js .fan-card{transition:transform .25s ease}
html.js .fan-card .fan-badge,html.js .fan-card .fan-meta,
html.js .fan-card .fan-veil{transition:opacity .25s ease}
html.js .fan-card img{transition:filter .25s ease}
html.js .fan-card:not(.is-center){transform:scale(.9);transition-duration:.1s}
html.js .fan-card:not(.is-center) .fan-badge,
html.js .fan-card:not(.is-center) .fan-meta{opacity:0;transition-duration:.1s}
/* G3 (23/08): a intensidade do veu dos vizinhos vira VARIAVEL
(--veu-viz) para a calibragem A/B/C do dono - o veu de .26 deixava
o poster fotografico competindo com o central. saturate(.6) no img
apaga o dourado (filter no img nao cria grouping que importe: o
fan mobile nao flipa e o img ja e camada propria absoluta).
Entrante limpa no tempo LENTO (.25s, transicao base); sainte
escurece no RAPIDO (.1s, transicao do estado :not). */
/* J1 (23/08): o veu do vizinho e PLANO por contrato - sem mascara e
sem gradiente, solido em B, cobrindo o card inteiro no elemento
que escala. O computado em 360 ja dava mask none e fundo solido;
a guarda explicita impede fade vertical futuro do desktop de
vazar para ca (fade vertical e linguagem do desktop e morre
abaixo de 760). */
html.js .fan-card:not(.is-center) .fan-veil{
opacity:var(--veu-viz,.65);transition-duration:.1s;
mask:none;-webkit-mask:none;background-image:none;
}
/* G3c: o veu multiplicativo deixava a dinamica da arte passar (perfil
8..52 no miolo, banda dourada da lupa); a compressao no img achata
a coluna. As pontas que restam acesas sao EXTERNAS ao card: o creme
da secao pelos arcos do raio e o respiro do recuo G2a - a cobertura
do veu e integra (rect do veu = rect do card, medido). */
html.js .fan-card:not(.is-center) img{filter:saturate(.5) brightness(.7) contrast(.5);transition-duration:.1s}
}
/* --- M5 · packs de especialidade: a faixa volta a rolar ------------------ */
/* CAUSA RAIZ (armadilha nova, registrada no handoff): a base do motor
declara `.cf-frame{touch-action:pan-y}` (3846, "arrasto horizontal é
nosso") — certo para o arrasto por ponteiro do desktop. A camada da
faixa (8224) redefiniu overflow/snap/perspective mas ESQUECEU o
touch-action: o navegador só permitia pan vertical e a faixa nascia
morta no toque, desde sempre (a validação da rodada R foi geométrica,
não de pan real). Não era o guard do motor (o main.js desliga o motor
≤760 antes de qualquer listener) nem pointer-events (auto, medido).
E o card de 230 em 324 úteis deixava só 35px do vizinho à vista.
--cfcw 184 (banda 176-190): card ativo inteiro + 58px de espiada por
lado. GUARDA DO VERSO: altura max(184*1.12, 258) = 258, a mesma dos
258 validados; verso mais denso re-medido na largura nova (números no
relatório da rodada). */
@media (max-width:760px){
.cfw .cf-frame{touch-action:auto}
/* C3+F2 (23/08): o card VOLTA ao 230x258 do desktop por ordem do dono
("como era, sem os cortes"), o par do verso de origem (242 em 258;
o corte HORIZONTAL do selo era defeito de origem, morto no D1).
Sistema C2 mantido: frame full-bleed,
padding-inline 24, gap 12, scroll-padding 24, snap center, ALTURA
TRAVADA em 258 (height explicito: % no --cfcw resolveria contra a
largura). Guardas derivadas como no C2+F1 (janela = 230+2*24 = 278):
fatia do vizinho IGUAL em todas as posicoes; no G1/G2a (23/08)
ela vale 40 MEDIDA no vizinho ja escalado a .9 (janela =
230+2*(12+40+11.5) = 357, inset com clamp em zero; viewport menor
que a janela encolhe a fatia naturalmente).
Extremos (D2): 24 + margem do 1o = (100vw-230)/2 centra o repouso
e o espacador centra o fim de curso, porque o cf-frame NAO conta o
proprio padding-end na area de rolagem (ao contrario do
fan-stage). G2: o vizinho tambem fica MUDO, frente e verso, e
perde o flip ao perder o centro (regras html.js abaixo). */
.bonus-section .cfw{--cfcw:230px}
.cf-card{height:258px}
.cfw .cf-frame{
width:100vw;margin-inline:calc((100% - 100vw)/2);
padding-left:24px;padding-right:24px;
scroll-padding-inline:24px;
clip-path:inset(0 max(0px,calc((100vw - 357px)/2))); /* corte da guarda C2; G2a janela 357 */
}
.cf-card:first-child{margin-left:calc(50vw - 139px)}
.cf-stage::after{content:"";flex:0 0 calc(50vw - 127px)}
/* A2: a dica fala a lingua do dedo - abaixo de 760 o CLIQUE vira
TOQUE (spans no index; o desktop mantem CLIQUE no bloco proprio,
no fim do arquivo). */
.cf-hint .dica-clique{display:none}
/* G2+G2a-c (23/08): frente E verso dos vizinhos mudos, encolhidos a
scale(.9) (recuo vertical de ~13px; o !important bate o
transform:none !important do bloco M3+R3 - e o 3D do flip nao
sofre: o preserve-3d vive no .cf-inner, abaixo do card, e o
.is-center fica sem transform nem filter, flipando livre de
grouping) e com recuo de LUZ brightness(.88) - o pack e claro
sobre secao escura, carta em espera sem parecer defeito. Fade
assimetrico (G2c): sainte .1s, entrante .25s, opacidade + escala
+ luz juntas. Sem JS nao ha marca e nada muda. */
html.js .cfw .cf-card{transition:transform .25s ease,filter .25s ease}
html.js .cfw .cf-face>*{transition:opacity .25s ease}
html.js .cfw .cf-card:not(.is-center){transform:scale(.9)!important;filter:brightness(.88);transition-duration:.1s}
html.js .cf-card:not(.is-center) .cf-face>*{opacity:0;transition-duration:.1s}
}
/* --- H · hero mobile pela MONTAGEM do dono (23/08) - substitui o M6 --- */
/* Rosto em close dominando o alto da primeira dobra, bloco inteiro
assentado na base (flex-end), degrade vertical claro carregando o
contraste, selo no canto como esta. A foto e a MESMA cena do
banner-topo 1920x1080 (a montagem e um zoom dela; nao ha original
maior da cena no acervo - nitidez do close medida no relatorio).
Calibragem MEDIDA na fonte com regua (banner-topo 1920x1080): cabeca
do cabelo ao queixo y 60..550 (~490px), olhos y~340, eixo do rosto
x~1300. Proporcao da montagem: cabeca ~82% da largura do frame =>
zoom 0.61 CSS/px => background-size 325vw (upscale de dispositivo
1.2x em DPR2 e 1.8x em DPR3). Posicao: 73.3% horizontal segura o
eixo do rosto em ~55% da largura em qualquer vw; vertical por
comprimento -9.7vw (a imagem e mais BAIXA que o card em 800 - %
nao alcanca - e o comprimento escala com o zoom), olhos em 22.8%
(800), 28.4% (640) e 23.2% (844), na faixa 22-30 nos tres. O fundo
abaixo do fim da foto e o degrade + o creme do cartao. O zoom de
entrada sai: ampliaria o upscale do close. */
@media (max-width:760px){
.hero-card{
min-height:0;
height:calc(100vh - 20px);
height:calc(100svh - 20px);
display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-card .hero-bg{
background-size:325vw auto;
background-position:73.3% -9.7vw;
-webkit-mask-image:none;mask-image:none;
animation:none;
}
/* a copia desfocada e o scrim lateral pertenciam a composicao antiga
(medica a direita); no close eles borrariam e escureceriam o rosto */
.hero-blur-wrap,.hero-scrim-x{display:none}
/* degrade da montagem: foto limpa ate ~42% (o queixo cai em ~43% em
800), lavando ate a base clara; e ele quem carrega o contraste do
bloco (medido no relatorio da rodada) */
.hero--light .hero-card::after{
background:linear-gradient(180deg,
rgba(250,246,238,0) 0%,
rgba(250,246,238,0) 42%,
rgba(250,246,238,.62) 58%,
rgba(250,246,238,.9) 70%,
rgba(250,246,238,.97) 100%);
}
/* bloco na base, espacamento na escala de 8; selo (~64) + 24 de vao */
.hero-content{margin-top:0}
.hero-content .hero-title{margin:8px 0 0}
.hero-content .hero-lede{margin:16px 0 0}
.hero-content > .btn{margin-top:16px}
.hero-content .hero-time{margin-top:16px}
.hero-card .container{padding-bottom:88px}
}
/* J2 (23/08): o rosto respira no topo. O veu claro que cobria a foto
quase uniforme (o ::before do bloco <=880: 0.72 no topo) vira
degrade: ZERO ate a linha dos olhos (~30% da altura), encorpando
suave ate o valor da curva atual na faixa onde o bloco nasce (~48%
=> 0.42) e, dali para baixo, a curva ATUAL segue intacta. SO em
alturas >=700: em telas baixas o bloco ja nasce no topo (o texto
fica sobre o cabelo escuro) e o respiro derrubava H1 para 1.42 e
lede para 2.91 no pior-5% em 640 - o ponto de inicio sobe ate o
caso-limite: o sistema atual continua, nunca o valor da base.
Contrastes remedidos no relatorio da rodada J. */
@media (max-width:760px) and (min-height:700px){
.hero--light .hero-card::before{
background:linear-gradient(180deg,
rgba(253,251,246,0) 0%,
rgba(253,251,246,0) 30%,
rgba(253,251,246,.42) 48%,
rgba(253,251,246,.3) 58%,
rgba(253,251,246,.1) 78%,
transparent 92%);
}
}
/* J2b: nas alturas BAIXAS o bloco nasce sobre o cabelo escuro e a
medicao acusou lede a 4.05 no pior-5% em 640 (divida da H, que
certificou so o 800). Encorpar e permitido, afinar nunca: o miolo
do veu ganha +0.1..0.2 de alfa na faixa 34-62%; topo e base como
eram. */
@media (max-width:760px) and (max-height:700px){
.hero--light .hero-card::before{
background:linear-gradient(180deg,
rgba(253,251,246,.72) 0%,
rgba(253,251,246,.62) 34%,
rgba(253,251,246,.55) 50%,
rgba(253,251,246,.42) 62%,
rgba(253,251,246,.1) 80%,
transparent 92%);
}
}
/* ==========================================================================
Camada · RODADA V2-V7 (23/08) — partes de desktop. As frentes mobile
(V4-V7) vivem como emendas nos blocos da rodada M, acima. A V1 (embed
do Panda) está BLOQUEADA aguardando o snippet do dono — nada do vídeo
muda aqui.
========================================================================== */
/* --- V2 · respiro do painel claro da #para-quem -------------------------- */
/* Antes (medido): padding-block 66,24/64 em 1440 e 34/38 em 360. Dois
passos da escala de 8 no mínimo: 1440 vai a ~89/86 (+23/+22) e 360 a
56/56 (+22/+18). */
#para-quem .container{padding-block:clamp(56px,6.2vw,90px) clamp(56px,6vw,86px)}
/* --- C1 (23/08) · REVERSÃO do V3 por ordem do dono (erro de instrução,
não do agente): a anatomia squircle v3 VOLTA — os content:none e o
cânone dos depoimentos saíram; a superfície segue sendo a recoloração
clara da rodada M (branco no ::before mascarado, medalhão vazado em
#8a5a14). Da rodada V ficam só: painel claro, respiro V2 e eyebrow em
pill. Polimento de três itens na camada C1 mais abaixo. */
/* --- C4 (23/08) · VSL no Panda Video ------------------------------------- */
/* Wrapper responsivo com a proporção MEDIDA no player em reprodução:
408x720 (rendition vertical; o master 1080x1920 daria 0,5625 — a
diferença é arredondamento de rendition e a medida manda). O shell
.vsl-player acompanha a mesma razão (era 9/16 declarado) e mantém os
tetos de largura/altura do contêiner atual. O .vsl-video (5633) e o
vsl-poster.jpg viram órfãos — nada mais os referencia. */
/* o