: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: auto;

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

    /* Primary Colors */
    
--primary-color: #fa352e;
    
--primary-contrast: #fff;
    
--primary-hover-color: #cb2a24;
    
--primary-hover-contrast: var(--primary-contrast);

    /* Secondary Colors */
    
--secondary-color: #0079c3;
    
--secondary-contrast: var(--primary-contrast);
    
--secondary-hover-color: #015f98;
    
--secondary-hover-contrast: var(--secondary-contrast);

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

    /* Highlight */
    
--highlight-color: #fb3029;
    
--highlight-contrast: white;
    
--highlight-hover-color: #d62923;
    
--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(246 47 43);

    /* 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: #0079c3;
    
    /* Footer */
    
--footer-bg-color: #ffffff;
    
--footer-txt-color: #000000;

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

    /********************************************************************
    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, #1976D2, #2196F3);
    
--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, #2196F3, #1976D2);
    
--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: #2d3748;
    
--mobile-contact-banner-icon: var(--primary-color);

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