/* =================================================================
   SmartFlux — Liquid Glass v3 (drop-in replacement de v2-glass.css)
   -----------------------------------------------------------------
   Princípios da correção:
   1. Vidro precisa de LUZ COLORIDA atrás para refratar (blobs mais vivos).
   2. Fill capta um TINT, não é branco puro.
   3. Borda-LUZ direcional (viva no topo-esq, some embaixo-dir) no lugar
      do border uniforme.
   4. SHEEN diagonal (mix-blend screen) = o reflexo que "vende" o vidro.
   5. DOIS níveis de espessura (fino vs. strong) para criar hierarquia.
   6. Blur menor (~20px) + brightness, em vez de blur(34px) caríssimo.
   7. Profundidade: inner-shadow no topo E embaixo + drop em camadas.
   ================================================================= */

:root{
  --lg-blur:        blur(20px) saturate(190%) brightness(1.06);
  --lg-blur-strong: blur(26px) saturate(200%) brightness(1.09);
  --lg-blur-light:  blur(14px) saturate(170%);
  --lg-tint-h: 168;        /* matiz teal captado pelo vidro (coeso com o acento esmeralda) */

  /* Fill com tint no meio do gradiente (não branco chapado) */
  --lg-fill: linear-gradient(150deg,
              rgba(255,255,255,.13) 0%,
              hsla(var(--lg-tint-h),70%,72%,.05) 44%,
              rgba(255,255,255,.03) 100%);
  --lg-fill-strong: linear-gradient(150deg,
              rgba(255,255,255,.17) 0%,
              hsla(var(--lg-tint-h),75%,74%,.08) 46%,
              rgba(255,255,255,.05) 100%);

  /* Sombras: rim specular no topo + profundidade embaixo + drop em camadas */
  --lg-rim: inset 0 1px .5px rgba(255,255,255,.6),
            inset 0 -22px 36px -26px rgba(0,0,0,.7),
            0 16px 44px -18px rgba(0,0,0,.62),
            0 2px 8px -4px rgba(0,0,0,.5);
  --lg-rim-strong: inset 0 1.2px .5px rgba(255,255,255,.72),
                   inset 0 -26px 46px -28px rgba(0,0,0,.74),
                   0 26px 72px -22px rgba(0,0,0,.68);
}

/* -----------------------------------------------------------------
   .lg — aplique junto à classe do componente. Cria borda-luz + sheen
   via ::before / ::after. (Os componentes abaixo já recebem isso.)
   ----------------------------------------------------------------- */
.nav, .hero h1, .hero-trust-row, .hero-tag, .stage-inner, .pain,
.method-card, .table-card, .result-card, .cred-card, .cost-box,
.price, .price-note-card, .user-matrix, .pro-card, .faq,
.cta-final, .btn--ghost, .foot-social-btn{
  position: relative;
  isolation: isolate;
}

/* Borda-luz direcional — substitui o border:1px uniforme.
   Viva no topo-esquerda (onde a luz bate), some no canto oposto. */
.hero h1::after, .stage-inner::before, .pain::after, .method-card::after,
.table-card::after, .result-card::after, .cred-card::after, .cost-box::after,
.price::after, .price-note-card::after, .user-matrix::after, .pro-card::after,
.faq::after, .cta-final::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none; z-index:2;
  background:linear-gradient(145deg,
    rgba(255,255,255,.7) 0%, rgba(255,255,255,.14) 30%,
    transparent 56%, rgba(255,255,255,.16) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}

/* ====================== NAVBAR ====================== */
.nav{
  background: rgba(12,15,24,.5) !important;
  -webkit-backdrop-filter: var(--lg-blur-light); backdrop-filter: var(--lg-blur-light);
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px -18px rgba(0,0,0,.6);
}
.nav.scrolled{ background: rgba(10,13,22,.66) !important; }

