/* =====================================================================
   Fábrica de Sites — folha de estilo do site
   Construída sobre o design system oficial
   (assets/design-system-fabrica-de-sites/tokens.css + brand book).
   Regras da identidade que esta folha obedece:
   - preto e branco fazem o trabalho, o ouro aponta (até 3 usos por tela);
   - régua, bloco e rótulo; canto reto; sem sombra; sem gradiente;
   - FDS Display só em título/numeral; FDS Sans para ler e rotular;
   - espaçamento em múltiplos de 16px.
   ===================================================================== */

/* ---------- fontes (TeX Gyre Heros, GUST Font License) ---------- */
@font-face{font-family:"FDS Sans";src:url("assets/design-system-fabrica-de-sites/fonts/FDSSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FDS Sans";src:url("assets/design-system-fabrica-de-sites/fonts/FDSSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"FDS Display";src:url("assets/design-system-fabrica-de-sites/fonts/FDSDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FDS Display";src:url("assets/design-system-fabrica-de-sites/fonts/FDSDisplay-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens (mesmos nomes do design system) ---------- */
:root{
  color-scheme:light;
  --papel:#ffffff;
  --tinta:#000000;
  --tinta-70:#4d4d4d;
  --tinta-45:#8c8c8c;
  --tinta-22:#c7c7c7;
  --tinta-10:#e6e6e6;
  --ouro:#cc9908;
  --ouro-texto:#8c6708;
  --ouro-claro:#eddba3;
  --superficie-escura:#0f0f0f;

  --font-display:"FDS Display","Helvetica Neue Condensed","Arial Narrow",Helvetica,Arial,sans-serif;
  --font-sans:"FDS Sans",Helvetica,Arial,sans-serif;

  --espaco-1:4px;--espaco-2:8px;--espaco-3:12px;--espaco-4:16px;--espaco-5:24px;
  --espaco-6:32px;--espaco-7:48px;--espaco-8:64px;--espaco-9:96px;
  --maxw:1180px;
}
[data-theme="dark"]{
  color-scheme:dark;
  --papel:#0f0f0f;
  --tinta:#ffffff;
  --tinta-70:#b3b3b3;
  --tinta-45:#8c8c8c;
  --tinta-22:#3d3d3d;
  --tinta-10:#1f1f1f;
  --ouro:#e0ae1e;
  --ouro-texto:#e0ae1e;
  --ouro-claro:#3a2f10;
  --superficie-escura:#000000;
}

/* faixa escura: re-escopa os tokens para que os mesmos componentes funcionem dentro dela */
.faixa-escura{
  --papel:var(--superficie-escura);
  --tinta:#ffffff;
  --tinta-70:#b3b3b3;
  --tinta-45:#8c8c8c;
  --tinta-22:#3d3d3d;
  --tinta-10:#1f1f1f;
  --ouro:#e0ae1e;
  --ouro-texto:#e0ae1e;
  --ouro-claro:#3a2f10;
  background:var(--papel);color:var(--tinta);
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--papel)}
body{
  background:var(--papel);color:var(--tinta);
  font:400 16px/26px var(--font-sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .2s ease,color .2s ease;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
strong{font-weight:700;color:var(--tinta)}
ul{list-style:none}

h1,h2,h3,.display,.titulo,.subtitulo,.numeral{font-family:var(--font-display);font-weight:700;color:var(--tinta)}
h1,.display{font-size:clamp(40px,5.2vw,56px);line-height:1;letter-spacing:.005em}
h2,.titulo{font-size:clamp(30px,3.6vw,36px);line-height:1.1;letter-spacing:.005em}
h3,.subtitulo{font-size:24px;line-height:28px}
.numeral{font-size:64px;line-height:60px;color:var(--ouro)}
.corpo-grande{font-size:18px;line-height:28px}
.corpo{font-size:16px;line-height:26px}
.apoio{font-size:14px;line-height:22px}
.rotulo{font:700 12px/16px var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-70)}
.micro{font:700 11px/14px var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-70)}
.rotulo.ouro,.micro.ouro{color:var(--ouro-texto)}
.rotulo.q::before{content:"";display:inline-block;width:8px;height:8px;background:var(--ouro);margin-right:12px;vertical-align:1px}
.rotulo.q.cinza::before{background:var(--tinta-22)}
.cinza{color:var(--tinta-45)}
.sec-head .rotulo.q{margin-bottom:var(--espaco-6)}
.sec-head .rotulo.q + .regua{display:none}

/* régua: 3px em ouro anuncia; 1px em tinta-22 separa */
.regua{width:64px;height:3px;background:var(--ouro);margin-bottom:var(--espaco-5)}
.rotulo.q + .regua{margin-top:var(--espaco-5)}
.linha{height:1px;background:var(--tinta-22);border:0}

/* logos: uma variante por tema, sem JS (os arquivos não podem ser recoloridos por CSS) */
[data-theme="dark"] .logo-on-light{display:none}
:root:not([data-theme="dark"]) .logo-on-dark{display:none}
.faixa-escura .logo-on-light{display:none!important}
.faixa-escura .logo-on-dark{display:block!important}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--espaco-5)}
section{position:relative}
section[id],span#top{scroll-margin-top:88px}
.sec{padding:var(--espaco-9) 0;border-top:1px solid var(--tinta-22)}
.faixa-escura.sec{border-top:0}
.sec-head{max-width:760px}
.sec-head h2{margin:0}
.lead{color:var(--tinta-70);font-size:18px;line-height:28px;margin-top:var(--espaco-5);max-width:640px}
.fecho{margin-top:var(--espaco-7);padding-top:var(--espaco-5);border-top:1px solid var(--tinta-22)}
.fecho .micro{color:var(--tinta)}
.fonte{margin-top:var(--espaco-7);font-size:11px;line-height:16px;color:var(--tinta-45)}
@media(max-width:760px){.sec{padding:var(--espaco-8) 0}}

