/* ============================================================
   VIBE CELL — Folha de estilo
   1. Tokens e temas · 2. Reset · 3. Utilitários
   4. Header/Marca/Pílula · 5. Hero · 6. Seções
   7. Distribuidores/Mapa · 8. FAQ · 9. Rodapé
   10. Modal · 11. Responsivo
   ------------------------------------------------------------
   TEMA: definido pela visão escolhida na pílula.
   [data-tema="claro"]  = Lojista  (padrão, fundo branco)
   [data-tema="escuro"] = Técnico  (fundo preto da logo)
   O degradê da marca é o mesmo nos dois:
   #59A6E7 → #5B80D9 → #6F4AC4 → #8330A8 (horizontal)
   ============================================================ */

/* ================= 1. TOKENS ================= */
:root {
  /* Rampa da marca — igual nos dois temas, medida na logo */
  --c-ciano:  #59a6e7;
  --c-azul:   #5b80d9;
  --c-roxo:   #6f4ac4;
  --c-violeta:#8330a8;

  --grad: linear-gradient(90deg,#59a6e7 0%,#5b80d9 45%,#6f4ac4 75%,#8330a8 100%);
  /* Trecho claro da rampa nos botões, para o texto escuro ter contraste */
  --grad-cta: linear-gradient(90deg,#5fa9e9 0%,#5b80d9 100%);
  --acc-ink: #04101a;

  --whats: #25d366;

  --ff-tit: 'Michroma', system-ui, sans-serif;
  --ff-txt: 'DM Sans', system-ui, -apple-system, sans-serif;

  --r-sm: .5rem;
  --r:    .875rem;
  --r-lg: 1.25rem;
  --r-xl: 2rem;

  --wrap: 1180px;
  --hdr-h: 68px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- TEMA CLARO (Lojista) ---------- */
:root,
html[data-tema="claro"] {
  --bg:        #ffffff;
  --bg-2:      #f4f6fa;
  --bg-3:      #eaeef5;
  --panel:     #ffffff;
  --chip:      #ffffff;

  --surface:   rgba(11,15,24,.025);
  --surface-2: rgba(11,15,24,.05);
  --border:    rgba(11,15,24,.10);
  --border-2:  rgba(11,15,24,.18);

  --text:   #0b0f18;
  --text-2: #4c5766;
  --muted:  #7b8593;

  --acc:      #2f6fd0;
  --acc-soft: rgba(47,111,208,.08);
  --acc-glow: rgba(91,128,217,.30);

  --wm-ink: #0b0f18;
  --fx:     rgba(11,15,24,.055);
  --shader-op: .3;
  --shadow: 0 18px 44px -20px rgba(16,24,40,.28);
  --shadow-sm: 0 6px 18px -10px rgba(16,24,40,.3);
  --hdr-bg:  rgba(255,255,255,.72);
  --hdr-bg-2:rgba(255,255,255,.95);
  --dor-borda: #e11d48;
  --tile-filtro: none;

  /* rampa aplicada às grades de ícone (versão legível sobre branco) */
  --r1:#2f86c8; --r2:#3a72cc; --r3:#4560cc; --r4:#5a4fc4; --r5:#6a3fb2; --r6:#7c319e;
}

/* ---------- TEMA ESCURO (Técnico) ---------- */
html[data-tema="escuro"] {
  --bg:        #050609;
  --bg-2:      #0a0c11;
  --bg-3:      #0e1117;
  --panel:     #0c0e14;
  --chip:      #08090d;

  --surface:   rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.065);
  --border:    rgba(255,255,255,.08);
  --border-2:  rgba(255,255,255,.15);

  --text:   #f2f5fa;
  --text-2: #a6b0c0;
  --muted:  #707b8d;

  --acc:      #6fb6ef;
  --acc-soft: rgba(111,182,239,.12);
  --acc-glow: rgba(91,128,217,.36);

  --wm-ink: #ffffff;
  --fx:     rgba(255,255,255,.035);
  --shader-op: .8;
  --shadow: 0 18px 50px -18px rgba(0,0,0,.9);
  --shadow-sm: 0 8px 22px -12px rgba(0,0,0,.9);
  --hdr-bg:  rgba(5,6,9,.62);
  --hdr-bg-2:rgba(5,6,9,.94);
  --dor-borda: #f43f5e;
  --tile-filtro: brightness(.78) saturate(.85) contrast(1.05);

  --r1:#59a6e7; --r2:#5b93e0; --r3:#5b80d9; --r4:#6863ce; --r5:#6f4ac4; --r6:#8330a8;
}

::selection{background:var(--c-roxo);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:100px;border:2px solid var(--bg)}

/* ================= 2. RESET ================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--ff-txt);
  letter-spacing:-.015em;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .45s var(--ease), color .45s var(--ease);
}
img,svg{display:block;max-width:100%}
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--grad-cta);color:var(--acc-ink);padding:.75rem 1.25rem;font-weight:600;border-radius:0 0 var(--r) 0;
}
.skip-link:focus{left:0}

.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ================= 3. UTILITÁRIOS ================= */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:1.5rem}
.wrap-sm{max-width:820px}

.h1{
  font-family:var(--ff-tit);font-weight:900;
  font-size:clamp(2rem,4.8vw,3.5rem);
  line-height:1.04;letter-spacing:-.035em;
}
.h2{
  font-family:var(--ff-tit);font-weight:800;
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  line-height:1.12;letter-spacing:-.03em;
}
.grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.lead{font-size:clamp(1rem,1.4vw,1.12rem);color:var(--text-2);max-width:36em}
.lead-2{margin-top:.9rem;font-size:1rem;color:var(--muted)}
.sub{color:var(--text-2);font-size:1.02rem;max-width:62ch;margin-inline:auto}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc);margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--grad)}

.kicker{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-glow);
  padding:.3rem .8rem;border-radius:100px;margin-bottom:1rem;
}

/* Botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:600;font-size:.95rem;line-height:1.2;
  padding:.9rem 1.5rem;border-radius:100px;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:transform .18s var(--ease), background .2s, border-color .2s, box-shadow .25s, color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* CTA de gradiente orgânico, adaptado do componente de referência para a
   paleta Vibe. Só anima propriedades do gradiente: sem superfícies giratórias
   ou elementos maiores que o botão, evitando artefatos de composição. */
