/* ============================================================
   KeyAuth — estilos
   Paleta: roxo #5E14EE · preto #050308 · detalhes em branco
   ============================================================ */

:root{
  --purple:      #5E14EE;
  --purple-lite: #7C3CF7;
  --purple-soft: #9B6BFF;
  --violet-300:  #B79BFF;
  --black:       #050308;
  --black-2:     #0A0612;
  --panel:       #100A1E;
  --panel-2:     #160E29;
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --text:        #F5F2FC;
  --muted:       #A79EBC;
  --wa:          #25D366;

  --font-display: "Poppins", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

/* Integração Lenis: posição real da página, compatível com o palco sticky. */
html.lenis, html.lenis body{ height:auto; }
html.lenis{ scroll-behavior:auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal]{ overscroll-behavior:contain; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; color:var(--violet-300); }

::selection{ background:var(--purple); color:#fff; }

/* grão sutil sobre tudo */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ width:min(100% - 48px, var(--maxw)); margin-inline:auto; }

/* ---------- tipografia ---------- */
.eyebrow{
  display:inline-block; font-family:var(--font-display); font-weight:600;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--violet-300); margin-bottom:18px;
}
.h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem, 4.2vw, 3.1rem); line-height:1.12;
  letter-spacing:-.02em; margin:0 0 22px;
}
.lead{ color:var(--muted); font-size:1.05rem; margin:0 0 18px; max-width:56ch; }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  padding:12px 20px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; fill:currentColor; flex:none; }
.btn--lg{ padding:15px 28px; font-size:1rem; }
.btn--full{ width:100%; }

.btn--wa{
  background:linear-gradient(135deg,#25D366,#12a94f);
  color:#04210f;
  box-shadow:0 10px 30px -12px rgba(37,211,102,.75);
}
.btn--wa:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(37,211,102,.9); }

.btn--ghost{
  background:rgba(255,255,255,.04); color:var(--text); border-color:var(--line-strong);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{ background:rgba(255,255,255,.09); transform:translateY(-2px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(5,3,8,.72);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__inner{
  width:min(100% - 48px, 1280px); margin-inline:auto;
  display:flex; align-items:center; gap:28px; height:74px;
}
.nav__brand img{ height:38px; width:auto; }
.nav__links{ display:flex; gap:6px; margin-left:auto; }
.nav__links a{
  position:relative; padding:9px 14px; border-radius:999px;
  font-size:.92rem; color:var(--muted); font-weight:500;
  transition:color .2s, background .2s;
}
.nav__links a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.nav__links a.is-active{ color:var(--text); }
.nav__links a.is-active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px;
  border-radius:2px; background:linear-gradient(90deg,var(--purple),var(--violet-300));
}
.nav__cta{ flex:none; }

.nav__burger{
  display:none; width:42px; height:42px; border-radius:12px; margin-left:auto;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer;
}
.nav__burger span{ width:18px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s, opacity .3s; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ---------- aviso de novidade no menu ---------- */
.nav__dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--purple-soft); margin-left:7px; vertical-align:middle;
  animation:pulseDot 1.9s var(--ease) infinite;
}
@keyframes pulseDot{
  0%   { box-shadow:0 0 0 0 rgba(155,107,255,.6); }
  70%  { box-shadow:0 0 0 8px rgba(155,107,255,0); }
  100% { box-shadow:0 0 0 0 rgba(155,107,255,0); }
}
.nav__new{ display:inline-flex; align-items:center; }

/* ============================================================
   PÁGINAS SECUNDÁRIAS (parcerias)
   ============================================================ */
.pagehead{
  position:relative; z-index:2; padding:clamp(120px,15vw,170px) 0 clamp(50px,7vw,80px);
  background:
    radial-gradient(70rem 42rem at 80% -20%, rgba(94,20,238,.3), transparent 62%),
    radial-gradient(50rem 34rem at 0% 40%, rgba(124,60,247,.14), transparent 60%),
    var(--black);
  overflow:hidden;
}
/* Mesmo arranjo do início: texto na coluna da esquerda, objeto 3D à
   direita — na mesma posição em que o cartão flutua na página inicial. */
.pagehead__grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,4vw,56px); align-items:center;
}
.pagehead__copy{ max-width:clamp(300px,42vw,560px); }
.pagehead__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.08; letter-spacing:-.025em;
  margin:0 0 26px;
}

/* ---------- símbolo em 3D ----------
   Gira no eixo Y para o lado negativo: a face vira para a esquerda, de
   volta ao texto — o mesmo movimento que o cartão faz no início.        */
.marca3d{
  /* a margem aproxima o símbolo do eixo em que o cartão flutua no início */
  position:relative; justify-self:center; margin-right:clamp(0px,7.5vw,110px);
  width:clamp(150px,20.5vw,272px);
  perspective:1000px; perspective-origin:30% 50%;
  display:grid; place-items:center;
}
.marca3d__img{
  /* A orientação base (rotateY -30°, rotateX 10°, rotateZ 6°) já vem
     embutida no render do modelo 3D. Aqui fica só a oscilação, com os
     mesmos deslocamentos de antes: o movimento e a direção não mudam. */
  position:relative; z-index:1; width:100%; height:auto;
  transform-origin:30% 50%;
  filter:drop-shadow(16px 22px 28px rgba(0,0,0,.75)) drop-shadow(0 0 38px rgba(124,60,247,.55));
  animation:marcaFlutua 7s ease-in-out infinite;
}
@keyframes marcaFlutua{
  0%,100%{ transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateY(0); }
  50%    { transform:rotateY(5deg) rotateX(3deg) rotateZ(-2deg) translateY(-11px); }
}
.marca3d__halo{
  position:absolute; width:150%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(94,20,238,.45), rgba(94,20,238,0) 62%);
  pointer-events:none;
}

