/* ============================================================
   Sentinela — estilos compartilhados do site
   ============================================================ */
:root{
  --bg:#ffffff; --bg-soft:#f4f9f7; --bg-mint:#eaf5f0;
  --ink:#132a24; --ink-2:#4a5f59; --ink-3:#899992;
  --ink-soft:#5f7069;
  --brand:#0f9d6f; --brand-d:#0b7a56; --brand-dd:#0d2a22;
  --alert:#c8384a; --line:#e4ede9;
  --shadow:0 2px 8px rgba(19,42,36,.05), 0 12px 40px rgba(19,42,36,.07);
  --shadow-sm:0 1px 3px rgba(19,42,36,.06), 0 4px 14px rgba(19,42,36,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Inter",system-ui,sans-serif;color:var(--ink);line-height:1.6;
  background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display{font-family:"Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.02em;line-height:1.15}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* botões */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:15px;font-weight:600;
  padding:14px 26px;border-radius:12px;cursor:pointer;border:none;transition:transform .14s,box-shadow .14s;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 20px rgba(15,157,111,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,157,111,.36)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-d)}
.btn svg{width:18px;height:18px}

/* nav */
nav.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:36px;height:36px}
.brand-txt{font-family:"Bricolage Grotesque";font-weight:700;font-size:20px;letter-spacing:.01em}
.brand-txt span{font-weight:500;font-size:12px;color:var(--ink-3);display:block;line-height:1;margin-top:1px;letter-spacing:.04em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.nav-links a:hover,.nav-links a.on{color:var(--brand-d)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle svg{width:26px;height:26px;color:var(--ink)}
@media(max-width:860px){
  .nav-links{position:fixed;top:70px;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:8px 0;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);transform:translateY(-140%);transition:transform .25s;z-index:40}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:14px 24px}
  .nav-links a.btn{margin:10px 24px;justify-content:center}
  .nav-toggle{display:block}
}

/* seções */
section{padding:88px 0}
.sec-tag{color:var(--brand-d);font-weight:600;font-size:14px;margin-bottom:12px}
.sec-title{font-size:36px;font-weight:700;color:var(--ink);max-width:640px}
.sec-lead{font-size:18px;color:var(--ink-soft);max-width:640px;margin-top:16px}
@media(max-width:820px){.sec-title{font-size:28px}section{padding:60px 0}}

/* página interna: cabeçalho */
.page-head{background:radial-gradient(900px 400px at 80% -20%, var(--bg-mint), transparent 70%),
  linear-gradient(180deg,#fff,var(--bg-soft));padding:64px 0 52px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:44px;font-weight:800;color:var(--ink);max-width:760px}
.page-head p{font-size:19px;color:var(--ink-soft);max-width:620px;margin-top:16px}
.crumb{font-size:13.5px;color:var(--ink-3);margin-bottom:18px}
.crumb a:hover{color:var(--brand-d)}
@media(max-width:820px){.page-head h1{font-size:32px}}

/* prosa (artigos, páginas legais) */
.prosa{font-size:17px;color:var(--ink-2);line-height:1.75}
.prosa h2{font-size:26px;color:var(--ink);margin:38px 0 14px}
.prosa h3{font-size:20px;color:var(--ink);margin:28px 0 10px}
.prosa p{margin-bottom:18px}
.prosa ul,.prosa ol{margin:0 0 18px 22px}
.prosa li{margin-bottom:8px}
.prosa strong{color:var(--ink);font-weight:600}
.prosa a{color:var(--brand-d);font-weight:500;text-decoration:underline}
.prosa blockquote{border-left:3px solid var(--brand);background:var(--bg-soft);
  padding:16px 22px;border-radius:0 10px 10px 0;margin:22px 0;color:var(--ink-2)}

/* rodapé */
footer.site{border-top:1px solid var(--line);padding:56px 0 32px;background:var(--bg-soft)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.foot-brand img{width:34px;height:34px}
.foot-brand-txt{font-family:"Bricolage Grotesque";font-weight:700;font-size:19px}
.foot-desc{font-size:14px;color:var(--ink-soft);max-width:280px}
.foot-col h4{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:14px;text-transform:none}
.foot-col a{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:10px}
.foot-col a:hover{color:var(--brand-d)}
.foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;
  justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-bottom p{font-size:13px;color:var(--ink-3)}
.foot-bottom .foot-legal{display:flex;gap:20px;flex-wrap:wrap}
.foot-bottom .foot-legal a{font-size:13px;color:var(--ink-3)}
.foot-bottom .foot-legal a:hover{color:var(--brand-d)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* whatsapp flutuante */
.wa{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;
  background:var(--brand);box-shadow:0 8px 24px rgba(15,157,111,.4);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:30px;height:30px;fill:#fff}

/* voltar ao topo */
.totop{position:fixed;right:22px;bottom:90px;z-index:55;width:46px;height:46px;border-radius:12px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.totop.show{opacity:1;pointer-events:auto}
.totop svg{width:20px;height:20px;color:var(--ink-2)}

/* banner de cookies */
.cookie{position:fixed;left:22px;right:22px;bottom:22px;z-index:70;max-width:520px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:20px 22px;display:none}
.cookie.show{display:block}
.cookie p{font-size:13.5px;color:var(--ink-2);margin-bottom:14px}
.cookie p a{color:var(--brand-d);text-decoration:underline}
.cookie-btns{display:flex;gap:10px}
.cookie-btns button{font-family:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:9px;cursor:pointer;border:none}
.cookie-ok{background:var(--brand);color:#fff}
.cookie-no{background:var(--bg-soft);color:var(--ink-2);border:1px solid var(--line)}

/* ============================================================
   Animações — reveal on scroll + micro-interações (moderado)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* reveal: elementos sobem e aparecem ao entrar na tela */
  [data-anim]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  [data-anim].in{opacity:1;transform:none}
  [data-anim="fade"]{transform:none}
  [data-anim="left"]{transform:translateX(-30px)}
  [data-anim="right"]{transform:translateX(30px)}
  [data-anim="zoom"]{transform:scale(.94)}
  [data-anim].in{transform:none}
  /* atraso escalonado para grupos */
  [data-delay="1"]{transition-delay:.08s}
  [data-delay="2"]{transition-delay:.16s}
  [data-delay="3"]{transition-delay:.24s}
  [data-delay="4"]{transition-delay:.32s}
}

/* micro-interações */
.stat-num, .kpi .kn { font-variant-numeric: tabular-nums; }
.passo, .val-card, .conf, .post, .vcard, .prob-card, .jan, .mira-card{transition:transform .18s ease, box-shadow .18s ease}
.passo:hover, .vcard:hover, .jan:hover{transform:translateY(-4px)}

/* radar pulsante no hero da home */
.radar-pulse{position:absolute;border-radius:50%;border:1.5px solid rgba(15,157,111,.35);
  animation:radarwave 3.2s ease-out infinite}
@keyframes radarwave{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.6);opacity:0}}

/* botão primário com brilho sutil ao passar o mouse */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg)}
.btn-primary:hover::after{animation:shine .7s ease}
@keyframes shine{to{left:130%}}

/* números que sobem (contador) — estado inicial neutro, JS anima */
[data-count]{display:inline-block}