@property --cta-pos-x{syntax:"<percentage>";initial-value:12%;inherits:false}
@property --cta-pos-y{syntax:"<percentage>";initial-value:140%;inherits:false}
@property --cta-spread-x{syntax:"<percentage>";initial-value:150%;inherits:false}
@property --cta-spread-y{syntax:"<percentage>";initial-value:180%;inherits:false}
@property --cta-color-1{syntax:"<color>";initial-value:#070912;inherits:false}
@property --cta-color-2{syntax:"<color>";initial-value:#111a3e;inherits:false}
@property --cta-color-3{syntax:"<color>";initial-value:#2f477f;inherits:false}
@property --cta-color-4{syntax:"<color>";initial-value:#5b46a0;inherits:false}
@property --cta-color-5{syntax:"<color>";initial-value:#702d95;inherits:false}
@property --cta-border-angle{syntax:"<angle>";initial-value:24deg;inherits:false}
@property --cta-stop-1{syntax:"<percentage>";initial-value:36%;inherits:false}
@property --cta-stop-2{syntax:"<percentage>";initial-value:60%;inherits:false}
@property --cta-stop-3{syntax:"<percentage>";initial-value:78%;inherits:false}
@property --cta-stop-4{syntax:"<percentage>";initial-value:90%;inherits:false}
@property --cta-stop-5{syntax:"<percentage>";initial-value:100%;inherits:false}

.btn-primary{
  --cta-border-1:rgba(89,166,231,.32);
  --cta-border-2:rgba(131,48,168,.9);
  position:relative;isolation:isolate;overflow:hidden;
  color:#fff;
  border:0;
  background:radial-gradient(
    var(--cta-spread-x) var(--cta-spread-y) at var(--cta-pos-x) var(--cta-pos-y),
    var(--cta-color-1) var(--cta-stop-1),
    var(--cta-color-2) var(--cta-stop-2),
    var(--cta-color-3) var(--cta-stop-3),
    var(--cta-color-4) var(--cta-stop-4),
    var(--cta-color-5) var(--cta-stop-5)
  );
  box-shadow:0 9px 24px -12px var(--acc-glow),inset 0 1px 0 rgba(255,255,255,.08);
  transition:
    transform .18s var(--ease),box-shadow .45s var(--ease),
    --cta-pos-x .55s var(--ease),--cta-pos-y .55s var(--ease),
    --cta-spread-x .55s var(--ease),--cta-spread-y .55s var(--ease),
    --cta-color-1 .55s,--cta-color-2 .55s,--cta-color-3 .55s,
    --cta-color-4 .55s,--cta-color-5 .55s,
    --cta-border-angle .55s var(--ease),
    --cta-stop-1 .55s,--cta-stop-2 .55s,--cta-stop-3 .55s,--cta-stop-4 .55s,--cta-stop-5 .55s;
}
.btn-primary > .btn-shiny-content{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;gap:inherit;
}
.btn-primary::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;padding:1px;
  background:linear-gradient(var(--cta-border-angle),var(--cta-border-1),var(--cta-border-2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
.btn-primary::after{
  content:"";position:absolute;inset:1px;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.10) 48%,transparent 72%);
}

/* Lojista: azul mais luminoso sobre a interface clara. */
html[data-tema="claro"] .btn-primary:is(:hover,:focus-visible){
  --cta-pos-x:0%;--cta-pos-y:92%;--cta-spread-x:122%;--cta-spread-y:108%;
  --cta-color-1:#183457;--cta-color-2:#29558c;--cta-color-3:#4d60b1;
  --cta-color-4:#6843aa;--cta-color-5:#190b28;
  --cta-stop-1:0%;--cta-stop-2:18%;--cta-stop-3:42%;--cta-stop-4:74%;--cta-stop-5:94%;
  --cta-border-angle:190deg;
  --cta-border-1:rgba(133,203,255,.68);--cta-border-2:rgba(151,82,206,.92);
  box-shadow:0 14px 34px -13px rgba(59,96,190,.58),inset 0 1px 0 rgba(255,255,255,.14);
}

/* Técnico: mesma rampa, com base mais profunda para o fundo escuro. */
html[data-tema="escuro"] .btn-primary{
  --cta-color-1:#05070d;--cta-color-2:#101936;--cta-color-3:#253e74;
  --cta-color-4:#574099;--cta-color-5:#702984;
  --cta-border-1:rgba(111,182,239,.38);--cta-border-2:rgba(131,48,168,.92);
  box-shadow:0 11px 30px -12px rgba(91,128,217,.48),inset 0 1px 0 rgba(255,255,255,.09);
}
html[data-tema="escuro"] .btn-primary:is(:hover,:focus-visible){
  --cta-pos-x:2%;--cta-pos-y:94%;--cta-spread-x:118%;--cta-spread-y:112%;
  --cta-color-1:#10253a;--cta-color-2:#21476f;--cta-color-3:#405b9a;
  --cta-color-4:#6542a1;--cta-color-5:#12081d;
  --cta-stop-1:0%;--cta-stop-2:20%;--cta-stop-3:46%;--cta-stop-4:76%;--cta-stop-5:95%;
  --cta-border-angle:205deg;
  --cta-border-1:rgba(141,210,255,.72);--cta-border-2:rgba(159,82,199,.9);
  box-shadow:0 15px 38px -12px rgba(91,128,217,.7),inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-ghost{background:var(--surface);border-color:var(--border-2);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--acc)}
.btn-whats{background:var(--whats);color:#04220f}
.btn-lg{padding:1.05rem 1.85rem;font-size:1rem}
.btn-sm{padding:.6rem 1.05rem;font-size:.85rem}
.btn-full{width:100%}

/* Revelação ao rolar — cada família de elemento recebe uma trajetória própria.
   O atraso é calculado por grupo no JS, evitando sequências repetitivas. */
[data-reveal]{
  --reveal-x:0px;--reveal-y:28px;--reveal-scale:.975;--reveal-rotate:0deg;--reveal-blur:5px;
  opacity:0;
  transform:translate3d(var(--reveal-x),var(--reveal-y),0) scale(var(--reveal-scale)) rotate(var(--reveal-rotate));
  filter:blur(var(--reveal-blur));
  transition:
    opacity .72s var(--ease) var(--reveal-delay,0ms),
    transform .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),
    filter .72s var(--ease) var(--reveal-delay,0ms);
}
[data-reveal="hero"]{
  --reveal-blur:0px;
  transition:none;
}
[data-reveal="hero"].vis{
  animation:heroReveal .78s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) both;
}
@keyframes heroReveal{
  from{opacity:0;transform:translate3d(0,22px,0) scale(.99)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
[data-reveal="heading"]{--reveal-y:24px;--reveal-scale:.985;--reveal-blur:4px}
[data-reveal="card"]{
  --reveal-x:var(--reveal-offset,18px);--reveal-y:30px;
  --reveal-scale:.955;--reveal-rotate:var(--reveal-tilt,.55deg);--reveal-blur:4px;
}
[data-reveal="left"]{--reveal-x:-42px;--reveal-y:10px;--reveal-scale:.98;--reveal-blur:5px}
[data-reveal="right"]{--reveal-x:42px;--reveal-y:10px;--reveal-scale:.97;--reveal-blur:5px}
[data-reveal="slide"]{--reveal-x:24px;--reveal-y:0px;--reveal-scale:.99;--reveal-blur:3px}
[data-reveal="zoom"]{--reveal-y:18px;--reveal-scale:.92;--reveal-blur:6px}
[data-reveal].vis{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0);filter:blur(0)}

/* Transição ao trocar de visão */
.swap{animation:swapIn .45s var(--ease)}
@keyframes swapIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;filter:none}
}

/* ================= 4. HEADER + MARCA + PÍLULA ================= */
#hdr{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--hdr-h);
  display:flex;align-items:center;
  background:transparent;pointer-events:none;
}
.hdr-in{
  width:calc(100% - 3rem);max-width:var(--wrap);min-height:var(--hdr-h);
  margin-inline:auto;padding-inline:0;
  display:flex;align-items:center;gap:1rem;
  pointer-events:auto;border:1px solid transparent;border-radius:0;
  background:transparent;box-shadow:none;
  transition:
    max-width .45s var(--ease),min-height .45s var(--ease),padding .45s var(--ease),
    border-color .35s var(--ease),border-radius .45s var(--ease),
    background .35s var(--ease),box-shadow .4s var(--ease),transform .45s var(--ease);
}
/* Depois do primeiro trecho do hero, o header se recolhe para uma cápsula
   flutuante. No topo ele permanece totalmente transparente. */
#hdr.scrolled .hdr-in,
#hdr.menu-open .hdr-in{
  max-width:1100px;min-height:52px;
  padding:.42rem .55rem .42rem .85rem;
  border-color:var(--border-2);border-radius:100px;
  background:color-mix(in srgb,var(--hdr-bg-2) 88%,transparent);
  box-shadow:0 18px 42px -22px rgba(20,28,50,.52),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(1.45);
  -webkit-backdrop-filter:blur(18px) saturate(1.45);
  transform:translateY(.75rem);
}
html[data-tema="escuro"] #hdr.scrolled .hdr-in,
html[data-tema="escuro"] #hdr.menu-open .hdr-in{
  box-shadow:0 20px 48px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07);
}
#hdr.scrolled .wm{--wm-h:17px}
#hdr.scrolled .pill-btn{padding:.42rem .78rem;font-size:.8rem}
#hdr.scrolled .nav{gap:.9rem}
#hdr.scrolled .nav a{font-size:.8rem}
#hdr.scrolled .nav .btn-sm{padding:.55rem .9rem;font-size:.8rem}
#hdr.menu-open .hdr-in{border-radius:var(--r-lg)}

