/** Shopify CDN: Minification failed

Line 380:0 Expected "}" to go with "{"

**/
/* ============================================================
   MEGA MENU CSS — v2.0
   Limpiado para trabajar con el nuevo sistema sticky.
   Los estilos de layout y posicionamiento ahora viven
   en el <style> inline de mega-menu.liquid.
   Este archivo conserva: variables, animaciones especiales,
   microinteracciones y utilidades.
   ============================================================ */

/* ── Variables CSS ── */
:root {
  --menu-bg: #ffffff;
  --menu-radius: 12px;
  --menu-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  --menu-hover: #0066cc;
  --menu-text: #1a1a1a;
  --menu-accent: #e63946;
  --menu-border: #f0f0f0;
  --transition: 200ms ease;
  --menu-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Reset base ── */
.mm-section *,
.mm-section *::before,
.mm-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.mm-section {
  font-family: var(--menu-font);
  color: var(--menu-text);
  position: relative;
  /*
   * z-index eliminado — ahora lo controla .mm-sticky-wrapper
   * con var(--layer-menu-drawer) de Horizon.
   * Tener z-index: 1000 aquí creaba un stacking context
   * que aislaba el sticky y rompía el posicionamiento.
   */
}

/* ── Utilidad accesibilidad ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   REBAJAS — Animación de brillo
   (Se conserva aquí porque es una animación decorativa
   independiente del sistema de layout)
   ============================================================ */
.mm-nav__link--rebajas {
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

/* Efecto shine diagonal */
.mm-nav__link--rebajas::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: mm-shine 4.5s ease infinite;
  pointer-events: none;
}

@keyframes mm-shine {
  0%   { left: -75%; opacity: 0; }
  10%  { opacity: 1; }
  40%  { left: 125%; opacity: 1; }
  41%  { opacity: 0; }
  100% { left: 125%; opacity: 0; }
}

.mm-nav__link--rebajas:hover {
  transform: scale(1.02);
}

/* ============================================================
   MICROINTERACCIONES
   ============================================================ */

/* Sub-enlace: desplazamiento sutil a la derecha en hover */
.mm-dropdown__sublink {
  transition: color var(--transition),
              padding-left var(--transition);
}

.mm-dropdown__sublink:hover {
  padding-left: 6px;
}

/* Título de columna: separador inferior */
.mm-dropdown__col-title {
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--menu-border);
  margin-bottom: 4px;
}

/* ============================================================
   OVERLAY — Transición suave con opacity
   (Reemplaza el display:none/block del CSS anterior
   por opacity/visibility para permitir transición)
   ============================================================ */
.mm-overlay {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ============================================================
   TABLET — 750px a 1024px
   ============================================================ */
@media screen and (min-width: 750px) and (max-width: 1024px) {
  .mm-nav__link {
    padding: 14px 10px;
    font-size: 0.82rem;
  }

  .mm-dropdown__grid--cols-5 {
    grid-template-columns: repeat(4, 1fr);
  }

  .mm-topbar__inner {
    gap: 16px;
  }
}

/* ============================================================
   MÓVIL — Flecha → indicador + / −
   ============================================================ */
@media screen and (max-width: 749px) {

  /* Ocultar la flecha SVG en móvil */
  .mm-arrow {
    display: none;
  }

  /* Usar ::after como indicador de acordeón */
  .mm-nav__link[data-mm-trigger]::after {
    content: '+';
    display: block;
    font-size: 1.2rem;
    font-weight: 300;
    color: #888;
    position: static;
    background: none;
    transform: none;
    width: auto;
    height: auto;
    border-radius: 0;
    transition: none;
    bottom: auto;
    left: auto;
    right: auto;
  }

  .mm-nav__item--has-children.is-open > .mm-nav__link[data-mm-trigger]::after {
    content: '−';
  }

  /* Animación de apertura del acordeón */
  .mm-nav__item--has-children.is-open > .mm-dropdown {
    animation: mm-accordion-open 0.22s ease forwards;
  }

  @keyframes mm-accordion-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
/* ── Mega Menú: contenedor elegante tipo GAIA ── */
.mega-menu,
.mega-menu__container,
[class*="mega-menu"] {
  width: calc(100% - 80px) !important;
  max-width: 1800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  /* Altura automática */
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;

  /* Padding interno */
  padding: 40px 45px !important;

  /* Estética premium */
  background: #ffffff !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10) !important;

  /* Flotante sobre el contenido */
  position: absolute !important;
  z-index: 100 !important;
}
@media (min-width: 750px) {
/* ============================================
   MEGA MENÚ — REDISEÑO PREMIUM
   Encar Muebles · Julio 2026
   Selectores verificados del tema
   ============================================ */

/* --- Contenedor principal: posicionamiento absoluto, centrado --- */
.mm-dropdown {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 80px) !important;
  max-width: 1750px !important;
  height: auto !important;
  min-height: unset !important;
  z-index: 200;
}

/* --- Shell: la "caja flotante" visual --- */
.mm-dropdown__shell {
  background: #ffffff;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 40px 45px;
  height: auto !important;
  min-height: unset !important;
  animation: mmFadeIn 220ms ease forwards;
}

/* --- Animación de entrada --- */
@keyframes mmFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Layout interno: Categorías | Img 1 | Img 2 --- */
.mm-dropdown__inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  height: auto !important;
  min-height: unset !important;
  gap: 0 !important;
}

/* --- Zona izquierda: Categorías (42%) --- */
.mm-dropdown__categories {
  flex: 0 0 42% !important;
  max-width: 42% !important;
  padding-right: 40px !important;
  height: auto !important;
  min-height: unset !important;
}

/* --- Grid de categorías --- */
.mm-dropdown__grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: auto !important;
}

/* --- Cada columna de categoría --- */
.mm-dropdown__col {
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Título de categoría --- */
.mm-dropdown__col-title {
  display: block !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  padding: 9px 0 !important;
  margin-bottom: 0 !important;
  transition: color 200ms ease, transform 200ms ease !important;
  line-height: 1.3 !important;
}

.mm-dropdown__col-title:hover {
  color: #8b7355 !important;
  transform: translateX(4px) !important;
}

/* --- Sublistas --- */
.mm-dropdown__sublist {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mm-dropdown__sublink {
  display: block !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #555 !important;
  text-decoration: none !important;
  padding: 4px 0 !important;
  transition: color 200ms ease, transform 200ms ease !important;
}

.mm-dropdown__sublink:hover {
  color: #8b7355 !important;
  transform: translateX(4px) !important;
}

/* --- Zona derecha: Imágenes (58%) --- */
.mm-dropdown__promo {
  flex: 0 0 58% !important;
  max-width: 58% !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 24px !important;
  align-items: flex-start !important;
  height: auto !important;
}

/* --- Cada tarjeta de imagen --- */
.mm-promo__card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: block !important;
  height: auto !important;
}

/* --- Imagen promo --- */
.mm-promo__img {
  width: 100% !important;
  height: 230px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
}

/* --- Placeholder cuando no hay imagen --- */
.mm-promo__card--placeholder {
  height: 230px !important;
  background: #f5f5f5 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #aaa !important;
  font-size: 13px !important;
}