/* ---------- topo ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--papel);border-bottom:1px solid var(--tinta-22)}
.top .bar{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--espaco-5)}
.top .logo{height:32px;width:auto}
.top nav{display:flex;gap:var(--espaco-6)}
.top nav a{font:700 12px/16px var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-70);white-space:nowrap;
  padding-bottom:4px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.top nav a:hover{color:var(--tinta);border-bottom-color:var(--ouro)}
.top .actions{display:flex;align-items:center;gap:var(--espaco-3)}
@media(max-width:1060px){.top nav{gap:var(--espaco-4)}}
@media(max-width:900px){.top nav{display:none}}
@media(max-width:560px){.top .logo{height:26px}}

.theme-toggle{width:40px;height:40px;border:1px solid var(--tinta);display:inline-flex;align-items:center;justify-content:center;color:var(--tinta);flex:none;transition:background .2s,color .2s}
.theme-toggle:hover{background:var(--tinta);color:var(--papel)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}
.theme-toggle .ic-moon{display:none}
[data-theme="dark"] .theme-toggle .ic-sun{display:none}
[data-theme="dark"] .theme-toggle .ic-moon{display:block}

/* ---------- botões (bloco reto, rótulo em caixa alta) ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--espaco-3);font:700 12px/16px var(--font-sans);letter-spacing:.18em;text-transform:uppercase;
  padding:14px 24px;border:1px solid var(--tinta);color:var(--tinta);background:transparent;transition:background .18s,color .18s,border-color .18s;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--tinta);color:var(--papel)}
.btn-primary{background:var(--tinta);color:var(--papel)}
.btn-primary:hover{background:var(--ouro);border-color:var(--ouro);color:#000}
.btn-ouro{background:var(--ouro);border-color:var(--ouro);color:#000}
.btn-ouro:hover{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.top .btn{padding:11px 18px}
.btn .arr{font-family:var(--font-sans)}
@media(max-width:760px){.top .btn{padding:10px 12px;font-size:11px;letter-spacing:.12em}}

/* ---------- HERO (capa) ----------
   Foto de arquivo em preto e branco atrás do texto, com um véu chapado
   (sem gradiente) para o texto e o ouro lerem bem. A foto é decorativa:
   fica em .hero-bg, a leitura fica só no texto. */
