/* nanoguará.ia: estilos de produção.
   Fonte da verdade visual: docs/mockup-aprovado-fase4.html (aprovado pelo dono do
   projeto). Este arquivo é o <style> do mockup portado para produção, com as
   correções obrigatórias da Task 6 (fontes self-hosted, contraste AA, shimmer
   com estado padrão sólido, CSP sem unsafe-inline, foco visível). */

/* ---------- Fontes self-hosted (evita CLS no H1 com fallback métrico) ---------- */
@font-face { font-family:"Outfit"; src:url("/fonts/outfit-700.woff2") format("woff2");
  font-weight:700; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("/fonts/outfit-600.woff2") format("woff2");
  font-weight:600; font-display:swap; }
@font-face { font-family:"Geist"; src:url("/fonts/geist-400.woff2") format("woff2");
  font-weight:400; font-display:swap; }
@font-face { font-family:"Geist"; src:url("/fonts/geist-500.woff2") format("woff2");
  font-weight:500; font-display:swap; }
@font-face { font-family:"Outfit-fallback"; src:local("Arial");
  size-adjust:100.3%; ascent-override:100%; descent-override:26%; line-gap-override:0%; }

:root{
  --bg:#F7F9F5; --surface:#FFFFFF; --surface-deep:#123B26;
  --text:#17231B; --text-muted:#55655B;
  --verde:#2E7D32; --verde-escuro:#1B4D2E;
  --guarana:#D5382F; --guarana-hover:#B72C24; --creme:#FDF9F0;
  --borda:#E2E8E0; --chat-in:#FFFFFF; --chat-out:#DFF3D8;
  --stat-num:#B72C24;
  --raio-card:16px; --raio-input:10px;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0E1A13; --surface:#16241B; --surface-deep:#0A140E;
  --text:#EDF3EE; --text-muted:#9DB0A3;
  --verde:#6FBF73; --verde-escuro:#A5D6A7;
  --guarana:#EF5A4C; --guarana-hover:#D5382F; --creme:#1E2C22;
  --borda:#25352B; --chat-in:#1C2B21; --chat-out:#1F3A28;
  --stat-num:#FF8A7A;
}}
:root[data-theme="dark"]{
  --bg:#0E1A13; --surface:#16241B; --surface-deep:#0A140E;
  --text:#EDF3EE; --text-muted:#9DB0A3;
  --verde:#6FBF73; --verde-escuro:#A5D6A7;
  --guarana:#EF5A4C; --guarana-hover:#D5382F; --creme:#1E2C22;
  --borda:#25352B; --chat-in:#1C2B21; --chat-out:#1F3A28;
  --stat-num:#FF8A7A;
}
:root[data-theme="light"]{
  --bg:#F7F9F5; --surface:#FFFFFF; --surface-deep:#123B26;
  --text:#17231B; --text-muted:#55655B;
  --verde:#2E7D32; --verde-escuro:#1B4D2E;
  --guarana:#D5382F; --guarana-hover:#B72C24; --creme:#FDF9F0;
  --borda:#E2E8E0; --chat-in:#FFFFFF; --chat-out:#DFF3D8;
  --stat-num:#B72C24;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Geist","Seaford",-apple-system,"Segoe UI",system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:"Outfit","Outfit-fallback",ui-rounded,"SF Pro Rounded","Avenir Next",-apple-system,system-ui,sans-serif;
  letter-spacing:-0.02em;line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
a{color:var(--verde);text-decoration:none}

/* ---------- Navbar ---------- */
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--borda)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Outfit","Outfit-fallback",ui-rounded,system-ui;font-weight:700;font-size:1.15rem;color:var(--text)}
.brand em{font-style:normal;color:var(--verde)}
.nav-links{display:flex;gap:28px;font-size:.95rem}
.nav-links a{color:var(--text-muted);font-weight:500}
.nav-links a:hover{color:var(--verde)}
@media(max-width:820px){.nav-links{display:none}}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:600;
  padding:14px 26px;font-size:1rem;cursor:pointer;border:none;transition:transform .15s ease, background .2s ease;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primario{background:var(--guarana);color:#fff}
.btn-primario:hover{background:var(--guarana-hover)}
.btn-secundario{background:transparent;color:var(--verde);border:1.5px solid var(--verde)}
.btn-secundario:hover{background:color-mix(in srgb,var(--verde) 10%,transparent)}
.btn-sm{padding:10px 20px;font-size:.9rem}

/* ---------- Herói ---------- */
.hero{min-height:calc(100dvh - 68px);display:grid;grid-template-columns:1.1fr .9fr;gap:56px;
  align-items:center;padding:56px 0 72px;position:relative}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--verde);margin-bottom:18px}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:700;color:var(--text)}
