/* ═══════════════ tokens ═══════════════ */
:root{
  --ink:#0E120C; --mut:#5C6355; --bg:#F4F5F1; --paper:#FFFFFF;
  --line:rgba(14,18,12,.10); --line2:rgba(14,18,12,.16);

  --d-bg:#0A0C09; --d-p1:#12160F; --d-p2:#1A1F16;
  --d-ink:#F2F5EE; --d-mut:#959D89; --d-line:rgba(255,255,255,.08); --d-line2:rgba(255,255,255,.14);

  --brand:#2E6606;
  --acc:#9BE83C;
  --acc-ink:#0E120C;
  --acc-deep:#3A7A06;

  /* Substituta da RM Neue (CoType) enquanto não há licença web.
     Mesma linhagem grotesca compacta. Para trocar depois, basta
     apontar --fd e --fb para 'RM Neue' e adicionar o @font-face.   */
  --fd:'Archivo',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --fb:'Archivo',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --rc:22px; --rp:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.65 var(--fb);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--acc-deep);outline-offset:3px;border-radius:6px}

/* ═══════════════ tipografia ═══════════════ */
/* Tracking recalibrado para grotesca: a Archivo é mais estreita que a
   Outfit, então aperta menos no display e nada no corpo.              */
.display{font-family:var(--fd);font-weight:600;font-size:clamp(46px,8.4vw,112px);line-height:.94;letter-spacing:-.034em;margin:0 0 24px}
h2{font-family:var(--fd);font-weight:600;font-size:clamp(32px,4.6vw,58px);line-height:1.04;letter-spacing:-.026em;margin:0 0 18px}
h3{font-family:var(--fd);font-weight:600;font-size:21px;line-height:1.28;letter-spacing:-.012em;margin:0 0 8px}
h4{font-family:var(--fd);font-weight:600;font-size:17px;letter-spacing:-.008em;margin:0 0 6px}
p{margin:0 0 16px;color:var(--mut)}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--mut);max-width:56ch}
.lab{font:500 12px/1 var(--fm);letter-spacing:.05em;color:var(--mut);text-transform:lowercase;display:inline-flex;align-items:center;gap:8px;margin:0 0 20px}
.lab::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc-deep)}
.center{text-align:center}
.center .lead,.center .display{margin-left:auto;margin-right:auto}
.center .lab{justify-content:center}

/* ═══════════════ layout ═══════════════ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
section{padding:clamp(72px,9vw,132px) 0;position:relative}
.dark{background:var(--d-bg);color:var(--d-ink)}
.dark p,.dark .lead{color:var(--d-mut)}
.dark .lab{color:var(--d-mut)}
.dark .lab::before{background:var(--acc)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(226px,1fr))}

/* ═══════════════ superfícies ═══════════════ */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--rc);padding:28px;transition:transform .35s var(--ease),border-color .3s}
.card:hover{transform:translateY(-3px);border-color:var(--line2)}
.dark .card{background:var(--d-p1);border-color:var(--d-line)}
.dark .card:hover{border-color:var(--d-line2)}
.ico{width:38px;height:38px;border-radius:12px;background:rgba(46,102,6,.10);color:var(--brand);
  display:grid;place-items:center;margin-bottom:18px}
