/* 
==================================================
  Estilos Configuraciones componente Articulo
==================================================
*/

.bs-article {
  background: var(--article-outer-bg);
}
.article-content {
  background: var(--article-content-bg);
}
.article-date {
  color: var(--article-date-color);
}
.article-title {
  color: var(--article-title-color);
}
.article-title::after {
  background: var(--article-title-color);
}
.article-body {
  color: var(--article-body-text-color);
}/* 
Explicación de la grilla
- PARES 
|   1   | 2 |
| 3 |   4   |
|   5   | 6 |
- IMPARES 
|   1   | 2 |
| 3 |   4   |
| 5 | 6 | 7 |
*/
.bs-banners {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--banners-gap);
}
.bs-banners * {
    transition: .5s ease transform;
}
.bs-banners__item {
    display: grid;
    position: relative; /* important */
    overflow: hidden;
    border-radius: var(--default-border-radius);
}
.bs-banners__item:hover .bs-banners__img {
    transform: scale(1.05);
}
.bs-banners__title {
    align-self: end;
    justify-self: start;
    display: inline-block;
    font-size: var(--banners-title-size);
    color: var(--banners-title-color);
    z-index: 99;
    padding: 4px 6px;
    margin: var(--banners-gap);
    background-color: var(--banners-title-background);
    border-radius: 5px;
}
.bs-banners__title-background {
    position: relative;
    backdrop-filter: var(--title-bg-filter, grayscale(1) blur(2px));
}
.bs-banners__title-background::before {
    content: " ";
    display: block;
    background: var(--title-background);
    border-radius: var(--default-border-radius);
    opacity: 0.3;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.bs-banners__title-background span,
.bs-banners__title-background a,
.bs-banners__title-background a:hover {
    z-index: 10;
    position: relative;
    /* color: var(--color, white); */
}
.bs-banners__img,
.bs-banners__title {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
}
.bs-banners__square .bs-banners__img:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.bs-banners__square .bs-banners__img picture,
.bs-banners__big-left .bs-banners__img picture,
.bs-banners__big-right .bs-banners__img picture {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bs-banners__square .bs-banners__img picture img,
.bs-banners__big-left .bs-banners__img picture img,
.bs-banners__big-right .bs-banners__img picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}
.bs-banners__full {
    grid-column: 1 / -1;
}
.bs-banners__big-left {
    grid-column: 1 / span 2;
}
.bs-banners__big-right {
    grid-column: 2 / span 2;
}
@media screen and (min-width: 768px) {
    .bs-banners__title {
        font-size: var(--banners-title-size-md);
    }
}
@media screen and (min-width: 992px) {
    .bs-banners__title {
        font-size: var(--banners-title-size-lg);
    }
}.bs-promotion {
  gap: var(--gap-promotion);
}

.bs-promotion-title-background {
  position: relative;
  backdrop-filter: var(--title-bg-filter, grayscale(1) blur(2px));
}

.bs-promotion-title-background::before {
  content: " ";
  display: block;
  background: var(--bs-promotion-bg-color);
  border-radius: var(--default-border-radius);
  opacity: 0.3;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.bs-promotion-title-background span,
.bs-promotion-title-background a,
.bs-promotion-title-background a:hover {
  z-index: 10;
  position: relative;
  color: var(--bs-promotion-text-color);
  font-size: var(--bs-promotion-text-size);
}

.bs-promotion__title {
  position: absolute;
  bottom: var(--gap-promotion);
  left: var(--gap-promotion);
  padding: calc(var(--gap-promotion) / 2);
}

.bs-promotion__item {
  display: block;
  overflow: hidden;
  border-radius: var(--default-border-radius);
  position: relative;
}

.bs-promotion__img:hover {
  transform: scale(1.05);
  transition: 0.8s ease;
}.bs-services {
    gap: var(--gap);
}
.bs-services__img {
    max-width: 64px;
}
.bs-services__item {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: var(--default-border-radius, 0);
    height: 100%;
    background: var(--bs-services-bg-color);
    padding: 1rem;
    box-shadow: 2px 2px 4px 2px rgb(0 0 0 / 19%);
}
.bs-services__item:hover {
    opacity: 0.6;
    transition: 0.3s all ease;
}
.bs-services .btn {
    font-size: 1em;
    margin-top: 1rem;
}
.bs-services__title {
    font-weight: var(--bs-services-text-weight);
    text-align: center;
    color: var(--bs-services-text-color);
    font-size: var(--bs-services-text-size);
    padding-top: 1rem;
    margin: 0;
    display: flex;
    height: 100%;
    transition: color 0.3s ease;
}
.bs-services__item:hover .bs-services__title {
    color: var(--bs-services-hover-text-color);
}/* === Aplicación de variables CSS === */

/* Subtotal final */
[data-bs='cart.subtotal'] {
  font-size: var(--cart-subtotal-font-size);
  font-weight: var(--cart-subtotal-font-weight);
}

/* === Botones === */

/* Botón continuar/checkout */
.btn.btn-primary[data-bs="cart.checkout"] {
  background-color: var(--cart-btn-continue-bg);
  color: var(--cart-btn-continue-color);
  border-color: var(--cart-btn-continue-border);
}

.btn.btn-primary[data-bs="cart.checkout"]:hover {
  background-color: var(--cart-btn-continue-hover-bg);
  border-color: var(--cart-btn-continue-hover-bg);
}

/* Botón seguir comprando */
.btn.btn-secondary[data-bs="cart.keepbuying"] {
  background-color: var(--cart-btn-keep-shopping-bg);
  color: var(--cart-btn-keep-shopping-color);
  border-color: var(--cart-btn-keep-shopping-border);
}

.btn.btn-secondary[data-bs="cart.keepbuying"]:hover {
  background-color: var(--cart-btn-keep-shopping-hover-bg);
  border-color: var(--cart-btn-keep-shopping-hover-bg);
}

/* Botón eliminar */
.btn.btn-danger[data-bs="cart.remove"] {
  background-color: var(--cart-btn-remove-bg);
  color: var(--cart-btn-remove-color);
  border-color: var(--cart-btn-remove-border);
}

.btn.btn-danger[data-bs="cart.remove"]:hover {
  background-color: var(--cart-btn-remove-hover-bg);
  border-color: var(--cart-btn-remove-hover-bg);
}

/* Botón cotizar */
.btn.btn-primary[data-bs="quote"] {
  background-color: var(--cart-btn-quote-bg);
  color: var(--cart-btn-quote-color);
  border-color: var(--cart-btn-quote-border);
}

.btn.btn-primary[data-bs="quote"]:hover {
  background-color: var(--cart-btn-quote-hover-bg);
  border-color: var(--cart-btn-quote-hover-bg);
}

/* === Controles de cantidad === */

/* Botones de cantidad (+ y -) */
.bs-cart .btn.btn-secondary[data-bs="cart.quantity.minus"],
.bs-cart .btn.btn-secondary[data-bs="cart.quantity.plus"] {
  background-color: var(--cart-quantity-btn-bg);
  color: var(--cart-quantity-btn-color);
  border-color: var(--cart-quantity-btn-bg);
}

/* Hover */
.bs-cart .btn.btn-secondary[data-bs="cart.quantity.minus"]:hover,
.bs-cart .btn.btn-secondary[data-bs="cart.quantity.plus"]:hover {
  background-color: var(--cart-quantity-btn-hover-bg);
  border-color: var(--cart-quantity-btn-hover-bg);
}

@media (max-width: 768px) {
  [data-bs='cart.subtotal'] {
    font-size: calc(var(--cart-subtotal-font-size) * 0.9);
  }
}

@media (max-width: 576px) {
  [data-bs='cart.subtotal'] {
    font-size: calc(var(--cart-subtotal-font-size) * 0.85);
  }
}

/* Título productos relacionados en el carro */
.bs-cart-related__title {
  color: var(--bs-cart-related-title-color);
  font-weight: var(--bs-cart-related-title-weight);
  text-transform: var(--bs-cart-related-title-transform);
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 2rem 0 1rem;

  /* Responsivo: se achica en pantallas pequeñas */
  font-size: clamp(1.2rem, 4vw, var(--bs-cart-related-title-size));

  /* Eliminar nowrap para que pueda bajar */
  white-space: normal;
  word-break: break-word;
}

/* Botón productos carro relacionado */

button.bs-related-cart.btn.btn-secondary.btn-sm[data-bs="cart.add.collection"] {
  background-color: var(--collection-cart-btn-bg);
  color: var(--collection-cart-btn-text);
  border: 1px solid var(--collection-cart-btn-border);
}

button.bs-related-cart.btn.btn-secondary.btn-sm[data-bs="cart.add.collection"]:hover {
  background-color: var(--collection-cart-btn-bg-hover);
  color: var(--collection-cart-btn-text-hover);
  border: 1px solid var(--collection-cart-btn-border-hover);
}

/* Link términos y condiciones */

a.bs-terms-link {
  color: var(--terms-link-color);
  text-decoration: var(--terms-link-text-decoration);
}

a.bs-terms-link:hover {
  color: var(--terms-link-color-hover);
  text-decoration: var(--terms-link-text-decoration-hover);
}

.bs-categories {
  margin: 16px 0;
}

.bs-categories.grid {
  --gap: 10px;
  --aspect-ratio: 1/2;
}

.bs-categories__title {
  text-align: center;
  word-break: break-word;
  font-size: var(--categories-text-size);
  color: var(--categories-text-color);
}

.bs-categories__item {
  padding-top: 8px;
  padding-bottom: 8px;
}

.bs-categories__item * {
  transition: .5s ease all;
}

.bs-categories__item:hover .bs-categories__img {
  transform: scale(1.05);
}

.bs-categories__item:hover .bs-categories__title {
  color: var(--text-color-hover-categories);
}/* 
==================================================
  Estilos componente chat widget
==================================================
 */

.chat-widget .dropdown-toggle::after {
    display: none;
    /* Oculta el dropdown-toggle solo dentro del widget */
}

.chat-widget {
    --box-shadow-widget: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    position: fixed;
    bottom: 100px;
    z-index: 1000;
    right: 10px;
    /* Por defecto, ajusta a la izquierda si se requiere */
}

.chat-widget .chat-widget__close-icon {
    display: none;
}

.chat-widget.show .chat-widget__close-icon {
    display: inline;
}

.chat-widget .chat-widget__chat-icon {
    display: inline;
}

.chat-widget.show .chat-widget__chat-icon {
    display: none;
}

.chat-widget .dropdown-menu.show {
    box-shadow: var(--box-shadow-widget);
    width: auto;
}

.chat-widget__btn {
    background: var(--chat-widget-bg-color);
    color: var(--chat-widget-icon-color);
    font-size: var(--chat-widget-btn-size);
    box-shadow: var(--box-shadow-widget);
    width: 1.5em;
    height: 1.5em;
    font-size: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    border: solid 1px rgba(255, 255, 255, 0.3);
}

.chat-widget__btn:hover {
    background: var(--chat-widget-bg-hover-color);
    transition: 0.3s;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2),
        0px 2px 6px rgba(0, 0, 0, 0.1);
}

.chat-widget__content {
    background: white;
    width: 100%;
    min-width: 260px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px;
    padding: 10px;
}

.chat-widget__img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.chat-widget__message {
    box-sizing: border-box;
    border: silver 1px solid;
    padding: 6px;
    border-radius: 6px;
}

.chat-widget__chat-list {
    grid-column: 2 / 3;
    display: flex;
    flex-wrap: wrap;
}

.chat-widget__whatsapp,
.chat-widget__facebook {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100px;
}

.chat-widget__whatsapp {
    background: linear-gradient(0deg, #20b038 0%, #60d66a 100%);
    color: #ffffff;
    margin-left: 6px;
}

.chat-widget__whatsapp:hover {
    color: #ffffff;
    outline: 4px solid rgba(96, 214, 106, 0.6);
}

.chat-widget__facebook {
    background: linear-gradient(0deg, #0062e0 0%, #19afff 100%);
    color: #ffffff;
    margin-left: 4px;
}

.chat-widget__facebook:hover {
    color: #ffffff;
    outline: 4px solid rgba(25, 175, 255, 0.6);
}

@media screen and (min-width: 768px) {
    .chat-widget {
        bottom: 30%;
    }
}/*********************************
 Chat Widget Globos – Floating
*********************************/


/* Container */
.chat-widget-globos-stack {
    position: fixed;
    right: var(--chat-widget-globos-right);
    bottom: var(--chat-widget-globos-bottom);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    z-index: 1000;
}

/* Base button */
.chat-widget-globos-button {
    width: var(--chat-widget-globos-size);
    height: var(--chat-widget-globos-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--chat-widget-globos-icon-size);
    background: #000;
    color: var(--chat-widget-globos-color);
    text-decoration: none;
    transition: transform .2s ease, opacity .2s ease;
}

/* Prevent global hover overrides */
.chat-widget-globos-button,
.chat-widget-globos-button:hover,
.chat-widget-globos-button:focus,
.chat-widget-globos-button:active {
    color: var(--chat-widget-globos-color);
    text-decoration: none;
}

/* Icon color */
.chat-widget-globos-button i {
    color: var(--chat-widget-globos-color);
    pointer-events: none;
}

/* Network colors */
.chat-widget-globos-whatsapp {
    background-color: var(--chat-widget-globos-whatsapp-bg);
}

.chat-widget-globos-facebook {
    background-color: var(--chat-widget-globos-facebook-bg);
}

/* Hover effect */
.chat-widget-globos-button:hover {
    transform: translateY(-2px);
    opacity: .9;
}

/* Mobile styles - tamaños */
@media (max-width: 768px) {
    .chat-widget-globos-button {
        width: var(--chat-widget-globos-size-mobile);
        height: var(--chat-widget-globos-size-mobile);
        font-size: var(--chat-widget-globos-icon-size-mobile);
    }

    .chat-widget-globos-stack {
        gap: .5rem;
    }
}.bs-collection-bg__title {
    font-size: var(--collection-bg-title-size);
}

.bs-title-background-slider {
    position: relative;
    display: inline-block; 
    border-radius: var(--default-border-radius);
    overflow: hidden; 
}

.bs-title-background-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--title-collection-slider-background);
    backdrop-filter: grayscale(var(--bs-slider-grayscale)) blur(var(--bs-slider-blur));
    -webkit-backdrop-filter: grayscale(var(--bs-slider-grayscale)) blur(var(--bs-slider-blur)); /* Para Safari */
    border-radius: inherit; 
    z-index: -1; 
}

.bs-title-background-slider span,
.bs-title-background-slider a,
.bs-title-background-slider a:hover {
    color: var(--collection-bg-slider-title-color);
    position: relative; 
    z-index: 1;
}

/* Botón "Agregar al carro" en slider con fondo */
.bs-collection-bg .bs-collection-bg__add-cart.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-color);
}