@supports not (background:color-mix(in srgb,#000 50%,transparent)){
  #hdr.scrolled .hdr-in,#hdr.menu-open .hdr-in{background:var(--hdr-bg-2)}
}

/* ---- Wordmark VIBE ----------------------------------------
   Traçado vetorial (símbolo #logo-vibe no index.html), medido a
   partir do arquivo original da marca. Proporção 480:100 —
   V=108 · I=30 · B=162 · E=164, com vãos de 6/6/4.
   --wm-h é a altura de caixa alta; muda só ela para escalar.
   As letras herdam currentColor, então acompanham o tema.      */
.brand{display:flex;align-items:center;flex:none}
.wm{
  --wm-h: 19px;
  height:var(--wm-h);
  width:calc(var(--wm-h) * 4.8);
  color:var(--wm-ink);
  transition:color .45s var(--ease), opacity .3s var(--ease);
}
.wm-lg{--wm-h:24px}
.brand:hover .wm{opacity:.85}

/* Barra de progresso de leitura — a rampa da marca */
#progresso{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:1000;
  background:var(--grad);transition:width .1s linear;
}

.pill{
  position:relative;display:flex;align-items:center;gap:.15rem;
  padding:.25rem;border-radius:100px;
  background:var(--surface);border:1px solid var(--border);
  margin-right:auto;
}
.pill-glider{
  position:absolute;top:.25rem;bottom:.25rem;left:.25rem;
  width:calc(50% - .25rem);border-radius:100px;
  background:var(--grad-cta);
  box-shadow:0 4px 16px -6px var(--acc-glow);
  transition:transform .38s var(--ease);
}
html[data-persona="tecnico"] .pill-glider{transform:translateX(100%)}
.pill-btn{
  position:relative;z-index:1;display:flex;align-items:center;gap:.45rem;
  padding:.5rem .95rem;border-radius:100px;
  font-size:.85rem;font-weight:600;color:var(--text-2);
  transition:color .25s;white-space:nowrap;
}
.pill-btn .ico{width:1.05em;height:1.05em}
.pill-btn.is-on{color:var(--acc-ink)}

.nav{display:flex;align-items:center;gap:1.35rem}
.nav a{font-size:.86rem;font-weight:500;color:var(--text-2);white-space:nowrap}
.nav a:not(.btn){transition:color .2s}
.nav a:hover{color:var(--text)}
.nav a.btn{color:var(--acc-ink)}
.nav a.btn-primary{color:#fff}
.menu-btn{display:none;padding:.5rem;color:var(--text)}
.menu-btn .ico{width:1.5em;height:1.5em}

/* ================= 5. HERO ================= */
.hero{position:relative;padding:calc(var(--hdr-h) + 5rem) 0 4.5rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-shader{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  background:var(--grad);
  opacity:var(--shader-op);
  transition:opacity .6s var(--ease);
}
.grid-fx{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--fx) 1px,transparent 1px),
                   linear-gradient(90deg,var(--fx) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);
}
/* Esmaece o shader por trás do texto para manter contraste; a arte à
   direita fica com a cor cheia. Usa --bg, então acompanha o tema. */
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 6%,transparent 60%);
}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
.hero-copy .lead{margin-top:1.35rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1rem}
.cta-in .hero-cta{justify-content:center}

.selos{display:flex;flex-wrap:wrap;gap:1.35rem;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--border)}
.selos li{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-2)}
.selos .ico{width:1.05em;height:1.05em;color:var(--acc)}

/* Arte do hero — mascote VibeCell */
.hero-art{position:relative;min-height:480px;display:grid;place-items:center}
.art-card{
  background:var(--panel);
  border:1px solid var(--border);border-radius:var(--r-lg);
}

/* Brilho de fundo, pulsando atrás da mascote */
.art-glow{
  position:absolute;z-index:0;top:50%;left:50%;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,var(--c-azul) 0%,var(--c-roxo) 45%,transparent 72%);
  filter:blur(70px);
  animation:glowIn .9s var(--ease) .1s both,glowPulse 5s ease-in-out .95s infinite;
}
@keyframes glowIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  to{opacity:.45;transform:translate(-50%,-50%) scale(1)}
}
@keyframes glowPulse{
  0%,100%{opacity:.32;transform:translate(-50%,-50%) scale(.92)}
  50%{opacity:.6;transform:translate(-50%,-50%) scale(1.1)}
}

/* Anel degradê girando devagar atrás da mascote */
.art-ring{
  position:absolute;z-index:0;top:50%;left:50%;width:390px;height:390px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,var(--c-ciano),var(--c-azul),var(--c-roxo),var(--c-violeta),var(--c-ciano));
  -webkit-mask-image:radial-gradient(circle,transparent 63%,#000 65%,#000 68%,transparent 70%);
  mask-image:radial-gradient(circle,transparent 63%,#000 65%,#000 68%,transparent 70%);
  animation:ringIn 1s var(--ease) .25s both,ringSpin 16s linear infinite;
}
@keyframes ringIn{from{opacity:0}to{opacity:.4}}
@keyframes ringSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

/* Partículas soltas, brilhando em ritmos diferentes */
.art-spark{
  position:absolute;z-index:1;width:8px;height:8px;border-radius:50%;
  background:var(--grad);box-shadow:0 0 14px 3px var(--acc-glow);
}
.art-spark-1{top:12%;right:14%;animation:sparkIn .6s var(--ease) .55s both,sparkPulse 3.2s ease-in-out 1.15s infinite}
.art-spark-2{bottom:20%;left:6%;width:6px;height:6px;animation:sparkIn .6s var(--ease) .7s both,sparkPulse 3.2s ease-in-out 1.95s infinite}
@keyframes sparkIn{from{opacity:0;transform:scale(0)}to{opacity:.6;transform:scale(1)}}
@keyframes sparkPulse{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.3)}}

/* Mascote: entra com fade+leve giro, depois flutua para sempre */
.art-mascote-wrap{
  position:relative;z-index:1;width:min(400px,88%);
  animation:mascoteIn .9s var(--ease) both,mascoteFloat 6.5s ease-in-out .9s infinite;
}
.art-mascote{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 26px 46px rgba(15,10,35,.4)) drop-shadow(0 0 34px rgba(111,74,196,.35));
}
.art-mascote-wrap::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(75deg,transparent 35%,rgba(255,255,255,.7) 48%,transparent 61%);
  background-size:260% 260%;background-position:-60% -60%;
  -webkit-mask-image:url("../img/mascote-vibecell.png");-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;
  mask-image:url("../img/mascote-vibecell.png");mask-size:100% 100%;mask-repeat:no-repeat;
  mix-blend-mode:overlay;pointer-events:none;
  animation:shineSweep 4.5s ease-in-out 1.7s infinite;
}
@keyframes mascoteIn{
  0%{opacity:0;transform:translateY(38px) scale(.85) rotate(-6deg)}
  65%{opacity:1;transform:translateY(-8px) scale(1.04) rotate(1.5deg)}
  85%{transform:translateY(2px) scale(.99) rotate(-.5deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
@keyframes mascoteFloat{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-14px) rotate(1.5deg)}
}
@keyframes shineSweep{0%,55%,100%{background-position:-60% -60%}75%{background-position:140% 140%}}

.art-float{
  position:absolute;z-index:2;display:flex;align-items:center;gap:.8rem;
  width:14.25rem;
  padding:.75rem 1rem;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--border-2);
  box-shadow:var(--shadow),0 14px 32px -12px var(--float-glow,var(--acc-glow));
  backdrop-filter:blur(8px);
  animation:floatIn .75s var(--ease) both,flt 5.5s ease-in-out infinite;
}
.art-f1{--float-glow:rgba(89,166,231,.55);top:4%;left:-3%;animation-delay:.15s,0s}
.art-f2{--float-glow:rgba(111,74,196,.55);bottom:20%;right:-2%;animation-delay:.3s,-1.8s}
.art-f3{--float-glow:rgba(131,48,168,.55);bottom:0;left:1%;animation-delay:.45s,-3.4s}
@keyframes floatIn{
  from{opacity:0;translate:0 20px;scale:.82;filter:blur(3px)}
  60%{filter:blur(0)}
  to{opacity:1;translate:0 0;scale:1;filter:blur(0)}
}