/* ====================== HERO TITLE PLAQUE ====================== */
.hero h1{
  background: var(--lg-fill-strong) !important;
  -webkit-backdrop-filter: var(--lg-blur-strong) !important; backdrop-filter: var(--lg-blur-strong) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--lg-rim-strong) !important;
}
/* sheen no topo (o reflexo) */
.hero h1::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22) 0%, transparent 30%),
    radial-gradient(130% 70% at 84% -12%, rgba(255,255,255,.14), transparent 56%) !important;
  mix-blend-mode: screen;
}

/* ====================== HERO TRUST ROW + TAG ====================== */
.hero-trust-row, .hero-tag{
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: var(--lg-blur-light); backdrop-filter: var(--lg-blur-light);
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 24px -14px rgba(0,0,0,.5);
}

/* ====================== STAGE CONSOLE (vidro fumê) ====================== */
.stage-inner{
  background: linear-gradient(180deg, rgba(13,17,29,.6) 0%, rgba(8,11,20,.72) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%) !important; backdrop-filter: blur(26px) saturate(160%) !important;
  box-shadow: var(--lg-rim-strong) !important;
}
.stage::before, .stage::after{ opacity:.5 !important; }   /* deixa a luz de trás aparecer mais */

/* ====================== CARDS GENÉRICOS ====================== */
.pain, .method-card, .table-card, .result-card, .cred-card,
.cost-box, .price, .price-note-card, .user-matrix, .pro-card, .faq{
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid transparent !important;
  box-shadow: var(--lg-rim);
}
/* sheen diagonal genérico */
.pain::before, .method-card::before, .table-card::before, .result-card::before,
.cred-card::before, .cost-box::before, .price::before, .pro-card::before, .faq::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16) 0%, transparent 28%),
    radial-gradient(130% 70% at 84% -12%, rgba(255,255,255,.10), transparent 55%);
  mix-blend-mode: screen;
}
.pain:hover, .result-card:hover, .cred-card:hover, .pro-card:hover{
  background: var(--lg-fill-strong) !important;
  box-shadow: var(--lg-rim-strong);
  transform: translateY(-4px);
}

/* superfícies "strong" (mais espessas) */
.price.featured, .cost-box.accent, .cta-final, .price-note-card, .user-matrix{
  -webkit-backdrop-filter: var(--lg-blur-strong) !important; backdrop-filter: var(--lg-blur-strong) !important;
  box-shadow: var(--lg-rim-strong) !important;
}

/* ====================== ACCENT GLASS (featured / accent) ====================== */
.cost-box.accent{
  background: linear-gradient(150deg,
    color-mix(in oklab, var(--a1) 12%, rgba(255,255,255,.16)) 0%,
    color-mix(in oklab, var(--a1) 5%,  rgba(255,255,255,.05)) 100%) !important;
}
.price.featured{
  background: linear-gradient(150deg,
    color-mix(in oklab, var(--a1) 16%, rgba(255,255,255,.16)) 0%,
    color-mix(in oklab, var(--a3) 9%,  rgba(255,255,255,.05)) 100%) !important;
}
.price.featured::after{
  background:linear-gradient(145deg,
    color-mix(in oklab, var(--a1) 60%, #fff) 0%, rgba(255,255,255,.18) 32%,
    transparent 56%, color-mix(in oklab, var(--a2) 40%, transparent) 100%) !important;
}
.cta-final{
  background:
    radial-gradient(55% 55% at 20% 0%,  color-mix(in oklab, var(--a2) 22%, transparent), transparent 50%),
    radial-gradient(45% 45% at 80% 100%, color-mix(in oklab, var(--a3) 18%, transparent), transparent 50%),
    var(--lg-fill-strong) !important;
}

/* ====================== FAQ ====================== */
.faq{ -webkit-backdrop-filter: var(--lg-blur-light); backdrop-filter: var(--lg-blur-light); }
.faq[open]{ background: var(--lg-fill-strong) !important; box-shadow: var(--lg-rim-strong); }

/* ====================== BUTTONS ====================== */
.btn--primary{
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.22),
    0 10px 28px -10px color-mix(in oklab, var(--a1) 60%, transparent);
}
.btn--ghost{
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 22px -12px rgba(0,0,0,.5);
}
.btn--ghost::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(145deg, rgba(255,255,255,.5), transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
}

