/* ==========================================================================
   Novadata — folha única do site
   Tokens e regras herdados do protótipo aprovado (teal técnico, pós-revisão).
   Trocar a paleta é editar o :root abaixo; nunca o markup.
   ========================================================================== */

:root{
  --bg:#FFFFFF;
  --surface:#F1F7F6;
  --surface-2:#E6F1F0;
  --brand:#0E4F52;
  --brand-2:#0A3B3E;
  --accent:#14B8A6;
  --accent-ink:#0B7C74;      /* única versão do accent segura para TEXTO em fundo claro */
  --accent-on-deep:#3FD8C6;  /* gêmeo do accent-ink para TEXTO em fundo escuro */
  --text:#0F1F1E;
  --muted:#546564;
  --muted-on-deep:#A6C6C4;
  --border:#DCE8E7;          /* separadores decorativos */
  --border-strong:#6E9390;   /* bordas de elementos interativos (>=3:1) */
  --border-on-deep:#1C6467;
  --radius:14px;
  --maxw:1140px;
  --nav-h:74px;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}

/* foco visível em qualquer fundo: anel duplo claro+escuro */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:6px;
  box-shadow:0 0 0 5px rgba(255,255,255,.85);
}
.on-deep :where(a,button,summary):focus-visible{box-shadow:0 0 0 5px rgba(4,48,44,.9)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--brand);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 8px 0;font-weight:700;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- tipografia ---------- */
h1,h2,h3{font-weight:800;letter-spacing:-.03em;margin:0}
h1{font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.06}
h2{font-size:clamp(1.9rem,3.5vw,2.7rem);line-height:1.14}
h3{font-size:1.1rem;line-height:1.35;letter-spacing:-.015em}
p{margin:0}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--muted);max-width:56ch}
.eyebrow{
  font-size:.71rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-ink);display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.1rem;
}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--accent)}
.on-deep .eyebrow{color:var(--accent-on-deep)}

section{padding:clamp(64px,8vw,110px) 0;scroll-margin-top:calc(var(--nav-h) + 8px)}
.alt{background:var(--surface)}
.section-head{max-width:62ch;margin-bottom:clamp(36px,5vw,56px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head.center .lead{margin-left:auto;margin-right:auto}
.section-head p{margin-top:1rem}
.hl{color:var(--accent-ink)}
.on-deep .hl{color:var(--accent-on-deep)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-size:.95rem;font-weight:700;min-height:48px;
  padding:.85rem 1.6rem;border-radius:10px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-lg{font-size:1.02rem;padding:1.05rem 2rem;min-height:56px}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2);box-shadow:0 12px 28px -14px rgba(14,79,82,.8)}
.btn-accent{background:var(--accent);color:#04302C;border-color:var(--accent)}
.btn-accent:hover{background:#2ACCBA;border-color:#2ACCBA}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--brand);background:var(--surface)}
.on-deep .btn-ghost{color:#fff;border-color:var(--muted-on-deep)}
.on-deep .btn-ghost:hover{border-color:var(--accent);background:rgba(255,255,255,.06)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;gap:2rem;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto;padding:.4rem 0}
.brand-mark{width:26px;height:26px;flex:0 0 auto}
.brand-name{font-size:1.22rem;font-weight:800;letter-spacing:-.045em;color:var(--brand)}
.brand-name b{color:var(--accent-ink);font-weight:800}
.nav-links{display:flex;gap:1.9rem;margin-left:auto;font-size:.92rem;font-weight:600}
.nav-links a{text-decoration:none;color:var(--muted);transition:color .15s;padding:.35rem 0}
.nav-links a:hover{color:var(--brand)}
.nav .btn{padding:.6rem 1.15rem;font-size:.88rem;min-height:44px}

/* menu mobile — <details>, sem JavaScript */
.menu{display:none;margin-left:auto;position:relative}
.menu summary{
  list-style:none;cursor:pointer;width:44px;height:44px;flex:0 0 auto;
  padding:0;min-height:0;border-radius:10px;border:1px solid var(--border-strong);
  display:grid;gap:5px;place-content:center;justify-items:center;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:none}
.menu summary i{
  display:block;position:relative;width:18px;height:2px;
  background:var(--brand);border-radius:2px;
  transition:transform .18s ease,opacity .18s ease;
}
.menu[open] summary{background:var(--surface)}
/* 7px = altura da barra (2px) + gap (5px) */
.menu[open] summary i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu[open] summary i:nth-child(2){opacity:0}
.menu[open] summary i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 12px);min-width:220px;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 24px 48px -24px rgba(14,79,82,.55);padding:.5rem;z-index:60;
}
.menu-panel a{display:block;padding:.75rem .9rem;text-decoration:none;font-weight:600;font-size:.98rem;border-radius:8px}
.menu-panel a:hover{background:var(--surface)}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(820px 420px at 80% 0%, rgba(20,184,166,.16), transparent 62%),
    linear-gradient(180deg,#F1F7F6,#FFFFFF 78%);
  /* padding-bottom zerado: quem fecha a seção é o painel, cortado pelo
     overflow:hidden abaixo. */
  padding:clamp(84px,11vw,140px) 0 0;
  text-align:center;position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(14,79,82,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(14,79,82,.055) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%);
  mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%);
}
.hero .wrap{position:relative}
.hero h1{max-width:19ch;margin:0 auto}
.hero h1 em{font-style:normal;color:var(--brand);background:linear-gradient(180deg,transparent 66%,rgba(20,184,166,.34) 0);padding:0 .08em}
.hero .lead{margin:1.5rem auto 0;max-width:56ch}
.hero .btn-row{justify-content:center;margin-top:2.4rem}
.hero-note{margin-top:1.5rem;font-size:.88rem;color:var(--muted)}
.badge{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.4rem;
  background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:.4rem .95rem;font-size:.8rem;font-weight:600;color:var(--muted);
}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-ink)}