.hero .sub{font-size:1.15rem;color:var(--text-muted);max-width:34rem;margin:20px 0 30px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.circuito{position:absolute;right:-40px;top:8%;opacity:.10;pointer-events:none}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto}.circuito{display:none}}

header{position:relative;overflow:hidden}
/* ---------- Fundo do heroi: topografia luminosa ---------- */
/* Curvas de nivel geradas em SVG pelo app.js. Rareiam na area de leitura,
   derivam em tres profundidades e sao acesas por uma faixa de luz que varre.
   Substitui o antigo fundo Etheral Shadow. */
:root{ --topo-acento:var(--verde); --topo-linha:var(--text); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --topo-acento:#6FBF73; --topo-linha:#EDF3EE; }
}
:root[data-theme="dark"]{ --topo-acento:#6FBF73; --topo-linha:#EDF3EE; }
:root[data-theme="light"]{ --topo-acento:var(--verde); --topo-linha:var(--text); }

.topo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.topo svg{width:100%;height:100%;display:block}
.topo .topo-camada{transform-box:fill-box}
.topo .topo-dim path,.topo .topo-bri path{fill:none;vector-effect:non-scaling-stroke}
.topo .topo-dim path{stroke:color-mix(in oklab,var(--topo-linha) 22%,transparent)}
.topo .topo-bri path{stroke:var(--topo-acento)}
.topo .topo-bri{filter:drop-shadow(0 0 3px color-mix(in oklab,var(--topo-acento) 60%,transparent))}

.topo.anima .topo-camada{animation:topoDeriva var(--dur,18s) ease-in-out infinite alternate;will-change:transform}
.topo.anima .topo-varre{animation:topoVarre 16s ease-in-out infinite alternate;will-change:transform}
@keyframes topoDeriva{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx,0px),var(--dy,0px),0)}}
@keyframes topoVarre{from{transform:translateX(-330px)}to{transform:translateX(330px)}}

@media (max-width:767px){
  .topo .topo-camada[data-i="2"]{display:none}
  .topo .topo-bri{opacity:.82}
}
@media (prefers-reduced-motion: reduce){
  .topo .topo-camada,.topo .topo-varre{animation:none !important}
}
@media (forced-colors: active){
  .topo .topo-bri{display:none}
  .topo svg{forced-color-adjust:none}
  .topo .topo-dim path{stroke:CanvasText !important;stroke-opacity:.5 !important}
}

.svg-defs{position:absolute;width:0;height:0}
.hero{position:relative;z-index:1}

/* ---------- Chat WhatsApp mockup ---------- */
.fone{background:var(--surface);border:1px solid var(--borda);border-radius:26px;
  box-shadow:0 24px 60px color-mix(in srgb,var(--verde-escuro) 14%,transparent);overflow:hidden;max-width:400px;margin-inline:auto;width:100%}
