: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: 100px;

--logo-height: auto;

    /* Title */

--home-title-size: 1.5rem;

--title-color: #44754e;

--title-transform: uppercase;

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

    /* Primary Colors */

--primary-color: #163c7e;

--primary-contrast: #fff;

--primary-hover-color: #365db1;

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

    /* Secondary Colors */

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

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

--highlight-contrast: #114f24;

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

--highlight-hover-contrast: white;

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

--discount-bg-color: #3772f0;

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

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

--lv1-size: .9rem;

--lv1-txt-color: #0e254c;

--lv1-bg-color: transparent;

--lv1-hover-txt-color: #365db1;

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

--lv1-hover-decoration: #3772f0;

    /* Level 2 */

--lv2-size: .75rem;

--lv2-txt-color: #3a4151;

--lv2-bg-color: transparent;

--lv2-hover-txt-color: #ffffff;

--lv2-hover-bg-color: #3772f0;

    /* 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: #1d3c7e;

--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;
    
    /********************************************************************
    Cabecera Slider mensajes
    *********************************************************************/

--mobile-contact-banner-bg: linear-gradient(240deg, #f3f3f3, #ffffff);

--mobile-contact-banner-text: var(--body-txt-default-color);

--mobile-contact-banner-title-color: #2d3748;

--mobile-contact-banner-icon-color: var(--primary-color);

    /* Tamaños configurables */

--mobile-contact-banner-font-size: 11px;

--mobile-contact-banner-icon-size: 12px;

    /********************************************************************
    Pop up última compra
    *********************************************************************/

--popup-bg-color: rgba(0, 0, 0, 0.7);

--popup-text-color: white;

--popup-text-price-color: white;

--popup-font-family: var(--font-body-family);

--popup-message-size: 14px;

--popup-product-name-size: 14px;

--popup-time-size: 12px;

--popup-price-size: 14px;
    
    /********************************************************************
    Temporizador con colección de productos
    *********************************************************************/

--collection-timer-bg: linear-gradient(135deg, #1e3c72, #2a5298);

--collection-timer-title-text-color: #fff;

--collection-timer-box-bg: rgba(255, 255, 255, 0.15);

--collection-timer-box-text-color: #fff;

--collection-timer-highlight-bg: yellow;

--collection-timer-highlight-text: black;

--scroll-arrow-color: #ffffff;

    /********************************************************************
    Temporizador Solo con botón
    *********************************************************************/

--exclusive-timer-bg: linear-gradient(135deg, #FF416C, #FF4B2B);

--exclusive-timer-box-bg: rgba(255, 255, 255, 0.2);

--exclusive-timer-box-text-color: #fff;

--exclusive-timer-message-bg: #FFDE59;

--exclusive-timer-message-text: #333;

--exclusive-timer-button-bg: linear-gradient(135deg, #4CAF50, #3e8e41);

--exclusive-timer-button-hover-bg: linear-gradient(135deg, #45a049, #36802e);

--exclusive-timer-button-text: white;

--exclusive-timer-button-hover-text: #eeeeee;
}

/*******************************************************************
Colección home grilla temporizador
********************************************************************/

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

/*******************************************************************
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
}

/*******************************************************************
Sección blog
********************************************************************/

.bs-blog {
  padding: 3rem 0;
  --cols: 2;
  --cols-sm: 2;
  --cols-md: 3;
  --cols-lg: 3;
  --cols-xl: 4;
}