/* ==========================================================================
   wzap-divulga – Estilos adicionais (além de Tailwind)
   ========================================================================== */
@layer base {
  :root {
    --color-primary: #00e676; /* verde WhatsApp */
    --color-dark: #0d0d0d;
  }
  html, body {
    background: radial-gradient(circle at 50% 0%, #121212 0%, #0a0a0a 100%);
    color: #e5e7eb;
  }
}

@layer utilities {
  /* ------------------------- Keyframes ------------------------- */
  @keyframes fadeInUp {
    0% {opacity: 0; transform: translateY(40px);}
    100% {opacity: 1; transform: translateY(0);}
  }
  @keyframes slideInLeft {
    0% {opacity: 0; transform: translateX(-60px);}
    100% {opacity: 1; transform: translateX(0);}
  }
  @keyframes pulseGlow {
    0%, 100% {box-shadow: 0 0 0 0 var(--color-primary, #00e676);}  
    50% {box-shadow: 0 0 12px 4px var(--color-primary, #00e676);}  
  }

  /* ---------------------- Utilidades custom -------------------- */
  .fade-up {opacity: 0; animation: fadeInUp 0.8s ease-out forwards;}
  .slide-left {opacity: 0; animation: slideInLeft 0.9s ease-out forwards;}
  .glow-hover:hover {transition: transform .3s ease, box-shadow .3s ease; transform: translateY(-3px); box-shadow: 0 0 16px 2px var(--color-primary);}  
  .plan-card {transition: transform .3s ease, box-shadow .3s ease;}  
  .plan-card:hover {transform: translateY(-6px) scale(1.02); box-shadow: 0 0 22px 4px rgba(0, 230, 118, 0.4);}  
  .cta-btn {position: relative;}  
  .cta-btn::after {content: ""; position: absolute; inset: 0; border-radius: inherit; animation: pulseGlow 3.5s infinite ease-in-out;}
}