:root {
    
    /**************************
    Necesita cargar la fuente en el componente 
    "style css > fuentes y letras" 
    **************************/
    
--font-body-family: 'Raleway', sans-serif;
    
--font-title-family: 'SUEZONE-REGULAR', sans-serif;
    
--font-bold: 700;
    
--font-regular: 400;
    
--font-light: 300;

    /* Text */
    
--body-txt-default-color: #5f6e83;

    /*logo header*/
    
--logo-width: 240px;
    
--logo-height: 50px;

    /* Title */
    
--home-title-size: 1.7rem;
    
--home-title-size-mobile: 1.5rem;
    
--title-color: #5f6e83;
    
--title-transform: uppercase;
    
--title-weight: var(--font-regular);

    /* Primary Colors */
    
--primary-color: #074297;
    
--primary-contrast: #fff;
    
--primary-hover-color: #358ed2;
    
--primary-hover-contrast: var(--primary-contrast);

    /* Secondary Colors */
    
--secondary-color: #1e91cc;
    
--secondary-contrast: var(--primary-contrast);
    
--secondary-hover-color: var(--primary-hover-color);
    
--secondary-hover-contrast: var(--secondary-contrast);

    /* Danger Colors */
    
--danger-color: #dc3545;
    
--danger-contrast: white;
    
--danger-hover-color: #c82333;
    
--danger-hover-contrast: var(--danger-contrast);

    /* Highlight */
    
--highlight-color: #336ebf;
    
--highlight-contrast: white;
    
--highlight-hover-color: #1580b1;
    
--highlight-hover-contrast: white;

    /*********************************************
    DESCUENTOS
    **********************************************/
    
--discount-bg-color: var(--highlight-color);
    
--discount-txt-color: var(--highlight-contrast);

    /*********************************************
    MENU
    **********************************************/
    /* Level 1 */
    
--lv1-size: 1rem;
    
--lv1-txt-color: #ffffff;
    
--lv1-bg-color: white;
    
--lv1-hover-txt-color: #191919;
    
--lv1-hover-bg-color: none;
    
--lv1-hover-decoration: rgb(30 145 204);

    /* Level 2 */
    
--lv2-size: .75rem;
    
--lv2-txt-color: #5f6e83;
    
--lv2-bg-color: transparent;
    
--lv2-hover-txt-color: #212529;
    
--lv2-hover-bg-color: rgb(222, 226, 230);

    /* Level 3 */
    
--lv3-size: var(--lv2-size);
    
--lv3-txt-color: var(--lv2-txt-color);
    
--lv3-bg-color: transparent;
    
--lv3-hover-txt-color: var(--lv2-hover-txt-color);
    
--lv3-hover-bg-color: var(--lv2-hover-bg-color);

    /* Menu Title */
    
--menu-title-size: var(--lv3-size);
    
--menu-title-weight: var(--font-bold);
    
--menu-title-txt-color: var(--lv3-txt-color);

    /* Header */
    
--header-bg-color: white;
    
--header-navbar-bg-color: #074297;
    
    /* Footer */
    
--footer-bg-color: linear-gradient(rgb(30 145 204 / 48%), rgb(251 251 251 / 3%)), url(footerfondo.png);
    
--footer-txt-color: #ffffff;

    /* Social Media */
    
--rrss-bg: var(--primary-color);
    
--rrss-txt-color: var(--lv1-bg-color);
    
--rrss-border-radius: 50%;

    /*******************************************************************
    BORDES
    ********************************************************************/
    
--default-border-radius: .25rem;

    /********************************************************************
    COLECCIONES PRODUCTO
    *********************************************************************/
    
--product-collection-border-radius: 1.25rem;
    
--product-collection-bg: white;
    
--product-collection-txt-direction: center;
}
/*******************************************************************
Colección home grilla
********************************************************************/

.bs-collection-home{
    --cols:2; 
    --cols-sm:3;
    --cols-md:3; 
    --cols-lg:4; 
    --cols-xl:4;
    --gap:1rem
}

/*******************************************************************
Colección 
********************************************************************/

.bs-collection{
    --cols:2; 
    --cols-sm:3;
    --cols-md:3; 
    --cols-lg:3; 
    --cols-xl:3;
    --gap:1rem
}