/* ===== PK SKINS - tema azul ===== */
:root{
  --bg:#04070E;
  --bg-alt:#070C17;
  --card:#0A1120;
  --line:rgba(72,169,255,.14);
  --line-forte:rgba(72,169,255,.3);
  --azul:#0B7BE8;
  --azul-claro:#48A9FF;
  --azul-escuro:#0846A8;
  --txt:#EAF2FF;
  --mut:#8DA0BC;
  --grad:linear-gradient(135deg,#48A9FF 0%,#0B7BE8 45%,#0846A8 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:linear-gradient(180deg,#9FD1FF 0%,#0B7BE8 100%);
  -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:#61748F;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:#fff;background:var(--grad);
  padding:18px 38px;border-radius:999px;
  box-shadow:0 8px 30px rgba(11,123,232,.38);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 40px rgba(11,123,232,.55);filter:brightness(1.08)}
.btn:active{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}

/* ---- 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(11,123,232,.28) 0%,rgba(11,123,232,.07) 42%,transparent 70%);
}
.hero .wrap{position:relative}
.hero-logo-box{margin-bottom:20px}
.hero-logo{
  width:min(430px,80%);max-height:34vh;object-fit:contain;margin:0 auto;
  filter:drop-shadow(0 12px 48px rgba(11,123,232,.42));
  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:#9FD1FF;background:rgba(11,123,232,.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:#22D67A;box-shadow:0 0 0 0 rgba(34,214,122,.6);animation:pulsa 2s infinite}
@keyframes pulsa{70%{box-shadow:0 0 0 9px rgba(34,214,122,0)}100%{box-shadow:0 0 0 0 rgba(34,214,122,0)}}

/* ---- números ---- */
.numeros{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(11,123,232,.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(11,123,232,.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:#7C8AA0;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:#3B4757}
.comp-card.bom li::before{background:var(--azul-claro);box-shadow:0 0 10px rgba(72,169,255,.7)}
.comp-vs{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.2em;color:#4A5A72;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(11,123,232,.12);border:1px solid var(--line-forte);color:var(--azul-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:#fff;background:var(--grad);
  box-shadow:0 6px 20px rgba(11,123,232,.4);
}
.passos h3{margin:6px 0 8px}
.passos p{color:var(--mut);font-size:.92rem}

/* ---- carrossel de provas ---- */
.carousel-container{width:100%;overflow:hidden;display:flex;margin-top:40px}
.carousel-track{display:flex;width:max-content;animation:rola 30s linear infinite}
.carousel-track:hover{animation-play-state:paused}
@keyframes rola{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.carousel-slide{padding:0 12px;flex-shrink:0}
.carousel-slide img{
  width:300px;max-width:none;border-radius:var(--raio);border:1px solid var(--line);
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
@media(min-width:768px){.carousel-slide img{width:420px}}

/* ---- 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(11,123,232,.24) 0%,transparent 62%);
}
.final .wrap{position:relative}
.final-ico{width:200px;margin:0 auto 24px;filter:drop-shadow(0 0 26px rgba(11,123,232,.5))}
.final h2{margin-bottom:12px}

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

/* ---- 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(4,7,14,.92);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-forte);
}

/* ---- 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}
  .topo-logo{height:46px}
}
@media(max-width:420px){
  .grid-3{gap:12px}
  .num span{font-size:.62rem;letter-spacing:.1em}
  .btn-lg{padding:19px 30px;font-size:.9rem}
}

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