/* ---------- logos dos parceiros ---------- */
.sec--partners{
  background:
    radial-gradient(60rem 38rem at 100% 10%, rgba(94,20,238,.12), transparent 60%),
    var(--black-2);
  border-top:1px solid var(--line);
}
.plogos{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  max-width:1000px; margin-inline:auto;
}
.plogo{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:26px; border-radius:22px;
  background:linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--line);
  transition:border-color .3s, transform .3s var(--ease);
}
.plogo:hover{ border-color:rgba(183,155,255,.4); transform:translateY(-4px); }
.plogo__plate{
  width:100%; min-height:132px; border-radius:16px;
  background:#fff; padding:26px 30px;
  display:grid; place-items:center;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
}
.plogo__plate img{ width:100%; max-height:80px; object-fit:contain; }
/* marca deitada (bem mais larga que alta) ganha mais largura, senão fica
   pequena demais ao lado das outras duas */
.plogo__plate--largo{ padding:26px 14px; }
.plogo__name{
  font-family:var(--font-display); font-weight:500; font-size:.95rem; color:var(--muted);
}
/* cada logo é um botão que abre o quadro de baixo: reseta o visual de botão */
.plogo{ font:inherit; color:inherit; text-align:center; cursor:pointer; }
.plogo:focus-visible{ outline:2px solid var(--purple-soft); outline-offset:3px; }
/* contorno roxo na foto marca o parceiro aberto */
.plogo[aria-selected="true"]{ border-color:rgba(183,155,255,.45); }
.plogo[aria-selected="true"] .plogo__plate{
  box-shadow:0 0 0 3px var(--purple), 0 0 0 7px rgba(94,20,238,.22),
             0 18px 40px -22px rgba(0,0,0,.9);
}
.plogo[aria-selected="true"] .plogo__name{ color:var(--white); }