.hero{position:relative;overflow:hidden;padding:var(--espaco-9) 0;min-height:min(78vh,720px);display:flex;align-items:center;isolation:isolate}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;filter:grayscale(1) contrast(1.05);z-index:-2}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.66);z-index:-1}
.hero .wrap{width:100%}
.hero-grid{display:grid;grid-template-columns:minmax(0,680px);gap:var(--espaco-8);align-items:center}
.hero-credito{position:absolute;right:var(--espaco-5);bottom:var(--espaco-4);color:var(--tinta-45);letter-spacing:.14em;font-weight:400}
.hero .rotulo{margin-bottom:var(--espaco-7)}
.hero .regua{margin-bottom:var(--espaco-5)}
.hero h1{font-size:clamp(44px,6vw,72px)}
.hero p.sub{color:var(--tinta-70);font-size:18px;line-height:28px;margin:var(--espaco-6) 0 var(--espaco-7);max-width:520px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:var(--espaco-4)}
.hero .contatos{margin-top:var(--espaco-7);padding-top:var(--espaco-5);border-top:1px solid var(--ouro);display:flex;justify-content:space-between;gap:var(--espaco-4);flex-wrap:wrap}
.hero .contatos .micro{color:var(--tinta)}
/* a proporção fica na moldura; a img preenche (os atributos width/height do HTML não mandam aqui) */
.foto{border:1px solid var(--tinta-22);border-top:3px solid var(--ouro);background:var(--tinta-10);aspect-ratio:4/5;overflow:hidden;align-self:center}
.foto.horizontal{aspect-ratio:4/3}
.foto img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--espaco-6)}.hero{display:block;min-height:0;padding-bottom:var(--espaco-6)}.hero::before{background:rgba(0,0,0,.74)}.hero-bg{object-position:70% 40%}.hero-credito{position:static;display:block;margin:var(--espaco-7) auto 0;max-width:var(--maxw);padding:0 var(--espaco-5)}.foto,.foto.horizontal{aspect-ratio:16/10}}

/* ---------- passos (procura · compara · confere · decide) ---------- */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--espaco-5);margin-top:var(--espaco-7)}
.passo{border-top:2px solid var(--ouro);padding-top:var(--espaco-4)}
.passo .numeral{font-size:40px;line-height:40px;margin-bottom:var(--espaco-5)}
.passo .rotulo{color:var(--tinta);margin-bottom:var(--espaco-3)}
.passo p{color:var(--tinta-70);font-size:14px;line-height:22px}
@media(max-width:900px){.passos{grid-template-columns:repeat(2,1fr)}}

/* bloco de destaque: ouro-claro, texto em tinta */
.bloco-destaque{background:var(--ouro-claro);color:var(--tinta);padding:var(--espaco-6);margin-top:var(--espaco-7)}
.bloco-destaque .subtitulo{color:var(--tinta)}
.bloco-destaque p{font-size:16px;line-height:26px}
.bloco-destaque .micro{margin-top:var(--espaco-4);color:var(--ouro-texto)}
.bloco{border:1px solid var(--tinta-22);padding:var(--espaco-6)}
.bloco-ouro{border:1px solid var(--ouro);padding:var(--espaco-6)}

/* ---------- números ---------- */
.numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--espaco-6);margin-top:var(--espaco-7)}
.numero .numeral{font-size:clamp(48px,5vw,64px);line-height:1;padding-bottom:var(--espaco-4);border-bottom:2px solid var(--tinta);margin-bottom:var(--espaco-4)}
.numero .numeral.cinza{color:var(--tinta-45)}
.numero p{color:var(--tinta-70);font-size:14px;line-height:22px}
@media(max-width:900px){.numeros{grid-template-columns:repeat(2,1fr)}}

