/* ════════════════════════════════════════════════════════════════
   VXM MEGAMENU 2026 — premium dark-glass panel
   Replaces the legacy HubSpot mega-menu module visuals while
   keeping the same outer DOM hooks (.mega-drop, .mega-drop-wrapper,
   .mega-drop-container, .mega-drop__item) so the legacy
   open/close JS still fires. Everything inside is new markup.

   Three-tier structure:
   • Eyebrow strip (label + "ver todo →")
   • Product cards row (5 cards, NEW badge support)
   • Two-column footer (use cases + resources lists)
   • Bottom strip (quick links + demo CTA)
   ════════════════════════════════════════════════════════════════ */

/* === Override legacy CSS variables — light theme.
   Panel is pure white #FFFFFF, all text is brand dark #1A1A1A.
   Borders/dividers/hovers use very low-alpha black so they read as
   crisp on white without becoming heavy. */
:root {
  --mega-menu-bg: #FFFFFF;
  --mega-menu-title-color: #1A1A1A;
  --mega-menu-text-color: rgba(26, 26, 26, 0.62);
  --mega-menu-item-hover: rgba(26, 26, 26, 0.04);
  --mega-menu-border: rgba(26, 26, 26, 0.08);

  /* Local tokens for the new megamenu — light theme */
  --vxm-mm-panel-bg: #FFFFFF;
  --vxm-mm-card-bg: rgba(26, 26, 26, 0.025);
  --vxm-mm-card-hover: rgba(26, 26, 26, 0.05);
  --vxm-mm-card-active: rgba(71, 126, 207, 0.08);
  --vxm-mm-divider: rgba(26, 26, 26, 0.08);
  --vxm-mm-eyebrow: rgba(26, 26, 26, 0.50);
  --vxm-mm-title: #1A1A1A;
  --vxm-mm-body: rgba(26, 26, 26, 0.62);
  --vxm-mm-accent: var(--vxm-brand-blue, #477ECF);
  --vxm-mm-radius-panel: 18px;
  --vxm-mm-radius-card: 12px;
  --vxm-mm-anim: 140ms;
  --vxm-mm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* === PANEL (the dropdown itself) === */
.header .menu-drop-panel.mega-drop,
.header .mega-drop {
  /* Fast snappy open/close — legacy used CSS display toggling so
     the actual fade is handled by these transitions on the wrapper. */
  z-index: 50 !important;
}

/* === PURE-CSS hover/active snap — overrides legacy height:0 JS dance.
   The legacy module gates visibility on a JS-toggled .is-active class
   that adds 200-300ms of latency before the panel even starts to
   appear. We hijack the parent li:hover state so the panel opens
   the instant the cursor reaches the trigger — no JS in the path. */
@media (min-width: 768px) {
  /* Default: panel exists but is hidden via display:none.
     Switch to display:block only when the parent li has either
     :hover, :focus-within, or our custom .vxm-mm-open class.
     We don't use opacity here because the legacy module sets an
     inline transition-duration that fights us; display toggling
     is snappy enough at 140ms anyway. */
  .header li.menu-drop > .menu-drop-panel.mega-drop,
  .header .main-nav__item.menu-drop > .menu-drop-panel.mega-drop {
    height: auto !important;
    overflow: visible !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
    transition: none !important;
  }

  .header li.menu-drop:hover > .menu-drop-panel.mega-drop,
  .header li.menu-drop:focus-within > .menu-drop-panel.mega-drop,
  .header li.menu-drop.vxm-mm-open > .menu-drop-panel.mega-drop,
  .header .main-nav__item.menu-drop:hover > .menu-drop-panel.mega-drop,
  .header .main-nav__item.menu-drop:focus-within > .menu-drop-panel.mega-drop,
  .header .main-nav__item.menu-drop.vxm-mm-open > .menu-drop-panel.mega-drop {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* When user clicks the trigger to CLOSE the dropdown, the JS adds
     .vxm-mm-suppress-hover. While that class is on, force the panel
     to stay hidden even if the cursor is still hovering the trigger.
     The class is cleared by JS on the next `mouseleave`, so the
     next deliberate hover opens the panel normally again. */
  .header li.menu-drop.vxm-mm-suppress-hover > .menu-drop-panel.mega-drop,
  .header .main-nav__item.menu-drop.vxm-mm-suppress-hover > .menu-drop-panel.mega-drop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* The wrapper inside handles the snappy slide-in animation via
     keyframes — that's the visible motion the user sees. The panel
     itself just toggles display:none/block which has no transition. */

  /* Make sure all the new content inside is always visible when the
     panel is open — avoids any inherited visibility:hidden from the
     legacy .menu-drop-panel base rule. Both hover-open AND
     click-pinned (.vxm-mm-open) states must cascade visibility. */
  .header li.menu-drop:hover .mega-drop *,
  .header li.menu-drop:focus-within .mega-drop *,
  .header li.menu-drop.vxm-mm-open .mega-drop * {
    visibility: visible !important;
  }
}

@media (min-width: 768px) {
  .header .menu-drop-panel.mega-drop,
  .header .mega-drop {
    top: 100% !important;
    /* HOVER BRIDGE — the trigger's li box ends ~22px above where the
       panel starts (top:100% lands below the header's bottom padding),
       leaving a dead strip: moving the cursor from the trigger toward
       the panel crosses header background that belongs to NEITHER the
       li nor the panel, so li:hover drops and the panel snaps shut.
       Extend the panel's hover box UP over that gap with padding-top +
       an equal negative margin-top: the box now reaches the trigger
       (continuous hover chain) while the visible card stays put
       (padding is transparent — background is on the wrapper). */
    padding: 26px 0 0 !important;
    margin-top: -26px !important;
    background: transparent !important;
  }

  /* Make the WRAPPER the visible floating card — centered, rounded,
     elevated, with the light-paper treatment. Shadow is softer than
     the dark version because the panel itself reads naturally on
     light surroundings. */
  .header .mega-drop-wrapper {
    background: var(--vxm-mm-panel-bg) !important;
    background-image:
      radial-gradient(120% 60% at 50% 0%,
        rgba(71, 126, 207, 0.04) 0%, transparent 60%);
    border: 1px solid var(--vxm-mm-divider);
    border-radius: var(--vxm-mm-radius-panel) !important;
    padding: 22px 24px 18px !important;
    margin: 14px auto 0 !important;
    max-width: min(1180px, calc(100vw - 32px));
    box-shadow:
      0 28px 70px -16px rgba(26, 26, 26, 0.18),
      0 8px 24px -8px rgba(26, 26, 26, 0.08);
    /* Snappy entrance */
    animation: vxm-mm-in var(--vxm-mm-anim) var(--vxm-mm-ease);
    transform-origin: top center;
  }
}

@keyframes vxm-mm-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Smoothly accelerate the legacy show/hide cascade by zeroing
   any inherited transition delays on hover-triggered subtrees. */
.header .mega-drop,
.header .mega-drop * {
  transition-delay: 0ms !important;
}

/* === EYEBROW STRIP (top row label + ver-todo link) === */
.vxm-mm__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--vxm-mm-divider);
  margin-bottom: 14px;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vxm-mm__eyebrow-label {
  color: var(--vxm-mm-eyebrow);
  font-weight: 600;
}
.vxm-mm__eyebrow-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vxm-mm-accent);
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}