.dark .ico{background:rgba(155,232,60,.12);color:var(--acc)}
.ico svg{width:19px;height:19px;stroke-width:1.6;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════ pílulas e botões ═══════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 26px;
  border-radius:var(--rp);font:500 15px/1 var(--fb);letter-spacing:-.01em;cursor:pointer;border:1px solid transparent;
  background:var(--ink);color:#fff;transition:transform .12s var(--ease),background .25s,opacity .25s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.acc{background:var(--acc);color:var(--acc-ink)}
.btn.ghost{background:transparent;color:inherit;border-color:var(--line2)}
.dark .btn{background:var(--acc);color:var(--acc-ink)}
.dark .btn.ghost{background:transparent;color:var(--d-ink);border-color:var(--d-line2)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.center .btns{justify-content:center}
.chip{display:inline-flex;align-items:center;gap:7px;border-radius:var(--rp);border:1px solid var(--line);
  background:var(--paper);padding:9px 16px;font:500 13px/1 var(--fb);color:var(--mut)}
.dark .chip{background:var(--d-p1);border-color:var(--d-line);color:var(--d-mut)}
.tag{display:inline-flex;align-items:center;gap:8px;border-radius:var(--rp);background:rgba(155,232,60,.14);
  color:var(--acc-deep);padding:8px 16px;font:500 12px/1 var(--fm);letter-spacing:.04em;margin-bottom:26px}
.dark .tag{color:var(--acc)}
.tag i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ═══════════════ aura ═══════════════ */
.aura{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0}
.aura.a1{width:620px;height:620px;background:rgba(78,158,11,.30);top:-14%;left:-8%}
.aura.a2{width:520px;height:520px;background:rgba(155,232,60,.14);bottom:-18%;right:-6%}
.aura.a3{width:460px;height:460px;background:rgba(255,214,102,.10);top:34%;right:22%}
/* aura do LED — ancora o azul do hardware como luz derramada, não como
   segundo acento. Só aparece atrás do equipamento.                      */
.aura.led{width:540px;height:540px;background:rgba(75,107,255,.20);top:8%;right:4%}
section>.wrap{position:relative;z-index:1}

/* ═══════════════ header pílula ═══════════════ */
.hdr{position:sticky;top:0;z-index:200;padding:16px 0;transition:padding .3s var(--ease)}
.hdr.stuck{padding:10px 0}
.pill{max-width:1040px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 20px;
  border-radius:var(--rp);background:rgba(255,255,255,.72);border:1px solid var(--line);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}
.logo{display:flex;align-items:center;color:var(--brand);flex:none}
.logo svg{height:26px;width:auto;display:block}
.nav{display:flex;gap:4px;margin:0 auto}
.nav>a,.nav>.mw>a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--rp);
  font:500 14.5px/1 var(--fb);letter-spacing:-.01em;color:var(--mut);transition:background .22s,color .22s}
.nav a:hover{background:rgba(14,18,12,.05);color:var(--ink)}
.nav a[data-on]{background:var(--ink);color:#fff}
.mw{position:relative}
.dd{position:absolute;top:calc(100% + 10px);left:0;min-width:290px;background:var(--paper);border:1px solid var(--line);
  border-radius:20px;padding:8px;opacity:0;visibility:hidden;transform:scale(.94) translateY(-6px);transform-origin:top left;
  transition:opacity .22s var(--ease),transform .28s var(--ease),visibility .28s;
  box-shadow:0 22px 60px -18px rgba(14,18,12,.22)}
.mw:hover .dd,.mw:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:block;padding:12px 14px;border-radius:14px;transition:background .2s}
.dd a:hover{background:var(--bg)}
.dd b{display:block;font-family:var(--fd);font-weight:500;font-size:15px;letter-spacing:-.01em}
.dd span{display:block;font-size:13px;color:var(--mut);margin-top:1px}
.pill .btn{min-height:44px;padding:0 20px;font-size:14px}
.burger{display:none;min-height:44px;padding:0 15px;border-radius:var(--rp);background:transparent;border:1px solid var(--line);cursor:pointer}
.pill.open{border-radius:26px;flex-wrap:wrap}
.pill.open .nav{display:flex;flex-direction:column;align-items:stretch;order:9;width:100%;margin:6px 0 4px;gap:2px}
.pill.open .nav a{justify-content:flex-start}
.pill.open .dd{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;padding:0 0 0 10px;min-width:0;background:transparent}