/* ---------- painel ilustrativo do hero ----------
   Os números aqui são EXEMPLO, não resultado de cliente — daí o rótulo
   "exemplo" no cabeçalho do painel. A regra do .ph continua valendo para a
   faixa de números, o case e os depoimentos, que fazem afirmação de fato.
   Tudo em HTML+CSS+SVG e cor por token: se a paleta mudar no :root, o painel
   acompanha. Um PNG mataria essa promessa. Zero JS, nenhuma requisição extra. */
.dash{
  background:#fff;border:1px solid var(--border);border-radius:14px;text-align:left;
  box-shadow:0 26px 60px -22px rgba(10,59,62,.30), 0 2px 8px rgba(10,59,62,.06);
  overflow:hidden;
}
.dash-bar{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;
  background:var(--surface);border-bottom:1px solid var(--border);
}
.dash-dots{display:flex;gap:5px}
.dash-dots i{display:block;width:8px;height:8px;border-radius:50%;background:var(--border-strong);opacity:.45}
.dash-tag{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.dash-body{display:grid;grid-template-columns:54px 1fr}
.dash-side{
  display:flex;flex-direction:column;gap:.5rem;padding:.95rem .65rem;
  background:var(--surface);border-right:1px solid var(--border);
}
.dash-side i{display:block;height:7px;border-radius:4px;background:var(--border-strong);opacity:.3}
.dash-side i.on{background:var(--accent-ink);opacity:1}
.dash-main{padding:1rem;display:grid;gap:.85rem}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.dash-kpi{border:1px solid var(--border);border-radius:10px;padding:.6rem .7rem;display:grid;gap:.2rem}
.dash-k{display:block;font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.dash-kpi b{font-size:1.05rem;font-weight:800;letter-spacing:-.025em;color:var(--text)}
.dash-delta{font-size:.66rem;font-weight:700;color:var(--accent-ink)}
.dash-delta.down{color:var(--muted)}
.dash-card{border:1px solid var(--border);border-radius:10px;padding:.7rem .8rem}
.dash-card .dash-k{margin-bottom:.55rem}
/* altura fixa de propósito: com preserveAspectRatio="none" e height:auto o SVG
   herdaria a razão do viewBox (300×84) e cada gráfico passaria de 250px de alto,
   deixando o painel com quase 800px. O viewBox estica para caber. */
.dash-svg{display:block;width:100%;height:76px}
.dash-area{fill:var(--accent);opacity:.15}
.dash-stroke{fill:none;stroke:var(--accent-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dash-rule{stroke:var(--border);stroke-width:1}
.dash-col{fill:var(--brand);opacity:.8}
.dash-col.lite{fill:var(--accent);opacity:.7}

/* O painel fica abaixo do texto e é cortado pela borda inferior da seção — o
   corte sugere que há mais painel do que cabe. Depende do overflow:hidden que a
   .hero já declara, e do padding-bottom zerado logo acima.
   Os -76px são a profundidade do corte; é número escolhido a olho, não derivado. */
.dash-wrap{max-width:940px;margin:clamp(38px,5vw,60px) auto -76px}

/* ---------- números ---------- */
.stats{background:var(--brand);padding:clamp(44px,5vw,60px) 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:.5rem 1.2rem;text-align:center;border-right:1px solid var(--border-on-deep)}
.stat:last-child{border-right:0}
.stat-num{display:block;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:800;color:#fff;line-height:1;letter-spacing:-.035em}
.stat-label{display:block;margin-top:.5rem;font-size:.85rem;color:var(--muted-on-deep);line-height:1.4}
.stats-note{display:block;text-align:center;margin-top:1.8rem;font-size:.8rem;color:var(--muted-on-deep)}

/* ---------- grids ---------- */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.7rem;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 14px 32px -20px rgba(14,79,82,.5)}
.card h3{margin-bottom:.55rem}
.card p{color:var(--muted);font-size:.95rem}

/* dores */
.pain{background:var(--surface);border-color:transparent}
.pain h3{color:var(--brand);display:flex;gap:.55rem;align-items:baseline}
.pain h3::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);flex:0 0 auto;transform:translateY(-1px)}

/* serviços */
.svc{display:flex;flex-direction:column;gap:1rem;padding:2rem}
.svc-icon{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--brand)}
.svc-icon svg{width:22px;height:22px}
.svc ul{margin:.2rem 0 0;padding-left:1.05rem;color:var(--muted);font-size:.92rem}
.svc li{margin-bottom:.3rem}
.svc li::marker{color:var(--accent-ink)}

/* passos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{padding:2rem 1.7rem;background:var(--surface);border-radius:var(--radius);border:1px solid transparent}
.step-n{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--brand);color:#fff;font-size:.95rem;font-weight:800;margin-bottom:1rem;
}
.step h3{margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.95rem}

/* barra de conversão intermediária */
.cta-bar{
  margin-top:clamp(40px,5vw,60px);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,34px);
}
.cta-bar b{display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.02em}
.cta-bar span{display:block;color:var(--muted);font-size:.94rem;margin-top:.2rem}

