@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&family=Montserrat:wght@400;600;700;800&display=swap");

:root {
  --color-primary: #ff5f57 !important;
  --color-header: #1b2a4a !important;
  --color-footer: #1b2a4a !important;
  --color-border-hover: #ff5f57 !important;
  --color-text: #1b2a4a !important;
  --color_text_footer: #ffffff !important;
  --font-customize: "DM Sans", Arial, sans-serif !important;

  --bl-navy: #1b2a4a;
  --bl-coral: #ff5f57;
  --bl-white: #ffffff;
  --bl-lavender: #f8f6ff;
  --bl-lilac: #e4e2f5;
  --bl-slate: #6e6c8a;
  --bl-shadow: 0 20px 55px rgba(27, 42, 74, 0.12);
  --bl-shadow-hover: 0 26px 70px rgba(27, 42, 74, 0.18);
}

/* =========================================================
   BASE GENERAL BRAND LAB
========================================================= */

html,
body {
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

body {
  margin: 0 !important;
  background: var(--bl-lavender) !important;
  color: var(--bl-navy) !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-weight: 400;
}

body * {
  font-family: "DM Sans", Arial, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.titulo-h1,
.titulo-h2,
.title,
.section-title,
.card-title,
.product-title,
.product-name {
  font-family: "Montserrat", "DM Sans", Arial, sans-serif !important;
  color: var(--bl-navy) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em;
}

p,
li,
span,
small,
label {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none !important;
  transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
}

a:hover {
  text-decoration: none !important;
}

/* =========================================================
   HEADER / NAV BRAND LAB
========================================================= */

header,
.angulo-header-main,
#mainHeader,
.top-content,
.navbar,
.navbar-fondo,
.navbar-dark,
.navbar-dark-v {
  background: var(--bl-navy) !important;
  color: var(--bl-white) !important;
  border: 0 !important;
  box-shadow: none !important;
}

header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
}

.angulo-header-main {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Brand Lab no usa pre-header visual */
.top-nav {
  display: none !important;
}

.navbar {
  min-height: 62px !important;
  padding: 9px 28px !important;
  display: flex !important;
  align-items: center !important;
}

.navbar > a.d-flex {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.navbar img,
.img-with {
  display: block !important;
  width: auto !important;
  max-width: 156px !important;
  max-height: 44px !important;
  object-fit: contain !important;
}

/* NAV DESKTOP: limpio, sin fondos raros en active/hover */
.navbar-nav,
.lista-derecha {
  align-items: center !important;
  gap: 14px !important;
}

.navbar-nav .nav-item,
.sections_link {
  position: relative !important;
  margin: 0 !important;
}

.navbar-nav .nav-link,
.sections_link .nav-link,
.sections_link_responsive {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.78) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.navbar-nav .nav-link::after,
.sections_link .nav-link::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 3px !important;
  height: 2px !important;
  background: var(--bl-coral) !important;
  border: 0 !important;
  opacity: 0 !important;
  transform: scaleX(0.55) !important;
  transform-origin: center !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

.navbar-nav .nav-link:hover,
.sections_link .nav-link:hover,
.navbar-nav .active > .nav-link,
.sections_link.active > .nav-link,
.nav-item.active .sections_link_responsive {
  color: var(--bl-white) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.navbar-nav .nav-link:hover::after,
.sections_link .nav-link:hover::after,
.navbar-nav .active > .nav-link::after,
.sections_link.active > .nav-link::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

/* Iconos buscador / login / carrito visibles */
.form-box {
  max-width: 230px !important;
}

.form-box .form-control,
.intBuscar,
.input-search-movil {
  height: 38px !important;
  min-height: 38px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  color: var(--bl-white) !important;
  font-size: 13px !important;
  padding: 8px 42px 8px 16px !important;
  outline: none !important;
  box-shadow: none !important;
}

.form-box .form-control::placeholder,
.intBuscar::placeholder,
.input-search-movil::placeholder {
  color: rgba(255, 255, 255, 0.48) !important;
}

.form-box .form-control:focus,
.intBuscar:focus,
.input-search-movil:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--bl-coral) !important;
  box-shadow: 0 0 0 4px rgba(255, 95, 87, 0.13) !important;
}

.search-input,
.search-input i,
.search-movil,
.search-movil i,
.item-cart-menu,
.item-cart-menu i,
.item-cart-menu span,
.item-cart-menu .fa,
.item-cart-menu .fas,
.item-cart-menu .far,
.item-cart-menu .fab {
  color: var(--bl-white) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.search-input {
  color: var(--bl-coral) !important;
}

.item-cart-menu {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 7px 8px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.item-cart-menu i {
  font-size: 19px !important;
  line-height: 1 !important;
}

.item-cart-menu .fa-2x {
  font-size: 20px !important;
}

.item-cart-menu:hover,
.item-cart-menu:hover i,
.item-cart-menu:hover span {
  color: var(--bl-coral) !important;
  background: transparent !important;
}

.cart-items-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bl-coral) !important;
  color: var(--bl-white) !important;
  border: 2px solid var(--bl-navy) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

/* Hamburguesa: oculta en desktop */
.navbar-toggler {
  display: none !important;
}

/* =========================================================
   SLIDER / HERO
========================================================= */

.section-slider {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bl-navy) !important;
  overflow: hidden !important;
}

.section-slider .carousel,
.section-slider .carousel-inner,
.section-slider .carousel-item {
  background: var(--bl-navy) !important;
}

.section-slider .carousel-item > .img-fluid {
  height: 62vh !important;
  min-height: 600px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.section-slider .carousel-caption,
.section-slider .titulo-h1,
.section-slider .titulo-h2 {
  display: none !important;
}

.section-slider .carousel-control-prev,
.section-slider .carousel-control-next {
  width: 70px !important;
  opacity: 1 !important;
}

.section-slider .carousel-control-prev-icon,
.section-slider .carousel-control-next-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  background-color: rgba(27, 42, 74, 0.72) !important;
  background-size: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.24s ease !important;
}

.section-slider .carousel-control-prev:hover .carousel-control-prev-icon,
.section-slider .carousel-control-next:hover .carousel-control-next-icon {
  background-color: var(--bl-coral) !important;
  transform: scale(1.06);
}

/* =========================================================
   SECCIONES GENERALES PARA BLOQUES VVveb / WACLIS
========================================================= */

.bl-section,
.section,
.home-section,
.section-content,
[class*="section-"] {
  position: relative;
}

.bl-section,
.home-section,
.section-content {
  padding-top: 78px !important;
  padding-bottom: 78px !important;
}

.bl-section-light,
.section-light {
  background: var(--bl-white) !important;
}

.bl-section-soft,
.section-soft {
  background: var(--bl-lavender) !important;
}

.bl-section-navy,
.section-navy,
.bg-accent,
.bg-primary {
  background: var(--bl-navy) !important;
  color: var(--bl-white) !important;
}

.bl-kicker,
.kicker,
.section-kicker,
.subtitle,
.section-subtitle {
  display: block !important;
  color: var(--bl-coral) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}

.bl-title,
.section-title,
.title-section,
h2.title,
h2.titulo {
  color: var(--bl-navy) !important;
  font-family: "Montserrat", "DM Sans", Arial, sans-serif !important;
  font-size: clamp(34px, 5vw, 64px) !important;
  line-height: 0.95 !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
  margin-bottom: 20px !important;
}

.bl-section-navy .bl-title,
.bl-section-navy .section-title,
.bl-section-navy h1,
.bl-section-navy h2,
.bl-section-navy h3,
.section-navy h1,
.section-navy h2,
.section-navy h3,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-accent h1,
.bg-accent h2,
.bg-accent h3 {
  color: var(--bl-white) !important;
}

.bl-title span,
.section-title span,
.title-section span,
.text-primary,
.color-primary {
  color: var(--bl-coral) !important;
}

.bl-text,
.section-text,
p {
  color: var(--bl-slate);
  font-size: 15px;
  line-height: 1.72;
  font-weight: 300;
}

.bl-section-navy p,
.section-navy p,
.bg-primary p,
.bg-accent p {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* =========================================================
   BOTONES
========================================================= */

.btn,
button,
.angulo-item-button,
.angulo-item-outline,
.bl-btn-primary,
.bl-btn-secondary,
input[type="submit"] {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: all 0.24s ease !important;
}

.bl-btn-primary,
.btn-primary,
.angulo-item-button,
input[type="submit"],
button[type="submit"] {
  background: var(--bl-coral) !important;
  border: 2px solid var(--bl-coral) !important;
  color: var(--bl-white) !important;
  padding: 13px 26px !important;
}

.bl-btn-primary:hover,
.btn-primary:hover,
.angulo-item-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: transparent !important;
  color: var(--bl-coral) !important;
  border-color: var(--bl-coral) !important;
  transform: translateY(-2px) !important;
}

.bl-btn-secondary,
.btn-outline-primary,
.angulo-item-outline {
  background: transparent !important;
  border: 2px solid rgba(27, 42, 74, 0.18) !important;
  color: var(--bl-navy) !important;
  padding: 13px 26px !important;
}

.bl-section-navy .bl-btn-secondary,
.section-navy .bl-btn-secondary,
.bg-primary .bl-btn-secondary,
.bg-accent .bl-btn-secondary {
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: var(--bl-white) !important;
}

.bl-btn-secondary:hover,
.btn-outline-primary:hover,
.angulo-item-outline:hover {
  background: var(--bl-coral) !important;
  border-color: var(--bl-coral) !important;
  color: var(--bl-white) !important;
  transform: translateY(-2px) !important;
}

/* =========================================================
   LOGOS / MARCAS
========================================================= */

.bl-logos,
.logo-section,
.brands-section,
.marcas-section {
  background: var(--bl-white) !important;
  border-top: 1px solid var(--bl-lilac) !important;
  border-bottom: 1px solid var(--bl-lilac) !important;
  padding: 28px 0 !important;
}

.bl-logos img,
.logo-section img,
.brands-section img,
.marcas-section img {
  max-height: 42px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: grayscale(1) !important;
  opacity: 0.58 !important;
  transition: all 0.25s ease !important;
}

.bl-logos img:hover,
.logo-section img:hover,
.brands-section img:hover,
.marcas-section img:hover {
  filter: grayscale(0) !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}

/* =========================================================
   PRODUCTOS / CATÁLOGO
========================================================= */

#catalogo,
.catalogo,
.products-section,
.productos-section,
.section-products,
.product-list-section,
#product-container {
  background: var(--bl-white) !important;
}

.nav-pills,
.filter-pills,
.filtros,
.products-filter,
.product-filter {
  gap: 8px !important;
  margin-bottom: 34px !important;
}

.nav-pills .nav-link,
.filter-pills button,
.filtros button,
.products-filter button,
.product-filter button,
.badge,
.tag,
.label {
  border-radius: 999px !important;
  border: 1.5px solid var(--bl-lilac) !important;
  background: transparent !important;
  color: var(--bl-slate) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
}

.nav-pills .nav-link.active,
.filter-pills button.active,
.filtros button.active,
.products-filter button.active,
.product-filter button.active,
.nav-pills .nav-link:hover,
.filter-pills button:hover,
.filtros button:hover,
.products-filter button:hover,
.product-filter button:hover {
  background: var(--bl-coral) !important;
  border-color: var(--bl-coral) !important;
  color: var(--bl-white) !important;
}

/* Cards genéricas y productos */
.card,
.bl-card,
.bl-product-card,
.product-card,
.product-item,
.product,
.item-product,
.item-producto,
.box-product,
.product-box,
.card-product,
.card-producto,
.angulo-item,
.item,
.item-product-list,
#product-container > [class*="col-"] > div {
  background: var(--bl-lilac) !important;
  border: 1px solid rgba(27, 42, 74, 0.08) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease !important;
}