.bs-collection-bg .bs-collection-bg__add-cart.btn-secondary:hover,
.bs-collection-bg .bs-collection-bg__add-cart.btn-secondary:active,
.bs-collection-bg .bs-collection-bg__add-cart.btn-secondary:focus {
    background: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-hover-color);
}.bs-collection-bg-grilla__title {
    font-size: var(--collection-grilla-title-size);
}
.bs-title-background-grilla {
    position: relative;
    backdrop-filter: grayscale(var(--bs-grilla-grayscale)) blur(var(--bs-grilla-blur));
}
.bs-title-background-grilla::before{
    background: var(--title-collection-background-grilla);
}
.bs-title-background-grilla span,
.bs-title-background-grilla a,
.bs-title-background-grilla a:hover{
    color: var(--collection-grilla-title-color);
}
/* Botón "Ver todos los productos" */
.btn-primary.btn-collection-grilla-show {
    background: var(--btn-collection-grilla-bg);
    color: var(--btn-collection-grilla-color);
}
.btn-primary.btn-collection-grilla-show:hover,
.btn-primary.btn-collection-grilla-show:active,
.btn-primary.btn-collection-grilla-show:focus,
.btn-primary.btn-collection-grilla-show:not(:disabled):not(.disabled).active:focus,
.btn-primary.btn-collection-grilla-show:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.btn-collection-grilla-show.dropdown-toggle:focus,
.btn-primary.btn-collection-grilla-show:not(:disabled):not(.disabled):active,
.show>.btn-primary.btn-collection-grilla-show.dropdown-toggle {
    background: var(--btn-collection-grilla-hover-bg);
    color: var(--btn-collection-grilla-hover-color);
}
/* Botón "Agregar al carro" */
.bs-collection-bg-grilla .btn-secondary {
    background: var(--btn-secondary-grilla-bg);
    color: var(--btn-secondary-grilla-color);
}
.bs-collection-bg-grilla .btn-secondary:hover,
.bs-collection-bg-grilla .btn-secondary:active,
.bs-collection-bg-grilla .btn-secondary:focus,
.bs-collection-bg-grilla .btn-secondary:not(:disabled):not(.disabled).active:focus,
.bs-collection-bg-grilla .btn-secondary:not(:disabled):not(.disabled):active:focus,
.bs-collection-bg-grilla .show>.btn-secondary.dropdown-toggle:focus,
.bs-collection-bg-grilla .btn-secondary:not(:disabled):not(.disabled):active,
.bs-collection-bg-grilla .show>.btn-secondary.dropdown-toggle {
    background: var(--btn-secondary-grilla-hover-bg);
    color: var(--btn-secondary-grilla-hover-color);
}/* 
==================================================
  Estilos coleccion-buscador-marca
==================================================
*/


.noUi-connect {
  background: var(--noui-connect-bg-color);
}

.bs-collection-filter .btn.btn-secondary {
  background-color: var(--btn-secondary-bg-filter-color);
  border-color: var(--btn-secondary-border-filter-color);
  color: var(--btn-secondary-border-text-color);
}

.bs-collection-filter .btn.btn-secondary:hover {
  background-color: var(--btn-secondary-bg-filter-hover-color);
  border-color: var(--btn-secondary-border-filter-hover-color);
  color: var(--btn-secondary-border-text-hover-color);
}

.bs-collection-filter .bs-filter-btn {
  color: var(--filter-btn-text-color);
  background-color: var(--filter-btn-bg-color);
}

.bs-collection-filter .bs-filter-btn:hover {
  color: var(--filter-btn-text-hover-color);
  background-color: var(--filter-btn-bg-hover-color);
}

.bs-collection-filter {
  background-color: var(--collection-filter-bg-color);
  color: var(--collection-filter-title-text-color);
}

.bs-collection-order {
  background-color: var(--collection-filter-bg-color);
  color: var(--filter-btn-text-color);
}

