:root{
    /*fonts*/
    font-size: 14px;
    --font-body-family: 'Outfit', sans-serif;
    --font-title-family: 'Fredoka', 'Outfit', sans-serif;
    --font-bold: 600;
    --font-regular: 500;
    --font-light: 400;
    --body-txt-default-color: #5A3A50;

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

    /* primary (fucsia del logo, más profundo para que el texto blanco se lea bien) */
    --primary-color: #C8235C;
    --primary-contrast: #fff;
    --primary-border: #C8235C;

    /* primary -hover */
    --primary-hover-color:#A81B4C;
    --primary-hover-contrast: #fff;
    --primary-hover-border: #A81B4C;

    /* secondary (rosa salmón del logo) */
    --secondary-color:#FF94A2;
    --secondary-contrast:  #3A1F35;
    --secondary-border:#FF94A2;

    /* secondary hover */
    --secondary-hover-color:#FCE4EC;
    --secondary-hover-contrast: #3A1F35;
    --secondary-hover-border:#FF94A2;

    /* danger */
    --danger-color:#C8235C;
    --danger-contrast: #fff;

    /* danger hover */
    --danger-hover-color:#A81B4C;
    --danger-hover-contrast: #fff;

    /* success */
    --success-color: #C3D9CC;
    --success-contrast: #3A1F35;

    /* success hover */
    --success-hover-color:#A9C8B6;
    --success-hover-contrast: #3A1F35;
    --element-bg-color: #FDF6F8;

     /* Border radius */
    --default-border-radius: 1rem;


    /* botones (redondeados tipo píldora) */
    --btn-border:1.5px solid;
    --btn-border-radius: 999px;




   /* migas de pan*/
    --breadcrumb-bg-color: var(--element-bg-color);

   /* forms */
    --input-bg-color: #fff;
    --input-border-color: #E3C6D2;
    --input-txt-color: #3A1F35;

    /*Cabecera header*/
    --header-bg-color: white;
    --header-txt-color: var(--primary-color);

    /* cabecera menú (barra blanca con texto ciruela) */
    --header-navbar-bg-color: #FFFFFF;
    --header-navbar-mobile-bg-color:#fff;

    /* lv1 */
    --lv1-txt-color: #3A1F35;
    --lv1-bg-color: transparent;
    --lv1-size: 1.05rem;

    /* lv1 hover */
    --lv1-hover-txt-color: #C8235C;
    --lv1-hover-decoration: var(--primary-color);

    /* lv2 */
    --lv2-txt-color: var(--lv1-txt-color);
    --lv2-bg-color: transparent;
    --lv2-size: 1rem;

    /* lv2 hover */
    --lv2-hover-txt-color: #C8235C;
    --lv2-hover-bg-color: #FDF6F8;

    /* lv3 */
    --lv3-txt-color: var(--lv1-txt-color);
    --lv3-bg-color: transparent;
    --lv3-size: 1rem;

    /* lv3 hover */
    --lv3-hover-txt-color: #C8235C;
    --lv3-hover-bg-color: #FDF6F8;
    --dropdown-menu-border-radius: 1.25rem;
    --menu-title-size: var(--lv3-size);
    --menu-title-weight: var(--font-bold);
    --menu-title-color: #3A1F35;


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

    /* home titles (más grandes y oscuros) */
    --home-title-size: 2.4rem;
    --home-title-color:#3A1F35;


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

    /* collection */
    --collection-product-bg-color: #fff;
    --collection-product-border-radius: 1.25rem;


    /* descuentos */
    --discount-bg-color: #FF94A2;
    --discount-txt-color: #3A1F35;

    /* blog */
    --blog-article-border-radius: 1.25rem;


    /* footer (ciruela oscuro) */
    --footer-bg-color: 58, 31, 53; /* tiene que se definifo como rgb sin poner rba() SOLO NUMEROS */
    --footer-txt-color: #fff;
    --footer-link-txt-color:#fff;
    --footer-link-hover-txt-color:#FF94A2;

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

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

    /* whatsapp hover */
    --chat-whatsapp-hover-bg-color:#1EB858;
    --chat-whatsapp-hover-txt-color:white;

    /* banners */
    --banner-hover-bg-color:rgba(58,31,53,0.55);
    --banner-hover-txt-color: #fff;
    --transition: all .25s ease;

    /********************************************************************
    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, #C8235C, #8E4FC9);
    --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: 999px;
    --suscripcion-boton-background: linear-gradient(45deg, #C8235C, #A81B4C);
    --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, #FCE4EC, #FFFFFF);
    --mobile-contact-banner-text: #3A1F35;
    --mobile-contact-banner-title-color: #3A1F35;
    --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(58, 31, 53, 0.9);
    --popup-text-color: white;
    --popup-text-price-color: #FF94A2;
    --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, #3A1F35, #6E4A66);
    --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: #FF94A2;
    --collection-timer-highlight-text: #3A1F35;
    --scroll-arrow-color: #ffffff;

    /********************************************************************
    Temporizador Solo con botón
    *********************************************************************/
    --exclusive-timer-bg: linear-gradient(135deg, #C8235C, #E2477E);
    --exclusive-timer-box-bg: rgba(255, 255, 255, 0.2);
    --exclusive-timer-box-text-color: #fff;
    --exclusive-timer-message-bg: #FCE4EC;
    --exclusive-timer-message-text: #3A1F35;
    --exclusive-timer-button-bg: linear-gradient(135deg, #3A1F35, #573553);
    --exclusive-timer-button-hover-bg: linear-gradient(135deg, #573553, #6E4A66);
    --exclusive-timer-button-text: white;
    --exclusive-timer-button-hover-text: #ffffff;
}

.bs-home__brands{
    --slider-padding:.2rem;
}
.bs-collection{
    --slider-padding:.5rem;
}

/********************************************************************
Colección Grilla temporizador
*********************************************************************/
.bs-collection-temporizer{
    --cols:2;
    --cols-md:3;
    --cols-lg:4;
    --cols-xl:5;
    --gap:1rem
}

/********************************************************************
Colección Grilla home (4 por fila en pantallas grandes: fotos más grandes)
*********************************************************************/
.bs-collection-home{
    --cols:2;
    --cols-md:3;
    --cols-lg:4;
    --cols-xl:4;
    --gap:1.25rem
}
/********************************************************************
Colección
*********************************************************************/
.bs-collection{
    --cols:2;
    --cols-md:3;
    --cols-lg:4;
    --cols-xl:4;
    --gap:1.25rem
}

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

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