.card:hover,
.bl-card:hover,
.bl-product-card:hover,
.product-card:hover,
.product-item:hover,
.product:hover,
.item-product:hover,
.item-producto:hover,
.box-product:hover,
.product-box:hover,
.card-product:hover,
.card-producto:hover,
.angulo-item:hover,
.item:hover,
.item-product-list:hover,
#product-container > [class*="col-"] > div:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--bl-shadow-hover) !important;
  border-color: rgba(255, 95, 87, 0.25) !important;
}

/* Imágenes productos desktop */
.card img,
.bl-product-card img,
.product-card img,
.product-item img,
.product img,
.item-product img,
.item-producto img,
.box-product img,
.product-box img,
.card-product img,
.card-producto img,
.angulo-item-img,
.item-image-preview img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.42s ease, filter 0.42s ease !important;
}

.item-image-preview {
  overflow: hidden !important;
  background: var(--bl-lilac) !important;
}

.card:hover img,
.bl-product-card:hover img,
.product-card:hover img,
.product-item:hover img,
.product:hover img,
.item-product:hover img,
.item-producto:hover img,
.box-product:hover img,
.product-box:hover img,
.card-product:hover img,
.card-producto:hover img,
.angulo-item:hover .angulo-item-img,
.item-image-preview:hover img {
  transform: scale(1.055) !important;
  filter: saturate(1.04) contrast(1.03) !important;
}

.card-body,
.product-info,
.product-content,
.product-data,
.product-description,
.angulo-item-name-container,
.angulo-item-detail,
.angulo-item-content {
  padding: 18px 20px 20px !important;
  background: transparent !important;
}

.card-title,
.product-title,
.product-name,
.item-title,
.item-product-title,
.product-card h3,
.product-card h4,
.product-item h3,
.product-item h4,
.product h3,
.product h4,
.card-product h3,
.card-producto h3,
.angulo-item-name,
.angulo-product-title {
  color: var(--bl-navy) !important;
  font-family: "Montserrat", "DM Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 8px !important;
}

.card-text,
.product-card p,
.product-item p,
.product p,
.card-product p,
.card-producto p,
.product-description,
.product-resume,
.product-summary,
.angulo-item-description {
  color: var(--bl-slate) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 300 !important;
  margin-bottom: 14px !important;
}