/* ---------- sete sinais ---------- */
.sinais{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--espaco-8);row-gap:var(--espaco-6);margin-top:var(--espaco-7)}
.sinal{display:grid;grid-template-columns:56px 1fr;gap:var(--espaco-3);align-items:start}
.sinal .numeral{font-size:36px;line-height:36px}
.sinal p{color:var(--tinta-70);font-size:15px;line-height:24px;padding-top:6px}
@media(max-width:760px){.sinais{grid-template-columns:1fr}}

/* ---------- duas colunas (sem/com · rede/site) ---------- */
.duas{display:grid;grid-template-columns:1fr 1fr;gap:var(--espaco-7);margin-top:var(--espaco-7)}
.coluna{border-top:2px solid var(--ouro);padding-top:var(--espaco-4)}
.coluna.cinza{border-top-color:var(--tinta-22)}
.coluna h3{margin-bottom:var(--espaco-5)}
.coluna.cinza h3{color:var(--tinta-45)}
.coluna .rotulo{margin-bottom:var(--espaco-5)}
.lista-quadrado li{position:relative;padding-left:var(--espaco-5);margin-top:var(--espaco-3);font-size:15px;line-height:24px;color:var(--tinta)}
.lista-quadrado li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--ouro)}
.lista-quadrado.cinza li{color:var(--tinta-45)}
.lista-quadrado.cinza li::before{background:var(--tinta-22)}
.lista-quadrado.tinta li::before{background:var(--tinta)}
@media(max-width:760px){.duas{grid-template-columns:1fr;gap:var(--espaco-6)}}

/* ---------- a conta (calculadora) ---------- */
.conta{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--espaco-7);margin-top:var(--espaco-7);align-items:stretch}
.calc{display:grid;gap:var(--espaco-5)}
.calc .campo{display:grid;grid-template-columns:1fr 200px;gap:var(--espaco-4);align-items:end;border-bottom:1px solid var(--tinta-22);padding-bottom:var(--espaco-2)}
.calc .campo.saida{border-bottom:2px solid var(--ouro)}
.calc label,.calc .rotulo{color:var(--tinta-70)}
.calc .campo.saida .rotulo{color:var(--tinta)}
.calc .valor{display:flex;align-items:baseline;gap:6px;justify-content:flex-end;font-family:var(--font-display);font-weight:700;font-size:24px;line-height:28px;color:var(--tinta)}
.calc .valor .rs{font:700 12px/16px var(--font-sans);letter-spacing:.18em;color:var(--tinta-45)}
.calc input{width:100%;text-align:right;border:0;background:transparent;outline:0;font-family:var(--font-display);font-weight:700;font-size:24px;line-height:28px;color:var(--tinta);-moz-appearance:textfield}
.calc input::-webkit-outer-spin-button,.calc input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc input:focus{color:var(--ouro-texto)}
.calc output{font-family:var(--font-display);font-weight:700;font-size:28px;line-height:28px;color:var(--ouro-texto)}
.conta .bloco-destaque{margin-top:0;display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){.conta{grid-template-columns:1fr}.calc .campo{grid-template-columns:1fr 150px}}