.art-float-ico{
  flex:none;display:grid;place-items:center;
  width:2.5rem;height:2.5rem;border-radius:.9rem;
  background:linear-gradient(155deg,var(--float-glow) 0%,transparent 120%);
  box-shadow:inset 0 0 0 1px var(--float-glow);
}
.art-float .ico{width:1.2em;height:1.2em;color:var(--acc);filter:drop-shadow(0 0 6px currentColor)}
.art-float-txt{min-width:0}
.art-float strong{display:block;font-size:.86rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;white-space:nowrap}
.art-float small{display:block;margin-top:.15rem;font-size:.73rem;color:var(--muted);line-height:1.3;white-space:nowrap}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ================= FAIXA DE AUTORIDADE ================= */
.autoridade-band{position:relative;border-block:1px solid var(--border);background:var(--bg-2)}
.autoridade-band::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--grad)}
.autoridade{display:grid;grid-template-columns:repeat(4,1fr)}
.autoridade li{padding:2.2rem 1.5rem;border-left:1px solid var(--border)}
.autoridade li:first-child{border-left:0}
.aut-ico{
  display:grid;place-items:center;width:38px;height:38px;border-radius:11px;margin-bottom:.9rem;
  color:var(--acc);
  background:color-mix(in srgb, currentColor 12%, transparent);
  border:1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.autoridade li:nth-child(1) .aut-ico{color:var(--r1)}
.autoridade li:nth-child(2) .aut-ico{color:var(--r3)}
.autoridade li:nth-child(3) .aut-ico{color:var(--r5)}
.autoridade li:nth-child(4) .aut-ico{color:var(--r6)}
.autoridade h3{font-family:var(--ff-tit);font-size:1rem;font-weight:700;letter-spacing:-.015em;margin-bottom:.35rem}
.autoridade p{font-size:.88rem;color:var(--text-2)}

/* ================= 6. SEÇÕES ================= */
.sec{padding:5.5rem 0}
.sec-alt{background:var(--bg-2);border-block:1px solid var(--border)}
.sec-hd{text-align:center;margin-bottom:3rem}
.sec-hd .h2{margin-bottom:.85rem;max-width:22ch;margin-inline:auto}

/* Faixa "bento" dos benefícios — acompanha o tema da pílula como o resto
   do site: fundo branco no Lojista (claro), escuro no Técnico (escuro). */
.sec-bento{
  position:relative;overflow:hidden;
  background:var(--bg);border-block:1px solid var(--border);
}
.sec-bento::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(560px circle at 8% -5%,rgba(91,128,217,.24),transparent 60%),
    radial-gradient(520px circle at 96% 105%,rgba(131,48,168,.22),transparent 60%);
}
.sec-bento .wrap{position:relative;z-index:1}

/* Dores */
.dores-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem}
.dor{
  padding:1.6rem;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--dor-borda);
  transition:background .25s,transform .25s var(--ease);
}
.dor:hover{background:var(--surface-2);transform:translateY(-3px)}
.dor h3{font-family:var(--ff-tit);font-size:1.02rem;font-weight:700;margin-bottom:.5rem;letter-spacing:-.015em}
.dor p{font-size:.92rem;color:var(--text-2)}

/* Benefícios — grade "bento": tamanhos variados + uma mini-animação
   diferente por posição (ver BENEF_MOCKUPS em app.js). Empilha em 1
   coluna no celular, 2 no tablet, e o recorte bento completo no desktop. */
.cards{display:grid;grid-template-columns:1fr;gap:1.1rem}
.card{
  position:relative;padding:1.35rem;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--border);overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;min-height:15rem;
  transition:border-color .3s,transform .3s var(--ease);
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),var(--acc-soft),transparent 60%);
  opacity:0;transition:opacity .35s;
}
.card:hover{border-color:var(--acc-glow);transform:translateY(-4px)}
.card:hover::after{opacity:1}
.card h3{font-family:var(--ff-tit);font-size:1.04rem;font-weight:700;margin-bottom:.4rem;letter-spacing:-.015em;position:relative;flex:none}
.card p{font-size:.85rem;line-height:1.45;color:var(--text-2);position:relative;flex:none}

@media (min-width:760px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){
  .cards{grid-template-columns:repeat(6,1fr);grid-auto-rows:11.5rem}
  .card{min-height:0}
  .card .mock{min-height:0}
  .cards .card:nth-child(1){grid-column:span 2;grid-row:span 2}
  .cards .card:nth-child(2){grid-column:span 2}
  .cards .card:nth-child(3){grid-column:span 2;grid-row:span 2}
  .cards .card:nth-child(4){grid-column:span 2}
  .cards .card:nth-child(5){grid-column:span 3;grid-row:span 2}
  .cards .card:nth-child(6){grid-column:span 3;grid-row:span 2}

  /* Nos cards altos, o mockup deixa de consumir todo o espaço livre. O bloco
     visual e o texto passam a funcionar como uma composição centralizada. */
  .cards .card:nth-child(1),
  .cards .card:nth-child(3),
  .cards .card:nth-child(5){justify-content:center;padding:1.6rem}
  .cards .card:nth-child(1) .mock{flex:0 0 8rem;height:8rem;margin-bottom:.9rem}
  .cards .card:nth-child(3) .mock{flex:0 0 6rem;height:6rem;margin-bottom:.9rem}
  .cards .card:nth-child(5) .mock{flex:0 0 7rem;height:7rem;margin-bottom:1rem}
}

/* -------- mockups animados -------- */
.mock{position:relative;flex:1;display:grid;place-items:center;min-height:5rem;margin-bottom:.75rem}

@keyframes mockPing{0%{transform:scale(1);opacity:.65}100%{transform:scale(2.5);opacity:0}}

.mock-ping .mock-core,.mock-radar .mock-core{border-radius:50%;padding:.55rem}
.mock-ping .mock-core{width:2.5rem;height:2.5rem;background:var(--acc);color:#06070c}
.mock-ping .mock-ring{
  position:absolute;width:2.5rem;height:2.5rem;border-radius:50%;
  border:1.5px solid var(--acc);animation:mockPing 2.6s ease-out infinite;
}
.mock-ping .mock-ring:nth-child(2){animation-delay:.65s}
.mock-ping .mock-ring:nth-child(3){animation-delay:1.3s}

.mock-tiers{display:flex;flex-direction:column;justify-content:center;gap:.5rem;width:75%}
.mock-tiers span{height:.5rem;border-radius:100px;background:var(--surface-2);position:relative;overflow:hidden}
.mock-tiers span:nth-child(1){width:55%}
.mock-tiers span:nth-child(2){width:80%}
.mock-tiers span:nth-child(3){width:100%}
.mock-tiers span::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--c-ciano),var(--c-azul),var(--c-roxo));
  transform:scaleX(0);transform-origin:left;animation:mockTier 3.6s ease-in-out infinite;
}
.mock-tiers span:nth-child(1)::after{animation-delay:0s}
.mock-tiers span:nth-child(2)::after{animation-delay:.35s}
.mock-tiers span:nth-child(3)::after{animation-delay:.7s}
@keyframes mockTier{0%,12%{transform:scaleX(0)}35%,75%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}

