/* ============================================================
   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"]  = Distribuidor (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 (Distribuidor) ---------- */
: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;
  --dor-glow: rgba(225,29,72,.10);
  --tile-filtro: none;
  --stream-bg:#ffffff;
  --stream-text:#0b0f18;
  --stream-muted:rgba(11,15,24,.62);
  --stream-border:rgba(11,15,24,.10);
  --stream-sign-bg:rgba(255,255,255,.74);
  --stream-sign-text:rgba(11,15,24,.55);

  /* 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;
  --dor-glow: rgba(244,63,94,.16);
  --tile-filtro: brightness(.78) saturate(.85) contrast(1.05);
  --stream-bg:#050609;
  --stream-text:#ffffff;
  --stream-muted:rgba(255,255,255,.67);
  --stream-border:rgba(255,255,255,.08);
  --stream-sign-bg:rgba(5,6,9,.48);
  --stream-sign-text:rgba(255,255,255,.58);

  --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%);
}

/* Distribuidor: 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:1140px;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:.8rem}
#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-btn{
  position:relative;display:flex;align-items:center;gap:.45rem;
  padding:.5rem .85rem;border-radius:100px;
  font-size:.85rem;font-weight:600;color:var(--text-2);
  transition:color .25s, background .25s;white-space:nowrap;
}
.pill-btn .ico{width:1.05em;height:1.05em}
/* O destaque é o fundo do próprio botão, não uma peça deslizante separada:
   os dois rótulos têm larguras diferentes ("Sou Distribuidor" x "Sou
   Técnico"), e cada persona é um HTML próprio — clicar recarrega a página,
   então nada chegaria a deslizar. Assim o realce acompanha o botão sempre. */
.pill-btn.is-on{
  color:var(--acc-ink);
  background:var(--grad-cta);
  box-shadow:0 4px 16px -6px var(--acc-glow);
}

.nav{display:flex;align-items:center;gap:1rem}
.nav a{font-size:.82rem;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}

/* ================= 4b. PÁGINA DE ESCOLHA (index.html) =================
   A porta de entrada do site: uma tela só, dois caminhos. Não carrega
   app.js — é HTML estático sobre o mesmo shader e os mesmos tokens.
   O card do distribuidor puxa o fim quente da rampa da marca; o do
   técnico, o começo frio. Mesma rampa, dois lados.                    */
.body-escolha{min-height:100dvh}
.escolha{
  position:relative;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:3rem 0;overflow:hidden;
}
.escolha-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.escolha-shader{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  background:var(--grad);opacity:.72;
}
.escolha-grid{
  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 90% 70% at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 20%,transparent 78%);
}
/* Escurece o centro pro texto e pros cards terem contraste sobre o shader */
.escolha-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%,rgba(5,6,9,.88) 0%,rgba(5,6,9,.62) 55%,transparent 100%),
    linear-gradient(180deg,rgba(5,6,9,.72) 0%,transparent 26%,transparent 70%,rgba(5,6,9,.82) 100%);
}
.escolha-in{
  position:relative;z-index:1;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:1.5rem;
}

.escolha-hd{text-align:center;margin-bottom:2.8rem}
.escolha-wm{--wm-h:30px;margin-inline:auto;margin-bottom:2rem}
.escolha-eyebrow{
  display:inline-block;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:1rem;
}
/* 13ch faz a Michroma quebrar em "Por onde você / entra na Vibe?" —
   duas linhas de peso parecido, em vez de deixar "Vibe?" sozinha. */
.escolha-h1{max-width:13ch;margin-inline:auto}
.escolha-sub{margin-top:1rem;color:var(--text-2);font-size:1.02rem}

.escolha-portas{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}

.porta{
  --porta-cor:var(--acc);
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;
  padding:2rem 1.85rem 1.85rem;
  border:1px solid var(--border-2);border-radius:var(--r-xl);
  background:color-mix(in srgb,#050609 62%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.85);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .35s var(--ease);
}
@supports not (background:color-mix(in srgb,#000 50%,transparent)){
  .porta{background:rgba(5,6,9,.62)}
}
/* Filete da marca no topo do card, na cor daquele lado */
.porta::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:linear-gradient(90deg,transparent,var(--porta-cor),transparent);
  opacity:.85;
}
.porta-dist{--porta-cor:#8330a8}
.porta-tec{--porta-cor:#59a6e7}
.porta:hover,.porta:focus-visible{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--porta-cor) 60%,transparent);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.9),0 0 0 1px color-mix(in srgb,var(--porta-cor) 28%,transparent);
}

.porta-ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:16px;
  margin-bottom:1.3rem;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--porta-cor) 85%,#000) 0%,var(--porta-cor) 100%);
  box-shadow:0 12px 30px -14px var(--porta-cor);
}
.porta-ico .ico{width:1.5em;height:1.5em}
.porta-tit{font-family:var(--ff-tit);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1.15}
.porta-txt{margin-top:.6rem;color:var(--text-2);font-size:1rem}
.porta-lista{margin-top:1.35rem;display:grid;gap:.55rem;flex:1}
.porta-lista li{
  position:relative;padding-left:1.15rem;
  font-size:.88rem;color:var(--muted);line-height:1.5;
}
.porta-lista li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--porta-cor);
}
.porta-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:1.9rem;padding:.85rem 1.4rem;border-radius:100px;
  font-size:.92rem;font-weight:600;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--porta-cor) 82%,#0b0f18) 0%,var(--porta-cor) 100%);
  transition:gap .25s var(--ease);
}
.porta:hover .porta-cta{gap:.8rem}
.porta-cta .ico{width:1.05em;height:1.05em}