/* ---------- ser encontrado / google ---------- */
.busca{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--espaco-7);margin-top:var(--espaco-7);align-items:center}
.mock{background:#ffffff;border:1px solid var(--tinta-22);padding:var(--espaco-5)}
.mock img{width:100%;height:auto}
.perfil{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--espaco-7) var(--espaco-6);margin-top:var(--espaco-7)}
.perfil .item::before{content:"";display:block;width:8px;height:8px;background:var(--ouro);margin-bottom:var(--espaco-4)}
.perfil h3{margin-bottom:var(--espaco-3)}
.perfil p{color:var(--tinta-70);font-size:14px;line-height:22px}
@media(max-width:900px){.busca{grid-template-columns:1fr}.perfil{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.perfil{grid-template-columns:1fr}}

/* ---------- barras ---------- */
.barras{display:grid;gap:var(--espaco-5)}
.barra .rotulo{margin-bottom:var(--espaco-2)}
.barra .trilho{display:flex;align-items:center;gap:var(--espaco-3)}
.barra .b{height:10px;background:var(--ouro);flex:none}
.barra .b.cinza{background:var(--tinta-45)}
.barra .b.tinta{background:var(--tinta)}
.barra .v{font-family:var(--font-display);font-weight:700;font-size:16px;line-height:16px;color:var(--tinta)}
.reputacao{display:grid;grid-template-columns:1fr 1fr;gap:var(--espaco-8);margin-top:var(--espaco-7);align-items:start}
@media(max-width:900px){.reputacao{grid-template-columns:1fr}}

/* ---------- o que entregamos (diagrama) ---------- */
.entrega{display:grid;grid-template-columns:auto auto auto 1fr;gap:var(--espaco-6);align-items:center;margin-top:var(--espaco-7)}
.caixa{border:1px solid var(--tinta);padding:var(--espaco-5) var(--espaco-6);min-width:230px}
.caixa.ouro{background:var(--ouro-claro);border-color:var(--ouro)}
.caixa h3{font-size:32px;line-height:32px;margin-bottom:var(--espaco-1)}
.caixa .micro{color:var(--ouro-texto);margin-bottom:var(--espaco-4)}
.caixa li{font-size:14px;line-height:24px;color:var(--tinta-70)}
.caixa.ouro li{color:var(--tinta)}
.seta{width:40px;height:2px;background:var(--ouro);position:relative}
.seta::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left-color:var(--ouro);border-right:0}
.entrega .texto h3{margin-bottom:var(--espaco-4)}
.entrega .texto p{color:var(--tinta-70);font-size:15px;line-height:24px}
@media(max-width:1000px){.entrega{grid-template-columns:1fr}.seta{width:2px;height:40px}.seta::after{right:-5px;top:auto;bottom:-1px;border:6px solid transparent;border-top-color:var(--ouro);border-bottom:0}}

/* ---------- modelos ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--espaco-2);margin-top:var(--espaco-7)}
.chip{font:700 12px/16px var(--font-sans);letter-spacing:.18em;text-transform:uppercase;padding:10px 16px;border:1px solid var(--tinta-22);color:var(--tinta-70);background:transparent;transition:color .2s,border-color .2s,background .2s}
.chip:hover{color:var(--tinta);border-color:var(--tinta)}
.chip.on{color:var(--papel);background:var(--tinta);border-color:var(--tinta)}
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--espaco-5);margin-top:var(--espaco-6)}
.tpl{display:block;border:1px solid var(--tinta-22);border-top:3px solid var(--ouro);background:var(--papel);transition:border-color .2s}
.tpl:hover{border-color:var(--tinta);border-top-color:var(--ouro)}
.tpl.hide{display:none}
.tpl .shot{background:#ffffff;border-bottom:1px solid var(--tinta-22);padding:var(--espaco-6);height:180px;display:flex;align-items:center;justify-content:center;position:relative}
.tpl .shot img{max-height:100%;width:100%;object-fit:contain}
.tpl .badge{position:absolute;top:0;right:0;font:700 11px/14px var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:#000;background:#cc9908;padding:6px 10px}
.tpl .badge.live{background:#000;color:#fff}
.tpl .meta{padding:var(--espaco-5) var(--espaco-5) var(--espaco-6)}
.tpl h3{margin-bottom:var(--espaco-2)}
.tpl .meta .rotulo{color:var(--ouro-texto);margin-bottom:var(--espaco-3)}
.tpl p{color:var(--tinta-70);font-size:14px;line-height:22px}
.tpl .go{display:inline-block;margin-top:var(--espaco-4);font:700 12px/16px var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tinta);border-bottom:2px solid var(--ouro);padding-bottom:2px}
.tpl-empty{margin-top:var(--espaco-6);padding:var(--espaco-7);border:1px dashed var(--tinta-22);text-align:center;color:var(--tinta-45);display:none}
.tpl-empty.show{display:block}
@media(max-width:1000px){.tpl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tpl-grid{grid-template-columns:1fr}}

/* ---------- aplicativo e sistema (problema / solução) ---------- */
.grupo{margin-top:var(--espaco-8)}
.grupo:first-of-type{margin-top:var(--espaco-7)}
.grupo > .rotulo{margin-bottom:var(--espaco-5)}
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--espaco-7)}
.ps{border-top:2px solid var(--ouro);padding-top:var(--espaco-4)}
.ps h3{font-size:28px;line-height:30px}
.ps .rotulo{color:var(--ouro-texto);margin:var(--espaco-2) 0 var(--espaco-5)}
.ps .mock{margin-bottom:var(--espaco-5);padding:var(--espaco-4)}
.ps .mock img{height:96px;width:auto;max-width:100%}
.ps .k{font:700 11px/14px var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-45);margin-bottom:var(--espaco-2)}
.ps .k.ouro{color:var(--ouro-texto)}
.ps .prob{color:var(--tinta-70);font-size:14px;line-height:22px;margin-bottom:var(--espaco-5)}
.ps .sol{color:var(--tinta);font-size:15px;line-height:24px}
@media(max-width:800px){.ps-grid{grid-template-columns:1fr}}