.mock-shields{
  position:relative;display:block;width:10rem;height:6rem;margin-inline:auto;
  isolation:isolate;
}
.mock-shields::before,
.mock-shields::after{
  content:"";position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;
  translate:-50% -50%;border:1px solid color-mix(in srgb,var(--acc) 24%,transparent);
}
.mock-shields::before{width:5.7rem;height:5.7rem;animation:shieldHalo 3.2s ease-out infinite}
.mock-shields::after{width:4.45rem;height:4.45rem;opacity:.55}
.mock-shield{
  position:absolute;z-index:2;display:block;padding:.55rem;border-radius:.9rem;
  background:var(--panel);color:var(--acc);border:1px solid var(--border);
  box-shadow:0 10px 24px -14px var(--acc),inset 0 0 0 1px var(--surface-2);
}
.mock-shield:nth-child(2){
  z-index:3;left:50%;top:50%;width:4rem;height:4rem;padding:.95rem;
  translate:-50% -50%;background:var(--acc-soft);border-color:color-mix(in srgb,var(--acc) 38%,var(--border));
  animation:shieldCore 3.2s ease-in-out infinite;
}
.mock-shield:nth-child(1),.mock-shield:nth-child(3){
  width:2.35rem;height:2.35rem;color:var(--muted);background:var(--surface-2);
}
.mock-shield:nth-child(1){left:.25rem;top:.3rem;animation:shieldSatelliteLeft 4.2s ease-in-out infinite}
.mock-shield:nth-child(3){right:.25rem;bottom:.3rem;animation:shieldSatelliteRight 4.2s ease-in-out -.9s infinite}
@keyframes shieldCore{
  0%,100%{transform:translateY(0) scale(1);box-shadow:0 12px 28px -14px var(--acc)}
  50%{transform:translateY(-4px) scale(1.055);box-shadow:0 18px 34px -12px var(--acc)}
}
@keyframes shieldSatelliteLeft{
  0%,100%{transform:translate(0,7px) rotate(-10deg);color:var(--muted)}
  50%{transform:translate(14px,-5px) rotate(5deg);color:var(--acc)}
}
@keyframes shieldSatelliteRight{
  0%,100%{transform:translate(0,-6px) rotate(10deg);color:var(--muted)}
  50%{transform:translate(-14px,5px) rotate(-5deg);color:var(--acc)}
}
@keyframes shieldHalo{
  0%{opacity:.65;transform:scale(.78)}
  75%,100%{opacity:0;transform:scale(1.28)}
}

.mock-swatches{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);place-items:stretch;gap:.4rem;width:5.6rem;height:3.4rem}
.mock-swatches span{border-radius:.35rem;background:var(--border-2);animation:mockSwatch 4.8s ease-in-out infinite}
.mock-swatches span:nth-child(1){animation-delay:0s}
.mock-swatches span:nth-child(2){animation-delay:.25s}
.mock-swatches span:nth-child(3){animation-delay:.5s}
.mock-swatches span:nth-child(4){animation-delay:.75s}
.mock-swatches span:nth-child(5){animation-delay:1s}
.mock-swatches span:nth-child(6){animation-delay:1.25s}
@keyframes mockSwatch{0%,10%,100%{background:var(--border-2);transform:scale(1)}5%{background:var(--acc);transform:scale(1.15)}}

.mock-bubble{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  padding:.75rem 1.05rem;border-radius:1.1rem 1.1rem 1.1rem .3rem;
  background:var(--surface-2);border:1px solid var(--border-2);
}
.mock-chat-ico{width:1.25em;height:1.25em;color:var(--acc)}
.mock-dots{display:flex;gap:.28rem}
.mock-dots i{width:.4rem;height:.4rem;border-radius:50%;background:var(--acc);display:block;animation:mockDot 1.2s ease-in-out infinite}
.mock-dots i:nth-child(2){animation-delay:.18s}
.mock-dots i:nth-child(3){animation-delay:.36s}
@keyframes mockDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.mock-radar .mock-core{width:2.1rem;height:2.1rem;background:#fff;color:#06070c}
.mock-radar .mock-ring{
  position:absolute;width:2.1rem;height:2.1rem;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);animation:mockPing 2.6s ease-out infinite;
}
.mock-radar .mock-ring:nth-child(2){animation-delay:.9s}

/* card com foto (posição 6): imagem real + véu escuro para o texto */
.card-photo{
  background-image:linear-gradient(180deg,rgba(6,7,12,.1) 0%,rgba(6,7,12,.4) 55%,rgba(6,7,12,.96) 100%),
    url("../img/mix-mercado.png");
  background-size:cover;background-position:center 38%;
  border-color:rgba(255,255,255,.16);
}
.card-photo .mock{position:absolute;top:1rem;right:1rem;flex:none;margin:0;min-height:0;width:2.6rem;height:2.6rem}
.card-photo h3{margin-top:auto;color:#fff}
.card-photo p{color:rgba(255,255,255,.72)}

/* ================= LINHAS DE PRODUTO ================= */
.linhas{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;align-items:start}
.linha{
  position:relative;padding:2.2rem 2rem;border-radius:var(--r-xl);
  background:var(--panel);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.linha:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.linha-destaque{
  border:1px solid transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
             var(--grad) border-box;
}
.selo-linha{
  position:absolute;top:1.5rem;right:1.5rem;
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--ff-tit);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.35rem .75rem;border-radius:100px;
  background:var(--acc-soft);border:1px solid var(--acc-glow);color:var(--acc);
}
.selo-barras{width:16px;height:9.8px}
.linha-ico{
  width:50px;height:50px;display:grid;place-items:center;border-radius:14px;margin-bottom:1.2rem;
  color:var(--r2);
  background:color-mix(in srgb, currentColor 13%, transparent);
  border:1px solid color-mix(in srgb, currentColor 32%, transparent);
}
.linha-destaque .linha-ico{color:var(--r5)}
.linha-ico .ico{width:1.5em;height:1.5em}
.linha h3{font-family:var(--ff-tit);font-size:1.6rem;font-weight:800;letter-spacing:-.03em}
.linha-tag{font-size:1rem;color:var(--acc);font-weight:500;margin:.3rem 0 1rem}
.linha-txt{font-size:.95rem;color:var(--text-2);margin-bottom:1.5rem}
.linha-rot{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.85rem;
}
.linha .tick-list{margin-bottom:1.8rem}
.linha .btn{margin-top:auto;align-self:flex-start}

.tick-list{display:grid;gap:.7rem}
.tick-list li{display:flex;gap:.7rem;font-size:.95rem;color:var(--text-2)}
.tick-ico{flex:none;width:1.1em;height:1.1em;margin-top:.28rem;color:var(--acc)}

/* ================= DESTAQUE / PREMIUM ================= */
.prog-in{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}
.prog-copy .sub{margin-inline:0}
.prog-copy .tick-list{margin:1.6rem 0 2rem}
.prog-art{position:relative;display:grid;place-items:center;min-height:430px;isolation:isolate}
.prog-image-wrap{
  position:relative;z-index:2;width:min(420px,100%);
  animation:premiumFloat 6.5s ease-in-out infinite;
}
.prog-image-wrap::before{
  content:"";position:absolute;z-index:-1;inset:12% 2% 4%;border-radius:42%;
  background:radial-gradient(circle,var(--acc-glow),transparent 68%);
  filter:blur(28px);opacity:.72;
}
.prog-image{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 28px 36px rgba(23,19,55,.28));
}
html[data-tema="escuro"] .prog-image{filter:drop-shadow(0 30px 44px rgba(0,0,0,.62))}
@keyframes premiumFloat{
  0%,100%{transform:translateY(0) rotate(-.35deg)}
  50%{transform:translateY(-10px) rotate(.35deg)}
}
.prog-ring{
  position:absolute;z-index:0;width:390px;height:390px;border-radius:50%;
  border:1px dashed var(--border-2);animation:spin 30s linear infinite;
}
.prog-ring::before,.prog-ring::after{
  content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--c-azul);
}
.prog-ring::before{top:-5px;left:50%;margin-left:-5px}
.prog-ring::after{bottom:-5px;left:50%;margin-left:-5px;opacity:.4}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================= PASSOS — linha do tempo ================= */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.step{
  position:relative;padding:1.8rem 1.5rem;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);
  transition:background .3s,border-color .3s;
}
.step-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.3rem;height:2.3rem;margin-bottom:1rem;border-radius:50%;
  font-family:var(--ff-tit);font-weight:800;font-size:.92rem;
  background:var(--acc-soft);border:1.5px solid var(--acc-glow);color:var(--acc);
}
.step h3{font-family:var(--ff-tit);font-size:1.02rem;font-weight:700;margin-bottom:.5rem;letter-spacing:-.015em}
.step p{font-size:.9rem;color:var(--text-2)}