/* ═══════════════ métricas ═══════════════ */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.metric{padding:30px 26px;border-radius:var(--rc);background:var(--d-p1);border:1px solid var(--d-line)}
.metric .n{font-family:var(--fd);font-weight:300;font-size:clamp(52px,6.6vw,84px);line-height:.9;letter-spacing:-.05em;
  color:var(--d-ink);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.metric .n u{font-family:var(--fb);font-weight:400;font-size:15px;letter-spacing:0;color:var(--d-mut);text-decoration:none}
.metric .n.hl{color:var(--acc)}
.metric small{display:block;margin-top:14px;font:400 13.5px/1.45 var(--fb);color:var(--d-mut)}

/* ═══════════════ gauge radial ═══════════════ */
.gauge{display:flex;align-items:center;gap:22px;padding:30px 26px;border-radius:var(--rc);background:var(--d-p2);border:1px solid var(--d-line)}
.gauge svg{width:96px;height:96px;flex:none;transform:rotate(-90deg)}
.gauge .trk{fill:none;stroke:rgba(255,255,255,.09);stroke-width:8}
.gauge .val{fill:none;stroke:var(--acc);stroke-width:8;stroke-linecap:round;
  stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset 1.6s var(--ease)}
.is-in .gauge .val{stroke-dashoffset:var(--off,26)}
.gauge .rd{font-family:var(--fd);font-weight:300;font-size:44px;letter-spacing:-.04em;line-height:1;color:var(--d-ink);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px}
.gauge .rd u{font-family:var(--fb);font-weight:400;font-size:15px;letter-spacing:0;color:var(--d-mut);text-decoration:none}
.gauge span.cap{display:block;font-size:13.5px;line-height:1.45;color:var(--d-mut);margin-top:10px;max-width:24ch}

/* ═══════════════ leitor palmspay — montagem sobre a área NFC ═══════════════
   Geometria do "Leitor NFC montado" (Claude Design): 341×778, tampa da
   bobina eliminada, topo em peça única com o leitor centralizado.
   Trocar --glow para var(--acc) unifica o brilho com o acento do site.   */
:root{
  --led-wait:#4B6BFF;  /* aguardando a mão   */
  --led-ok:#9BE83C;    /* aprovado           */
  --led-no:#FF4B4B;    /* negado             */
  --glow-3:rgba(75,107,255,.20);
}
.stage{position:relative;display:grid;place-items:center;padding:44px 0 70px}
.wave{position:relative;width:min(268px,66vw);aspect-ratio:341/778;
  animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.wave-body{position:absolute;inset:0;border-radius:34px/31px;
  background:linear-gradient(180deg,#34383B 0%,#282C2F 5%,#1D2124 44%,#212528 90%,#15181A 100%);
  box-shadow:0 74px 128px -48px rgba(0,0,0,.82),
             inset 0 1px 0 rgba(255,255,255,.18),
             inset 0 -2px 3px rgba(0,0,0,.55)}
.wave-body::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.15) 0,rgba(255,255,255,0) 7%,
    rgba(255,255,255,0) 92%,rgba(255,255,255,.10) 100%)}
.wave-body::after{content:"";position:absolute;left:2%;right:2%;top:31.5%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}