.escolha-pe{margin-top:2.6rem;text-align:center;color:var(--muted)}
.escolha-pe-barras{width:34px;height:21px;margin-inline:auto;margin-bottom:1rem;opacity:.6}
.escolha-pe p{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;font-size:.88rem}
.escolha-pe a{display:inline-flex;align-items:center;gap:.4rem;color:var(--text-2);transition:color .2s}
.escolha-pe a:hover{color:var(--text)}
.escolha-pe .ico{width:1.05em;height:1.05em}
.escolha-pe small{display:block;margin-top:.7rem;font-size:.76rem}

/* Entrada em cascata — desligada em prefers-reduced-motion */
@media (prefers-reduced-motion:no-preference){
  .escolha-hd,.porta,.escolha-pe{animation:escolha-sobe .7s var(--ease) both}
  .porta-dist{animation-delay:.1s}
  .porta-tec{animation-delay:.18s}
  .escolha-pe{animation-delay:.28s}
}
@keyframes escolha-sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (max-width:820px){
  .escolha{padding:2.5rem 0;align-items:flex-start}
  .escolha-hd{margin-bottom:2rem}
  .escolha-wm{--wm-h:26px;margin-bottom:1.5rem}
  .escolha-portas{grid-template-columns:1fr;gap:1rem}
  .porta{padding:1.6rem 1.4rem 1.5rem}
  .porta-lista{margin-top:1.1rem}
  .porta-cta{margin-top:1.5rem}
}

/* ================= 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;
}
.hero-art-tecnico .art-mascote-wrap::after{
  -webkit-mask-image:url("../img/tecnico-hero-bancada.webp");
  mask-image:url("../img/tecnico-hero-bancada.webp");
}
/* Foto de bancada tem o peso visual mais espalhado que a mascote sozinha —
   os cards abrem mais pra fora e o f2 sobe pro canto vazio em vez de
   cair em cima do rosto da mascote. */
.hero-art-tecnico .art-f1{top:-2%;left:-9%}
.hero-art-tecnico .art-f2{top:4%;bottom:auto;right:-11%}
.hero-art-tecnico .art-f3{bottom:4%;left:-11%}
@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 Distribuidor (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}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Seção de marca — texto de um lado, mídia do outro. Distribuidor mostra o
   vídeo "Importação direta"; Técnico (Vibe Academy, .brand-stream-pc) mostra
   o mockup de PC com a plataforma. */
.brand-stream{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--stream-bg);color:var(--stream-text);border-block:1px solid var(--stream-border);
}
.brand-stream::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 62% at 74% 48%,rgba(91,128,217,.18),transparent 70%),
    radial-gradient(32% 50% at 86% 72%,rgba(131,48,168,.13),transparent 72%);
}
.brand-stream-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:center;padding-block:5.5rem}
.brand-stream-pc .brand-stream-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.brand-stream-content{display:flex;flex-direction:column;align-items:flex-start}
.brand-stream-content .kicker{color:var(--acc)}
.brand-stream-content .h2{max-width:18ch;margin:.85rem 0 1.1rem;color:var(--stream-text);text-wrap:balance}
.brand-stream-content>p{max-width:46ch;color:var(--stream-muted);font-size:clamp(.95rem,1.5vw,1.08rem)}
.brand-stream-content>p+p{margin-top:.6rem}
.brand-stream-cta{margin-top:1.8rem}
.brand-stream-signature{display:flex;align-items:center;gap:.8rem;margin-top:2rem;padding:.7rem 1rem;border:1px solid var(--stream-border);border-radius:100px;background:var(--stream-sign-bg);backdrop-filter:blur(10px)}
.brand-stream-signature svg{width:2rem;height:1.2rem}
.brand-stream-signature span{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--stream-sign-text)}
.brand-stream-media{justify-self:center;width:min(21rem,100%)}
.brand-stream-pc .brand-stream-media{width:100%}
@media (max-width:900px){
  .brand-stream-in,.brand-stream-pc .brand-stream-in{grid-template-columns:1fr;gap:3rem;padding-block:4.5rem}
  .brand-stream-content{align-items:center;text-align:center}
  .brand-stream-content .h2{margin-inline:auto}
  .brand-stream-media{width:min(19rem,100%)}
  .brand-stream-pc .brand-stream-media{width:min(38rem,100%)}
}

/* Brilho da marca atrás de vídeo/mockup — o ::before sai da moldura, então
   fica no wrapper (a moldura do vídeo corta o que passa da borda). */
.midia-glow{position:relative;isolation:isolate}
.midia-glow::before{
  content:"";position:absolute;inset:6% -12%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--acc-glow),transparent 66%);filter:blur(36px);opacity:.85;
}

/* Vídeo vertical (reels do @vibecell.oficial) — começa mudo e só toca com a
   moldura na tela; ver ligarVideos() no app.js. .pausado mostra o play;
   .com-som troca o ícone do botão de som. */
