/* =========================================================
   JDINFOONLINE — Biblioteca Visual Premium do Ecossistema
   Fundo global, cards, glow, pulse, hero mobile e planos
   ========================================================= */

/* Correção anti-flash branco no carregamento */
html,
body{
  background:#060b16!important;
  color:#f8fafc;
  overflow-x:hidden!important;
}

body{
  position:relative;
  isolation:isolate;
  min-height:100vh;
}

:root{
  --jd-bg:#060b16;
  --jd-bg-deep:#04070d;
  --jd-card:#0d1322;
  --jd-text:#f8fafc;
  --jd-muted:#a9b3c7;
  --jd-red:#ff4f5e;
  --jd-red-soft:rgba(255,79,94,.32);
  --jd-red-glow:rgba(255,79,94,.42);
  --jd-blue:#2b55ff;
  --jd-blue-glow:rgba(43,85,255,.24);
  --jd-purple:#8b5cf6;
  --jd-purple-glow:rgba(139,92,246,.16);
  --jd-green:#33d98f;
  --jd-line:rgba(255,255,255,.12);
  --jd-card-radius:34px;
}

/* Fundo premium global — substitui o azul chapado */
body::before{
  content:"";
  position:fixed;
  inset:-22% -12%;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 13% 7%, rgba(255,79,94,.26), transparent 29%),
    radial-gradient(circle at 86% 9%, rgba(43,85,255,.25), transparent 32%),
    radial-gradient(circle at 50% 92%, rgba(139,92,246,.13), transparent 38%),
    radial-gradient(circle at 22% 78%, rgba(255,79,94,.08), transparent 34%),
    linear-gradient(180deg,#070b16 0%,#060b16 44%,#04070d 100%);
  opacity:1;
  filter:saturate(1.08);
  animation:jdPremiumBackground 18s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.035), transparent 42%);
  background-size:64px 64px,64px 64px,100% 100%;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.86), transparent 88%);
  opacity:.38;
}

/* Garante que seções não criem blocos chapados por cima do fundo */
section,
.jd-section,
.jd-steps,
.jd-showcase,
.jd-connected,
.final-cta,
.product-hero{
  background:transparent!important;
}

/* Cards premium — produtos + Home, sem alterar lógica */
.product-hero-card,
.feature,
.step,
.plan,
.jd-solution-card,
.jd-step,
.jd-feature,
.jd-showcase-card,
.jd-connected-board,
.jd-autopost-card,
.jd-mini-product,
.jd-final-cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:inherit;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,79,94,.13), transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.026))!important;
  border:1px solid var(--jd-line)!important;
  border-radius:var(--jd-card-radius);
  box-shadow:0 20px 70px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transform:translateY(0) scale(1);
  will-change:transform, box-shadow, border-color;
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    box-shadow .32s cubic-bezier(.2,.8,.2,1),
    border-color .32s cubic-bezier(.2,.8,.2,1),
    background .32s ease,
    opacity .32s ease!important;
}

/* Preserva o CTA final integrado quando a página já usar CTA sem card */
.jd-final-cta{
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Primeiros/destaques com glow mais rico */
.plan.popular,
.jd-solution-card:first-child,
.jd-autopost-card{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,79,94,.24), transparent 34%),
    radial-gradient(circle at 90% 20%, rgba(43,85,255,.10), transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.032))!important;
  border-color:rgba(255,79,94,.35)!important;
}

.product-hero-card::before,
.feature::before,
.step::before,
.plan::before,
.jd-solution-card::before,
.jd-step::before,
.jd-feature::before,
.jd-showcase-card::before,
.jd-connected-board::before,
.jd-autopost-card::before,
.jd-mini-product::before{
  content:"";
  position:absolute;
  inset:-48%;
  z-index:-1;
  pointer-events:none;
  opacity:.18;
  transform:scale(.96);
  background:
    radial-gradient(circle at 42% 26%, rgba(255,79,94,.28), transparent 31%),
    radial-gradient(circle at 78% 18%, rgba(43,85,255,.16), transparent 34%),
    radial-gradient(circle at 20% 86%, rgba(139,92,246,.14), transparent 34%);
  filter:blur(9px);
  transition:opacity .35s ease, transform .35s ease;
}

.product-hero-card::after,
.feature::after,
.step::after,
.plan::after,
.jd-solution-card::after,
.jd-step::after,
.jd-feature::after,
.jd-showcase-card::after,
.jd-connected-board::after,
.jd-autopost-card::after,
.jd-mini-product::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.20;
  background:
    linear-gradient(135deg,rgba(255,255,255,.18),transparent 32%,rgba(255,79,94,.12)),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 58%);
  transition:opacity .35s ease;
}

