/* ============================================================
   HARP 3D — folha de estilo principal
   Para trocar as cores do site, mexa só no bloco :root abaixo.
   ============================================================ */

:root{
  /* --- cores dos 4 mundos (mude aqui pra trocar o site inteiro) --- */
  --geek:   #FF1F6D;   /* rosa/magenta */
  --home:   #00E59B;   /* verde menta  */
  --proto:  #00A8FF;   /* azul elétrico */
  --create: #F5FF00;   /* amarelo limão */
  --violet: #7B2BFF;

  /* --- fundo e textos --- */
  --bg:      #07070C;
  --bg-2:    #0C0C14;
  --line:    rgba(255,255,255,.09);
  --surface: rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.06);
  --txt:     #FFFFFF;
  --dim:     rgba(255,255,255,.64);
  --faint:   rgba(255,255,255,.40);

  --radius: 18px;
  --wrap: 1180px;

  --font-d: "Space Grotesk", system-ui, sans-serif;   /* títulos */
  --font-b: "Inter", system-ui, -apple-system, sans-serif; /* texto */
}

*{ box-sizing:border-box; margin:0; padding:0 }
/* garante que o atributo hidden do HTML sempre esconda o elemento */
[hidden]{ display:none !important }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  /* textura de "linhas de camada" da impressão 3D */
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 5px);
}

h1,h2,h3,h4,h5{ font-family:var(--font-d); font-weight:700; line-height:1.08; letter-spacing:-.03em }
a{ color:inherit; text-decoration:none }
img{ max-width:100% }
button,input,select{ font:inherit; color:inherit }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px }

/* texto com degradê colorido */
.grad{
  background:linear-gradient(100deg,var(--geek),var(--violet) 35%,var(--proto) 70%,var(--home));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:200% auto;
  animation:gradmove 7s linear infinite;
}
@keyframes gradmove{ to{ background-position:200% center } }


/* ===================== LUZ DO MOUSE ===================== */
.mouse-glow{
  position:fixed; top:0; left:0; width:420px; height:420px;
  margin:-210px 0 0 -210px; pointer-events:none; z-index:0;
  background:radial-gradient(circle,rgba(123,43,255,.16),transparent 62%);
  filter:blur(26px); opacity:0; transition:opacity .5s;
}


/* ===================== MENU ===================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,7,12,.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.nav-inner{
  max-width:var(--wrap); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:700; font-size:19px; letter-spacing:-.04em }
.logo-mark{ width:28px; height:28px; color:var(--create); display:block }
.logo-mark svg{ width:100%; height:100% }
.logo-text b{ color:var(--create) }

.nav-links{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500 }
.nav-links a{ transition:background .22s, color .22s, border-color .22s, transform .22s }

/* ABAS DO TOPO — destacadas em amarelo pra ficar intuitivo */
.nav-links a:not(.btn){
  color:var(--create);
  padding:9px 17px; border-radius:100px;
  background:rgba(245,255,0,.08);
  border:1px solid rgba(245,255,0,.26);
  font-family:var(--font-d); font-weight:600; letter-spacing:-.01em;
}
.nav-links a:not(.btn):hover{
  background:var(--create); color:#0A0A0F; border-color:var(--create);
  transform:translateY(-2px);
}
/* aba da página em que voce esta agora */
.nav-links a:not(.btn).is-current{
  background:var(--create); color:#0A0A0F; border-color:var(--create);
  box-shadow:0 8px 24px -10px rgba(245,255,0,.65);
}

/* "Loja de Produtos" — destaque extra no menu, é o botão que mais importa (venda) */
.nav-links a:not(.btn).nav-destaque{
  background:var(--create); color:#0A0A0F; border-color:var(--create);
  animation:navDestaquePulso 2.6s ease-in-out infinite;
}
.nav-links a:not(.btn).nav-destaque:hover{ animation-play-state:paused }
@keyframes navDestaquePulso{
  0%,100%{ box-shadow:0 8px 22px -10px rgba(245,255,0,.55) }
  50%{ box-shadow:0 8px 28px -6px rgba(245,255,0,.9) }
}

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; flex-direction:column; gap:5px }
.nav-toggle span{ width:24px; height:2px; background:var(--txt); display:block; transition:.3s }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav-toggle.is-open span:nth-child(2){ opacity:0 }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }


/* ===================== BOTÕES ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:100px; border:1px solid transparent;
  font-family:var(--font-d); font-weight:600; font-size:15px; letter-spacing:-.01em;
  cursor:pointer; transition:transform .2s, box-shadow .25s, background .25s, border-color .25s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97) }

.btn-primary{
  background:var(--create); color:#0A0A0F;
  box-shadow:0 0 0 0 rgba(245,255,0,.5);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 34px -8px rgba(245,255,0,.6) }

.btn-ghost{ background:var(--surface); border-color:var(--line); color:var(--txt) }
.btn-ghost:hover{ background:var(--surface-2); border-color:rgba(255,255,255,.22); transform:translateY(-2px) }

.btn-mini{ padding:9px 18px; font-size:13.5px; background:var(--surface); border-color:var(--line) }
.btn-mini:hover{ background:var(--create); color:#0A0A0F; border-color:var(--create) }

.btn-lg{ padding:18px 40px; font-size:17px }
.btn-full{ width:100% }

.btn-tab{ background:var(--c); color:#0A0A0F; padding:12px 22px; font-size:14px }
.btn-tab:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -10px var(--c) }

.btn-card{
  background:transparent; border-color:var(--line); color:var(--dim);
  padding:9px 18px; font-size:13.5px;
}
.card:hover .btn-card{ background:var(--c,var(--create)); color:#0A0A0F; border-color:transparent }


/* ===================== TOPO / HERO ===================== */
.hero{ position:relative; padding:180px 0 110px; overflow:hidden; isolation:isolate }
.hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px }

/* bolas coloridas flutuando */
.orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; z-index:0 }
.orb-1{ width:520px; height:520px; background:var(--violet); top:-140px; left:-120px; animation:float1 17s ease-in-out infinite }
.orb-2{ width:440px; height:440px; background:var(--geek);   top:40px;  right:-140px; animation:float2 21s ease-in-out infinite }
.orb-3{ width:380px; height:380px; background:var(--proto);  bottom:-180px; left:38%;  animation:float3 19s ease-in-out infinite }
@keyframes float1{ 50%{ transform:translate(80px,60px) scale(1.12) } }
@keyframes float2{ 50%{ transform:translate(-70px,90px) scale(.9) } }
@keyframes float3{ 50%{ transform:translate(50px,-70px) scale(1.15) } }

/* grade estilo mesa de impressão */
.hero-grid{
  position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 30%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 30%,transparent 76%);
}

.pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 18px; border-radius:100px;
  background:var(--surface); border:1px solid var(--line);
  font-size:13.5px; color:var(--dim); backdrop-filter:blur(10px);
}
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--home); box-shadow:0 0 0 0 var(--home); animation:pulse 2s infinite }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(0,229,155,0) } 100%{ box-shadow:0 0 0 0 rgba(0,229,155,0) } }

.hero-title{ font-size:clamp(42px,8.2vw,86px); max-width:15ch }
.hero-sub{ font-size:clamp(16px,2vw,19.5px); color:var(--dim); max-width:54ch }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:6px }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; width:100%; max-width:760px; margin-top:38px }
.stat{ display:flex; flex-direction:column; gap:3px; padding:20px 12px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line) }
.stat b{ font-family:var(--font-d); font-size:clamp(26px,4vw,38px); line-height:1; color:var(--create) }
.stat span{ font-size:12.5px; color:var(--faint) }


/* ===================== FAIXA QUE ANDA ===================== */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-2); padding:16px 0; overflow:hidden;
}
.ticker-track{
  display:flex; align-items:center; gap:34px; width:max-content;
  animation:slide 34s linear infinite;
  font-family:var(--font-d); font-weight:700; font-size:19px; letter-spacing:.06em;
}
.ticker-track span{ color:rgba(255,255,255,.30) }
.ticker-track i{ color:var(--create); font-style:normal; font-size:12px }
@keyframes slide{ to{ transform:translateX(-33.333%) } }


/* ===================== SEÇÕES ===================== */
.section{ padding:110px 0; position:relative }
.sec-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin-bottom:52px }
.eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--create);
}
.sec-head h2{ font-size:clamp(30px,5vw,52px); max-width:18ch }
.sec-head p{ color:var(--dim); max-width:56ch }