/* último passo: a chegada — marcador cheio, ícone de check e brilho pulsante */
.step-last{background:var(--acc-soft);border-color:var(--acc-glow)}
.step-last .step-n{
  position:relative;width:2.6rem;height:2.6rem;
  background:var(--grad);border-color:transparent;color:#fff;
}
.step-last .step-n-ico{width:1.15em;height:1.15em}
.step-last .step-n::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--acc);animation:stepPing 2.2s ease-out infinite;
}
@keyframes stepPing{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.55);opacity:0}}

/* Desktop (grade de 4 colunas): os marcadores sobem para uma linha comum,
   que se desenha da esquerda para a direita e acende cada nó ao alcançá-lo. */
@media (min-width:1025px){
  .steps{margin-top:1.7rem}
  .steps::before{
    content:"";position:absolute;top:-1.7rem;left:12.5%;right:12.5%;height:2px;
    background:linear-gradient(90deg,var(--c-ciano),var(--c-azul),var(--c-roxo),var(--c-violeta));
    opacity:.55;transform-origin:left center;transform:scaleX(0);
  }
  .steps.in-view::before{animation:stepsLine 1.3s cubic-bezier(.65,0,.35,1) forwards}
  @keyframes stepsLine{to{transform:scaleX(1)}}

  .step-last .step-n{position:absolute}
  .step-n{
    position:absolute;top:-1.7rem;left:50%;translate:-50% -50%;margin:0;
    box-shadow:0 0 0 4px var(--bg);
    opacity:0;scale:.4;
    transition:opacity .4s var(--ease) var(--node-delay,0s),scale .4s cubic-bezier(.3,1.6,.4,1) var(--node-delay,0s);
  }
  .steps.in-view .step-n{opacity:1;scale:1}
}

/* ================= DEPOIMENTOS ================= */
.depo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem}
.depo{
  padding:1.8rem;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:1.1rem;
}
.depo-stars{display:flex;gap:.15rem;color:var(--acc)}
.depo-stars .ico{width:1em;height:1em;fill:currentColor;stroke:none}
.depo p{font-size:.95rem;color:var(--text);flex:1}
.depo footer{display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--border);padding-top:1rem}
.depo-av{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--acc-soft);color:var(--acc);border:1px solid var(--acc-glow);
  font-weight:600;font-size:.9rem;
}
.depo-nome{font-size:.9rem;font-weight:600;line-height:1.3;display:block}
.depo-cargo{font-size:.79rem;color:var(--muted)}

/* ================= 7. DISTRIBUIDORES / MAPA ================= */
.gate{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);background:var(--bg-3);min-height:440px;display:grid;place-items:center}
.gate-preview{position:absolute;inset:0;filter:blur(2px);opacity:.9}
.gate-preview::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--fx) 1px,transparent 1px),
                   linear-gradient(90deg,var(--fx) 1px,transparent 1px);
  background-size:44px 44px;
}
.gate-dot{
  position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;border-radius:50%;
  background:var(--c-azul);box-shadow:0 0 0 6px var(--acc-soft);
  animation:blip 3s ease-in-out infinite;
}
.gate-dot:nth-child(2){animation-delay:-.6s}
.gate-dot:nth-child(3){animation-delay:-1.2s}
.gate-dot:nth-child(4){animation-delay:-1.8s}
.gate-dot:nth-child(5){animation-delay:-2.4s}
@keyframes blip{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}

.gate-card{
  position:relative;z-index:2;text-align:center;max-width:500px;padding:2.5rem 2rem;margin:1.5rem;
  border-radius:var(--r-xl);
  background:var(--panel);
  border:1px solid var(--border-2);box-shadow:var(--shadow);
}
.gate-ico{
  width:54px;height:54px;display:grid;place-items:center;margin:0 auto 1.2rem;border-radius:16px;
  background:var(--acc-soft);border:1px solid var(--acc-glow);color:var(--acc);
}
.gate-ico .ico{width:1.5em;height:1.5em}
.gate-card h3{font-family:var(--ff-tit);font-size:1.5rem;font-weight:800;margin-bottom:.7rem;letter-spacing:-.03em}
.gate-card p{color:var(--text-2);font-size:.95rem;margin-bottom:1.6rem}
.gate-note{display:block;margin-top:1rem;font-size:.76rem;color:var(--muted)}

/* Área liberada */
.mapzone{animation:swapIn .5s var(--ease)}
.mapzone-bar{margin-bottom:1.25rem}
.olamsg{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;
  font-size:.88rem;color:var(--acc);background:var(--acc-soft);
  border:1px solid var(--acc-glow);padding:.45rem .95rem;border-radius:100px;
}
.filtros{display:flex;flex-wrap:wrap;gap:.7rem}
.campo-busca{
  flex:1;min-width:240px;display:flex;align-items:center;gap:.6rem;
  padding:.7rem 1rem;border-radius:100px;
  background:var(--surface);border:1px solid var(--border);
  transition:border-color .2s;
}
.campo-busca:focus-within{border-color:var(--acc)}
.campo-busca .ico{color:var(--muted);width:1.1em;height:1.1em}
.campo-busca input{flex:1;background:none;border:0;outline:none;font-size:.92rem;min-width:0}
.campo-busca input::placeholder{color:var(--muted)}
#filtroRegiao{
  padding:.7rem 1rem;border-radius:100px;background:var(--surface);
  border:1px solid var(--border);font-size:.9rem;cursor:pointer;outline:none;
}
#filtroRegiao option{background:var(--bg-2);color:var(--text)}

.mapzone-grid{display:grid;grid-template-columns:380px 1fr;gap:1.25rem;align-items:start}
.lista{max-height:560px;overflow-y:auto;display:grid;gap:.7rem;padding-right:.35rem}
.lista::-webkit-scrollbar{width:6px}
.lista::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:100px}

