/* ============================================================
   WA Web Plus Max - Capa de pulido visual (profesional)
   Aditiva: se carga al final y refina la UI existente.
   Reutiliza los tokens del sitio (var(--brand), etc.)
   ============================================================ */

:root{
  --brand2:#22c55e;              /* verde claro para degradados */
  --brand-glow:rgba(22,163,74,.45);
  --ring2:rgba(34,197,94,.35);
}

html{scroll-behavior:smooth}
::selection{background:var(--brand-glow);color:#fff}

/* Barra de scroll fina y a tono */
*{scrollbar-width:thin;scrollbar-color:#1f2937 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#26324a,#1a2336);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#334155;background-clip:padding-box}

/* ---------- Botones ---------- */
.btn{letter-spacing:.1px}
.btn-brand{
  background:linear-gradient(135deg,var(--brand2),var(--brand)) !important;
  color:#04130a !important;
  box-shadow:0 8px 22px -8px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn-brand:hover{filter:brightness(1.05);box-shadow:0 12px 28px -8px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.3) !important}
.btn-outline{backdrop-filter:blur(6px)}
.btn-outline:hover{border-color:var(--brand) !important;color:var(--brand) !important}
.btn:active{transform:translateY(0) scale(.99)}

/* ---------- Header / nav ---------- */
header{box-shadow:0 6px 24px -18px #000}
.nav a{position:relative;transition:color .18s ease}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--brand);border-radius:2px;transition:right .22s ease}
.nav a:not(.btn):hover::after{right:0}
.brandmark{background:linear-gradient(135deg,var(--brand2),var(--brand)) !important;box-shadow:0 6px 16px -6px var(--brand-glow)}

/* ---------- Tag / píldoras ---------- */
.tag{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.28) !important;color:#bbf7d0 !important;
  backdrop-filter:blur(4px);font-weight:600}

/* ---------- Encabezados ---------- */
.h2{letter-spacing:-.5px}
.h2::after{content:"";display:block;width:56px;height:4px;margin-top:.7rem;border-radius:999px;
  background:linear-gradient(90deg,var(--brand2),var(--brand))}
section#pricing .h2::after,section#pricing .promo{margin-left:auto;margin-right:auto}

/* ---------- Tarjetas de features ---------- */
.card{transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 120px at 0% 0%,rgba(34,197,94,.10),transparent 70%);opacity:0;transition:opacity .25s ease}
.card:hover{transform:translateY(-6px);border-color:rgba(34,197,94,.45) !important;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(34,197,94,.15)}
.card:hover::before{opacity:1}
.ico{transition:transform .25s ease, background .25s ease}
.card:hover .ico{transform:scale(1.08) rotate(-4deg);background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(22,163,74,.10)) !important;color:var(--brand2) !important}

/* ---------- Demos ---------- */
.demo-card{transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.demo-card:hover{transform:translateY(-8px);box-shadow:0 26px 50px -26px rgba(0,0,0,.75)}
.demo-icon i{filter:drop-shadow(0 6px 16px var(--brand-glow))}

/* ---------- Precios ---------- */
.billing-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);backdrop-filter:blur(6px)}
.billing-tabs button{border:0;background:transparent;color:var(--muted);font-weight:700;
  padding:.5rem 1rem;border-radius:999px;cursor:pointer;transition:.18s ease;font-family:inherit}
.billing-tabs button:hover{color:var(--text)}
.billing-tabs button.active{background:linear-gradient(135deg,var(--brand2),var(--brand));color:#04130a;
  box-shadow:0 8px 20px -10px var(--brand-glow)}

.promo{display:inline-block;font-weight:700;color:#bbf7d0;background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.28);padding:.5rem 1rem;border-radius:999px}
.promo u{text-decoration-color:var(--brand2)}

.pricing .plan{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;position:relative}
.pricing .plan:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.pricing .plan .price{margin:.4rem 0 .2rem}
.pricing .plan .amount{font-size:2.6rem;font-weight:900;line-height:1;
  background:linear-gradient(135deg,#eafff3,var(--brand2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pricing .plan .currency{font-weight:800;color:var(--brand2);vertical-align:super;font-size:1.1rem;margin-right:2px}
.pricing .plan .per{color:var(--muted);font-weight:600}
.pricing .plan ul li{margin:.28rem 0;list-style:none;position:relative;padding-left:1.5rem;color:#cdd8ea}
.pricing .plan ul{padding-left:0 !important}
.pricing .plan ul li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--brand2);font-weight:900}
/* Plan destacado */
.pricing .plan.bump{border:1px solid rgba(34,197,94,.5) !important;
  box-shadow:0 0 0 1px rgba(34,197,94,.25), 0 30px 70px -30px var(--brand-glow) !important}
@media(min-width:961px){.pricing .plan.bump{transform:scale(1.04)}.pricing .plan.bump:hover{transform:scale(1.04) translateY(-6px)}}
.pricing .plan.bump .tag{background:linear-gradient(135deg,var(--brand2),var(--brand)) !important;color:#04130a !important;border:0 !important;font-weight:800}

/* ---------- Glass / hero imagen ---------- */
.glass{transition:box-shadow .25s ease}
.heroGrad .glass:hover{box-shadow:0 30px 70px -30px var(--brand-glow)}
.features-bullets span{background:rgba(255,255,255,.04);border:1px solid var(--border);padding:.35rem .7rem;border-radius:999px}

/* ---------- Modal ---------- */
.modal .modal-dialog{border:1px solid rgba(34,197,94,.18)}
#phoneConfirmBtn,#phoneInput{transition:.18s ease}
#phoneConfirmBtn:hover{filter:brightness(1.06)}

/* ---------- Entrada suave de secciones ---------- */
@media (prefers-reduced-motion: no-preference){
  .section, .demos-wrap{animation:wapFade .6s ease both}
  @keyframes wapFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ---------- Responsive fino ---------- */
@media(max-width:560px){
  .pricing .plan .amount{font-size:2.2rem}
  .btn{padding:.75rem 1rem}
}