/* =========================================================================
 * Supertronic Menu — alineado con el design system de Creative Elements +
 * tema Supertronic.
 *
 *   Tokens del sitio:
 *     fuente:        Poppins (CE kit-1) / Unbounded (cat-title, blog)
 *     azul brand:    var(--color-blue)        = #006DB6
 *     bg claro:      var(--color-light)       = #F6F7FA
 *     texto oscuro:  var(--color-black-light) = #1a1a1a
 *     container CE:  1200px (kit-1) / 1140px (default)
 *
 *   El menú vive dentro de un widget Shortcode de CE → su contenedor padre
 *   tiene max-width: 1200px. Para el megamenu full-width usamos el truco
 *   `width: 100vw; left: 50%; transform: translateX(-50%)` que rompe el ancho
 *   del padre y centra el strip al viewport, manteniendo el contenido
 *   limitado a 1200px con .stm-megamenu__inner.
 * ========================================================================= */

.stm-menu {
  /* ----- Tokens del PANEL desplegable (megamenu/drawer) — fondo blanco con
     texto oscuro y accent azul. Sobrescribibles desde fuera. */
  --stm-fg:           var(--color-black-light, #262626);
  --stm-fg-muted:     #262626;
  --stm-fg-soft:      #8a8a8a;
  --stm-bg:           #ffffff;
  --stm-bg-soft:      var(--color-light, #F6F7FA);
  --stm-accent:       var(--color-blue, #006DB6);
  --stm-accent-soft:  rgba(0, 109, 182, .08);
  --stm-border:       #e4e7ec;

  /* ----- Tokens de la BARRA superior — el menú vive sobre el header azul
     corporativo (#006DB6), así que invertimos los colores AQUÍ: texto blanco,
     hover/underline blanco, hamburguesa blanca. Sólo aplica a .stm-top__link
     y .stm-top__trigger; el megamenu y el drawer mantienen su panel blanco. */
  --stm-bar-fg:           #ffffff;
  --stm-bar-fg-hover:     #ffffff;
  --stm-bar-accent:       #ffffff;
  --stm-bar-hover-bg:     rgba(255, 255, 255, .12);

  --stm-shadow-pop:   0 12px 40px rgba(15, 23, 42, .12);
  --stm-radius:       10px;
  --stm-radius-pill:  25px;
  --stm-ease:         cubic-bezier(.22, 1, .36, 1);
  --stm-z-drawer:     9990;
  --stm-z-mega:       9991;
  --stm-container:    1200px;

  position: relative;
  font-family: 'Poppins', sans-serif;
  color: var(--stm-fg);
  width: 100%;                /* ocupa todo el ancho del column padre */
  display: block;
}

.stm-menu .stm-drawer {
  width: 100%;
}

/* ---------- TOP-LEVEL (desktop) ----------------------------------------- */

.stm-top {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.stm-top__item {
  position: static; /* el megamenu se ancla a .stm-menu para escapar lateralmente */
}

.stm-top__link,
.stm-top__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  /* !important obligatorio: el tema Supertronic tiene en custom.css:13
     `#header a { color: var(--color-blue); }` con specificity 1,0,1, que pinta
     en azul los items que son <a> (Personalización, Descargas, Noticias). Mi
     `.stm-top__link` sin !important pierde por specificity. Hago lo mismo con
     text-decoration porque el mismo tema añade underline al hover. */
  color: var(--stm-bar-fg) !important;
  /* Fuente heredada — sin forzar Unbounded. Si CE/`body.ce-kit-1 a` impone
     Poppins, lo dejamos pasar; es el aspecto pedido. */
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 1em;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none !important;
  cursor: pointer;
  transition: color .2s var(--stm-ease), background-color .2s var(--stm-ease);
}
/* Pantallas intermedias (991–1200px): items de la barra horizontal más juntos
   para que quepan sin saltar de línea. En 991–1025px la barra ya es el drawer
   (hamburguesa), y el bloque móvil de más abajo —posterior en el CSS— mantiene
   su padding; aquí solo se afecta la barra real (1026–1200px). */
@media (min-width: 991px) and (max-width: 1200px) {
  .stm-top__link,
  .stm-top__trigger {
    padding: 14px 12px;
  }
}
/* Underline animado bajo el item activo/hover */
.stm-top__link::after,
.stm-top__trigger::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 2px;
  background: var(--stm-bar-accent);  /* blanco también */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--stm-ease);
}
.stm-top__link:hover,
.stm-top__trigger:hover,
.stm-top__trigger[aria-expanded="true"] {
  color: var(--stm-bar-fg-hover) !important;
  text-decoration: none !important;
}
.stm-top__link:hover::after,
.stm-top__trigger:hover::after,
.stm-top__trigger[aria-expanded="true"]::after,
.stm-top__link.is-active::after,
.stm-top__trigger.is-active::after {
  /* Subrayado animado: aplicado también cuando el usuario está EN una
     sección/categoría que corresponde a este top-level (.is-active). */
  transform: scaleX(1);
}
/* Mismo motivo que en .stm-megamenu__tab span: el tema/CE puede pintar
   los <span> hijos con un color distinto. Forzamos herencia del button/a. */
.stm-top__link span,
.stm-top__trigger span {
  color: inherit !important;
}

.stm-icon {
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}

/* Imagen de categoría usada como icono: misma huella visual que .stm-icon
   (16-18px, sin afectar al baseline del texto). object-fit:contain para
   thumbs cuadrados de PrestaShop (small_default ≈ 98x98). */
.stm-icon-image {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  border-radius: 5px;
}
.stm-megamenu__flat .stm-icon-image {
  width: 22px;
  height: 22px;
}

/* Chevron del top-level — Font Awesome 6 (cargado por Creative Elements en
   font-awesome/css/solid.css). Reseteamos width/height del borde antiguo
   y nos quedamos sólo con la rotación animada al abrir el panel. */
.stm-chevron {
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
  transition: transform .25s var(--stm-ease);
}
.stm-top__trigger[aria-expanded="true"] .stm-chevron {
  transform: rotate(-135deg) translate(-1px, 2px);
}

/* ---------- MEGAMENU (desktop, full-width strip + container 1200) ------- */

.stm-megamenu {
  /* position: fixed para escapar de cualquier `overflow: hidden` de ancestros
     (Elementor section/column/widget). El `top` lo fija el JS al abrir el
     megamenu, calculando getBoundingClientRect().bottom de la nav. Así el
     panel siempre cubre el ancho total del viewport sin verse recortado. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* `max-height` lo recalcula el JS al abrir/scrollear (= viewport_height -
     top). Si JS no se ejecuta o aún no ha corrido, este 100vh inicial sirve
     de fallback razonable. `overflow-y: auto` activa la scrollbar interna
     cuando el contenido excede la altura disponible. `overscroll-behavior:
     contain` impide que el scroll "encadene" a la página de fondo cuando
     llegas al final del panel — sensación nativa de modal. */
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--stm-bg);
  border-top: 1px solid var(--stm-border);
  box-shadow: var(--stm-shadow-pop);
  z-index: var(--stm-z-mega);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .22s var(--stm-ease), transform .25s var(--stm-ease);
}
.stm-megamenu:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.stm-megamenu__inner {
  max-width: var(--stm-container);
  margin: 0 auto;
  padding: 28px 24px 36px;
  display: grid;
  gap: 32px;
  align-items: start;
}
/* Layout TABS: [tabs 240] [panes 1fr] [banner 300]. */
.stm-megamenu--tabs .stm-megamenu__inner {
  grid-template-columns: 240px 1fr 300px;
}
.stm-megamenu--tabs .stm-megamenu__inner:not(:has(.stm-megamenu__banner)) {
  grid-template-columns: 190px 1fr;
}
.stm-megamenu--tabs .stm-megamenu__inner:not(:has(.stm-megamenu__tabs)) {
  grid-template-columns: 1fr;
}