.dist{
  text-align:left;width:100%;padding:1.15rem;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--border);cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s var(--ease);
}
.dist:hover{border-color:var(--acc-glow);transform:translateX(3px)}
.dist.on{border-color:var(--acc);background:var(--acc-soft)}
.dist-top{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;margin-bottom:.3rem}
.dist-nome{font-family:var(--ff-tit);font-size:.98rem;font-weight:700;letter-spacing:-.015em}
.dist-uf{font-size:.72rem;font-weight:600;color:var(--acc);border:1px solid var(--acc-glow);background:var(--acc-soft);padding:.15rem .5rem;border-radius:100px;flex:none}
.dist-end{font-size:.85rem;color:var(--text-2);margin-bottom:.25rem}
.dist-hr{font-size:.79rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.dist-selos{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.dist-selos span{font-size:.7rem;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);padding:.2rem .55rem;border-radius:100px}
.dist-acoes{display:flex;gap:.5rem;margin-top:.9rem}
.dist-acoes .btn{flex:1;padding:.6rem .8rem;font-size:.82rem}
.vazio{padding:2.5rem 1rem;text-align:center;color:var(--muted);font-size:.92rem}

.mapa-box{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--bg-3)}
#mapa{height:560px;width:100%;background:var(--bg-3)}

/* Leaflet no tema do site (a folha do Leaflet é carregada ANTES desta) */
.leaflet-container{font-family:var(--ff-txt);background:var(--bg-3)}
.leaflet-tile{filter:var(--tile-filtro)}
.leaflet-popup-content-wrapper{background:var(--panel);color:var(--text);border-radius:var(--r);border:1px solid var(--border-2);box-shadow:var(--shadow)}
.leaflet-popup-tip{background:var(--panel);border:1px solid var(--border-2)}
.leaflet-popup-content{margin:.95rem 1.1rem;font-size:.88rem;line-height:1.55}
.leaflet-popup-close-button{color:var(--muted) !important}
.leaflet-control-zoom a{background:var(--panel) !important;color:var(--text) !important;border-color:var(--border) !important}
.leaflet-control-attribution{background:var(--surface-2) !important;color:var(--muted) !important}
.leaflet-control-attribution a{color:var(--text-2) !important}
.pop-tit{font-family:var(--ff-tit);font-weight:800;font-size:.98rem;margin-bottom:.2rem;letter-spacing:-.02em}
.pop-end{color:var(--text-2);margin-bottom:.6rem}
.pop-acoes{display:flex;gap:.4rem;margin-top:.6rem}
.pop-acoes a{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .8rem;border-radius:100px;font-size:.78rem;font-weight:600}
.pop-wa{background:var(--whats);color:#04220f}
.pop-rota{background:var(--surface-2);border:1px solid var(--border-2);color:var(--text)}

/* Pin do mapa = as 3 barras da marca */
.pin-vibe{
  position:relative;width:34px;height:34px;display:grid;place-items:center;
  border-radius:11px;background:var(--chip);
  border:1.5px solid var(--border-2);
  box-shadow:var(--shadow-sm), 0 0 0 4px var(--acc-soft);
  transition:box-shadow .25s, transform .25s var(--ease);
}
.pin-vibe::after{
  content:"";position:absolute;bottom:-5px;left:50%;width:10px;height:10px;
  transform:translateX(-50%) rotate(45deg);background:var(--chip);
  border-right:1.5px solid var(--border-2);
  border-bottom:1.5px solid var(--border-2);
  border-radius:0 0 3px 0;
}
.pin-vibe svg{width:19px;height:11.6px}
.leaflet-marker-icon:hover .pin-vibe{transform:scale(1.12);box-shadow:var(--shadow), 0 0 0 6px rgba(131,48,168,.3)}

/* ================= 8. FAQ ================= */
.faq{display:grid;gap:.7rem}
.faq-item{border:1px solid var(--border);border-radius:var(--r);background:var(--panel);overflow:hidden;transition:border-color .25s}
.faq-item.open{border-color:var(--acc-glow)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.35rem;text-align:left;font-weight:600;font-size:.97rem;
}
.faq-q::after{
  content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);
}
.faq-item.open .faq-q::after{transform:rotate(225deg) translateY(-2px)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-a p{padding:0 1.35rem 1.25rem;color:var(--text-2);font-size:.93rem}

/* ================= CTA FINAL ================= */
.cta-final{position:relative;padding:5rem 0;text-align:center;overflow:hidden;background:var(--bg)}
.cta-final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 100%,var(--acc-soft),transparent 70%);
}
.cta-in{position:relative}
.cta-in .h2{margin-bottom:.9rem;max-width:26ch;margin-inline:auto}
.cta-in .sub{margin-top:.5rem}

/* vídeo emoldurado pelo título/subtítulo, com os 3 benefícios flutuando ao
   redor em cards (mesma linguagem visual dos .art-float do hero) —
   composição estática, sem nenhum efeito ligado ao scroll. */
.cta-frame-mid{display:flex;justify-content:center;margin:3rem auto 2.5rem}
.cta-frame-video-wrap{position:relative;width:min(84vw,24rem)}
.cta-frame-video{
  /* 716×838 = proporção real do arquivo (vibevideo.mp4) */
  width:100%;aspect-ratio:716/838;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow-sm);background:var(--panel);
}
.cta-frame-video video{width:100%;height:100%;object-fit:cover;display:block}

.cta-linhas{list-style:none}
.cta-float{
  position:absolute;z-index:2;display:flex;align-items:center;gap:.65rem;
  max-width:11.5rem;padding:.65rem .9rem;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--border-2);
  box-shadow:var(--shadow-sm),0 14px 32px -14px var(--float-glow,var(--acc-glow));
  backdrop-filter:blur(8px);text-align:left;
  font-family:var(--ff-tit);font-weight:700;font-size:.82rem;letter-spacing:-.01em;line-height:1.25;
  animation:floatIn .75s var(--ease) both,flt 5.5s ease-in-out infinite;
}
.cta-float-ico{
  flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:.7rem;
  background:linear-gradient(155deg,var(--float-glow) 0%,transparent 120%);
  box-shadow:inset 0 0 0 1px var(--float-glow);
}
.cta-float .ico{width:1.05em;height:1.05em;color:var(--acc);filter:drop-shadow(0 0 6px currentColor)}

.cta-float-1{--float-glow:rgba(89,166,231,.55);top:4%;left:-9%;animation-delay:.15s,0s}
.cta-float-2{--float-glow:rgba(111,74,196,.55);top:42%;right:-13%;animation-delay:.3s,-1.8s}
.cta-float-3{--float-glow:rgba(131,48,168,.55);bottom:5%;left:-7%;animation-delay:.45s,-3.4s}

@media (min-width:761px){
  .cta-frame-video-wrap{width:28rem}
}
@media (max-width:620px){
  .cta-frame-video-wrap{width:min(78vw,19rem)}
  .cta-float{max-width:9.5rem;padding:.55rem .7rem;font-size:.76rem;gap:.5rem}
  .cta-float-ico{width:1.7rem;height:1.7rem;border-radius:.6rem}
  .cta-float-1{left:-4%}
  .cta-float-2{right:-6%}
  .cta-float-3{left:-2%}
}

/* ================= 9. RODAPÉ ================= */
.rodape{background:var(--bg-2);border-top:1px solid var(--border);padding-top:3.5rem}
.rodape-in{display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;padding-bottom:2.5rem}
.rodape-nome{margin-top:1rem;font-family:var(--ff-tit);font-weight:800;font-size:.85rem;letter-spacing:.14em}
.rodape-brand p:last-child{margin-top:.5rem;font-size:.9rem;color:var(--text-2);max-width:40ch}
.rodape-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.rodape-nav h4{font-family:var(--ff-tit);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:.9rem}
.rodape-nav a{display:block;font-size:.9rem;color:var(--text-2);padding:.22rem 0;transition:color .2s}
.rodape-nav a:hover{color:var(--acc)}
.rodape-fim{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;
  padding:1.4rem 0 4.5rem;border-top:1px solid var(--border);
}
.rodape-fim small{font-size:.78rem;color:var(--muted)}
.rodape-fim a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}