.price,
.product-price,
.precio,
.producto-precio,
.angulo-item-price {
  color: var(--bl-coral) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.card .btn,
.product-card .btn,
.product-item .btn,
.product .btn,
.card-product .btn,
.card-producto .btn,
.btn-product,
.btn-cotizar,
button.btn-product,
.angulo-item-button {
  background: var(--bl-navy) !important;
  color: var(--bl-white) !important;
  border: 2px solid var(--bl-navy) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 9px 17px !important;
}

.card .btn:hover,
.product-card .btn:hover,
.product-item .btn:hover,
.product .btn:hover,
.card-product .btn:hover,
.card-producto .btn:hover,
.btn-product:hover,
.btn-cotizar:hover,
button.btn-product:hover,
.angulo-item-button:hover {
  background: var(--bl-coral) !important;
  border-color: var(--bl-coral) !important;
  color: var(--bl-white) !important;
}

/* Evita líneas o decoraciones extra en hover */
.product-card::before,
.product-card::after,
.product-item::before,
.product-item::after,
.card-product::before,
.card-product::after,
.item-product::before,
.item-product::after,
.item-producto::before,
.item-producto::after,
.angulo-item::before,
.angulo-item::after {
  display: none !important;
}

.product-card hr,
.product-item hr,
.card-product hr,
.item-product hr,
.item-producto hr,
.angulo-item hr {
  display: none !important;
}

/* =========================================================
   ECO BRAND / CASOS
========================================================= */

#eco-brand,
.eco-brand,
.bl-eco,
.eco-section,
#casos,
.casos,
.cases-section,
.bl-cases,
.marcas-casos {
  background: var(--bl-navy) !important;
  color: var(--bl-white) !important;
  overflow: hidden !important;
}

#eco-brand h1,
#eco-brand h2,
#eco-brand h3,
.eco-brand h1,
.eco-brand h2,
.eco-brand h3,
.bl-eco h1,
.bl-eco h2,
.bl-eco h3,
.eco-section h1,
.eco-section h2,
.eco-section h3,
#casos h1,
#casos h2,
#casos h3,
.casos h1,
.casos h2,
.casos h3,
.cases-section h1,
.cases-section h2,
.cases-section h3,
.bl-cases h1,
.bl-cases h2,
.bl-cases h3,
.marcas-casos h1,
.marcas-casos h2,
.marcas-casos h3 {
  color: var(--bl-white) !important;
}

.case-card,
.bl-case-card,
.cases-section .card,
.bl-cases .card,
.marcas-casos .card {
  min-height: 320px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  position: relative !important;
  background: var(--bl-navy) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.case-card img,
.bl-case-card img,
.cases-section .card img,
.bl-cases .card img,
.marcas-casos .card img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

.case-card::after,
.bl-case-card::after,
.cases-section .card::after,
.bl-cases .card::after,
.marcas-casos .card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(
    to top,
    rgba(10, 15, 35, 0.92) 0%,
    rgba(10, 15, 35, 0.42) 52%,
    rgba(10, 15, 35, 0.05) 100%
  ) !important;
  pointer-events: none !important;
}

.case-card .card-body,
.bl-case-card .card-body,
.cases-section .card-body,
.bl-cases .card-body,
.marcas-casos .card-body {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2 !important;
  background: transparent !important;
  padding: 26px !important;
}

.case-card h3,
.bl-case-card h3,
.cases-section .card h3,
.bl-cases .card h3,
.marcas-casos .card h3,
.case-card .card-title,
.bl-case-card .card-title {
  color: var(--bl-white) !important;
}

.case-card p,
.bl-case-card p,
.cases-section .card p,
.bl-cases .card p,
.marcas-casos .card p {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* =========================================================
   CONTACTO / FORMULARIOS
========================================================= */

#contacto,
.contacto,
.contact-section,
.bl-contact {
  background: var(--bl-lavender) !important;
}

.contact,
.form-contact,
.contact-section form,
.bl-contact form,
.formulario-contacto,
form[action*="contacto"] {
  background: var(--bl-white) !important;
  border: 1px solid var(--bl-lilac) !important;
  border-radius: 22px !important;
  padding: 30px !important;
  box-shadow: none !important;
}

.form-control,
select.form-control,
textarea.form-control,
input.form-control,
textarea,
select {
  background: var(--bl-lavender) !important;
  border: 1.5px solid var(--bl-lilac) !important;
  border-radius: 12px !important;
  color: var(--bl-navy) !important;
  min-height: 44px !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

textarea.form-control,
textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
input.form-control:focus,
textarea:focus,
select:focus {
  background: var(--bl-white) !important;
  border-color: var(--bl-coral) !important;
  box-shadow: 0 0 0 4px rgba(255, 95, 87, 0.12) !important;
  outline: none !important;
}

label,
.form-group label,
.contact h6 {
  color: var(--bl-navy) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

/* =========================================================
   FOOTER
========================================================= */

footer,
.pre-footer,
.footer-copy {
  background: var(--bl-navy) !important;
  color: var(--bl-white) !important;
  border: 0 !important;
}

footer {
  padding-top: 0 !important;
}

.pre-footer {
  padding: 48px 48px 34px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.footer-copy {
  padding: 22px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

footer h6,
.pre-footer h6 {
  color: var(--bl-white) !important;
  font-family: "Montserrat", "DM Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
}

footer p,
footer span,
footer li,
footer a,
.pre-footer p,
.pre-footer span,
.pre-footer li,
.pre-footer a,
.footer-copy span,
.footer-copy a {
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
}

footer a:hover,
.pre-footer a:hover,
.footer-copy a:hover {
  color: var(--bl-coral) !important;
}

footer i,
.pre-footer i {
  color: var(--bl-coral) !important;
  margin-right: 6px !important;
}

/* =========================================================
   MODALES
========================================================= */

.modal-content {
  border: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

.modal-header {
  border: 0 !important;
}

.modal-title,
#title-modal {
  font-family: "Montserrat", "DM Sans", Arial, sans-serif !important;
  color: var(--bl-navy) !important;
  font-weight: 800 !important;
}

.close {
  color: var(--bl-navy) !important;
  opacity: 1 !important;
}

/* =========================================================
   RESPONSIVE HEADER / MOBILE
========================================================= */

@media (max-width: 991.98px) {
  .navbar {
    min-height: 60px !important;
    padding: 9px 15px !important;
    gap: 8px !important;
  }

  .navbar img,
  .img-with {
    max-width: 132px !important;
    max-height: 40px !important;
  }

  .form-box {
    display: none !important;
  }

  .navbar-toggler {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin-left: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .navbar-toggler:hover,
  .navbar-toggler:focus {
    background: var(--bl-coral) !important;
    border-color: var(--bl-coral) !important;
    box-shadow: 0 10px 24px rgba(255, 95, 87, 0.25) !important;
  }

  .navbar-toggler-icon {
    width: 20px !important;
    height: 14px !important;
    display: block !important;
    position: relative !important;
    background-image: none !important;
    border-top: 2px solid var(--bl-white) !important;
    border-bottom: 2px solid var(--bl-white) !important;
  }

  .navbar-toggler-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 20px !important;
    height: 2px !important;
    background: var(--bl-white) !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
  }

  #navbarNavDropdown {
    background: var(--bl-navy) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 0 16px !important;
  }

  #navbarNavDropdown .container {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #navbarNavDropdown .navbar-nav {
    gap: 0 !important;
    align-items: stretch !important;
  }

  #navbarNavDropdown .nav-link,
  .sections_link_responsive {
    width: 100% !important;
    color: rgba(255, 255, 255, 0.82) !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  #navbarNavDropdown .nav-link:hover,
  #navbarNavDropdown .active .nav-link,
  .sections_link_responsive:hover {
    color: var(--bl-coral) !important;
    background: transparent !important;
  }

  .item-cart-menu,
  .item-cart-menu i,
  .search-movil,
  .search-movil i {
    color: var(--bl-white) !important;
  }

  .item-cart-menu:hover,
  .item-cart-menu:hover i,
  .search-movil:hover,
  .search-movil:hover i {
    color: var(--bl-coral) !important;
  }

  .section-slider .carousel-item > .img-fluid {
    height: 58vh !important;
    min-height: 520px !important;
  }

  .pre-footer {
    padding: 40px 22px 26px !important;
  }

  .pre-footer .col-md-3 {
    margin-bottom: 26px !important;
  }
}

@media (max-width: 767.98px) {
  .container,
  .container-fluid {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .navbar > a.d-flex {
    max-width: 140px !important;
    overflow: hidden !important;
  }

  .item-cart-menu span:not(.cart-items-badge) {
    display: none !important;
  }

  .section-slider .carousel-item > .img-fluid {
    height: 70vh !important;
    min-height: 500px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .section-slider .carousel-control-prev,
  .section-slider .carousel-control-next {
    width: 52px !important;
  }

  .section-slider .carousel-control-prev-icon,
  .section-slider .carousel-control-next-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .bl-title,
  .section-title,
  .title-section,
  h2.title,
  h2.titulo {
    font-size: clamp(31px, 11vw, 46px) !important;
  }

  .contact,
  .form-contact,
  .contact-section form,
  .bl-contact form,
  .formulario-contacto,
  form[action*="contacto"] {
    padding: 22px !important;
  }

  footer,
  footer * {
    text-align: center !important;
  }
}

/* =========================================================
   SOLUCIÓN EXACTA MOBILE PRODUCTOS WACLIS
   - Dos columnas en mobile
   - Elimina espacio vacío entre imagen y nombre
   - Ajusta alto real de .item-image-preview y .angulo-item-img
========================================================= */

@media (max-width: 600px) {
  #product-container {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  #product-container > [class*="col-"],
  #product-container > .col,
  #product-container > .col-12,
  #product-container > .col-sm-12,
  #product-container > .col-md-3,
  #product-container > .col-md-4,
  #product-container > .col-lg-3,
  #product-container > .col-lg-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 12px !important;
  }

  #product-container .angulo-item,
  #product-container .item-product,
  #product-container .item-producto,
  #product-container .card-product,
  #product-container .product-card,
  #product-container > [class*="col-"] > div {
    height: auto !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #product-container .item-image-preview,
  #product-container .item-image-preview a,
  #product-container .item-image-preview figure,
  #product-container .item-image-preview .image,
  #product-container .item-image-preview .product-image,
  #product-container .item-image-preview .img-product,
  #product-container .angulo-item-img {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #product-container .item-image-preview img,
  #product-container .angulo-item-img,
  #product-container img.angulo-item-img {
    display: block !important;
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  #product-container .angulo-item-name-container,
  #product-container .product-info,
  #product-container .product-content,
  #product-container .card-body,
  #product-container .item-content {
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 10px 12px !important;
    margin: 0 !important;
  }

  #product-container .angulo-item-name,
  #product-container .product-name,
  #product-container .product-title,
  #product-container .card-title,
  #product-container h3,
  #product-container h4 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 31px !important;
    max-height: 31px !important;
    margin: 0 0 6px !important;
    color: var(--bl-navy) !important;
    font-family: "Montserrat", "DM Sans", Arial, sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
  }

  #product-container .angulo-item-description,
  #product-container .product-description,
  #product-container .product-resume,
  #product-container .card-text,
  #product-container p {
    display: none !important;
  }

  #product-container .angulo-item-price,
  #product-container .price,
  #product-container .product-price,
  #product-container .precio {
    display: block !important;
    margin: 4px 0 8px !important;
    color: var(--bl-coral) !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
  }

  #product-container .angulo-item-button,
  #product-container .btn,
  #product-container button,
  #product-container .btn-product {
    width: 100% !important;
    min-height: 34px !important;
    padding: 8px 9px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 390px) {
  #product-container .item-image-preview,
  #product-container .item-image-preview a,
  #product-container .item-image-preview figure,
  #product-container .item-image-preview .image,
  #product-container .item-image-preview .product-image,
  #product-container .item-image-preview .img-product,
  #product-container .angulo-item-img,
  #product-container .item-image-preview img,
  #product-container img.angulo-item-img {
    height: 135px !important;
    min-height: 135px !important;
    max-height: 135px !important;
  }

  #product-container .angulo-item-name,
  #product-container .product-name,
  #product-container .product-title,
  #product-container .card-title,
  #product-container h3,
  #product-container h4 {
    font-size: 12px !important;
    min-height: 29px !important;
    max-height: 29px !important;
  }
}