/* ---------- produto (landing / aplicativo) ---------- */
.produto{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--espaco-8);margin-top:var(--espaco-7);align-items:start}
.produto + .produto{margin-top:var(--espaco-9);padding-top:var(--espaco-8);border-top:1px solid var(--tinta-22)}
.produto .mock{display:flex;justify-content:center;padding:var(--espaco-6)}
.produto .mock img{height:320px;width:auto}
.produto h2{margin-bottom:var(--espaco-6)}
.produto .k{font:700 11px/14px var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-45);margin:var(--espaco-5) 0 var(--espaco-2)}
.produto .k.ouro{color:var(--ouro-texto)}
.produto .prob{color:var(--tinta-70);font-size:15px;line-height:24px}
.produto .sol{color:var(--tinta);font-size:16px;line-height:26px}
.produto .quando{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--espaco-5)}
.produto .quando li{font-size:14px;line-height:22px;color:var(--tinta-70)}
@media(max-width:900px){.produto{grid-template-columns:1fr}.produto .mock img{height:220px}}
@media(max-width:560px){.produto .quando{grid-template-columns:1fr}}

/* ---------- comissão ---------- */
.comissao{display:grid;grid-template-columns:1fr 1fr;gap:var(--espaco-8);margin-top:var(--espaco-7);align-items:start}
.comissao .rotulo{margin-bottom:var(--espaco-5)}
.totais li{display:flex;flex-direction:column;padding:var(--espaco-3) 0;border-bottom:1px solid var(--tinta-22)}
.totais li span{font-size:14px;line-height:22px;color:var(--tinta-70)}
.totais li b{font-family:var(--font-display);font-size:36px;line-height:40px;color:var(--tinta-45)}
.totais li.ouro b{color:var(--ouro-texto)}
.comissao .bloco-destaque{margin-top:var(--espaco-5)}
@media(max-width:900px){.comissao{grid-template-columns:1fr}}

/* ---------- clientes ---------- */
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--espaco-6);margin-top:var(--espaco-7)}
.logo-card{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--espaco-4)}
.logo-card .marca{height:72px;display:flex;align-items:center;justify-content:center;padding-bottom:var(--espaco-4);border-bottom:1px solid var(--tinta-22)}
.logo-card img{max-height:44px;max-width:150px;width:auto;object-fit:contain;filter:grayscale(1) brightness(0);opacity:.85;transition:filter .3s,opacity .3s}
[data-theme="dark"] .logo-card img{filter:grayscale(1) brightness(0) invert(1)}
.logo-card:hover img{filter:none;opacity:1}
[data-theme="dark"] .logo-card:hover img{filter:none}
.logo-card img.raw,[data-theme="dark"] .logo-card img.raw{filter:grayscale(1)}
.logo-card:hover img.raw,[data-theme="dark"] .logo-card:hover img.raw{filter:none}
.logo-card .rotulo{color:var(--ouro-texto)}
@media(max-width:1000px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.logos{grid-template-columns:repeat(2,1fr)}}

