/* =========================================================================
   ROX+ — Novas seções (Benefícios, Preços, FAQ, Depoimentos) + CardBg
   ========================================================================= */

/* ---------- CardBg: fundo animado opcional + overlay escuro ---------- */
.cardbg{ position:relative; overflow:hidden; isolation:isolate; }
.cardbg__anim{ position:absolute; inset:0; z-index:-2; pointer-events:none; }
.cardbg__overlay{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,19,37,.72), rgba(8,19,37,.88));
}
.cardbg > *{ position:relative; z-index:1; }

/* aurora — brumas azul/laranja em movimento lento */
.anim-aurora{
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(124,58,237,.55), transparent 70%),
    radial-gradient(35% 45% at 80% 25%, rgba(250,204,21,.40), transparent 70%),
    radial-gradient(45% 55% at 60% 90%, rgba(168,121,247,.45), transparent 70%);
  background-size:200% 200%, 220% 220%, 180% 180%;
  animation:auroraShift 18s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{ background-position:0% 0%, 100% 0%, 50% 100%; }
  100%{ background-position:60% 40%, 30% 60%, 70% 20%; }
}

/* grid — malha tech deslizante */
.anim-grid{
  background:
    linear-gradient(rgba(168,121,247,.16) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(90deg, rgba(168,121,247,.16) 1px, transparent 1px) 0 0 / 38px 38px,
    radial-gradient(circle at 50% 0%, rgba(124,58,237,.35), transparent 60%);
  animation:gridDrift 14s linear infinite;
}
@keyframes gridDrift{
  from{ background-position:0 0, 0 0, 50% 0; }
  to{ background-position:0 38px, 38px 0, 50% 0; }
}

/* beams — feixes diagonais de luz */
.anim-beams{ background:#0b1d3a; }
.anim-beams::before{
  content:""; position:absolute; inset:-50%;
  background:repeating-linear-gradient(60deg,
    transparent 0 60px,
    rgba(168,121,247,.10) 60px 64px,
    transparent 64px 130px,
    rgba(250,204,21,.08) 130px 134px);
  animation:beamsMove 20s linear infinite;
}
@keyframes beamsMove{ from{ transform:translateX(0); } to{ transform:translateX(130px); } }

@media (prefers-reduced-motion: reduce){
  .anim-aurora, .anim-grid, .anim-beams::before{ animation:none; }
}

/* ---------- Benefícios ---------- */
.benef__head{ max-width:680px; margin:0 auto 52px; text-align:center; }
.benef__head .eyebrow{ justify-content:center; }
.benef__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.benef-card{ padding:32px; border-radius:var(--radius); border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.benef-card:hover{ transform:translateY(-5px); border-color:var(--rox-bright); box-shadow:var(--shadow-rox); }
.benef-card__icon{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center;
  background:var(--bg-3); color:var(--gold); border:1px solid var(--line); margin-bottom:20px; }
.benef-card.cardbg .benef-card__icon{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:var(--gold-soft); }
.benef-card__t{ font-size:21px; margin:0 0 10px; }
.benef-card p{ font-size:15px; margin:0; }
@media (max-width:880px){ .benef__grid{ grid-template-columns:1fr; } }

/* ---------- Preços ---------- */
.precos{ position:relative; }
.precos__head{ text-align:center; max-width:680px; margin:0 auto 16px; }
.precos__head .eyebrow{ justify-content:center; }
.precos__note{ text-align:center; color:var(--ink-3); font-size:14px; margin:0 auto 48px; }
.precos__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.plano{ display:flex; flex-direction:column; padding:34px 30px; border-radius:var(--radius-lg);
  border:1px solid var(--line-2); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.plano:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.plano--destaque{ border-color:transparent; box-shadow:var(--shadow-rox); }
.plano--destaque.cardbg .plano__cta{ background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#241200; }
.plano__badge{ position:absolute; top:18px; right:18px; font-family:var(--display); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:99px;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#241200; }
.plano__icon{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--rox-deep)); color:#fff; margin-bottom:18px; box-shadow:var(--shadow-rox); }
.plano--destaque .plano__icon{ background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#241200; box-shadow:0 16px 40px -16px rgba(250,204,21,.6); }
.plano__name{ font-size:25px; margin:0 0 6px; }
.plano__resumo{ color:var(--ink-2); font-size:14.5px; margin:0 0 22px; min-height:42px; }
.plano__price{ display:flex; align-items:baseline; gap:8px; margin-bottom:22px; }
.plano__price b{ font-family:var(--display); font-size:30px; font-weight:700; color:#fff; letter-spacing:-.01em; }
.plano__price span{ color:var(--ink-3); font-size:14px; }
.plano__list{ list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.plano__list li{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--ink-2); }
.plano__list svg{ color:var(--gold); flex:0 0 auto; margin-top:2px; }
.plano--destaque.cardbg .plano__list li{ color:var(--ink); }
.plano__cta{ width:100%; justify-content:center; }
@media (max-width:880px){ .precos__grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }

/* ---------- FAQ ---------- */
.faq__in{ display:grid; grid-template-columns:.8fr 1.2fr; gap:54px; align-items:start; }
.faq__intro{ position:sticky; top:110px; }
.faq__list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid var(--line-2); border-radius:var(--radius); background:var(--glass); overflow:hidden;
  transition:border-color .3s, background .3s; }
.faq-item.open{ border-color:var(--rox-bright); background:var(--glass-2); }
.faq-item__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 24px; text-align:left; font-family:var(--display); font-weight:600; font-size:17px; color:var(--ink); }
.faq-item__icon{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-3); color:var(--rox-bright); border:1px solid var(--line); transition:transform .35s var(--ease), background .3s, color .3s; }
.faq-item.open .faq-item__icon{ transform:rotate(135deg); background:linear-gradient(135deg,var(--accent),var(--rox-deep)); color:#fff; border-color:transparent; }
.faq-item__a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-item__a > div{ padding:0 24px 24px; color:var(--ink-2); font-size:15.5px; line-height:1.65; }
@media (max-width:860px){ .faq__in{ grid-template-columns:1fr; gap:32px; } .faq__intro{ position:static; } }

/* ---------- Depoimentos ---------- */
.depo{ position:relative; overflow:hidden; }
.depo__head{ text-align:center; max-width:640px; margin:0 auto 50px; }
.depo__head .eyebrow{ justify-content:center; }
.depo__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.depo-card{ padding:32px; border-radius:var(--radius); display:flex; flex-direction:column; gap:20px; min-height:280px; }
.depo-card__quote{ font-size:17px; line-height:1.6; color:var(--ink); flex:1; }
.depo-card__quote::before{ content:"“"; font-family:var(--display); font-size:54px; line-height:0; color:var(--gold);
  display:block; height:26px; }
.depo-card__by{ display:flex; align-items:center; gap:14px; }
.depo-card__av{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--rox-deep)); color:#fff; flex:0 0 auto; }
.depo-card__n{ font-weight:700; font-size:15.5px; }
.depo-card__r{ color:var(--ink-3); font-size:13px; }
.depo-card__stars{ display:flex; gap:3px; color:var(--gold); }
@media (max-width:880px){ .depo__grid{ grid-template-columns:1fr; } }