/* =========================================================
   FIX ICONOS FONT AWESOME WACLIS
   Corrige iconos que se ven como cuadrados
========================================================= */

i.fa,
i.fas,
i.far,
i.fab,
i.fal,
i.fad,
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
[class^="fa-"],
[class*=" fa-"] {
  font-family: "Font Awesome 5 Free" !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  speak: none !important;
}

.fas,
.fa {
  font-weight: 900 !important;
}

.far {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
}

.fab {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}

/* Íconos del header */
.search-input i,
.search-movil i,
.item-cart-menu i,
.fa-search,
.fa-user,
.fa-shopping-cart,
.fa-map-marker-alt,
.fa-envelope,
.fa-angle-right,
.fa-times,
.fa-spinner,
.fa-shopping-bag {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: inherit !important;
}

/* Íconos de marcas/redes */
.fab,
.fa-facebook-f,
.fa-instagram,
.fa-whatsapp,
.fa-linkedin,
.fa-youtube {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}

/* Evita que los pseudo-elementos de Font Awesome sean pisados */
.fa::before,
.fas::before,
.far::before,
.fab::before,
[class^="fa-"]::before,
[class*=" fa-"]::before {
  font-family: inherit !important;
}



/* =========================================================
   BRAND LAB - CARDS DESTACADOS / PRODUCTOS HOME
========================================================= */

.angulo-content {
  background: #f8f6ff !important;
  padding: 64px 0 72px !important;
  margin: 0 !important;
}

.angulo-content .container {
  max-width: 1240px !important;
}

.angulo-content .text-proct {
  background: transparent !important;
  padding: 0 !important;
}

/* Título destacados */
.text-destacado,
.text-destacadom {
  font-family: "Montserrat", "DM Sans", Arial, sans-serif !important;
  color: #1b2a4a !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  margin-bottom: 14px !important;
}

.text-linea {
  width: 96px !important;
  height: 3px !important;
  background: #ff5f57 !important;
  border: 0 !important;
  margin: 0 auto 46px !important;
  opacity: 1 !important;
}

/* Contenedor de productos */
#product-container {
  background: transparent !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 26px !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}

#product-container > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  flex: initial !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Card principal: SOLO borde externo, interior blanco */
#product-container .angulo-item-producto {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  background: #ffffff !important;
  border: 1px solid #d8d5ef !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-shadow: 0 18px 45px rgba(27, 42, 74, 0.08) !important;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease !important;
}

#product-container .angulo-item-producto:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(255, 95, 87, 0.35) !important;
  box-shadow: 0 26px 70px rgba(27, 42, 74, 0.16) !important;
}

/* Quita fondos internos, recuadros y bordes dentro de la card */
#product-container .angulo-item-producto *,
#product-container .item-image-preview,
#product-container .angulo-item-img,
#product-container .angulo-item-name-container,
#product-container .angulo-item-price,
#product-container .angulo-item-producto > .d-flex.justify-content-center {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Imagen: sin recuadro interno, todo blanco */
#product-container .item-image-preview {
  display: block !important;
  width: 100% !important;
  height: 280px !important;
  padding: 18px 18px 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-radius: 0 !important;
}

#product-container .angulo-item-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background-color: #ffffff !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.38s ease, filter 0.38s ease !important;
}

#product-container .angulo-item-producto:hover .angulo-item-img {
  transform: scale(1.045) !important;
  filter: saturate(1.04) contrast(1.03) !important;
}

/* Nombre */
#product-container .angulo-item-name-container {
  background: #ffffff !important;
  padding: 20px 24px 8px !important;
  min-height: auto !important;
  margin: 0 !important;
}

#product-container .angulo-item-name {
  font-family: "Montserrat", "DM Sans", Arial, sans-serif !important;
  color: #1b2a4a !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  text-align: left !important;
  margin: 0 !important;
}

/* Precio */
#product-container .angulo-item-price {
  justify-content: flex-start !important;
  background: #ffffff !important;
  padding: 0 24px 14px !important;
  margin: 0 !important;
}

#product-container .text-price,
#product-container .angulo-item-price h4 {
  font-family: "Montserrat", "DM Sans", Arial, sans-serif !important;
  color: #ff5f57 !important;
  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  margin: 0 !important;
}

/* Botón */
#product-container .angulo-item-producto > .d-flex.justify-content-center {
  background: #ffffff !important;
  justify-content: flex-start !important;
  padding: 0 24px 22px !important;
  margin: 0 !important;
}

#product-container .angulo-item-button {
  width: auto !important;
  min-width: 0 !important;
  background: #1b2a4a !important;
  border: 2px solid #1b2a4a !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
}

#product-container .angulo-item-button:hover {
  background: #ff5f57 !important;
  border-color: #ff5f57 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(255, 95, 87, 0.26) !important;
}

/* Botón VER MÁS */
.angulo-content .btn-theme-lg {
  background: #ff5f57 !important;
  border: 2px solid #ff5f57 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 17px 28px !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  box-shadow: 0 18px 34px rgba(255, 95, 87, 0.18) !important;
  transition: all 0.25s ease !important;
}

.angulo-content .btn-theme-lg:hover {
  background: #1b2a4a !important;
  border-color: #1b2a4a !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Tablet */
@media (max-width: 991.98px) {
  #product-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  #product-container .item-image-preview {
    height: 240px !important;
  }
}

/* Mobile: dos columnas */
@media (max-width: 600px) {
  .angulo-content {
    padding: 46px 0 56px !important;
  }

  .text-destacado,
  .text-destacadom {
    font-size: 27px !important;
  }

  .text-linea {
    width: 74px !important;
    margin-bottom: 30px !important;
  }

  #product-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #product-container .angulo-item-producto {
    background: #ffffff !important;
    border-radius: 20px !important;
  }

  #product-container .item-image-preview {
    background: #ffffff !important;
    height: 145px !important;
    padding: 10px 10px 0 !important;
    border-radius: 0 !important;
  }

  #product-container .angulo-item-img {
    background-color: #ffffff !important;
    border-radius: 0 !important;
  }

  #product-container .angulo-item-name-container {
    background: #ffffff !important;
    padding: 11px 12px 4px !important;
  }

  #product-container .angulo-item-name {
    font-size: 12.5px !important;
    line-height: 1.18 !important;
    text-align: left !important;
    min-height: 30px !important;
    max-height: 30px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  #product-container .angulo-item-price {
    background: #ffffff !important;
    padding: 0 12px 8px !important;
    justify-content: flex-start !important;
  }

  #product-container .text-price,
  #product-container .angulo-item-price h4 {
    font-size: 18px !important;
  }

  #product-container .angulo-item-producto > .d-flex.justify-content-center {
    background: #ffffff !important;
    padding: 0 12px 12px !important;
  }

  #product-container .angulo-item-button {
    width: 100% !important;
    padding: 10px 8px !important;
    font-size: 10px !important;
    text-align: center !important;
  }

  .angulo-content .row.pt-5.pb-5 {
    padding-top: 34px !important;
    padding-bottom: 0 !important;
  }

  .angulo-content .row.pt-5.pb-5 .col-md-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .angulo-content .btn-theme-lg {
    padding: 15px 22px !important;
    font-size: 13px !important;
  }
}