.video-vertical{
  position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--r-xl);background:#050609;border:1px solid var(--border-2);box-shadow:var(--shadow);
}
.video-vertical video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.video-play{
  position:absolute;left:50%;top:50%;width:4.25rem;height:4.25rem;margin:-2.125rem 0 0 -2.125rem;
  display:grid;place-items:center;border-radius:50%;color:#fff;
  background:rgba(5,6,9,.5);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);
  opacity:0;transform:scale(.85);pointer-events:none;transition:opacity .25s,transform .3s var(--ease),background .2s;
}
.video-play:hover{background:rgba(5,6,9,.72)}
.video-vertical.pausado .video-play,.video-play:focus-visible{opacity:1;transform:none;pointer-events:auto}
.video-play .ico{width:1.45rem;height:1.45rem;fill:currentColor;stroke:none}
.video-play .ico-play{margin-left:.2rem}
.video-play .ico-pausa,.video-vertical:not(.pausado) .video-play .ico-play{display:none}
.video-vertical:not(.pausado) .video-play .ico-pausa{display:block}
.video-som{
  position:absolute;right:.85rem;bottom:.85rem;display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .85rem .5rem .7rem;border-radius:100px;color:#fff;font-size:.78rem;font-weight:600;line-height:1;
  background:rgba(5,6,9,.58);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);transition:background .2s;
}
.video-som:hover{background:rgba(5,6,9,.8)}
.video-som .ico{width:1.05rem;height:1.05rem}
.video-som .ico-som,.video-vertical.com-som .video-som .ico-mudo{display:none}
.video-vertical.com-som .video-som .ico-som{display:block}

/* Mockup de PC da Vibe Academy — monitor desenhado em CSS com a plataforma
   na tela. .pc-mock é o container: tudo dentro mede em cqw, então o conjunto
   escala como uma imagem. Decorativo (aria-hidden no HTML). */
.pc-mock{container-type:inline-size;width:100%}
.pc-monitor{
  position:relative;padding:1.7cqw;border-radius:2.2cqw;
  background:linear-gradient(160deg,#272c38 0%,#0d1016 52%,#181c25 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 7cqw 12cqw -5cqw rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);
}
.pc-monitor::before{content:"";position:absolute;top:.55cqw;left:50%;width:.6cqw;height:.6cqw;margin-left:-.3cqw;border-radius:50%;background:#353b49}
.pc-tela{
  display:flex;flex-direction:column;aspect-ratio:16/9;overflow:hidden;border-radius:.9cqw;
  background:radial-gradient(60% 70% at 85% 0%,rgba(91,128,217,.16),transparent 70%),#07080c;
  color:#fff;font-family:var(--ff-txt);letter-spacing:0;line-height:1.25;
}
.pc-pescoco{width:12cqw;height:6.5cqw;margin:0 auto;background:linear-gradient(90deg,#0c0f15,#2a303c 50%,#0c0f15);clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}
.pc-base{width:32cqw;height:1.5cqw;margin:0 auto;border-radius:1cqw 1cqw .4cqw .4cqw;background:linear-gradient(180deg,#303643,#11141b);box-shadow:0 2.6cqw 4cqw -1.4cqw rgba(0,0,0,.85)}

.pc-ui-topo{display:flex;align-items:center;gap:1.8cqw;height:7cqw;padding:0 2.8cqw;border-bottom:1px solid rgba(255,255,255,.07);flex:none}
.pc-ui-logo{width:9.6cqw;height:2cqw;color:#fff}
.pc-ui-marca{padding-left:1.8cqw;border-left:1px solid rgba(255,255,255,.18);font-family:var(--ff-tit);font-size:1.25cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--c-ciano)}
.pc-ui-nav{display:flex;gap:2.4cqw;margin-left:auto;font-size:1.35cqw;color:rgba(255,255,255,.5)}
.pc-ui-nav b{font-weight:600;color:#fff}
.pc-ui-avatar{width:3.2cqw;height:3.2cqw;border-radius:50%;background:var(--grad)}
.pc-ui-corpo{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 26cqw;gap:2.4cqw;padding:2.6cqw 2.8cqw}
.pc-ui-player{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:1.1cqw;background:#111}
.pc-ui-player img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.pc-ui-player::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,9,.1) 40%,rgba(5,6,9,.78))}
.pc-ui-play{position:absolute;left:50%;top:46%;z-index:1;width:6.4cqw;height:6.4cqw;margin:-3.2cqw 0 0 -3.2cqw;display:grid;place-items:center;border-radius:50%;background:var(--grad-cta);box-shadow:0 0 4cqw rgba(91,128,217,.65)}
.pc-ui-play svg{width:2.4cqw;height:2.4cqw;margin-left:.3cqw;fill:var(--acc-ink)}
.pc-ui-progresso{position:absolute;left:2.2cqw;right:2.2cqw;bottom:2cqw;z-index:1}
.pc-ui-barra{display:block;height:.55cqw;border-radius:1cqw;background:rgba(255,255,255,.22);overflow:hidden}
.pc-ui-barra span{display:block;width:38%;height:100%;background:var(--grad)}
.pc-ui-aula{margin-top:1.8cqw}
.pc-ui-aula b{display:block;font-family:var(--ff-tit);font-size:1.7cqw;font-weight:400;letter-spacing:-.02em}
.pc-ui-aula small{display:block;margin-top:.7cqw;font-size:1.3cqw;color:rgba(255,255,255,.5)}
.pc-ui-lateral{display:flex;flex-direction:column;gap:1.3cqw;min-height:0}
.pc-ui-rot{font-size:1.1cqw;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.pc-ui-mod{display:block;padding:1.5cqw 1.6cqw;border-radius:1cqw;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.pc-ui-mod b{display:flex;align-items:center;gap:1cqw;font-size:1.45cqw;font-weight:600}
.pc-ui-mod b::before{content:"";width:1cqw;height:1cqw;border-radius:50%;background:rgba(255,255,255,.25)}
.pc-ui-mod i{display:block;height:.45cqw;margin-top:1.1cqw;border-radius:1cqw;background:rgba(255,255,255,.1);overflow:hidden}
.pc-ui-mod i::before{content:"";display:block;width:var(--p,0%);height:100%;background:var(--grad)}
.pc-ui-mod.is-on{border-color:rgba(111,182,239,.45);background:rgba(91,128,217,.12)}
.pc-ui-mod.is-on b::before{background:var(--c-ciano);box-shadow:0 0 1.2cqw var(--c-ciano)}
.pc-ui-prox{display:flex;align-items:center;gap:1.2cqw;margin-top:auto;padding:1.1cqw;border-radius:1cqw;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.pc-ui-prox img{flex:none;width:7.2cqw;aspect-ratio:1;border-radius:.7cqw;object-fit:cover;display:block}
.pc-ui-prox small{display:block;font-size:1.05cqw;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.pc-ui-prox b{display:block;margin-top:.4cqw;font-size:1.35cqw;font-weight:600}

/* Dores — "cascata de consequências": nada de quatro cards iguais.
   A gravidade cresce a cada item (friso mais grosso, barra de peso maior),
   setas encadeiam um problema no próximo e o último — o desfecho — ganha
   destaque, ecoando o texto: pequenas inconsistências viram grandes custos. */
.dores-cascata{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;position:relative}
.dor{
  --tiltx:0deg;--tilty:0deg;--lift:0px;
  position:relative;padding:1.7rem 1.6rem 1.6rem;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);border-left:2px solid var(--dor-borda);
  overflow:hidden;isolation:isolate;
  transform:translateY(var(--lift)) perspective(700px) rotateX(var(--tilty)) rotateY(var(--tiltx));
  transition:background .3s,border-color .35s,transform .25s var(--ease),box-shadow .35s;
  will-change:transform;
}
.dor:nth-child(2){border-left-width:4px}
.dor:nth-child(3){border-left-width:6px}
.dor:nth-child(4){border-left-width:8px}
.dor:hover{--lift:-4px;background:var(--surface-2);box-shadow:var(--shadow-sm)}

/* brilho que segue o ponteiro — mesma técnica do .card, tom de alerta */
.dor::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),var(--dor-glow),transparent 62%);
  transition:opacity .4s var(--ease);
}
.dor:hover::after{opacity:1}

.dor-idx{display:block;font-family:var(--ff-tit);font-weight:800;font-size:.76rem;letter-spacing:.08em;color:var(--muted);margin-bottom:.85rem}
.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)}

/* barra de "peso" — cresce a cada consequência; só anima quando a fileira
   inteira entra na tela (.in-view, ligado por ligarCascataDores em app.js) */
.dor-peso{display:block;margin-top:1.3rem;height:4px;border-radius:100px;background:var(--surface-2);overflow:hidden}
.dor-peso-fill{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--c-ciano),var(--dor-borda));transition:width 1s cubic-bezier(.22,.7,.2,1)}
.dores-cascata.in-view .dor-peso-fill{width:var(--sev)}
.dor:nth-child(2) .dor-peso-fill{transition-delay:.12s}
.dor:nth-child(3) .dor-peso-fill{transition-delay:.24s}
.dor:nth-child(4) .dor-peso-fill{transition-delay:.36s}

/* seta conectora — só faz sentido alinhada, na fileira única do desktop */
.dor-seta{display:none}

/* último item: o desfecho — mesma linguagem do "step-last" da seção Como
   Funciona, só que em tom de alerta em vez de conclusão */
.dor-critico{background:var(--dor-glow);border-color:var(--dor-borda)}
.dor-critico:hover{background:var(--dor-glow)}
.dor-critico h3{color:var(--dor-borda)}
.dor-critico::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1.5px solid var(--dor-borda);opacity:.55;
  animation:dorPulso 2.6s ease-out .6s infinite;
}
@keyframes dorPulso{to{opacity:0;scale:1.045}}