/******************************************************
Colección de productos
******************************************************/
.bs-collection__title {
  color: var(--collection-title-color);
  font-size: var(--collection-title-font-size);
  font-weight: var(--collection-title-font-weight);
  text-transform: var(--collection-title-transform);
}

.bs-collection__description {
  color: var(--collection-description-color);
}

.bs-collection .btn-secondary {
  background: var(--btn-secondary-bg-collection);
  border-color: var(--btn-secondary-border-collection);
  color: var(--btn-secondary-color-collection);
}

.bs-collection .btn-secondary:hover,
.bs-collection .btn-secondary:active,
.bs-collection .btn-secondary.active,
.bs-collection .btn-secondary:focus,
.bs-collection .btn-secondary:not(:disabled):not(.disabled).active:focus,
.bs-collection .btn-secondary:not(:disabled):not(.disabled):active:focus,
.show>.bs-collection .btn-secondary.dropdown-toggle:focus.bs-collection .btn-secondary:not(:disabled):not(.disabled).active,
.bs-collection .btn-secondary:not(:disabled):not(.disabled):active,
.show>.bs-collection .btn-secondary.dropdown-toggle {
  background: var(--btn-secondary-hover-bg-collection);
  border-color: var(--btn-secondary-hover-border-collection);
  color: var(--btn-secondary-hover-color-collection);
}/* 
==================================================
  Estilos componente formulario suscripción home
==================================================
*/

.bs-subscription {
  border-radius: var(--default-border-radius);
  background: var(--bs-subscription-bg);
  overflow: hidden;
}
.bs-subscription__img {
  object-fit: cover;
  display: block;
}
.bs-subscription__title {
  font-weight: var(--bs-subscription-title-weight);
  color: var(--bs-subscription-title-color);
  font-size: var(--bs-subscription-title-size);
}
.bs-subscription__title strong {
  color: var(--bs-subscription-title-strong-color);
}
.bs-subscription__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px;
  height: 100%;
}
.bs-footer__top-section__info {
  color: var(--bs-subscription-text-color);
  font-size: var(--bs-subscription-text-size);
}