.vxm-mm__eyebrow-link {
  color: rgba(26, 26, 26, 0.80);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  transition: background var(--vxm-mm-anim) var(--vxm-mm-ease),
              color var(--vxm-mm-anim);
}
.vxm-mm__eyebrow-link:hover {
  background: rgba(26, 26, 26, 0.05);
  color: #1A1A1A;
}
.vxm-mm__eyebrow-link::after {
  content: "→";
  font-size: 14px;
  letter-spacing: 0;
  transition: transform var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm__eyebrow-link:hover::after {
  transform: translateX(3px);
}

/* === PRODUCT CARDS ROW (top row of premium icon/image cards) === */
.vxm-mm__cards {
  display: grid;
  grid-template-columns: repeat(var(--vxm-mm-cards, 5), minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

/* Override legacy .mega-drop-container flex so the new grid wins */
.header .mega-drop-container.vxm-mm__cards {
  display: grid !important;
  flex-wrap: nowrap !important;
}

/* Each card — quiet by default, lifts and accents on hover */
.vxm-mm-card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 14px 14px 14px !important;
  max-width: none !important;
  min-height: 0;
  background: var(--vxm-mm-card-bg) !important;
  border: 1px solid rgba(26, 26, 26, 0.06);
  border-radius: var(--vxm-mm-radius-card);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    background var(--vxm-mm-anim) var(--vxm-mm-ease),
    border-color var(--vxm-mm-anim) var(--vxm-mm-ease),
    box-shadow var(--vxm-mm-anim) var(--vxm-mm-ease),
    transform var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm-card:hover {
  background: #FFFFFF !important;
  border-color: rgba(71, 126, 207, 0.30);
  box-shadow: 0 8px 20px -8px rgba(26, 26, 26, 0.12);
  transform: translateY(-1px);
}

/* Icon chip — small rounded square, lights up brand-blue on hover */
.vxm-mm-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(26, 26, 26, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--vxm-mm-accent);
  flex-shrink: 0;
  transition: background var(--vxm-mm-anim) var(--vxm-mm-ease),
              color var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm-card__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vxm-mm-card:hover .vxm-mm-card__icon {
  background: var(--vxm-mm-accent);
  color: #FFFFFF;
}

/* Image-card variant — image fills top, text below (Soluciones rubros).
   Force `align-items: stretch` to override the base card's
   `align-items: flex-start` so the image holder spans the full card
   width and `object-fit: cover` actually crops correctly instead of
   leaving the image at its natural 240×150 dimensions. */
.vxm-mm-card--image {
  padding: 0 !important;
  align-items: stretch !important;
}
.vxm-mm-card__img {
  position: relative;
  display: block;
  width: 100%;
  align-self: stretch;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: rgba(26, 26, 26, 0.04);
  border-radius: var(--vxm-mm-radius-card) var(--vxm-mm-radius-card) 0 0;
}
.vxm-mm-card__img img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform calc(var(--vxm-mm-anim) * 2) var(--vxm-mm-ease);
}
.vxm-mm-card:hover .vxm-mm-card__img img {
  transform: scale(1.04);
}

/* Per-rubro crop focus — the source images are portrait shots with
   the subject in different parts of the frame. Override
   object-position so each one crops to its "hero" element. */
.vxm-mm-card__img img[src*="indumentaria"]     { object-position: center 22%; }
.vxm-mm-card__img img[src*="calzado"]          { object-position: center 35%; }
.vxm-mm-card__img img[src*="bazar"]            { object-position: center 40%; }
.vxm-mm-card__img img[src*="alimentos"]        { object-position: center 50%; }
.vxm-mm-card__img img[src*="tecnologia"]       { object-position: center 50%; }
.vxm-mm-card__img img[src*="cosmetica"]        { object-position: center 35%; }
.vxm-mm-card__img img[src*="libreria"]         { object-position: center 45%; }
.vxm-mm-card__img img[src*="ferreteria"]       { object-position: center 50%; }

.vxm-mm-card--image .vxm-mm-card__body {
  padding: 12px 14px 14px;
}

/* Card body text */
.vxm-mm-card__title,
.vxm-mm-card h5 {
  font-family: Montserrat, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--vxm-mm-title) !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em;
  padding: 0 !important;
  text-transform: none !important;
}

.vxm-mm-card__desc,
.vxm-mm-card p {
  font-family: Montserrat, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--vxm-mm-body) !important;
  margin: 0 !important;
  line-height: 1.45 !important;
  display: block !important;
  /* Cap description to 2 lines so cards stay equal-height */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* NEW badge — pill at top-right of card. On light theme the pill
   is teal solid with white text for a punchy accent that survives
   the white card background. */
.vxm-mm-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: Montserrat, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4DC6BE 0%, #2FA8A0 100%);
  color: #FFFFFF;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(77, 198, 190, 0.28);
}
.vxm-mm-card--image .vxm-mm-card__badge {
  top: 10px;
  right: 10px;
  background: rgba(26, 26, 26, 0.86);
  color: #4DC6BE;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* === TWO-COLUMN FOOTER (use cases + resources lists) === */
.vxm-mm__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 16px 6px 10px;
  border-top: 1px solid var(--vxm-mm-divider);
}