@media (min-width:1025px){
  .dor-seta{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:50%;right:-1.3rem;translate:0 -50%;z-index:2;
    width:1.5rem;height:1.5rem;border-radius:50%;
    background:var(--bg);border:1px solid var(--border-2);color:var(--text-2);
    box-shadow:var(--shadow-sm);
    opacity:0;scale:.4;
    transition:opacity .4s var(--ease),scale .4s cubic-bezier(.3,1.6,.4,1),border-color .3s,color .3s;
  }
  .dor-seta .ico{width:.8em;height:.8em}
  .dor:hover .dor-seta{border-color:var(--dor-borda);color:var(--dor-borda)}
  .dores-cascata.in-view .dor:nth-child(1) .dor-seta{opacity:1;scale:1;transition-delay:.2s}
  .dores-cascata.in-view .dor:nth-child(2) .dor-seta{opacity:1;scale:1;transition-delay:.32s}
  .dores-cascata.in-view .dor:nth-child(3) .dor-seta{opacity:1;scale:1;transition-delay:.44s}
}
@media (pointer:coarse){
  .dor{transform:translateY(var(--lift))}
}

/* ================= BENTO DE 4 (1 card grande + 3 menores) ================= */
.cards-bento-4{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media (min-width:640px){.cards-bento-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){
  .cards-bento-4{grid-template-columns:repeat(3,1fr);grid-auto-rows:11.5rem}
  .cards-bento-4 .card{min-height:0}
  /* 1 vertical + 2 empilhados no meio + 1 vertical */
  .cards-bento-4 .card:nth-child(1){grid-column:1/2;grid-row:1/3;justify-content:center;padding:1.9rem}
  .cards-bento-4 .card:nth-child(2){grid-column:2/3;grid-row:1/2}
  .cards-bento-4 .card:nth-child(3){grid-column:2/3;grid-row:2/3}
  .cards-bento-4 .card:nth-child(4){grid-column:3/4;grid-row:1/3;justify-content:center;padding:1.9rem}
  .cards-bento-4 .card:nth-child(1) .mock,
  .cards-bento-4 .card:nth-child(4) .mock{flex:0 0 7.5rem;height:7.5rem;margin-bottom:1.1rem}
  .cards-bento-4 .card:nth-child(1) h3,
  .cards-bento-4 .card:nth-child(4) h3{font-size:1.25rem}
}

/* ================= PAINEL "POR QUE COMPRAR" (lista + foto que troca) ================= */
.feature-tabs{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media (min-width:860px){.feature-tabs{grid-template-columns:1fr 1fr}}

.feature-list{display:grid;gap:.4rem;counter-reset:feature}
.feature-tab{
  position:relative;display:flex;align-items:flex-start;gap:1rem;
  width:100%;text-align:left;padding:1.05rem 1.2rem;border-radius:var(--r-lg);
  border:1px solid transparent;overflow:hidden;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.feature-tab:hover{background:var(--surface)}
.feature-tab.is-on{background:var(--acc-soft);border-color:var(--acc-glow)}
.feature-tab-idx{
  flex:none;width:1.7rem;padding-top:.1rem;
  font-family:var(--ff-tit);font-weight:800;font-size:.82rem;color:var(--muted);
  transition:color .3s;
}
.feature-tab.is-on .feature-tab-idx{color:var(--acc)}
.feature-tab-body{min-width:0}
.feature-tab-body strong{
  display:block;font-family:var(--ff-tit);font-weight:700;font-size:1.02rem;
  letter-spacing:-.015em;color:var(--text);
}
.feature-tab-desc{
  display:block;font-size:.87rem;line-height:1.5;color:var(--text-2);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s var(--ease),opacity .3s var(--ease),margin-top .4s var(--ease);
}
.feature-tab.is-on .feature-tab-desc{max-height:6rem;opacity:1;margin-top:.4rem}
.feature-tab-bar{
  position:absolute;left:1.2rem;right:1.2rem;bottom:0;height:2px;
  background:var(--border-2);border-radius:2px;overflow:hidden;
}
.feature-tab-bar::after{
  content:"";display:block;height:100%;width:0;background:var(--grad);
}
.feature-tab-bar.anda::after{width:100%;transition:width 4.7s linear}
@media (prefers-reduced-motion:reduce){.feature-tab-bar.anda::after{transition:none;width:100%}}

.feature-preview{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border-2);box-shadow:var(--shadow);background:var(--panel);
}
.feature-preview-img{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.feature-preview-img.is-on{opacity:1}
.feature-preview-img img{width:100%;height:100%;object-fit:cover;display:block}
.feature-preview::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

@media (max-width:620px){
  .feature-preview{aspect-ratio:4/3}
  .feature-tab{padding:.9rem 1rem}
}

/* 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-profiles{width:8rem;height:4.8rem;flex:0 0 4.8rem;display:block;margin:.05rem auto .55rem;overflow:visible}
.mock-vibe-box{
  position:absolute;z-index:3;left:50%;top:.05rem;translate:-50% 0;
  width:2.65rem;height:1.75rem;display:grid;place-items:center;padding:.38rem .52rem;
  border-radius:.38rem;background:var(--panel);border:1px solid var(--border-2);
  box-shadow:0 8px 18px -12px var(--acc);animation:profileBox 3.8s var(--ease) infinite;
}
.mock-vibe-box::before{content:"";position:absolute;left:.28rem;right:.28rem;top:-.2rem;height:.3rem;border:1px solid var(--border-2);border-bottom:0;border-radius:.25rem .25rem 0 0;background:var(--panel)}
.mock-vibe-box svg{width:1.35rem;height:.8rem}
.mock-branch{position:absolute;z-index:1;left:50%;top:1.7rem;width:5.1rem;height:1.65rem;translate:-50% 0}
.mock-branch i{position:absolute;display:block;background:var(--border-2);overflow:hidden}
.mock-branch i::after{content:"";position:absolute;inset:0;background:var(--grad);transform-origin:top left;animation:profileFlow 3.8s ease-in-out infinite}
.mock-branch i:nth-child(1){left:50%;top:0;width:1px;height:.62rem}
.mock-branch i:nth-child(2){left:1.05rem;right:50%;top:.61rem;height:1px}
.mock-branch i:nth-child(3){left:50%;right:1.05rem;top:.61rem;height:1px}
.mock-branch i:nth-child(4){left:1.05rem;top:.61rem;width:1px;height:.78rem}
.mock-branch i:nth-child(5){right:1.05rem;top:.61rem;width:1px;height:.78rem}
.mock-branch i:nth-child(2)::after{transform-origin:right center}
.mock-branch i:nth-child(3)::after{transform-origin:left center}
.mock-branch i:nth-child(4)::after,.mock-branch i:nth-child(5)::after{animation-delay:.12s}
.mock-user{
  position:absolute;z-index:2;bottom:.05rem;width:1.75rem;height:1.75rem;border-radius:50%;
  display:grid;place-items:center;background:var(--panel);border:1px solid var(--border-2);
  box-shadow:0 7px 17px -13px var(--acc);animation:profileUser 3.8s cubic-bezier(.3,1.5,.4,1) infinite;
}
.mock-user-a{left:.65rem}.mock-user-b{right:.65rem;animation-delay:.14s}
.mock-user i{position:relative;width:.7rem;height:.72rem}
.mock-user i::before{content:"";position:absolute;left:50%;top:0;translate:-50% 0;width:.34rem;height:.34rem;border-radius:50%;background:var(--acc)}
.mock-user i::after{content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;width:.7rem;height:.35rem;border-radius:.5rem .5rem .2rem .2rem;background:var(--acc)}
@keyframes profileBox{0%,18%,100%{transform:translateY(0);border-color:var(--border-2)}35%,72%{transform:translateY(-2px);border-color:var(--acc-glow);box-shadow:0 10px 22px -10px var(--acc)}}
@keyframes profileFlow{0%,20%{transform:scale(0)}42%,76%{transform:scale(1)}94%,100%{transform:scale(0)}}
@keyframes profileUser{0%,35%,100%{scale:.86;opacity:.48}52%,82%{scale:1;opacity:1;border-color:var(--acc-glow)}}

.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-mapa-brasil{width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.mock-mapa-brasil img{width:6.5rem;height:auto;max-height:100%;opacity:.92}

.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)}

/* ================= TELA CHINA X LINHA VIBE (split de duas colunas) ================= */
.split-china{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:.5rem}
@media (min-width:760px){.split-china{grid-template-columns:1fr 1.15fr}}
.split-col{padding:2rem 1.75rem;border-radius:var(--r-xl);border:1px solid var(--border);background:var(--panel);text-align:center;transition:transform .3s var(--ease),box-shadow .3s}
.split-col:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.split-col h3{font-family:var(--ff-tit);font-size:1.3rem;font-weight:800;margin-bottom:.6rem;letter-spacing:-.02em}
.split-col p{color:var(--text-2);font-size:.95rem;max-width:36em;margin-inline:auto}
.split-col-vibe{position:relative;border-color:transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;box-shadow:var(--shadow)}
.split-foto{width:100%;aspect-ratio:4/3;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);overflow:hidden;margin-bottom:1.4rem}
.split-foto img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.35) contrast(1.02)}
.split-col-vibe .split-foto img{filter:none}
.split-fechamento{text-align:center;color:var(--text-2);margin:1.75rem auto 0;max-width:58ch;font-size:.98rem}

