/* ============================================================
   PLANOS (/planos) — claro, com um herói roxo curto no topo
   ============================================================ */

.planos-page { background: var(--white); }

/* ---- HERO + PLANOS (uma seção roxa só) ---- */
.pl-hero {
  background: linear-gradient(160deg, var(--purple-600) 0%, var(--purple-800) 55%, var(--purple-950) 100%);
  padding-top: 168px; padding-bottom: 100px;
  position: relative; overflow: hidden;
}
.pl-hero__bg { position: absolute; inset: 0; z-index: 0; }
/* fundo mais escuro: "overlay" quase some aqui — "screen" clareia e mantém o grid visível
   (mesmo motivo documentado em .manifesto/.diferenciais/.lead no style.css) */
.pl-hero__bg .hero__grid { mix-blend-mode: screen; opacity: .3; top: 4%; right: -12%; width: 85%; }
/* no celular a seção some (largura menor, texto ocupa quase tudo) — grid maior e mais visível na primeira dobra */
@media (max-width: 979px) {
  .pl-hero__bg .hero__grid { width: 210%; top: 9%; right: -20%; opacity: .6; }
}
.pl-hero__inner { position: relative; z-index: 1; max-width: 660px; margin-inline: auto; padding-bottom: 54px; text-align: center; }
.pl-hero h1 { color: #fff; font-size: clamp(32px, 6.5vw, 50px); margin: 16px 0 18px; }
.pl-hero p { color: rgba(255,255,255,.8); font-size: 16.5px; margin-bottom: 30px; }
.pl-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pl-hero__pricing { position: relative; z-index: 1; }

/* ---- PRICING ---- */
.pricing-grid { display: grid; gap: 28px; position: relative; z-index: 2; }

.price-card {
  background: rgba(38, 9, 56, .35);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-soft);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); background: rgba(38, 9, 56, .5); }
.price-card__icon {
  width: 48px; height: 48px; border-radius: 13px;
  background: rgba(255,255,255,.12);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.price-card__icon svg { width: 22px; height: 22px; }
.price-card__head { margin-bottom: 22px; }
.price-card__tag { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff; display: block; margin-bottom: 6px; }
.price-card__desc { font-size: 14px; color: rgba(255,255,255,.6); }
.price-card__value { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.price-card__currency { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--purple-300); }
.price-card__amount { font-family: var(--font-display); font-weight: 800; font-size: 44px; color: #fff; line-height: 1; }
.price-card__period { font-size: 14px; color: rgba(255,255,255,.6); }
.price-card__note { font-size: 12.5px; color: rgba(255,255,255,.55); margin-bottom: 26px; }

.price-card__list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; flex-grow: 1; }
.price-card__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,.82); }
.price-card__list li svg { color: var(--purple-300); flex-shrink: 0; margin-top: 1px; }
.price-card__list-off { color: rgba(255,255,255,.4) !important; }
.price-card__list-off svg { color: rgba(255,255,255,.25) !important; }

.price-card__cta { width: 100%; justify-content: center; }
.btn--outline-dark {
  border: 1.5px solid rgba(255,255,255,.3); color: #fff;
  transition: border-color .3s, background .3s;
}
.btn--outline-dark:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.1); }

/* destaque do plano do meio */
.price-card--highlight {
  background: rgba(146, 0, 196, .38);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--shadow-lift);
  transform: scale(1.02);
}
.price-card--highlight:hover { transform: scale(1.02) translateY(-6px); background: rgba(146, 0, 196, .5); }
.price-card--highlight .price-card__icon { background: rgba(255,255,255,.18); }
.price-card__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: #fff; color: var(--purple-600);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  padding: 7px 18px; border-radius: 999px;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}

/* plano topo — visual "premium" mais discreto, sem competir com o do meio */
.price-card--premium { border-color: rgba(205,143,240,.4); }

/* ---- COMO ESCOLHER ---- */
.pl-compare { background: var(--grad-dark); padding-block: 110px; position: relative; overflow: hidden; --grad-text: linear-gradient(120deg, #cd8ff0, #9200c4); }
.pl-compare .section-grid { bottom: -15%; right: -10%; top: auto; width: 70%; opacity: .14; mix-blend-mode: screen; }
.pl-compare .flow { margin-top: 50px; }

/* ---- FAQ ---- */
.pl-faq { background: var(--white); padding-block: 110px; }
.pl-faq__list { max-width: 720px; margin-top: 30px; display: flex; flex-direction: column; gap: 22px; }
.pl-faq__item { padding-bottom: 22px; border-bottom: 1px solid var(--gray-300); }
.pl-faq__item h3 { font-size: 16.5px; color: var(--ink); margin-bottom: 8px; }
.pl-faq__item p { font-size: 14.5px; }

/* ---- CTA FINAL ---- */
.pl-cta { background: var(--purple-950); padding-block: 110px; text-align: center; position: relative; overflow: hidden; --grad-text: linear-gradient(120deg, #cd8ff0, #9200c4); }
.pl-cta .section-grid { top: -10%; left: 50%; transform: translateX(-50%); width: 90%; opacity: .14; mix-blend-mode: screen; }
.pl-cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 520px; margin-inline: auto; }
.pl-cta h2 { color: #fff; font-size: clamp(26px, 6vw, 38px); margin-bottom: 14px; }
.pl-cta p { color: rgba(255,255,255,.75); margin-bottom: 28px; }

@media (min-width: 760px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .price-card--highlight { transform: scale(1.05); z-index: 1; }
  .price-card--highlight:hover { transform: scale(1.05) translateY(-6px); }
}