.product-hero-card:hover,
.feature:hover,
.step:hover,
.plan:hover,
.jd-solution-card:hover,
.jd-step:hover,
.jd-feature:hover,
.jd-showcase-card:hover,
.jd-connected-board:hover,
.jd-autopost-card:hover,
.jd-mini-product:hover{
  transform:translateY(-8px) scale(1.018)!important;
  border-color:rgba(255,79,94,.44)!important;
  box-shadow:
    0 30px 95px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,79,94,.12),
    0 0 56px rgba(255,79,94,.22),
    0 0 76px rgba(43,85,255,.08)!important;
}

.product-hero-card:hover::before,
.feature:hover::before,
.step:hover::before,
.plan:hover::before,
.jd-solution-card:hover::before,
.jd-step:hover::before,
.jd-feature:hover::before,
.jd-showcase-card:hover::before,
.jd-connected-board:hover::before,
.jd-autopost-card:hover::before,
.jd-mini-product:hover::before{
  opacity:1;
  transform:scale(1.04);
  animation:jdCardPulse 1.65s ease-in-out infinite;
}

.product-hero-card:hover::after,
.feature:hover::after,
.step:hover::after,
.plan:hover::after,
.jd-solution-card:hover::after,
.jd-step:hover::after,
.jd-feature:hover::after,
.jd-showcase-card:hover::after,
.jd-connected-board:hover::after,
.jd-autopost-card:hover::after,
.jd-mini-product:hover::after{opacity:.40}

.product-hero-card:hover .icon,
.feature:hover .icon,
.step:hover .num,
.plan:hover .ribbon,
.jd-solution-card:hover .jd-icon,
.jd-step:hover .jd-num,
.jd-feature:hover .jd-icon,
.jd-autopost-card:hover .jd-share-icon{
  box-shadow:0 0 34px rgba(255,79,94,.28)!important;
}

/* Mantém o card visual da hero respirando mesmo sem hover */
.product-hero-card,
.jd-mock,
.jd-connected-board{
  animation:jdFloat 6s ease-in-out infinite;
}

/* Home: card da hero reto, sem inclinação */
.jd-mock{
  transform:none!important;
}

.product-hero-card:hover,
.jd-mock:hover{
  animation:jdHeroHoverFloat 2.4s ease-in-out infinite!important;
}

/* Reveal compatível com produtos e Home */
.reveal,
.jd-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s ease, transform .75s ease;
}

.reveal.visible,
.jd-reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* Carrossel mobile dos planos — só visual, não altera links/checkout */
@media(max-width:680px){
  .product-hero .container,
  .jd-hero .jd-shell{
    grid-template-columns:1fr!important;
    gap:0!important;
  }

  .product-hero-card,
  .jd-mock-wrap{
    display:none!important;
  }

  #planos{
    max-width:100vw!important;
    overflow:hidden!important;
  }

  #planos .jd-billing-toggle{
    position:sticky;
    top:12px;
    z-index:20;
    width:100%;
    max-width:100%;
    margin:-6px auto 22px;
  }

  #planos .pricing{
    display:flex!important;
    grid-template-columns:none!important;
    gap:16px!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 0 18px!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  #planos .pricing::-webkit-scrollbar{height:6px}
  #planos .pricing::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:999px}
  #planos .pricing::-webkit-scrollbar-thumb{background:rgba(255,79,94,.45);border-radius:999px}

  #planos .pricing .plan{
    flex:0 0 100%!important;
    min-width:100%!important;
    max-width:100%!important;
    scroll-snap-align:center;
    min-height:auto!important;
    box-sizing:border-box!important;
  }

  #planos .pricing .plan.popular{
    order:-1;
  }
}

@media(hover:none){
  .product-hero-card:hover,
  .feature:hover,
  .step:hover,
  .plan:hover,
  .jd-solution-card:hover,
  .jd-step:hover,
  .jd-feature:hover,
  .jd-showcase-card:hover,
  .jd-connected-board:hover,
  .jd-autopost-card:hover,
  .jd-mini-product:hover{
    transform:none!important;
  }
}

@keyframes jdPremiumBackground{
  0%{
    transform:translateY(-18px) scale(1);
    filter:saturate(1.02);
    opacity:.94;
  }
  50%{
    transform:translateY(16px) scale(1.025);
    filter:saturate(1.18);
    opacity:1;
  }
  100%{
    transform:translateY(-8px) scale(1.012);
    filter:saturate(1.08);
    opacity:.98;
  }
}

@keyframes jdCardPulse{
  0%,100%{opacity:.78;transform:scale(1)}
  50%{opacity:1;transform:scale(1.07)}
}

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

@keyframes jdHeroHoverFloat{
  0%,100%{transform:translateY(-8px) scale(1.018)}
  50%{transform:translateY(-14px) scale(1.026)}
}