/* ---------- quadro do parceiro aberto ---------- */
.pquadro{
  max-width:1000px; margin:24px auto 0;
  padding:34px 36px; border-radius:22px;
  border:1px solid rgba(183,155,255,.22);
  background:
    radial-gradient(26rem 20rem at 100% 100%, rgba(124,60,247,.15), transparent 72%),
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.pquadro__painel[hidden]{ display:none; }
.pquadro__painel{ display:grid; grid-template-columns:232px 1fr; gap:34px; align-items:start; }
.pquadro__foto{
  border-radius:16px; background:#fff; padding:24px 26px; min-height:118px;
  display:grid; place-items:center;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
}
.pquadro__foto img{ width:100%; max-height:74px; object-fit:contain; }
.pquadro__tag{
  display:block; font-size:.74rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--purple-soft); margin-bottom:9px;
}
.pquadro__nome{
  font-family:var(--font-display); font-weight:600; font-size:1.5rem;
  color:var(--white); margin-bottom:14px;
}
.pquadro__texto p{ color:var(--muted); line-height:1.75; max-width:62ch; }
.pquadro__texto p + p{ margin-top:12px; }
.pquadro__lista{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.pquadro__lista li{
  font-size:.84rem; color:var(--muted);
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
}
/* troca de parceiro com uma entrada curta, só para o olho acompanhar */
.pquadro__painel{ animation:pquadroEntra .3s var(--ease) both; }
@keyframes pquadroEntra{ from{ opacity:0; translate:0 8px; } to{ opacity:1; translate:0 0; } }
@media (max-width:860px){
  .pquadro{ padding:26px 24px; }
  .pquadro__painel{ grid-template-columns:1fr; gap:22px; }
  .pquadro__foto{ max-width:280px; }
}

/* ---------- como funciona: trilha conectada ---------- */
.sec--comofunciona{
  background:
    radial-gradient(56rem 36rem at 0% 0%, rgba(124,60,247,.13), transparent 58%),
    var(--black);
  border-top:1px solid var(--line);
}
.trilha{
  position:relative; list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
/* a linha que costura as etapas, atrás dos números */
.trilha::before{
  content:""; position:absolute; top:23px; left:10%; right:10%; height:2px;
  background:linear-gradient(90deg, rgba(94,20,238,0), var(--purple) 12%, var(--violet-300) 50%, var(--purple) 88%, rgba(94,20,238,0));
  opacity:.55;
}
.trilha__item{ position:relative; text-align:center; padding:0 4px; }
.trilha__n{
  position:relative; z-index:1;
  width:46px; height:46px; border-radius:50%; margin:0 auto 18px;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#fff;
  background:linear-gradient(150deg, var(--purple-lite), #3A0C9B);
  box-shadow:0 0 0 6px var(--black), 0 12px 26px -10px rgba(94,20,238,.95);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.trilha__item:hover .trilha__n{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 0 0 6px var(--black), 0 16px 32px -10px rgba(124,60,247,1);
}
.trilha__item h3{
  font-family:var(--font-display); font-weight:600; font-size:1rem; margin:0 0 7px;
}
.trilha__item p{ margin:0; font-size:.86rem; color:var(--muted); line-height:1.5; }
.fluxo__nota{ margin:34px 0 0; font-size:.9rem; color:var(--muted); text-align:center; }
.fluxo__nota a{ color:var(--violet-300); border-bottom:1px solid rgba(183,155,255,.4); }
.fluxo__nota a:hover{ color:#fff; border-bottom-color:#fff; }

/* ---------- comissões ---------- */
.sec--comissoes{
  background:
    radial-gradient(60rem 38rem at 100% 10%, rgba(94,20,238,.18), transparent 60%),
    var(--black-2);
  border-top:1px solid var(--line);
}
.ganhos{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }

.ganho-principal{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(32px,4vw,48px); border-radius:26px;
  background:
    radial-gradient(28rem 20rem at 85% 0%, rgba(167,124,255,.4), transparent 62%),
    linear-gradient(155deg, #5E14EE 0%, #3A0C9B 55%, #1B0550 100%);
  border:1px solid rgba(183,155,255,.35);
  box-shadow:0 40px 70px -40px rgba(94,20,238,1);
}
.ganho-principal__tag{
  font-family:var(--font-display); font-weight:600; font-size:.68rem;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.72);
  margin-bottom:10px;
}
.ganho-principal__v{
  font-family:var(--font-display); font-weight:700; line-height:.9;
  font-size:clamp(4.5rem,11vw,7.5rem); letter-spacing:-.05em; color:#fff;
  display:block; margin-bottom:14px;
}
.ganho-principal__v span{ font-size:.5em; margin-left:.04em; color:rgba(255,255,255,.72); }
.ganho-principal p{ margin:0; color:rgba(255,255,255,.88); font-size:1.02rem; max-width:34ch; }
/* faixa de luz atravessando o cartão */
.ganho-principal__brilho{
  position:absolute; inset:-40%; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
}

.bonus-col{ display:grid; grid-template-rows:1fr 1fr auto; gap:14px; }
.bonus{
  padding:24px 26px; border-radius:20px;
  background:linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center;
  transition:border-color .3s, transform .3s var(--ease);
}
.bonus:hover{ border-color:rgba(183,155,255,.45); transform:translateY(-3px); }
.bonus__tag{
  font-family:var(--font-display); font-weight:600; font-size:.62rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--violet-300); margin-bottom:10px;
}
.bonus__linha{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.bonus__v{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.9rem,3.4vw,2.5rem); line-height:1;
  background:linear-gradient(120deg,#fff,var(--violet-300));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bonus--alto .bonus__v{ background:linear-gradient(120deg,#fff,#C9AFFF); -webkit-background-clip:text; background-clip:text; }
.bonus p{ margin:0; color:var(--muted); font-size:.92rem; }
.bonus p b{ color:var(--text); font-weight:500; }

.semtaxa{ display:flex; flex-wrap:wrap; gap:8px; }
.semtaxa span{
  padding:8px 14px; border-radius:999px; font-size:.78rem; font-weight:500;
  color:var(--muted); border:1px solid var(--line-strong); background:rgba(255,255,255,.03);
}
.semtaxa span::before{ content:"✓ "; color:var(--violet-300); }

/* ---------- seja parceiro ---------- */
.sec--joinus{
  background:
    radial-gradient(58rem 42rem at 50% 120%, rgba(94,20,238,.24), transparent 62%),
    var(--black);
  border-top:1px solid var(--line);
}
.joinus{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,80px); align-items:start; }
.joinus__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.joinus__list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.joinus__list li{
  padding:18px 22px; border-radius:16px;
  background:linear-gradient(160deg, rgba(94,20,238,.14), rgba(255,255,255,.025));
  border:1px solid var(--line);
  font-size:.94rem; color:var(--muted);
}
.joinus__list b{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--violet-300); margin-bottom:5px;
}

/* ============================================================
   HERO — cena com scroll
   ============================================================ */
.hero{ position:relative; z-index:2; }
.hero__track{ height:660vh; }         /* comprimento da narrativa */

.hero__stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  background:
    radial-gradient(90rem 50rem at 50% -10%, rgba(94,20,238,.22), transparent 60%),
    radial-gradient(60rem 40rem at 85% 110%, rgba(124,60,247,.14), transparent 60%),
    var(--black);
}

/* halo que pulsa atrás da cena */
.stage__aura{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(90vw,820px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(94,20,238,.42), rgba(94,20,238,0) 62%);
  will-change:transform,opacity; pointer-events:none;
}

/* malha de linhas sutil */
.hero__stage::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 78%);
}

/* ---------- legendas ---------- */
.caps{
  position:absolute; left:max(28px, calc(50vw - var(--maxw)/2)); bottom:15vh;
  z-index:20; width:clamp(300px, 38vw, 520px); pointer-events:none;
}
.cap{
  position:absolute; bottom:0; left:0; right:0;
  opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.cap.is-on{ opacity:1; transform:none; }
.cap__eyebrow{
  display:inline-block; font-family:var(--font-display); font-weight:600;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--violet-300); margin-bottom:14px;
  padding:5px 12px; border:1px solid rgba(183,155,255,.28); border-radius:999px;
  background:rgba(94,20,238,.12);
}
.cap__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2rem, 4.6vw, 3.5rem); line-height:1.08; letter-spacing:-.025em;
  margin:0 0 14px;
}
.cap__text{ color:var(--muted); margin:0; font-size:1.02rem; max-width:44ch; }