/* Layout FLAT: [lista 1fr] [banner 320].
   El banner se queda a la derecha (decisión del usuario). */
.stm-megamenu--flat .stm-megamenu__inner {
  grid-template-columns: 1fr 320px;
}
.stm-megamenu--flat .stm-megamenu__inner:not(:has(.stm-megamenu__banner)) {
  grid-template-columns: minmax(auto, 720px);
  justify-content: center;
}

/* --- columna izquierda: tabs verticales --- */

.stm-megamenu__tabs {
  list-style: none;
  margin: 0;
  padding: 8px 16px 8px 0;
  border-right: 1px solid var(--stm-border);
}
.stm-megamenu__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-radius: var(--stm-radius);
  color: var(--stm-fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s var(--stm-ease), color .2s var(--stm-ease), padding-left .2s var(--stm-ease);
}
.stm-megamenu__tab:hover {
  background: var(--stm-bg-soft);
  color: var(--stm-fg) !important;
  padding-left: 18px;
}
.stm-megamenu__tab.is-active {
  background: var(--stm-accent-soft);
  color: var(--stm-accent) !important;
  padding-left: 18px;
}
/* El tema/CE puede pintar el <span> interno con un color distinto al del
   <button> (ej. Creative Elements aplica colores a los hijos del widget).
   Forzamos herencia para que el color del estado activo/hover llegue al
   texto. Mismo patrón para las leaves del megamenu más abajo. */