/* Mobile chico */
@media (max-width: 390px) {
  #product-container .item-image-preview {
    height: 130px !important;
  }

  #product-container .angulo-item-name {
    font-size: 12px !important;
  }

  #product-container .text-price,
  #product-container .angulo-item-price h4 {
    font-size: 17px !important;
  }
}



/* =========================================================
   BRAND LAB - AJUSTES PRODUCTOS / HAMBURGUESA / WHATSAPP
========================================================= */

/* =========================================================
   1. LISTA DE PRODUCTOS - DESKTOP EN 3 COLUMNAS
   Aplica a la página /productos y al contenedor
========================================================= */

body:has(.col-md-8 #product-container) .col-md-8 #product-container,
.col-md-8 #product-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  background: transparent !important;
}

.col-md-8 #product-container > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  flex: initial !important;
  padding: 0 !important;
  margin: 0 !important;
}

.col-md-8 #product-container .angulo-item-producto {
  height: 100% !important;
  min-height: 0 !important;
  background: #ffffff !important;
  border: 1px solid #d8d5ef !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-shadow: 0 16px 38px rgba(27, 42, 74, 0.08) !important;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease !important;
}

.col-md-8 #product-container .angulo-item-producto:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255, 95, 87, 0.35) !important;
  box-shadow: 0 24px 58px rgba(27, 42, 74, 0.16) !important;
}

/* Interior completamente blanco */
.col-md-8 #product-container .angulo-item-producto *,
.col-md-8 #product-container .item-image-preview,
.col-md-8 #product-container .angulo-item-img,
.col-md-8 #product-container .angulo-item-name-container,
.col-md-8 #product-container .angulo-item-price,
.col-md-8 #product-container .angulo-item-producto > .d-flex.justify-content-center {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.col-md-8 #product-container .item-image-preview {
  display: block !important;
  width: 100% !important;
  height: 220px !important;
  padding: 16px 16px 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-radius: 0 !important;
}

.col-md-8 #product-container .angulo-item-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background-color: #ffffff !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.38s ease, filter 0.38s ease !important;
}

.col-md-8 #product-container .angulo-item-producto:hover .angulo-item-img {
  transform: scale(1.045) !important;
  filter: saturate(1.04) contrast(1.03) !important;
}

.col-md-8 #product-container .angulo-item-name-container {
  background: #ffffff !important;
  padding: 16px 20px 7px !important;
  min-height: auto !important;
  margin: 0 !important;
}

.col-md-8 #product-container .angulo-item-name {
  font-family: "Montserrat", "DM Sans", Arial, sans-serif !important;
  color: #1b2a4a !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  text-align: left !important;
  margin: 0 !important;
}

.col-md-8 #product-container .angulo-item-price {
  justify-content: flex-start !important;
  background: #ffffff !important;
  padding: 0 20px 12px !important;
  margin: 0 !important;
}

.col-md-8 #product-container .text-price,
.col-md-8 #product-container .angulo-item-price h4 {
  font-family: "Montserrat", "DM Sans", Arial, sans-serif !important;
  color: #ff5f57 !important;
  font-size: 23px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  margin: 0 !important;
}

.col-md-8 #product-container .angulo-item-producto > .d-flex.justify-content-center {
  background: #ffffff !important;
  justify-content: flex-start !important;
  padding: 0 20px 18px !important;
  margin: 0 !important;
}

.col-md-8 #product-container .angulo-item-button {
  width: auto !important;
  min-width: 0 !important;
  background: #1b2a4a !important;
  border: 2px solid #1b2a4a !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
}

.col-md-8 #product-container .angulo-item-button:hover {
  background: #ff5f57 !important;
  border-color: #ff5f57 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(255, 95, 87, 0.26) !important;
}

/* Ordenar por */
.col-md-8 form.form-horizontal {
  margin-bottom: 24px !important;
}

.col-md-8 form.form-horizontal label {
  color: #1b2a4a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.col-md-8 form.form-horizontal select.form-control {
  background: #ffffff !important;
  border: 1px solid #e4e2f5 !important;
  border-radius: 999px !important;
  color: #1b2a4a !important;
  min-height: 42px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

/* Tablet: 2 columnas */
@media (min-width: 768px) and (max-width: 991.98px) {
  .col-md-8 #product-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .col-md-8 #product-container .item-image-preview {
    height: 210px !important;
  }
}

/* Mobile: 2 columnas */
@media (max-width: 767.98px) {
  .col-md-8 #product-container,
  body:has(.col-md-8 #product-container) .col-md-8 #product-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .col-md-8 #product-container .angulo-item-producto {
    border-radius: 20px !important;
  }

  .col-md-8 #product-container .item-image-preview {
    height: 145px !important;
    padding: 10px 10px 0 !important;
  }

  .col-md-8 #product-container .angulo-item-name-container {
    padding: 11px 12px 4px !important;
  }

  .col-md-8 #product-container .angulo-item-name {
    font-size: 12.5px !important;
    line-height: 1.18 !important;
    min-height: 30px !important;
    max-height: 30px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .col-md-8 #product-container .angulo-item-price {
    padding: 0 12px 8px !important;
  }

  .col-md-8 #product-container .text-price,
  .col-md-8 #product-container .angulo-item-price h4 {
    font-size: 18px !important;
  }

  .col-md-8 #product-container .angulo-item-producto > .d-flex.justify-content-center {
    padding: 0 12px 12px !important;
  }

  .col-md-8 #product-container .angulo-item-button {
    width: 100% !important;
    padding: 10px 8px !important;
    font-size: 10px !important;
    text-align: center !important;
  }
}

/* =========================================================
   2. FIX HAMBURGUESA MOBILE
========================================================= */

@media (min-width: 992px) {
  .navbar-toggler {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .navbar-toggler {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin-left: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    outline: none !important;
    position: relative !important;
    z-index: 20 !important;
  }

  .navbar-toggler:hover,
  .navbar-toggler:focus,
  .navbar-toggler[aria-expanded="true"] {
    background: #ff5f57 !important;
    border-color: #ff5f57 !important;
    box-shadow: 0 10px 24px rgba(255, 95, 87, 0.25) !important;
  }

  .navbar-toggler-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 14px !important;
    position: relative !important;
    background-image: none !important;
    background: transparent !important;
    border-top: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    border-radius: 0 !important;
  }

  .navbar-toggler-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 20px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
  }
}

/* =========================================================
   3. FIX FONT AWESOME + WHATSAPP FLOTANTE
========================================================= */

/* Corrige íconos Font Awesome que se ven como cuadrados */
i.fa,
i.fas,
i.far,
i.fab,
i.fal,
i.fad,
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
[class^="fa-"],
[class*=" fa-"] {
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  speak: none !important;
}

.fa,
.fas,
i.fa,
i.fas {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}

.far,
i.far {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
}

.fab,
i.fab {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}

/* WhatsApp flotante */
#whatsapp-floating-button,
.chat-position#whatsapp-floating-button {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 99999 !important;
  width: 62px !important;
  height: 62px !important;
  pointer-events: auto !important;
}

#whatsapp-floating-button .icon-chat {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 62px !important;
  height: 62px !important;
}

#whatsapp-floating-button .btn-chat,
#whatsapp-floating-button .btn-whatsapp-custom {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #25d366 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.38) !important;
  text-decoration: none !important;
  transform: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
}

#whatsapp-floating-button .btn-chat:hover,
#whatsapp-floating-button .btn-whatsapp-custom:hover {
  background: #1fc45d !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 18px 42px rgba(37, 211, 102, 0.48) !important;
}

