/* CSS personalizado generado - 2025-06-05 12:00:46 */

:root {
  --theme-color: #5218f2;
  --secondary-color: #5e5cdb;
  --background-color: #ffffff;
  --text-color: #000000;
  --accent-color: #1814f5;
  --success-color: #3e5bd0;
  --error-color: #ff0022;
  --info-color: #2930f5;
  --header-background: #ffffff;
  --header-text-color: #6c38e5;
  --footer-background: #f7f7f7;
  --footer-text-color: #5762f4;
  --button-background: #3c43aa;
  --button-text-color: #ffffff;
  --link-color: #6086d2;
  --hover-color: #2441b2;
  --border-color: #0fb8f0;
  --welcome-bar-background: #144ba3;
  --welcome-bar-text-color: #ffffff;
  --welcome-bar-button-color: #b3ccf4;
  --welcome-bar-button-text: #ffffff;
  --newsletter-bar-background: #f5f5f5;
  --newsletter-bar-text-color: #333333;
  --newsletter-bar-button-color: #1d7ed7;
  --newsletter-bar-button-text: #121212;
  --highlight-background: #fafafa;
  --highlight-text-color: #4720a2;
  --price-color: #0621ea;
  --discount-price-color: #604df5;
  --section-title-background: #fcfcfd;
  --section-title-color: #3136d3;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

header, .header, .header-wrap {
  background-color: var(--header-background);
  color: var(--header-text-color);
}

footer, .footer {
  background-color: var(--footer-background) !important;
  color: var(--footer-text-color) !important;
}

.btn, .button, button[type="submit"] {
  background-color: var(--button-background);
  color: var(--button-text-color);
  border-color: var(--button-background);
  transition: all 0.3s ease;
}

/* Estilos personalizados para btn-fill-out */
.btn-fill-out {
  background-color: var(--button-background) !important;
  color: var(--button-text-color) !important;
  border-color: var(--button-background) !important;
  padding: 12px 30px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  display: inline-block;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-fill-out:hover {
  background-color: var(--hover-color) !important;
  border-color: var(--hover-color) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-fill-out:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-fill-out.btn-block {
  display: block;
  width: 100%;
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--hover-color);
}

.text-brand, .text-primary {
  color: var(--theme-color) !important;
}

.bg-brand, .bg-primary {
  background-color: var(--theme-color) !important;
}

/* Estilos para títulos de sección */
.section-title, .widget-title, .title, .heading,
.heading-tab h3, .heading-tab h2, .category-title,
.product-category-title, .product-section-heading,
.tab-header .section-title, .tab-header h3, .tab-header h2,
h2.title, h3.title, h4.title, .block-title,
.nav-tabs .nav-link, .tab-header .nav-link,
.product-tabs .nav-tabs .nav-link,
.section-title span, .widget-title span, .title span {
  color: var(--section-title-color) !important;
  background-color: var(--section-title-background) !important;
}

/* Estilos para separadores y líneas decorativas */
.bt-1, .border-color-1,
.tab-style3 .nav-tabs,
.tab-style3 .nav-tabs:before,
.tab-style3 .nav-tabs:after,
.tab-header:after,
.tab-header:before,
.section-title:after,
.product-tabs:before,
.section-title:before,
.nav-tabs.links:before,
.wp-block-separator,
hr,
.nav-tabs .nav-link:before,
.product-tabs .nav-tabs:after {
  background-color: var(--accent-color, var(--theme-color)) !important;
  border-color: var(--accent-color, var(--theme-color)) !important;
}

.nav-tabs .nav-link.active:after,
.nav-tabs .nav-link:hover:after,
.tab-style3 .nav-tabs li.nav-item a.active:after,
.tab-style3 .nav-tabs li.nav-item a:hover:after {
  background-color: var(--button-background) !important;
}

/* Estilos para pestañas de productos */
.product-tabs .nav-tabs .nav-link {
  color: var(--section-title-color) !important;
  background-color: var(--section-title-background) !important;
  border-color: var(--section-title-color) !important;
}

.product-tabs .nav-tabs .nav-link.active {
  color: var(--section-title-background) !important;
  background-color: var(--section-title-color) !important;
  border-color: var(--section-title-color) !important;
}

/* Estilos forzados para las pestañas Destacados, Populares, Nuevos */
body .product-tabs .tab-header ul.nav.nav-tabs li.nav-item button.nav-link,
.product-tabs .tab-header .nav-tabs #nav-tab-one,
.product-tabs .tab-header .nav-tabs #nav-tab-two,
.product-tabs .tab-header .nav-tabs #nav-tab-three {
  color: var(--section-title-color) !important;
  background-color: var(--section-title-background) !important;
  border-color: var(--section-title-color) !important;
  font-weight: bold !important;
  text-shadow: none !important;
}

body .product-tabs .tab-header ul.nav.nav-tabs li.nav-item button.nav-link.active,
.product-tabs .tab-header .nav-tabs #nav-tab-one.active,
.product-tabs .tab-header .nav-tabs #nav-tab-two.active,
.product-tabs .tab-header .nav-tabs #nav-tab-three.active {
  color: var(--section-title-background) !important;
  background-color: var(--section-title-color) !important;
  border-color: var(--section-title-color) !important;
  font-weight: bold !important;
  text-shadow: none !important;
}

/* Estilos para botones naranjas y de compra */
button[style*="background-color:#F15412"],
a[style*="background-color:#F15412"],
.button.buy-whatsapp,
.button-add-to-cart,
button.button-add-to-cart,
.button.add_to_cart,
.product-extra-link2 button,
button.add_to_cart,
a.action-btn,
.product-extra-link2 button,
.action-btn.hover-up,
[style*="background-color:#F15412"],
.comprar-ahora {
  background-color: var(--button-background) !important;
  color: var(--button-text-color) !important;
  border-color: var(--button-background) !important;
  display: inline-block !important;
  padding: 10px 20px !important;
  font-weight: bold !important;
  border-radius: 4px !important;
  text-transform: none !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
  opacity: 1 !important;
  visibility: visible !important;
}