/* Identidade visual Agência F3X (agenciaf3x.com.br): Geist + Geist Mono + Saira itálico, verde #0bb32e sobre #050706 e papel branco. */
:root{
  --escuro:#050706;--escuro-2:#0b0e0c;--papel:#fff;--papel-2:#f6f7f4;
  --tinta:#12141a;--ink:#0e1114;--tinta-2:#4b5250;--tinta-3:#6b7280;
  --linha:#e5e5df;--linha-escura:rgba(255,255,255,.1);
  --f3x:#0bb32e;--f3x-escuro:#04140a;--brand-400:#7ed957;--brand-700:#1e7a2e;--neon:#00ff41;--rosa:#e6007e;
  --sub:#aeb4ad;
  --font-sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-vel:"Saira",system-ui,sans-serif;
  --max:1200px;--r:1.25rem;--r-lg:1.5rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--tinta);background:var(--papel);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(var(--max),100% - 40px);margin-inline:auto}
@media (max-width:640px){.wrap{width:calc(100% - 32px)}}

/* tipografia */
.titulo{font-family:var(--font-vel);font-style:italic;font-weight:800;letter-spacing:-.025em;line-height:.98}
.titulo .verde{color:var(--f3x)}
.escuro .titulo .verde{color:var(--brand-400)}
.titulo .ponto{color:var(--rosa)}
h1.titulo{font-size:clamp(2.5rem,6vw,5.2rem)}
h2.titulo{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-weight:700;letter-spacing:-.01em}
.eyebrow{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-700);font-weight:500}
.escuro .eyebrow{color:var(--brand-400)}
.rotulo{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.escuro .rotulo{color:rgba(255,255,255,.55)}
.sub{color:var(--tinta-2);font-size:1.0625rem;max-width:34rem}
.escuro .sub{color:var(--sub)}
.escuro{background:var(--escuro);color:#fff}
.claro{background:var(--papel);color:var(--tinta)}
.claro-2{background:var(--papel-2)}

/* botões pílula com seta */
.btn-seta{display:inline-flex;align-items:center;gap:.9rem;padding:.4rem .4rem .4rem 1.4rem;border-radius:999px;font-size:.95rem;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--font-sans);transition:transform .2s,background-color .2s,border-color .2s;white-space:nowrap}
.btn-seta:hover{transform:translateY(-1px)}
.seta{width:1.9rem;height:1.9rem;border-radius:999px;display:grid;place-items:center;flex:none;font-size:.85rem;font-style:normal;line-height:1;transition:transform .3s}
.btn-seta:hover .seta{transform:rotate(45deg)}
.btn-seta-verde{background:var(--f3x);color:var(--f3x-escuro);box-shadow:0 12px 40px -12px rgba(11,179,46,.7)}
.btn-seta-verde .seta{background:var(--f3x-escuro);color:var(--f3x)}
.btn-seta-linha{border-color:var(--linha);color:var(--tinta);background:transparent}
.btn-seta-linha .seta{background:var(--escuro);color:var(--f3x)}
.escuro .btn-seta-linha{border-color:rgba(255,255,255,.2);color:#fff}
.escuro .btn-seta-linha .seta{background:var(--f3x);color:var(--f3x-escuro)}
.btn-seta-branco{background:#fff;color:var(--escuro)}
.btn-seta-branco .seta{background:var(--f3x);color:var(--f3x-escuro)}
.btn-seta-escuro{background:var(--escuro);color:#fff}
.btn-seta-escuro .seta{background:var(--f3x);color:var(--f3x-escuro)}
.btn-bloco{width:100%;justify-content:space-between}
button.btn-seta:disabled{opacity:.6;cursor:wait}

/* header */
.topo{position:sticky;top:0;z-index:50;background:rgba(5,7,6,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha-escura)}
.topo .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topo .logo img{height:30px;width:auto}
.topo .nav-direita{display:flex;align-items:center;gap:10px}
.topo .nav-info{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@media (max-width:640px){.topo .nav-info{display:none}.topo .btn-seta{padding-left:1rem;font-size:.875rem}}

/* hero */
.hero{position:relative;overflow:hidden;padding:72px 0 0}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 20%,rgba(11,179,46,.18),transparent 70%);pointer-events:none}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative}
.hero .corpo>*+*{margin-top:22px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero .nota{font-family:var(--font-mono);font-size:.75rem;color:rgba(255,255,255,.5);letter-spacing:.02em}
.hero .arte{position:relative;justify-self:end;width:min(100%,560px)}
.hero .arte.retrato{width:min(100%,360px)}
.hero .arte .quadro{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--linha-escura);background:#0b0e0c;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.hero .arte .quadro img{width:100%;height:auto;object-fit:cover}
.tele{position:absolute;left:-40px;bottom:36px;width:15.5rem;padding:1rem 1.1rem .9rem;border-radius:1rem;background:rgba(5,7,6,.85);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}
.tele .t-topo{display:flex;justify-content:space-between;color:rgba(255,255,255,.55);margin-bottom:.6rem}
.tele .t-topo b{color:var(--neon);font-weight:500}
.tele .t-topo b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--neon);margin-right:6px;vertical-align:middle;box-shadow:0 0 8px var(--neon)}
.tele .t-lin{display:flex;justify-content:space-between;align-items:baseline;padding:.35rem 0;border-top:1px dotted rgba(255,255,255,.18);color:rgba(255,255,255,.6)}
.tele .t-lin b{font-family:var(--font-vel);font-style:italic;font-weight:800;font-size:1rem;color:#fff;letter-spacing:0;text-transform:none}
@media (max-width:960px){.hero{padding-top:48px}.hero .grid{grid-template-columns:1fr;gap:40px}.hero .arte{justify-self:center;width:min(100%,520px)}.hero .arte.retrato{width:min(100%,300px)}.tele{left:-8px;bottom:-24px;width:14rem}}

/* faixa de marcas */
.faixa{margin-top:64px;border-top:1px solid rgba(255,255,255,.08);padding:.95rem 0;overflow:hidden;white-space:nowrap;position:relative}
.faixa .trilho{display:inline-flex;align-items:center;font-family:var(--font-vel);font-style:italic;font-weight:800;text-transform:uppercase;font-size:.95rem;color:#6f766e;animation:corre 38s linear infinite}
.faixa .item{display:inline-flex;align-items:center;gap:.7rem;padding-right:2.4rem}
.faixa .marca{display:inline-flex;align-items:center;height:2.25rem;padding:0 .9rem;border-radius:999px;background:#fff;color:var(--escuro);font-family:var(--font-vel);font-style:italic;font-weight:800;font-size:.85rem;letter-spacing:-.01em}
@keyframes corre{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.faixa .trilho{animation:none}}

/* seções */
section{padding:88px 0}
@media (max-width:640px){section{padding:64px 0}}
.cabeca{max-width:46rem;margin-bottom:40px}
.cabeca .eyebrow{display:block;margin-bottom:14px}
.cabeca p{margin-top:16px}

.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grade-2{grid-template-columns:repeat(2,1fr)}
.grade-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.grade,.grade-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grade,.grade-2,.grade-4{grid-template-columns:1fr}}

.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);padding:26px;transition:border-color .2s}
.cartao:hover{border-color:var(--f3x)}
.cartao h3{font-size:1.0625rem;margin-bottom:6px}
.cartao p{color:var(--tinta-3);font-size:.9375rem}
.cartao .ico{width:40px;height:40px;border-radius:12px;background:rgba(126,217,87,.15);border:1px solid rgba(126,217,87,.3);display:grid;place-items:center;margin-bottom:16px;color:var(--brand-700);font-size:1.1rem}
.cartao-escuro{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#fff}
.cartao-escuro p{color:var(--sub)}
.cartao-escuro .ico{background:rgba(126,217,87,.12);color:var(--brand-400)}
.cartao-escuro:hover{border-color:rgba(126,217,87,.6)}

/* passos */
.passos{border-top:1px solid var(--linha)}
.escuro .passos{border-color:var(--linha-escura)}
.passo{display:grid;grid-template-columns:7rem 1fr auto;gap:24px;align-items:start;padding:28px 0;border-bottom:1px solid var(--linha)}
.escuro .passo{border-color:var(--linha-escura)}
.passo .num{font-family:var(--font-vel);font-style:italic;font-weight:800;font-size:2.6rem;line-height:1;color:var(--f3x)}
.passo h3{font-size:1.125rem;margin-bottom:6px}
.passo p{color:var(--tinta-3);max-width:40rem}
.escuro .passo p{color:var(--sub)}
.passo .pill{align-self:center}
@media (max-width:720px){.passo{grid-template-columns:4.5rem 1fr}.passo .pill{grid-column:2}}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem;border-radius:999px;background:rgba(126,217,87,.12);border:1px solid rgba(126,217,87,.28);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-700);white-space:nowrap}
.escuro .pill{color:var(--brand-400)}

