/* Aplicación de nueva paleta de colores al index.php */

/* Navbar */
.navbar {
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid rgba(59,130,246,0.2);
  box-shadow: 0 4px 20px rgba(59,130,246,0.1);
}

.navbar.scrolled {
  box-shadow: 0 8px 32px rgba(59,130,246,0.2);
}

.nav-menu a {
  color: var(--color-text-primary);
}

.nav-menu a:hover {
  color: var(--color-primary);
}

.nav-menu a::after {
  background: var(--gradient-primary);
}

.nav-cta {
  background: var(--gradient-primary);
  box-shadow: 0 4px 20px rgba(59,130,246,0.4);
}

.nav-cta:hover {
  box-shadow: 0 6px 25px rgba(59,130,246,0.6);
}

/* Hero */
.hero h1 span {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 15px rgba(59,130,246,0.6));
}

.hero-btn {
  background: var(--gradient-primary);
  box-shadow: 0 15px 40px rgba(59,130,246,0.4);
}

.hero-btn:hover {
  box-shadow: 0 20px 50px rgba(59,130,246,0.5);
}

/* Sections */
.section-badge {
  background: rgba(59,130,246,0.1);
  color: var(--color-primary);
  border: 1px solid rgba(59,130,246,0.3);
}

/* Botón Trial */
.trial-btn {
  background: var(--gradient-primary) !important;
  box-shadow: 0 10px 30px rgba(59,130,246,0.3) !important;
}

.trial-btn:hover {
  box-shadow: 0 20px 50px rgba(59,130,246,0.5) !important;
}

/* Template Cards */
.template-card {
  box-shadow: 0 20px 60px rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.15);
}

.template-card::before {
  background: linear-gradient(135deg, rgba(59,130,246,0.1), transparent);
}

.template-card:hover {
  box-shadow: 0 30px 80px rgba(59,130,246,0.25);
}

.template-badge {
  background: var(--gradient-primary);
  box-shadow: 0 5px 20px rgba(59,130,246,0.4);
}

.template-price {
  color: var(--color-primary);
}

.template-btn {
  background: var(--gradient-primary);
  box-shadow: 0 10px 30px rgba(59,130,246,0.3);
}

.template-btn:hover {
  box-shadow: 0 15px 40px rgba(59,130,246,0.5);
}

/* Features */
.features {
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
}

.features::before {
  background: radial-gradient(circle at 30% 50%, rgba(59,130,246,0.1), transparent 70%);
}

.feature-item {
  border: 1px solid rgba(59,130,246,0.15);
  box-shadow: 0 8px 30px rgba(59,130,246,0.08);
}

.feature-item:hover {
  border-color: rgba(59,130,246,0.3);
  box-shadow: 0 15px 40px rgba(59,130,246,0.15);
}

.feature-icon {
  background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(139,92,246,0.15));
}

.feature-item:hover .feature-icon {
  background: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(139,92,246,0.25));
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, #1E293B 0%, #334155 50%, #1E293B 100%);
}

.cta-section::before {
  background: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.2), transparent 70%);
}

.cta-section h2 {
  text-shadow: 0 4px 30px rgba(59,130,246,0.4);
}

.cta-section h2::after {
  background: linear-gradient(90deg, transparent, #3B82F6, transparent);
}

.cta-btn {
  background: var(--gradient-primary);
  box-shadow: 0 20px 50px rgba(59,130,246,0.3);
}

.cta-btn:hover {
  box-shadow: 0 30px 70px rgba(59,130,246,0.5);
}

/* FAQ */
.faq-item {
  border-left: 3px solid var(--color-primary);
}

.faq-question h3 {
  color: var(--color-text-primary);
}

.faq-icon {
  color: var(--color-primary);
}

/* Notas personalizadas */
.template-card[style*="border: 2px"] {
  border: 2px solid rgba(59,130,246,0.3) !important;
}

.template-card[style*="border: 3px"] {
  border: 3px solid var(--color-primary) !important;
  box-shadow: 0 25px 70px rgba(59,130,246,0.25) !important;
}

/* Badge "MÁS POPULAR" */
div[style*="background: linear-gradient(135deg, #059669"] {
  background: var(--gradient-secondary) !important;
  box-shadow: 0 5px 20px rgba(236,72,153,0.4) !important;
}

/* Plan Premium header */
.template-card div[style*="background: linear-gradient(135deg, #2a2520"] {
  background: linear-gradient(135deg, #1E293B, #334155) !important;
}

/* Checkmarks verdes */
span[style*="color: #059669"] {
  color: var(--color-primary) !important;
}

/* Checkmarks dorados */
span[style*="color: #d4b9a4"] {
  color: var(--color-secondary) !important;
}

/* Enlaces hover rosa */
a:hover {
  color: var(--color-secondary);
}