/* case */
.case{background:var(--brand);color:#fff}
.case .lead{color:var(--muted-on-deep)}
.case h2{color:#fff}
.case-box{
  display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:start;
  border:1px solid var(--border-on-deep);border-radius:var(--radius);
  background:rgba(255,255,255,.05);padding:clamp(24px,3.4vw,40px);
}
.case-text p{color:#C9E0DE;font-size:.98rem;margin-bottom:1rem}
.case-text strong{color:var(--accent-on-deep);font-weight:700}
.case-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:.4rem;color:var(--accent-on-deep);text-decoration:none;font-weight:700;font-size:.95rem;min-height:44px}
.case-link:hover{text-decoration:underline}
.case-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric{border:1px solid var(--border-on-deep);border-radius:11px;padding:1.15rem 1rem;text-align:center;background:rgba(0,0,0,.14)}
.metric b{display:block;font-size:1.65rem;color:var(--accent-on-deep);font-weight:800;line-height:1;letter-spacing:-.03em}
.metric span{display:block;margin-top:.4rem;font-size:.78rem;color:var(--muted-on-deep);line-height:1.35}

/* diferenciais */
.why{
  background:var(--surface);border-radius:var(--radius);
  border-left:3px solid var(--accent);padding:1.5rem 1.6rem;
}
.why h3{margin-bottom:.4rem;color:var(--brand)}
.why p{color:var(--muted);font-size:.95rem}
.origem{margin-top:clamp(34px,4.4vw,52px);background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:clamp(20px,2.6vw,30px);max-width:76ch}
.origem h3{display:block;font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.75rem}
.origem p{color:var(--muted);font-size:1rem;line-height:1.65}
.origem b{color:var(--text);font-weight:700}

/* depoimentos */
.quote p{font-size:1rem;line-height:1.6;color:var(--text)}
.quote footer{display:flex;align-items:center;gap:.75rem;margin-top:1.3rem}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--surface-2);color:var(--brand);display:grid;place-items:center;font-size:.8rem;font-weight:800;flex:0 0 auto}
.quote cite{display:block;font-style:normal;font-size:.89rem;font-weight:700}
.quote small{display:block;color:var(--muted);font-size:.81rem}
.slot{
  border:1px dashed var(--accent);background:rgba(20,184,166,.06);
  display:flex;flex-direction:column;justify-content:center;min-height:190px;
}
.slot p{color:var(--muted);font-size:.95rem}