.fone-topo{background:var(--surface-deep);color:#EDF3EE;padding:14px 18px;display:flex;align-items:center;gap:12px}
.fone-topo .avatar{width:38px;height:38px;flex:none}
.fone-topo b{display:block;font-size:.95rem}
.fone-topo span{font-size:.78rem;opacity:.75}
.chat{padding:18px;display:flex;flex-direction:column;gap:10px;min-height:320px;background:
  color-mix(in srgb,var(--creme) 60%,var(--bg))}
.stamp{align-self:center;font-size:.72rem;color:var(--text-muted);background:var(--surface);
  border:1px solid var(--borda);border-radius:999px;padding:3px 12px}
.msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:.92rem;line-height:1.45;
  opacity:0;transform:translateY(10px)}
.msg.show{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
.msg.in{align-self:flex-start;background:var(--chat-in);border:1px solid var(--borda);border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--chat-out);border-bottom-right-radius:4px}
.msg time{display:block;font-size:.68rem;color:var(--text-muted);margin-top:4px;text-align:right}
@media (prefers-reduced-motion: reduce){.msg{opacity:1;transform:none;transition:none}}

/* ---------- Pra quem é ---------- */
.faixa{border-block:1px solid var(--borda);padding:40px 0}
.faixa h2{font-size:1.15rem;font-weight:600;color:var(--text-muted);text-align:center;margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chip{border:1.5px solid var(--borda);background:var(--surface);border-radius:999px;
  padding:10px 22px;font-weight:500;font-size:.95rem}

/* ---------- Dores ---------- */
.sec-titulo{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;color:var(--text);max-width:34rem}
.sec-head{margin-bottom:44px}
/* Lista antes→depois: hairlines e espaço negativo, sem caixas */
.dores{display:grid;gap:0;margin-bottom:40px}
.dor{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;
  padding:26px 4px;border-top:1px solid var(--borda)}
.dor:last-child{border-bottom:1px solid var(--borda)}
.dor .antes{color:var(--text-muted);font-size:1rem;margin:0}
.dor .antes b{color:var(--text);font-weight:600}
.dor .seta{color:var(--verde);flex:none;opacity:.8}
.dor .depois{font-weight:600;color:var(--verde-escuro);font-size:1.02rem;margin:0}
@media(max-width:820px){
  .dor{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .dor .seta{transform:rotate(90deg);justify-self:start}
}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.stat{background:var(--creme);border-radius:var(--raio-card);padding:26px 28px}
.stat b{font-family:"Outfit","Outfit-fallback",ui-rounded,system-ui;font-size:2rem;color:var(--stat-num);display:block;line-height:1.1}
.stat p{font-size:.95rem;color:var(--text-muted);margin-top:6px}
.stat cite{font-style:normal;font-size:.78rem;color:var(--text-muted);display:block;margin-top:8px}
@media(max-width:900px){.dores,.stats{grid-template-columns:1fr}}

/* ---------- Deep-dive assistente (seção escura) ---------- */
.deep{background:var(--surface-deep);color:#EDF3EE;border-radius:28px;padding:64px 56px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.deep h2{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem)}
.deep ul{list-style:none;padding:0;margin:24px 0 30px;display:grid;gap:14px}
.deep li{padding-left:26px;position:relative;color:#CBDCCF}
.deep li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--guarana)}
.demo{background:var(--surface);color:var(--text);border-radius:var(--raio-card);overflow:hidden;border:1px solid var(--borda)}
.demo-log{height:250px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.demo-form{display:flex;border-top:1px solid var(--borda)}
.demo-form input{flex:1;border:none;background:transparent;padding:14px 16px;font:inherit;color:var(--text);outline:none}
.demo-form button{border:none;background:var(--guarana);color:#fff;font-weight:600;padding:0 22px;cursor:pointer}
.demo .msg{opacity:1;transform:none}
@media(max-width:900px){.deep{grid-template-columns:1fr;padding:40px 24px}}

/* ---------- Serviços ---------- */
.servicos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.serv{background:var(--surface);border:1px solid var(--borda);border-radius:var(--raio-card);padding:28px;display:flex;flex-direction:column;gap:10px}
.serv h3{font-size:1.15rem}
.serv p{color:var(--text-muted);font-size:.95rem;flex:1}
.serv a{font-weight:600;font-size:.92rem}
.serv.destaque{grid-column:span 3;background:linear-gradient(120deg,var(--creme),var(--surface));
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px}
@media(max-width:900px){.servicos{grid-template-columns:1fr}.serv.destaque{grid-template-columns:1fr;grid-column:span 1}}

/* ---------- Como funciona ---------- */
/* Trilha horizontal: lê como processo, não como três itens iguais */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative;padding-top:48px}
.passos::before{content:"";position:absolute;left:0;right:0;top:13px;height:2px;
  background:linear-gradient(90deg,transparent,var(--verde) 10%,var(--verde) 90%,transparent);opacity:.45}
.passo{position:relative;background:none;border:none;border-radius:0;padding:0}
.passo .marco{position:absolute;top:-48px;left:0;width:28px;height:28px;border-radius:50%;
  background:var(--bg);border:2px solid var(--verde);color:var(--verde);
  display:grid;place-items:center;font-family:"Outfit","Outfit-fallback",ui-rounded,system-ui;font-weight:700;font-size:.9rem}
.passo h3{font-size:1.2rem;margin-bottom:8px}
.passo p{color:var(--text-muted);font-size:.95rem;max-width:34ch}
@media(max-width:900px){
  .passos{grid-template-columns:1fr;gap:28px;padding-top:0;padding-left:46px}
  .passos::before{left:13px;right:auto;top:0;bottom:0;width:2px;height:auto;
    background:linear-gradient(180deg,transparent,var(--verde) 10%,var(--verde) 90%,transparent)}
  .passo .marco{top:0;left:-46px}
}

/* Ícones dos cards de serviço */
.serv-ico{color:var(--verde);flex:none;margin-bottom:2px}

/* ---------- Formulário ---------- */
.fim{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.fim h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.fim .tag{font-size:1.25rem;color:var(--text-muted);margin-top:16px;font-weight:500}
.fim .tag b{color:var(--verde-escuro)}
.cta-mt{margin-top:28px}
form{background:var(--surface);border:1px solid var(--borda);border-radius:var(--raio-card);padding:32px;display:grid;gap:18px}
label{font-weight:600;font-size:.92rem;display:grid;gap:6px}
input:not(.demo-form input),select,textarea{border:1.5px solid var(--borda);border-radius:var(--raio-input);
  padding:12px 14px;font:inherit;background:var(--bg);color:var(--text);width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible,.demo-form input:focus-visible{outline:2px solid var(--verde);outline-offset:1px}
.consent{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;font-weight:400;font-size:.85rem;color:var(--text-muted)}
.consent input{width:auto;margin-top:3px}
.consent label{font-weight:400;font-size:inherit;display:inline}
.aviso-dados{font-size:.82rem;color:var(--text-muted)}
@media(max-width:900px){.fim{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
footer{background:var(--surface-deep);color:#CBDCCF;padding:56px 0 40px;margin-top:88px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px}
footer a{color:#CBDCCF}
footer a:hover{color:#fff}
footer .legal{border-top:1px solid #24513A;padding-top:20px;font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px;font-size:.92rem}
.footer-brand{color:#fff}
footer .footer-accent{color:#6FBF73}
.footer-desc{margin-top:12px;max-width:34ch;font-size:.92rem}
.footer-heading{color:#fff}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* =========================================================================
   Correções obrigatórias da Task 6 (Step 3), da auditoria da Fase 6
   ========================================================================= */

/* Gradient Shimmer no headline: estado padrão é texto sólido (AAA e legível
   em todos os estados); o gradiente só entra com a classe .anima, aplicada
   pelo app.js só quando a varredura de fato vai animar. */
.hero h1.shimmer{ color:var(--text); }
.hero h1.shimmer.anima{
  --gs-base:color-mix(in oklab,var(--text) 85%,var(--bg));   /* AAA no herói */
  background-color:var(--gs-base);
  background-image:linear-gradient(105deg,
    var(--gs-base) calc(50% - 150px),
    color-mix(in oklab,var(--gs-base) 42%, #35C95E) calc(50% - 105px),
    #35C95E calc(50% - 55px), #FFFFFF calc(50% - 8px), #FF9A62 calc(50% + 30px),
    #EF5A4C calc(50% + 55px),
    color-mix(in oklab,var(--gs-base) 42%, #EF5A4C) calc(50% + 105px),
    var(--gs-base) calc(50% + 150px));
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){ .hero h1.shimmer.anima{ background:none;
  -webkit-text-fill-color:currentColor; color:var(--text); } }

/* Contraste do CTA no tema escuro (WCAG AA) */
:root{ --guarana-btn:#D5382F; --guarana-btn-hover:#B72C24; --ok:#2E7D32; --erro:#B3261E; }
@media (prefers-color-scheme: dark){ :root{ --guarana-btn:#D5382F; --guarana-btn-hover:#B72C24;
  --ok:#6FBF73; --erro:#F2B8B5; } }
:root[data-theme="dark"]{ --guarana-btn:#D5382F; --guarana-btn-hover:#B72C24;
  --ok:#6FBF73; --erro:#F2B8B5; }
.btn-primario{ background:var(--guarana-btn); }
.btn-primario:hover{ background:var(--guarana-btn-hover); }
.demo-form button{ background:var(--guarana-btn); }

/* Efeitos degradados por capacidade, não só por largura */
@media (max-width:767px), (hover:none), (prefers-reduced-motion: reduce){
  .hero h1.shimmer.anima{ background:none; -webkit-text-fill-color:currentColor; color:var(--text); }
}

/* Foco visível em tudo que é interativo */
.btn:focus-visible, a:focus-visible, .chip:focus-visible, .demo-log:focus-visible{
  outline:2px solid var(--verde); outline-offset:2px; }
/* Anel claro só onde o fundo é escuro de verdade. Duas correções: .btn-primario
   saiu do grupo, porque 4 dos 5 ficam sobre fundo claro, onde #EDF3EE some
   (contraste perto de 1:1) — dentro de .deep ele segue coberto pelo seletor de
   descendente; e o card .demo é branco mesmo dentro de .deep, então o foco lá
   volta ao verde (o #demoLog é parada obrigatória do Tab). */
.deep :focus-visible, footer :focus-visible{ outline-color:#EDF3EE; }
.deep .demo :focus-visible{ outline-color:var(--verde); }

/* Aviso que substitui o formulário quando o JS não roda (ver noscript.css). */
.sem-js{ display:none; }

/* Mensagens do formulário: sucesso e erro distintos e anunciáveis */
.form-msg{ border-radius:var(--raio-input); padding:14px; font-size:.95rem; }
.form-msg[hidden]{ display:none; }
.form-msg.sucesso{ background:color-mix(in srgb,var(--ok) 12%,var(--surface)); border:1px solid var(--ok); }
.form-msg.erro{ background:color-mix(in srgb,var(--erro) 12%,var(--surface)); border:1px solid var(--erro); }

::placeholder{ color:var(--text-muted); opacity:1; }
.cf-turnstile{ min-height:65px; }
.msg time{ font-size:.75rem; }

/* ---------- Páginas de documento (privacidade, 404) ---------- */
.wrap.doc{ max-width:760px; }
.doc-updated{ font-size:1rem; color:var(--text-muted); margin-top:16px; }
.doc-body{ display:grid; gap:28px; font-size:1rem; color:var(--text); }
.doc-body h2{ font-size:1.3rem; margin-bottom:10px; }
.doc-404{ min-height:60vh; display:grid; place-items:center; text-align:center; }