/* =========================================================
   icons.css  -  Iconos locales de Westpress Imprenta
   Reemplaza a Font Awesome. Todo vive en tu servidor.
   Cada <i class="fas fa-xxx"> toma su dibujo de img/icons/xxx.svg
   El color del icono = color del texto (currentColor).
   Iconos de redes (whatsapp, facebook, youtube): pon los .svg
   en img/icons/ y apareceran solos.
========================================================= */

.fa, .fas, .far, .fab {
    display: inline-block;
    font-style: normal;
    line-height: 1;
}

.fa::before, .fas::before, .far::before, .fab::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: var(--wpi);
            mask-image: var(--wpi);
}

/* ---- Iconos incluidos (11) ---- */
.fa-phone          { --wpi: url("../img/icons/phone.svg"); }
.fa-envelope       { --wpi: url("../img/icons/envelope.svg"); }
.fa-map-marker-alt { --wpi: url("../img/icons/geo.svg"); }
.fa-clock          { --wpi: url("../img/icons/clock.svg"); }
.fa-lock           { --wpi: url("../img/icons/lock.svg"); }
.fa-leaf           { --wpi: url("../img/icons/leaf.svg"); }
.fa-home           { --wpi: url("../img/icons/home.svg"); }
.fa-download       { --wpi: url("../img/icons/download.svg"); }
.fa-cube           { --wpi: url("../img/icons/cube.svg"); }
.fa-mobile-alt     { --wpi: url("../img/icons/mobile.svg"); }
.fa-arrow-right    { --wpi: url("../img/icons/arrow-right.svg"); }

/* ---- Facebook: igual que el diseno original -> circulo gris con la "f" blanca ---- */
.fa-facebook-f {
    --wpi: url("../img/icons/facebook-f.svg");
    padding: 0 !important;
}
.fa-facebook-f::before {
    width: 1.8em;
    height: 1.8em;
}

/* ---- WhatsApp: a color (verde con telefono blanco), como el original ---- */
.fa-whatsapp {
    background-color: transparent !important;
    padding: 0 !important;
}
.fa-whatsapp::before {
    -webkit-mask: none !important;
            mask: none !important;
    background-color: transparent;
    background-image: url("../img/icons/whatsapp.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 1.8em;
    height: 1.8em;
}

/* ---- YouTube: circulo rojo (como el original) + logo centrado EXACTO con flex ---- */
.fa-youtube {
    background-color: #ff0000 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.fa-youtube::before {
    -webkit-mask: none !important;
            mask: none !important;
    background-color: transparent;
    background-image: url("../img/icons/youtube-circle.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 66%;
    display: block;
    vertical-align: 0;
    width: 100%;
    height: 100%;
}

/* Diccionario:
   .fa/.fas/.far/.fab  - clases base del icono.
   ::before            - dibuja el SVG con el color del texto.
   --wpi               - variable con la ruta del dibujo de cada icono. */