/* faq */
.faq{max-width:800px;margin:0 auto}
/* escopado em .faq: o menu mobile também é <details> e não pode herdar nada daqui */
.faq details{border-bottom:1px solid var(--border)}
.faq details summary{
  cursor:pointer;list-style:none;font-weight:700;font-size:1.01rem;
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.15rem 0;min-height:44px;
}
.faq details summary::-webkit-details-marker{display:none}
.faq details summary::after{content:"+";font-size:1.5rem;color:var(--accent-ink);font-weight:400;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--brand)}
.faq details > p{margin:0 0 1.15rem;color:var(--muted);font-size:.96rem;max-width:70ch}

/* cta final */
.cta{
  background:
    radial-gradient(700px 340px at 50% -10%, rgba(20,184,166,.30), transparent 64%),
    var(--brand);
  color:#fff;text-align:center;
}
.cta h2{max-width:20ch;margin:0 auto}
.cta h2 em{font-style:normal;color:var(--accent-on-deep)}
.cta .lead{color:var(--muted-on-deep);margin:1.2rem auto 0}
.cta .btn-row{justify-content:center;margin-top:2rem}
.cta-direct{
  margin-top:2rem;display:flex;justify-content:center;gap:.6rem 2rem;flex-wrap:wrap;
  font-size:.95rem;color:var(--muted-on-deep);
}
.cta-direct a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid var(--accent-on-deep);padding-bottom:2px;overflow-wrap:anywhere}
.cta-direct a:hover{color:var(--accent-on-deep)}