.bs-subscription .form-group + div,
.bs-subscription .form-group {
  margin-bottom: .5rem !important;
}
.bs-subscription .form-group + div .col-md-12 {
  padding: 0;
  padding-left: .5rem;
}
/* Estilos del botón dentro del componente de suscripción */
.bs-subscription .form-group .btn.btn-primary.button_form,
.bs-subscription .form-group .btn.btn-primary.button_form.disabled,
.bs-subscription .form-group .btn.btn-primary.button_form:disabled:hover {
  background-color: var(--bs-subscription-btn-bg);
  color: var(--bs-subscription-btn-text-color);
  padding: 0.5rem 1rem;
  font-weight: var(--bs-subscription-button-weight);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
/* Hover solo si NO está deshabilitado */
.bs-subscription .form-group .btn.btn-primary.button_form:hover:not(:disabled):not(.disabled) {
  background-color: var(--bs-subscription-btn-hover-bg);
}
/* Estilo para botón deshabilitado */
.bs-subscription .form-group .btn.btn-primary.button_form.disabled,
.bs-subscription .form-group .btn.btn-primary.button_form:disabled:hover {
  cursor: not-allowed;
  opacity: 0.65;
}/* Título Grilla de Marcas */
.bs-brands__title {
    color: var(--bs-brands-title-color);
    font-size: var(--bs-brands-title-size);
    font-weight: var(--bs-brands-title-weight);
    text-transform: var(--bs-brands-title-transform);
}
/* Botón exclusivo para la sección de marcas */
.btn-ver-marcas {
  background: var(--btn-ver-marcas-bg);
  border-color: var(--btn-ver-marcas-bg);
  color: var(--btn-ver-marcas-text);
}

/* Consolidando todos los estados hover/active/focus */
.btn-ver-marcas:hover,
.btn-ver-marcas:active,
.btn-ver-marcas:focus,
.btn-ver-marcas:not(:disabled):not(.disabled):active,
.btn-ver-marcas:not(:disabled):not(.disabled).active:focus,
.show>.btn-ver-marcas.dropdown-toggle,
.show>.btn-ver-marcas.dropdown-toggle:focus {
  background: var(--btn-ver-marcas-bg-hover);
  border-color: var(--btn-ver-marcas-bg-hover);
  color: var(--btn-ver-marcas-text-hover);
}

/* Estados deshabilitados */
.btn-ver-marcas.disabled,
.btn-ver-marcas:disabled:hover {
  cursor: not-allowed;
  background: var(--btn-ver-marcas-bg);
  border-color: var(--btn-ver-marcas-bg);
  color: var(--btn-ver-marcas-text);
  opacity: 0.9;
}

/********** Marcas Inicio ******************/

/* Contenedor de las marcas - configuración base */
.bs-brands.grilla {
  display: grid;
  gap: 16px;
  place-items: center;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  justify-content: center;
}

/* Items de marca */
.bs-brands__item.grilla {
  background: var(--body-bg);
  display: block;
  padding: 12px;
  border-radius: var(--default-border-radius);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.bs-brands__item.grilla:hover {
  transform: scale(1.05);
}

/* Efecto de superposición */
.bs-brands__item.grilla::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Reemplaza top, bottom, left, right */
  background: rgba(0, 0, 0, 0.125);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bs-brands__item.grilla:hover::after {
  opacity: 1;
}

/* Imagen dentro del item */
.bs-img-square.brand {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100px;
}

/* Media queries optimizadas */
@media (max-width: 768px) {
  .bs-brands.grilla {
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .bs-brands__item.grilla {
    padding: 8px;
  }
}

@media (min-width: 992px) {
  .bs-brands.grilla {
    grid-template-columns: repeat(auto-fit, minmax(100px, 0.2fr));
  }
}

@media (min-width: 1200px) {
  .bs-brands.grilla {
    grid-template-columns: repeat(auto-fit, minmax(100px, 0.15fr));
  }
}/* 
==================================================
  Estilos home marcas
==================================================
 */

  .listado {
    color: var(--body-txt-default-color);
  }

  .listado:hover {
    color: var(--primary-color);
  }

  /* Barra de índice de letras */
  .brand-index-wrapper {
    text-align: left;
    margin-bottom: 10px;
  }

  .brand-index {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }

  .brand-index-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--body-txt-default-color);
    text-decoration: none;
    padding: 3px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .brand-index-link:hover {
    background: var(--primary-color);
    color: var(--primary-contrast);
  }

  /* Ajuste de scroll para sticky header */
  .brand-letter {
    scroll-margin-top: 100px;
    /* Ajusta según el alto de tu menú sticky */
  }

  .accordion>.card>.card-header {
    background-color: white;
  }

  .btn-outline-primary.toggle-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0;
    position: relative;
  }

  .toggle-icon::before {
    content: "+";
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  .toggle-icon[aria-expanded="true"]::before {
    content: "-";
    transform: rotate(180deg);
  }

  .btn-outline-primary,
  .btn-outline-primary:not(:disabled):not(.disabled):active {
    background: var(--primary-color);
    color: var(--primary-contrast);
    border-color: var(--primary-color);
  }

  .btn-outline-primary:hover,
  .btn-outline-primary:not(:disabled):not(.disabled):active {
    background: var(--primary-hover-color);
    color: var(--primary-hover-contrast);
    border-color: var(--primary-hover-color);
  }

  .bs-img-square.brand-home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: auto;
  }.bs-about-us__img{
    border-radius: var(--about-us-border-radius, var(--default-border-radius));
}
.bs-about-us__info{
    --about-us-margin:20px;
    max-width: calc(480px - var(--about-us-margin));
    width:100%;
    position:relative;
    padding:var(--about-us-margin);
    margin-top: calc(var(--about-us-margin) * -3);
    margin-right:  calc(var(--about-us-margin) * 2);
    margin-bottom: var(--about-us-margin);
    margin-left: var(--about-us-margin);
    background: var(--about-us-bg-color);
    border-radius: var(--about-us-border-radius, var(--default-border-radius));
}
.bs-about-us__info::after{
    backdrop-filter: grayscale(1) blur(2px); 
    opacity:0.6;
    position:absolute;
    content:"";
    display:block;
    background: var(--about-us-bg-overlay);
    right:calc(var(--about-us-margin) * -1);
    top:calc(var(--about-us-margin) * -1);
    left:calc(var(--about-us-margin));
    bottom:var(--about-us-margin);
    border-radius: var(--about-us-border-radius, var(--default-border-radius));
    z-index:-1;
}
.bs-about-us__info h2 {
    color: var(--about-us-title-color);
    font-size: var(--about-us-title-size);
    font-weight: var(--about-us-title-weight);
}
.bs-about-us__info p {
    color: var(--about-us-text-color);
    font-size: var(--about-us-text-size);
    font-weight: var(--about-us-text-weight);
}
@media screen and (min-width:992px){
    .bs-about-us__info{
    margin-top:0;
    margin-bottom:0;
    }
}
@media screen and (max-width:576px) {
  .bs-about-us__info h2, p {
    text-align: center;
}  
}/* 
==================================================
  Estilos componente blog
==================================================
*/

.bs-blog-article__title {
  font-size: var(--blog-title-font-size);
  color: var(--blog-title-color);
}
/* Cambio de color del título en hover */
.bs-blog-article:hover .bs-blog-article__title {
  color: var(--blog-title-hover-color);
}
.bs-blog-article__btn.btn {
  background-color: var(--blog-btn-bg);
  color: var(--blog-btn-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.bs-blog-article__btn.btn:hover {
  background-color: var(--blog-btn-hover-bg);
  color: var(--blog-btn-hover-color);
}
.bs-blog-article {
  background: var(--blog-article-bg);
}/***********************
multi collection
********************/
.multi-collection__title {
  font-size: var(--multi-collection-title-font-size);
  color: var(--multi-collection-title-color);
}
.multi-collection__btn .btn {
    color: var(--multi-collection-btn-text-color);
}
.multi-collection__btn .btn:not(.collapsed) {
  color: var(--multi-collection-btn-selected-text-color);
  background-color: var(--multi-collection-btn-selected-bg-color);
}

.multi-collection__btn .btn:hover {
  color: var(--multi-collection-btn-hover-text-color);
  background-color: var(--multi-collection-btn-hover-bg-color);
}

/* Botón "Agregar al carro" */
button.multi-collection-btn.btn.btn-secondary.btn-sm {
    background: var(--btn-secondary-multi-collection-bg);
    color: var(--btn-secondary-multi-collection-color);
}
button.multi-collection-btn.btn.btn-secondary.btn-sm:hover,
button.multi-collection-btn.btn.btn-secondary.btn-sm:active,
button.multi-collection-btn.btn.btn-secondary.btn-sm:focus,
button.multi-collection-btn.btn.btn-secondary.btn-sm:not(:disabled):not(.disabled).active:focus,
button.multi-collection-btn.btn.btn-secondary.btn-sm:not(:disabled):not(.disabled):active:focus,
button.multi-collection-btn .btn-secondary .show>.btn-secondary.dropdown-toggle:focus,
button.multi-collection-btn.btn.btn-secondary.btn-sm:not(:disabled):not(.disabled):active,
.bs-multi-collection .show>.btn-secondary.dropdown-toggle {
    background: var(--btn-secondary-multi-collection-hover-bg);
    color: var(--btn-secondary-multi-collection-hover-color);
}

/* Botón "Ver todos los productos" */
.btn-primary.btn-multi-collection-show {
  background: var(--btn-multi-collection-bg);
  color: var(--btn-multi-collection-color);
}

.btn-primary.btn-multi-collection-show:hover,
.btn-primary.btn-multi-collection-show:focus,
.btn-primary.btn-multi-collection-show:active,
.btn-primary.btn-multi-collection-show:not(:disabled):not(.disabled).active,
.btn-primary.btn-multi-collection-show:not(:disabled):not(.disabled):active,
.show>.btn-primary.btn-multi-collection-show.dropdown-toggle {
  background: var(--btn-multi-collection-hover-bg);
  color: var(--btn-multi-collection-hover-color);
}/* 
==================================================
  Estilos base para la barra de anuncios
==================================================
*/

.announcement-bar {
  color: var(--announcement-text-color);
  background: var(--announcement-bg);
  border-color: var(--announcement-bg);
  font-size: var(--announcement-text-size);
  padding: 4px 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Responsive: tamaño de fuente más pequeño en móviles */
@media (max-width: 992px) {
  .announcement-bar {
    font-size: calc(var(--announcement-text-size) - 2px);
  }
}

/* Contenido de la barra */
.announcement-bar__content {
  display: inline-flex;
  align-items: center;
  white-space: pre-wrap;
  gap: .5em;
}

/* Contenido con animación */
.announcement-bar__content.animated {
  white-space: nowrap;
  animation: marquee var(--animation-speed) linear infinite;
}

/* Pausa la animación al hacer hover */
.announcement-bar__content.animated:hover {
  animation-play-state: paused;
}

/* Icono de la barra */
.announcement-bar__icon {
  color: var(--announcement-icon-color);
  font-size: var(--announcement-icon-size);
}

/* Botón de cerrar - consolidado para ambos casos */
.announcement-bar__close,
.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0rem 1.25rem;
  color: inherit;
}

/* Animación marquee */
@keyframes marquee {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}/* 
==================================================
  Estilos cabecera
==================================================
*/
.bs-header {
    background: var(--header-bg);
    top: 0; /* Parche espacio vista previa */
}
.bs-menu__lv1 {
    color: var(--lv1-color); /* Color de texto */
    background: var(--lv1-bg);
    font-size: var(--lv1-size); /* Tamaño de letra */
    font-weight: var(--lv1-font-weight);
    text-transform: var(--lv1-transform);
    padding: var(--lv1-padding, 6px 10px);
    white-space: normal;
}
.bs-menu__lv1:hover,
.show > .bs-menu__lv1 {
    color: var(--lv1-hover-color); /* Color hover */
    background: var(--lv1-hover-bg);
}
.bs-menu__lv2,
.bs-header .dropdown-item  {
    color: var(--lv2-color); /* Color de texto */
    background: var(--lv2-bg);
    font-size: var(--lv2-size); /* Tamaño de letra */
    text-transform: var(--lv2-transform);
    font-weight: var(--lv2-font-weight);
}
.bs-menu__lv2:hover,
.dropdown__lv2.show .bs-menu__lv2 {
    color: var(--lv2-hover-color); /* Color hover */
    background: var(--lv2-hover-bg);
}
.bs-menu__lv2.dropdown-toggle {
    color: var(--lv2-dropdown-toggle-color);
}
.bs-menu__lv3 {
    color: var(--lv3-color); /* Color de texto */
    background: var(--lv3-bg);
    font-size: var(--lv3-size); /* Tamaño de letra */
    text-transform: var(--lv3-transform);
    font-weight: var(--lv3-font-weight);
}
.bs-menu__lv3:hover {
    color: var(--lv3-hover-color); /* Color hover */
    background: var(--lv3-hover-bg);
}
.bs-menu-hightlight {
    background: var(--menu-hightlight-bg);
    color: var(--menu-hightlight-color);
    transition: background 0.3s ease, color 0.3s ease;
}
.bs-menu-hightlight:hover {
    background: var(--menu-hightlight-bg-hover, var(--menu-hightlight-bg));
    color: var(--menu-hightlight-color-hover, var(--menu-hightlight-color));
}
/****************
Cabecera Superior
*******************/
    
/* Fondo del header */
.bs-header-top {
    background: var(--color-header-bg);
}
/* Redes sociales: color, fondo, tamaño */
.btn-header-social {
    color: var(--color-social-text);
    background: var(--color-social-bg);
}
/* Hover redes sociales */
.btn-header-social:hover {
    background: var(--color-social-hover-bg);
    color: var(--color-social-hover-text);
    text-decoration: none;
}
/* Login y contacto */
.btn-header-outline {
    color: var(--color-login-contact-text);
}
.btn-header-outline:hover {
    outline: 2px solid var(--color-login-contact-hover-outline);
    color: var(--color-login-contact-hover-outline);
}
/* Carro */
.bs-header-top .btn-cart {
    background: var(--cart-btn-bg);
    color: var(--cart-btn-color);
}
.bs-header-top .btn-cart:hover {
    background: var(--cart-hover-btn-bg);
    color: var(--cart-hover-btn-color);
}
.bs-header-top .cart-items {
    background: var(--cart-items-bg);
    color: var(--cart-items-color);
    border: 2px solid var(--cart-items-border-color);
}
.bs-header-top .btn-cart:hover .cart-items{
    border-color: var(--cart-items-bg);
}
/* Buscador */
.bs-search .form-control {
  background: var(--search-input-bg);
  color: var(--search-input-color);
}
.bs-search .btn {
  background: var(--search-btn-bg);
  color: var(--search-btn-color);
}
.bs-search .btn:hover,
.bs-search .btn:focus,
.bs-search .btn:active {
  background: var(--search-btn-hover-bg);
  color: var(--search-btn-hover-color);
}
.bs-search .btn:before {
  background: var(--search-decoration-bg);
}
/* Versión mobile cierre menú */
.bs-header .bs-menu__close .btn {
    color: var(--mobile-closemenu-btn-color);
    background: var(--mobile-closemenu-btn-bg);
    font-size: var(--mobile-closemenu-btn-font-size);
}/* 
==================================================
= Estilos página en construcción =
==================================================
*/


/* Contenedor principal */
.modern-construction-page {
    position: relative;
    min-height: 100vh;
    background: url(https://dojiw2m9tvv09.cloudfront.net/104845/3/texturaseda_66b36d4987b6b046b3edf946.jpeg?15);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Overlay con glassmorphism */
.construction-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(2px);
}
/* Contenido principal */
.construction-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 3rem 2rem;
    background: var(--maintenance-content-bg);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 90%;
    animation: fadeInUp 1s ease-out;
}
/* Logo */
.logo-container {
    margin-bottom: 2rem;
}
.logo-link {
    display: inline-block;
    transition: transform 0.3s ease;
}
.logo-link:hover {
    transform: scale(1.05);
}
.logo-img {
    max-height: 80px;
    width: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
    animation: logoFloat 3s ease-in-out infinite;
}
/* Título principal */
.main-title {
    margin-bottom: 1.5rem;
}
.title-text {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--maintenance-primary-color); /* Color sólido */
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    animation: titleGlow 2s ease-in-out infinite alternate;
}
.title-underline {
    width: 80px;
    height: 4px;
    background: var(--maintenance-primary-color); /* Línea sólida */
    margin: 1rem auto;
    border-radius: 2px;
    animation: underlineExpand 1.5s ease-out;
}
/* Subtítulo */
.subtitle-text {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: var(--maintenance-subtitle-color);
    margin-bottom: 2.5rem;
    font-weight: 400;
    text-shadow: none;
}
/* Redes sociales */
.social-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}
.social-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(120 120 120 / 10%);
    border-radius: 50%;
    color: var(--maintenance-primary-color);
    font-size: 1.5rem;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.social-btn:hover {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 15px 35px rgb(156 156 156 / 67%);
    background: var(--maintenance-primary-color);
    color: white;
}
.social-btn:hover i {
    transform: scale(1.2);
    color: white;
}
/* Tooltips */
.social-tooltip {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}
.social-btn:hover .social-tooltip {
    opacity: 1;
}
/* Partículas flotantes */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--maintenance-primary-color);
    border-radius: 50%;
    animation: particleFloat 8s linear infinite;
}
.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 1s; }
.particle:nth-child(3) { left: 70%; animation-delay: 2s; }
.particle:nth-child(4) { left: 80%; animation-delay: 3s; }
.particle:nth-child(5) { left: 40%; animation-delay: 4s; }
/* Animaciones */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes logoFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
@keyframes titleGlow {
    from { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }
    to { text-shadow: 2px 2px 15px var(--maintenance-primary-color) }
}
@keyframes underlineExpand {
    from { width: 0; }
    to { width: 80px; }
}
@keyframes particleFloat {
    0% { transform: translateY(100vh) translateX(0px); opacity: 1; }
    100% { transform: translateY(-10px) translateX(10px); opacity: 0; }
}
/* Clase para desactivar animaciones */
.no-animations * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}
.no-animations .construction-content {
    opacity: 1;
    transform: translateY(0);
}
.no-animations .logo-img {
    transform: translateY(0);
}
.no-animations .title-text {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.no-animations .title-underline {
    width: 80px;
}
.no-animations .social-btn:hover {
    transform: none;
}
.no-animations .social-btn:hover i {
    transform: none;
}
.no-animations .logo-link:hover {
    transform: none;
}
/* Responsive */
@media (max-width: 768px) {
    .construction-content {
        padding: 2rem 1.5rem;
        margin: 1rem;
    }
    
    .social-container {
        gap: 1rem;
    }
    
    .social-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}
@media (max-width: 480px) {
    .construction-content {
        padding: 1.5rem 1rem;
    }
}
/* ===== REDES SOCIALES: base ===== */
.modern-construction-page .social-btn {
    background: var(--maintenance-social-bg);
    border: 1px solid var(--maintenance-social-border);
    color: var(--maintenance-social-icon-color);
}

/* ===== REDES SOCIALES: estados ===== */
.modern-construction-page .social-btn:hover,
.modern-construction-page .social-btn:focus,
.modern-construction-page .social-btn:focus-visible,
.modern-construction-page .social-btn:active {
    background: var(--maintenance-social-hover-bg);
    border-color: var(--maintenance-social-hover-border);
    color: var(--maintenance-social-hover-icon-color);
}

.not-found-page-container {
  color: var(--not-found-text-color);
}
.not-found-page-container .not-found-btn {
  background: var(--not-found-btn-bg);
  color: var(--not-found-btn-text);
}
.not-found-page-container .not-found-btn:hover {
  background: var(--not-found-btn-hover);
  color: var(--not-found-btn-text);
}
.not-found-page-container .jumbotron {
  background: var(--not-found-jumbotron-bg);
}.bs-footer {
  background: var(--bs-footer-bg);
}

.bs-footer__title {
  color: var(--bs-footer-title-color);
  font-size: var(--bs-footer-title-size);
  font-weight: var(--bs-footer-title-weight);
  text-transform: var(--bs-title-transform);
}

.bs-footer__link {
  color: var(--bs-footer-link-color);
  font-size: var(--bs-footer-font-size);
  font-weight: var(--bs-footer-link-weight);
  text-transform: var(--bs-link-transform);
}

.bs-footer__link:not(.bs-footer__contact-title):hover {
  color: var(--bs-footer-link-hover-color);
}

.bs-copyright {
  font-size: var(--bs-copyright-text-size);
  background: var(--bs-copyright-bg);
  color: var(--bs-copyright-text-color);
}

.bs-footer__social .btn-social {
  color: var(--bs-footer-social-color);
  background-color: var(--bs-footer-social-bg);
}

.bs-footer__social .btn-social:hover {
  background: var(--bs-footer-social-hover-bg);
  color: var(--bs-footer-social-hover-color);
}

.bs-footer__social .btn-social,
.bs-footer__social .chat-facebook,
.bs-footer__social .chat-whatsapp{
    --icon: var(--footer-social-icon);
    width:calc(var(--icon) * 1.75);
    height:calc(var(--icon) * 1.75);
    font-size: var(--icon);
}

.bs-footer__title::after{
    background:var(--bs-footer-title-underline-color);
}

img.img-fluid.bs-pay-method {
  filter: opacity(var(--bs-pay-method-opacity));
}.store-branches .bs-footer {
    background: var(--bs-footer-bg);
}
.store-branches .bs-footer__title {
    color: var(--bs-footer-title-color);
    font-size: var(--bs-footer-title-size);
    font-weight: var(--bs-footer-title-weight);
    text-transform: var(--bs-title-transform);
}
.store-branches .bs-footer__link {
  color: var(--bs-footer-link-color);
  font-size: var(--bs-footer-font-size);
  font-weight: var(--bs-footer-link-weight);
  text-transform: var(--bs-link-transform);
}
.store-branches .bs-footer__link:not(.bs-footer__contact-title):hover {
  color: var(--bs-footer-link-hover-color);
}
.store-branches .bs-copyright {
  font-size: var(--bs-copyright-text-size);
  background: var(--bs-copyright-bg);
  color: var(--bs-copyright-text-color);
}
.store-branches .bs-footer__social .btn-social {
  color: var(--bs-footer-social-color);
  background: var(--bs-footer-social-bg);
}
.store-branches .bs-footer__social .btn-social:hover {
  background: var(--bs-footer-social-hover-bg);
  color: var(--bs-footer-social-hover-color);
}
/**********************************
    Pie de página con sucursales
***********************************/
.whatsapp-btn {
  color: var(--whatsapp-btn-text-color);
  background-color: var(--whatsapp-btn-bg);
  border: 2px solid var(--whatsapp-btn-border-color);
}
.store-branches .bs-footer__link.whatsapp-btn:hover {
  color: var(--whatsapp-btn-hover-text-color);
  background-color: var(--whatsapp-btn-hover-bg);
  border-color: var(--whatsapp-btn-hover-border-color);
}

.store-branches .bs-footer__social .btn-social,
.store-branches .bs-footer__social .chat-facebook,
.store-branches .bs-footer__social .chat-whatsapp {
    --icon: var(--store-branches-social-icon);
    width: calc(var(--icon) * 1.75);
    height: calc(var(--icon) * 1.75);
    font-size: var(--icon);
}

.store-branches .bs-footer__title::after {
    background: var(--store-branches-title-underline-color);
}

.store-branches img.img-fluid.bs-pay-method {
  filter: opacity(var(--bs-footer-branch-pay-method-opacity));
}/*
==================================================
= Estilos componente Modal Suscripción   =
==================================================
*/

/* Animaciones */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shine {
    from {
        transform: translateX(-100%) rotate(45deg);
    }

    to {
        transform: translateX(100%) rotate(45deg);
    }
}

/* Estilos específicos del modal de suscripción */
.modal-suscripcion .modal-flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    height: 100%;
}