#whatsapp-floating-button .btn-chat i,
#whatsapp-floating-button .btn-whatsapp-custom i,
#whatsapp-floating-button .fab.fa-whatsapp,
#whatsapp-floating-button i.fa-whatsapp {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
  font-size: 34px !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

/* Evita que estilos globales tapen los íconos */
#whatsapp-floating-button i::before,
.navbar-toggler-icon::before,
.fa::before,
.fas::before,
.far::before,
.fab::before {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Mobile WhatsApp */
@media (max-width: 767.98px) {
  #whatsapp-floating-button,
  .chat-position#whatsapp-floating-button {
    right: 16px !important;
    bottom: 16px !important;
    width: 56px !important;
    height: 56px !important;
  }

  #whatsapp-floating-button .icon-chat,
  #whatsapp-floating-button .btn-chat,
  #whatsapp-floating-button .btn-whatsapp-custom {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }

  #whatsapp-floating-button .btn-chat i,
  #whatsapp-floating-button .btn-whatsapp-custom i,
  #whatsapp-floating-button .fab.fa-whatsapp,
  #whatsapp-floating-button i.fa-whatsapp {
    font-size: 31px !important;
  }
}

/* =========================================================
   Ocultar formulario nativo de contacto
========================================================= */

section.mb-5.mt-5:has(form.form-contact[action*="/contacto"]) {
  display: none !important;
}



/* =========================================================
   BRAND LAB / WACLIS
   Header mobile: hamburguesa + lupa + menú desplegable
   ========================================================= */

@media (max-width: 767.98px) {

  /* Header siempre por encima */
  header,
  #mainHeader,
  .angulo-header-main {
    z-index: 9999 !important;
    overflow: visible !important;
  }

  #mainHeader .top-content {
    position: relative !important;
    z-index: 9999 !important;
    overflow: visible !important;
  }

  /* Ordena el área derecha del header */
  #mainHeader .d-flex.align-items-center {
    align-items: center !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  /* =========================================================
     ÍCONOS MOBILE BASE
     ========================================================= */

  #mainHeader a.item-user,
  #mainHeader a.item-cart-menu,
  #mainHeader a[data-action="toggleSearchbar"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #1B2A4A !important;
    border: 1px solid rgba(27, 42, 74, 0.12) !important;
    text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(27, 42, 74, 0.08) !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10002 !important;
  }

  #mainHeader a.item-user i,
  #mainHeader a.item-cart-menu i,
  #mainHeader a[data-action="toggleSearchbar"] i,
  #mainHeader a.item-cart-menu svg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1B2A4A !important;
    fill: #1B2A4A !important;
    font-size: 18px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #mainHeader a.item-user:hover,
  #mainHeader a.item-user:focus,
  #mainHeader a[data-action="toggleSearchbar"]:hover,
  #mainHeader a[data-action="toggleSearchbar"]:focus,
  #mainHeader a.item-cart-menu:hover,
  #mainHeader a.item-cart-menu:focus {
    background: #FF5F57 !important;
    color: #FFFFFF !important;
    border-color: #FF5F57 !important;
  }

  #mainHeader a.item-user:hover i,
  #mainHeader a.item-user:focus i,
  #mainHeader a[data-action="toggleSearchbar"]:hover i,
  #mainHeader a[data-action="toggleSearchbar"]:focus i,
  #mainHeader a.item-cart-menu:hover i,
  #mainHeader a.item-cart-menu:focus i,
  #mainHeader a.item-cart-menu:hover svg,
  #mainHeader a.item-cart-menu:focus svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
  }

  /* =========================================================
     HAMBURGUESA
     ========================================================= */

  #mainHeader .fa-bars,
  #mainHeader i.fas.fa-bars {
    display: inline-flex !important;
    color: #1B2A4A !important;
    font-size: 20px !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #mainHeader .fa-bars::before {
    color: #1B2A4A !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #mainHeader a.item-user:hover .fa-bars,
  #mainHeader a.item-user:hover .fa-bars::before {
    color: #FFFFFF !important;
  }

  /* Fallback si FontAwesome no renderiza la hamburguesa */
  #mainHeader .fa-bars:empty::before {
    content: "\f0c9" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
  }

  /* =========================================================
     LUPA MOBILE
     ========================================================= */

  #mainHeader a[data-action="toggleSearchbar"] {
    background: #FFFFFF !important;
  }

  #mainHeader .fa-search,
  #mainHeader i.fas.fa-search {
    display: inline-flex !important;
    color: #1B2A4A !important;
    font-size: 18px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #mainHeader .fa-search::before {
    color: #1B2A4A !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #mainHeader a[data-action="toggleSearchbar"]:hover .fa-search,
  #mainHeader a[data-action="toggleSearchbar"]:hover .fa-search::before {
    color: #FFFFFF !important;
  }

  /* =========================================================
     MENÚ MOBILE PRINCIPAL
     ========================================================= */

  #mainHeader #dropdownProductsMenu.menu-options,
  #mainHeader .dropdown-menu.menu-options {
    position: fixed !important;
    top: 76px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    padding: 12px !important;
    margin: 0 !important;
    border: 1px solid rgba(228, 226, 245, 0.95) !important;
    border-radius: 22px !important;
    background: #FFFFFF !important;
    color: #1B2A4A !important;
    box-shadow: 0 22px 60px rgba(27, 42, 74, 0.22) !important;
    z-index: 10001 !important;
  }

  #mainHeader #dropdownProductsMenu.menu-options.show,
  #mainHeader .dropdown-menu.menu-options.show {
    display: block !important;
  }

  /* Links del menú */
  #mainHeader #dropdownProductsMenu .nav-link,
  #mainHeader #dropdownProductsMenu .sections_link_responsive,
  #mainHeader #dropdownProductsMenu a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 13px 14px !important;
    margin: 0 0 6px 0 !important;
    border-radius: 14px !important;
    background: #F8F6FF !important;
    color: #1B2A4A !important;
    font-family: "DM Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
    text-decoration: none !important;
    text-transform: none !important;
    border: 1px solid rgba(228, 226, 245, 0.9) !important;
    white-space: normal !important;
  }

  #mainHeader #dropdownProductsMenu .nav-link:hover,
  #mainHeader #dropdownProductsMenu .sections_link_responsive:hover,
  #mainHeader #dropdownProductsMenu a:hover {
    background: #FF5F57 !important;
    color: #FFFFFF !important;
    border-color: #FF5F57 !important;
  }

  /* Evita textos cortados o espacios raros */
  #mainHeader #dropdownProductsMenu span,
  #mainHeader #dropdownProductsMenu i {
    color: inherit !important;
  }

  /* Flecha de productos */
  #mainHeader #products_item_small .span-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    margin-left: 8px !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #FF5F57 !important;
    flex: 0 0 auto !important;
  }

  #mainHeader #products_item_small .span-check i {
    color: #FF5F57 !important;
    font-size: 14px !important;
  }

  #mainHeader #products_item_small > a:hover .span-check {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
  }

  #mainHeader #products_item_small > a:hover .span-check i {
    color: #FFFFFF !important;
  }

  /* =========================================================
     SUBMENÚ PRODUCTOS MOBILE
     ========================================================= */

  #mainHeader #dropdown-submenu-products-responsive {
    position: static !important;
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: 330px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    padding: 8px !important;
    margin: 0 0 8px 0 !important;
    border: 1px solid rgba(228, 226, 245, 0.9) !important;
    border-radius: 16px !important;
    background: #F8F6FF !important;
    box-shadow: none !important;
  }

  #mainHeader #dropdown-submenu-products-responsive.show {
    display: block !important;
  }

  #mainHeader #dropdown-submenu-products-responsive .content-container,
  #mainHeader #dropdown-submenu-products-responsive .row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #mainHeader #dropdown-submenu-products-responsive .col-md-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #mainHeader #dropdown-submenu-products-responsive .dsp-categoria-lista {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #mainHeader #dropdown-submenu-products-responsive .dsp-categoria-titulo {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #mainHeader #dropdown-submenu-products-responsive .dsp-categoria-titulo i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 6px 0 0 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #FF5F57 !important;
    font-size: 10px !important;
  }

  #mainHeader #dropdown-submenu-products-responsive .dsp-categoria-titulo a {
    display: block !important;
    width: 100% !important;
    padding: 10px 11px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    color: #1B2A4A !important;
    border: 1px solid rgba(228, 226, 245, 0.7) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }

  #mainHeader #dropdown-submenu-products-responsive .dsp-categoria-titulo a:hover {
    background: #1B2A4A !important;
    color: #FFFFFF !important;
    border-color: #1B2A4A !important;
  }

  #mainHeader #dropdown-submenu-products-responsive .dsp-subcategoria-lista,
  #mainHeader #dropdown-submenu-products-responsive .dsp-sub-subcategoria-lista {
    margin: 0 !important;
    padding: 0 0 0 34px !important;
  }

  /* Scrollbar delicado del menú */
  #mainHeader #dropdownProductsMenu::-webkit-scrollbar,
  #mainHeader #dropdown-submenu-products-responsive::-webkit-scrollbar {
    width: 6px !important;
  }

  #mainHeader #dropdownProductsMenu::-webkit-scrollbar-track,
  #mainHeader #dropdown-submenu-products-responsive::-webkit-scrollbar-track {
    background: #F8F6FF !important;
    border-radius: 999px !important;
  }

  #mainHeader #dropdownProductsMenu::-webkit-scrollbar-thumb,
  #mainHeader #dropdown-submenu-products-responsive::-webkit-scrollbar-thumb {
    background: #E4E2F5 !important;
    border-radius: 999px !important;
  }

  /* =========================================================
     BUSCADOR MOBILE DESPLEGABLE
     ========================================================= */

  #mainHeader .search-box.res {
    position: fixed !important;
    top: 76px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    z-index: 10003 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    box-shadow: 0 22px 60px rgba(27, 42, 74, 0.22) !important;
    border: 1px solid rgba(228, 226, 245, 0.95) !important;
  }

  #mainHeader .search-box.res .form-control,
  #mainHeader .search-box.res input {
    width: 100% !important;
    height: 46px !important;
    border-radius: 999px !important;
    border: 1px solid #E4E2F5 !important;
    background: #F8F6FF !important;
    color: #1B2A4A !important;
    font-size: 14px !important;
    padding: 0 44px 0 16px !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #mainHeader .search-box.res .search-close {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
  }

  #mainHeader .search-box.res .search-close a,
  #mainHeader .search-box.res .search-close i {
    color: #FF5F57 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #mainHeader #resultados-mobile {
    width: 100% !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    border-radius: 14px !important;
    margin-top: 8px !important;
    box-shadow: 0 10px 30px rgba(27, 42, 74, 0.12) !important;
  }
}
/* =========================================================
   FIX BUSCADOR MOBILE
   Oculto por defecto, visible solo al hacer clic en la lupa
   ========================================================= */

