/********* Variables *************/
:root {
    /**Gradients**/
    --hb-color-headfoot-grd-clr1: rgba(4, 5, 245, 1);
    --hb-color-headfoot-grd-clr2: rgba(0, 203, 171, 1);
    --hb-color-bannerini-grd-clr1: rgba(222, 247, 245, 1);
    --hb-color-bannerini-grd-clr2: rgba(217, 226, 255, 1);
    --hb-color-porque-grd-clr1: rgba(216, 240, 238, 1);
    --hb-color-porque-grd-clr2: rgba(217, 226, 255, 1);
    --hb-color-productos-grd-clr1: rgba(225, 227, 249, 1);
    --hb-color-productos-grd-clr2: rgba(255, 233, 239, 1);
    --hb-color-servs-grd-clr1: rgba(255, 233, 238, 1);
    --hb-color-servs-grd-clr2: rgba(253, 248, 228, 1);
    --hb-color-segmerc-grd-clr1: rgba(242, 231, 248, 1);
    --hb-color-segmerc-grd-clr2: rgba(255, 233, 225, 1);
    --hb-color-difer-grd-clr1: rgba(222, 247, 245, 1);
    --hb-color-difer-grd-clr2: rgba(217, 226, 255, 1);
    --hb-color-recursos-grd-clr1: rgba(255, 238, 233, 1);
    --hb-color-recursos-grd-clr2: rgba(212, 243, 239, 1);
    --hb-color-sobre-grd-clr1: rgba(222, 247, 245, 1);
    --hb-color-sobre-grd-clr2: rgba(217, 226, 255, 1);
    --hb-color-paralax-grd-clr1: rgba(96, 123, 234, 1);
    --hb-color-paralax-grd-clr2: rgba(254, 224, 231, 1);

    /**Colores especiales**/
    --hb-color-pink-hl: rgba(255, 2, 129, 1);
    --hb-color-green-hl: rgba(12, 179, 150, 1);
    --hb-color-alert-notas: rgba(231, 243, 247, 1);
    --hb-color-alert-notas-text: rgba(98, 154, 188, 1);
    --hb-color-alert-consejo: rgba(255, 248, 227, 1);
    --hb-color-alert-consejo-text: rgba(198, 169, 51, 1);
    --hb-color-alert-importante: rgba(250, 232, 237, 1);
    --hb-color-alert-importante-text: rgba(165, 81, 113, 1);
    --hb-color-alert-recurso: rgba(229, 247, 244, 1);
    --hb-color-alert-recurso-text: rgba(85, 153, 127, 1);
    --hb-color-alert-referencia: rgba(250, 232, 237, 1);
    --hb-color-alert-referencia-text: rgba(165, 81, 113, 1);
    --hb-color-alert-documento: rgba(229, 247, 244, 1);
    --hb-color-alert-documento-text: rgba(85, 153, 127, 1);

    /**Colores generales**/
    --hb-color-black: rgba(21, 21, 25, 1);
    --hb-color-white: rgba(255, 255, 255, 1);
    --hb-color-gray: rgba(93, 93, 93, 1);
    --hb-color-gray-2: rgba(31, 33, 39, 1);
    --hb-color-light-gray: rgba(126, 126, 126, 1);
    --hb-color-dark-gray: rgba(37, 39, 46, 1);
    --hb-color-green: rgba(12, 179, 150, 1);
    --hb-color-dark-green: rgba(0, 154, 126, 1);
    --hb-color-light-green: rgba(96, 184, 0, 1);
    --hb-color-sblue: rgba(103, 113, 219, 1);
    --hb-color-dark-sblue: rgba(80, 94, 201, 1);
    --hb-color-pink: rgba(213, 100, 133, 1);
    --hb-color-dark-pink: rgba(188, 80, 115, 1);
    --hb-color-purple: rgba(144, 97, 200, 1);
    --hb-color-dark-purple: rgba(112, 75, 172, 1);
    --hb-color-lblue: rgba(101, 182, 220, 1);
    --hb-color-dark-lblue: rgba(56, 156, 191, 1);
    --hb-color-orange: rgba(255, 143, 97, 1);
    --hb-color-dark-orange: rgba(255, 119, 85, 1);
    --hb-color-hubblue: rgba(0, 52, 244, 1);


    /**Colores chips **/
    --hb-color-blog-blue: rgba(0, 186, 226, 1);
    --hb-color-blog-orange: rgba(255, 143, 97, 1);
    --hb-color-blog-purple: rgba(156, 105, 230, 1);
    --hb-color-blog-dark-green: rgba(10, 179, 148, 1);
    --hb-color-blog-pink: rgba(255, 103, 144, 1);
    --hb-color-blog-dark-blue: rgba(66, 114, 214, 1);
    --hb-color-blog-high-green: rgba(0, 203, 52, 1);
    --hb-color-blog-violet: rgba(233, 104, 232, 1);
    --hb-color-blog-light-blue: rgba(0, 157, 207, 1);
    --hb-color-blog-gold: rgba(220, 189, 61, 1);
    --hb-color-report-green: rgba(101, 177, 150, 1);
    --hb-color-report-blue: rgba(18, 55, 241, 1);
    --hb-color-report-gray: rgba(153, 153, 153, 1);

    /**Tamaños en puntos*/
    --hb-size-pt-50: 37.5pt;
    --hb-size-pt-38: 28.5pt;
    --hb-size-pt-35: 26.25pt;
    --hb-size-pt-30: 22.5pt;
    --hb-size-pt-22: 16.5pt;
    --hb-size-pt-20: 15pt;
    --hb-size-pt-19: 14.25pt;
    --hb-size-pt-18: 13.5pt;
    --hb-size-pt-17: 12.75pt;
    --hb-size-pt-16: 12pt;
    --hb-size-pt-15: 11.25pt;
    --hb-size-pt-14: 10.5pt;
    --hb-size-pt-13: 9.75pt;
    --hb-size-pt-12: 9pt;
    --hb-size-pt-11: 8.25pt;
    --is-wide: 0;

    /*Weights*/
    --hb-fw-normal: 400;
    --hb-fw-medium: 500;
    --hb-fw-semibold: 600;
    --hb-fw-bold: 700;

}

/* Variables responsivas */
@media (min-width: 1037px) {
    :root {
        --is-wide: 1; /*Variable para identificar pantallas anchas*/
    }
}
@media (max-width: 576px) {
  :root {
    /**Tamaños en puntos*/
    --hb-size-pt-50: 26pt;
    --hb-size-pt-38: 24pt;
    --hb-size-pt-30: 20pt;
    --hb-size-pt-20: 14pt;
  }
}