.wave-reader{position:absolute;left:50%;top:6.6%;transform:translateX(-50%);
  width:37%;aspect-ratio:1;border-radius:31%;
  background:radial-gradient(circle at 50% 42%,#151D3A 0%,#0B1022 60%,#05070F 100%);
  animation:led 6.4s var(--ease) infinite, breathe 1.6s ease-in-out infinite}
/* Ciclo medido no vídeo do equipamento: o azul é repouso e domina
   (blocos de 8s, 17s), o verde é evento curto (0,5s a 4,9s, média
   2,1s). Proporção aqui: 56% azul, 26% verde — mantém a hierarquia
   real sem esconder o payoff numa vitrine em loop.
   Vermelho não entra na home: erro não se anuncia.                 */
@keyframes led{
  0%,52%{box-shadow:0 0 0 5px #4B6BFF,0 0 22px 5px rgba(75,107,255,.80),
    0 0 54px 14px rgba(75,107,255,.42),0 0 96px 26px rgba(75,107,255,.20),
    inset 0 0 20px rgba(75,107,255,.42)}
  /* apagão de ~0,5s entre os estados — o anel some antes de trocar de
     cor. Está no vídeo (79,5s→80,3s) e é o que torna a mudança
     legível: sem ele vira crossfade, e crossfade não é semáforo. */
  57%,60%{box-shadow:0 0 0 5px rgba(75,107,255,.10),0 0 0 0 transparent,
    0 0 0 0 transparent,0 0 0 0 transparent,inset 0 0 20px rgba(0,0,0,.5)}
  64%,90%{box-shadow:0 0 0 5px #9BE83C,0 0 22px 5px rgba(155,232,60,.85),
    0 0 54px 14px rgba(155,232,60,.45),0 0 96px 26px rgba(155,232,60,.22),
    inset 0 0 20px rgba(155,232,60,.45)}
  95%{box-shadow:0 0 0 5px rgba(155,232,60,.10),0 0 0 0 transparent,
    0 0 0 0 transparent,0 0 0 0 transparent,inset 0 0 20px rgba(0,0,0,.5)}
  100%{box-shadow:0 0 0 5px #4B6BFF,0 0 22px 5px rgba(75,107,255,.80),
    0 0 54px 14px rgba(75,107,255,.42),0 0 96px 26px rgba(75,107,255,.20),
    inset 0 0 20px rgba(75,107,255,.42)}}
/* No vídeo o azul oscila ~20% de brilho num período de ~0,4s (2,5 Hz).
   Aqui roda a 0,6 Hz: 2,5 Hz é pisca-pisca, encosta no limite de
   fotossensibilidade da WCAG 2.3.1 e cansa numa área grande e
   luminosa. Mesma leitura de "vivo", sem o risco.                  */
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(.84)}}
.aura.led{animation:ledaura 6.4s var(--ease) infinite}
@keyframes ledaura{
  0%,56%{background:rgba(75,107,255,.20)}
  64%,90%{background:rgba(155,232,60,.17)}
  100%{background:rgba(75,107,255,.20)}}
.wave-reader::after{content:"";position:absolute;left:50%;top:50%;width:7%;aspect-ratio:1;
  border-radius:50%;transform:translate(-50%,-50%);background:#E4EAFF;
  box-shadow:0 0 9px rgba(228,234,255,.95)}

.wave-scr{position:absolute;left:6.4%;right:6.4%;top:33.6%;bottom:10.6%;border-radius:13px;
  background:linear-gradient(180deg,#1A1C1E,#0F1113);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 2px 12px rgba(0,0,0,.75);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7%;padding:13% 9%}
.wave-chin{position:absolute;left:5%;right:5%;bottom:2.6%;height:1.5%;border-radius:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02))}
.wave-floor{position:absolute;left:6%;right:6%;bottom:-5%;height:8%;border-radius:50%;
  background:radial-gradient(ellipse,var(--glow-3),transparent 72%);filter:blur(16px)}

/* Os rótulos da tela acompanham o mesmo ciclo do LED. Ambos ficam
   sempre no fluxo — só a opacidade muda — para a tela não pular.   */
.scr-l{font:500 9px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:#94A6DE;
  animation:ph-wait 6.4s var(--ease) infinite}
@keyframes ph-wait{0%,52%{opacity:.95}60%,96%{opacity:0}100%{opacity:.95}}
.scr-chip{font:500 8.5px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc-ink);background:var(--acc);border-radius:var(--rp);padding:4px 9px;
  opacity:0;animation:ph-ok 6.4s var(--ease) infinite}
@keyframes ph-ok{0%,58%{opacity:0;transform:scale(.88)}66%,90%{opacity:1;transform:none}
  96%,100%{opacity:0;transform:scale(.88)}}