/* cases */
.case{position:relative;border-radius:var(--r-lg);background:var(--escuro);color:#fff;padding:26px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--linha-escura);transition:transform .3s}
.case:hover{transform:translateY(-4px)}
.claro .case{box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.case .tag{align-self:flex-start;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);padding:.3rem .8rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.case h3{font-family:var(--font-vel);font-style:italic;font-weight:800;font-size:1.75rem;letter-spacing:-.02em;line-height:1}
.case p{color:var(--sub);font-size:.9375rem;flex:1}
.case .metricas{display:flex;flex-wrap:wrap;gap:8px}
.case .metricas span{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px;background:rgba(126,217,87,.12);border:1px solid rgba(126,217,87,.3);color:var(--brand-400)}
.case .pe{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.case .pe .rotulo{color:rgba(255,255,255,.5)}
.case .pe .btn-seta{padding:.3rem .3rem .3rem 1.1rem;font-size:.85rem;background:#fff;color:var(--escuro);border:0}
.case .pe .btn-seta .seta{background:var(--f3x);color:var(--f3x-escuro);width:1.6rem;height:1.6rem}

/* chips de serviços / compromissos */
.chips{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:720px){.chips{grid-template-columns:1fr}}
.chip{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--r);background:var(--papel);border:1px solid var(--linha)}
.escuro .chip{background:rgba(255,255,255,.04);border-color:var(--linha-escura)}
.chip .ok{flex:none;width:28px;height:28px;border-radius:50%;background:var(--f3x);color:var(--f3x-escuro);display:grid;place-items:center;font-weight:900;font-size:.85rem;margin-top:2px}
.chip b{display:block;font-size:1rem;margin-bottom:2px}
.chip span{color:var(--tinta-3);font-size:.9375rem}
.escuro .chip span{color:var(--sub)}

/* faq */
.faq{max-width:52rem}
.faq details{border-bottom:1px solid var(--linha)}
.escuro .faq details{border-color:var(--linha-escura)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:700;font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .seta{background:var(--escuro);color:var(--f3x)}
.escuro .faq summary .seta{background:var(--f3x);color:var(--f3x-escuro)}
.faq details[open] summary .seta{transform:rotate(45deg)}
.faq .resp{padding:0 0 22px;color:var(--tinta-2);max-width:44rem}
.escuro .faq .resp{color:var(--sub)}

/* formulário */
.form-cartao{background:var(--papel);color:var(--tinta);border-radius:var(--r-lg);padding:40px;max-width:46rem;margin-inline:auto;box-shadow:0 40px 100px -40px rgba(0,0,0,.8)}
.form-cartao .eyebrow{display:block;margin-bottom:12px}
.form-cartao h2{margin-bottom:10px}
.form-cartao>p{color:var(--tinta-2);margin-bottom:26px}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.linha-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.linha-2{grid-template-columns:1fr}.form-cartao{padding:28px 22px}}
label{font-size:.8125rem;font-weight:600;color:var(--tinta)}
input,select,textarea{font:inherit;font-size:.95rem;color:var(--tinta);background:var(--papel);border:1px solid var(--linha);border-radius:.9rem;padding:.85rem 1rem;outline:none;width:100%;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--f3x);box-shadow:0 0 0 4px rgba(11,179,46,.15)}
textarea{min-height:110px;resize:vertical}
.privacidade{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--tinta-3);text-align:center;margin-top:12px}
.err{color:#d12f2f;font-size:.8125rem;display:none;margin-bottom:10px}
.sucesso{display:none;text-align:center;padding:24px 0}
.sucesso .big{font-size:3rem;line-height:1}
.sucesso h3{font-family:var(--font-vel);font-style:italic;font-weight:800;font-size:1.75rem;margin:12px 0 8px}
.sucesso p{color:var(--tinta-2);margin-bottom:20px}
.form-cartao.done form{display:none}.form-cartao.done .sucesso{display:block}

/* chamada final */
.chamada{padding:72px 0}
.chamada .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.chamada h2{max-width:40rem}

/* rodapé */
footer{background:var(--escuro);color:var(--sub);border-top:1px solid var(--linha-escura);padding:44px 0 56px;font-size:.875rem}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}
footer b{display:block;color:#fff;margin-bottom:8px;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
footer a{text-decoration:none}
footer a:hover{color:#fff}
footer .logo img{height:26px;width:auto;margin-bottom:14px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

/* whatsapp flutuante */
.fab{position:fixed;right:20px;bottom:20px;z-index:60;width:52px;height:52px;border-radius:50%;background:var(--f3x);display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.35);text-decoration:none}
.fab svg{width:26px;height:26px;fill:#fff}

/* carrossel de cases (uma linha, rolagem horizontal com snap) */
.carrossel-topo{display:flex;justify-content:flex-end;gap:10px;margin:-24px 0 20px}
.seta-nav{width:2.75rem;height:2.75rem;border-radius:999px;border:1px solid var(--linha);background:var(--papel);color:var(--tinta);font-size:1rem;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s}
.seta-nav:hover{background:var(--escuro);color:var(--f3x)}
.escuro .seta-nav{border-color:var(--linha-escura);background:transparent;color:#fff}
.escuro .seta-nav:hover{background:var(--f3x);color:var(--f3x-escuro)}
.carrossel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 20px;margin:0 -4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carrossel::-webkit-scrollbar{display:none}
.carrossel .case{flex:0 0 min(82%,380px);scroll-snap-align:start;min-height:420px}
.carrossel .case p{flex:1}
@media (max-width:640px){.carrossel-topo{margin-top:-12px}}

/* botões de ação maiores (hero, formulário, chamada final) */
.hero .ctas .btn-seta,.form-cartao .btn-bloco,.chamada .btn-seta,.sucesso .btn-seta{font-size:1.125rem;padding:.65rem .65rem .65rem 1.8rem;gap:1.1rem}
.hero .ctas .btn-seta .seta,.form-cartao .btn-bloco .seta,.chamada .btn-seta .seta,.sucesso .btn-seta .seta{width:2.5rem;height:2.5rem;font-size:1.05rem}
.hero .ctas .btn-seta-verde{box-shadow:0 18px 50px -14px rgba(11,179,46,.85)}
.form-cartao .btn-bloco{font-size:1.2rem;padding:.75rem .75rem .75rem 1.9rem}
@media (max-width:640px){.hero .ctas{flex-direction:column;align-items:stretch}.hero .ctas .btn-seta{justify-content:space-between;width:100%}.chamada .btn-seta{width:100%;justify-content:space-between}}

/* arte do aplicativo: só o celular, sem quadro */
.hero .arte.retrato{width:min(100%,300px);margin-top:-12px}
.hero .arte .celular{width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(11,179,46,.18))}
@media (max-width:960px){.hero .arte.retrato{width:min(100%,240px);margin-top:0}}