/* ===== ELITE SKINS - tema laranja/dourado (estrutura baseada na LP da Comunidade/PK Skins) ===== */
:root{
  --bg:#08080D;
  --bg-alt:#0C0C13;
  --card:#14141F;
  --line:rgba(255,138,26,.14);
  --line-forte:rgba(255,138,26,.32);
  --laranja:#FF6A1A;
  --laranja-claro:#FFC93C;
  --vermelho:#FF3D5E;
  --txt:#F5F5F7;
  --mut:#9A9AA8;
  --grad:linear-gradient(135deg,#FFC93C 0%,#FF6A1A 55%,#FF3D5E 100%);
  --raio:16px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  padding-bottom:84px; /* espaço da barra fixa mobile */
}

img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
.center{text-align:center}
.mt{margin-top:40px}

/* ---- tipografia ---- */
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:900}
h1{font-size:clamp(2rem,7vw,3.6rem);text-transform:uppercase;margin-bottom:20px}
h2{font-size:clamp(1.6rem,4.6vw,2.6rem);text-transform:uppercase;text-align:center;margin-bottom:14px}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
h1 em,h2 em{
  font-style:italic;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.sub{color:var(--mut);font-size:clamp(.98rem,2.4vw,1.12rem);max-width:620px;margin:0 auto 28px}
.secao-sub{color:var(--mut);text-align:center;margin-bottom:44px}
.micro{color:#6B6B78;font-size:.78rem;margin-top:14px;letter-spacing:.02em}

/* ---- botões ---- */
.btn{
  display:inline-block;border:0;cursor:pointer;
  font-family:inherit;font-weight:900;font-size:.92rem;
  text-transform:uppercase;letter-spacing:.08em;
  color:#1A0A00;background:var(--grad);
  padding:18px 38px;border-radius:999px;
  box-shadow:0 8px 30px rgba(255,106,26,.4);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  animation:pular 1.6s ease-in-out infinite;
}
.btn:hover{animation-play-state:paused;transform:translateY(-2px) scale(1.02);box-shadow:0 12px 40px rgba(255,106,26,.58);filter:brightness(1.06)}
.btn:active{animation-play-state:paused;transform:translateY(0) scale(.99)}
.btn-lg{padding:21px 46px;font-size:1rem}
.btn-block{display:block;width:100%;padding:17px 20px;font-size:.9rem}

@keyframes pular{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

/* ---- hero ---- */
.hero{position:relative;text-align:center;padding:44px 0 72px;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:min(900px,120vw);height:640px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,106,26,.26) 0%,rgba(255,106,26,.07) 42%,transparent 70%);
}
.hero .wrap{position:relative}
.hero-logo-box{margin-bottom:20px}
.hero-logo{
  width:min(280px,60%);max-height:30vh;object-fit:contain;margin:0 auto;
  filter:drop-shadow(0 12px 48px rgba(255,106,26,.42));
  border-radius:22px;
  animation:flutua 6s ease-in-out infinite;
}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.selo{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:#FFD98A;background:rgba(255,106,26,.1);
  border:1px solid var(--line-forte);border-radius:999px;
  padding:8px 18px;margin-bottom:24px;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--vermelho);box-shadow:0 0 0 0 rgba(255,61,94,.6);animation:pulsa 2s infinite}
@keyframes pulsa{70%{box-shadow:0 0 0 9px rgba(255,61,94,0)}100%{box-shadow:0 0 0 0 rgba(255,61,94,0)}}

/* ---- números ---- */
.numeros{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,106,26,.035);padding:44px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.num strong{
  display:block;font-size:clamp(1.9rem,6vw,3rem);font-weight:900;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.num span{display:block;margin-top:10px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--mut)}