.vxm-mm__col-label {
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--vxm-mm-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

.vxm-mm__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 16px;
}

.vxm-mm__list-item {
  display: block;
  text-decoration: none;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  transition: background var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm__list-item:hover {
  background: var(--vxm-mm-card-hover);
}

.vxm-mm__list-item-title {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vxm-mm-title);
  line-height: 1.3;
  margin: 0 0 2px;
}
.vxm-mm__list-item-title::after {
  content: "  ↗";
  opacity: 0;
  color: var(--vxm-mm-accent);
  transition: opacity var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm__list-item:hover .vxm-mm__list-item-title::after {
  opacity: 1;
}

.vxm-mm__list-item-desc {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--vxm-mm-body);
  line-height: 1.4;
  margin: 0;
}

/* === BOTTOM STRIP (secondary links + CTA) === */
.vxm-mm__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 12px 6px 2px;
  border-top: 1px solid var(--vxm-mm-divider);
}

.vxm-mm__strip-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.vxm-mm__strip-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: Montserrat, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--vxm-mm-body);
  text-decoration: none;
  border-radius: 8px;
  transition: background var(--vxm-mm-anim) var(--vxm-mm-ease),
              color var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm__strip-link:hover {
  background: var(--vxm-mm-card-hover);
  color: #1A1A1A;
}
.vxm-mm__strip-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  opacity: 0.6;
}

