:root{
    
   /* ... suas variáveis já existentes ... */
  --wp-url: url("assets/wallpaper-catalog.jpg"); /* caminho do wallpaper */
  --wp-opacity: .22;   /* transparência do wallpaper */
  --wp-blur: 2px;      /* desfoque para não competir com o conteúdo */
  --wp-dim: 0.45;      /* escurecimento (brightness) */
  
  /* cores base */
  --bg1:#120A2C; --bg2:#2B1460;
  --brand:#6F3FF5; --brand2:#9858FF;
  --accent:#FFD14A; --accent2:#FFB000;
  --ink:#FFFFFF; --muted:#CEC8E6;
  --line:#ffffff22; --glass:#ffffff17; --glass2:#ffffff28;
  --card:#1B103D; --card2:#231250;

  /* estética */
  --r:18px; --shadow:0 14px 40px rgba(0,0,0,.42);
}

/* Reset / base */
*{box-sizing:border-box} html,body{margin:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);
     background:radial-gradient(1800px 800px at -10% -10%, #7E57FF25 0%, transparent 60%),
                radial-gradient(1400px 800px at 110% -10%, #FF2D9525 0%, transparent 60%),
                linear-gradient(135deg,var(--bg1),var(--bg2)) fixed;}

a{color:inherit;text-decoration:none}
.underline{text-decoration:underline}
.container{width:min(100%,1100px);margin-inline:auto;padding-inline:16px}
.row{display:flex;gap:14px}
.between{justify-content:space-between}
.center{align-items:center}
.wrap{flex-wrap:wrap}
.center{text-align:left}

h1{font-size:clamp(28px,7vw,48px);line-height:1.12;margin:0 0 10px}
h2{font-size:clamp(22px,5.5vw,34px);margin:0 0 14px}
h3{margin:0 0 8px}

.lead{color:var(--muted);margin:0 0 18px}
.pill{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#111;border-radius:10px;padding:2px 10px}
.pill-sm{background:#ffffff14;border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:12px}
.glow{filter:drop-shadow(0 0 14px #9f7bff80)}
.muted{color:#BEB9D3}
.center{text-align:center}

/* Topbar */
.topbar{position:sticky;top:0;z-index:50;background:#0D0720CC;backdrop-filter:saturate(150%) blur(8px);
        border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;padding-block:12px;font-weight:900}
.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
      background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:0 6px 20px #6f3ff555}
#navchk{display:none}
.menu-btn{font-size:22px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}
.nav{display:none;position:absolute;inset-inline:0;top:56px;background:#110A28;border-top:1px solid var(--line)}
.nav a{display:block;padding:14px 16px;border-bottom:1px solid var(--line)}
#navchk:checked ~ .menu-btn{background:#ffffff12}
#navchk:checked ~ .nav{display:block}

/* Hero */
.hero{padding:32px 0 14px; position:relative; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:-40% -20% auto -20%;
  height:120vh; background:conic-gradient(from 0deg,#6F3FF5 0%, #FF2D95 25%, #FFD14A 50%, #6F3FF5 75%, #FF2D95 100%);
  filter:blur(120px) opacity(.10); pointer-events:none;}
.grid-2{display:grid;gap:18px}
.hero__visual{display:flex;flex-direction:column;align-items:center}
.glass{background:linear-gradient(180deg,var(--glass2),var(--glass)); border:1px solid var(--glass2);
       border-radius:22px; padding:18px; box-shadow:var(--shadow)}
.tv{position:relative}
.tv::after{content:""; position:absolute; inset:auto -6% -8% -6%; height:18px; border-radius:999px;
  background:radial-gradient(closest-side, #00000055 0%, transparent 75%);}
.icon-grid{display:grid;grid-template-columns:repeat(4,64px);gap:12px}
.ic{height:64px;width:64px;display:grid;place-items:center;border-radius:14px;
    background:linear-gradient(135deg,#2a175a,#3a1f7b); border:1px solid #ffffff18; font-size:26px}

/* Chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:12px 0 0}
.chips li{background:#ffffff12;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-weight:700}

/* Cards gerais */
.cards{display:grid;grid-template-columns:1fr;gap:14px}
.card{background:linear-gradient(180deg,#1E1242,#1B103D);
      border:1px solid var(--line); border-radius:18px; padding:16px}

/* Painel resumo */
.panel{margin:10px auto 0}
.panel h3{margin:0 0 6px}

/* Planos */
.plans{padding:20px 0}
.plan__head{display:flex;align-items:center;gap:8px}
.plan__row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.price{font-size:20px;color:var(--accent);font-weight:900;text-shadow:0 0 12px #FFD14A55}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
       background:#ffffff12;padding:6px 10px;border-radius:999px}
.badge.hot{background:linear-gradient(135deg,#FF5C99,#FF2D95); border-color:#FF2D95}
.badge.ok{background:linear-gradient(135deg,#14d39a,#12b07f); border-color:#10a372}
.plan__desc{color:var(--muted); margin:8px 0 12px}
.plan__cta{margin-top:4px}
.highlight{outline:2px solid var(--accent); box-shadow:0 18px 36px rgba(0,0,0,.45)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;padding:14px 18px;
     font-weight:900;box-shadow:var(--shadow);transition:filter .2s,transform .03s}
.btn:active{transform:translateY(1px)}
.btn-xl{padding-block:16px}
.btn-block{width:100%}
.btn--primary{background:linear-gradient(135deg,var(--brand),var(--brand2))}
.btn--yellow{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#111}
.btn--ghost{background:transparent;border:1px solid var(--glass2)}

/* Benefits */
.benefits{padding:40px 0}
.benefit-grid{display:grid;grid-template-columns:1fr;gap:12px}
.bcard{background:linear-gradient(180deg,#211149,#1b103d);
       border:1px solid var(--line); border-radius:16px; padding:14px}

/* FAQ */
.faq{padding:40px 0}
details{background:linear-gradient(180deg,#1f1144,#1a0f3a);
        border:1px solid var(--line); border-radius:14px; padding:12px; margin:10px 0}
summary{cursor:pointer;font-weight:900}

/* CTA flutuante */
/* Botão flutuante neon/glass (central no mobile) */
.float-cta{
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;

  border-radius: 999px;
  font-weight: 1000;
  color: #111;

  background:
    linear-gradient(135deg, var(--accent), var(--accent2)); /* amarelo -> dourado */
  box-shadow:
    0 8px 26px rgba(0,0,0,.35),
    0 0 16px #ffd14a66; /* brilho externo */

  /* “vidro” leve por cima */
  position: fixed;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);

  /* animações suaves */
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
  will-change: transform, filter, box-shadow;
  text-align: center;
  white-space: nowrap;
}

/* Glow anelar */
.float-cta::before{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 50%, #ffd14a66 0%, transparent 60%);
  opacity: .0;
  transition: opacity .2s ease;
  pointer-events: none;
}

/* Hover/focus */
.float-cta:hover,
.float-cta:focus-visible{
  filter: brightness(1.04) saturate(1.02);
  box-shadow:
    0 10px 32px rgba(0,0,0,.38),
    0 0 22px #ffd14a77;
}
.float-cta:focus-visible{
  outline: 2px solid #FFE07A;
  outline-offset: 2px;
}
.float-cta:hover::before{ opacity: .55; }

/* Press/active */
.float-cta:active,
.float-cta.press{
  transform: translateX(-50%) translateY(1px) scale(.98);
  filter: brightness(.98);
  box-shadow:
    0 6px 18px rgba(0,0,0,.32),
    0 0 14px #ffd14a66;
}

/* Desktop: encostar à direita */
@media (min-width: 980px){
  .float-cta{
    left: auto;
    right: 22px;
    transform: none; /* remove translateX(-50%) */
    padding: 14px 20px;
  }
  .float-cta:active,
  .float-cta.press{
    transform: translateY(1px) scale(.98); /* ajuste sem translateX */
  }
}

/* Acessibilidade: reduzir animações se preferido */
@media (prefers-reduced-motion: reduce){
  .float-cta{ transition: none; }
  .float-cta::before{ transition: none; }
}

}

/* Footer */
.footer{padding:20px 0; color:#bfbad1; border-top:1px solid var(--line); background:#0B061B}

/* Desktop upgrades */
@media (min-width: 980px){
  .menu-btn{display:none}
  .nav{display:flex;position:static;background:transparent;border:0;gap:10px}
  .nav a{border:0;padding:10px 12px}
  .grid-2{grid-template-columns:1.1fr .9fr; gap:22px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .benefit-grid{grid-template-columns:repeat(4,1fr)}
}

/* Botão: estados de foco/ativo e “press” */
.plan__cta {
  will-change: transform, box-shadow, filter;
}
.plan__cta:focus-visible {
  outline: 2px solid #FFD14A;
  outline-offset: 2px;
  filter: brightness(1.05);
}
.plan__cta:active,
.plan__cta.press {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  filter: brightness(0.98);
}

/* (Opcional) desativa clique no card por segurança visual */
.plan { cursor: default; }
.plan a { cursor: pointer; }

/* rolagem suave por padrão (fallback do JS) */
html { scroll-behavior: smooth; }

/* garante que as âncoras não fiquem escondidas atrás da topbar */
#planos, #beneficios, #faq { scroll-margin-top: 72px; } /* ajuste se sua topbar mudar de altura */

/* melhora clique nos itens do menu */
.nav a { touch-action: manipulation; }

/* Camada de wallpaper – fica por trás do gradiente e do conteúdo */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2; /* atrás de todo o conteúdo */
  background-image: var(--wp-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(var(--wp-blur)) saturate(0.9) brightness(var(--wp-dim));
  opacity: var(--wp-opacity);
  transform: translateZ(0); /* performance */
  pointer-events: none;
}

/* Máscara/gradiente por cima do wallpaper para manter o look neon/glass */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1; /* entre o wallpaper e o conteúdo */
  background:
    radial-gradient(1200px 700px at 8% 0%, #7E57FF33 0%, transparent 60%),
    radial-gradient(1200px 700px at 92% 0%, #FF2D9530 0%, transparent 60%),
    linear-gradient(180deg, #00000060 0%, #00000020 30%, #00000060 100%); /* escurece topo/rodapé */
  pointer-events: none;
}

/* Em telas menores reduz blur/efeito para poupar GPU */
@media (max-width: 980px){
  :root{
    --wp-opacity: .18;
    --wp-blur: 1.2px;
    --wp-dim: 0.50;
  }
}