.scr-foot{position:absolute;left:9%;right:9%;bottom:7%;display:flex;justify-content:space-between;
  font:400 8px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:#5E665A}
.scr-foot i{font-style:normal}

/* ── estados do leitor (peça explicativa, não vitrine) ─────────── */
.leds{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.ledcard{background:var(--d-p1);border:1px solid var(--d-line);border-radius:var(--rc);
  padding:34px 26px 26px;text-align:center}
.ring{width:76px;height:76px;margin:0 auto 26px;border-radius:31%;
  background:radial-gradient(circle at 50% 42%,#151D3A 0%,#0B1022 60%,#05070F 100%);position:relative}
.ring::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);background:#E4EAFF}
.ring.wait{box-shadow:0 0 0 4px #4B6BFF,0 0 18px 4px rgba(75,107,255,.7),0 0 44px 12px rgba(75,107,255,.28)}
.ring.ok{box-shadow:0 0 0 4px #9BE83C,0 0 18px 4px rgba(155,232,60,.75),0 0 44px 12px rgba(155,232,60,.3)}
.ring.no{box-shadow:0 0 0 4px #FF4B4B,0 0 18px 4px rgba(255,75,75,.75),0 0 44px 12px rgba(255,75,75,.3)}
.ledcard h4{color:var(--d-ink)}

.wave-scr .mark{width:56%;height:auto;color:var(--acc)}
/* A mão se revela durante a varredura e permanece pelo verde. */
.wave-scr .mark path{opacity:0;transform-box:fill-box;transform-origin:50% 70%;
  animation:idin 6.4s var(--ease) infinite}
.wave-scr .mark .f4{animation-delay:0s}
.wave-scr .mark .f3{animation-delay:.11s}
.wave-scr .mark .f2{animation-delay:.22s}
.wave-scr .mark .f1{animation-delay:.33s}
@keyframes idin{
  0%,46%{opacity:0;transform:translateY(7px) scale(.96)}
  58%,90%{opacity:1;transform:none}
  97%,100%{opacity:0;transform:translateY(7px) scale(.96)}}
/* A varredura só corre na janela entre o repouso e a aprovação. */
.sweep{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(155,232,60,.20),transparent);
  height:34%;opacity:0;animation:sweep 6.4s var(--ease) infinite;pointer-events:none}
@keyframes sweep{
  0%,46%{transform:translateY(-120%);opacity:0}
  50%{opacity:1}
  62%{transform:translateY(320%);opacity:1}
  64%,100%{transform:translateY(320%);opacity:0}}
.hud{position:absolute;border-radius:var(--rp);background:rgba(18,22,15,.78);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:12px 18px;font:500 13px/1 var(--fb);color:#F2F5EE;
  display:flex;align-items:center;gap:10px;white-space:nowrap}
.hud em{font-style:normal;font-family:var(--fm);color:var(--acc);font-size:12px}
.hud.h1{top:16%;left:0}
.hud.h2{bottom:22%;right:0}
@media(max-width:760px){.hud.h1{left:-8px}.hud.h2{right:-8px}}

/* ═══════════════ marquee ═══════════════ */
.mq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq ul{display:flex;gap:10px;list-style:none;padding:0;margin:0;width:max-content;animation:mq 34s linear infinite}
.mq:hover ul{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* ═══════════════ passos ═══════════════ */
.step .n{font-family:var(--fd);font-weight:300;font-size:64px;line-height:1;letter-spacing:-.05em;color:var(--acc-deep);margin-bottom:16px}
.dark .step .n{color:var(--acc)}

/* ═══════════════ depoimento ═══════════════ */
.quote{font-family:var(--fd);font-weight:300;font-size:clamp(26px,3.4vw,44px);line-height:1.16;letter-spacing:-.03em;
  color:var(--ink);max-width:20ch;margin:0 0 34px}
.dark .quote{color:var(--d-ink)}
.qm{font-family:var(--fd);font-size:96px;line-height:.6;color:var(--acc-deep);display:block;margin-bottom:14px}
.dark .qm{color:var(--acc)}
.zone{border-radius:28px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;
  gap:10px;text-align:center;padding:26px}
.dark .zone{border-color:var(--d-line);background:var(--d-p1)}
.zl{font:400 11px/1.5 var(--fm);color:var(--mut);max-width:36ch}
.dark .zl{color:var(--d-mut)}
.av{width:52px;height:52px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;
  font-family:var(--fd);font-weight:500;font-size:17px;flex:none}

/* ═══════════════ preço ═══════════════ */
.plan{position:relative;display:flex;flex-direction:column}
.plan .price{font-family:var(--fd);font-weight:300;font-size:56px;letter-spacing:-.05em;line-height:1;margin:22px 0 4px;font-variant-numeric:tabular-nums}
.plan .price sup{font-size:20px;font-weight:400;vertical-align:22px;margin-right:4px;letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:22px 0 26px;flex:1}
.plan li{position:relative;padding:8px 0 8px 26px;font-size:15px;color:var(--mut);border-top:1px solid var(--line)}
.plan li:first-child{border:0}
.plan li::before{content:"";position:absolute;left:2px;top:15px;width:10px;height:6px;border:2px solid var(--acc-deep);
  border-top:0;border-right:0;transform:rotate(-45deg)}
.plan.hi{background:var(--d-p1);border-color:var(--d-p1);color:var(--d-ink)}
.plan.hi li{color:var(--d-mut);border-color:var(--d-line)}
.plan.hi li::before{border-color:var(--acc)}
.plan.hi .btn{background:var(--acc);color:var(--acc-ink)}
.ribbon{position:absolute;top:22px;right:22px;font:500 11px/1 var(--fm);letter-spacing:.06em;background:var(--acc);
  color:var(--acc-ink);padding:7px 12px;border-radius:var(--rp)}

/* ═══════════════ acordeão ═══════════════ */
.acc{border-top:1px solid var(--line)}
.dark .acc,.dark .acc details{border-color:var(--d-line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;gap:26px;
  font-family:var(--fd);font-weight:500;font-size:19px;letter-spacing:-.015em;transition:color .2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--acc-deep)}
.dark .acc summary:hover{color:var(--acc)}
.acc summary i{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);position:relative;transition:transform .35s var(--ease),background .25s}
.dark .acc summary i{border-color:var(--d-line2)}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;inset:50% 9px auto;height:1.5px;background:currentColor;transform:translateY(-50%)}
.acc summary i::after{transform:translateY(-50%) rotate(90deg);transition:transform .35s var(--ease)}
.acc details[open] summary i{transform:rotate(180deg)}
.acc details[open] summary i::after{transform:translateY(-50%) rotate(0)}
.acc .body{padding:0 0 26px;max-width:68ch}
.acc .body p{margin:0}

/* ═══════════════ formulário ═══════════════ */
.form{max-width:660px;margin:0 auto}
.frow{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-bottom:14px}
.field label{display:block;font:500 13px/1 var(--fb);margin-bottom:9px}
.field label i{color:var(--acc-deep);font-style:normal}
.field input,.field textarea{width:100%;padding:15px 18px;border:1px solid var(--line);border-radius:16px;
  font:400 16px/1.4 var(--fb);background:var(--paper);color:var(--ink);transition:border-color .22s,box-shadow .22s}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--acc-deep);box-shadow:0 0 0 4px rgba(78,158,11,.14)}
.field textarea{min-height:150px;resize:vertical}

/* ═══════════════ faixa CTA ═══════════════ */
.band{border-radius:36px;background:var(--d-bg);color:var(--d-ink);padding:clamp(44px,6vw,84px) clamp(28px,5vw,72px);
  position:relative;overflow:hidden}
.band h2{color:var(--d-ink)}
.band p{color:var(--d-mut)}
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:38px 0}
.logos div{height:62px;border-radius:16px;border:1px solid var(--d-line);background:var(--d-p1);display:grid;place-items:center;
  font:400 12px/1 var(--fm);color:var(--d-mut)}

/* ═══════════════ jurídico ═══════════════ */
.legal{display:grid;grid-template-columns:236px minmax(0,1fr);gap:64px}
.toc{position:sticky;top:150px;align-self:start}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:t}
.toc li{counter-increment:t;font-size:13.5px;line-height:1.4;color:var(--mut);padding:7px 0;border-bottom:1px solid var(--line)}
.toc li::before{content:counter(t,decimal-leading-zero) " ";font-family:var(--fm);font-size:11px;color:var(--acc-deep);margin-right:8px}
.lbody h3{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.lbody h3:first-child{margin-top:0;border:0;padding:0}
.skel{height:104px;border-radius:16px;background:linear-gradient(100deg,rgba(14,18,12,.045) 30%,rgba(14,18,12,.085) 50%,rgba(14,18,12,.045) 70%);
  background-size:220% 100%;animation:shim 2.6s linear infinite;margin-bottom:14px;display:grid;place-items:center;
  font:400 11px/1 var(--fm);color:var(--mut)}
@keyframes shim{to{background-position:-220% 0}}

/* ═══════════════ rodapé ═══════════════ */
footer{background:var(--d-bg);color:var(--d-ink);padding:96px 0 32px}
.fg{display:grid;gap:40px;grid-template-columns:1.6fr repeat(4,1fr)}
.fg h5{font:500 12px/1 var(--fm);letter-spacing:.05em;color:var(--d-mut);margin:0 0 18px;text-transform:lowercase}
.fg a{display:block;font-size:14.5px;color:var(--d-mut);padding:6px 0;transition:color .2s}
.fg a:hover{color:var(--acc)}
.fbot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--d-line);
  margin-top:64px;padding-top:26px;font-size:13px;color:var(--d-mut)}