/* ====================== FOOTER ====================== */
footer{
  background: rgba(10,13,22,.55);
  -webkit-backdrop-filter: var(--lg-blur-light); backdrop-filter: var(--lg-blur-light);
  border-top: 1px solid rgba(255,255,255,.1);
}
.foot-social-btn{
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

/* =================================================================
   LUZ COLORIDA ATRÁS DO VIDRO — o ajuste #1.
   Blobs mais vivos e maiores, posicionados ATRÁS dos painéis.
   Sem isto, o vidro continua parecendo placa cinza.
   ================================================================= */
.hero, #problema, #metodo, #planos, #pro, #contato{ position:relative; isolation:isolate; }
.hero::before, #problema::before, #metodo::before,
#planos::before, #pro::before, #contato::before{
  content:""; position:absolute; width:46vw; height:46vw; border-radius:50%;
  pointer-events:none; z-index:-1; filter:blur(80px); opacity:.55;   /* era .35 */
  background:radial-gradient(circle, color-mix(in oklab, var(--a2) 70%, transparent), transparent 70%);
}
.hero::before     { top:6%;  left:58%; }
#problema::before { top:14%; left:6%;  background:radial-gradient(circle, color-mix(in oklab, var(--a3) 65%, transparent), transparent 70%); }
#metodo::before   { top:34%; right:4%; left:auto; background:radial-gradient(circle, color-mix(in oklab, var(--a1) 62%, transparent), transparent 70%); }
#planos::before   { top:10%; left:2%;  background:radial-gradient(circle, color-mix(in oklab, var(--a2) 62%, transparent), transparent 70%); }
#pro::before      { top:26%; right:6%; left:auto; background:radial-gradient(circle, color-mix(in oklab, var(--a3) 60%, transparent), transparent 70%); }
#contato::before  { bottom:-4%; left:28%; background:radial-gradient(circle, color-mix(in oklab, var(--a1) 65%, transparent), transparent 70%); }

/* segundo blob por seção, lado oposto — garante luz atrás de TODOS os cards */
.hero::after, #problema::after, #metodo::after, #planos::after, #pro::after{
  content:""; position:absolute; width:38vw; height:38vw; border-radius:50%;
  pointer-events:none; z-index:-1; filter:blur(90px); opacity:.4;
}
.hero::after     { bottom:0; left:4%;  background:radial-gradient(circle, color-mix(in oklab, var(--a1) 55%, transparent), transparent 70%); }
#problema::after { bottom:8%; right:6%; background:radial-gradient(circle, color-mix(in oklab, var(--a2) 50%, transparent), transparent 70%); }
#metodo::after   { top:6%; left:8%;    background:radial-gradient(circle, color-mix(in oklab, var(--a3) 50%, transparent), transparent 70%); }
#planos::after   { bottom:6%; right:4%; background:radial-gradient(circle, color-mix(in oklab, var(--a1) 50%, transparent), transparent 70%); }
#pro::after      { bottom:4%; left:10%; background:radial-gradient(circle, color-mix(in oklab, var(--a2) 50%, transparent), transparent 70%); }

/* ====================== MOBILE: mais leve ====================== */
@media (max-width: 720px){
  :root{
    --lg-blur:        blur(14px) saturate(160%);
    --lg-blur-strong: blur(16px) saturate(170%);
    --lg-blur-light:  blur(10px) saturate(150%);
  }
  /* blobs custam caro no mobile — mantém só 1 por seção, opacidade menor */
  .hero::after, #problema::after, #metodo::after, #planos::after, #pro::after{ display:none; }
  .hero::before, #problema::before, #metodo::before,
  #planos::before, #pro::before, #contato::before{ opacity:.4; filter:blur(60px); }
}

/* ====================== FALLBACK sem backdrop-filter ====================== */
@supports not (backdrop-filter: blur(1px)){
  .nav, .hero h1, .stage-inner, .pain, .method-card, .table-card,
  .result-card, .cred-card, .cost-box, .price, .price-note-card,
  .user-matrix, .pro-card, .faq, .cta-final, .foot-social-btn{
    background: rgba(20,24,36,.9) !important;
  }
}