/* Estilo para el fondo del modal - CORREGIDO PARA EVITAR PESTAÑEO */
.modal-backdrop {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-backdrop.show {
    opacity: 1;
    transition: opacity 0.4s ease-out;
}

/* Estado inicial del modal dialog - CORREGIDO */
.modal-suscripcion .modal-dialog {
    opacity: 0;
    transform: scale(0.95);
}

/* Animación de entrada del modal - CORREGIDO */
.modal-suscripcion.show .modal-dialog {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Estilos de la sección de imagen */
.modal-suscripcion .modal-image {
    flex: 1.8;
    min-width: 280px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px 0 0 12px;
}

.modal-suscripcion .modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Estilos de la sección de contenido */
.modal-suscripcion .modal-content-section {
    flex: 1.2;
    padding: 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 280px;
    max-height: 77%;
    margin: auto;
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo */
.modal-suscripcion .modal-content-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: shine 3s infinite;
    pointer-events: none;
}

/* Estilos del contenedor del logo */
.modal-suscripcion .logo-container {
    margin-bottom: 15px;
    text-align: center;
    width: 100%;
    height: 0;
    padding-bottom: 39%;
    position: relative;
}

.modal-suscripcion .logo-container img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

/* Estilos del texto promocional */
.modal-suscripcion .promo-text {
    margin-bottom: 15px;
    text-align: center;
}

.modal-suscripcion .promo-text h2 {
    font-size: var(--suscripcion-titulo-font-size);
    font-weight: var(--font-bold);
    background: var(--suscripcion-titulo-background);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
}

.modal-suscripcion .promo-text p {
    font-size: var(--suscripcion-texto-font-size);
    color: var(--suscripcion-texto-color);
    line-height: 1.6;
}

/* Estilos del modal personalizado */
.modal-suscripcion .custom-modal {
    position: relative;
    margin-top: 40px;
    overflow: visible;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 12px;
}

/* Estilos del botón de cierre */
.modal-suscripcion .close-button {
    position: absolute;
    top: 3px;
    right: 3px;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.modal-suscripcion .close-button:hover {
    background-color: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.modal-suscripcion .close-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* Utilidad para quitar el padding */
.modal-suscripcion .no-padding {
    padding: 0;
}

/* Estilos para el botón de enviar */
.modal-suscripcion .boton-suscripcion .button_form {
    font-weight: var(--font-bold);
    border-radius: var(--suscripcion-boton-border-radius);
    color: var(--suscripcion-boton-color);
    background: var(--suscripcion-boton-background);
    display: block;
    margin: 15px auto;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 12px 30px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-suscripcion .boton-suscripcion .button_form:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgb(105 105 105 / 40%);
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .modal-suscripcion .modal-flex-container {
        flex-direction: column;
    }

    .modal-suscripcion .modal-image {
        height: auto;
        flex: 2;
    }

    .modal-suscripcion .custom-modal {
        margin-top: 30px;
    }

    .modal-suscripcion .close-button {
        top: 2px;
        right: 2px;
        width: 25px;
        height: 25px;
        font-size: 18px;
    }

    .modal-suscripcion .logo-container {
        padding-bottom: 30%;
    }
}/* 
==================================================
= Estilos del Popup ultima compra =
==================================================
*/

/* Variables y estilos base */
#popup {
  position: fixed;
  bottom: 40px;
  left: 20px;
  color: white;
  padding: 12px;
  border-radius: 8px;
  display: none;
  z-index: 98;
  width: auto;
  max-width: 340px;
  animation: fadeIn 1s ease-in-out;
  background-color: var(--popup-bg-color);
  font-size: var(--popup-message-size);
}

#popup:hover {
  background-color: var(--popup-bg-color);
  transform: scale(1.05);
  transition: all 0.3s ease-in-out;
}

#popup:hover #popup-arrow {
  opacity: 1;
}

/* Contenedor del enlace */
#popup-link {
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 40px;
}

