/*!
 * Font Awesome Optimizado para SEO - Ingappx
 * Optimización de carga de fuentes con font-display: swap
 * y métricas ajustadas para reducir CLS (Layout Shift)
 */

/* ============================================
   SOLID ICONS - Font Awesome 6 Free (900)
   ============================================ */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  /* Métricas optimizadas para reducir CLS */
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 100%;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2");
}

/* ============================================
   REGULAR ICONS - Font Awesome 6 Free (400)
   ============================================ */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* Métricas optimizadas para reducir CLS */
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 100%;
  src: url("../webfonts/fa-regular-400.woff2") format("woff2");
}

/* ============================================
   BRANDS ICONS - Font Awesome 6 Brands (400)
   ============================================ */
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* Métricas optimizadas para reducir CLS */
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 100%;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2");
}

/* ============================================
   VARIABLES CSS PARA FONT AWESOME
   ============================================ */
:root, :host {
  --fa-style-family-classic: 'Font Awesome 6 Free';
  --fa-style-family-brands: 'Font Awesome 6 Brands';
  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free';
  --fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
}

/* ============================================
   CLASES DE ICONOS
   ============================================ */
.fas,
.fa-solid {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: auto;
  line-height: 1;
}

.far,
.fa-regular {
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: auto;
  line-height: 1;
}

.fab,
.fa-brands {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: auto;
  line-height: 1;
}

/* ============================================
   FALLBACK MIENTRAS CARGA LA FUENTE
   ============================================ */
@supports (font-display: swap) {
  .fas::before,
  .fa-solid::before,
  .far::before,
  .fa-regular::before,
  .fab::before,
  .fa-brands::before {
    /* Prevenir flash de texto invisible */
    visibility: visible;
    opacity: 1;
  }
}

/* Contenedor de iconos con dimensiones fijas para evitar CLS */
.icon-container {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* ============================================
   OPTIMIZACIÓN PARA PERFORMANCE
   ============================================ */
/* Hint al navegador sobre qué caracteres se usarán */
@supports (unicode-range: U+0-10FFFF) {
  /* Solo cargar los glifos que realmente usamos */
  @font-face {
    font-family: 'Font Awesome 6 Free Subset';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    /* Subset común de iconos usados en ingappx */
    unicode-range: U+f007, U+f015, U+f019, U+f03e, U+f0c0, U+f0e0, U+f095,
                   U+f0ac, U+f121, U+f023, U+f013, U+f1e0, U+f3fa;
    src: url("../webfonts/fa-solid-900.woff2") format("woff2");
  }
}