@media (max-width: 767.98px) {

  /* Oculta el buscador mobile por defecto */
  #mainHeader .search-box.res {
    display: none !important;
  }

  /* Cuando Waclis lo muestra por JS, mantiene el diseño correcto */
  #mainHeader .search-box.res[style*="display: block"],
  #mainHeader .search-box.res[style*="display:block"],
  #mainHeader .search-box.res.active,
  #mainHeader .search-box.res.show {
    display: block !important;
    position: fixed !important;
    top: 76px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    z-index: 10003 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    box-shadow: 0 22px 60px rgba(27, 42, 74, 0.22) !important;
    border: 1px solid rgba(228, 226, 245, 0.95) !important;
  }

  /* Input del buscador cuando está visible */
  #mainHeader .search-box.res .form-control,
  #mainHeader .search-box.res input {
    width: 100% !important;
    height: 46px !important;
    border-radius: 999px !important;
    border: 1px solid #E4E2F5 !important;
    background: #F8F6FF !important;
    color: #1B2A4A !important;
    font-size: 14px !important;
    padding: 0 44px 0 16px !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Botón cerrar del buscador */
  #mainHeader .search-box.res .search-close {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
  }

  #mainHeader .search-box.res .search-close a,
  #mainHeader .search-box.res .search-close i {
    color: #FF5F57 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}




/* =========================================================
   FIX DESKTOP / TABLET
   Mostrar ícono de usuario que abre login / registro
   ========================================================= */

@media (min-width: 768px) {

  /* Contenedor del usuario en desktop */
  #mainHeader .d-none.d-md-block.align-content-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10000 !important;
  }

  /* Link del usuario */
  #mainHeader a.item-user[data-action="session-login"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #1B2A4A !important;
    border: 1px solid rgba(27, 42, 74, 0.12) !important;
    text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(27, 42, 74, 0.08) !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10001 !important;
  }

  /* Ícono usuario FontAwesome */
  #mainHeader a.item-user[data-action="session-login"] i,
  #mainHeader a.item-user[data-action="session-login"] .fa-user,
  #mainHeader a.item-user[data-action="session-login"] .far.fa-user {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1B2A4A !important;
    font-size: 20px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
  }

  #mainHeader a.item-user[data-action="session-login"] .fa-user::before {
    color: #1B2A4A !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hover */
  #mainHeader a.item-user[data-action="session-login"]:hover,
  #mainHeader a.item-user[data-action="session-login"]:focus {
    background: #FF5F57 !important;
    border-color: #FF5F57 !important;
    color: #FFFFFF !important;
  }

  #mainHeader a.item-user[data-action="session-login"]:hover i,
  #mainHeader a.item-user[data-action="session-login"]:focus i,
  #mainHeader a.item-user[data-action="session-login"]:hover .fa-user::before,
  #mainHeader a.item-user[data-action="session-login"]:focus .fa-user::before {
    color: #FFFFFF !important;
  }
}
/* =========================================================
   FIX DESKTOP / TABLET
   Usuario sin círculo, igual al estilo del carrito
   ========================================================= */

@media (min-width: 768px) {

  #mainHeader a.item-user[data-action="session-login"] {
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #1B2A4A !important;
  }

  #mainHeader a.item-user[data-action="session-login"] i,
  #mainHeader a.item-user[data-action="session-login"] .fa-user,
  #mainHeader a.item-user[data-action="session-login"] .far.fa-user {
    color: #1B2A4A !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  #mainHeader a.item-user[data-action="session-login"] .fa-user::before {
    color: #1B2A4A !important;
  }

  #mainHeader a.item-user[data-action="session-login"]:hover,
  #mainHeader a.item-user[data-action="session-login"]:focus {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #FF5F57 !important;
  }

  #mainHeader a.item-user[data-action="session-login"]:hover i,
  #mainHeader a.item-user[data-action="session-login"]:focus i,
  #mainHeader a.item-user[data-action="session-login"]:hover .fa-user::before,
  #mainHeader a.item-user[data-action="session-login"]:focus .fa-user::before {
    color: #FF5F57 !important;
  }
}
/* =========================================================
   FIX DESKTOP / TABLET
   Usuario blanco sobre header oscuro, sin círculo
   ========================================================= */

@media (min-width: 768px) {

  #mainHeader a.item-user[data-action="session-login"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
  }

  #mainHeader a.item-user[data-action="session-login"] i,
  #mainHeader a.item-user[data-action="session-login"] .fa-user,
  #mainHeader a.item-user[data-action="session-login"] .far.fa-user,
  #mainHeader a.item-user[data-action="session-login"] .fa-user::before {
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #mainHeader a.item-user[data-action="session-login"]:hover,
  #mainHeader a.item-user[data-action="session-login"]:focus {
    background: transparent !important;
    color: #FF5F57 !important;
  }

  #mainHeader a.item-user[data-action="session-login"]:hover i,
  #mainHeader a.item-user[data-action="session-login"]:focus i,
  #mainHeader a.item-user[data-action="session-login"]:hover .fa-user,
  #mainHeader a.item-user[data-action="session-login"]:focus .fa-user,
  #mainHeader a.item-user[data-action="session-login"]:hover .fa-user::before,
  #mainHeader a.item-user[data-action="session-login"]:focus .fa-user::before {
    color: #FF5F57 !important;
  }
}




/* =========================================================
   FIX MOBILE HEADER
   Compactar iconos para que no se corte el carrito
   ========================================================= */