.vxm-mm__strip-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: #1A1A1A;
  color: #FFFFFF !important;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: transform var(--vxm-mm-anim) var(--vxm-mm-ease),
              box-shadow var(--vxm-mm-anim) var(--vxm-mm-ease),
              background var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm__strip-cta:hover {
  background: var(--vxm-mm-accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(71, 126, 207, 0.28);
}
.vxm-mm__strip-cta::after {
  content: "→";
  font-weight: 700;
  transition: transform var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm__strip-cta:hover::after {
  transform: translateX(3px);
}

/* === RESPONSIVE COLLAPSE — narrow tablet stacks cards 3-up, mobile 1-up === */
@media (max-width: 1024px) and (min-width: 768px) {
  .header .mega-drop-wrapper {
    max-width: calc(100vw - 24px) !important;
    padding: 18px 18px 14px !important;
  }
  .vxm-mm__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vxm-mm__bottom { gap: 16px; }
  .vxm-mm__list { grid-template-columns: 1fr; }
}

/* === MOBILE — render the megamenu as a white card-block sitting
       inside the dark legacy drawer. Keeps the new light theme
       consistent with desktop and gives clear separation from the
       dark drawer background. */
@media (max-width: 767px) {
  /* Closed-state: invisible + height 0, no scroll cost */
  .header li.menu-drop > .menu-drop-panel.mega-drop {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  /* Opened via tap on the trigger (legacy .is-active) OR via our
     own .vxm-mm-open class — both reveal the accordion-style panel
     in normal flow under the trigger. */
  .header li.menu-drop.is-active > .menu-drop-panel.mega-drop,
  .header li.menu-drop.vxm-mm-open > .menu-drop-panel.mega-drop {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    width: auto !important;
    background: transparent !important;
  }
  /* Force all child content visible — kills legacy visibility:hidden */
  .header li.menu-drop.is-active .mega-drop *,
  .header li.menu-drop.vxm-mm-open .mega-drop * {
    visibility: visible !important;
  }
  .header .menu-drop-panel.mega-drop,
  .header .mega-drop {
    background: transparent !important;
  }
  .header .mega-drop-wrapper {
    background: var(--vxm-mm-panel-bg) !important;
    border: 1px solid var(--vxm-mm-divider) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.30) !important;
    margin: 4px 12px 16px !important;
    padding: 14px 14px 12px !important;
    max-width: calc(100% - 24px) !important;
    animation: none;
  }
  .vxm-mm__eyebrow {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 4px 10px;
    margin-bottom: 8px;
  }
  .vxm-mm__eyebrow-label {
    font-size: 11px;
    line-height: 1.3;
  }
  .vxm-mm__eyebrow-link {
    font-size: 11px;
    padding: 2px 6px;
  }
  .vxm-mm__cards {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* Mobile cards use CSS Grid (NOT flex) so the title gets the
     entire right column instead of being shrunk into a flex sliver
     between the icon and the description. Layout:
       [ICON]  Title
               Description (2-line clamp)
     This kills the broken "Plataf / orma" wrapping. */
  .vxm-mm-card {
    display: grid !important;
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    padding: 14px !important;
  }
  .vxm-mm-card__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 2px 0 0 !important;
  }
  .vxm-mm-card__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    line-height: 1.25 !important;
  }
  .vxm-mm-card__desc {
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    -webkit-line-clamp: 2;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }
  /* NEW badge needs space on the right — pull it out of the grid */
  .vxm-mm-card__badge {
    top: 8px !important;
    right: 8px !important;
  }

  /* Image cards revert to a vertical stack (image on top, body
     below) — they don't fit the icon-grid pattern. */
  .vxm-mm-card--image {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    grid-template-columns: none !important;
  }
  .vxm-mm-card--image .vxm-mm-card__img {
    aspect-ratio: 16 / 9;
    width: 100% !important;
  }
  .vxm-mm-card--image .vxm-mm-card__body {
    padding: 12px 14px 14px;
  }
  .vxm-mm-card--image .vxm-mm-card__title {
    grid-column: auto;
    grid-row: auto;
  }
  .vxm-mm-card--image .vxm-mm-card__desc {
    grid-column: auto;
    grid-row: auto;
    -webkit-line-clamp: 3;
  }
  .vxm-mm__bottom {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px 4px;
  }
  .vxm-mm__list { grid-template-columns: 1fr; gap: 2px; }
  .vxm-mm__list-item-title { font-size: 14px; }
  .vxm-mm__list-item-desc { font-size: 12.5px; }
  .vxm-mm__strip {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 4px 4px;
  }
  .vxm-mm__strip-links {
    justify-content: center;
    flex-wrap: wrap;
  }
  .vxm-mm__strip-cta {
    justify-content: center;
    padding: 12px 18px;
    font-size: 14px;
  }
}