.stm-megamenu__tab span {
  color: inherit !important;
}

/* --- columna central: items del 3er nivel --- */

.stm-megamenu__panes {
  min-height: 220px;
}
.stm-megamenu__pane[hidden] {
  display: none;
}

.stm-megamenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px 28px;
}
.stm-megamenu__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Padding lateral para que el background del hover tenga zona de respiro,
     mismo patrón que .stm-megamenu__flat a. */
  padding: 10px 16px;
  border-radius: var(--stm-radius);
  /* !important para no heredar el azul de `#header a` del tema. */
  color: var(--stm-fg-muted) !important;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background-color .15s var(--stm-ease), color .15s var(--stm-ease), transform .15s var(--stm-ease);
}
/* Hover idéntico al de las leaves del layout flat (Personalización):
   fondo gris suave + texto en azul accent + translateX(4px). */
.stm-megamenu__list a:hover,
.stm-megamenu__list a.is-active {
  background: var(--stm-bg-soft);
  color: var(--stm-accent) !important;
  text-decoration: none !important;
}
/* El shift es sólo para hover (interacción); el .is-active queda quieto
   como "estás aquí" — fontweight reforzado para subrayar el estado. */
.stm-megamenu__list a:hover {
  transform: translateX(4px);
}
.stm-megamenu__list a.is-active {
  font-weight: 600;
}

/* --- Layout FLAT: lista única de enlaces directos (sin tabs) --- */

.stm-megamenu__flat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
}
.stm-megamenu__flat li {
  margin: 0;
}
.stm-megamenu__flat a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--stm-radius);
  /* !important para anular `#header a { color: var(--color-blue) }` del tema. */
  color: var(--stm-fg) !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background-color .15s var(--stm-ease), color .15s var(--stm-ease), transform .15s var(--stm-ease);
}
.stm-megamenu__flat a:hover,
.stm-megamenu__flat a.is-active {
  background: var(--stm-bg-soft);
  color: var(--stm-accent) !important;
}
.stm-megamenu__flat a:hover {
  transform: translateX(4px);
}
.stm-megamenu__flat a.is-active {
  font-weight: 600;
}
.stm-megamenu__flat a span {
  color: inherit !important;
}
.stm-megamenu__flat .stm-icon {
  color: var(--stm-accent);
  font-size: 18px;
  flex: 0 0 auto;
}

/* --- Lista alfabética agrupada (Series y otros tabs con muchos items) ----
   Layout:
     · Search box sticky arriba (filtra items por substring, sin recargar).
     · Letras (A, B, C…) como secciones. Las secciones se reparten entre
       4 columnas CSS para aprovechar el ancho del megamenu y evitar el
       muro de texto en una sola columna larga.
     · column-span: all sobre el search hace que ocupe el ancho completo
       sin romper el flujo de columns.
   --------------------------------------------------------------------- */

.stm-megamenu__alpha {
  /* Multicolumn nativa de CSS: el navegador balancea las <section> entre
     columnas y mete saltos de columna entre secciones. break-inside: avoid
     en cada section evita partir un grupo de letra a medias. */
  column-count: 4;
  column-gap: 28px;
  column-fill: balance;
  padding-left: 12px;
  padding-right: 12px;
}