/* ===================== AS 4 ABAS ===================== */
.tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:44px }
.tab{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:20px 22px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line);
  cursor:pointer; text-align:left; overflow:hidden;
  transition:transform .25s, border-color .25s, background .25s;
}
.tab::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--c);
  transform:scaleX(0); transform-origin:left; transition:transform .35s;
}
.tab::after{
  content:""; position:absolute; top:-40px; right:-40px; width:120px; height:120px;
  border-radius:50%; background:var(--c); filter:blur(46px); opacity:0; transition:opacity .35s;
}
.tab:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.2) }
.tab.is-active{ background:var(--surface-2); border-color:var(--c) }
.tab.is-active::before{ transform:scaleX(1) }
.tab.is-active::after{ opacity:.4 }
.tab-ico{ font-size:26px; line-height:1; margin-bottom:6px; position:relative }
.tab b{ font-family:var(--font-d); font-size:18px; position:relative }
.tab.is-active b{ color:var(--c) }
.tab small{ font-size:12.5px; color:var(--faint); position:relative }

/* conteúdo de cada aba */
.panel{ display:none }
.panel.is-active{ display:block; animation:panelIn .45s cubic-bezier(.22,1,.36,1) }
@keyframes panelIn{ from{ opacity:0; transform:translateY(16px) } }

.panel-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:32px; flex-wrap:wrap }
.panel-head h3{ font-size:clamp(24px,3.6vw,36px); margin-bottom:8px }
.panel-head p{ color:var(--dim); max-width:52ch }


/* ===================== CARDS DE PRODUTO ===================== */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px }
.card{
  border-radius:var(--radius); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
}
.card:hover{ transform:translateY(-7px); border-color:var(--c); box-shadow:0 22px 50px -22px var(--c) }

.card-img{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--g1),var(--g2));
  overflow:hidden;
}
/* linhas de camada por cima da imagem — cara de impressão 3D */
.card-img::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 4px);
  mix-blend-mode:overlay;
}
.card-img span{ font-size:60px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.4)); transition:transform .4s cubic-bezier(.22,1,.36,1); position:relative; z-index:1 }
.card:hover .card-img span{ transform:scale(1.16) rotate(-6deg) }

.card-body{ padding:18px 18px 16px; display:flex; flex-direction:column; gap:5px }
.card-body h4{ font-size:17px }
.card-meta{ font-size:12.8px; color:var(--faint) }
.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px }
.card-foot b{ font-family:var(--font-d); font-size:18px; color:var(--c) }


/* ===================== PASSO A PASSO (aba Crie agora) ===================== */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px }
.step{
  position:relative; padding:28px 24px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .3s, border-color .3s;
}
.step:hover{ transform:translateY(-5px); border-color:var(--c) }
.step b{
  display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:var(--c); color:#0A0A0F; font-family:var(--font-d); font-size:17px; margin-bottom:14px;
}
.step h4{ font-size:17px; margin-bottom:6px }
.step p{ font-size:14px; color:var(--dim) }


/* ===================== CALCULADORA ===================== */
.calc-sec{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.calc{ display:grid; grid-template-columns:1.25fr .95fr; gap:22px; align-items:start }

/* área de arrastar */
.drop{
  position:relative; min-height:400px; border-radius:24px;
  border:2px dashed rgba(255,255,255,.18); background:var(--surface);
  display:grid; place-items:center; padding:38px 28px; text-align:center;
  transition:border-color .3s, background .3s, transform .3s; cursor:pointer;
  outline:none;
}
.drop:hover,.drop:focus-visible{ border-color:var(--create); background:rgba(245,255,0,.035) }
.drop.is-over{
  border-color:var(--create); background:rgba(245,255,0,.09);
  transform:scale(1.015); box-shadow:0 0 60px -14px rgba(245,255,0,.45);
}
.drop-inner{ display:flex; flex-direction:column; align-items:center; gap:12px }
.drop-ico{
  width:74px; height:74px; border-radius:22px; display:grid; place-items:center;
  background:rgba(245,255,0,.1); color:var(--create); margin-bottom:6px;
  animation:bob 3s ease-in-out infinite;
}
@keyframes bob{ 50%{ transform:translateY(-9px) } }
.drop-inner h3{ font-size:clamp(22px,3vw,30px) }
.drop-inner p{ color:var(--dim); margin-top:-4px }
.drop-inner small{ font-size:12.5px; color:var(--faint) }
.drop-inner .btn{ margin-top:8px }

/* depois que solta o arquivo */
.drop-done{ width:100%; max-width:420px; display:flex; flex-direction:column; gap:16px }
.file-ok{
  display:flex; align-items:center; gap:13px; text-align:left;
  padding:16px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line);
}
.file-ico{ font-size:26px }
.file-ok b{ display:block; font-family:var(--font-d); font-size:15px; word-break:break-all }
.file-ok small{ font-size:12.5px; color:var(--faint) }
.file-x{ margin-left:auto; background:none; border:0; color:var(--faint); cursor:pointer; font-size:16px; padding:6px; transition:color .2s }
.file-x:hover{ color:var(--geek) }
.bar{ height:6px; border-radius:100px; background:rgba(255,255,255,.08); overflow:hidden }
.bar i{ display:block; height:100%; width:0; border-radius:100px; background:linear-gradient(90deg,var(--create),var(--home)); animation:fill 1.1s cubic-bezier(.22,1,.36,1) forwards }
@keyframes fill{ to{ width:100% } }
.ok-msg{ font-size:14px; color:var(--home) }