/* Imagen del producto */
#popup-product-image {
  background-color: white;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  margin-right: 12px;
  color: #333;
  flex-shrink: 0;
}

#popup-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

/* Elementos de texto */
.popup-recently-purchased {
  color: var(--popup-text-color);
  font-size: var(--popup-message-size);
}

#popup-icon {
  font-size: calc(var(--popup-message-size) + 10px);
}

#popup-product-name {
  color: var(--popup-text-color);
  font-size: var(--popup-product-name-size);
}

#popup-product-name-wrapper {
  max-width: 200px;
}

.popup-time {
  color: var(--popup-text-color);
  font-size: var(--popup-time-size);
}

/* Flecha */
#popup-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  opacity: 0.7;
}

/* Animaciones */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Estilos para versión móvil */
@media (max-width: 600px) {
  :root {
    --popup-message-size: 12px;
    --popup-product-name-size: 12px;
    --popup-time-size: 10px;
  }

  #popup {
    left: 10px;
    right: 10px;
    max-width: 260px;
    padding: 8px;
    bottom: 50px;
    font-size: var(--popup-message-size);
  }

  #popup-product-image {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  #popup-icon {
    font-size: calc(var(--popup-message-size) + 8px);
  }

  #popup-arrow {
    width: 20px;
    height: 20px;
    right: 8px;
  }

  #popup-link {
    padding-right: 35px;
  }

  .popup-recently-purchased {
    font-size: var(--popup-message-size);
  }
}.bs-product__title {
  font-weight: var(--product-detail-title-font-weight);
  font-size: var(--product-detail-title-font-size);
  color: var(--bs-product-title-color);
}
.bs-product__notice{
    color: var(--bs-product-notice-color);
    background: var(--bs-product-notice-bg);
    font-size: var(--bs-product-notice-font-size); 
}
.bs-product__sku {
  font-size: var(--product-detail-sku-font-size);
}
/* Botónn de la marca sin logo */
article[data-bs="product.detail"] .btn-light {
    color:var(--bs-product-brand-color);
    background:var(--bs-product-brand-bg);
    font-size:var(--bs-product-brand-font-size);
    font-weight:var(--bs-product-brand-font-weight);
}

.bs-product__original-price {
  font-weight: var(--product-detail-original-price-font-weight);
  font-size: var(--product-detail-original-price-font-size);
  color: var(--product-detail-original-color);
}

.bs-product__final-price {
  font-weight: var(--product-detail-final-price-font-weight);
  font-size: var(--product-detail-final-price-font-size);
  color: var(--bs-product-final-price-color);
}

.bs-product__discount-condition {
  font-size: var(--product-detail-discount-condition-font-size);
  color:var(--bs-product-discount-condition-color);
  font-weight: var(--bs-product-discount-condition-font-weight);
}

/* Botón primario agregar al carro */
article[data-bs="product.detail"] .btn-primary {
  background-color: var(--product-detail-btn-primary-bg);
  color: var(--product-detail-btn-primary-color);
  border-color: var(--product-detail-btn-primary-border);
}

article[data-bs="product.detail"] .btn-primary:hover {
  background-color: var(--product-detail-btn-primary-hover-bg);
  border-color: var(--product-detail-btn-primary-hover-border);
  color: var(--product-detail-btn-primary-color);
}

/* Botón secundario cantidad */
article[data-bs="product.detail"] .btn-secondary {
  background-color: var(--product-detail-btn-secondary-bg);
  color: var(--product-detail-btn-secondary-color);
  border-color: var(--product-detail-btn-secondary-border);
}

article[data-bs="product.detail"] .btn-secondary:hover {
  background-color: var(--product-detail-btn-secondary-hover-bg);
  border-color: var(--product-detail-btn-secondary-hover-border);
  color: var(--product-detail-btn-secondary-color);
}

/* Botón encargar */
article[data-bs="product.detail"] .btn-danger {
  background-color: var(--product-detail-btn-danger-bg);
  color: var(--product-detail-btn-danger-color);
  border-color: var(--product-detail-btn-danger-border);
}

article[data-bs="product.detail"] .btn-danger:hover {
  background-color: var(--product-detail-btn-danger-hover-bg);
  border-color: var(--product-detail-btn-danger-hover-border);
  color: var(--product-detail-btn-danger-color);
}

/* selector atributos */

button.btn-attr.attr-selected,
button.btn-attr.attr-selected:focus {
    border-color: var(--selected-color) !important;
}

.btn-attr.attr-selected::after {
    background-color: var(--selected-color);
}

.btn-attr:not(.btn-color).attr-selected::after {
    border-color: var(--selected-color);
}

.attr-dropdown .dropdown-item.attr-selected.attr-selected {
    background: var(--selected-color);
}

.dropdown-item.attr-selected .attr-color-ball::before {
    background-color: var(--selected-color);
}

.btn-color.attr-none-stock::before,
.btn-color.attr-disabled::before {
    border-top: solid var(--disabled-color) 2px;
}

.btn-attr.attr-disabled,
.btn-attr.attr-none-stock {
    color: var(--disabled-color);
}

.bs-variant-select .bs-variant-select__input.disabled + .bs-variant-select__label {
    color: var(--disabled-color);
    border: 2px dashed var(--disabled-color) !important;
}

.bs-variant-select .bs-variant-select__input:checked + .bs-variant-select__label,
.bs-variant-select .bs-variant-select__input.disabled:checked + .bs-variant-select__label {
    border-color: var(--selected-color) !important;
}

.bs-variant-select .bs-variant-select__input:checked + .bs-variant-select__label::after {
    background-color: var(--selected-color);
}

/* pestañas descripciones adicionales */

#bs-product-description button.btn-light {
  background: var(--tab-bg);
  color: var(--tab-text);
  border-color: var(--tab-border);
}

#bs-product-description button.btn-light:hover {
  background: var(--tab-hover-bg);
  color: var(--tab-hover-text);
  border-color: var(--tab-hover-border);
}

#bs-product-description button.btn-light.active {
  background: var(--tab-active-bg);
  color: var(--tab-active-text);
  border-color: var(--tab-active-border);
}

/* Título descripción del producto */
.bs-product-description__title,
.bs-product-description__title a,
.bs-product-description__title:hover {
  color: var(--bs-product-description-title-color);
  font-size: var(--bs-product-description-title-size);
  font-weight: var(--bs-product-description-title-weight);
  text-transform: var(--bs-product-description-title-transform);
}


/* Título Productos y accesesorios relacionados */
.bs-product-suggestions__title {
  color: var(--bs-suggestions-title-color);
  font-weight: var(--bs-suggestions-title-weight);
  text-transform: var(--bs-suggestions-title-transform);
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 2rem 0 1rem;

  /* Responsivo: se achica en pantallas pequeñas */
  font-size: clamp(1.2rem, 4vw, var(--bs-suggestions-title-size));

  /* Eliminar nowrap para que pueda bajar */
  white-space: normal;
  word-break: break-word;
}.collection-timer-title a {
    color: var(--collection-timer-title-text-color);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.collection-timer-title a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.collection-timer-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--collection-timer-bg);
    color: var(--collection-timer-title-text-color);
    padding: 20px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: box-shadow 0.3s ease;
}

.collection-timer-container::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    background: var(--collection-timer-bg);
    border-radius: 14px;
    opacity: 0;
    z-index: -1;
    animation: pulse-border-timer 2s infinite ease-in-out;
    filter: blur(3px);
}

@keyframes pulse-border-timer {
    0% {
        transform: scale(1);
        opacity: 0; 
    }
    20% {
        transform: scale(1.01); 
        opacity: 0.4; 
    }
    70% {
        transform: scale(1.02); 
        opacity: 0; 
    }
    100% {
        transform: scale(1);
        opacity: 0; 
    }
}