.stm-megamenu__alpha-tools {
  /* Ocupa el ancho completo del bloque columnizado. */
  column-span: all;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.stm-megamenu__alpha-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #a8a8a8;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--stm-fg);
  background: var(--stm-bg);
  transition: border-color .15s var(--stm-ease);
}
.stm-megamenu__alpha-input:focus {
  outline: none;
  border-color: var(--stm-accent);
}
.stm-megamenu__alpha-input::placeholder {
  color: #6b6b6b;
  font-weight: 300;
}

.stm-alpha-group {
  break-inside: avoid;        /* no partir un grupo entre dos columnas */
  margin: 0 0 16px;
}
.stm-alpha-group[hidden] { display: none; }

.stm-alpha-group__letter {
  margin: 0 0 8px;
  font-family: 'Unbounded', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--stm-accent);
  line-height: 1;
  border-bottom: 2px solid var(--stm-accent);
  display: inline-block;
  padding: 0 2px 4px;
  min-width: 24px;
}
.stm-alpha-group__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stm-alpha-group__items li { margin: 0; }
.stm-alpha-group__items li[hidden] { display: none; }
.stm-alpha-group__items a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  /* !important: el tema pinta `#header a { color: var(--color-blue); }` */
  color: var(--stm-fg-muted) !important;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  text-decoration: none !important;
  transition: color .12s var(--stm-ease), transform .12s var(--stm-ease);
}
.stm-alpha-group__items a:hover,
.stm-alpha-group__items a.is-active {
  color: var(--stm-accent) !important;
}
.stm-alpha-group__items a:hover {
  transform: translateX(4px);
}
.stm-alpha-group__items a.is-active {
  font-weight: 600;
}

.stm-megamenu__alpha-empty {
  column-span: all;
  margin: 24px 0;
  text-align: center;
  font-size: 14px;
  color: var(--stm-fg-soft);
  font-style: italic;
}

@media (max-width: 1199px) { .stm-megamenu__alpha { column-count: 3; } }
@media (max-width: 1025px) {
  .stm-megamenu__alpha { column-count: 1; padding-left: 0; padding-right: 0; }
  .stm-megamenu__alpha-tools { padding-bottom: 8px; }
  .stm-alpha-group__items a {
    padding: 10px 0;
    border-bottom: 1px dashed #ececec;
  }
}

.stm-megamenu__empty {
  font-size: 14px;
  color: var(--stm-fg-muted);
  padding: 16px 0;
}
.stm-megamenu__empty a {
  color: var(--stm-accent);
  font-weight: 600;
  text-decoration: none;
}
.stm-megamenu__empty a:hover {
  text-decoration: underline;
}

/* --- columna derecha: banner promocional --- */

.stm-megamenu__banner {
  display: block;
  border-radius: var(--stm-radius);
  overflow: hidden;
  position: relative;
  background: var(--stm-bg-soft);
  transition: transform .25s var(--stm-ease), box-shadow .25s var(--stm-ease);
}
.stm-megamenu__banner img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .4s var(--stm-ease);
}
.stm-megamenu__banner-text {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
}
.stm-megamenu__banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .15);
}
.stm-megamenu__banner:hover img {
  transform: scale(1.04);
}

/* ---------- BACKDROP del megamenu (eliminado) -------------------------
   Antes se pintaba un velo gris (.stm-menu::before, position:fixed inset:0
   con z-index 9990) cuando había un megamenu abierto. Problema: ese velo
   tapaba también el #header del tema (que no tiene z-index propio), haciendo
   que logo / búsqueda / carrito quedaran detrás de la cortina. Se ha
   eliminado — el megamenu por sí solo (con su propio fondo blanco) ya da
   suficiente foco visual sin oscurecer el resto.

   El atributo data-stm-open en .stm-menu se sigue toggleando desde JS por
   compatibilidad (otros hooks futuros podrían escucharlo). Si se quiere
   recuperar el velo de forma localizada (sin invadir el header), hacerlo
   con un <div> portaleado al body o con clip-path que excluya el header. */

/* ---------- HAMBURGER + DRAWER + BACKDROP (móvil) ---------------------- */

