/* ===============================
   FIX FONT AWESOME PARA NETLIFY
   Solución a conflictos de font-family
=============================== */

/* Forzar Font Awesome en todos los iconos */
.fas, .far, .fal, .fab, .fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Font Awesome Brands específicamente */
.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Font Awesome Regular específicamente */
.far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

/* Selectores específicos para iconos del sitio */
.cart-btn i,
.nav-toggle span,
.service-icon i,
.stat-icon i,
.contact-item i,
.social-link i,
.footer i,
.hero-buttons i,
.feature-item i,
.benefit-icon i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Fix para iconos que pueden estar siendo sobrescritos */
i[class*="fa-"]:before,
i.fas:before,
i.far:before,
i.fab:before,
i.fal:before {
    font-family: inherit !important;
}

/* Asegurar que los pseudo-elementos funcionen */
.fas:before, 
.far:before, 
.fab:before, 
.fal:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.fab:before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.far:before {
    font-weight: 400 !important;
}

/* Fix específico para iconos del navbar */
.navbar .fas,
.navbar .far,
.navbar .fab {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Fix para iconos en botones */
.btn .fas,
.btn .far,
.btn .fab,
button .fas,
button .far,
button .fab {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Override cualquier font-family global que interfiera */
* .fas,
* .far, 
* .fab,
* .fal {
    font-family: "Font Awesome 6 Free" !important;
}

* .fab {
    font-family: "Font Awesome 6 Brands" !important;
}

/* Backup: Si Font Awesome 6 no funciona, probar Font Awesome 5 */
@supports not (font-family: "Font Awesome 6 Free") {
    .fas, .far, .fal, .fab, .fa {
        font-family: "Font Awesome 5 Free" !important;
    }
    
    .fab {
        font-family: "Font Awesome 5 Brands" !important;
    }
}