Tarjetas de Precios Modernas

.pricing-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.pricing-header {
  text-align: center;
  margin-bottom: 3rem;
}

.pricing-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 1rem;
}

.pricing-subtitle {
  font-size: 1.1rem;
  color: #718096;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.pricing-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  border-color: #4299e1;
}

.pricing-card.popular {
  border-color: #4299e1;
  transform: scale(1.05);
}

.pricing-card.popular:hover {
  transform: scale(1.05) translateY(-8px);
}

.popular-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.5rem 2rem;
  border-radius: 0 0 12px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.card-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-top: 1rem;
}

.plan-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 1rem;
}

.price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 1rem;
}

.currency {
  font-size: 1.5rem;
  font-weight: 600;
  color: #4a5568;
}

.amount {
  font-size: 3rem;
  font-weight: 700;
  color: #2d3748;
  margin: 0 0.25rem;
}

.period {
  font-size: 1rem;
  color: #718096;
  font-weight: 500;
}

.plan-description {
  color: #718096;
  font-size: 1rem;
  margin: 0;
}

.card-features {
  margin-bottom: 2rem;
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f7fafc;
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-item.disabled {
  opacity: 0.5;
}

.feature-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
  margin-right: 1rem;
  flex-shrink: 0;
}

.feature-item:not(.disabled) .feature-icon {
  background: #e6fffa;
  color: #00a86b;
}

.feature-item.disabled .feature-icon {
  background: #fed7d7;
  color: #e53e3e;
}

.feature-text {
  font-size: 0.95rem;
  color: #4a5568;
  line-height: 1.5;
}

.card-footer {
  text-align: center;
}

.cta-button {
  width: 100%;
  padding: 1rem 2rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #4a5568;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cta-button:hover {
  background: #f7fafc;
  border-color: #cbd5e0;
  transform: translateY(-2px);
}

.cta-button.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
}

.cta-button.primary:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.pricing-footer {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0;
}

.footer-text {
  color: #718096;
  font-size: 0.95rem;
  margin: 0;
}

/* Diseño Responsivo */
@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .pricing-card.popular {
    transform: none;
  }
  
  .pricing-card.popular:hover {
    transform: translateY(-8px);
  }
  
  .pricing-title {
    font-size: 2rem;
  }
  
  .amount {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  .pricing-container {
    padding: 0 0.5rem;
  }
  
  .pricing-card {
    padding: 1.5rem;
  }
  
  .pricing-title {
    font-size: 1.75rem;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const ctaButtons = document.querySelectorAll('.cta-button');
  const pricingCards = document.querySelectorAll('.pricing-card');
  
  // Agregar manejadores de clic a los botones CTA
  ctaButtons.forEach((button, index) => {
    button.addEventListener('click', function() {
      const card = this.closest('.pricing-card');
      const planName = card.querySelector('.plan-name').textContent;
      const price = card.querySelector('.amount').textContent;
      
      // Agregar estado de carga
      const originalText = this.textContent;
      this.textContent = 'Cargando...';
      this.disabled = true;
      
      // Simular llamada a API
      setTimeout(() => {
        // Restablecer botón
        this.textContent = originalText;
        this.disabled = false;
        
        // Mostrar mensaje de éxito (puedes reemplazar esto con funcionalidad real)
        showNotification(`Plan ${planName} seleccionado ($${price}/mes)`);
      }, 1500);
    });
  });
  
  // Agregar intersection observer para animación al hacer scroll
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  };
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0)';
      }
    });
  }, observerOptions);
  
  // Inicialmente ocultar tarjetas para animación
  pricingCards.forEach((card, index) => {
    card.style.opacity = '0';
    card.style.transform = 'translateY(30px)';
    card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
    observer.observe(card);
  });
  
  // Función para mostrar notificación
  function showNotification(message) {
    // Crear elemento de notificación
    const notification = document.createElement('div');
    notification.className = 'notification';
    notification.textContent = message;
    
    // Agregar estilos
    Object.assign(notification.style, {
      position: 'fixed',
      top: '20px',
      right: '20px',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      color: 'white',
      padding: '1rem 1.5rem',
      borderRadius: '8px',
      boxShadow: '0 10px 25px rgba(0, 0, 0, 0.2)',
      zIndex: '1000',
      transform: 'translateX(100%)',
      transition: 'transform 0.3s ease',
      fontSize: '0.9rem',
      fontWeight: '500'
    });
    
    document.body.appendChild(notification);
    
    // Animar entrada
    setTimeout(() => {
      notification.style.transform = 'translateX(0)';
    }, 100);
    
    // Remover después de 3 segundos
    setTimeout(() => {
      notification.style.transform = 'translateX(100%)';
      setTimeout(() => {
        document.body.removeChild(notification);
      }, 300);
    }, 3000);
  }
  
  // Agregar navegación por teclado
  pricingCards.forEach((card, index) => {
    card.setAttribute('tabindex', '0');
    
    card.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        const button = card.querySelector('.cta-button');
        button.click();
      }
    });
  });
  
  // Agregar estilos de enfoque para accesibilidad
  const style = document.createElement('style');
  style.textContent = `
    .pricing-card:focus {
      outline: 2px solid #4299e1;
      outline-offset: 2px;
    }
    
    .cta-button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none !important;
    }
  `;
  document.head.appendChild(style);
});