/* opções */
.calc-opts{
  padding:30px 28px; border-radius:24px;
  background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:18px;
}
.calc-opts h4{ font-size:19px }
.field{ display:flex; flex-direction:column; gap:8px }
.field > span{ font-size:13px; font-weight:600; color:var(--dim) }
.field select,.field input{
  padding:13px 15px; border-radius:12px;
  background:var(--bg); border:1px solid var(--line); color:var(--txt);
  font-size:14.5px; transition:border-color .2s; width:100%;
}
.field select:focus,.field input:focus{ outline:none; border-color:var(--create) }
.field-pequeno{ max-width:110px; flex:0 0 auto }

/* ===== Entrega / CEP / frete (calculadora) ===== */
.entrega-box{
  display:flex; flex-direction:column; gap:14px; padding:16px;
  border-radius:14px; background:var(--surface); border:1px solid var(--line);
}
.cep-linha{ display:flex; gap:8px }
.cep-linha input{ flex:1 }
.cep-linha .btn{ flex:0 0 auto; white-space:nowrap }
#cepHint{ font-size:12px; color:var(--faint) }
#cepHint.cep-erro{ color:var(--geek) }

.frete-opcoes{ display:flex; flex-direction:column; gap:8px }
.frete-opcao{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-radius:12px; cursor:pointer;
  background:var(--bg); border:1.5px solid var(--line); transition:border-color .2s, background .2s;
}
.frete-opcao:hover{ border-color:rgba(255,255,255,.3) }
.frete-opcao.is-on{ border-color:var(--create); background:rgba(245,255,0,.06) }
.frete-opcao .fo-nome{ font-family:var(--font-d); font-weight:600; font-size:14px }
.frete-opcao .fo-prazo{ font-size:12px; color:var(--faint) }
.frete-opcao .fo-preco{ font-family:var(--font-d); font-weight:700; color:var(--create); font-size:15px }

.endereco-campos{ display:flex; flex-direction:column; gap:12px }
.endereco-dica{ font-size:12.5px; color:var(--faint) }
.endereco-linha{ display:flex; gap:10px }
.endereco-linha .field{ flex:1 }

.colors{ display:flex; gap:10px; flex-wrap:wrap }
.sw{
  width:34px; height:34px; border-radius:10px; cursor:pointer;
  background:var(--sw); border:2px solid transparent; transition:transform .2s, border-color .2s;
}
.sw:hover{ transform:scale(1.12) }
.sw.is-on{ border-color:var(--txt); transform:scale(1.12) }

.price-box{
  display:flex; flex-direction:column; gap:2px; padding:20px;
  border-radius:14px; background:rgba(245,255,0,.06); border:1px solid rgba(245,255,0,.22);
}
.price-box > span{ font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint) }
.price-box b{ font-family:var(--font-d); font-size:34px; line-height:1.1; color:var(--create); transition:color .2s }
.price-box small{ font-size:12.8px; color:var(--faint) }

/* quando o backend devolve erro (peça não cabe, arquivo inválido, etc.) */
.price-box.price-erro{ background:rgba(255,31,109,.08); border-color:rgba(255,31,109,.3) }
.price-box.price-erro b{ color:var(--geek) }
.price-box.price-erro small{ color:#ffb3c9 }

/* formulário de pagamento embutido (Payment Brick, Mercado Pago) */
#pagamentoBox{ margin-top:16px }
.pagamento-status{
  font-size:13.5px; color:var(--home); margin:0 0 10px; min-height:1.2em;
}
.pagamento-status.price-erro{ color:var(--geek) }
#paymentBrick_container{ min-height:280px }

.wpp-link{ text-align:center; font-size:13.5px; color:var(--faint); text-decoration:underline; transition:color .2s }
.wpp-link:hover{ color:var(--home) }


/* ===================== MÁQUINAS ===================== */
.printers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px }
.printer{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .3s, border-color .3s;
}
.printer:hover{ transform:translateY(-5px); border-color:var(--proto) }