/* ================= LINHAS DE TELA (vídeo + lista) =================
   Vídeo à esquerda ocupando a altura toda; cabeçalho e lista à direita,
   centralizados na altura do vídeo pelas linhas 1fr das pontas. No celular
   vira cabeçalho → vídeo → lista. A barrinha de cada item (--nivel, de 0 a
   1) sobe da opção de entrada até a de topo. */
.linhas-video-in{
  display:grid;column-gap:clamp(2.5rem,6vw,5.5rem);
  grid-template-columns:minmax(0,20rem) minmax(0,1fr);
  grid-template-rows:1fr auto auto 1fr;
  grid-template-areas:"media ." "media hd" "media lista" "media .";
}
.linhas-video-hd{grid-area:hd}
.linhas-video-hd .h2{margin-bottom:.7rem;text-wrap:balance}
.linhas-video-hd .sub{margin-inline:0}
.linhas-video-media{grid-area:media;align-self:center}
.linhas-lista{grid-area:lista;display:grid;gap:.75rem;margin-top:1.8rem}
.linhas-item{
  padding:1rem 1.25rem;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--border);
  transition:border-color .25s,transform .25s var(--ease),box-shadow .25s;
}
.linhas-item:hover{border-color:var(--acc-glow);transform:translateX(4px);box-shadow:var(--shadow-sm)}
.linhas-item-topo{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.linhas-item h3{font-family:var(--ff-tit);font-size:.98rem;font-weight:800;letter-spacing:-.02em}
.linhas-item p{margin-top:.3rem;font-size:.9rem;line-height:1.5;color:var(--text-2)}
.linhas-item-nivel{flex:none;width:4.5rem;height:.35rem;border-radius:100px;background:var(--surface-2);overflow:hidden}
/* background-size estica o degradê pro trilho inteiro: a barra curta mostra
   só o começo da rampa (ciano) e a cheia chega ao violeta */
.linhas-item-nivel::before{content:"";display:block;width:calc(var(--nivel) * 100%);height:100%;border-radius:inherit;background:var(--grad);background-size:calc(100% / var(--nivel)) 100%}
@media (max-width:900px){
  .linhas-video-in{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"hd" "media" "lista";row-gap:2.2rem}
  .linhas-video-hd{text-align:center}
  .linhas-video-hd .sub{margin-inline:auto}
  .linhas-video-media{justify-self:center;width:min(19rem,100%)}
  .linhas-lista{margin-top:0}
}

/* ================= 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}

.garantia-inline{
  display:flex;gap:1rem;align-items:flex-start;
  margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--border);
}
.garantia-inline-ico{
  flex:none;width:2.75rem;height:2.75rem;border-radius:.9rem;display:grid;place-items:center;
  background:var(--acc-soft);border:1px solid var(--acc-glow);color:var(--acc);
}
.garantia-inline-ico .ico{width:1.4em;height:1.4em}
.garantia-inline-body h3{font-family:var(--ff-tit);font-size:1.05rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.4rem}
.garantia-inline-body p{font-size:.88rem;color:var(--text-2);line-height:1.5;margin-bottom:.9rem}
.garantia-inline-body .btn .ico{width:1.05em;height:1.05em}
.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)}}

/* "Por que trocar" do Técnico — coluna de texto + vídeo vertical, sem card e
   sem ícone (troca a antiga grade de benefícios só nessa persona). */
.solucao-midia-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem;align-items:center}
.solucao-midia-copy{max-width:34rem}
.solucao-midia-copy .h2{margin-bottom:1.1rem}
.solucao-midia-copy .sub{margin-inline:0;max-width:none}
.solucao-midia-copy .sub + .sub{margin-top:1rem}
.solucao-video{justify-self:center;width:min(21rem,100%)}
@media (max-width:1024px){
  .solucao-midia-in{grid-template-columns:1fr;gap:2.5rem}
  .solucao-midia-copy{max-width:none}
  .solucao-video{width:min(19rem,100%)}
}