/* footer */
.footer{background:#0A3B3E;color:#fff;padding:clamp(48px,6vw,72px) 0 0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:2.6rem}
.footer .brand-name{color:#fff}
/* o "data" do wordmark no rodapé: fundo escuro exige accent-on-deep, não accent-ink.
   Era style="color:#3FD8C6" inline nas 5 páginas — saiu para a CSP não precisar de
   style-src 'unsafe-inline', que esvaziaria metade da proteção. */
.footer .brand-name b{color:var(--accent-on-deep)}
.footer p{color:#9BBCBA;font-size:.9rem;margin-top:1rem;max-width:34ch}
.footer h4{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-on-deep);margin:0 0 1rem;font-weight:800}
.footer ul{list-style:none;margin:0;padding:0}
/* o e-mail é mais largo que a coluna no mobile: sem isto o grid não encolhe e a página estoura */
.footer-grid > div{min-width:0}
.footer li a{display:inline-block;color:#9BBCBA;text-decoration:none;font-size:.9rem;padding:.65rem 0;overflow-wrap:anywhere}
.footer li a:hover{color:#fff}
.footer-bottom{border-top:1px solid #15565A;padding:1.4rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;color:#9BBCBA;font-size:.84rem}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px;color:#9BBCBA}
.footer-bottom a:hover{color:#fff}

/* marcador de placeholder */
.ph{
  display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(11,124,116,.12);color:var(--accent-ink);
  border:1px dashed var(--accent-ink);border-radius:4px;padding:.12rem .45rem;
  vertical-align:middle;margin-left:.5rem;
}
.on-deep .ph{color:var(--accent-on-deep);background:rgba(63,216,198,.14);border-color:var(--accent-on-deep)}

/* ==========================================================================
   Páginas internas — contato, obrigado, política, 404
   ========================================================================== */

/* cabeçalho curto das páginas internas (não tem hero) */
.page-head{
  background:linear-gradient(180deg,var(--surface),#FFFFFF 92%);
  padding:clamp(52px,7vw,84px) 0 clamp(36px,4vw,52px);
  border-bottom:1px solid var(--border);
}
.page-head h1{font-size:clamp(2rem,4.2vw,3.1rem);max-width:20ch}
.page-head .lead{margin-top:1.2rem}
.page-note{margin-top:1.2rem;font-size:.88rem;color:var(--muted)}

/* contato: os três caminhos, em ordem de temperatura */
.vias{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:stretch}
.via{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:1rem;
}
.via-primary{background:var(--surface);border-color:var(--border-strong)}
.via h2{font-size:clamp(1.35rem,2.2vw,1.7rem)}
.via p{color:var(--muted);font-size:.96rem}
.via .btn{align-self:flex-start;margin-top:auto}
.via-list{list-style:none;margin:0;padding:0;color:var(--muted);font-size:.93rem}
.via-list li{display:flex;gap:.55rem;align-items:baseline;margin-bottom:.4rem}
.via-list li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--accent);flex:0 0 auto;transform:translateY(-1px)}

/* formulário */
.form-box{
  max-width:720px;border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(24px,3.2vw,38px);background:var(--bg);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:1.6rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field-full{grid-column:1 / -1}
.field label{font-size:.88rem;font-weight:700;color:var(--text)}
.field .opt{font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--text);background:var(--bg);
  border:1px solid var(--border-strong);border-radius:10px;
  padding:.75rem .9rem;min-height:48px;width:100%;
  transition:border-color .15s ease;
}
.field textarea{min-height:120px;resize:vertical;line-height:1.55}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--brand)}
.field-hint{font-size:.82rem;color:var(--muted)}
.form-box .btn{margin-top:1.6rem}
.form-legal{margin-top:1rem;font-size:.84rem;color:var(--muted);max-width:60ch}
.form-legal a{color:var(--accent-ink);font-weight:600}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* texto corrido — política de privacidade */
.prose{max-width:72ch}
.prose h2{font-size:clamp(1.3rem,2.2vw,1.6rem);margin:2.4rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--muted);font-size:1rem;margin-bottom:.9rem}
.prose ul{padding-left:1.15rem}
.prose li::marker{color:var(--accent-ink)}
.prose a{color:var(--accent-ink);font-weight:600}
.prose strong{color:var(--text)}

/* páginas de retorno curto — obrigado, 404 */
.centered{text-align:center;max-width:60ch;margin:0 auto}
.centered .lead{margin:1.4rem auto 0}
.centered .btn-row{justify-content:center;margin-top:2.2rem}
.check{
  width:60px;height:60px;border-radius:50%;background:var(--surface-2);
  display:grid;place-items:center;margin:0 auto 1.6rem;color:var(--accent-ink);
}
.check svg{width:28px;height:28px}

/* botão flutuante de WhatsApp — presente em todas as páginas */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:70;
  width:56px;height:56px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;text-decoration:none;
  box-shadow:0 12px 28px -10px rgba(10,59,62,.75);
  transition:background .15s ease,transform .15s ease;
}
.wa-float:hover{background:var(--accent);color:#04302C;transform:translateY(-2px)}
.wa-float svg{width:28px;height:28px}

@media (max-width:860px){
  body{font-size:16px}
  .nav-links{display:none}
  .menu{display:block}
  .nav > .wrap > .btn{display:none}
  .g3,.g2,.steps,.case-box,.footer-grid,.vias,.form-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr;gap:1.6rem 0}
  .stat:nth-child(2){border-right:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero .btn-row .btn{width:100%}
  /* painel reduzido: some a nav lateral e o segundo gráfico. Encolher o painel
     inteiro deixaria tudo ilegível — melhor mostrar menos, em tamanho legível. */
  .dash-body{grid-template-columns:1fr}
  .dash-side{display:none}
  .dash-main{padding:.8rem;gap:.7rem}
  .dash-kpis{grid-template-columns:1fr 1fr}
  .dash-kpi:last-child{display:none}
  .dash-card + .dash-card{display:none}
  .dash-svg{height:64px}
  /* corte mais raso no mobile: o painel só tem ~280px de altura aqui, e -76px
     comeriam o gráfico que sobrou. */
  .dash-wrap{margin-bottom:-32px;margin-top:24px}
  /* 84px de vazio acima do badge é caro num hero que já tem 1024px de altura no
     mobile — e cada pixel economizado aproxima o painel da dobra. */
  .hero{padding-top:clamp(44px,9vw,72px)}
  .cta-bar{flex-direction:column;align-items:flex-start}
  .wa-float{width:52px;height:52px;right:16px;bottom:16px}
  .wa-float svg{width:26px;height:26px}
}