.collection-timer-container:hover {
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
.collection-timer-title {
    font-size: 24px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.collection-timer-content {
    display: flex;
    gap: 15px;
    font-size: 22px;
}

.collection-timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--exclusive-timer-box-bg);
    color: var(--exclusive-timer-box-text-color);
    padding: 15px 20px;
    border-radius: 12px;
    min-width: 80px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.collection-timer-box:hover {
    transform: scale(1.05);
}

.collection-timer-box span {
    font-size: 32px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
}
.collection-timer-label {
    font-size: 16px;
    text-transform: uppercase;
    margin-top: 5px;
}

.collection-timer-message {
    font-size: 18px;
    margin: 15px 0;
    background: var(--collection-timer-highlight-bg);
    color: var(--collection-timer-highlight-text);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    letter-spacing: 0.5px;
    animation: scaleAnimation 1.5s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-icon {
    animation: flameFlicker 1s infinite;
    margin: 0 5px;
}

@keyframes scaleAnimation {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes flameFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}


/* Estilos para la flecha animada */
.scroll-arrow-container {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 5px;
}

.scroll-arrow {
    width: 40px;
    height: 40px;
    fill: var(--scroll-arrow-color);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(10px);
    }
    60% {
        transform: translateY(5px);
    }
}

/* Clase específica para ocultar elementos del temporizador */
.collection-timer-expired {
    display: none !important;
}

/* Clase específica para ocultar la colección cuando expira */
.collection-expired {
    display: none !important;
}

@media (max-width: 480px) {
    .collection-timer-content {
        display: flex;
        flex-wrap: nowrap; 
        justify-content: center;
        padding: 11px;
        gap: 5px; 
        overflow: hidden; 
    }

    .collection-timer-box {
        min-width: 70px;
        padding: 12px 16px;
    }

    .collection-timer-box span {
        font-size: 24px;
    }

    .collection-timer-label {
        font-size: 11px;
    }

    .collection-timer-message {
        font-size: 16px;
        padding: 6px 12px;
    }

    .scroll-arrow {
        width: 30px;
        height: 30px;
    }
}

.bs-collection-temporizer .btn.btn-secondary.btn-sm {
  background-color: var(--add-to-cart-bg);
  border-color: var(--add-to-cart-border);
  color: var(--add-to-cart-color);
}

.bs-collection-temporizer .btn.btn-secondary.btn-sm:hover,
.bs-collection-temporizer .btn.btn-secondary.btn-sm:active,
.bs-collection-temporizer .btn.btn-secondary.btn-sm:focus,
.bs-collection-temporizer .btn.btn-secondary.btn-sm:not(:disabled):not(.disabled).active:focus,
.bs-collection-temporizer .btn.btn-secondary.btn-sm:not(:disabled):not(.disabled):active:focus,
.show>.bs-collection-temporizer .btn.btn-secondary.btn-sm.dropdown-toggle:focus,
.bs-collection-temporizer .btn.btn-secondary.btn-sm:not(:disabled):not(.disabled):active {
  background-color: var(--add-to-cart-bg-hover);
  border-color: var(--add-to-cart-border-hover);
  color: var(--add-to-cart-color-hover);
}/* Contenedor principal */
.bs-blog-home {
    background: var(--bs-blog-slider-background);
}
/* Título sección Blog */
.bs-blog-home .bs-title {
    color: var(--bs-blog-slider-title-color);
    font-size: var(--bs-blog-slider-title-size);
    font-weight: var(--bs-blog-slider-title-weight);
    text-transform: var(--bs-blog-slider-title-transform);
}
.bs-blog-home .bs-title:hover {
    color: var(--bs-blog-slider-title-hover-color);
}
/* Variables internas del slider */
.bs-blog {
    --aspect-ratio: 3/4;
    --slider-margin: 1rem;
}
/* Artículo individual */
.bs-blog-slider-article {
    background: var(--bs-blog-slider-article-bg);
}
/* Título del artículo */
.bs-blog-slider-article__title {
    font-size: var(--bs-blog-slider-article-title-size);
    font-weight: var(--blog-title-w, var(--font-bold));
    color: var(--bs-blog-slider-article-title-color);
}
.bs-blog-slider-article:hover .bs-blog-slider-article__title {
    color: var(--bs-blog-slider-title-hover-color);
}
/* Botón dentro del artículo */
.bs-blog-slider-article__btn {
    color: var(--bs-blog-slider-article-btn-text-color);
    background-color: var(--bs-blog-slider-article-btn-bg-color);
    border: 2px solid var(--bs-blog-slider-article-btn-bg-color);
}
/* Efecto hover del botón */
.bs-blog-slider-article__btn::after {
    background: var(--bs-blog-slider-article-btn-hover-bg-color);
}/* 
==================================================
  Estilos componente slider message mobile
==================================================
*/

.mobile-contact-banner {
  width: 100%;
  line-height: 2;
  border-top: 1px solid #f9f9f9;
  border-bottom: 1px solid #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  font-size: var(--mobile-contact-banner-font-size);
  background: var(--mobile-contact-banner-bg);
  color: var(--mobile-contact-banner-text);
}

.mobile-contact-banner strong {
  color: var(--mobile-contact-banner-title-color);
}

.mobile-contact-banner .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.slider-container {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 40px;
}

.slider-track {
  display: flex;
  flex-direction: column;
}

.mcb-slide {
  height: auto;
  min-height: 40px;
  position: absolute;
  width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  opacity: 0;
}

.mcb-slide p {
  max-width: 100%;
  margin: 0;
  line-height: 1.4;
}

.mobile-contact-banner i {
  margin: 0 4px;
  color: var(--mobile-contact-banner-icon-color);
  font-size: var(--mobile-contact-banner-icon-size);
}

.slider-count-1 .slide-1 {
  position: static;
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

.slider-count-2 .slide-1 {
  animation: fadeInOut2 10s infinite;
  animation-delay: 0s;
}

.slider-count-2 .slide-2 {
  animation: fadeInOut2 10s infinite;
  animation-delay: 5s;
}

.slider-count-3 .slide-1 {
  animation: fadeInOut3 15s infinite;
  animation-delay: 0s;
}

.slider-count-3 .slide-2 {
  animation: fadeInOut3 15s infinite;
  animation-delay: 5s;
}

.slider-count-3 .slide-3 {
  animation: fadeInOut3 15s infinite;
  animation-delay: 10s;
}

@keyframes fadeInOut2 {

  0%,
  100% {
    opacity: 0;
    transform: translateY(40px);
  }

  5%,
  45% {
    opacity: 1;
    transform: translateY(0);
  }

  50%,
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}

@keyframes fadeInOut3 {

  0%,
  100% {
    opacity: 0;
    transform: translateY(40px);
  }

  3%,
  30% {
    opacity: 1;
    transform: translateY(0);
  }

  33%,
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}

.slider-container:hover .slider-track {
  animation-play-state: paused;
}

@media (min-width: 992px) {
  .mobile-contact-banner {
    display: none;
  }
}

@media (max-width: 360px) {
  .container {
    padding: 0 8px;
  }
}/* 
==================================================
  Estilos componente migas de pan
==================================================
*/


.bs-breadcrumb .dropdown-item:active {
  background-color: var(--primary-color);
}

.bs-breadcrumb {
  background: var(--breadcrumb-bg-color);
  border-radius: 0.25rem;
  width: 100%;
}

.breadcrumb {
  font-size: var(--breadcrumb-text-size);
  background: var(--breadcrumb-bg-color);
  display: flex;
  align-items: center;
  min-height: 32px;
  margin-bottom: 0;
  padding: 0.5rem 1rem;
}

.breadcrumb-item {
  line-height: 2;
}

.breadcrumb-item a {
  color: var(--breadcrumb-text-color);
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--breadcrumb-text-color);
  content: '>';
  padding: 0 5px;
}

.breadcrumb-item.active {
  color: var(--breadcrumb-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 30%;
  padding-bottom: 1px;
  filter: brightness(50%);
}

.icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  fill: currentColor;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
  .breadcrumb {
    min-height: 28px;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    margin-left: 0;
    justify-content: flex-start;
  }

  .breadcrumb-item.active {
    max-width: 50%;
  }

  .breadcrumb-item+.breadcrumb-item::before {
    padding: 0 3px;
  }

  .icon {
    width: 12px;
    height: 12px;
    margin-right: 3px;
  }

  /* Agrega scroll al dropdown en mobile */
  .breadcrumb-item .dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .breadcrumb-item .dropdown-menu::-webkit-scrollbar {
    width: 4px;
  }

  .breadcrumb-item .dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .breadcrumb-item .dropdown-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }
}.modal_age {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--modal-age-bg), rgba(0, 0, 0, 0.95));
    backdrop-filter: blur(10px);
    z-index: 1000000;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto;
}
@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.modal_age .modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    max-width: 500px;
    width: 90%;
    margin: 0 !important;
    height: auto;
}
.modal_age .modal-dialog {
    margin: 0 !important;
    max-width: none !important;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.7);
    animation: modalZoomIn 0.5s ease-out forwards;
}
@keyframes modalZoomIn {
    to {
        transform: scale(1);
    }
}
.modal_age .modal-content {
    background: var(--modal-age-content-bg);
    border: none;
    border-radius: var(--modal-age-border-radius);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
}
.modal_age .modal-body {
    padding: 3rem 2rem 2rem;
    text-align: center;
}
.modal_age .modal-footer {
    padding: 1.5rem 2rem 2.5rem;
    border: none;
    justify-content: center;
    gap: 1rem;
}
.modal_age .logo-container {
    margin-bottom: 2rem;
    position: relative;
}
.modal_age .logo-container img {
    max-height: 80px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}
