/* ==========================================================
   PACK 475M — VICE DESIGN SYSTEM (overlay)
   Premium / cinematic / Vice City. Carregado após site.css.
   ========================================================== */

:root{
  /* brand */
  --p-magenta:#FF1493;
  --p-hot:#FF2D9A;
  --p-neon:#FF00C8;
  --p-orange:#FF6B35;
  --p-gold:#FFB52E;
  --p-blue:#3B5CFF;
  --p-cyan:#00D9FF;
  --p-deep:#240044;
  --p-dark:#12001F;
  --p-mid:#07050D;
  --p-surface:#110A1C;
  --p-surface-2:#1A0D29;
  --p-text-2:#C9BDD8;

  /* legacy aliases (mantém compatibilidade com site.css) */
  --pink:var(--p-magenta);
  --purple:#7B00FF;
  --cyan:var(--p-cyan);
  --yellow:var(--p-gold);
  --bg:var(--p-mid);
  --bg2:var(--p-dark);
  --card:var(--p-surface);
  --line:rgba(255,255,255,.09);
  --text:#FFFFFF;
  --muted:var(--p-text-2);

  /* gradients */
  --g-sunset:linear-gradient(100deg,#FF1493,#FF4F9A 35%,#FF8A5B 70%,#FFB52E);
  --g-neon:linear-gradient(100deg,#7B00FF,#FF00C8 55%,#FF1493);
  --g-vice:linear-gradient(100deg,#243BFF,#8A2BE2 50%,#FF1493);
  --g-cta:linear-gradient(95deg,#FF1493,#FF4F8B 50%,#FF7A3D);

  /* system */
  --r-card:18px;
  --r-sm:14px;
  --shadow-deep:0 24px 60px -24px rgba(0,0,0,.9);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- canvas: Vice City à noite ---------- */
body{
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(255,20,147,.16), transparent 65%),
    radial-gradient(820px 520px at 88% 4%, rgba(59,92,255,.14), transparent 62%),
    radial-gradient(1100px 700px at 50% 108%, rgba(255,107,53,.10), transparent 70%),
    linear-gradient(180deg,#07050D 0%,#12001F 42%,#07050D 100%);
  background-attachment:fixed;
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 10%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 10%, #000 0%, transparent 75%);
  opacity:.55;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.7'/></svg>");
}
section, footer, .topbar{position:relative;z-index:1;}

/* horizonte neon sutil entre seções */
section + section::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1120px,92%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,20,147,.45),rgba(0,217,255,.28),transparent);
  opacity:.6;
}

/* ---------- tipografia ---------- */
h1,h2,h3,.display{letter-spacing:.4px;}
h1{font-size:clamp(2.1rem,6.2vw,4.4rem);}
h2{font-size:clamp(1.7rem,4.2vw,3rem);}
p{color:var(--muted);}
.grad-text,.head-accent,.plat-grad{
  background:var(--g-sunset);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,20,147,.35));
}
.eyebrow{
  color:#fff;
  border:1px solid rgba(255,20,147,.35);
  background:linear-gradient(180deg,rgba(255,20,147,.16),rgba(255,20,147,.05));
  backdrop-filter:blur(8px);
  letter-spacing:2.4px;
  box-shadow:0 0 24px -10px rgba(255,20,147,.8) inset;
}

/* ---------- botões ---------- */
.btn{
  background:var(--g-cta);
  border-radius:var(--r-sm);
  font-size:clamp(1rem,2.4vw,1.2rem);
  padding:20px 38px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 18px 46px -16px rgba(255,20,147,.85);
  animation:none;
}
.btn::after{animation:none;opacity:.35;background:var(--g-cta);}
.btn::before{
  content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);animation:ds-shine 4.2s ease-in-out infinite;
}
@keyframes ds-shine{0%,62%{left:-140%}88%,100%{left:160%}}
.btn:hover{transform:translateY(-2px);}
.btn.outline{
  background:transparent;border:1px solid rgba(255,20,147,.55);
  box-shadow:none;color:#fff;
}
.btn.outline::before,.btn.outline::after{display:none;}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:1px;
  padding:18px 30px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);backdrop-filter:blur(10px);
  color:#fff;transition:all .2s var(--ease);
}
.btn-ghost:hover{border-color:rgba(0,217,255,.55);background:rgba(0,217,255,.08);transform:translateY(-2px);}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin:6px 0 10px;}
.cta-micro{
  display:block;margin-top:12px;font-size:.74rem;letter-spacing:2.2px;
  text-transform:uppercase;font-weight:800;color:var(--p-text-2);opacity:.85;
}

