:root{
    /*fonts*/
    font-size: 14px;
    --font-body-family:'Montserrat', sans-serif;
    --font-title-family:'Montserrat', sans-serif;

    --font-bold: 600;
    --font-regular: 400;
    --font-light: 300;
    --body-txt-default-color: #403f3f;
    --body-txt-light:rgb(135,135,135); 

    /* logo cabecera */
    --logo-width:150px;
    --logo-height:150px;

    /* COLORES */ 

    /* highlight DESTACADO */
    --highlight-color: #e01a4a; /* rojo */
    --highlight-contrast: white;

    /* primary (AZUL) */
    --primary-color: #007BFF;
    --primary-contrast: white;

    /* primary -hover */
    --primary-hover-color: #0056b3;
    --primary-hover-contrast: white;

    /* secondary */
    --secondary-color: #221f1a;
    --secondary-contrast: white;

    /* secondary hover */
    --secondary-hover-color: #221f1aba;
    --secondary-hover-contrast: var(--highlight-contrast);

    /* danger */
    --danger-color: var(--highlight-color);
    --danger-contrast: var(--highlight-contrast);

    /* danger hover */
    --danger-hover-color:#8c3322;
    --danger-hover-contrast: #fff;

    /* success */
    --success-color: #96eb83;
    --success-contrast: rgba(0,0,0,0.8);

    /* success hover */
    --success-hover-color:#77bf67;
    --success-hover-contrast: rgba(0,0,0,0.8);

    /* body */
    --body-bg: #F6F8F9;
    --element-bg: white;
    --collection-brand-color: #B2B2B2;
    --collection-brand-bg: transparent;

    /* Border radius */
    --default-border-radius: 1rem;
    --product-collection-border-radius: .5rem;

    /* botones */
    --btn-bg-default: #B2B2B2;
    --btn-color-default: white;
    --btn-border:2px solid;
    --btn-border-radius: 2rem;
    --btn-weight: var(--font-bold);

    /* migas de pan */
    --breadcrumb-bg-color: #f6f8f9;

    /* forms */
    --input-bg-color: #fff;
    --input-border-color: var(--secondary-border);
    --input-txt-color: var(--body-txt-default-color);
    --input-border: var(--btn-border) var(--input-border-color);

    /* Cabecera */
    --header-bg-home: rgba(255,255,255,1);
    --header-bg: #007BFF;
    --header-border-radius: 10rem;

    /* Buscador */
    --header-search-bg: #f6f8f9;
    --header-search-border: #ffffff;
    --header-txt-color: inherit;

    /* menú */
    --header-navbar-mobile-bg-color: white;

    /* iconos */
    --icon-header-bg: transparent;
    --icon-header-color: #007bff;
    --icon-header-hover-bg: var(--primary-color);
    --icon-header-hover-color: white;

    /* lv1 */
    --lv1-color: inherit;
    --lv1-bg: transparent;
    --lv1-size: 16px;

    --lv1-hover-color: var(--secondary-color);
    --lv1-hover-bg: var(--primary-color);

    /* lv2 */
    --lv2-color: inherit;
    --lv2-bg: transparent;
    --lv2-size: .85rem;

    --lv2-hover-color: var(--primary-hover-contrast);
    --lv2-hover-bg: var(--primary-hover-color);

    /* lv3 */
    --lv3-txt-color: #1d1d1b;
    --lv3-bg-color: transparent;
    --lv3-size: .85rem;

    --lv3-hover-txt-color: var(--secondary-hover-color);
    --lv3-hover-bg-color: none;

    --menu-title-size: var(--lv3-size);
    --menu-title-weight: var(--font-bold);
    --menu-title-color: #545454;

    /*Home title*/
    --title-weight: var(--font-bold);
    --title-transform: uppercase;

    --home-title-size: 2rem;
    --home-title-color: #404040;
    --home-title-decoration-color: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(248,217,209,1) 50%, rgba(255,255,255,1) 100%);

    /* product */
    --prod-title-weight: var(--font-regular);
    --prod-title-size: 2rem;

    /* descuentos */
    --discount-bg-color: var(--primary-color);
    --discount-txt-color: var(--secondary-color);

    /* footer */
    --footer-bg-top-color:#666666;
    --footer-bg-color:white;
    --footer-txt-color: #666;
    --footer-link-txt-color: #525252;
    --footer-link-hover-txt-color: var(--primary-color);

    /* facebook */
    --chat-facebook-bg-color: #1877f2;
    --chat-facebook-txt-color: white;

    --chat-facebook-hover-bg-color: rgb(23,113,230);
    --chat-facebook-hover-txt-color: white;

    /* whatsapp */
    --chat-whatsapp-bg-color:#25D366;
    --chat-whatsapp-txt-color: white;

    --chat-whatsapp-hover-bg-color:#25D366;
    --chat-whatsapp-hover-txt-color:white;

    /* banners */
    --banner-hover-bg-color: rgba(0,0,0,0.6);
    --banner-hover-txt-color: #fff;

    /* alert */
    --alert-bg:white;
    --alert-color:white;

    /********************************************************************
    Modal Suscripción
    *********************************************************************/ 
    --suscripcion-titulo-font-size: 1.8rem;
    --suscripcion-titulo-font-weight: var(--font-bold);
    --suscripcion-titulo-background: linear-gradient(45deg, #1d1d1b, #9d9d9d);
    --suscripcion-titulo-margin-bottom: 15px;

    --suscripcion-texto-font-size: 1.1rem;
    --suscripcion-texto-line-height: 1.6;
    --suscripcion-texto-color: var(--body-txt-default-color);

    --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, #007BFF, #0056b3);
    --suscripcion-boton-border: none;
    --suscripcion-boton-color: #ffffff;
    --suscripcion-boton-text-transform: uppercase;
    --suscripcion-boton-letter-spacing: 1px;
    --suscripcion-boton-transition: transform 0.2s ease, box-shadow 0.2s ease;

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

    /********************************************************************
    Cabecera Slider mensajes
    *********************************************************************/
    --mobile-contact-banner-bg: var(--body-bg);
    --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;

    /********************************************************************
    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: #007BFF;
    --collection-timer-highlight-text: white;
    --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: #007BFF;
    --exclusive-timer-message-text: #fff;
    --exclusive-timer-button-bg: linear-gradient(135deg, #007BFF, #0056b3);
    --exclusive-timer-button-hover-bg: linear-gradient(135deg, #0056b3, #004099);
    --exclusive-timer-button-text: white;
    --exclusive-timer-button-hover-text: #eeeeee;
}

/* sliders */
.slick-slider {
    --slider-btn-color: black;
    --slider-btn-color-active: black;
    --slider-dots-width:.5rem;
    --slider-dots-height:.5rem;
    --slider-dots-bg: var(--secondary-color);
    --slider-dots-bg-hover: var(--secondary-hover-color);
    --slider-dots-bg-active: var(--primary-contrast);
    --slider-dots-op: 1;
    --slider-dots-border-size: 2px;
    --slider-dots-border-color-active: var(--primary-color);
}

/* Grillas */
.bs-collection-temporizer {
    --slider-margin: 1rem;
    --cols-xl: 5;
    --cols-lg: 4;
    --cols-md: 3;
    --cols-sm: 2;
    --cols: 2;
}

.bs-collection {
    --aspect-ratio: 4/6;
    --gap: 1rem;
    --cols-xl: 4;
    --cols-lg: 3;
    --cols-md: 3;
    --cols-sm: 2;
    --cols: 2;
}

.bs-blog-article {
    --aspect-ratio: 3/5;
    --img-square-fit: cover;
}

.bs-banners {
    --gap: 1rem;
    --aspect-ratio: 6/10;
    --img-square-fit: cover;
}

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