.stm-burger {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--stm-bar-fg);            /* hereda blanco; útil para accesibilidad/focus */
}
.stm-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--stm-bar-fg);       /* líneas blancas sobre el header azul */
  border-radius: 2px;
  transition: transform .25s var(--stm-ease), opacity .2s var(--stm-ease);
}
.stm-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.stm-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.stm-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.stm-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: var(--stm-z-drawer);
  opacity: 0;
  transition: opacity .25s var(--stm-ease);
}
.stm-backdrop.is-open {
  display: block;
  opacity: 1;
}

/* Con el drawer del menú abierto (móvil), ocultar elementos flotantes de otros
   módulos que quedarían por encima del drawer (z-index altísimo): el botón
   sticky "Filtrar" de amazzingfilter y el botón flotante de WhatsApp.
   JS añade .stm-drawer-open al <body> al abrir el drawer. */
body.stm-drawer-open .compact-toggle.sticky,
body.stm-drawer-open .asagiSabit.whatsappBlock {
  display: none !important;
}

.stm-drawer-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: var(--stm-fg);
  border-radius: 50%;
  transition: background-color .15s var(--stm-ease);
}
.stm-drawer-close:hover {
  background: var(--stm-bg-soft);
}

/* Logo del drawer — oculto en desktop; en móvil arriba a la izquierda. */
.stm-drawer-logo {
  display: none;
}
.stm-drawer-logo img {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 5px;
}

/* Enlaces extra + botón WhatsApp del drawer — sólo móvil (display:block en el
   media query <=1025px). */
.stm-drawer-extra {
  display: none;
}

/* ---------- MOBILE (<=1025px): off-canvas drawer ---------------------- */