/* ---- seções ---- */
.secao{padding:76px 0}
.secao.alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- comparativo ---- */
.comp{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin-top:8px}
.comp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--raio);padding:30px 26px}
.comp-card.ruim{opacity:.72}
.comp-card.bom{border-color:var(--line-forte);box-shadow:0 0 44px rgba(255,106,26,.16)}
.comp-tag{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);margin-bottom:10px}
.comp-val{display:block;font-size:clamp(1.8rem,5vw,2.6rem);font-weight:900;letter-spacing:-.02em;margin-bottom:18px}
.comp-card.ruim .comp-val{color:#8A8A94;text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:rgba(255,90,90,.55)}
.comp-card.bom .comp-val{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.comp-card ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.comp-card li{position:relative;padding-left:22px;font-size:.9rem;color:var(--mut)}
.comp-card li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:2px;background:#3B3B47}
.comp-card.bom li::before{background:var(--laranja-claro);box-shadow:0 0 10px rgba(255,201,60,.7)}
.comp-vs{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.2em;color:#5A5A66;text-align:center}

/* ---- cards de benefício ---- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--raio);
  padding:30px 26px;transition:border-color .2s ease,transform .2s ease;
}
.card:hover{border-color:var(--line-forte);transform:translateY(-3px)}
.ico{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;margin-bottom:16px;
  background:rgba(255,106,26,.14);border:1px solid var(--line-forte);color:var(--laranja-claro);
}
.ico svg{width:23px;height:23px}
.card h3{margin-bottom:8px}
.card p{color:var(--mut);font-size:.92rem}

/* ---- passos ---- */
.passos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.passos li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--raio);padding:34px 26px 28px}
.passo-n{
  position:absolute;top:-18px;left:26px;
  width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1rem;color:#1A0A00;background:var(--grad);
  box-shadow:0 6px 20px rgba(255,106,26,.42);
}
.passos h3{margin:6px 0 8px}
.passos p{color:var(--mut);font-size:.92rem}

/* ---- CTA final ---- */
.final{position:relative;text-align:center;padding:86px 0;overflow:hidden;border-top:1px solid var(--line)}
.final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,106,26,.22) 0%,transparent 62%);
}
.final .wrap{position:relative}
.final h2{margin-bottom:12px}

/* ---- rodapé ---- */
footer{padding:44px 20px;text-align:center;color:#5E5E6B;font-size:.82rem;border-top:1px solid var(--line)}
.foot-min{margin-top:8px;font-size:.72rem;color:#48485A}

/* ---- barra fixa mobile ---- */
.barra-fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(8,8,13,.92);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-forte);
}

/* ---- toast de entrada no grupo ---- */
.join-toast{
  position:fixed;left:14px;bottom:94px;z-index:60;
  display:flex;align-items:center;gap:10px;max-width:280px;
  padding:10px 14px;border-radius:12px;
  background:rgba(20,20,31,.96);border:1px solid var(--line);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);backdrop-filter:blur(6px);
  transform:translateY(20px);opacity:0;
  transition:transform .35s ease,opacity .35s ease;
  pointer-events:none;
}
.join-toast.show{transform:translateY(0);opacity:1}
.join-toast .avatar{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;color:#1A0A00;background:var(--grad);
}
.join-toast .msg{font-size:.78rem;line-height:1.35}
.join-toast .msg b{font-weight:700;color:var(--txt)}
.join-toast .msg small{display:block;color:var(--mut);font-size:.68rem;margin-top:1px}

@media(min-width:900px){
  .join-toast{bottom:24px}
}

/* ---- responsivo ---- */
@media(min-width:900px){
  body{padding-bottom:0}
  .barra-fixa{display:none}
}
@media(max-width:760px){
  .comp{grid-template-columns:1fr;gap:14px}
  .comp-vs{padding:2px 0}
  .cards{grid-template-columns:1fr}
  .passos{grid-template-columns:1fr;gap:26px}
  .secao{padding:60px 0}
}
@media(max-width:420px){
  .grid-3{gap:12px}
  .num span{font-size:.62rem;letter-spacing:.1em}
  .btn-lg{padding:19px 30px;font-size:.9rem}
  .join-toast{max-width:220px}
}

/* ---- modal do formulário ---- */
.lead-overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(4,4,7,.78);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
.lead-overlay.show{opacity:1;pointer-events:auto}

.lead-modal{
  position:relative;width:100%;max-width:380px;
  background:var(--card);border:1px solid var(--line-forte);border-radius:var(--raio);
  padding:32px 26px 28px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.7);
  transform:translateY(14px) scale(.98);
  transition:transform .22s ease;
}
.lead-overlay.show .lead-modal{transform:translateY(0) scale(1)}

.lead-modal h3{font-size:1.25rem;text-transform:uppercase;margin-bottom:8px}
.lead-modal p{color:var(--mut);font-size:.88rem;margin-bottom:22px}

.lead-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.06);color:var(--txt);
  font-size:1.3rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.lead-close:hover{background:rgba(255,255,255,.12)}

#lead-form{display:flex;flex-direction:column;gap:6px}
#lead-form label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin-top:10px}
#lead-form input{
  width:100%;padding:13px 14px;border-radius:10px;
  background:var(--bg);border:1px solid var(--line);color:var(--txt);
  font-family:inherit;font-size:.95rem;
}
#lead-form input:focus{outline:none;border-color:var(--line-forte)}
#lead-form input::placeholder{color:#5A5A66}
.lead-submit{width:100%;margin-top:22px;animation:none!important}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}