/* ====================================
   SKYPC - Correcciones Adicionales
   Para eliminar todos los fondos oscuros
   ==================================== */

/* Sobrescribir cualquier fondo negro o oscuro */
* {
    background-color: transparent !important;
}

body {
    background-color: #fafafa !important;
}

/* Asegurar que todas las secciones tengan fondos claros */
section {
    background-color: var(--white) !important;
}

section:nth-child(even) {
    background-color: var(--light-gray) !important;
}

/* Header siempre blanco */
header,
header.scrolled,
.nav-links {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Eliminar cualquier overlay oscuro */
.hero::before,
.hero::after,
section::before,
section::after {
    background: none !important;
}

/* Hero con gradiente pero más claro */
.hero {
    background: linear-gradient(135deg, rgba(0, 151, 55, 0.7), rgba(254, 101, 0, 0.7)), 
                url('../images/hero/hero-bg.jpg') center/cover !important;
}

/* Textos siempre en colores oscuros para buena legibilidad */
h1, h2, h3, h4, h5, h6, p, a, span, li {
    color: var(--text-primary) !important;
}

/* Excepciones para elementos que necesitan colores específicos */
.hero h1,
.hero h2,
.hero p,
.btn-secondary,
.category-card,
.category-card h3,
.category-card ul li {
    color: var(--white) !important;
}

/* Footer con fondo claro */
footer {
    background: linear-gradient(135deg, #f8f8f8 0%, #eeeeee 100%) !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
}

footer * {
    background: transparent !important;
}

/* CTA Section más clara */
.cta-section {
    background: linear-gradient(135deg, var(--primary-orange), var(--primary-green)) !important;
    opacity: 0.9;
}

/* Cards y elementos interactivos */
.card,
.service-card,
.contact-info,
.contact-form,
.feature-card {
    background: var(--white) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
}

/* Loader con fondo claro */
.loader-wrapper {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Menú móvil */
@media (max-width: 768px) {
    .nav-links {
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important;
    }
    
    .menu-toggle,
    .menu-toggle i {
        color: var(--text-primary) !important;
    }
}

/* Eliminar cualquier pseudo-elemento con fondo oscuro */
*::before,
*::after {
    background-color: transparent !important;
}

/* Asegurar que los botones mantengan sus colores */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-orange), #ff8033) !important;
    color: var(--white) !important;
}

.btn-secondary {
    background: transparent !important;
    border: 2px solid var(--white) !important;
    color: var(--white) !important;
}

.btn-secondary:hover {
    background: var(--white) !important;
    color: var(--primary-green) !important;
}

/* Scroll to top button */
.scroll-top {
    background: var(--primary-green) !important;
    color: var(--white) !important;
}

/* WhatsApp button */
.whatsapp-float {
    background: #25d366 !important;
    color: var(--white) !important;
}