/* ================= 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)}

/* ================= FEEDBACKS EM VÍDEO (reels) =================
   Cada card é uma capa 9:16 local + o resumo do que a pessoa diz. O
   player do Instagram só entra no lightbox, depois do clique.       */
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1.1rem}
.reel{
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.reel:hover{transform:translateY(-4px);border-color:var(--border-2);box-shadow:var(--shadow)}

.reel-capa{
  position:relative;display:block;width:100%;aspect-ratio:9/13;
  overflow:hidden;background:var(--bg-3);
}
.reel-capa img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transition:transform .5s var(--ease);
}
.reel:hover .reel-capa img{transform:scale(1.04)}
.reel-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,9,.05) 0%,rgba(5,6,9,.08) 55%,rgba(5,6,9,.62) 100%);
}
.reel-play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  color:#fff;background:rgba(5,6,9,.42);
  border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 12px 34px -12px rgba(0,0,0,.8);
  transition:transform .3s var(--ease),background .25s;
}
.reel-play .ico{width:1.3em;height:1.3em;fill:currentColor;stroke:none;margin-left:3px}
.reel-capa:hover .reel-play{transform:translate(-50%,-50%) scale(1.09);background:rgba(5,6,9,.62)}

.reel-corpo{display:flex;flex-direction:column;gap:1rem;padding:1.4rem;flex:1}
.reel-txt{font-size:.92rem;color:var(--text-2);flex:1;line-height:1.55}
.reel-pe{display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--border);padding-top:.95rem}
.reel-av{
  width:36px;height:36px;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:.88rem;
}
.reel-nome{font-size:.9rem;font-weight:600;line-height:1.3;display:block}
.reel-local{font-size:.78rem;color:var(--muted);line-height:1.3}
.reels-pe{margin-top:2rem;text-align:center}

