/* ==========================================================
Engrenou - site institucional (v5 clean, jul/2026)
CSS unico, linkado por todas as paginas.
Conceito v5: fundo branco, tipografia gigante, hairlines,
teal raro, sombra so onde significa (previews de produto).
Blocos: tokens / base / icones / nav / botoes / footer /
hero home + money-hero / paradas (dor, magica, board) /
quatro lugares / split loja / prova / preco resumido /
final / precos (billing, plans, faq) / produto (tour,
areas, kanban, celular) / institucionais / reveal /
responsivo
========================================================== */
/* ---------- tokens ---------- */
/* Paleta canônica da marca, INLINE (item 32, 03/ago): o @import de tokens.css
custava 1 round-trip extra na primeira visita - o navegador só descobria o
arquivo depois de baixar este aqui inteiro. O bloco :root abaixo é CÓPIA
byte a byte do :root do mestre brand/tokens.css: mudou a paleta? Edite o
mestre e re-copie o bloco pra cá (e pro app, app/src/styles/tokens.css).
Os nomes locais do site abaixo viram aliases (var(--srv-*)); nenhuma cor é
redefinida com hex divergente. */
:root{
/* --- núcleo (marca + neutros) --- */
--srv-brand:#0FB5A6; /* teal primário: ações, botões, marca */
--srv-brand-strong:#0C9488; /* hover/pressed */
--srv-ink:#0C1D1B; /* tinta profunda: títulos, sidebar, texto forte */
--srv-ink-soft:#35504B; /* texto secundário sobre claro */
--srv-muted:#587570; /* sálvia: texto terciário, legendas */
--srv-muted-deep:#5C6961; /* sálvia rebaixada: muted AA pra texto secundário pequeno */
--srv-paper:#F2F7F5; /* fundo gelo-menta */
--srv-surface:#FFFFFF; /* superfícies (cards) */
--srv-line:#DCE7E2; /* bordas e divisores (neutro quente) */
/* --- tangerina (3ª cor oficial; acento sobre escuro, ícones, estados) --- */
--srv-saffron:#FFB84D; /* preenchimento do acento (sobre escuro/ink) */
--srv-saffron-text:#A8700E; /* tangerina queimada: acento como TEXTO sobre claro (AA) */
--srv-saffron-soft:#FCF3DF; /* fundo suave do acento (chips/alertas quentes) */
--srv-saffron-ink:#8A5A00; /* tangerina de legenda: texto pequeno sobre fundos quentes (AA) */
--srv-lemon:#EEFF41; /* lemon do EngrenouAí: fundo da pastilha "aí" (texto sempre tinta) OU texto de acento sobre tinta */
/* --- estados (par: cor + fundo suave) --- */
--srv-ok:#3f8f5b; --srv-ok-soft:#E7F3EC; /* sucesso */
--srv-danger:#c0392b; --srv-danger-soft:#F6E3E0; /* erro/perigo */
--srv-warn:#C98A00; --srv-warn-soft:#FCF3DF; /* aviso */
/* --- WhatsApp (um tom só, em toda a marca) --- */
--srv-whats:#25A25A;
/* --- aliases legados do app (mesmos valores; ninguém redefine família local) --- */
--verde:var(--srv-ok);
--vermelho:var(--srv-danger);
--amarelo:var(--srv-warn);
}
/* ---------- fontes da casa (03/ago) ----------
Antes as duas familias vinham do Google (link bloqueante no de todas
as paginas): a pagina esperava um servidor de terceiro pra desenhar texto, e
a CSP precisava liberar fonts.googleapis + fonts.gstatic. Agora os arquivos
moram em assets/fonts (4 woff2 variaveis, 176 KB no total - o mesmo arquivo
serve todos os pesos da familia, por isso nao ha um por peso).
font-display:swap mantem o texto visivel enquanto a fonte carrega. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/space-grotesk-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/space-grotesk-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
--ink:var(--srv-ink);
--brand:var(--srv-brand);
--brand-strong:var(--srv-brand-strong);
--brand-soft:#EAF6F4; /* tint de teal, só do site (não whitelabel) */
--paper:var(--srv-paper);
--bg:var(--srv-surface);
--line:var(--srv-line);
--line-soft:#EFF4F2; /* hairline mais clara, só do site */
--muted:var(--srv-muted);
--body-soft:var(--srv-ink-soft);
--ghost:#A9BCB7; /* linhas da dor, apagadas (só do site) */
--ok:var(--srv-ok);
--ok-soft:var(--srv-ok-soft);
--amber:var(--srv-saffron-text); /* tangerina como TEXTO sobre claro (AA) */
--amber-soft:var(--srv-saffron-soft);
--saffron:var(--srv-saffron); /* tangerina de preenchimento: a 3ª cor da marca */
--saffron-line:#FFD9A0; /* borda quente dos cartoes AI (só do site) */
--lemon:#EEFF41; /* lemon da pastilha "AI" - SO sobre tinta (21/jul) */
--whats:var(--srv-whats); /* verde do WhatsApp: um tom só */
--shadow-stage:0 40px 90px -50px rgba(12,29,27,.28),0 2px 8px rgba(12,29,27,.04);
--shadow-card:0 1px 2px rgba(12,29,27,.04),0 4px 14px rgba(12,29,27,.05);
--disp:'Space Grotesk',system-ui,sans-serif;
--ui:'Inter',system-ui,sans-serif;
}
/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--ui);background:var(--bg);color:var(--ink);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
/* O SISTEMA DE LARGURA (aprovado pelo Michel em 03/ago, vindo do mockup
site-upgrade). A regra que a reversao de 02/ago pedia, dita inteira:
1. TEXTO CORRIDO nunca leh mais largo - todo paragrafo do site ja carrega a
propria medida (max-width em `em`: lead 30em, cap 30em, place 26em, prose
720px). Essa medida NAO muda.
2. O CONTAINER unico sobe de 1080 pra 1200 com padding fluido. Como o texto
se auto-limita, quem ganha a largura nova sao so os blocos VISUAIS:
nav, rodape, prints (board), calculadora, tabelas, splits e grades.
3. Bloco visual que tinha teto proprio menor (990/900) sobe junto, na mesma
proporcao (~+11%), pra nenhum vizinho descolar do outro.
Em telas ate ~1140px nada muda: o clamp do padding e os tetos antigos ja
eram menores que a janela. O ganho e exclusivo do desktop largo. */
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(24px,3.4vw,40px)}
h1,h2,h3{font-family:var(--disp);line-height:1.04;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
section{scroll-margin-top:84px}
.nb{white-space:nowrap}
/* ---------- icones inline (SVG proprio, CSP nao permite CDN) ---------- */
i.tico{display:inline-flex;align-items:center;justify-content:center;font-style:normal}
i.tico svg{width:1em;height:1em;flex:0 0 auto}
/* ---------- nav ---------- */
/* faixa GELO-MENTA (escolha do Michel, 01/ago): um degrau acima do branco, pra
a barra se separar da pagina sem competir com os dois cartoes de tinta da
primeira dobra - e o CTA teal segue sendo a coisa mais forte do topo. */
/* BRANCA (rgba(255,255,255,.88)) com a borda leve - e o que estava no ar ate
17/jul. Passou por gelo-menta em 01/ago (junto do menu novo, sem ninguem
decidir a cor) e por dois passos mais escura no mesmo dia. O Michel leu as
duas como "barra escura": qualquer tinta na faixa contra o branco da pagina
le como escuro. Voltou a branca de verdade em 02/ago. */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:18px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.02em}
.logo img{width:28px;height:28px}
.nav-links{display:flex;gap:26px;font-size:14.5px;font-weight:500}
.nav-links a{text-decoration:none;color:var(--muted);padding-bottom:3px;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);border-bottom-color:var(--brand)}
.nav-actions{display:flex;align-items:center;gap:18px}
.nav-login{text-decoration:none;font-weight:600;font-size:14.5px;color:var(--ink)}
.nav-login:hover{color:var(--brand-strong)}
/* botao da gaveta: so existe no celular (ver media 860) */
.nav-burg{display:none;width:40px;height:40px;border-radius:11px;border:1.5px solid var(--line);
background:#fff;cursor:pointer;padding:0;align-items:center;justify-content:center}
.nav-burg span{position:relative;display:block;width:17px;height:1.8px;border-radius:2px;background:var(--ink)}
.nav-burg span::before,.nav-burg span::after{content:"";position:absolute;left:0;width:17px;height:1.8px;
border-radius:2px;background:var(--ink)}
.nav-burg span::before{top:-5.5px}
.nav-burg span::after{top:5.5px}
.nav-links .so-mob{display:none}
/* ---------- botoes ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;font-family:var(--ui);font-weight:600;text-decoration:none;border-radius:12px;transition:transform .15s ease,background .15s ease,border-color .15s ease;cursor:pointer}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--brand);color:#fff;padding:16px 30px;font-size:17px}
.btn-primary:hover{background:var(--brand-strong)}
.btn-primary .arr{transition:transform .18s ease}
.btn-primary:hover .arr{transform:translateX(3px)}
.btn-line{border:1px solid rgba(12,29,27,.26);color:var(--ink);padding:15px 26px;font-size:16px;background:transparent}
.btn-line:hover{border-color:var(--ink)}
.btn-sm{padding:9px 18px;font-size:14px}
.btn-block{width:100%}
.link-more{font-weight:600;color:var(--ink);text-decoration:none;font-size:16px;border-bottom:1px solid var(--line);padding-bottom:2px}
.link-more:hover{color:var(--brand-strong);border-bottom-color:var(--brand)}
/* ---------- footer (3 colunas, tratamento leve) ---------- */
footer.foot{border-top:1px solid var(--line);margin-top:0;background:var(--bg)}
/* A coluna Contato virou uma linha dentro da marca (02/ago): e-mail e WhatsApp
sao contato, e contato mora junto de quem fala - nao numa quarta coluna com
duas linhas soltas. Sobraram dois blocos de link, entao as colunas viram
`auto` e encostam na direita; o `minmax(0,1fr)` da marca come o resto. */
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:40px 72px;padding:56px 0 24px}
.foot h4,.foot .foot-tit{font-family:var(--disp);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:14px}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.foot-col a{font-size:14.5px;color:var(--body-soft);text-decoration:none}
.foot-col a:hover{color:var(--ink)}
.foot-col p{font-size:14.5px;color:var(--body-soft)}
.foot-brand .logo{margin-bottom:12px;font-size:18px}
.foot-brand .logo img{width:24px;height:24px}
.foot-brand p{font-size:14.5px;color:var(--body-soft);max-width:26em;margin-bottom:12px}
.foot-brand a{font-size:14.5px;color:var(--body-soft);text-decoration:none}
.foot-brand a:hover{color:var(--ink)}
.foot-note{font-size:13px;color:var(--muted)}
/* redes e contato do rodape: glifo MONOCROMATICO (currentColor), do tamanho do
texto. Marca colorida de terceiro no rodape rouba atencao do que importa e
briga com a paleta; em cinza ela vira sinal, nao anuncio. */
/* so o glifo, sem rotulo ao lado: o arroba nao acrescentava nada que o icone
ja nao diga, e a coluna da marca ficava com tres linhas de texto miudo.
O nome vive no aria-label, entao leitor de tela nao perde nada. */
/* e-mail e WhatsApp na mesma linha: juntos ocupam menos que a largura do
paragrafo da marca, e ficam acima das redes porque sao o canal que responde */
.foot-contato{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-bottom:16px}
.foot-social{display:flex;align-items:center;gap:18px;margin-bottom:4px}
/* v3 (05/ago, pedido do Michel): so o glifo, traco leve 1.8, sem chip e sem
moldura - cada rede com o desenho proprio reconhecivel (a camera do IG
carrega o quadrado porque ELE e o logo). Hover acende em teal. */
.foot-social a{display:inline-flex;color:var(--body-soft);text-decoration:none}
.foot-social svg{width:27px;height:27px;stroke-width:1.8}
.foot-social a:hover{color:var(--brand-strong)}
.foot-bottom{border-top:1px solid var(--line-soft);padding:18px 0 26px;font-size:13px;color:var(--muted)}
/* ---------- HERO home: a dobra inteira acima de 900px ----------
A escala antiga (ate 104px) jogava headline, CTA e print pra fora da dobra:
qualquer texto com mais de ~40 caracteres caia em 4 linhas. Esta escala
acompanha a das paginas internas (.page-hero) e cabe em 2 linhas. */
.hero{padding:clamp(72px,9vh,104px) 0 0;text-align:center}
/* teto do h1 desce de 74 pra 62: com o texto atual, 74px cai em 4 linhas a
1440 e a dobra vira so titulo. Em 62px cabe em 3 e sobra dobra pro resto. */
.hero h1{font-size:clamp(40px,4.8vw,62px);max-width:16em;margin:0 auto}
.hero h1 em{font-style:normal;color:var(--brand-strong)}
.hero .lead{margin:22px auto 0;font-size:clamp(17px,2vw,21px);color:var(--body-soft);max-width:30em}
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:38px}
.hero-sub{margin-top:18px;font-size:14.5px;color:var(--muted)}
.hero-sub b{color:var(--ink);font-weight:600}
/* ---- portas do hero: P1 + peso do P3 (aprovado 22/jul) ----
A da IA vai pra TINTA com o nucleo e ocupa MAIS area (1.18fr x .82fr): se o
Engrenou.ai e a aposta, a primeira dobra tem que dizer isso. A da esquerda
fica enxuta, com o mini-quadro como assinatura visual. */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin:34px auto 0;text-align:left;align-items:stretch}
.door{position:relative;border-radius:20px;padding:22px;text-decoration:none;display:flex;flex-direction:column;gap:11px;transition:transform .15s,box-shadow .15s,border-color .15s;color:var(--ink);background:#fff;border:1.5px solid var(--line);overflow:hidden}
.door:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 22px 44px -30px rgba(12,29,27,.4)}
.door h3{font-family:var(--disp);font-size:21px;line-height:1.16;letter-spacing:-.015em}
.door p{font-size:13.5px;color:var(--body-soft);line-height:1.5}
.door .kicker{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.door-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;text-decoration:none;font-family:var(--disp);font-weight:700;font-size:15px;color:#fff;background:var(--brand);border-radius:12px;padding:13px 16px;transition:background .15s}
.door:hover .door-btn{background:var(--brand-strong)}
/* mini-quadro (porta de quem ja vende) */
.door-mini{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:9px}
.door-mini i{display:block;height:24px;background:#fff;border:1px solid var(--line);border-radius:6px}
.door-mini i.on{background:#dff3ef;border-color:#9FE1CB}
/* porta da IA: tinta + nucleo */
/* CARD DA IA - "O visor" (decisao 22/jul): o card vira papel e o preto sobrevive
so no retangulo interno onde a maquina fala. Motivo tecnico: a pastilha lemon
do "ai" da 1,02:1 sobre claro e evapora - ela so existe sobre tinta. */
.door-eai{background:radial-gradient(420px 250px at 88% -14%,rgba(255,184,77,.18),transparent 68%),var(--paper);border:1.5px solid var(--saffron-line);color:var(--ink);box-shadow:0 24px 48px -32px rgba(12,29,27,.38),0 1px 2px rgba(12,29,27,.05)}
.door-eai:hover{border-color:var(--saffron);box-shadow:0 30px 56px -30px rgba(12,29,27,.44)}
.door-eai h3{color:var(--ink)}
.door-eai p{color:var(--body-soft)}
.door-eai .kicker{color:#8A5A00}
.door-eai .wm-eai{display:none}
.door-btn-ai{background:var(--saffron);color:var(--ink);box-shadow:0 0 0 1px #A8700E,0 10px 20px -14px rgba(12,29,27,.45)}
.door:hover .door-btn-ai{background:#f5a92e}
/* porta irma vira contorno: sem isso as duas empatam. E corrige o #fff sobre
var(--brand) (2,57:1), que reprova AA e esta em producao hoje. */
/* texto do botao e 15px BOLD, que NAO e "texto grande" no WCAG - precisa de
4,5:1. O --brand-strong (#0C9488) da so 3,75:1, entao o rotulo usa o teal de
texto AA (#09756D, 5,56:1). A borda pode ficar no brand-strong (3,75 > 3:1). */
/* CTA fantasma so na porta ANTIGA (.door-eai, fora do trio). No trio o alvo e
.door-ai: os dois cartoes tinta ficam com o botao tangerina do ai, e o cartao
branco com o teal cheio - senao a regra acertava os tres e apagava a cor de
todos os CTAs da primeira dobra. */
.door:not(.door-eai):not(.door-app):not(.door-ai) .door-btn{background:#fff;border:1.5px solid var(--brand-strong);color:#09756D}
.door:not(.door-eai):not(.door-app):not(.door-ai):hover .door-btn{background:var(--brand-soft)}
.wm-eai{position:absolute;top:16px;right:16px;font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em;color:#fff}
.wm-eai .ai-mark{font-size:.56em;vertical-align:.22em}
/* O CONVITE (proposta 30/jul): o pet sai do visor e faz a chamada ele mesmo -
solto no papel do card, no tamanho 72, com a fala num balao de tinta. E a
MESMA cena que recebe a pessoa dentro do quiz (.qz-pet + .qz-balao de
app/src/styles/quiz.css; o site e estatico, nao compartilha build - mexeu
aqui, mexa la). A pastilha lemon do "ai" so tem contraste sobre tinta: por
isso a marca mora no balao, nao no papel do card. */
.convite{display:flex;align-items:center;gap:14px;margin-top:2px}
.convite .pet{--pet-sz:72px}
.balao{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;
background:radial-gradient(160px 90px at 88% -30%,rgba(255,184,77,.14),transparent 70%),var(--ink);
color:#fff;border-radius:16px;padding:11px 14px 12px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 24px -18px rgba(12,29,27,.6)}
.balao::before{content:"";position:absolute;left:-4px;top:50%;width:11px;height:11px;
background:var(--ink);transform:translateY(-50%) rotate(45deg);border-radius:2px}
.balao-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.visor-wm{font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:-.01em;color:#fff}
.visor-st{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#9FBDB7}
.visor-st i{width:6px;height:6px;border-radius:50%;background:var(--saffron);flex:0 0 auto}
.balao-fala{font-size:13px;font-weight:600;line-height:1.45;color:#fff}
.balao-fala .caret{display:inline-block;width:1px;height:1em;background:var(--saffron);vertical-align:-.12em;margin-left:2px;animation:caret-pisca 1s steps(1) infinite}
@keyframes caret-pisca{50%{opacity:0}}
@media (max-width:560px){.convite{gap:12px}.convite .pet{--pet-sz:48px}}
/* O PET (23/jul) - o MESMO bicho do quiz, mesmo bloco de CSS, mesmo token.
Antes o site tinha uma copia propria da esfera em 44px (.orbwrap/.ring/.orb),
um tamanho que nao existia em lugar nenhum: era isso que fazia o pet parecer
outro em cada tela. Agora o tamanho sai SO de --pet-sz, e os valores oficiais
sao 36/48/72 - aqui, dentro do visor, ele entra no 48.
A esfera nao mudou (anel conico + nucleo teal respirando). O que entrou foi a
camada de vida: o brilho especular virou camada propria (.pet-olho) pra poder
olhar, e ele pisca. Parado, o brilho cai no mesmo 34%/30% de sempre.
Estudo: estudos/pet-ai/. Espelho do bloco .qz-bicho de app/src/styles/quiz.css
(o site e estatico, nao compartilha build - mexeu aqui, mexa la). */
.pet{
--pet-sz:48px;
--pet-giro:7s;
--pet-resp:4.2s;
--pet-ox:-16%;
--pet-oy:-20%;
--pet-luz:1;
position:relative;display:block;flex:0 0 auto;
width:var(--pet-sz);height:var(--pet-sz);
contain:layout paint style}
.pet>i{position:absolute;border-radius:50%;display:block}
.pet-anel{inset:0;background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,184,77,.85) 74%,rgba(15,181,166,.9) 86%,transparent 96%);
-webkit-mask:radial-gradient(circle,transparent 60%,#000 62%);mask:radial-gradient(circle,transparent 60%,#000 62%);
animation:pet-gira var(--pet-giro) linear infinite;will-change:transform}
.pet-nucleo{inset:15%;background:radial-gradient(circle at 50% 47%,#19cfbd 0%,#0FB5A6 44%,#0a5c55 100%);
animation:pet-resp var(--pet-resp) ease-in-out infinite;will-change:transform}
.pet-olho{inset:15%;transform:translate(var(--pet-ox),var(--pet-oy));transition:transform .55s cubic-bezier(.22,.9,.24,1)}
.pet-olho b{position:absolute;left:50%;top:50%;width:54%;height:54%;margin:-27% 0 0 -27%;
border-radius:50%;transform-origin:50% 50%;opacity:var(--pet-luz);
background:radial-gradient(circle,rgba(233,255,251,.98) 0%,rgba(197,255,246,.6) 40%,rgba(197,255,246,0) 72%);
animation:pet-pisca 7.5s ease-in-out infinite}
@keyframes pet-gira{to{transform:rotate(360deg)}}
@keyframes pet-resp{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes pet-pisca{0%,89%,100%{transform:scaleY(1)}92%{transform:scaleY(.16)}95%{transform:scaleY(1)}}
/* olhar solto: 3 pousos lentos, nunca no centro - centro parece morto */
.pet[data-olhar="auto"] .pet-olho{animation:pet-olhar 11s ease-in-out infinite}
@keyframes pet-olhar{
0%,24%{transform:translate(-16%,-20%)}
32%,50%{transform:translate(7%,-13%)}
58%,76%{transform:translate(-9%,5%)}
84%,100%{transform:translate(-16%,-20%)}}
@media (prefers-reduced-motion:reduce){.pet,.pet *{animation:none!important}.pet-olho{transition:none}}
.door-chips{display:flex;gap:6px;flex-wrap:wrap}
.door-chips i{font-style:normal;font-size:11.5px;border-radius:99px;padding:4px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#e6efed}
.door-chips i.hot{background:rgba(255,184,77,.16);border-color:rgba(255,184,77,.5);color:var(--saffron)}
/* secao EngrenouAI: 3 passos com prints reais do quiz */
/* wordmark R4+B1 (aprovado 22/jul): "aí" num BALÃO DE FALA lemon - amarra o
nome à ideia de conversa da IA. Substitui o L5 (ponto separador). O balão usa
o lemon da marca com texto tinta: contraste alto nos dois fundos.
Markup: Engrenouaí */
.ai-mark{display:inline-block;vertical-align:.42em;font-size:.48em;line-height:1.18;font-weight:700;letter-spacing:.01em;padding:.2em .42em;margin-left:.2em;border-radius:.55em .55em .55em .14em;background:var(--lemon);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* hero C1: complemento rotativo sob a definicao fixa + pontinhos */
.hero-rotor{transition:opacity .45s ease;min-height:1.6em}
.hero-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.hero-dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.hero-dots i.on{background:var(--saffron)}
.ea-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1100px;margin:56px auto 0;align-items:start}
.ea-step{margin:0;text-align:center;position:relative}
.ea-step .pv-phone{width:min(100%,250px)}
.ea-step.estrela .pv-phone{box-shadow:0 34px 70px -40px rgba(12,29,27,.4),0 0 0 3px var(--saffron-line)}
.ea-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--disp);font-weight:700;font-size:16px;margin-bottom:16px}
.ea-step.estrela .ea-n{background:var(--saffron);color:var(--ink)}
.ea-step figcaption{margin-top:18px;font-size:14.5px;color:var(--body-soft);line-height:1.55;max-width:26em;margin-left:auto;margin-right:auto}
.ea-step figcaption b{color:var(--ink)}
.ea-cta{text-align:center;margin-top:40px}
.ea-disc{text-align:center;margin-top:18px;max-width:44em;margin-left:auto;margin-right:auto}
/* linha da origem no bloco de prova */
.ctx-alem{margin-top:14px}
.ctx-alem a{color:var(--brand-strong);font-weight:600;text-decoration:none}
.ctx-alem a:hover{text-decoration:underline}
/* o palco do hero: quadro de pedidos animado no desktop + celular na frente
(abaixo de 960px o quadro some e fica so o celular, como sempre foi) */
.hero-stage{position:relative;max-width:1100px;margin:56px auto 0;text-align:left}
.hero-stage .mb{max-width:890px}
.hero-stage .pv-phone{position:absolute;right:0;bottom:-30px;width:212px;margin:0;box-shadow:0 42px 70px -42px rgba(12,29,27,.45)}
/* o card do dinheiro (hoje mora na secao Quatro abas) */
.money-hero{max-width:820px;margin:90px auto 0;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-stage);padding:44px 48px;position:relative;text-align:center}
.money-hero .ex-tag{position:absolute;top:16px;right:18px}
.money-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.money-row .cell{flex:1}
.money-row .cell span{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.money-row .cell b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(24px,3.6vw,44px);letter-spacing:-.02em;margin-top:6px;white-space:nowrap}
.money-row .op{font-family:var(--disp);font-size:clamp(18px,2.4vw,30px);color:var(--muted);opacity:.55;padding-bottom:4px}
.money-row .cell.sobrou b{color:var(--brand-strong);font-weight:700;font-size:clamp(30px,4.6vw,56px)}
.money-hero .hint{margin-top:18px;font-size:13.5px;color:var(--muted)}
/* selo exemplo (honestidade) */
/* chip "exemplo" do card de dinheiro: acento TANGERINA (a 3ª cor da marca),
tinta sobre tangerina = alto contraste. Devolve a tangerina ao site. */
.ex-tag{display:inline-block;font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--srv-ink);border:1px solid transparent;border-radius:99px;padding:2px 8px;background:var(--saffron)}
/* ---------- secoes home: uma ideia por parada ---------- */
section.stop{margin-top:clamp(120px,16vw,220px)}
/* guarda de medida do titulo: no container de 1200 um h2 sem teto correria a
linha inteira; 18em segura a mancha na mesma largura otica de antes. */
.stop h2{font-size:clamp(34px,5vw,60px);max-width:18em}
.stop.center h2{margin-left:auto;margin-right:auto}
.stop .cap{margin-top:18px;font-size:clamp(16.5px,1.8vw,19px);color:var(--body-soft);max-width:30em}
.stop.center{text-align:center}
.stop.center .cap{margin-left:auto;margin-right:auto}
/* a dor: 3 linhas, so tipografia + 1 frase de fechamento */
.pain p{font-family:var(--disp);font-weight:700;font-size:clamp(34px,5.6vw,66px);line-height:1.12;letter-spacing:-.03em;color:var(--ghost)}
.pain p+p{margin-top:8px}
.pain p.dark{color:var(--ink)}
.pain p.dark em{font-style:normal;color:var(--brand-strong)}
.pain .pain-cap{font-family:var(--ui);font-weight:400;font-size:clamp(16.5px,1.8vw,19px);letter-spacing:0;line-height:1.6;color:var(--body-soft);margin-top:26px;max-width:30em}
/* a magica: ritmo de 3 tempos + 3 passos curtos */
.beat{font-family:var(--disp);font-weight:700;font-size:clamp(34px,5.4vw,62px);letter-spacing:-.03em;line-height:1.1}
.beat i{font-style:normal;color:var(--ghost);padding:0 .18em}
.beat .seg{white-space:nowrap}
.steps{margin:56px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px 48px;max-width:1000px;text-align:left}
.step .n{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-strong)}
/* numeral do passo: badge TANGERINA (a 3a cor da marca), tinta sobre tangerina */
.step .num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;background:var(--saffron);color:var(--ink);font-size:13px;font-weight:700;letter-spacing:0}
.step b{display:block;font-family:var(--disp);font-size:19px;letter-spacing:-.01em;margin-top:8px}
.step p{font-size:15px;color:var(--body-soft);line-height:1.55;margin-top:6px}
/* ---------- o produto grande (board full-width) ---------- */
.board{margin-top:72px;text-align:left}
.mb{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-stage);overflow:hidden}
.mb-bar{display:flex;align-items:center;gap:6px;padding:13px 16px;border-bottom:1px solid var(--line-soft);background:#fff}
.mb-bar .d{width:9px;height:9px;border-radius:50%;display:block;background:var(--line)}
.mb-bar .mb-url{margin-left:10px;font-size:12.5px;color:var(--muted);background:var(--paper);border-radius:6px;padding:3px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-bar .mb-real{margin-left:auto;font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:2px 8px;background:#fff;white-space:nowrap}
.mb-shot{display:block;width:100%;height:auto}
/* kanban de pedidos do hero: recriacao em CSS (nao e print) com um card
andando de Em producao pra Pronto; parado se o visitante prefere menos movimento */
.kan{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1;align-items:start}
.kan-col{background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px;min-width:0}
.kan-col h5{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--body-soft);display:flex;align-items:center;gap:5px;margin:2px 2px 8px}
.kan-col h5 .ct{margin-left:auto;background:var(--paper);border:1px solid var(--line-soft);border-radius:99px;padding:0 7px;font-family:var(--ui);font-size:9.5px;font-weight:600;color:var(--muted)}
.kan-card{background:#fff;border:1px solid var(--line);border-left:3px solid var(--line);border-radius:11px;padding:8px 9px;margin-bottom:7px;box-shadow:0 1px 2px rgba(12,29,27,.05);overflow:hidden}
.kan-card:last-child{margin-bottom:0}
.kan-card b{display:block;font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.kan-card small{display:block;font-size:10px;color:var(--muted);line-height:1.35;margin-top:1px}
.kan-card .tag{display:inline-block;font-size:8.5px;font-weight:700;padding:1px 7px;border-radius:99px;margin-top:5px;border:1px solid currentColor}
.kan-card.due-hoje{border-left-color:var(--saffron)}
.kan-card.due-atras{border-left-color:#D96A5B}
.kan-card.due-ok{border-left-color:#9CC5AF}
.tag.hoje{color:#B97B1F;border-color:#F2D9AE}
.tag.amanha{color:var(--muted);border-color:var(--line)}
.tag.pago{color:#2E7D4F;border-color:#BFDCC9}
.tag.pronto{color:var(--brand-strong);border-color:#B9E2DC}
.tag.atrasou{color:#B4483A;border-color:#EBC3BC}
.kan-mv-in{display:none}
@media(prefers-reduced-motion:no-preference){
.kan-mv-in{display:block;animation:kanIn 9s ease-in-out infinite}
.kan-mv-out{animation:kanOut 9s ease-in-out infinite}
}
@keyframes kanOut{
0%,38%{opacity:1;max-height:90px;margin-bottom:7px;padding:8px 9px;transform:none}
46%{opacity:0;transform:translateX(30px)}
47%,90%{opacity:0;max-height:0;margin-bottom:0;padding:0 9px;border-top-width:0;border-bottom-width:0;transform:translateX(30px)}
91%{transform:none}
98%,100%{opacity:1;max-height:90px;margin-bottom:7px;padding:8px 9px;transform:none}
}
@keyframes kanIn{
0%,44%{opacity:0;max-height:0;margin-bottom:0;padding:0 9px;border-top-width:0;border-bottom-width:0;transform:translateX(-30px)}
52%{opacity:0;max-height:90px;margin-bottom:7px;padding:8px 9px}
60%,86%{opacity:1;transform:none;max-height:90px;margin-bottom:7px;padding:8px 9px}
94%,100%{opacity:0;max-height:0;margin-bottom:0;padding:0 9px;border-top-width:0;border-bottom-width:0;transform:translateX(-30px)}
}
.scene-shot{display:block;width:100%;height:auto;border:1px solid var(--line-soft);border-radius:12px}
.pv-shot{display:block;width:100%;height:auto}
.mb-body{display:flex;align-items:stretch;min-height:400px}
.mb-side{flex:0 0 190px;background:#fff;border-right:1px solid var(--line-soft);padding:18px 14px;display:flex;flex-direction:column;gap:14px}
.mb-brand{display:flex;align-items:center;gap:9px}
.mb-brand .tile{width:34px;height:34px;border-radius:11px;background:#FBF1F5;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.mb-brand strong{display:block;font-family:var(--disp);font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.15;white-space:nowrap}
.mb-brand small{display:block;font-size:10.5px;color:var(--muted)}
.mb-new{display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--brand);color:var(--brand-strong);font-size:12.5px;font-weight:700;border-radius:10px;padding:8px 6px;background:#fff;white-space:nowrap}
.mb-nav{display:flex;flex-direction:column;gap:2px}
.mb-nav span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);padding:8px 9px;border-radius:9px;white-space:nowrap}
.mb-nav span i{font-size:15px}
.mb-nav span.on{background:var(--brand-soft);color:var(--brand-strong)}
.mb-main{flex:1;padding:16px;display:flex;flex-direction:column;gap:13px;min-width:0;background:var(--paper)}
.mb-week{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;flex:1}
.mb-day h5{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:baseline;gap:6px;margin:0 0 7px 2px;color:var(--body-soft)}
.mb-day h5 small{font-family:var(--ui);font-weight:500;font-size:10px;color:var(--muted);text-transform:none;letter-spacing:0}
.mb-day h5 .now{width:6px;height:6px;border-radius:50%;background:var(--brand);align-self:center}
.mb-order{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 11px;margin-bottom:7px}
.mb-order b{display:block;font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.mb-order small{display:block;font-size:10.5px;color:var(--muted);line-height:1.35;margin-top:1px}
.mb-badge{display:inline-block;font-size:9px;font-weight:700;padding:2px 8px;border-radius:99px;margin-top:6px;background:transparent;border:1px solid currentColor}
.mb-badge.fazer{color:var(--amber);border-color:color-mix(in srgb,var(--saffron) 40%,#fff)}
.mb-badge.pronto{color:var(--brand-strong);border-color:#B9E2DC}
.mb-badge.sinal{color:var(--ok);border-color:#BFDCC9}
.mb-money{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mb-money .cell{flex:1;text-align:center}
.mb-money .cell span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.mb-money .cell b{display:block;font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.02em;margin-top:2px;white-space:nowrap}
.mb-money .op{font-family:var(--disp);font-size:15px;color:var(--muted);opacity:.55}
.mb-money .cell.sobrou b{color:var(--brand-strong);font-weight:700;font-size:23px}
/* ---------- quatro lugares: palavra + 1-2 frases ---------- */
.places{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:48px 72px;text-align:left}
.place i{font-size:22px;color:var(--brand-strong)}
.place b{display:block;font-family:var(--disp);font-size:22px;letter-spacing:-.01em;margin-top:10px}
.place p{font-size:15.5px;color:var(--body-soft);line-height:1.6;margin-top:7px;max-width:26em}
/* prova visual das abas: Pedidos (recorte real) + Dinheiro (o card Entrou-Saiu-Sobrou) */
.tabs-proof{margin-top:76px;display:grid;grid-template-columns:minmax(0,64fr) minmax(0,36fr);gap:44px;align-items:center}
.tabs-proof figure{margin:0;min-width:0}
.tabs-proof figcaption{margin-top:16px;font-size:14px;color:var(--muted);text-align:center;line-height:1.5;text-wrap:balance}
.tabs-proof figcaption b{color:var(--ink);font-weight:600}
.tabs-proof .pv-phone{width:min(100%,250px)}
/* o card do dinheiro em coluna estreita: empilha Entrou/Saiu/Sobrou */
.tabs-proof .money-hero{margin:0;max-width:420px;padding:34px 30px;text-align:left;margin-left:auto;margin-right:auto}
.tabs-proof .money-row{flex-direction:column;align-items:stretch;gap:12px}
.tabs-proof .money-row .op{display:none}
.tabs-proof .money-row .cell{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line-soft);padding-bottom:12px}
.tabs-proof .money-row .cell:last-child{border-bottom:0;padding-bottom:0}
.tabs-proof .money-row .cell b{font-size:26px;margin-top:0}
.tabs-proof .money-row .cell.sobrou b{font-size:34px}
.tabs-proof .money-hero .hint{margin-top:16px}
/* ---------- loja: split alternado ---------- */
.split{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(72px,7vw,96px);align-items:center}
.split .txt h2{font-size:clamp(34px,5vw,56px)}
.split .txt .cap{margin-top:18px;font-size:clamp(16.5px,1.8vw,19px);color:var(--body-soft);max-width:24em}
.split .txt .mini{margin-top:16px;font-size:14.5px;color:var(--muted);max-width:26em}
.split .txt .mini b{color:var(--ink);font-weight:600}
.split .txt .link-more{display:inline-block;margin-top:26px}
/* telefone (loja e app no celular) */
.pv-phone{width:min(100%,270px);background:#fff;border:1px solid var(--line);border-radius:34px;padding:9px;box-shadow:0 30px 60px -40px rgba(12,29,27,.25);margin:0 auto}
.pv-phone-screen{background:var(--paper);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line-soft)}
.pv-shop-head{background:#FBF1F5;padding:18px 15px 13px;display:flex;align-items:center;gap:10px}
.pv-shop-head .tile{width:36px;height:36px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:19px}
.pv-shop-head b{display:block;font-family:var(--disp);font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.pv-shop-head small{display:block;font-size:10.5px;color:var(--muted)}
.pv-shop-body{padding:11px 13px 15px;display:flex;flex-direction:column;gap:8px}
.pv-prod{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:9px}
.pv-prod .th{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.pv-prod .th.t1{background:#FBF1F5}.pv-prod .th.t2{background:#FBF6E7}.pv-prod .th.t3{background:#F0F2FA}
.pv-prod b{display:block;font-size:12px;font-weight:600}
.pv-prod small{display:block;font-size:10px;color:var(--muted)}
.pv-prod .preco{margin-left:auto;font-family:var(--disp);font-weight:700;font-size:12.5px;color:var(--brand-strong);white-space:nowrap}
.pv-shop-cta{display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--whats);color:var(--whats);background:#fff;font-size:12px;font-weight:700;border-radius:13px;padding:10px;margin-top:2px}
/* ---------- prova: citacao gigante (home) ---------- */
.quote blockquote{font-family:var(--disp);font-weight:700;font-size:clamp(38px,6.4vw,78px);line-height:1.06;letter-spacing:-.03em;max-width:13em}
.quote .who{margin-top:26px;font-size:15.5px;color:var(--muted)}
.quote .who a{color:var(--brand-strong);text-decoration:none;font-weight:600}
.quote .who a:hover{text-decoration:underline}
.quote .ctx{margin-top:12px;font-size:15.5px;color:var(--body-soft);max-width:36em;line-height:1.6}
/* ---------- preco resumido (home): dois numeros ---------- */
.price-duo{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:820px;margin-left:auto;margin-right:auto}
.pcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px 32px;text-align:center}
.pcard.hl{border-color:var(--brand)}
.pcard .tag{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pcard.hl .tag{color:var(--brand-strong)}
.pcard .val{font-family:var(--disp);font-weight:700;font-size:clamp(38px,4.4vw,52px);letter-spacing:-.02em;margin-top:10px;white-space:nowrap}
.pcard .val small{font-size:16px;font-weight:600;color:var(--muted)}
.pcard p{font-size:15.5px;color:var(--body-soft);margin-top:8px}
.pcard .anchor{font-size:14px;color:var(--muted);margin-top:12px}
.pcard .anchor b{color:var(--ink);font-family:var(--disp);font-weight:600}
.price-note{margin-top:24px;text-align:center;font-size:14.5px;color:var(--muted)}
.price-note b{color:var(--ink);font-weight:600}
.price-link{margin-top:14px;text-align:center}
/* ---------- final ---------- */
.final{margin-top:clamp(140px,18vw,240px);padding-bottom:clamp(110px,14vw,180px);text-align:center}
.final h2{font-size:clamp(38px,6.4vw,76px)}
.final .sub{margin:20px auto 0;font-size:clamp(16px,1.8vw,19px);color:var(--body-soft);max-width:28em}
.final p{margin:20px auto 0;font-size:clamp(16px,1.8vw,19px);color:var(--body-soft);max-width:28em}
.final .hero-ctas{margin-top:36px}
.final .cta-solo{margin-top:32px}
.final .hero-hint{margin-top:16px;font-size:14.5px;color:var(--muted);max-width:none}
.final .hero-hint b{color:var(--ink)}
.final .hero-sub{margin-top:18px}
.internal .final{margin-top:clamp(110px,14vw,190px)}
/* ==========================================================
PAGINAS INTERNAS: hero + reguas + intro
========================================================== */
.page-hero{padding:96px 0 0;text-align:center}
.page-hero h1{font-size:clamp(38px,6vw,72px);max-width:12em;margin:0 auto}
.page-hero .lead{margin:22px auto 0;font-size:clamp(16.5px,1.9vw,20px);color:var(--body-soft);max-width:30em}
.page-hero .hero-ctas{margin-top:32px}
.page-hero-slim{padding:72px 0 0}
.page-hero .updated{margin-top:12px;font-size:14px;color:var(--muted)}
.eyebrow{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-strong);display:block;margin-bottom:14px}
/* v67 (05/ago, pedido do Michel): as duas pontas da regua (label verde na
esquerda, nota cinza la na direita) nao se associavam no desktop largo.
Agora andam JUNTAS na esquerda, separadas por um ponto - um kicker so,
acima do h2 da secao. No /sobre (secoes sem h2) um inline promove a nota
a titulo display. */
.rule{border-top:1px solid var(--line-soft);padding-top:14px;margin-top:clamp(96px,12vw,150px);display:flex;justify-content:flex-start;align-items:baseline;gap:12px}
.rule b{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-strong)}
.rule span{font-size:13px;color:var(--muted)}
.rule span::before{content:"\00B7";margin-right:12px;color:var(--line)}
/* v67: mesmo teto que pendurava FAQ/prosa - a intro acompanha o miolo */
.section-intro{margin-top:40px}
.section-intro h2{font-size:clamp(28px,3.6vw,42px)}
.section-intro p{color:var(--body-soft);margin-top:14px;line-height:1.7}
.section-intro .link-more{display:inline-block;margin-top:16px}
/* ==========================================================
PRECOS
========================================================== */
.billing{display:flex;flex-direction:column;align-items:center;margin-top:54px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:stretch;text-align:left;width:100%}
.price-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 30px;position:relative;display:flex;flex-direction:column}
.price-card.featured{border-color:var(--brand)}
.price-card .seal{position:absolute;top:-12px;left:26px;background:var(--brand);color:#fff;font-family:var(--disp);font-weight:600;font-size:12px;border-radius:999px;padding:3px 13px;white-space:nowrap}
.price-card .who{font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.price-card .val{font-family:var(--disp);font-weight:700;font-size:44px;letter-spacing:-.02em;margin:10px 0 2px;white-space:nowrap}
.price-card .val small{font-size:17px;font-weight:600;color:var(--muted)}
.price-card .per{color:var(--muted);font-size:14.5px;margin-bottom:22px;min-height:1.4em}
.price-card ul{list-style:none;display:grid;gap:11px;margin-bottom:28px;flex:1;align-content:start}
.price-card li{padding-left:20px;position:relative;font-size:15px;color:var(--body-soft);line-height:1.5}
.price-card li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:1.5px;background:var(--muted);opacity:.6}
.price-card li b{color:var(--ink)}
.price-card .btn{width:100%}
.soon{display:inline-block;font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;padding:2px 8px;border-radius:999px;background:#fff;color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.plans-note{text-align:center;margin-top:26px;font-size:14.5px;color:var(--muted)}
.plans-note b{color:var(--ink);font-family:var(--disp);font-weight:600}
.anchor-note{text-align:center;margin-top:34px;font-size:16px;color:var(--body-soft)}
.anchor-note b{color:var(--ink);font-family:var(--disp);font-weight:600}
.border-line{max-width:680px;margin:44px auto 0;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 26px}
.border-line p{font-size:15px;color:var(--body-soft);line-height:1.6}
.border-line b{color:var(--ink)}
/* faq (precos + ajuda) */
/* v66 (05/ago, pedido do Michel): o FAQ ocupa a MESMA largura do miolo do
site - as bordas alinham com o cabecalho de secao acima, como todo bloco.
O teto de 680px (e antes dele um margin-left:0 de layout morto do /ajuda)
deixava as perguntas estreitas e descasadas do resto da pagina. */
.faq{margin:64px auto 0;text-align:left}
.internal .faq{margin-top:36px}
.faq h3{font-size:clamp(19px,2.2vw,23px);margin:44px 0 4px}
.faq h3:first-child{margin-top:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--disp);font-weight:600;font-size:17.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--muted);transition:transform .2s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
/* v68: a resposta acompanha a mesma largura da pergunta (o teto de 40em
deixava o paragrafo mais estreito que a linha de cima - Michel, 05/ago) */
.faq details p{padding:0 0 20px;color:var(--body-soft)}
.faq details p a{color:var(--brand-strong);font-weight:600}
/* ==========================================================
PRODUTO (tour) - mesmo tratamento v5
========================================================== */
.tour-steps{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tour-note{margin-top:18px;font-size:14.5px;color:var(--muted);max-width:46em}
.magic-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px}
.magic-card .n{font-family:var(--disp);font-weight:700;font-size:12px;color:var(--brand-strong);letter-spacing:.12em}
.magic-card h3{font-size:17px}
.magic-card p{font-size:14px;color:var(--body-soft);line-height:1.55}
.magic-scene{border:1px solid var(--line-soft);border-radius:14px;background:var(--paper);padding:12px;min-height:150px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.q-bubble{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-family:var(--disp);font-weight:600;font-size:13.5px}
.q-chips{display:flex;flex-wrap:wrap;gap:6px}
.q-chips span{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:5px 11px;font-size:11px;font-weight:600;color:var(--muted)}
.q-chips span.on{background:var(--brand);border-color:var(--brand);color:#fff}
.build-note{font-size:10.5px;color:var(--muted);text-align:center;font-weight:600}
.reveal-mini{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.reveal-top{display:flex;align-items:center;gap:7px}
.reveal-top .tile{width:24px;height:24px;border-radius:8px;background:#FBF1F5;display:flex;align-items:center;justify-content:center;font-size:13px}
.reveal-top b{font-family:var(--disp);font-size:12px}
.reveal-sobrou{border-top:1px dashed var(--line);padding-top:7px;text-align:center}
.reveal-sobrou span{display:block;font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.reveal-sobrou b{font-family:var(--disp);font-size:19px;font-weight:700;color:var(--brand-strong)}
/* prints reais da jornada dentro do "Como ela se monta" */
.magic-scene.is-shot{padding:12px;gap:9px;justify-content:flex-start}
.shot-frame{position:relative;width:100%;height:230px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 20px 40px -30px rgba(12,29,27,.45)}
.shot-frame.is-stage{background:var(--ink);border-color:transparent}
.shot-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.shot-tag{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--paper);border:1px solid var(--line-soft);border-radius:99px;padding:4px 10px}
.shot-tag-receitas{text-transform:none;letter-spacing:0;color:var(--body-soft);background:var(--brand-soft);border-color:transparent}
.shot-tag-receitas b{color:var(--brand-strong);font-weight:700}
/* as 4 areas por dentro */
.area-block{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:48px;align-items:center;margin-top:72px}
.area-block:nth-child(even of .area-block){grid-template-columns:minmax(0,62fr) minmax(0,38fr)}
.area-block:nth-child(even of .area-block) .area-txt{order:2}
.area-block:nth-child(even of .area-block) .area-scene{order:1}
.area-txt .n{font-family:var(--disp);font-weight:700;font-size:12px;color:var(--brand-strong);letter-spacing:.14em;display:block;margin-bottom:10px;text-transform:uppercase}
.area-txt h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px}
.area-txt p{color:var(--body-soft);max-width:30em;line-height:1.7}
.area-txt .mini{margin-top:12px;font-size:14.5px;color:var(--muted)}
.area-scene{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-stage);padding:16px}
.area-scene-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.area-scene-head b{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* A MESMA TELA NOS DOIS TAMANHOS, lado a lado (pedido do Michel, 01/ago).
O argumento e que a ferramenta vive na bancada e no balcao, nao so no
escritorio - e print de verdade, nos dois, nunca mockup desenhado. */
/* bloco de largura cheia: com o print de desktop espremido em 412px ninguem le
a tela, e o ponto e mostrar as duas CLARAMENTE. Ignora a alternancia
esquerda/direita dos outros blocos. */
.area-block.com-duo{grid-template-columns:1fr;gap:24px}
.area-block.com-duo .area-txt,.area-block.com-duo .area-scene{order:0}
.area-block.com-duo .area-txt p{max-width:52em}
.duo-tela{display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:24px;align-items:start}
.duo-tela figure{margin:0;min-width:0}
.duo-tela figcaption{margin-top:9px;text-align:center;font-family:var(--disp);font-size:10px;
font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.duo-tela .pv-phone{width:100%;border-radius:22px;padding:6px;
box-shadow:0 18px 34px -26px rgba(12,29,27,.32)}
.duo-tela .pv-phone-screen{border-radius:17px}
@media(max-width:760px){
.duo-tela{grid-template-columns:1fr;justify-items:center}
.duo-tela .dt-mob{max-width:190px}
}
.mob-sec{display:grid;grid-template-columns:minmax(0,50fr) minmax(0,50fr);gap:56px;align-items:center;margin-top:44px}
.mob-sec h2{font-size:clamp(26px,3vw,36px);margin-bottom:14px}
.mob-sec p{color:var(--body-soft);max-width:28em;line-height:1.7}
.mob-sec .mini{margin-top:12px;color:var(--muted);font-size:14.5px}
.loja-sec{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:56px;align-items:center;margin-top:44px}
.loja-sec h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:14px}
.loja-sec p{color:var(--body-soft);max-width:28em;line-height:1.7}
.loja-sec .mini{margin-top:12px;color:var(--muted);font-size:14.5px}
.loja-sec .link-more{display:inline-block;margin-top:18px}
/* pecinhas dos previews */
.pv-alert{display:flex;align-items:center;gap:8px;background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--saffron) 40%,#fff);color:var(--amber);border-radius:11px;padding:8px 10px;font-size:11px;font-weight:600;margin-bottom:7px}
.pv-alert i{font-size:14px}
.pv-order{background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 10px;margin-bottom:7px}
.pv-order .top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pv-order b{font-family:var(--disp);font-size:12px;font-weight:600}
.pv-order .hora{font-family:var(--disp);font-size:11px;font-weight:600;color:var(--muted)}
.pv-order small{display:block;font-size:10px;color:var(--muted);margin-top:1px}
.pv-order .foot{display:flex;align-items:center;justify-content:space-between;margin-top:7px}
.pv-btn{display:inline-flex;align-items:center;gap:4px;background:var(--brand);color:#fff;font-size:10px;font-weight:700;border-radius:9px;padding:6px 10px}
.pv-btn.whats{background:var(--whats)}
.pv-btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.pv-money-mini{display:flex;align-items:center;justify-content:space-between;gap:6px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 10px}
.pv-money-mini .cell{flex:1;text-align:center}
.pv-money-mini .cell span{display:block;font-size:8.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pv-money-mini .cell b{font-family:var(--disp);font-size:13px;font-weight:600}
.pv-money-mini .cell.sobrou b{color:var(--brand-strong);font-weight:700;font-size:15px}
.pv-money-mini .op{color:var(--ghost);font-family:var(--disp);font-size:12px}
.pv-week{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pv-week h5{font-family:var(--disp);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px 2px}
.pv-week h5 small{font-family:var(--ui);font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
.pv-hub{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pv-hub a,.pv-hub span{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px;text-decoration:none}
.pv-hub i{width:24px;height:24px;border-radius:8px;background:var(--brand-soft);color:var(--brand-strong);display:flex;align-items:center;justify-content:center;font-size:13px}
.pv-hub b{font-size:11px;font-weight:600}
.pv-hub small{font-size:9px;color:var(--muted);line-height:1.3}
.pv-triad-hero{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.pv-triad-hero .sobrou-big{border-top:1px dashed var(--line);margin-top:9px;padding-top:9px}
.pv-triad-hero .sobrou-big span{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pv-triad-hero .sobrou-big b{font-family:var(--disp);font-size:25px;font-weight:700;color:var(--brand-strong);letter-spacing:-.02em}
.pv-triad-hero .hint{font-size:9.5px;color:var(--muted);margin-top:2px}
.pv-kv{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;padding:6px 2px;border-bottom:1px solid var(--line-soft)}
.pv-kv:last-child{border-bottom:none}
.pv-kv .k{color:var(--muted)}
.pv-kv .v{font-family:var(--disp);font-weight:600}
.pv-extra{background:#fff;border:1px solid var(--line);border-radius:11px;padding:8px 10px;margin-top:7px}
/* kanban producao (produto.html) */
.pv-kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pv-kcol{background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;padding:8px}
.pv-kcol h5{display:flex;justify-content:space-between;align-items:center;font-family:var(--disp);font-size:10.5px;font-weight:700;padding:0 2px 7px}
.pv-kcol h5 em{font-style:normal;background:#fff;border-radius:99px;font-size:9px;font-weight:700;color:var(--muted);padding:1px 6px}
.pv-fornada{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:6px}
.pv-fornada b{font-family:var(--disp);font-size:10.5px;font-weight:600;display:block}
.pv-fornada small{font-size:9px;color:var(--muted)}
.pv-timer{display:inline-flex;align-items:center;gap:3px;margin-top:5px;background:var(--amber-soft);color:var(--amber);font-size:9px;font-weight:700;padding:3px 7px;border-radius:99px}
.pv-feito{display:inline-flex;align-items:center;gap:3px;margin-top:5px;background:var(--ok-soft);color:var(--ok);font-size:9px;font-weight:700;padding:3px 7px;border-radius:99px}
.pv-ghost-slot{border:2px dashed #BFE0DA;border-radius:10px;background:rgba(15,181,166,.06);height:44px}
@media(prefers-reduced-motion:no-preference){
.pv-drag{animation:pv-drag 7s ease-in-out infinite}
@keyframes pv-drag{0%,55%,100%{transform:none;box-shadow:none}65%,85%{transform:translate(14px,-6px) rotate(1.2deg);box-shadow:0 14px 30px rgba(12,29,27,.22)}}
}
/* app no celular: tab bar + fab */
.pv-tabbar{display:flex;align-items:stretch;background:#fff;border-top:1px solid var(--line);padding:5px 4px 10px;position:relative}
.pv-tabbar span{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:7.5px;font-weight:700;color:var(--muted);padding-top:4px}
.pv-tabbar span i{font-size:15px}
.pv-tabbar span.on{color:var(--brand-strong)}
.pv-tabbar .fab{flex:0 0 44px;display:flex;align-items:flex-start;justify-content:center}
.pv-tabbar .fab i{width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,var(--brand),var(--brand-strong));color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;transform:translateY(-14px);border:3px solid var(--paper);box-shadow:0 6px 14px rgba(15,181,166,.45)}
.pv-app-body{padding:10px 12px 4px;flex:1}
.pv-greet{font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:-.01em}
.pv-greet-sub{font-size:9.5px;color:var(--muted);margin-bottom:8px}
/* ==========================================================
PAGINAS INSTITUCIONAIS (sobre, ajuda, termos, privacidade)
========================================================== */
.hero-hint{margin-top:14px;font-size:14.5px;color:var(--muted)}
.hero-hint b{color:var(--ink)}
/* prova/caso real (sobre) - tratamento claro */
.case{margin-top:44px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:48px 44px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;text-align:left}
.case blockquote{font-family:var(--disp);font-weight:600;font-size:clamp(22px,2.8vw,32px);line-height:1.25;letter-spacing:-.02em;max-width:22em}
.case .badge{font-family:var(--disp);border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-size:13.5px;color:var(--muted);white-space:nowrap;background:#fff}
.case-facts{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case-facts span{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-strong);display:block;margin-bottom:4px}
.case-facts p{font-size:14.5px;color:var(--body-soft);line-height:1.55}
.case-facts a{color:var(--brand-strong);text-decoration:none;font-weight:600}
.case-facts a:hover{text-decoration:underline}
/* principios (sobre) */
.principles{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.principles div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px}
.principles b{font-family:var(--disp);font-size:18px;display:block;margin-bottom:8px}
.principles p{font-size:15.5px;color:var(--body-soft)}
/* historia (paragrafos) */
.prose{margin-top:36px;max-width:720px;display:grid;gap:18px}
.prose p{color:var(--body-soft);line-height:1.7}
/* contato (ajuda) */
.contact-grid{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 28px}
.contact-card b{font-family:var(--disp);font-size:18px;display:block;margin-bottom:10px}
.contact-card p{font-size:15.5px;color:var(--body-soft)}
.contact-card a{color:var(--brand-strong);font-weight:600;text-decoration:none}
.contact-card a:hover{text-decoration:underline}
.contact-card .link-more{display:inline-block;margin-top:12px;color:var(--ink)}
.contact-card .link-more:hover{color:var(--brand-strong)}
/* paginas legais */
.legal{max-width:720px;margin:0 auto;padding:56px 24px 96px}
.legal h2{font-size:clamp(20px,2.4vw,26px);margin:44px 0 12px}
.legal p{color:var(--body-soft);margin-bottom:14px}
.legal ul{margin:0 0 14px 22px;color:var(--body-soft)}
.legal li{margin-bottom:6px}
.legal a{color:var(--brand-strong);font-weight:600}
/* ---------- utilitario reveal ---------- */
.reveal{opacity:1}
@media(prefers-reduced-motion:no-preference){
.reveal{opacity:0;transform:translateY(8px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
}
/* ==========================================================
RESPONSIVO
========================================================== */
@media(max-width:960px){
/* hero: some o quadro, fica so o celular (como sempre foi no mobile) */
.hero-stage{max-width:none;margin-top:0;text-align:center}
.hero-stage .mb{display:none}
.hero-stage .pv-phone{position:static;width:min(100%,290px);margin:40px auto 0;box-shadow:0 30px 60px -40px rgba(12,29,27,.25)}
.places{grid-template-columns:1fr 1fr;gap:36px}
.tabs-proof{grid-template-columns:minmax(0,1fr);gap:52px;margin-top:60px}
.split{grid-template-columns:minmax(0,1fr);gap:48px}
.split .vis{order:-1}
.plans{grid-template-columns:minmax(0,1fr)}
.price-duo{grid-template-columns:1fr}
.tour-steps{grid-template-columns:1fr}
.area-block,.area-block:nth-child(even of .area-block){grid-template-columns:minmax(0,1fr);gap:22px;margin-top:52px}
.area-block:nth-child(even of .area-block) .area-txt{order:1}
.area-block:nth-child(even of .area-block) .area-scene{order:2}
.mob-sec{grid-template-columns:minmax(0,1fr);gap:36px}
.loja-sec{grid-template-columns:minmax(0,1fr);gap:36px}
.pv-kanban{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
.ea-steps{grid-template-columns:1fr;gap:48px;margin-top:44px}
/* a faixa parava de caber e quebrava em duas linhas em cima da dobra: no
celular os itens saem da barra e viram gaveta (assets/nav.js). */
.nav .wrap{height:64px;flex-wrap:nowrap}
.nav-burg{display:flex}
.nav-actions{gap:10px}
.nav-login{display:none}
.nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:2px;
background:var(--paper);border-bottom:1px solid var(--line);padding:8px 24px 14px;
box-shadow:0 18px 30px -24px rgba(12,29,27,.5)}
.nav-links:not(.aberto){display:none}
.nav-links a{padding:11px 12px;border-radius:10px;border-bottom:0;font-size:15px;font-weight:600;color:var(--ink-soft)}
.nav-links a.active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(12,29,27,.06)}
.nav-links .so-mob{display:block}
.nav-login{font-size:14px}
.nav .btn-sm{padding:9px 13px;font-size:13.5px}
.case{grid-template-columns:1fr;padding:36px 26px}
.case .badge{white-space:normal;justify-self:start}
.case-facts{grid-template-columns:1fr;gap:16px}
.principles{grid-template-columns:1fr}
.contact-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
.doors{grid-template-columns:1fr;gap:14px;margin-top:28px}
/* empilhado, quem entra primeiro na dobra e a porta da IA - e ela que responde
a duvida de quem ainda nao vende (a outra porta ganha o scroll de quem ja sabe). */
.door-eai{order:-1}
.door h3{font-size:20px}
.mb-side{display:none}
.mb-week{grid-template-columns:1fr 1fr}
.mb-week .mb-day:nth-child(3){display:none}
.mb-body{min-height:0}
.money-hero{padding:30px 22px}
.steps{grid-template-columns:1fr;gap:28px}
.places{grid-template-columns:1fr;gap:30px}
.foot-grid{grid-template-columns:1fr;gap:30px}
.rule{margin-top:72px}
}
@media(max-width:520px){
body{font-size:16px}
/* CTAs longos (ex: "Escolha as suas em 2 minutos") nao podem estourar a borda
em telas estreitas (320px): deixa quebrar linha e limita a largura. Botao
curto nao quebra, entao e seguro pro conjunto. (achado sweep 22/jul) */
.btn{white-space:normal;max-width:100%;text-align:center}
.logo{font-size:17px}
.logo img{width:24px;height:24px}
.nav-right{gap:16px;font-size:14px}
/* dor e ritmo: linhas inteiras, sem palavra orfa */
.pain p{font-size:30px}
.beat .seg{display:block}
.beat i{display:none}
/* DOBRA MOBILE: headline + CTA dentro de 375x667 */
.hero{padding-top:44px}
.hero h1{font-size:31px;line-height:1.12;max-width:none}
.hero{padding-top:44px}
.hero .lead{font-size:16px;margin-top:16px}
.hero .lead{margin-top:14px;font-size:16px}
.hero-ctas{margin-top:22px;gap:10px}
.hero-ctas .btn{width:100%;font-size:16px}
.hero-ctas .btn-primary{padding:14px 20px}
.hero-ctas .btn-line{padding:12.5px 20px}
.hero-sub{margin-top:12px;font-size:13px}
.hero-stage .pv-phone{margin-top:44px;width:min(100%,250px)}
/* dinheiro empilhado: nunca quebra texto */
.money-row{flex-direction:column;align-items:stretch;gap:10px}
.money-row .op{display:none}
.money-row .cell{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line-soft);padding-bottom:10px}
.money-row .cell:last-child{border-bottom:0;padding-bottom:0}
.money-row .cell b{font-size:24px;margin-top:0}
.money-row .cell.sobrou b{font-size:32px}
.money-hero .hint{margin-top:10px}
.places{grid-template-columns:1fr;gap:26px}
/* board: a regua Entrou-Saiu-Sobrou cabe sem estourar a 375px */
.mb-money{padding:12px 10px;gap:6px}
.mb-money .cell b{font-size:14.5px}
.mb-money .cell.sobrou b{font-size:18px}
.mb-money .cell span{font-size:8.5px;letter-spacing:.06em}
.mb-money .op{font-size:12px}
.pv-kanban{grid-template-columns:1fr 1fr}
}
/* ==========================================================
HOME: hero em duas colunas + as duas ferramentas gratis
(proposta D, aprovada em 01/ago/2026 - mockups/home-v6/)
----------------------------------------------------------
Duas mudancas sobre a home antiga, e so isso:
1. o hero vira 2 colunas - a esquerda continua a definicao,
o rotor e as duas portas; a direita ganha um cartao TINTA
com a calculadora fazendo a conta ao vivo (dados e logica
em assets/home-ferramentas.js, subconjunto de 5 fichas);
2. as secoes soltas #engrenouai e #calculadora, que viviam
enterradas no meio da pagina, viram UMA secao logo depois
da dor: calculadora no cartao CLARO, Engrenou.ai no cartao
TINTA - o escuro e a assinatura da maquina e e o unico
escuro da pagina.
========================================================== */
/* ---------- hero em duas colunas ---------- */
/* ---------- HERO de texto + a LINHA 1 + 2 ----------
A chamada central e texto puro. Embaixo, UM cartao de posse (a ferramenta
com os dados da pessoa) e UM painel que agrupa e rotula as duas ferramentas
gratis do ai. Nao sao 3 cartoes iguais de proposito: os dois da direita sao
irmaos declarados, e so se diferenciam pela silhueta - um e uma CONTA, o
outro e uma CONVERSA. A conta ao vivo mora na faixa #fichas, logo abaixo. */
.hero-txt{padding:60px 0 0}
.hero-txt h1{font-size:clamp(30px,4vw,58px);max-width:17em}
.hero-txt .lead{margin-top:18px}
.linha{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:16px;
margin:36px auto 0;text-align:left;align-items:stretch}
/* o botao, comum aos tres */
/* UM botao so pros tres cartoes: mesmo corpo, mesma altura minima e nunca em
duas linhas - com tamanhos diferentes eles nao leem como o mesmo convite. */
.bt{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:auto;font-family:var(--disp);
font-weight:700;font-size:14px;line-height:1.2;min-height:48px;border-radius:12px;padding:12px 14px;
text-decoration:none;transition:background .15s;white-space:nowrap}
.bt .arr{transition:transform .15s}
.linha a:hover .bt .arr,.ff-calc .bt:hover .arr{transform:translateX(3px)}
.pe{margin-top:10px;font-size:11.5px;color:var(--muted);text-align:center}
.pe-topo{text-align:left;margin-top:8px}
/* --- o cartao de POSSE (papel branco) --- */
.meu{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:22px 22px 31px;display:flex;
flex-direction:column;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-card);
transition:transform .15s,border-color .15s,box-shadow .15s}
.meu:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 26px 50px -32px rgba(12,29,27,.4)}
.meu .kick{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:#09756D;background:var(--brand-soft);border-radius:99px;padding:4px 10px;align-self:flex-start}
.meu h3{font-family:var(--disp);font-size:clamp(21px,2.2vw,26px);line-height:1.08;letter-spacing:-.03em;
margin-top:14px;text-wrap:balance}
.meu p{font-size:13.5px;line-height:1.55;color:var(--body-soft);margin-top:10px;text-wrap:pretty}
.meu p b{color:var(--ink)}
.meu .bt{background:var(--brand);color:#fff;margin-top:16px}
.meu:hover .bt{background:var(--brand-strong)}
/* recorte de PRINT REAL (nunca desenho generico). height:auto e obrigatorio:
o img carrega width/height nos atributos e sem isso esmaga na vertical. */
.app-print{display:block;position:relative;overflow:hidden;margin-top:16px;
aspect-ratio:920/290;border-radius:12px;border:1px solid var(--line);background:#fff}
.app-print img{position:absolute;max-width:none;width:260.87%;height:auto;left:-151.09%;top:-156%}
/* --- o painel das FERRAMENTAS GRATIS (tinta suavizada, do ai) ---
Era a tinta pura (#0C1D1B) e, contra o branco da pagina, lia como preto.
O tom novo NAO e inventado: e a propria reta tinta -> salvia da paleta, a 28%
(#213633). Fica visivelmente mais macio e o branco em cima ainda da 12,8:1 de
contraste, entao nada de legibilidade se perde. */
.gratis{background:radial-gradient(600px 300px at 82% -18%,rgba(255,184,77,.19),transparent 64%),#213633;
border-radius:20px;padding:16px;display:flex;flex-direction:column;color:#fff;
box-shadow:0 30px 60px -44px rgba(12,29,27,.62)}
.gratis-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 4px 14px}
.gratis .wm{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:-.01em}
.gratis .rot{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink);background:var(--saffron);border-radius:99px;padding:4px 10px;white-space:nowrap}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}
.fer{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:15px;
display:flex;flex-direction:column;text-decoration:none;color:#fff;transition:background .15s,border-color .15s}
.fer:hover{background:rgba(255,255,255,.09);border-color:rgba(255,184,77,.5)}
.fer h4,.fer .fer-tit{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.fer p{font-size:12.5px;line-height:1.5;color:#A9C4BF;margin-top:8px;text-wrap:pretty}
.fer p b{color:#fff}
/* o respiro vem de quem esta acima do botao: margin-top no proprio botao
venceria o margin-top:auto e desalinharia os dois CTAs do painel. */
.fer > :nth-last-child(2){margin-bottom:14px}
.fer .pe{color:#5E7B76;font-size:11px;margin-top:8px}
.f-calc .bt{background:var(--lemon);color:var(--ink)}
.f-calc .bt:hover{background:#e4f52c}
.f-ia .bt{background:var(--saffron);color:var(--ink)}
.f-ia .bt:hover{background:#F5A92E}
/* silhueta 1: a calculadora e uma CONTA parada */
.conta{display:block;margin-top:14px;background:rgba(0,0,0,.28);border-radius:12px;padding:12px}
.conta .lin{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11.5px;
color:#9FBDB7;padding:3px 0}
.conta .lin b{font-family:var(--disp);font-size:12.5px;color:#D6E3E0;font-weight:600}
.conta .tot{border-top:1px dashed rgba(255,255,255,.2);margin-top:7px;padding-top:8px}
.conta .tot span{color:#fff;font-weight:600;font-size:12px}
.conta .tot b{font-size:22px;color:var(--lemon);letter-spacing:-.03em}
/* silhueta 2: a IA e um BICHO falando */
.papo{display:flex;gap:10px;align-items:flex-start;margin-top:14px}
.papo .pet{--pet-sz:38px}
.papo .txt{background:rgba(255,255,255,.08);border-radius:13px;padding:9px 12px;font-size:12px;
line-height:1.45;font-weight:600;color:#fff}
.opcoes{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.opcoes i{font-style:normal;font-size:11px;font-weight:600;border-radius:99px;padding:4px 9px;
border:1px solid rgba(255,255,255,.18);color:#C3D6D2}
.opcoes i.on{background:#fff;color:var(--ink);border-color:#fff}
/* ---------- pecas compartilhadas com a faixa editavel ---------- */
.hc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.hc-chips button{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(255,255,255,.2);
border-radius:99px;padding:6px 11px;font-size:12.5px;font-weight:600;font-family:var(--ui);color:#fff;
background:none;cursor:pointer;transition:border-color .14s,background .14s,transform .14s}
.hc-chips button:hover{border-color:var(--saffron);transform:translateY(-1px)}
.hc-chips button.on{background:#fff;color:var(--ink);border-color:#fff}
/* a linha do QUE esta sendo calculado - sem ela o numero fica sem dono */
.hc-que{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
border-top:1px solid rgba(255,255,255,.13)}
.hc-que .e{font-size:16px;line-height:1}
.hc-que b{font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:-.015em}
.hc-que em{font-style:normal;font-size:11px;color:#9FBDB7}
.hc-fala{display:flex;gap:10px;align-items:flex-start;margin-top:15px;padding-top:14px;
border-top:1px solid rgba(255,255,255,.13)}
.hc-fala .pet{--pet-sz:34px}
.hc-fala p{font-size:12.5px;line-height:1.5;color:#E4EFEC}
.hc-fala p b{color:var(--lemon);font-weight:700}
.sel-ai{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--ink);background:var(--saffron);border-radius:99px;padding:3px 9px;white-space:nowrap}
/* o PAR ROTULADO: e ele que faz o numero ler como conta feita, e nao como
etiqueta de preco. Rotulo em cima, valor no meio, lastro embaixo. */
.par{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.par > span{display:block;min-width:0}
.par i{display:block;font-family:var(--disp);font-style:normal;font-size:9.5px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:#7F9E98}
.par b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(19px,1.8vw,23px);
letter-spacing:-.028em;line-height:1.1;margin-top:5px;color:var(--lemon)}
.par small{display:block;font-size:10.5px;line-height:1.35;color:#7F9E98;margin-top:4px}
.par .v-rua{color:var(--saffron);font-size:.86em}
/* barra de segmentos: hoje so /precificacao/ usa */
.seg-ing{background:#7F9E98}
.seg-hora{background:var(--saffron)}
.seg-sobra{background:var(--brand)}
/* ======================= /produto: o app antes da jornada =======================
A pagina abria com COMO o app se monta e empurrava as telas pra quinta
rolagem. Agora o produto vem primeiro, e as 5 telas dividem UM espaco em vez
de 5 secoes empilhadas: um navegador falso com as abas reais do app. Sem JS,
a primeira aba fica visivel e a pagina continua contando a historia. */
.tour{margin-top:40px}
/* a /ferramentas poe o cartao escuro logo abaixo do hero, que nao tem padding
embaixo - sem isto o cartao encosta na ultima linha do texto */
.page-hero + section > .wrap > .gratis{margin-top:40px}
.app-chrome{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
box-shadow:0 40px 90px -50px rgba(12,29,27,.5);text-align:left}
.chrome-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:var(--paper);
border-bottom:1px solid var(--line)}
.chrome-bar .d{width:9px;height:9px;border-radius:50%;background:var(--line);flex:0 0 auto}
.chrome-url{margin-left:12px;font-size:11.5px;color:var(--muted);background:#fff;
border:1px solid var(--line);border-radius:99px;padding:4px 14px}
.abas{display:flex;gap:4px;padding:12px 14px 0;background:var(--paper);
border-bottom:1px solid var(--line);overflow-x:auto}
.abas button{flex:0 0 auto;border:0;background:none;cursor:pointer;font-family:var(--disp);
font-weight:600;font-size:14px;color:var(--muted);padding:10px 16px;border-radius:12px 12px 0 0;
border-bottom:2px solid transparent;transition:color .14s,background .14s}
.abas button:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.abas button.on{color:var(--ink);background:#fff;border-bottom-color:var(--brand)}
/* SEM JS: uma tela por vez, sem sobreposicao - a pagina continua inteira. */
.tela{display:none}
.tela.on{display:block}
/* COM JS (a classe .animado entra pelo tour.js): o palco recebe a ALTURA
MEDIDA da tela ativa e anima entre uma e outra. Sem isso a pagina pularia a
cada troca automatica - a tela de Producao e 2,7x mais larga que alta e a de
Pedidos e quase quadrada.
NAO ha cross-fade de proposito: a primeira versao sobrepunha as telas e
cruzava opacidade com `visibility` na transicao, e o estado invertia - a tela
ATIVA ficava transparente e uma inativa opaca, ou seja, a aba dizia uma coisa
e a imagem mostrava outra. Uma tela por vez, com a altura animada, e o que
sempre se ve certo. */
.telas.animado{position:relative;overflow:hidden;transition:height .38s cubic-bezier(.4,0,.2,1)}
/* a barrinha que enche embaixo da aba ativa so aparece enquanto o rodizio
roda: ela avisa que vai virar sozinho. Parou (a pessoa clicou), some. */
.abas.auto button.on{position:relative;border-bottom-color:var(--line)}
.abas.auto button.on::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
background:var(--brand);transform-origin:left;animation:aba-tempo 5.5s linear forwards}
@keyframes aba-tempo{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
.telas.animado{transition:none}
.abas.auto button.on::after{animation:none;transform:scaleX(1)}
}
.tela > img{display:block;width:100%;height:auto}
.tela-pe{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding:14px 18px;border-top:1px solid var(--line-soft);background:#fff}
.tela-pe p{font-size:13.5px;color:var(--body-soft);line-height:1.55;max-width:60em}
.tela-pe p b{color:var(--ink)}
/* os quatro celulares: prints reais das MESMAS telas.
Fileira UNICA no desktop: com quatro, o 2x2 empurrava metade pra fora da
dobra e o conjunto deixava de se ler de uma vez - que e justamente o que a
secao afirma ("a mesma tela, do computador ao bolso"). Entre 861 e 1100px
nao cabe quatro sem espremer, entao ali volta pro 2x2. */
.fones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:34px auto 0;max-width:1120px}
.fone{margin:0;text-align:center}
.fone figcaption{margin-top:14px;font-size:13.5px;color:var(--body-soft)}
.fone figcaption b{display:block;font-family:var(--disp);font-size:15.5px;color:var(--ink);
letter-spacing:-.015em;margin-bottom:2px}
/* a grade do que vem dentro */
.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.grade .item{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px}
.grade .item .n{display:block;font-family:var(--disp);font-size:10px;font-weight:700;
letter-spacing:.13em;text-transform:uppercase;color:var(--brand-strong);margin-bottom:9px}
.grade .item > b{display:block;font-family:var(--disp);font-size:16px;letter-spacing:-.015em}
.grade .item p{margin-top:7px;font-size:13.5px;color:var(--body-soft);line-height:1.55}
.grade .item p b{color:var(--ink)}
/* o bloco tinta do fecho: a jornada, agora no fim */
/* mesmo tom do painel das ferramentas (#213633): as duas caixas escuras
convivem na mesma pagina, e deixar uma suavizada e a outra na tinta pura
faz a pagina parecer ter dois pretos. */
.monta{background:radial-gradient(600px 300px at 85% -16%,rgba(255,184,77,.16),transparent 64%),#213633;
border-radius:22px;padding:clamp(28px,3.6vw,44px);margin-top:34px;color:#fff}
.monta h2{color:#fff;max-width:16em}
.monta .cap{color:#A9C4BF;max-width:44em;margin-top:14px}
.monta .cap b{color:#fff}
.passos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.passo{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px}
.passo .n{font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--saffron)}
.passo b{display:block;font-family:var(--disp);font-size:16px;margin-top:9px;letter-spacing:-.015em}
.passo p{margin-top:6px;font-size:13px;color:#A9C4BF;line-height:1.5}
.monta-pe{margin-top:24px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.monta-pe .fine{font-size:13px;color:#7F9E98}
@media(max-width:1100px) and (min-width:861px){
.fones{grid-template-columns:1fr 1fr;max-width:640px;gap:26px}
}
@media(max-width:860px){
.grade,.passos{grid-template-columns:1fr}
/* quatro celulares empilhados viram uma rolagem longa demais no celular:
viram prateleira que corre pro lado, com encaixe. O overflow mora AQUI,
nunca na pagina. */
.fones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;
max-width:none;padding-bottom:6px;margin-inline:-24px;padding-inline:24px;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fones::-webkit-scrollbar{display:none}
.fone{flex:0 0 232px;scroll-snap-align:center}
.abas button{font-size:13px;padding:9px 12px}
}
/* ---------- a faixa das fichas: lastro + A CONTA EDITAVEL ----------
O cartao la em cima entrega a conta pronta; aqui ela vira editavel, com os
mesmos tres campos de /precificacao/. Cartao curto pra clicar, conta
completa pra ficar. */
.ff{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(22px,3.4vw,40px);
align-items:center;background:var(--paper);border:1.5px solid var(--line);
border-radius:22px;padding:clamp(24px,3vw,34px)}
.ff h2{font-size:clamp(26px,3vw,36px)}
.ff .cap{margin:14px 0 0;max-width:none}
.ff .mini{margin-top:12px}
.ff-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.ff-lbl{flex:0 0 100%;font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted)}
.ff-links a{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 13px;
font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;
transition:border-color .14s,color .14s,transform .14s}
.ff-links a:hover{border-color:var(--brand);color:var(--brand-strong);transform:translateY(-1px)}
.ff-calc{background:radial-gradient(460px 260px at 88% -14%,rgba(255,184,77,.18),transparent 66%),#213633;
color:#fff;border-radius:20px;padding:20px;box-shadow:0 40px 76px -46px rgba(12,29,27,.65)}
.fc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:13px;
border-bottom:1px solid rgba(255,255,255,.13)}
.fc-campos{display:grid;gap:8px;margin-top:16px}
.fc-campos label{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.26);border-radius:12px;
padding:9px 12px}
.fc-campos label > span{flex:1;font-size:12px;color:#9FBDB7}
.fc-campos i{font-style:normal;font-size:12px;color:#7F9E98}
.fc-campos input{width:78px;background:none;border:0;border-bottom:1.5px solid rgba(255,255,255,.25);
color:var(--lemon);font-family:var(--disp);font-weight:700;font-size:16px;text-align:right;padding:2px 4px;
-moz-appearance:textfield}
.fc-campos input:focus{outline:none;border-bottom-color:var(--saffron)}
.fc-campos input::-webkit-outer-spin-button,.fc-campos input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ff-calc .bt{background:var(--lemon);color:var(--ink);margin-top:16px}
.ff-calc .bt:hover{background:#e4f52c}
.btn-ai{background:var(--saffron);color:var(--ink);padding:16px 30px;font-size:17px;
box-shadow:0 0 0 1px #A8700E,0 12px 24px -16px rgba(0,0,0,.6)}
.btn-ai:hover{background:#F5A92E}
/* 1140px e onde o .wrap para de encolher (max-width 1080 + 2x24 de padding).
Abaixo disso o painel aperta e o botao mais longo estoura, porque os tres
sao nowrap de proposito. Entao e ai que tudo empilha - nao aos 980. */
@media(max-width:1140px){
/* 38/62 nao cabe mais: o cartao de posse e o painel empilham, e as duas
ferramentas do painel viram uma embaixo da outra. */
.linha{grid-template-columns:1fr;max-width:560px;gap:14px}
.dupla{grid-template-columns:1fr}
.ff{grid-template-columns:1fr}
.ff-calc{max-width:560px}
}
/* Abaixo de 360px o botao mais longo nao cabe numa linha e, por ser nowrap,
empurrava a PAGINA INTEIRA pra rolagem horizontal (achado medindo 320px).
Entre quebrar um botao e quebrar a pagina, quebra o botao. Nao dispara em
375px, que e o menor aparelho que a gente de fato mira. */
@media(max-width:360px){
.bt{white-space:normal}
}
@media(max-width:700px){
.hero-txt{padding-top:44px}
.linha{margin-top:30px}
.fc-campos input{width:66px}
}
/* ---------- HOME REORDENADA (02/ago): uma pergunta por dobra ----------
O hero perdeu os cartoes e o palco: ele responde so "o que e isto". As duas
ferramentas gratis viram DUAS PORTAS em sequencia - primeiro a calculadora
com a conta ao vivo (o cartao-resumo morreu, era a mesma conta duas vezes),
depois a IA. Uma clara e outra escura de proposito: sao portas diferentes. */
/* sem o palco, o respiro do hero somava com a margem da primeira regua e
deixava ~250px de nada entre o botao e a secao seguinte */
.hero-so{padding-bottom:0}
/* o vao entre o hero e a primeira secao era de 285px: a margem de topo do
.stop (204px em 1280) SOMAVA com o padding que eu tinha posto aqui.
Zerando a margem, o respiro passa a vir de um lugar so. */
.hero-so + .stop{margin-top:0;padding-top:clamp(44px,5vw,76px)}
.hero-so .hero-ctas{margin-top:34px;justify-content:center}
/* tres portas: elas precisam caber lado a lado sem virar tres blocos empilhados
no desktop, e empilhar limpo no celular. A primeira e a unica cheia - as
outras duas sao alternativas, nao concorrentes do CTA principal. */
/* Tres portas de PESO IGUAL, em tom suave e centradas.
Historico, porque as pontas ja foram testadas: todas brancas ficou sem apelo
("MS-DOS"), todas na cor cheia ficou forte demais. O tom e a cor da casa
diluida sobre branco (14% de fundo, 38% de borda) com a tinta no texto.
Sem selo e sem seta: a seta era o que comia a largura e empurrava o rotulo
pra duas linhas no desktop - 303px de texto disputando 268px uteis. Sem ela,
os tres cabem em UMA linha, centrados, e o botao pode ser mais baixo. */
.portas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
margin:34px auto 0;max-width:1120px}
.portas .porta{display:flex;align-items:center;justify-content:center;
min-height:56px;padding:14px 16px;border-radius:var(--r-ctrl,14px);
text-decoration:none;color:var(--ink);border:1px solid transparent;
font-family:var(--ui);font-weight:600;letter-spacing:-.01em;
/* clamp pra caber em uma linha tambem quando a coluna aperta (~1000px) */
font-size:clamp(13.5px,1.15vw,15px);white-space:nowrap;
text-align:center;line-height:1.2;
transition:transform .15s,box-shadow .15s,border-color .15s}
.portas .porta:hover{transform:translateY(-2px);box-shadow:0 14px 26px -20px rgba(12,29,27,.4)}
.portas .porta:active{transform:scale(.985)}
.portas .porta-app{background:#DDF5F3;border-color:#A4E3DD}
.portas .porta-app:hover{border-color:var(--brand)}
.portas .porta-calc{background:#FDFFE4;border-color:#EAF29A}
.portas .porta-calc:hover{border-color:#D6E24A}
.portas .porta-quiz{background:#FFF5E6;border-color:#FFE4BB}
.portas .porta-quiz:hover{border-color:var(--saffron)}
@media(max-width:760px){
.portas{grid-template-columns:1fr;max-width:420px}
.portas .porta{min-height:52px}
}
/* (03/ago) removidas as chaves orfas + regras mortas p-txt/p-selo que
sobraram da versao com selo - o parser ja as descartava, era lixo. */
.hero-so .hero-sub{margin-top:16px}
.porta-ia-sec{margin-top:clamp(18px,2.4vw,28px)}
.porta-ia{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(18px,2.6vw,34px);align-items:center;
background:radial-gradient(520px 280px at 88% -16%,rgba(255,184,77,.19),transparent 64%),#213633;
border-radius:22px;padding:clamp(22px,3vw,32px);color:#fff;text-decoration:none;
box-shadow:0 30px 60px -44px rgba(12,29,27,.62);transition:transform .16s,box-shadow .16s}
.porta-ia:hover{transform:translateY(-2px);box-shadow:0 36px 70px -44px rgba(12,29,27,.7)}
.pi-txt .wm{display:inline-block;font-family:var(--disp);font-weight:700;font-size:13px;
letter-spacing:-.01em;margin-bottom:12px}
.pi-txt h3{font-family:var(--disp);font-size:clamp(24px,2.8vw,34px);line-height:1.08;
letter-spacing:-.03em;color:#fff;text-wrap:balance}
.pi-txt p{margin-top:12px;font-size:15px;line-height:1.55;color:#A9C4BF;max-width:32em;text-wrap:pretty}
.pi-txt p b{color:#fff}
.pi-demo{display:flex;flex-direction:column;gap:10px}
/* o botao atravessa as duas colunas, como o piso da porta */
.porta-ia .bt{grid-column:1 / -1;justify-self:start;background:var(--saffron);color:var(--ink)}
.porta-ia .bt:hover{background:#ffc76e}
@media(max-width:820px){
.porta-ia{grid-template-columns:1fr;gap:18px}
.porta-ia .bt{justify-self:stretch;text-align:center}
}
/* ---------- /precos: a mesma tabela em dois formatos (02/ago) ----------
Medido antes de mexer: a tabela tinha 922px presa num wrap travado em 1080,
entao ela parecia espremida no meio de qualquer monitor grande; e em 390px
eram 10 linhas x 4 colunas em 320px de largura, com a pagina em 4.295px.
No desktop ela ESCAPA do wrap; no celular vira tres cartoes montados a partir
dela mesma (assets/precos.js), com a tabela atras de um botao. */
/* O ALARGAMENTO NO DESKTOP FICOU DE FORA (02/ago), de proposito.
A tabela tem 922px porque as colunas se dimensionam pelo conteudo, e ha uma
regra mais especifica nela que vence width:100% - tentei por .billing,
.plans-tbl e table e nas tres a medicao voltou 922. Publicar a media query
assim so deixaria CSS morto no arquivo. O container ate alargava pra 1240,
mas a tabela continuava centrada em 922 dentro dele, o que PIORA (mais vazio
dos lados). Fica pra quando der pra achar a regra que manda de verdade. */
/* esconde o CONTAINER, nao a : o display:none na table perdia pra uma
regra mais especifica e ela reaparecia inteira embaixo dos cartoes (achado do
Michel em producao, 02/ago). No container a regra e inequivoca. */
.plans-tbl.com-cards > .tbl,
.plans-tbl.com-cards .tbl{display:none !important}
.plans-tbl.com-cards.tabela-aberta > .tbl,
.plans-tbl.com-cards.tabela-aberta .tbl{display:block !important}
.plans-tbl.com-cards .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.plans-tbl.com-cards.tabela-aberta .tbl{margin-top:18px}
.plans-tbl.com-cards.tabela-aberta table{min-width:560px}
.pl-cards{display:grid;gap:14px}
.pl-card{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:20px 18px}
.pl-card.hl{border-color:var(--brand);box-shadow:0 18px 40px -30px rgba(15,181,166,.55)}
.pl-card .pill{position:absolute;top:-10px;left:18px;font-family:var(--disp);font-size:10px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;background:var(--brand);color:#fff;border-radius:99px;padding:4px 10px}
.pl-card .pname{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.02em}
.pl-card .price{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:-.03em;margin-top:2px}
.pl-card .price small{font-size:.42em;font-weight:600;color:var(--muted);margin-left:2px}
.pl-card .pdesc{font-size:13.5px;color:var(--body-soft);margin-top:4px}
.pl-card ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.pl-card li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
font-size:14px;line-height:1.35;padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.pl-card li:last-child{border-bottom:0;padding-bottom:0}
.pl-card .n{color:var(--body-soft)}
.pl-card .v{font-weight:600;color:var(--ink);white-space:nowrap}
.pl-card .ok{color:var(--brand-strong);font-weight:700}
.pl-ver{display:block;width:100%;margin-top:16px;padding:13px 16px;border:1px solid var(--line);
background:#fff;border-radius:var(--r-ctrl,14px);font:inherit;font-weight:600;font-size:14px;
color:var(--body-soft);cursor:pointer}
.pl-ver:hover{color:var(--ink);border-color:var(--brand)}
/* ============================================================================
Botao flutuante de ideia (feedback.js). Markup injetado por JS.
O widget mora no canto inferior direito e NAO compete com o conteudo: no
desktop e uma pilula discreta que vira cartao ancorado; no celular vira folha
de baixo, porque cartao flutuante em tela pequena tapa o que a pessoa lia.
z-index alto o bastante pra ficar sobre a pagina, e so.
========================================================================== */
.fb-raiz{position:fixed;right:20px;bottom:20px;z-index:60;font-family:var(--ui)}
.fb-bt{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 10px;
border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;
font:inherit;font-size:14px;font-weight:600;color:var(--ink);
box-shadow:var(--shadow-card);transition:border-color .16s,box-shadow .16s,transform .16s}
.fb-bt:hover{border-color:var(--brand);transform:translateY(-1px)}
.fb-bt .pet{--pet-sz:26px;flex:0 0 auto}
.fb-raiz.aberto .fb-bt{opacity:0;pointer-events:none}
.fb-painel{position:absolute;right:0;bottom:0;width:370px;max-width:calc(100vw - 32px);
max-height:min(78vh,640px);overflow:auto;background:#fff;border:1px solid var(--line);
border-radius:20px;box-shadow:var(--shadow-stage);padding:22px 22px 18px}
.fb-x{position:absolute;top:12px;right:12px;width:30px;height:30px;display:inline-flex;
align-items:center;justify-content:center;border:0;background:transparent;border-radius:9px;
color:var(--muted);cursor:pointer}
.fb-x:hover{background:var(--paper);color:var(--ink)}
.fb-x svg{width:17px;height:17px}
.fb-topo{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding-right:24px}
.fb-topo .pet{--pet-sz:36px;flex:0 0 auto;margin-top:2px}
.fb-painel h3{font-family:var(--disp);font-weight:600;font-size:17px;line-height:1.25;color:var(--ink)}
.fb-sub{font-size:13.5px;line-height:1.45;color:var(--body-soft);margin-top:5px}
.fb-sub b{color:var(--ink)}
.fb-lb{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin:12px 0 5px}
.fb-lb:first-child{margin-top:0}
.fb-lb i{font-style:normal;font-weight:400;color:var(--muted)}
.fb-form textarea,.fb-form input[type=text]{display:block;width:100%;font:inherit;font-size:14px;
color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
resize:vertical}
.fb-form textarea:focus,.fb-form input[type=text]:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.fb-form textarea::placeholder,.fb-form input::placeholder{color:var(--ghost)}
.fb-hint{display:block;font-size:12px;color:var(--muted);margin-top:5px}
/* isca de bot: fora da tela, mas nao display:none (robo ignora o que some) */
.fb-isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fb-erro{font-size:13px;line-height:1.4;color:#B4261F;background:#FDF0EF;border-radius:10px;
padding:9px 11px;margin-top:12px}
.fb-enviar{display:block;width:100%;margin-top:14px;padding:12px 16px;border:0;border-radius:999px;
background:var(--brand);color:#fff;font:inherit;font-weight:700;font-size:14.5px;cursor:pointer}
.fb-enviar:hover{background:var(--brand-strong)}
.fb-enviar:disabled{opacity:.6;cursor:default}
.fb-regras{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:12px}
.fb-regras summary{font-size:12.5px;color:var(--muted);cursor:pointer;list-style:none}
.fb-regras summary::-webkit-details-marker{display:none}
.fb-regras summary::before{content:'+ ';color:var(--brand-strong);font-weight:700}
.fb-regras[open] summary::before{content:'- '}
.fb-regras ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.fb-regras li{font-size:12.5px;line-height:1.45;color:var(--body-soft);padding-left:13px;position:relative}
.fb-regras li::before{content:'';position:absolute;left:0;top:7px;width:4px;height:4px;
border-radius:50%;background:var(--line)}
.fb-ok{text-align:center;padding:14px 4px 6px}
.fb-ok .pet{--pet-sz:52px;margin-bottom:12px}
.fb-ok p{font-size:13.5px;line-height:1.5;color:var(--body-soft);margin-top:6px}
.fb-fechar-ok{margin-top:16px;padding:10px 22px;border:1px solid var(--line);border-radius:999px;
background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--body-soft);cursor:pointer}
.fb-fechar-ok:hover{color:var(--ink);border-color:var(--brand)}
@media(max-width:560px){
.fb-raiz{right:14px;bottom:14px}
.fb-bt{padding:8px 14px 8px 9px;font-size:13.5px}
/* rolou a primeira dobra: o convite ja foi lido, entao a pilula sai da frente
do texto e vira bolha (a pagina e estreita, o botao fica em cima de tudo) */
.fb-raiz.rolou .fb-bt-txt{display:none}
.fb-raiz.rolou .fb-bt{padding:9px;border-radius:50%}
.fb-raiz.rolou .fb-bt .pet{--pet-sz:28px}
/* folha de baixo: o cartao ancorado no canto tapava o conteudo no celular */
.fb-raiz.aberto{left:0;right:0;bottom:0;top:0;background:rgba(12,29,27,.34)}
.fb-painel{position:fixed;left:0;right:0;bottom:0;width:auto;max-width:none;
max-height:88vh;border-radius:20px 20px 0 0;padding:20px 18px 22px}
}