/* ---------- IA ---------- */
.ia{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--espaco-7) var(--espaco-6);margin-top:var(--espaco-7)}
.ia-item{border-top:2px solid var(--ouro);padding-top:var(--espaco-4)}
.ia-item h3{font-size:20px;line-height:24px;margin-bottom:var(--espaco-4)}
.ia-item .k{font:700 11px/14px var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-45);margin-bottom:var(--espaco-1)}
.ia-item .k.ouro{color:var(--ouro-texto);margin-top:var(--espaco-4)}
.ia-item .hoje{color:var(--tinta-70);font-size:14px;line-height:22px}
.ia-item .com{color:var(--tinta);font-size:14px;line-height:22px}
@media(max-width:900px){.ia{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ia{grid-template-columns:1fr}}

/* ---------- desafio (faixa escura) ---------- */
.desafio-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--espaco-8);margin-top:var(--espaco-7);align-items:center}
.desafio-grid .lista-quadrado li{color:var(--tinta-70);font-size:14px;line-height:22px}
.desafio-grid .bloco-ouro h3{font-size:28px;line-height:30px;margin-bottom:var(--espaco-5)}
.desafio-grid .bloco-ouro .linha{background:var(--ouro);margin:var(--espaco-5) 0}
.desafio-grid .bloco-ouro .micro{color:var(--ouro-texto)}
@media(max-width:900px){.desafio-grid{grid-template-columns:1fr}}

/* ---------- como funciona ---------- */
.etapas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--espaco-6);margin-top:var(--espaco-7)}
.etapa{border-top:2px solid var(--ouro);padding-top:var(--espaco-4)}
.etapa .rotulo{color:var(--ouro-texto);margin-bottom:var(--espaco-3)}
.etapa h3{margin-bottom:var(--espaco-3)}
.etapa p{color:var(--tinta-70);font-size:14px;line-height:22px}
.promessas{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--espaco-4);margin-top:var(--espaco-5)}
.promessa{border:1px solid var(--tinta-22);padding:var(--espaco-5)}
.promessa h3{font-size:20px;line-height:24px;margin-bottom:var(--espaco-2)}
.promessa p{color:var(--tinta-70);font-size:13px;line-height:20px}
@media(max-width:900px){.etapas{grid-template-columns:1fr}.promessas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.promessas{grid-template-columns:1fr}}

/* ---------- orçamento (faixa escura) ---------- */
.orc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--espaco-8);align-items:center}
.orc-grid .lista-quadrado{margin:var(--espaco-6) 0 var(--espaco-7)}
.orc-grid .lista-quadrado li{font-size:16px}
.orc-grid .ctas{display:flex;flex-wrap:wrap;gap:var(--espaco-4);align-items:center}
.orc-contato{display:grid;grid-template-columns:auto 1fr;gap:var(--espaco-6);align-items:end;margin-top:var(--espaco-8);padding-top:var(--espaco-6);border-top:1px solid var(--tinta-22)}
.orc-contato .qr{width:120px;height:120px;background:#fff;padding:8px}
.orc-contato .qr img{width:100%;height:100%}
.orc-contato .tel{font-family:var(--font-display);font-weight:700;font-size:28px;line-height:32px;color:var(--tinta)}
.orc-contato .site{color:var(--ouro-texto)}
.orc-contato .micro{margin-bottom:var(--espaco-3)}
@media(max-width:900px){.orc-grid{grid-template-columns:1fr}.orc-grid .foto{order:-1}}

/* ---------- FAQ ---------- */
.faq{margin-top:var(--espaco-7);border-top:1px solid var(--tinta-22)}
.qa{border-bottom:1px solid var(--tinta-22)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--espaco-5);align-items:center;padding:var(--espaco-5) 0;
  font-family:var(--font-display);font-weight:700;font-size:22px;line-height:26px;color:var(--tinta)}