@media (max-width: 767.98px) {

  /* Header mobile más controlado */
  #mainHeader .top-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-left: 14px !important;
    padding-right: 8px !important;
    min-height: 74px !important;
    overflow: hidden !important;
  }

  /* Logo: evita que empuje los iconos */
  #mainHeader .logo-img {
    flex: 0 0 auto !important;
    max-width: 118px !important;
    min-width: 0 !important;
    margin-right: 4px !important;
  }

  #mainHeader .logo-img img,
  #mainHeader .img-with {
    max-width: 112px !important;
    height: auto !important;
    display: block !important;
  }

  /* Contenedor derecho de iconos */
  #mainHeader .top-content > .d-flex.align-items-center {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 140px) !important;
    overflow: visible !important;
  }

  /* Quita paddings Bootstrap que ensanchan cada icono */
  #mainHeader .top-content > .d-flex.align-items-center > div,
  #mainHeader .p-1,
  #mainHeader .p-2,
  #mainHeader .pl-2,
  #mainHeader .pr-3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Tamaño compacto para hamburguesa, lupa, usuario y carrito */
  #mainHeader a.item-user,
  #mainHeader a.item-cart-menu,
  #mainHeader a[data-action="toggleSearchbar"] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    flex: 0 0 36px !important;
  }

  /* Tamaño de los iconos internos */
  #mainHeader a.item-user i,
  #mainHeader a[data-action="toggleSearchbar"] i,
  #mainHeader a.item-cart-menu i,
  #mainHeader a.item-cart-menu svg {
    font-size: 17px !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 1 !important;
  }

  /* Hamburguesa apenas más grande para que mantenga presencia */
  #mainHeader .fa-bars,
  #mainHeader i.fas.fa-bars {
    font-size: 19px !important;
  }

  /* Carrito: evita que se corte hacia la derecha */
  #mainHeader a.item-cart-menu {
    position: relative !important;
    right: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  #mainHeader a.item-cart-menu svg {
    display: block !important;
    color: #1B2A4A !important;
    fill: currentColor !important;
  }

  /* Badge del carrito más chico y hacia adentro */
  #mainHeader .cart-items-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 15px !important;
    height: 15px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 15px !important;
    text-align: center !important;
    background: #FF5F57 !important;
    color: #FFFFFF !important;
    border: 1px solid #1B2A4A !important;
    z-index: 3 !important;
  }

  /* Evita que el último icono quede pegado/cortado */
  #mainHeader .top-content > .d-flex.align-items-center > div:last-child {
    margin-right: 0 !important;
    padding-right: 2px !important;
  }
}

/* Ajuste extra para pantallas muy angostas */
@media (max-width: 390px) {

  #mainHeader .top-content {
    padding-left: 12px !important;
    padding-right: 6px !important;
    gap: 6px !important;
  }

  #mainHeader .logo-img {
    max-width: 104px !important;
  }

  #mainHeader .logo-img img,
  #mainHeader .img-with {
    max-width: 100px !important;
  }

  #mainHeader .top-content > .d-flex.align-items-center {
    gap: 5px !important;
    max-width: calc(100vw - 118px) !important;
  }

  #mainHeader a.item-user,
  #mainHeader a.item-cart-menu,
  #mainHeader a[data-action="toggleSearchbar"] {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    flex-basis: 34px !important;
  }

  #mainHeader a.item-user i,
  #mainHeader a[data-action="toggleSearchbar"] i,
  #mainHeader a.item-cart-menu i,
  #mainHeader a.item-cart-menu svg {
    font-size: 16px !important;
    width: 17px !important;
    height: 17px !important;
  }
}



/* =========================================================
   FICHA DE PRODUCTO
   Imagen principal y galería en CONTAIN
   ========================================================= */

/* Imagen principal de la ficha */
.containerImagePrincipal .fancyboxPrincipal > div,
.containerImagePrincipal a.fancyboxPrincipal > div,
.containerImagePrincipal #main-fancy.fancyboxPrincipal > div {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #FFFFFF !important;
}

/* Miniaturas de la galería */
.containerImagePrincipal .carousel-thumbs .ficha_carousel_img a > div,
.containerImagePrincipal .carousel-thumbs .owl-item .ficha_carousel_img div[style*="background"],
.containerImagePrincipal .ficha_carousel_img div[style*="background"] {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #FFFFFF !important;
}

/* Mantiene las miniaturas prolijas */
.containerImagePrincipal .ficha_carousel_img {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Opcional: mejora visual de la galería sin recortar imágenes */
.containerImagePrincipal .carousel-thumbs .owl-item {
  background: #FFFFFF !important;
}

/* Mobile: evita alturas excesivas en la imagen principal */
@media (max-width: 767.98px) {
  .containerImagePrincipal .fancyboxPrincipal > div,
  .containerImagePrincipal a.fancyboxPrincipal > div,
  .containerImagePrincipal #main-fancy.fancyboxPrincipal > div {
    height: 360px !important;
  }

  .containerImagePrincipal .carousel-thumbs .ficha_carousel_img a > div,
  .containerImagePrincipal .ficha_carousel_img div[style*="background"] {
    height: 82px !important;
    width: 120px !important;
  }
}




/* =========================================================
   BRAND LAB · Blog ficha artículo
========================================================= */

.section-product-category {
  position: relative !important;
  margin-top: 0 !important;
  margin-bottom: 34px !important;
  padding: 42px 0 36px !important;
  background: #f8f6ff !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(228, 226, 245, 0.9) !important;
}

/* Frase de fondo visible, editorial y sutil */
.section-product-category::before {
  content: "BRAND LAB NEWS";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Montserrat", "DM Sans", Arial, sans-serif;
  font-size: clamp(58px, 11vw, 150px);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 0.9;
  color: rgba(27, 42, 74, 0.055);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

/* Quitamos cualquier acento circular anterior */
.section-product-category::after {
  display: none !important;
  content: none !important;
}

.section-product-category .container,
.section-product-category .row,
.section-product-category .col-md-6 {
  position: relative !important;
  z-index: 1 !important;
}

.section-product-category .row {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Breadcrumb */
.section-product-category .list-item-product {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "DM Sans", Arial, sans-serif !important;
}

.section-product-category .list-item-product .list-inline-item {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Links breadcrumb */
.section-product-category .list-item-product a.list-inline-item {
  color: #6e6c8a !important;
  text-decoration: none !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}

.section-product-category .list-item-product a.list-inline-item:hover {
  color: #ff5f57 !important;
  transform: translateY(-1px) !important;
}

/* Separadores */
.section-product-category .list-item-product li.list-inline-item {
  color: rgba(110, 108, 138, 0.45) !important;
  font-weight: 400 !important;
}

/* Artículo actual */
.section-product-category .list-item-product span.list-inline-item {
  color: #1b2a4a !important;
  font-weight: 800 !important;
}

/* Título Novedades */
.section-product-category .title {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #1b2a4a !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Montserrat", "DM Sans", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

.section-product-category .title::before {
  content: "";
  width: 34px;
  height: 2px;
  display: inline-block;
  background: #ff5f57;
  border-radius: 999px;
}

/* Alineación desktop */
.section-product-category .text-right {
  text-align: right !important;
  float: right !important;
}

/* Corrige color inline del artículo actual */
.section-product-category [style*="color:var(--color-border-hover)"] {
  color: #1b2a4a !important;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 767px) {
  .section-product-category {
    padding: 34px 0 30px !important;
    margin-bottom: 26px !important;
  }

  .section-product-category::before {
    top: 50%;
    font-size: 64px;
    white-space: nowrap;
    color: rgba(27, 42, 74, 0.055);
  }

  .section-product-category .row {
    gap: 14px !important;
  }

  .section-product-category .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .section-product-category .title {
    margin: 0 auto 8px !important;
    justify-content: center !important;
    font-size: 12px !important;
    letter-spacing: 0.15em !important;
  }

  .section-product-category .title::before {
    width: 24px;
  }

  .section-product-category .list-item-product {
    justify-content: center !important;
    text-align: center !important;
    gap: 7px !important;
  }

  .section-product-category .list-item-product .list-inline-item {
    font-size: 11.5px !important;
  }

  .section-product-category .list-item-product span.list-inline-item {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 420px) {
  .section-product-category {
    padding: 30px 0 28px !important;
  }

  .section-product-category::before {
    font-size: 56px;
  }

  .section-product-category .list-item-product a.list-inline-item,
  .section-product-category .list-item-product li.list-inline-item {
    font-size: 11px !important;
  }

  .section-product-category .list-item-product span.list-inline-item {
    font-size: 12.5px !important;
  }
}