/* Lightbox: retrato do reel no centro, sem a moldura branca do .modal-card */
.modal-reel-card{
  position:relative;z-index:1;
  width:min(430px,100%);max-height:calc(100dvh - 5rem);
  display:flex;flex-direction:column;gap:.75rem;
  animation:popIn .35s var(--ease);
}
/* 200:317 é a proporção que o embed do Instagram assume de verdade
   (cabeçalho + mídia + barra de ações). O reel 9:16 ainda entra com
   tarja lateral — isso é do player deles, não dá pra tirar sem cortar
   o cabeçalho junto. */
.modal-reel-palco{
  border-radius:var(--r-lg);overflow:hidden;background:#000;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85);
  aspect-ratio:200/317;
}
.modal-reel-palco iframe{width:100%;height:100%;border:0;display:block}
.modal-reel .modal-x{
  top:-2.6rem;right:0;color:#fff;background:rgba(255,255,255,.12);
}
.modal-reel .modal-x:hover{background:rgba(255,255,255,.24);color:#fff}
.modal-reel-link{
  align-self:center;font-size:.85rem;font-weight:600;color:#fff;opacity:.8;
  text-decoration:underline;text-underline-offset:3px;transition:opacity .2s;
}
.modal-reel-link:hover{opacity:1}

@media (max-width:520px){
  .modal-reel-card{width:100%;padding-top:2.4rem}
  .modal-reel .modal-x{top:0}
}

/* ================= 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-simples{background:radial-gradient(120% 140% at 50% -10%,var(--acc-soft),var(--bg-3) 65%)}
.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)}

/* Vibecast — thumb estática grande, sem player embedado */
.vibecast-card{
  display:block;position:relative;max-width:860px;margin-inline:auto;
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow);text-decoration:none;color:inherit;
}
.vibecast-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3)}
.vibecast-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.vibecast-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,7,10,.78),rgba(5,7,10,0) 58%)}
.vibecast-card:hover .vibecast-thumb img,
.vibecast-card:focus-visible .vibecast-thumb img{transform:scale(1.045)}
.vibecast-play{
  position:absolute;inset:0;margin:auto;width:4.5rem;height:4.5rem;z-index:2;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(6px);transition:transform .3s var(--ease),background .3s;
}
.vibecast-card:hover .vibecast-play,
.vibecast-card:focus-visible .vibecast-play{transform:scale(1.08);background:rgba(255,255,255,.28)}
.vibecast-play .ico{width:1.9rem;height:1.9rem;color:#fff;fill:#fff;stroke:none;margin-left:.2rem}
.vibecast-info{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.7rem 1.9rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
}
.vibecast-tag{display:block;font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.vibecast-titulo{font-family:var(--ff-tit);font-size:1.4rem;font-weight:800;letter-spacing:-.02em;color:#fff;margin-top:.4rem;max-width:30rem}
.vibecast-cta{flex:none;pointer-events:none}
@media (max-width:640px){
  /* Tela curta demais (16/9 a 375px = ~211px) pra caber tag+título+botão
     flutuando sobre a imagem sem colidir com o play centralizado — vira um
     rodapé normal abaixo da thumb. */
  .vibecast-thumb::after{display:none}
  .vibecast-play{width:3.6rem;height:3.6rem}
  .vibecast-info{
    position:static;flex-direction:column;align-items:flex-start;gap:.9rem;
    padding:1.2rem 1.1rem;background:var(--panel);
  }
  .vibecast-tag{color:var(--muted)}
  .vibecast-titulo{font-size:1.15rem;color:var(--text)}
  .vibecast-cta{width:100%;justify-content:center}
}

/* Vitrine "Conheça o nosso canal" (técnico) — 4 episódios lado a lado,
   thumb estática + nome do convidado; vira carrossel de rolagem no mobile. */
.vibecast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.vibecast-ep{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.vibecast-ep-thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-lg);
  background:var(--bg-3);border:1px solid var(--border);
}
.vibecast-ep-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.vibecast-ep:hover .vibecast-ep-thumb img,
.vibecast-ep:focus-visible .vibecast-ep-thumb img{transform:scale(1.06)}
.vibecast-ep-play{
  position:absolute;inset:0;margin:auto;width:2.9rem;height:2.9rem;z-index:2;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(6px);transition:transform .3s var(--ease),background .3s;
}
.vibecast-ep:hover .vibecast-ep-play,
.vibecast-ep:focus-visible .vibecast-ep-play{transform:scale(1.1);background:rgba(255,255,255,.28)}
.vibecast-ep-play .ico{width:1.1rem;height:1.1rem;color:#fff;fill:#fff;stroke:none;margin-left:.12rem}
.vibecast-ep-nome{
  display:block;margin-top:.9rem;font-family:var(--ff-tit);font-weight:800;
  font-size:.95rem;letter-spacing:-.01em;color:var(--text);line-height:1.3;
}
.vibecast-ep-cta{display:flex;align-items:center;gap:.4rem;margin-top:.35rem;font-size:.74rem;font-weight:600;color:var(--acc)}
.vibecast-ep-cta .ico{width:1em;height:1em}
@media (max-width:760px){
  .vibecast-grid{
    display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:-1.5rem;padding:.2rem 1.5rem .6rem;
    scrollbar-width:none;
  }
  .vibecast-grid::-webkit-scrollbar{display:none}
  .vibecast-ep{flex:0 0 68%;scroll-snap-align:start}
}
@media (max-width:480px){
  .vibecast-ep{flex:0 0 80%}
}

/* Formulário "Seja um distribuidor" (persona distribuidor, dentro do #modalDist) */
.campo-faixa{margin-top:1.4rem}
.campo-faixa-lbl{display:block;font-size:.82rem;font-weight:600;color:var(--text-2);margin-bottom:.55rem}
.faixa-grid{display:grid;grid-template-columns:1fr;gap:.6rem;margin-bottom:.4rem}
@media (min-width:480px){.faixa-grid{grid-template-columns:repeat(2,1fr)}}
.faixa-grid button{padding:.85rem 1rem;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.83rem;font-weight:600;text-align:center;transition:.2s}
.faixa-grid button:hover{border-color:var(--acc-glow)}
.faixa-grid button.is-on{background:var(--grad-cta);color:var(--acc-ink);border-color:transparent}
#modalDist .btn-full{margin-top:.5rem}
.form-ok{text-align:center;padding:1rem}
.form-ok .gate-ico{margin-inline:auto}
.form-ok h3{font-family:var(--ff-tit);font-size:1.25rem;font-weight:800;margin-bottom:.6rem}
.form-ok p{color:var(--text-2);font-size:.92rem}

/* Á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%);
}
/* Distribuidor: faixa de largura total na cor da marca */
.cta-final-marca{background:var(--grad)}
.cta-final-marca::before{display:none}
.cta-final-marca .h2{color:#fff;font-size:clamp(2.1rem,4.6vw,3.4rem)}
.cta-final-marca .sub{color:rgba(255,255,255,.85)}
.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}

.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}
}
/* Header em três faixas: completo (≥1240px), compacto (sem ícones na pílula
   e com respiros menores) e, abaixo de 1120px, menu hambúrguer. Logo +
   pílula + 8 links não cabem na cápsula antes disso sem estourar a borda. */
@media (min-width:1120px) and (max-width:1239px){
  .hdr-in,#hdr.scrolled .hdr-in{width:calc(100% - 2rem)}
  .pill-btn .ico{display:none}
  .nav,#hdr.scrolled .nav{gap:.7rem}
  .nav a,#hdr.scrolled .nav a{font-size:.8rem}
  .nav .btn-sm,#hdr.scrolled .nav .btn-sm{padding:.55rem .85rem;font-size:.8rem}
}
@media (max-width:1119px){
  #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}
}
@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%}
  .hero-art-tecnico .art-f1{left:0}
  .hero-art-tecnico .art-f2{top:24%;right:0}
  .hero-art-tecnico .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)}
  .dores-cascata{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)}
  .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)}
  .brand-stream-in,.brand-stream-pc .brand-stream-in{padding-block:4rem}
  .brand-stream-signature span{font-size:.56rem;letter-spacing:.1em}
  .steps{grid-template-columns:1fr}
  .dores-cascata{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}
}