.modal_age .logo-container:hover img {
    transform: scale(1.05);
}
.text-titulo {
    color: var(--modal-age-title-color);
    font-size: 1.3rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}
.text-pagina {
    color: var(--modal-age-page-color);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.text-edad {
    color: var(--modal-age-question-color);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 12px;
    border-left: 4px solid var(--modal-age-page-color);
}
.text-condiciones {
    color: var(--modal-age-terms-color);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0;
}
.text-condiciones a {
    color: var(--modal-age-page-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}
.text-condiciones a:hover {
    color: var(--modal-age-page-color);
    border-bottom-color: var(--modal-age-page-color);
    opacity:0.7;
}
.btn.modal_age_no, 
.btn.modal_age_yes {
    width: 120px;
    height: 50px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.btn.modal_age_no::before,
.btn.modal_age_yes::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}
.btn.modal_age_no:hover::before,
.btn.modal_age_yes:hover::before {
    left: 100%;
}
.modal_age .btn.modal_age_no {
    background: var(--modal-age-btn-no-bg);
    color: var(--modal-age-btn-no-text);
    box-shadow: 0 4px 15px rgba(149, 165, 166, 0.4);
}
.modal_age .btn.modal_age_no:hover,
.modal_age .btn.modal_age_no:active,
.modal_age .btn.modal_age_no:focus,
.modal_age .btn.modal_age_no:not(:disabled):not(.disabled):active:focus {
    background: #7f8c8d;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(149, 165, 166, 0.6);
}
.modal_age .btn.modal_age_yes {
    background: var(--modal-age-btn-yes-bg);
    color: var(--modal-age-btn-yes-text);
    box-shadow: 0 4px 15px rgb(0 0 0 / 40%);
}
.modal_age .btn.modal_age_yes:hover,
.modal_age .btn.modal_age_yes:active,
.modal_age .btn.modal_age_yes:focus,
.modal_age .btn.modal_age_yes:not(:disabled):not(.disabled):active:focus {
    background: var(--modal-age-btn-yes-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgb(0 0 0 / 61%);
}
.modal_age .btn:active {
    transform: translateY(0);
}
/* Responsive para pantallas muy pequeñas */
@media (max-width: 768px) {
    .modal_age .modal-body {
        padding: 2rem 1.5rem 1.5rem;
    }
    
    .modal_age .modal-footer {
        padding: 1rem 1.5rem 2rem;
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .text-pagina {
        font-size: 1.8rem;
    }
    
    .text-edad {
        font-size: 1.2rem;
    }
    
    .btn.modal_age_no, 
    .btn.modal_age_yes {
        width: 100%;
        max-width: 200px;
    }
}
@media (max-width: 480px) {
    .modal_age .modal {
        width: 95%;
        min-width: 280px;
    }
    
    .modal_age .modal-body {
        padding: 1.5rem 1rem 1rem;
    }
    
    .modal_age .modal-footer {
        padding: 0.8rem 1rem 1.5rem;
    }
    
    .text-titulo {
        font-size: 1.1rem;
    }
    
    .text-pagina {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }
    
    .text-edad {
        font-size: 1.1rem;
        padding: 0.8rem;
    }
    
    .text-condiciones {
        font-size: 0.8rem;
    }
    
    .btn.modal_age_no, 
    .btn.modal_age_yes {
        height: 45px;
        font-size: 1rem;
    }
}
@media (max-width: 320px) {
    .modal_age {
        padding: 10px;
    }
    
    .modal_age .modal {
        width: 100%;
        min-width: 260px;
    }
    
    .modal_age .modal-body {
        padding: 1rem 0.8rem 0.8rem;
    }
    
    .modal_age .modal-footer {
        padding: 0.5rem 0.8rem 1rem;
    }
    
    .text-titulo {
        font-size: 1rem;
    }
    
    .text-pagina {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }
    
    .text-edad {
        font-size: 1rem;
        padding: 0.6rem;
        margin-bottom: 1rem;
    }
    
    .text-condiciones {
        font-size: 0.75rem;
        line-height: 1.4;
    }
    
    .btn.modal_age_no, 
    .btn.modal_age_yes {
        height: 40px;
        font-size: 0.9rem;
        width: 100%;
        max-width: none;
    }
    
    .modal_age .logo-container img {
        max-height: 60px;
    }
}
@media (max-width: 250px) {
    .modal_age {
        padding: 5px;
    }
    
    .modal_age .modal {
        min-width: 240px;
    }
    
    .modal_age .modal-content {
        border-radius: 15px;
    }
    
    .text-pagina {
        font-size: 1.1rem;
        letter-spacing: 0.5px;
    }
    
    .text-edad {
        font-size: 0.9rem;
        padding: 0.5rem;
    }
    
    .text-condiciones {
        font-size: 0.7rem;
    }
    
    .btn.modal_age_no, 
    .btn.modal_age_yes {
        height: 35px;
        font-size: 0.8rem;
        border-radius: 18px;
    }
}
/* Mejoras de accesibilidad */
.modal_age .btn:focus {
    outline: 3px solid rgb(120 120 120 / 50%);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .modal_age,
    .modal_age .modal-dialog,
    .modal_age .logo-container img,
    .modal_age .btn {
        animation: none !important;
        transition: none !important;
    }
    
    .modal_age .modal-dialog {
        transform: scale(1);
    }
}.exclusive-timer-title a {
    color: var(--exclusive-timer-text-color);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}
.exclusive-timer-title a:hover {
    color: rgba(255, 255, 255, 0.8);
}
.exclusive-timer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--exclusive-timer-bg);
    padding: 20px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    position: relative; 
}
.exclusive-timer-container::before {
    content: '';
    position: absolute;
    top: -6px; 
    left: -6px;
    right: -6px;
    bottom: -6px;
    background: var(--exclusive-timer-bg); 
    border-radius: 14px; 
    opacity: 0; 
    z-index: -1; 
    animation: pulse-border-exclusive 2s infinite ease-in-out; 
    filter: blur(3px); 
}
@keyframes pulse-border-exclusive {
    0% {
        transform: scale(1);
        opacity: 0; 
    }
    20% {
        transform: scale(1.01); 
        opacity: 0.4; 
    }
    70% {
        transform: scale(1.02); 
        opacity: 0; 
    }
    100% {
        transform: scale(1);
        opacity: 0; 
    }
}
.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}
.exclusive-timer-heading {
    font-size: 28px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.exclusive-timer-icon {
    animation: swing 2s infinite;
    color: white;
    display: flex;
    align-items: center;
}
@keyframes swing {
    20% { transform: rotate(8deg); }
    40% { transform: rotate(-8deg); }
    60% { transform: rotate(4deg); }
    80% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}
.exclusive-timer-content {
    display: flex;
    gap: 15px;
    font-size: 22px;
}
.exclusive-timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--exclusive-timer-box-bg);
    color: var(--exclusive-timer-box-text-color);
    padding: 15px 20px;
    border-radius: 12px;
    min-width: 80px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transform: skew(-5deg);
    transition: all 0.3s ease;
}
.exclusive-timer-box:hover {
    transform: skew(-5deg) scale(1.05);
}
.exclusive-timer-box span {
    font-size: 32px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
}
.exclusive-timer-label {
    font-size: 16px;
    text-transform: uppercase;
    margin-top: 5px;
}
.exclusive-timer-message {
    font-size: 18px;
    margin: 15px 0;
    background: var(--exclusive-timer-message-bg);
    color: var(--exclusive-timer-message-text);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    letter-spacing: 0.5px;
    animation: scaleAnimation 1.5s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flame-icon {
    animation: flameFlicker 1s infinite;
    margin: 0 5px;
}
@keyframes scaleAnimation {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
@keyframes flameFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}
.exclusive-timer-button {
    margin-top: 20px;
    padding: 12px 30px; 
    background: var(--exclusive-timer-button-bg); 
    color: var(--exclusive-timer-button-text);
    font-size: 18px;  
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    animation: buttonPulse 2s infinite;
    letter-spacing: 1px;
}
.exclusive-timer-button:hover {
    background: var(--exclusive-timer-button-hover-bg);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    color: var(--exclusive-timer-button-hover-text);
}
@keyframes buttonPulse {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); }
    50% { transform: scale(1.03); }  
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); }
}
.exclusive-timer-expired {
    display: none !important;
}
@media (max-width: 480px) {
    .header-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .exclusive-timer-heading {
        font-size: 24px;
    }
    
     .exclusive-timer-content {
        display: flex;
        flex-wrap: nowrap; 
        justify-content: center;
        padding: 11px;
        gap: 5px; 
        overflow: hidden; 
    }
    .exclusive-timer-box {
        min-width: 60px; 
        padding: 10px 12px;
    }
    .exclusive-timer-box span {
        font-size: 24px; 
    }
    .exclusive-timer-label {
        font-size: 10px; 
    }
    .exclusive-timer-message {
        font-size: 16px;
        padding: 8px 15px;
    }
    .exclusive-timer-button {
        padding: 10px 20px;  
        font-size: 16px;  
    }
}