@media (max-width: 1025px) {
  .stm-burger {
    display: inline-flex;
  }

  .stm-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 380px);
    background: var(--stm-bg);
    z-index: calc(var(--stm-z-drawer) + 1);
    transform: translateX(-100%);
    transition: transform .3s var(--stm-ease);
    overflow-y: auto;
    box-shadow: 8px 0 30px rgba(0, 0, 0, .15);
    padding: 90px 0 32px;
  }
  .stm-drawer.is-open {
    transform: translateX(0);
  }
  .stm-drawer-close {
    display: block;
  }
  /* Logo arriba a la izquierda del drawer (alineado con el botón cerrar). */
  .stm-drawer-logo {
    display: block;
    position: absolute;
    top: 14px;
    left: 16px;
    line-height: 0;
    z-index: 1;
  }

  /* Atención al cliente: separado de los items del menú con espacio + línea. */
  .stm-drawer-extra {
    display: block;
    margin-top: 24px;
    padding-top: 20px;
  }
  .stm-drawer-extra-title {
    margin: 0;
    padding: 0 24px 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--stm-fg-soft);
  }
  .stm-drawer-link {
    display: block;
    padding: 16px 24px;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    color: var(--stm-fg) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--stm-border);
  }
  .stm-drawer-link:hover {
    color: var(--stm-accent) !important;
    background: var(--stm-bg-soft);
  }
  /* Teléfonos (fijo / móvil) — fila con icono. */
  .stm-drawer-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    color: var(--stm-fg) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--stm-border);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
  }
  .stm-drawer-phone:hover {
    color: var(--stm-accent) !important;
    background: var(--stm-bg-soft);
  }
  .stm-drawer-phone-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--stm-accent);
  }
  .stm-drawer-phone-text strong {
    font-weight: 600;
  }
  .stm-drawer-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 24px;
    padding: 13px 16px;
    background: #25d366;
    color: #ffffff !important;
    border-radius: 5px;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background-color .15s var(--stm-ease);
  }
  .stm-drawer-wa:hover {
    background: #1ebe5b;
  }
  .stm-drawer-wa-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  /* Backdrop del megamenu (::before) eliminado más arriba; mantenemos
     el display:none por defensa por si alguien lo recupera en el futuro
     sin tener en cuenta móvil. */
  .stm-menu::before {
    display: none;
  }

  .stm-top {
    flex-direction: column;
    gap: 0;
  }
  .stm-top__item {
    border-bottom: 1px solid var(--stm-border);
  }
  /* Dentro del drawer mobile el contexto es panel blanco, así que los items
     vuelven a texto oscuro (no los blancos de la barra del header azul).
     !important para anular `#header a { color: var(--color-blue) }` del tema. */
  .stm-top__link,
  .stm-top__trigger {
    width: 100%;
    padding: 18px 24px;
    justify-content: space-between;
    /* En móvil los items de nivel 1 más grandes, con Unbounded y peso 500.
       !important para ganar a `body.ce-kit-1 a { font-family: 'Poppins' }`. */
    font-family: 'Unbounded', sans-serif !important;
    font-size: 17px;
    font-weight: 500;
    color: var(--stm-fg) !important;
    background: transparent;
  }
  .stm-top__link:hover,
  .stm-top__trigger:hover,
  .stm-top__trigger[aria-expanded="true"] {
    color: var(--stm-accent) !important;
    background: var(--stm-bg-soft);
  }
  /* Item abierto: barra azul de marca a la izquierda (jerarquía/estado). */
  .stm-top__trigger[aria-expanded="true"] {
    box-shadow: inset 4px 0 0 var(--stm-accent);
  }
  .stm-top__link::after,
  .stm-top__trigger::after {
    display: none;
  }
  .stm-top__trigger .stm-chevron {
    margin-left: auto;
  }

  /* Megamenu en mobile: in-flow, acordeón.
     IMPORTANTE: reseteamos max-height/overflow/overscroll-behavior que vienen
     del desktop (línea ~195). Si los dejamos puestos, el panel del megamenu
     dentro del drawer absorbe TODO el scroll/touch (su propia scrollbar
     interna + overscroll-behavior: contain bloquea el scroll-chaining), y el
     usuario no puede deslizar dentro del drawer para llegar a los items
     siguientes (Personalización, Empresa, Contacto…) — el panel "atrapa" el
     dedo. En mobile el drawer es quien scrollea, no cada megamenu por
     separado. */
  .stm-megamenu {
    position: static;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    background: var(--stm-bg-soft);
    border-top: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
  .stm-megamenu[hidden] {
    display: none;
  }
  .stm-megamenu__inner {
    display: block;
    padding: 8px 0 16px;
    gap: 0;
  }
  .stm-megamenu__tabs {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--stm-border);
    margin: 0px 10px;
    padding: 8px 16px 12px;
    padding-top: 0px;
    gap: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .stm-megamenu__tab {
    white-space: nowrap;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 16px;
    background: var(--stm-bg);
    border: 1px solid var(--stm-border);
    border-radius: var(--stm-radius-pill);
    font-size: 13px;
  }
  .stm-megamenu__tab.is-active {
    background: var(--stm-accent);
    border-color: var(--stm-accent);
    /* !important obligatorio: la regla desktop `.stm-megamenu__tab.is-active
       { color: var(--stm-accent) !important }` (línea ~289) gana por
       especificidad si esta no lo lleva, dejando el texto del tab activo en
       azul SOBRE fondo azul (ilegible). Con !important el blanco se aplica
       al button y el <span> hijo lo hereda vía `color: inherit !important`. */
    color: #ffffff !important;
  }
  .stm-megamenu__tab:hover {
    padding: 10px 16px; /* anular el shift de hover desktop */
  }

  .stm-megamenu__panes {
    padding: 8px 24px;
    min-height: 0;
  }
  .stm-megamenu__list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .stm-megamenu__list a {
    padding: 14px 2px;
    border-radius: 0;
    border-bottom: 1px solid var(--stm-border);
    font-size: 14.5px;
  }
  /* En mobile no hay shift de hover (drawer in-flow). */
  .stm-megamenu__list a:hover {
    background: transparent;
    transform: none;
  }

  /* Layout flat en mobile: lista vertical en el drawer. */
  .stm-megamenu__flat {
    grid-template-columns: 1fr;
    padding: 8px 16px;
  }
  .stm-megamenu__flat a {
    padding: 14px 12px;
    border-bottom: 1px solid var(--stm-border);
    border-radius: 0;
    font-size: 14px;
  }
  .stm-megamenu__flat a:hover {
    transform: none;     /* anula el shift desktop */
  }

  .stm-megamenu__banner {
    display: none;
  }
}