/* ═══════════════ scroll reveal ═══════════════ */
.js .rv{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .5s var(--ease),transform .62s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}

/* ═══════════════ responsivo ═══════════════ */
@media(max-width:1024px){.fg{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:900px){
  .nav{display:none}.burger{display:inline-flex;align-items:center;margin-left:auto}
  .legal{grid-template-columns:1fr}.toc{position:static}
}
@media(max-width:620px){
  .frow{grid-template-columns:1fr}.fg{grid-template-columns:1fr 1fr}
  .wrap{padding:0 20px}.card{padding:24px}
  .btns .btn{width:100%}
  /* Lettering completo em qualquer largura. Para caber, o CTA sai da
     pílula e vira o primeiro item do menu aberto — dois elementos na
     barra em vez de três. A 375px: logo 108 + burger 48 = 156px de
     315 disponíveis, com folga real em vez de encaixe no limite.   */
  .pill{padding-left:14px}
  .hdr .logo svg{height:22px}
  .pill>.btn{display:none}
  .pill.open>.btn{display:flex;order:10;width:100%;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
  /* Sem o ciclo, o leitor congela no estado aprovado — que é a
     mensagem da página. Sem isto o anel ficaria sem brilho nenhum. */
  .wave-reader{box-shadow:0 0 0 5px #9BE83C,0 0 22px 5px rgba(155,232,60,.85),
    0 0 54px 14px rgba(155,232,60,.45),0 0 96px 26px rgba(155,232,60,.22),
    inset 0 0 20px rgba(155,232,60,.45)}
  .aura.led{background:rgba(155,232,60,.17)}
  .scr-l{opacity:0}
  .scr-chip{opacity:1;transform:none}
  .wave-scr .mark path{opacity:1}
}
@media(prefers-reduced-transparency:reduce){
  .pill{background:var(--paper);backdrop-filter:none}
  .hud{background:#12160F;backdrop-filter:none}
}

/* ═══════════════ atalho de teclado ═══════════════
   Primeiro elemento tabulável da página: leva direto ao conteúdo,
   pulando o menu. Invisível até receber foco.                     */
.pular{position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--ink);color:#fff;padding:14px 22px;border-radius:0 0 var(--rp) 0;
  font:500 15px/1 var(--fb)}
.pular:focus{left:0}