/* ---------- palco 3D ---------- */
.scene{
  position:absolute; inset:0; z-index:10;
  perspective:1400px; perspective-origin:50% 48%;
  pointer-events:none;
}
/* filhos diretos do palco: centralizados e movidos via transform pelo JS.
   O deslocamento -50% usa a propriedade `translate` para não brigar
   com o `transform` que o JS escreve a cada quadro. */
.scene > *{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  will-change:transform;
}

.card-wrap, .reader{ transform-style:preserve-3d; }

/* ---------- CARTÃO ---------- */
.card-wrap{ transform-style:preserve-3d; }
.card{
  position:relative; width:330px; aspect-ratio:1.586;
  border-radius:20px; padding:22px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,0) 42%),
    linear-gradient(160deg, #7C3CF7 0%, #5E14EE 45%, #2C0A6E 100%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 2px 0 rgba(255,255,255,.18) inset,
    0 40px 80px -30px rgba(94,20,238,.85),
    0 10px 30px -12px rgba(0,0,0,.8);
  overflow:hidden;
  transform-style:preserve-3d;
}
.card__sheen{
  position:absolute; inset:-40%;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.05) 55%, transparent 62%);
  animation:sheen 5.5s var(--ease) infinite;
  pointer-events:none;
}
@keyframes sheen{ 0%,100%{ transform:translateX(-45%); } 50%{ transform:translateX(45%); } }

.card__top{ display:flex; align-items:center; gap:9px; }
.card__mark{ width:26px; height:auto; }
.card__brand{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; }