/* foto da máquina (com espaço reservado enquanto não tem foto real) */
.printer-photo{
  position:relative; aspect-ratio:4/3;
  background:#000; /* preto solido, contraste com o --bg do site */
  display:grid; place-items:center; overflow:hidden;
}
/* object-fit:contain (não cover) porque as fotos já vêm com fundo preto
   embutido — assim a máquina nunca é cortada, só "flutua" no preto */
.printer-photo img{ width:100%; height:100%; object-fit:contain; display:block }
.printer-photo-fallback{ display:none; font-size:40px; opacity:.55 }
.printer-photo.sem-foto .printer-photo-fallback{ display:grid; place-items:center }

.printer-body{ padding:20px 22px 24px }
.printer-live{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--home);
}
.printer-live i{ width:7px; height:7px; border-radius:50%; background:var(--home); animation:pulse2 1.6s infinite }
@keyframes pulse2{ 50%{ opacity:.25 } }
.printer-idle{ color:var(--faint) }
.printer-idle i{ background:var(--faint); animation:none }
.printer h4{ font-size:19px; margin-bottom:6px }
.printer p{ font-size:14px; color:var(--dim); margin-bottom:14px }
.printer-vol{ font-size:12.5px; color:var(--faint); font-variant-numeric:tabular-nums }


/* ===================== REVENDA ===================== */
.reseller{
  position:relative; overflow:hidden; border-radius:28px;
  background:linear-gradient(135deg,rgba(123,43,255,.13),rgba(255,31,109,.09));
  border:1px solid rgba(255,255,255,.12);
  padding:60px 52px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center;
}
.reseller-glow{
  position:absolute; width:460px; height:460px; border-radius:50%;
  background:var(--violet); filter:blur(120px); opacity:.32;
  top:-180px; right:-120px; animation:float2 16s ease-in-out infinite;
}
.reseller-txt{ position:relative; z-index:1 }
.reseller-txt h2{ font-size:clamp(28px,4.4vw,46px); margin:12px 0 14px }
.reseller-txt > p{ color:var(--dim); max-width:46ch; margin-bottom:24px }

.perks{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:30px }
.perks li{ display:flex; align-items:center; gap:11px; font-size:15px; color:var(--dim) }
.perks i{
  display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px;
  border-radius:50%; background:rgba(0,229,155,.16); color:var(--home);
  font-style:normal; font-size:12px; font-weight:700;
}
.reseller-cta{ display:flex; flex-wrap:wrap; gap:12px }

/* cubo 3D girando */
.reseller-art{ position:relative; z-index:1; display:grid; place-items:center; perspective:900px; min-height:230px }
.box-3d{ position:relative; width:180px; height:180px; transform-style:preserve-3d; animation:spin 15s linear infinite }
@keyframes spin{ to{ transform:rotateX(-18deg) rotateY(360deg) } }
.box-face{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:18px;
  font-family:var(--font-d); font-weight:700; font-size:15px; letter-spacing:-.02em;
  border-radius:14px; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.05); backdrop-filter:blur(6px);
}
.f1{ transform:translateZ(90px);                     color:var(--create); border-color:rgba(245,255,0,.4) }
.f2{ transform:rotateY(120deg) translateZ(90px);     color:var(--geek);   border-color:rgba(255,31,109,.4) }
.f3{ transform:rotateY(240deg) translateZ(90px);     color:var(--home);   border-color:rgba(0,229,155,.4) }


/* ===================== CHAMADA FINAL ===================== */
.final{ text-align:center }
.final .wrap{ display:flex; flex-direction:column; align-items:center; gap:16px }
.final h2{ font-size:clamp(30px,5vw,50px) }
.final p{ color:var(--dim) }
.final .btn{ margin-top:10px }


/* ===================== RODAPÉ ===================== */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); padding:60px 0 0 }
.foot-inner{ display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; padding-bottom:44px }
.foot-desc{ font-size:14px; color:var(--faint); margin-top:12px; max-width:30ch }
.foot-cols{ display:flex; gap:64px; flex-wrap:wrap }
.foot-cols h5{ font-size:13px; margin-bottom:14px; letter-spacing:.04em }
.foot-cols a{ display:block; font-size:14px; color:var(--faint); margin-bottom:9px; transition:color .2s }
.foot-cols a:hover{ color:var(--create) }
.foot-bottom{ border-top:1px solid var(--line); padding-top:22px; padding-bottom:26px; font-size:13px; color:var(--faint) }