.qa summary::-webkit-details-marker{display:none}
.qa .ic{flex:none;width:24px;height:24px;border:1px solid var(--tinta);position:relative}
.qa .ic::before,.qa .ic::after{content:"";position:absolute;background:var(--tinta);left:50%;top:50%;transform:translate(-50%,-50%)}
.qa .ic::before{width:10px;height:2px}.qa .ic::after{width:2px;height:10px}
.qa[open] .ic::after{display:none}
.qa[open] .ic{background:var(--ouro);border-color:var(--ouro)}
.qa[open] .ic::before{background:#000}
.qa .ans{padding:0 0 var(--espaco-5);color:var(--tinta-70);font-size:15px;line-height:24px;max-width:760px}

/* ---------- rodapé ---------- */
footer{border-top:1px solid var(--tinta-22);padding:var(--espaco-8) 0}
footer .f{display:grid;grid-template-columns:1.2fr auto auto;gap:var(--espaco-6) var(--espaco-7);align-items:end}
footer .flogo{height:88px;width:auto;margin-bottom:var(--espaco-5)}
footer .meta{font-size:13px;line-height:22px;color:var(--tinta-70)}
footer .meta .tel{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--tinta)}
footer .cols{display:flex;gap:var(--espaco-7);flex-wrap:wrap}
footer .cols a{display:block;color:var(--tinta-70);font-size:14px;line-height:24px}
footer .cols a:hover{color:var(--tinta)}
footer .cols .rotulo{margin-bottom:var(--espaco-2)}
footer .direita{text-align:right}
footer .direita .micro{color:var(--ouro-texto);margin-top:var(--espaco-2)}
@media(max-width:900px){footer .f{grid-template-columns:1fr;align-items:start}footer .direita{text-align:left}}

/* ---------- WhatsApp fixo (bloco reto, na tinta) ---------- */
.wfab{position:fixed;right:var(--espaco-5);bottom:var(--espaco-5);z-index:80;width:56px;height:56px;background:var(--tinta);color:var(--papel);display:flex;align-items:center;justify-content:center;border-top:3px solid var(--ouro);transition:background .2s}
.wfab:hover{background:var(--ouro)}
.wfab:hover svg{fill:#000}
.wfab svg{width:28px;height:28px;fill:currentColor}
@media(max-width:760px){.wfab{width:48px;height:48px;right:var(--espaco-4);bottom:var(--espaco-4)}.wfab svg{width:24px;height:24px}}

/* ---------- páginas stub dos modelos ---------- */
.stub{padding:var(--espaco-9) 0}
.stub-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--espaco-8);align-items:start}
.stub .back{display:inline-block;margin-bottom:var(--espaco-6);color:var(--tinta-70)}
.stub .back:hover{color:var(--tinta)}
.stub .rotulo.q{margin-bottom:var(--espaco-4)}
.stub h1{font-size:clamp(40px,5vw,64px);margin-bottom:var(--espaco-3)}
.stub .rotulo.ouro{margin-bottom:var(--espaco-6)}
.stub .k{font:700 11px/14px var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-45);margin:var(--espaco-6) 0 var(--espaco-2)}
.stub .k.ouro{color:var(--ouro-texto)}
.stub .prob{color:var(--tinta-70);font-size:15px;line-height:24px}
.stub .sol{color:var(--tinta);font-size:17px;line-height:27px}
.stub .ctas{display:flex;flex-wrap:wrap;gap:var(--espaco-4);align-items:center;margin-top:var(--espaco-7)}
.stub .mock{display:flex;justify-content:center;align-items:center;min-height:320px;padding:var(--espaco-7)}
.stub .mock img{width:100%;max-width:520px;height:auto}
.stub .bloco-destaque{margin-top:var(--espaco-6)}
@media(max-width:900px){.stub-grid{grid-template-columns:1fr}.stub .mock{order:-1;min-height:220px}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  body{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
::selection{background:var(--ouro);color:#000}

/* ---------- mobile: alinhamento ---------- */
@media(max-width:760px){
  .hero h1{font-size:clamp(38px,11vw,48px)}
  .numeral{font-size:48px;line-height:48px}
  .caixa{min-width:0}
}