.card__chip{
  position:absolute; left:22px; top:50%; transform:translateY(-46%);
  width:46px; height:36px; border-radius:7px;
  background:linear-gradient(140deg,#F3D98B,#C79B3C 45%,#F7E7B4 78%,#B98C2F);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 4px 10px rgba(0,0,0,.35);
  display:flex; flex-direction:column; justify-content:space-evenly; padding:5px 7px;
}
.card__chip i{ height:1.5px; background:rgba(90,60,0,.5); border-radius:1px; }

.card__wave{
  position:absolute; left:80px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:3px; opacity:.72;
}
.card__wave span{
  display:block; border:2px solid rgba(255,255,255,.75); border-left-color:transparent;
  border-bottom-color:transparent; border-top-color:transparent; border-radius:50%;
}
.card__wave span:nth-child(1){ width:10px; height:10px; }
.card__wave span:nth-child(2){ width:17px; height:17px; }
.card__wave span:nth-child(3){ width:24px; height:24px; }

.card__bottom{ display:flex; flex-direction:column; gap:2px; }
.card__label{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.card__type{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:.02em; }

/* ---------- LEITORA ---------- */
/* Leitora de mesa com fenda no topo: o cartão entra em pé só até o chip,
   por isso bastam 150px de altura para esconder o trecho inserido. */
.reader{ width:300px; }
.reader__body{
  position:relative; width:100%; height:150px; border-radius:16px;
  background:linear-gradient(175deg,#241838 0%, #150D24 42%, #0B0715 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 30px 60px -28px rgba(0,0,0,.95),
    0 0 42px -14px rgba(94,20,238,.5);
  padding:22px 22px 16px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px;
}
/* a "boca" onde o cartão entra — fica sobre a borda superior.
   A largura acompanha o lado curto do cartão, que entra em pé. */
.reader__mouth{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:192px; height:14px; border-radius:4px;
  background:linear-gradient(#000, #120C1F);
  box-shadow:
    0 -1px 0 rgba(255,255,255,.14),
    0 2px 6px rgba(0,0,0,.9) inset,
    0 0 16px -2px rgba(94,20,238,.55) inset;
}
.reader__row{ display:flex; align-items:center; gap:9px; }
.reader__led{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:#4b4360; box-shadow:0 0 0 rgba(0,0,0,0);
  transition:background .3s, box-shadow .3s;
}
.reader.is-reading .reader__led{ background:#FFB020; box-shadow:0 0 14px 2px rgba(255,176,32,.8); animation:blink .55s steps(2,end) infinite; }
.reader.is-ok .reader__led{ background:#2BE07A; box-shadow:0 0 16px 3px rgba(43,224,122,.85); animation:none; }
@keyframes blink{ 50%{ opacity:.25; } }

.reader__status{
  font-family:var(--font-display); font-size:.66rem; font-weight:600;
  letter-spacing:.2em; color:var(--muted); transition:color .3s;
}
.reader.is-ok .reader__status{ color:#2BE07A; }
.reader__logo{
  font-size:.58rem; letter-spacing:.24em; color:rgba(255,255,255,.28);
  font-family:var(--font-display); font-weight:500;
}
/* pulso ao validar */
.reader__ring{
  position:absolute; left:50%; top:12px; translate:-50% -50%;
  width:80px; height:80px; border-radius:50%;
  border:2px solid rgba(43,224,122,.75); opacity:0;
}
.reader.is-ok .reader__ring{ animation:ring 1.4s var(--ease) 2; }
@keyframes ring{ from{ transform:scale(.4); opacity:.9; } to{ transform:scale(3.4); opacity:0; } }

/* ---------- NOTEBOOK ----------
   .laptop-wrap  → posição/escala/opacidade (achata, por isso tem perspective própria)
   .laptop       → inclinação da mesa (rotateX), contexto 3D real
   .laptop__screen → tampa que abre (rotateX em torno da dobradiça inferior)
   ------------------------------------------------------------ */
.laptop-wrap{
  width:470px; perspective:1500px; perspective-origin:50% 34%;
}
.laptop{ width:100%; transform-style:preserve-3d; }

.laptop__screen{
  position:relative; width:100%; aspect-ratio:16/10;
  transform-origin:bottom center; transform-style:preserve-3d;
}
.laptop__front, .laptop__back{
  position:absolute; inset:0; border-radius:14px 14px 3px 3px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid rgba(255,255,255,.14);
}
.laptop__front{
  transform:translateZ(3px);
  background:linear-gradient(170deg,#2A2140,#120C20);
  padding:11px 11px 20px;
  box-shadow:0 -18px 60px -24px rgba(94,20,238,.8);
}
.laptop__back{
  transform:translateZ(-3px) rotateY(180deg);
  background:linear-gradient(200deg,#332748,#160E27 60%,#0B0715);
  display:grid; place-items:center;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset;
}
.laptop__back img{ width:52px; opacity:.5; }

.laptop__display{
  position:relative; width:100%; height:100%; border-radius:6px; overflow:hidden;
  background:linear-gradient(165deg,#0D0818,#07040F);
  box-shadow:0 0 0 1px rgba(0,0,0,.8) inset;
}
.laptop__glare{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 40%);
}

/* deck / teclado — profundidade real, achata com o rotateX do conjunto */
.laptop__deck{
  position:relative; width:100%; aspect-ratio:470/290;
  border-radius:4px 4px 16px 16px;
  background:linear-gradient(#2E2446 0%, #1B1230 45%, #0E0919 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset;
  padding:8% 9% 0;
  display:flex; flex-direction:column; align-items:center; gap:5%;
}
.laptop__keys{
  width:100%; aspect-ratio:386/150; border-radius:8px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 6.7%, transparent 6.7% 8%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 16%, transparent 16% 20%),
    rgba(255,255,255,.06);
  box-shadow:0 2px 8px rgba(0,0,0,.5) inset;
  opacity:.85;
}
.laptop__pad{
  width:34%; aspect-ratio:160/74; border-radius:9px;
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.laptop__shadow{
  position:absolute; left:50%; translate:-50% 0; bottom:-6%;
  width:86%; height:56px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(94,20,238,.45), rgba(94,20,238,.18) 45%, transparent 72%);
}

/* UI dentro da tela */
.ui{ position:absolute; inset:0; display:flex; flex-direction:column; }
.ui__bar{
  display:flex; align-items:center; gap:6px; padding:9px 12px;
  background:rgba(255,255,255,.045); border-bottom:1px solid rgba(255,255,255,.07);
}
.ui__bar i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.2); }
.ui__bar span{ margin-left:8px; font-size:.6rem; letter-spacing:.14em; color:rgba(255,255,255,.4); text-transform:uppercase; }
.ui__dot{
  width:6px; height:6px; border-radius:50%; margin-left:auto; flex:none;
  background:#2BE07A; box-shadow:0 0 9px 1px rgba(43,224,122,.8);
  opacity:0; transition:opacity .4s var(--ease) .9s;
}
.ui.is-on .ui__dot{ opacity:1; }

.ui__body{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:10px 14px; text-align:center;
  background:radial-gradient(60% 70% at 50% 40%, rgba(43,224,122,.1), transparent 70%);
}
.ui__check svg{ width:46px; height:46px; fill:none; stroke:#2BE07A; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.ui__check circle{ stroke-dasharray:145; stroke-dashoffset:145; opacity:.55; }
.ui__check path{ stroke-dasharray:40; stroke-dashoffset:40; }
.ui.is-on .ui__check circle{ animation:draw .7s var(--ease) forwards; }
.ui.is-on .ui__check path{ animation:draw .45s var(--ease) .5s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.ui__title{ font-family:var(--font-display); font-weight:600; font-size:1.06rem; margin:2px 0 0; color:#fff; line-height:1.25; }
.ui__sub{ margin:0; font-size:.68rem; color:rgba(255,255,255,.45); letter-spacing:.06em; }
.ui__rows{ display:flex; flex-direction:column; gap:3px; margin-top:7px; width:min(100%, 320px); }
.ui__rows span{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.62rem; line-height:1.4; color:rgba(255,255,255,.65);
  padding:4px 10px; border-radius:6px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.06);
}
.ui__rows b{ color:rgba(255,255,255,.38); font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:.58rem; }

/* itens da UI entram escalonados */
.ui__body > *{ opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.ui.is-on .ui__body > *{ opacity:1; transform:none; }
.ui.is-on .ui__body > *:nth-child(2){ transition-delay:.35s; }
.ui.is-on .ui__body > *:nth-child(3){ transition-delay:.45s; }
.ui.is-on .ui__body > *:nth-child(4){ transition-delay:.55s; }

/* ---------- brilho suave da autenticação ----------
   Não é mais um "corte": é só um respiro de luz que acompanha
   o login e some, deixando a página seguir naturalmente.        */
.burst{
  width:420px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.9) 0%, #C9AFFF 26%, var(--purple) 52%, rgba(94,20,238,0) 74%);
  opacity:0; transform:scale(0); pointer-events:none;
  visibility:hidden; mix-blend-mode:screen;
}

/* dica de rolagem */
.scrollhint{
  position:absolute; bottom:26px; left:50%; translate:-50% 0; z-index:25;
  display:flex; align-items:center; gap:10px;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  transition:opacity .4s;
}
.scrollhint span{
  width:22px; height:34px; border:1.5px solid var(--line-strong); border-radius:12px; position:relative;
}
.scrollhint span::after{
  content:""; position:absolute; left:50%; top:7px; translate:-50% 0;
  width:3px; height:6px; border-radius:2px; background:var(--violet-300);
  animation:wheel 1.7s var(--ease) infinite;
}
@keyframes wheel{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(11px); opacity:0; } 100%{ opacity:0; } }

/* ============================================================
   SEÇÕES
   ============================================================ */
.sec{ position:relative; z-index:2; padding:clamp(80px,11vw,150px) 0; background:var(--black); }
/* a primeira seção emenda no fim da cena: sem borda, mesmo preto de base */
.sec--about{
  background:
    radial-gradient(60rem 40rem at 105% 0%, rgba(94,20,238,.16), transparent 60%),
    var(--black);
}
.sec--services{
  background:
    radial-gradient(70rem 40rem at -10% 20%, rgba(124,60,247,.13), transparent 58%),
    var(--black-2);
  border-top:1px solid var(--line);
}
.sec--contact{
  background:
    radial-gradient(60rem 44rem at 50% 120%, rgba(94,20,238,.24), transparent 62%),
    var(--black);
  border-top:1px solid var(--line);
}
.sec__head{ max-width:760px; margin-bottom:56px; }

/* revelar ao rolar */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- quem somos ---------- */
.about{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,5vw,72px); align-items:start; }
.pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.pill{
  padding:8px 16px; border-radius:999px; font-size:.82rem; font-weight:500;
  border:1px solid var(--line-strong); background:rgba(255,255,255,.035); color:var(--muted);
}
/* ---------- cadeia de confiança: selos conectados ----------
   O fundo (grade de pontos e trilhas) é estático. Só os selos e as
   ligações entre eles se movem, bem devagar, via js/main.js.        */
/* sem moldura: a peça flutua direto sobre o fundo da seção.
   O brilho atrás é só um halo, não uma caixa.                  */
.malha{ position:relative; padding:6px 0 0; }
.malha::before{
  content:""; position:absolute; inset:-8% -6% 6%;
  background:radial-gradient(60% 55% at 55% 45%, rgba(94,20,238,.30), transparent 70%);
  pointer-events:none;
}
.malha__svg{ display:block; width:100%; height:auto; overflow:visible; }

/* chip de vidro atrás de cada selo */
.malha__no rect{
  fill:rgba(255,255,255,.07);
  stroke:rgba(183,155,255,.34);
  stroke-width:1;
}
.malha__no image{ opacity:.96; }
.malha__no text{
  text-anchor:middle;
  font-family:"Poppins", system-ui, sans-serif; font-weight:600;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  fill:rgba(255,255,255,.55);
}
.malha__fio{ opacity:.85; }
.malha__pulso{ opacity:.9; }

.malha__legenda{
  margin:16px 4px 0; text-align:center;
  font-size:.84rem; color:var(--muted); line-height:1.5;
}

/* ============================================================
   PLANOS E PREÇOS
   ============================================================ */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.sec--precos{
  background:
    radial-gradient(62rem 40rem at 0% 0%, rgba(94,20,238,.16), transparent 60%),
    var(--black);
  border-top:1px solid var(--line);
}
.sec--precos .lead{ margin-top:-6px; }

/* Sem overflow:hidden — um ancestral com overflow vira o scrollport do
   cabeçalho fixo, e ele passaria a grudar dentro da caixa em vez da tela.
   O arredondamento fica por conta das células dos cantos.              */
.tabela-wrap{
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.tabela thead th:first-child{ border-top-left-radius:21px; }
.tabela thead th:last-child{ border-top-right-radius:21px; }
.tabela tbody tr:last-child td:first-child{ border-bottom-left-radius:21px; }
.tabela tbody tr:last-child td:last-child{ border-bottom-right-radius:21px; }
/* border-collapse precisa ser separate: com collapse o cabeçalho fixo
   é deslocado pelo próprio valor de top e cobre a primeira linha. */
.tabela{ width:100%; border-collapse:separate; border-spacing:0; }
.tabela th{
  position:sticky; top:74px; z-index:5;      /* cabeçalho fixo, abaixo do menu */
  text-align:left; font-family:var(--font-display); font-weight:600;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--violet-300);
  padding:18px 20px; background:#140C26;
  border-bottom:1px solid var(--line-strong);
}
.tabela td{
  padding:20px; vertical-align:middle; font-size:.92rem; color:var(--muted);
  border-bottom:1px solid var(--line);
}
.tabela tbody tr:last-child td{ border-bottom:0; }
.tabela tbody tr:nth-child(even){ background:rgba(255,255,255,.022); }
.tabela tbody tr:hover{ background:rgba(94,20,238,.1); }

.tabela__nome{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:1.02rem; color:var(--text);
}
.tabela__detalhe{ display:block; margin-top:2px; font-size:.78rem; color:var(--muted); }
.tabela__valor{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:-.02em;
  background:linear-gradient(120deg,#fff,var(--violet-300));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap;
}
.tabela__consulta{ font-family:var(--font-display); font-weight:500; color:var(--violet-300); white-space:nowrap; }
.tabela__preco-col{ white-space:nowrap; }
.tabela__acao{ text-align:right; }
.tabela__cta{ padding:10px 20px; font-size:.85rem; }

.tabela__nota{
  margin:26px 0 0; font-size:.82rem; color:rgba(255,255,255,.4); text-align:center;
}

/* observação logo abaixo da tabela */
.tabela__obs{
  margin:20px auto 0; max-width:74ch; text-align:center;
  font-size:.88rem; line-height:1.55; color:var(--muted);
  padding:14px 20px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
}

/* ---------- mídias e acessórios ---------- */
.acessorios{ margin-top:34px; }
.acessorios__titulo{
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  margin:0 0 4px;
}
.acessorios__nota{ margin:0 0 16px; font-size:.86rem; color:var(--muted); }
.acessorios__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.acessorio{
  display:flex; flex-direction:column; gap:3px;
  padding:20px 22px; border-radius:16px;
  background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--line);
  transition:border-color .3s, transform .3s var(--ease);
}
.acessorio:hover{ border-color:rgba(183,155,255,.4); transform:translateY(-3px); }
.acessorio__nome{ font-family:var(--font-display); font-weight:600; font-size:.98rem; color:var(--text); }
.acessorio__det{ font-size:.78rem; color:var(--muted); }
.acessorio__v{
  margin-top:8px; font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  background:linear-gradient(120deg,#fff,var(--violet-300));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.acessorio__v--consulta{
  font-weight:500; font-size:.95rem;
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--violet-300);
}

/* ---------- destaques: seguro e emissão online ---------- */
.destaques{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px; }
.destaque{
  position:relative; overflow:hidden;
  padding:28px 30px; border-radius:22px;
  background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--line);
  transition:border-color .3s, transform .3s var(--ease);
}
.destaque:hover{ border-color:rgba(183,155,255,.4); transform:translateY(-3px); }
/* o seguro é a oferta que a gente quer que a pessoa veja */
.destaque--forte{
  background:
    radial-gradient(26rem 18rem at 100% 0%, rgba(167,124,255,.32), transparent 62%),
    linear-gradient(155deg, rgba(94,20,238,.55), rgba(26,7,80,.7));
  border-color:rgba(183,155,255,.42);
  box-shadow:0 34px 60px -40px rgba(94,20,238,1);
}
.destaque__etiqueta{
  display:inline-block; margin-bottom:12px;
  font-family:var(--font-display); font-weight:600;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
  color:var(--violet-300); border:1px solid rgba(183,155,255,.3);
  background:rgba(94,20,238,.14);
}
.destaque--forte .destaque__etiqueta{
  color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.14);
}
.destaque__topo{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:10px;
}
.destaque__titulo{
  font-family:var(--font-display); font-weight:600; font-size:1.18rem; margin:0;
}
.destaque__v{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:1.6rem; line-height:1; white-space:nowrap; color:#fff;
}
.destaque__texto{ margin:0; font-size:.94rem; line-height:1.6; color:var(--muted); }
.destaque--forte .destaque__texto{ color:rgba(255,255,255,.88); }

/* ---------- serviços ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.scard{
  position:relative; padding:32px 28px 30px; border-radius:20px;
  background:linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--line); overflow:hidden;
  transition:border-color .35s, transform .35s var(--ease), background .35s;
}
.scard::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s;
  background:radial-gradient(28rem 16rem at 12% -10%, rgba(94,20,238,.4), transparent 62%);
}
.scard:hover{ transform:translateY(-6px); border-color:rgba(183,155,255,.4); }
.scard:hover::before{ opacity:1; }
.scard > *{ position:relative; }
.scard__icon{
  width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--purple), #3A0C9B);
  box-shadow:0 12px 28px -14px rgba(94,20,238,.95);
  margin-bottom:22px;
}
.scard__icon svg{ width:26px; height:26px; fill:#fff; }
.scard h3{
  font-family:var(--font-display); font-weight:600; font-size:1.2rem;
  margin:0 0 10px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.scard h3 span{
  font-size:.62rem; letter-spacing:.16em; color:var(--violet-300);
  border:1px solid rgba(183,155,255,.3); border-radius:999px; padding:3px 9px;
}
.scard p{ margin:0 0 16px; color:var(--muted); font-size:.94rem; }
.scard ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.scard li{ font-size:.85rem; color:rgba(255,255,255,.62); padding-left:20px; position:relative; }
.scard li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:5px;
  border-left:2px solid var(--violet-300); border-bottom:2px solid var(--violet-300);
  transform:rotate(-45deg);
}
/* ressalva do card — asterisco, sem o tique da lista */
.scard__note{
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line);
  font-size:.76rem; line-height:1.45; color:rgba(255,255,255,.42);
}

/* ---------- contato ---------- */
.contact{ display:grid; grid-template-columns:1fr .95fr; gap:clamp(40px,6vw,80px); align-items:start; }
.contact__list{ display:flex; flex-direction:column; margin-top:34px; border-top:1px solid var(--line); }
.cline{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:16px 4px; border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease), border-color .3s;
}
a.cline:hover{ padding-left:14px; border-color:rgba(183,155,255,.45); }
.cline__k{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.cline__v{ font-family:var(--font-display); font-weight:500; font-size:1rem; text-align:right; }

.form{
  padding:34px; border-radius:22px;
  background:linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px; font-weight:500;
}
.field input, .field select, .field textarea{
  width:100%; padding:13px 16px; border-radius:12px; resize:vertical;
  background:rgba(5,3,8,.55); border:1px solid var(--line-strong);
  color:var(--text); font-family:var(--font-body); font-size:.95rem;
  transition:border-color .25s, box-shadow .25s;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.28); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--violet-300);
  box-shadow:0 0 0 4px rgba(94,20,238,.2);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A79EBC'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:20px;
}
.field select option{ background:#140D24; color:var(--text); }
.form__note{ margin:14px 0 0; font-size:.76rem; color:var(--muted); text-align:center; }

/* ---------- rodapé ---------- */
.foot{ position:relative; z-index:2; border-top:1px solid var(--line); background:var(--black); padding:44px 0; }
.foot__inner{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:space-between; }
.foot__logo{ height:24px; width:auto; opacity:.85; }
.foot__links{ display:flex; gap:22px; flex-wrap:wrap; }
.foot__links a{ font-size:.88rem; color:var(--muted); transition:color .2s; }
.foot__links a:hover{ color:var(--text); }
.foot__copy{ margin:0; font-size:.8rem; color:rgba(255,255,255,.35); }

/* ---------- botão flutuante ---------- */
.fab{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,#25D366,#12a94f);
  box-shadow:0 14px 34px -10px rgba(37,211,102,.75);
  opacity:0; transform:translateY(20px) scale(.85); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.fab.is-on{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ transform:translateY(-3px) scale(1.05); }
.fab svg{ width:30px; height:30px; fill:#04210f; }
.fab::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.55); animation:ring 2.4s var(--ease) infinite;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .joinus{ grid-template-columns:1fr; }
  .trilha{ grid-template-columns:repeat(3,1fr); row-gap:34px; }
  .trilha::before{ display:none; }
  .ganhos{ grid-template-columns:1fr; }
  .pagehead__grid{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .pagehead__copy{ order:2; max-width:min(90vw,620px); }
  .marca3d{ order:1; margin-bottom:8px; }
  .pagehead .pills{ justify-content:center; }
  .pagehead .lead{ margin-inline:auto; }
  .about{ grid-template-columns:1fr; }
  .acessorios__grid{ grid-template-columns:repeat(2,1fr); }
  .destaques{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .caps{ left:50%; translate:-50% 0; text-align:center; bottom:13vh; width:min(90vw,560px); }
  .cap__text{ margin-inline:auto; }
}

@media (max-width:860px){
  .nav__links{
    position:fixed; top:74px; left:16px; right:16px;
    flex-direction:column; gap:2px; padding:14px;
    background:rgba(10,6,18,.96); backdrop-filter:blur(20px);
    border:1px solid var(--line); border-radius:18px;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .3s, transform .3s, visibility .3s;
  }
  .nav__links.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__links a{ padding:12px 14px; }
  .nav__cta span{ display:none; }
  .nav__cta{ width:42px; height:42px; padding:0; border-radius:12px; order:2; }
  .nav__burger{ display:flex; margin-left:0; order:3; }
  .nav__brand{ margin-right:auto; }
  .nav__inner{ gap:12px; }
  .nav__brand img{ height:32px; }
}

@media (max-width:760px){
  .cards{ grid-template-columns:1fr; }
  .plogos{ grid-template-columns:1fr; max-width:420px; }

  /* tabela de preços vira cartões empilhados */
  .tabela-wrap{ border:0; background:none; border-radius:0; overflow:visible; }
  .tabela, .tabela tbody, .tabela tr, .tabela td{ display:block; width:100%; }
  .tabela thead{ display:none; }
  .tabela tbody tr{
    margin-bottom:16px; border-radius:20px; padding:22px;
    background:linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    border:1px solid var(--line);
  }
  .tabela tbody tr:nth-child(even){ background:linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); }
  .tabela tbody tr:hover{ background:linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); }
  .tabela td{
    padding:10px 0; border-bottom:1px solid var(--line);
    display:flex; flex-direction:column; gap:3px;
  }
  .tabela td::before{
    content:attr(data-rotulo);
    font-family:var(--font-display); font-weight:600;
    font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--violet-300);
  }
  .tabela td[data-rotulo=""]::before{ display:none; }
  .tabela td.tabela__cert{ padding-top:0; border-bottom:1px solid var(--line-strong); }
  .tabela td.tabela__acao{ border-bottom:0; padding-bottom:0; padding-top:16px; text-align:left; }
  .tabela__cta{ width:100%; }
  .acessorios__grid{ grid-template-columns:1fr; }
  .destaque{ padding:24px; }
  .trilha{ grid-template-columns:1fr; row-gap:26px; }
  .trilha__item{ text-align:left; padding:0; }
  .trilha__n{ margin:0 0 12px; }
  .marca3d{ width:148px; }
  .hero__track{ height:590vh; }
  /* tamanhos do palco 3D são controlados por sceneScale() no JS */
  .cap__title{ font-size:clamp(1.7rem,7.4vw,2.4rem); }
  .cap__text{ font-size:.94rem; }
  .cline{ flex-direction:column; align-items:flex-start; gap:4px; }
  .cline__v{ text-align:left; }
  .form{ padding:24px; }
  .wrap{ width:min(100% - 36px, var(--maxw)); }
  .foot__inner{ flex-direction:column; align-items:flex-start; gap:18px; }
}

@media (max-width:420px){
}