/* ---------- sistema de cards ---------- */
.card,.feat-card,.premium-feat-card,.stat-card,.step,.plat-card,.price-card,
.access-card,.community-card,.guarantee-card,.lead-card,.hero-cta-card,details{
  background:linear-gradient(180deg,rgba(26,13,41,.72),rgba(7,5,13,.82)) !important;
  border:1px solid rgba(255,20,147,.16) !important;
  border-radius:var(--r-card) !important;
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-deep);
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.card:hover,.feat-card:hover,.premium-feat-card:hover,.stat-card:hover,.step:hover,.plat-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,20,147,.55) !important;
  box-shadow:var(--shadow-deep),0 0 42px -18px rgba(255,20,147,.8);
}
.price-card.pro{
  border:1px solid rgba(255,181,46,.42) !important;
  box-shadow:var(--shadow-deep),0 0 90px -40px rgba(255,181,46,.9);
}
details{padding:2px 4px;}
details summary{color:#fff;}

/* ícones */
.ic,.premium-ic{
  background:linear-gradient(180deg,rgba(255,20,147,.18),rgba(123,0,255,.12)) !important;
  border:1px solid rgba(255,20,147,.3) !important;
  border-radius:14px !important;
}

/* topbar premium */
.topbar{
  background:rgba(7,5,13,.72);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,20,147,.16);
}
.topbar-cta{
  background:var(--g-cta);border-radius:12px;color:#fff;
  box-shadow:0 10px 26px -12px rgba(255,20,147,.9);
}
.topnav a:hover{color:var(--p-cyan);}

/* hero */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,5,13,.35),rgba(7,5,13,.85) 70%,#07050D);
}
.hero-inner{position:relative;z-index:2;}
.hero-logo{filter:drop-shadow(0 0 42px rgba(255,20,147,.65));animation:ds-float 6s ease-in-out infinite;}
@keyframes ds-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* mockups com glow */
.access-visual img,.community-visual img{
  border-radius:20px;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.75));
  animation:ds-float 8s ease-in-out infinite;
}
.mockup-glow,.community-glow{
  background:radial-gradient(closest-side,rgba(255,20,147,.35),transparent 72%) !important;
  filter:blur(30px);
}

/* ---------- canais CYBERNETT GAMER ---------- */
.channels{padding:70px 0;}
.channels-banner{
  position:relative;border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,20,147,.28);
  box-shadow:var(--shadow-deep),0 0 80px -40px rgba(255,20,147,.9);
}
.channels-banner img{width:100%;display:block;}
.channels-banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(7,5,13,.92));
}
.channels-body{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;
  margin-top:-56px;position:relative;z-index:2;
  padding:22px;border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(26,13,41,.86),rgba(7,5,13,.92));
  border:1px solid rgba(255,20,147,.22);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-deep);
}
.channels-avatar{
  width:132px;height:132px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,20,147,.5);
  box-shadow:0 0 44px -12px rgba(255,20,147,.9);
  animation:ds-float 7s ease-in-out infinite;
}
.channels-body h2{margin-bottom:8px;}
.channels-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;}
.channels-links a{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:12px;font-weight:800;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  transition:all .2s var(--ease);min-height:50px;
}
.channels-links a:hover{transform:translateY(-2px);border-color:rgba(255,20,147,.6);background:rgba(255,20,147,.12);}

/* ---------- final CTA cinematográfico ---------- */
.final-cta{
  padding:70px 24px;border-radius:26px;
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(255,20,147,.22), transparent 70%),
    linear-gradient(180deg,rgba(36,0,68,.75),rgba(7,5,13,.95));
  border:1px solid rgba(255,20,147,.25);
  box-shadow:var(--shadow-deep);
}
.final-cta::after{
  content:"ACESSO IMEDIATO • 7 DIAS DE GARANTIA";
  display:block;margin-top:16px;font-size:.74rem;letter-spacing:2.4px;
  font-weight:800;color:var(--p-text-2);
}

/* ---------- entrada progressiva ---------- */
@media (prefers-reduced-motion:no-preference){
  section > .wrap{animation:ds-in .7s var(--ease) both;}
  @keyframes ds-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .channels-body{grid-template-columns:1fr;text-align:center;justify-items:center;margin-top:-36px;}
  .channels-links{justify-content:center;}
  .channels-avatar{width:104px;height:104px;}
}
@media (max-width:520px){
  .btn{width:100%;padding:18px 22px;}
  .btn-ghost{width:100%;}
  .final-cta{padding:44px 18px;border-radius:20px;}
  body::before{background-size:44px 44px;}
}
@media (hover:none){
  .card:hover,.feat-card:hover,.stat-card:hover,.step:hover,.plat-card:hover{transform:none;}
}