/* ============================================ musai - GOLD ACCENT OVERRIDES Carga este CSS DESPUÉS de style.css ============================================ */ :root { /* Nueva paleta dorada */ --gold-1: #F5A623; --gold-2: #F7B731; --gold-3: #FFC857; --gold-4: #FFD873; --gold-5: #FFECB3; --gold-dark: #D4920A; --gold-gradient: linear-gradient(135deg, #F5A623 0%, #F7B731 40%, #FFC857 100% ); --gold-gradient-subtle: linear-gradient(135deg, rgba(245, 166, 35, 0.15) 0%, rgba(247, 183, 49, 0.1) 100% ); --shadow-gold: 0 0 30px rgba(245, 166, 35, 0.25); --shadow-gold-strong: 0 0 50px rgba(245, 166, 35, 0.35); } /* ============================================ HEADER LINE - Dorado en el centro ============================================ */ .header::after { background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.3) 15%, rgba(245, 166, 35, 0.5) 50%, rgba(99, 102, 241, 0.3) 85%, transparent 100% ); } /* ============================================ SIGNUP BUTTON - Dorado (CTA principal) ============================================ */ .btn-signup { background: var(--gold-gradient); color: #1a1a1a; box-shadow: 0 0 20px rgba(245, 166, 35, 0.3), 0 4px 15px rgba(0, 0, 0, 0.2); } .btn-signup:hover { box-shadow: 0 0 40px rgba(245, 166, 35, 0.45), 0 8px 25px rgba(0, 0, 0, 0.3); } /* ============================================ HERO BADGE - "Potenciado por IA" en dorado ============================================ */ .hero-badge { background: var(--gold-gradient-subtle); border-color: rgba(245, 166, 35, 0.4); color: var(--gold-2); box-shadow: var(--shadow-gold); } .hero-badge svg { color: var(--gold-1); } /* ============================================ CREDITS DISPLAY - Dorado (sensación moneda) ============================================ */ .credits-display { background: var(--gold-gradient-subtle); border-color: rgba(245, 166, 35, 0.35); color: var(--gold-1); box-shadow: var(--shadow-gold); } .credits-display:hover { border-color: rgba(245, 166, 35, 0.6); box-shadow: var(--shadow-gold-strong); } #creditsCount { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================ PRICING CARD POPULAR - Borde y badge dorados ============================================ */ .pricing-card-popular { border-color: var(--gold-1); background: linear-gradient(135deg, rgba(245, 166, 35, 0.08) 0%, rgba(247, 183, 49, 0.04) 100% ); box-shadow: var(--shadow-gold); } .pricing-card-popular:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), var(--shadow-gold-strong); } .popular-badge { background: var(--gold-gradient); color: #1a1a1a; box-shadow: 0 4px 15px rgba(245, 166, 35, 0.4); } /* Checks de la tarjeta popular en dorado */ .pricing-card-popular .pricing-features svg { color: var(--gold-1); } /* ============================================ ORB 3 - Uno de los orbes de fondo en dorado ============================================ */ .orb-3 { background: radial-gradient(circle, var(--gold-1) 0%, transparent 70%); } /* ============================================ HERO FEATURE ICON - Primer icono en dorado (El reloj de "Genera en segundos") ============================================ */ .hero-feature:first-child svg { color: var(--gold-1); filter: drop-shadow(0 0 4px rgba(245, 166, 35, 0.5)); } /* ============================================ FLOATING SPARKLE - Ya es dorado, reforzamos ============================================ */ .floating-sparkle-1 { color: var(--gold-1); filter: drop-shadow(0 0 10px rgba(245, 166, 35, 0.5)); } /* ============================================ STEP NUMBERS - Números de pasos en dorado (Sección "Cómo funciona") ============================================ */ .step-number { background: var(--gold-gradient); color: #1a1a1a; box-shadow: var(--shadow-gold); } /* ============================================ MODAL PRIMARY BUTTON - Botones principales de modales en dorado (opcional) ============================================ */ /* .modal-btn-primary { background: var(--gold-gradient); color: #1a1a1a; box-shadow: 0 4px 20px rgba(245, 166, 35, 0.35); } .modal-btn-primary:hover { box-shadow: 0 8px 30px rgba(245, 166, 35, 0.45); } */ /* ============================================ GENERATE BUTTON - Alternativa dorada (Descomenta si quieres el botón principal dorado) ============================================ */ /* .btn-generate .btn-bg { background: var(--gold-gradient); } .btn-generate:hover .btn-bg { box-shadow: var(--shadow-gold-strong); } */ /* ============================================ TEXT GRADIENT - Versión dorada alternativa (Para títulos especiales) ============================================ */ .gradient-text-gold { background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 25%, var(--gold-3) 50%, var(--gold-2) 75%, var(--gold-1) 100% ); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientFlow 8s ease infinite; } /* ============================================ FOOTER LINE - Toque dorado en el centro ============================================ */ .footer::before { background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.3) 25%, rgba(245, 166, 35, 0.5) 50%, rgba(99, 102, 241, 0.3) 75%, transparent 100% ); } /* ============================================ FOOTER LINKS - Dorado en hover/active ============================================ */ .footer-section a { transition: color 0.2s ease; } .footer-section a:hover { color: var(--gold-1); } .footer-social a:hover { color: var(--gold-1); border-color: rgba(245, 166, 35, 0.4); background: rgba(245, 166, 35, 0.1); } /* Móvil: efecto en tap/active */ @media (max-width: 768px) { .footer-section a:active { color: var(--gold-1); } .footer-social a:active { color: var(--gold-1); border-color: rgba(245, 166, 35, 0.4); background: rgba(245, 166, 35, 0.1); } }