/* ===== Página de Planes ===== */

.pricing{ padding: 40px 0 20px; }

/* Hero */
.pricing-hero{ text-align:center; margin-top: 12px; }
.title-xl{ font-size: clamp(28px, 5vw, 44px); margin:0 0 8px; }
.lead{ color:var(--muted); margin:0 auto 10px; max-width:70ch }

.badges{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px }
.badges span{
  font-size:.95rem;
  border:1px solid rgba(99,102,241,.35);
  border-radius:999px;
  padding:.45rem .75rem;
  background:linear-gradient(180deg, rgba(17,24,39,.6), rgba(12,16,30,.6));
}

/* Benefits bar */
.benefits{
  display:grid; gap:10px; grid-template-columns:repeat(4,1fr);
  margin: 18px auto 8px;
}
.benefit{
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(180deg, rgba(17,24,39,.55), rgba(12,16,30,.55));
  border:1px solid rgba(99,102,241,.25);
  border-radius:14px; padding:10px 12px;
}
.benefit .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(90deg,var(--sky),var(--violet));box-shadow:0 0 14px rgba(56,189,248,.5)}

@media (max-width: 980px){
  .benefits{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .benefits{ grid-template-columns: 1fr; }
}

/* Plans grid */
.plans{
  margin-top: 14px;
  display:grid; gap:22px; grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
@media (max-width: 980px){ .plans{ grid-template-columns: 1fr 1fr } }
@media (max-width: 720px){ .plans{ grid-template-columns: 1fr } }

.plan-card{
  position:relative;
  background: linear-gradient(180deg, rgba(17,24,39,.65), rgba(12,16,30,.65));
  border:1px solid rgba(167,139,250,.25);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .35s ease, border-color .35s ease;
}
.plan-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 60px rgba(0,0,0,.45); border-color: rgba(167,139,250,.5) }

.plan-card.popular{
  background: linear-gradient(180deg, rgba(20,24,46,.8), rgba(14,18,34,.8));
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 18px 60px rgba(79,70,229,.25);
}
.ribbon{
  position:absolute; top:14px; right:-8px;
  background: linear-gradient(90deg, var(--indigo), var(--violet));
  color:#fff; font-weight:700; font-size:.8rem;
  padding:.35rem .6rem; border-radius:999px;
  box-shadow:0 10px 20px rgba(79,70,229,.35);
}

.plan-head h3{ margin: 4px 0 2px; font-size: 1.3rem }
.price{ margin: 0 0 8px; font-weight: 800; font-size: 1.2rem }
.price span{ font-weight:600; opacity:.85; margin-right:6px; }
.price small{ opacity:.8; font-weight:600 }

.features{ list-style:none; padding:0; margin:10px 0 14px; display:grid; gap:8px }
.features li{
  color:#cfd1d9;
  padding-left: 20px; position: relative;
}
.features li::before{
  content:""; position:absolute; left:0; top:.55rem;
  width:10px;height:10px;border-radius:50%;
  background: linear-gradient(90deg,var(--sky),var(--violet));
  box-shadow:0 0 14px rgba(56,189,248,.5)
}

.plan-card .btn{ width:100%; margin-top: 4px }
.plan-card .note{ display:block; opacity:.75; margin-top:8px }

/* Comparar */
.title-lg{ font-size: clamp(22px, 4vw, 32px); margin: 18px 0 10px; }
.compare .table{
  display:grid; border:1px solid rgba(99,102,241,.25); border-radius: 16px; overflow:hidden;
  background: linear-gradient(180deg, rgba(17,24,39,.55), rgba(12,16,30,.55));
}
.compare .row{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; }
.compare .row.head{ background: rgba(255,255,255,.02); font-weight:700 }
.compare .cell{ padding: 12px; border-top:1px solid rgba(255,255,255,.06) }
.compare .cell.tick{ color:#a7f3d0; font-weight: 700 }
.compare-cta{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap }

/* FAQ mini */
.faq-mini{ display:grid; gap:10px }
.faq-mini details{
  border:1px solid rgba(99,102,241,.25);
  border-radius:14px;
  background: linear-gradient(180deg, rgba(17,24,39,.55), rgba(12,16,30,.55));
  padding:12px 14px;
}
.faq-mini summary{ cursor:pointer; font-weight:600 }
.faq-mini p{ color:#cfd1d9; margin:.6rem 0 0 }

/* CTA sticky móvil */
.sticky-cta{
  position: sticky; bottom: 10px; z-index: 20;
  display:none;
  width:fit-content; margin: 12px auto 0;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.45));
}
@media (max-width: 720px){
  .sticky-cta{ display:block; }
}

/* Reveal local (usa tus mismas clases) */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease }
.reveal.in-view{ opacity:1; transform:none }