/* ===================== WHATSAPP FLUTUANTE ===================== */
.wpp-float{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#062B16;
  box-shadow:0 12px 32px -8px rgba(37,211,102,.6);
  transition:transform .25s;
}
.wpp-float:hover{ transform:scale(1.1) translateY(-2px) }


/* ===================== ANIMAÇÃO DE ENTRADA ===================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1) }
.reveal.is-in{ opacity:1; transform:none }


/* ===================== CELULAR / TABLET ===================== */
@media (max-width:960px){
  .calc{ grid-template-columns:1fr }
  .reseller{ grid-template-columns:1fr; padding:44px 30px; text-align:center }
  .reseller-txt > p{ margin-inline:auto }
  .perks{ align-items:center }
  .reseller-cta{ justify-content:center }
  .tabs{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:760px){
  .nav-toggle{ display:flex }
  .nav-links{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(7,7,12,.97); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line); padding:14px 24px 24px;
    transform:translateY(-120%); transition:transform .35s cubic-bezier(.22,1,.36,1);
  }
  .nav-links.is-open{ transform:none }
  .nav-links a:not(.btn){ text-align:center; margin-bottom:9px }
  .nav-links .btn{ margin-top:6px }

  .hero{ padding:140px 0 80px }
  .section{ padding:76px 0 }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .panel-head{ flex-direction:column; align-items:flex-start }
  .foot-cols{ gap:38px }
}

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


/* respeita quem prefere menos animação */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
  .reveal{ opacity:1; transform:none }
}


/* ===================== LOGIN / CADASTRO (js/auth-ui.js) ===================== */

/* botão "Entrar" / "Olá, Nome" no menu */
.nav-auth{ display:inline-flex; align-items:center; gap:10px }
.nav-auth-ola{ font-size:13.5px; color:var(--dim); white-space:nowrap }
.nav-auth-sair{
  background:none; border:0; cursor:pointer; padding:4px 2px;
  font-size:12.5px; color:var(--faint); text-decoration:underline; transition:color .2s;
}
.nav-auth-sair:hover{ color:var(--geek) }

.nav-auth-selo{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--home); border:1px solid rgba(0,229,155,.4); background:rgba(0,229,155,.12);
  padding:3px 8px; border-radius:100px; white-space:nowrap;
}

.auth-overlay{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:24px; background:rgba(4,4,8,.72); backdrop-filter:blur(6px);
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{ from{ opacity:0 } }

.auth-modal{
  position:relative; width:100%; max-width:400px; padding:34px 30px 30px;
  border-radius:22px; background:var(--bg-2); border:1px solid var(--line);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  animation:authPop .25s cubic-bezier(.22,1,.36,1);
}
@keyframes authPop{ from{ opacity:0; transform:translateY(14px) scale(.98) } }

.auth-close{
  position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); color:var(--dim);
  cursor:pointer; font-size:13px; transition:background .2s, color .2s;
}
.auth-close:hover{ background:var(--geek); color:#fff; border-color:transparent }

.auth-tabs{ display:flex; gap:8px; margin-bottom:24px; padding:4px; border-radius:100px; background:var(--surface) }
.auth-tab{
  flex:1; padding:10px; border-radius:100px; border:0; cursor:pointer;
  background:none; color:var(--faint); font-family:var(--font-d); font-weight:600; font-size:14px;
  transition:background .2s, color .2s;
}
.auth-tab.is-active{ background:var(--create); color:#0A0A0F }

.auth-form{ display:none; flex-direction:column; gap:16px }
.auth-form.is-active{ display:flex }
.auth-form .field input{
  padding:13px 15px; border-radius:12px; width:100%;
  background:var(--bg); border:1px solid var(--line); color:var(--txt); font-size:14.5px;
  transition:border-color .2s;
}
.auth-form .field input:focus{ outline:none; border-color:var(--create) }
.auth-dica{ font-size:12px; color:var(--faint); margin-top:-10px }
.auth-erro{
  padding:11px 14px; border-radius:10px; font-size:13.5px;
  background:rgba(255,31,109,.1); border:1px solid rgba(255,31,109,.3); color:#ffb3c9;
}