/* Colores Personalizados - Generado automaticamente */
:root {
    --bg-gradient-start: #000000;
    --bg-gradient-end: #0a0a0a;
    --neon-color: #ffd60a;
    --custom-text-color: #ffffff;
    --bg-color: #000000;
}

/* ===== BODY Y BASE ===== */
body {
    background: #000000 !important;
    color: #ffffff;
}

/* ===== HEADER / NAVBAR ===== */
.header {
    background: rgba(0, 0, 0, 0.96) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
}
.logo h2 {
    background: linear-gradient(135deg, #ffd60a, #cc9900) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.nav-menu a {
    color: rgba(255, 255, 255, 0.85) !important;
}
.nav-menu a:hover {
    color: #ffd60a !important;
}
.mobile-menu-toggle span {
    background: #ffffff !important;
}
@media (max-width: 768px) {
    .nav-menu {
        background: #000000 !important;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
}

/* ===== HERO ===== */
.hero {
    background: #000000 !important;
    color: #ffffff;
}

/* ===== PLANES ===== */
.plans-section {
    background: #080808 !important;
    color: #ffffff;
}
.section-title {
    color: #ffffff !important;
}
.section-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}
.plan-tab {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}
.plan-tab.active {
    background: #ffd60a !important;
    color: #000000 !important;
    border-color: #ffd60a !important;
}
.plan-tab:hover:not(.active) {
    border-color: rgba(255, 214, 10, 0.5) !important;
    color: #ffd60a !important;
}
.plan-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 214, 10, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5) !important;
}
.plan-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: #ffd60a !important;
    box-shadow: 0 15px 40px rgba(255, 214, 10, 0.15) !important;
}
.plan-name {
    color: #ffffff !important;
}
.price-mxn {
    color: #ffd60a !important;
}
.price-usd {
    color: rgba(255, 255, 255, 0.65) !important;
}
.plan-features li {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
.guarantee-badge {
    border-color: #ffd60a !important;
}

/* ===== CARACTERÍSTICAS ===== */
.features-section {
    background: #000000 !important;
    color: #ffffff !important;
}
.feature-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4) !important;
}
.feature-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: #ffd60a !important;
    box-shadow: 0 10px 30px rgba(255, 214, 10, 0.12) !important;
}
.feature-card h3 {
    color: #ffffff !important;
}
.feature-card p {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* ===== PASOS ===== */
.steps-section {
    background: #080808 !important;
    color: #ffffff;
}
.step-card {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4) !important;
}
.step-card h3 {
    color: #ffffff !important;
}
.step-card p {
    color: rgba(255, 255, 255, 0.72) !important;
}
.step-number {
    background: #ffd60a !important;
    color: #000000 !important;
}

/* ===== FAQ ===== */
.faq-section {
    background: #000000 !important;
    color: #ffffff;
}
.faq-item {
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(255,255,255,0.07);
}
.faq-question {
    color: #ffffff !important;
}
.faq-question:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}
.faq-icon {
    color: #ffd60a !important;
}
.faq-answer p {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* ===== TESTIMONIOS ===== */
.testimonials-section {
    background: #080808 !important;
    color: #ffffff;
}
.testimonial-card {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4) !important;
}
.testimonial-comment {
    color: rgba(255, 255, 255, 0.78) !important;
}
.testimonial-author {
    color: #ffffff !important;
}

/* ===== CALCULADORA ===== */
.calculator-section {
    background: #080808 !important;
}

/* ===== REVENDEDORES ===== */
.resellers-section {
    background: #000000 !important;
}
.reseller-card:hover {
    border-color: #ffd60a !important;
    box-shadow: 0 10px 30px rgba(255,214,10,0.12) !important;
}

/* ===== INSTALACION ===== */
.installation-section {
    background: #080808 !important;
}
.device-tab.active, .device-tab:hover {
    border-color: #ffd60a !important;
    color: #ffd60a !important;
    background: rgba(255,214,10,0.08) !important;
}
.install-step-number {
    background: #ffd60a !important;
    color: #000000 !important;
}

/* ===== CONTACTO ===== */
.contact-section {
    background: linear-gradient(135deg, #0a0a0a 0%, #111111 100%) !important;
}
.contact-section .section-title,
.contact-section .section-subtitle {
    color: #ffffff !important;
}

/* ===== FOOTER ===== */
.footer {
    background: #000000 !important;
    border-top: 1px solid rgba(255,255,255,0.07);
}

/* ===== BOTONES ===== */
.btn-primary {
    background: linear-gradient(135deg, #ffd60a, #cc9900) !important;
    border-color: #ffd60a !important;
    color: #000000 !important;
    font-weight: 700;
}
.btn-primary:hover {
    box-shadow: 0 10px 30px rgba(255, 214, 10, 0.35) !important;
}
.plan-card .btn-primary {
    background: #ffd60a !important;
    color: #000000 !important;
}

/* ===== NEON / ACENTOS ===== */
.neon-text {
    color: #ffd60a !important;
    text-shadow: 0 0 10px #ffd60a, 0 0 20px #ffd60a, 0 0 30px #ffd60a;
    font-weight: 700;
}
.highlight-neon {
    color: #ffd60a !important;
    text-shadow: 0 0 5px #ffd60a;
}
.calc-savings-amount {
    color: #ffd60a !important;
    text-shadow: 0 0 20px #ffd60a;
}
.calc-result {
    border-color: #ffd60a !important;
}
.calc-vs {
    color: #ffd60a !important;
    text-shadow: 0 0 15px #ffd60a;
}