:root {

    /**************************
    Necesita cargar la fuente en el componente 
    "style css > fuentes y letras" 
    **************************/

--font-body-family: 'Montserrat';

--font-title-family: 'Montserrat';

--font-bold: 700;

--font-regular: 400;

--font-light: 300;

    /* Text */

--body-txt-default-color: #3b3b3b;
   
    /*logo header*/

--logo-width: 240px;

--logo-height: 80px;

    /* Title */

--home-title-size: 1.5rem;

--title-color: #222222;

--title-transform: uppercase;

--title-weight: var(--font-regular);

    /* Primary Colors */

--primary-color: #28b6ea;

--primary-contrast: #fff;

--primary-hover-color: #0f87b3;

--primary-hover-contrast: var(--primary-contrast);

    /* Secondary Colors */

--secondary-color: #000000;

--secondary-contrast: var(--primary-contrast);

--secondary-hover-color: #7b7b7b;

--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: #eff4ef;

--highlight-contrast: #114f24;

--highlight-hover-color: #1580b1;

--highlight-hover-contrast: white;

    /*********************************************
    DESCUENTOS
    **********************************************/

--discount-bg-color: var(--primary-color);

--discount-txt-color: var(--highlight-color);

    /*********************************************
    MENU
    **********************************************/
    /* Level 1 */

--lv1-size: .9rem;

--lv1-txt-color: #000000;

--lv1-bg-color: transparent;

--lv1-hover-txt-color: #0180af;

--lv1-hover-bg-color: none;

--lv1-hover-decoration: rgb(40 182 234);

    /* Level 2 */

--lv2-size: .75rem;

--lv2-txt-color: #6c6c6c;

--lv2-bg-color: transparent;

--lv2-hover-txt-color: #6c6c6c;

--lv2-hover-bg-color: rgb(255 255 255);

    /* 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: white;

--header-navbar-mobile-bg-color: var(--header-navbar-bg-color);

    /* Social Media */

--rrss-bg: #44754e;

--rrss-txt-color: #ffff;

    /*******************************************************************
    BORDES
    ********************************************************************/

--default-border-radius: .25rem;

    /********************************************************************
    COLECCIONES PRODUCTO
    *********************************************************************/

--product-collection-border-radius: 1.25rem;

--product-collection-bg: white;

--product-collection-txt-direction: center;

    /********************************************************************
    Footer
    *********************************************************************/

--footer-bg-color: #f9f9f9;

--footer-txt-color: #fff;
    /********************************************************************
    Modal Suscripción
    *********************************************************************/ 
    /* Variables para el título del modal de suscripción */

--suscripcion-titulo-font-size: 1.8rem;

--suscripcion-titulo-font-weight: var(--font-bold);

--suscripcion-titulo-background: linear-gradient(45deg, #18542b, #4db56d);

--suscripcion-titulo-margin-bottom: 15px;

    /* Variables para el texto del modal de suscripción */

--suscripcion-texto-font-size: 1.1rem;

--suscripcion-texto-line-height: 1.6;

--suscripcion-texto-color: var(--body-txt-default-color);

    /* Variables para el botón de suscripción */

--suscripcion-boton-padding: 12px 30px;

--suscripcion-boton-margin: 15px auto;

--suscripcion-boton-font-weight: bold;

--suscripcion-boton-border-radius: 25px;

--suscripcion-boton-background: linear-gradient(45deg, #306640, #299d4f);

--suscripcion-boton-border: none;

--suscripcion-boton-color: white;

--suscripcion-boton-text-transform: uppercase;

--suscripcion-boton-letter-spacing: 1px;

--suscripcion-boton-transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/*******************************************************************
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:4; 
    --cols-lg:4; 
    --cols-xl:4;
    --gap:1rem
}