/* FAB */
.fab{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:800;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.3rem;border-radius:100px;
  background:var(--whats);color:#04220f;font-weight:600;font-size:.9rem;
  box-shadow:0 14px 34px -12px rgba(37,211,102,.7);
  transition:transform .2s var(--ease),box-shadow .25s;
}
.fab:hover{transform:translateY(-3px)}
.fab .ico{width:1.35em;height:1.35em}

/* ================= 10. MODAL ================= */
.modal{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:1.25rem}
.modal-bd{position:absolute;inset:0;background:rgba(5,7,10,.6);backdrop-filter:blur(6px);animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{
  position:relative;width:100%;max-width:440px;
  padding:2.25rem 1.9rem 1.9rem;border-radius:var(--r-xl);
  background:var(--panel);
  border:1px solid var(--border-2);box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  animation:popIn .35s var(--ease);
  max-height:92vh;overflow-y:auto;
}
@keyframes popIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:1rem;right:1rem;padding:.4rem;color:var(--muted);border-radius:8px;transition:color .2s,background .2s}
.modal-x:hover{color:var(--text);background:var(--surface-2)}
.modal-ico{
  width:48px;height:48px;display:grid;place-items:center;border-radius:14px;margin-bottom:1.1rem;
  background:var(--acc-soft);border:1px solid var(--acc-glow);color:var(--acc);
}
.modal-ico .ico{width:1.4em;height:1.4em}
.modal-card h3{font-family:var(--ff-tit);font-size:1.35rem;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.modal-sub{font-size:.9rem;color:var(--text-2);margin:.6rem 0 1.5rem}

.campo{margin-bottom:1rem}
.campo label{display:block;font-size:.82rem;font-weight:600;color:var(--text-2);margin-bottom:.4rem}
.campo input{
  width:100%;padding:.85rem 1rem;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);outline:none;
  font-size:.95rem;transition:border-color .2s,background .2s;
}
.campo input::placeholder{color:var(--muted)}
.campo input:focus{border-color:var(--acc);background:var(--surface-2)}
.campo input.inv{border-color:#ef4444}
.erro{display:block;font-size:.78rem;color:#e11d48;margin-top:.35rem;min-height:1em}

.campo-perfil{display:flex;align-items:center;gap:.85rem;margin:.35rem 0 1.1rem;flex-wrap:wrap}
.campo-perfil-lbl{font-size:.82rem;font-weight:600;color:var(--text-2)}
.mini-pill{display:flex;gap:.3rem;padding:.25rem;border-radius:100px;background:var(--surface);border:1px solid var(--border)}
.mini-btn{padding:.4rem .9rem;border-radius:100px;font-size:.82rem;font-weight:600;color:var(--text-2);transition:.25s}
.mini-btn.is-on{background:var(--grad-cta);color:var(--acc-ink)}

.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.83rem;color:var(--text-2);cursor:pointer;margin-bottom:.15rem}
.check input{width:17px;height:17px;margin-top:.15rem;accent-color:var(--c-azul);flex:none;cursor:pointer}
.modal-note{display:flex;align-items:flex-start;justify-content:center;gap:.4rem;margin-top:.9rem;font-size:.75rem;color:var(--muted)}
.modal-note .ico{width:1em;height:1em;flex:none;margin-top:.25em}
#btnEnviar[disabled]{opacity:.6;pointer-events:none}

/* ================= 11. RESPONSIVO ================= */
@media (max-height:740px){
  .modal-card{padding:1.6rem 1.4rem 1.4rem}
  .modal-ico{display:none}
  .modal-sub{margin-bottom:1rem}
}
@media (max-width:1100px){
  .nav{gap:1rem}
  .nav a{font-size:.82rem}
  #hdr.scrolled .hdr-in{max-width:calc(100% - 2rem)}
}
@media (max-width:1024px){
  .hero-in{grid-template-columns:1fr;gap:3rem}
  /* a mensagem vem antes da arte em tela única */
  .hero-art{min-height:380px;transform:scale(.9)}
  .hero-scrim{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 32%,transparent 78%)}
  /* em tela única, os cards não podem sangrar para fora do container */
  .art-f1{left:0}
  .art-f2{right:0}
  .art-f3{left:2%}
  .autoridade{grid-template-columns:repeat(2,1fr)}
  .autoridade li:nth-child(3){border-left:0}
  .autoridade li:nth-child(n+3){border-top:1px solid var(--border)}
  .linhas{grid-template-columns:1fr}
  .mapzone-grid{grid-template-columns:1fr}
  .lista{max-height:none;grid-auto-rows:min-content}
  #mapa{height:420px}
  .prog-in{grid-template-columns:1fr}
  .prog-art{order:-1}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hdr-in{width:calc(100% - 2rem)}
  #hdr.scrolled .hdr-in,#hdr.menu-open .hdr-in{max-width:calc(100% - 1rem);padding-inline:.8rem;transform:translateY(.5rem)}
  #hdr.menu-open .hdr-in{border-radius:var(--r-lg) var(--r-lg) 0 0}
  .nav{
    position:absolute;top:calc(100% - 1px);left:-1px;right:-1px;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--hdr-bg-2);border-bottom:1px solid var(--border);
    border-inline:1px solid var(--border-2);border-radius:0 0 var(--r-lg) var(--r-lg);
    padding:1rem 1.5rem 1.5rem;
    transform:translateY(-120%);visibility:hidden;pointer-events:none;
    transition:transform .35s var(--ease), visibility 0s .35s;
    z-index:-1;
  }
  .nav.aberto{transform:none;visibility:visible;pointer-events:auto;transition:transform .35s var(--ease), visibility 0s}
  .nav a{padding:.9rem 0;border-bottom:1px solid var(--border);font-size:.95rem}
  .nav a.btn{margin-top:1rem;border-bottom:0;justify-content:center}
  .menu-btn{display:block}
  .rodape-in{grid-template-columns:1fr}
}
@media (max-width:620px){
  .sec{padding:4rem 0}
  .hero{padding-top:calc(var(--hdr-h) + 3rem)}
  .pill-btn span{display:none}
  .pill-btn{padding:.5rem .85rem}
  .pill-btn .ico{width:1.2em;height:1.2em}
  .hero-cta .btn{width:100%}
  .art-float{width:12.15rem;padding:.6rem .85rem;gap:.6rem}
  .art-float strong{font-size:.78rem;white-space:normal}
  .art-float small{font-size:.68rem;white-space:normal}
  .art-float-ico{width:2.1rem;height:2.1rem;border-radius:.7rem}
  .prog-art{min-height:370px}
  .prog-image-wrap{width:min(340px,100%)}
  .prog-ring{width:300px;height:300px}
  .fab span{display:none}
  .fab{padding:1rem;border-radius:50%}
  .selos{gap:.85rem}
  .autoridade{grid-template-columns:1fr}
  .autoridade li{border-left:0;padding:1.6rem 0}
  .autoridade li:nth-child(n+2){border-top:1px solid var(--border)}
  .steps{grid-template-columns:1fr}
  .linha{padding:1.8rem 1.4rem}
  .selo-linha{position:static;margin-bottom:1rem;align-self:flex-start}
  .gate-card{padding:2rem 1.35rem}
  .dist-acoes{flex-direction:column}
  .cta-linhas{flex-direction:column;align-items:center;gap:.5rem}
}