/* ============================================
   MEGAMENÚ DE EQUIPOS
   Datos/render: includes/megamenu.php · Vista: template-parts/megamenu.php
   JS: js/megamenu.js
   Desktop: secciones desplegables (usados / nuevos) con sus familias a la
   izquierda + categorías de la familia activa a la derecha.
   Mobile (≤768px, SANTOLIQUIDO_MEGAMENU_BREAKPOINT): hoja a pantalla
   completa con acordeón.

   Usa los tokens del sistema de diseño (style.css :root). Las únicas
   variables propias son de layout del componente (--sl-mm-*).
   ============================================ */

.sl-mm {
  --sl-mm-top: 140px;               /* lo recalcula el JS con el alto real del header */
  --sl-mm-icon: var(--icon-size);
  display: inline-block;
}

/* Con el panel abierto el header queda arriba de todo y opaco
   (footer.php le baja la opacidad al hacer scroll).
   9100: debajo del popup de salida (9150/9200). */
html.sl-mm-open header {
  z-index: 9100 !important;
  opacity: 1 !important;
}

/* El tema fuerza `* { font-family: Kanit }`: el panel usa la tipografía
   del sistema (mismo patrón que .ep2-popup). El botón "Equipos" queda con
   la tipografía de la barra (css/menu.css). */
.sl-mm__panel,
.sl-mm__panel *:not([class^="fa"]):not([class*=" fa"]) { /* sin pisar los íconos de Font Awesome */
  font-family: var(--font-primary);
}

.sl-mm ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sl-mm a {
  padding: 0; /* anula `nav a { padding: 0 15px 20px }` de style.css */
  text-decoration: none;
  text-align: left;
}

.sl-mm a:focus-visible,
.sl-mm button:focus-visible {
  outline: 2px solid var(--color-safety);
  outline-offset: 2px;
}

/* ---------- Flechas de abrir/cerrar ----------
   Ícono --icon-chevron-down del sistema, tamaño --icon-size (24px). */
.sl-mm__caret,
.sl-mm__section-btn::after,
.sl-mm__fam-btn::after {
  content: "";
  flex: none;
  display: inline-block;
  width: var(--sl-mm-icon);
  height: var(--sl-mm-icon);
  background-color: currentColor;
  -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
  mask: var(--icon-chevron-down) center / contain no-repeat;
  transition: transform var(--transition-fast);
}

.sl-mm__trigger[aria-expanded="true"] .sl-mm__caret,
.sl-mm__section-btn[aria-expanded="true"]::after,
.sl-mm__fam-btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* ---------- Botón "Equipos" de la barra ----------
   Tipografía, color y padding: los de la barra (css/menu.css). */
.cbp-hrmenu > ul > li > .sl-mm__trigger {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---------- Panel (desktop) ---------- */
.sl-mm__panel {
  position: fixed;
  z-index: 100; /* sobre los links del nav, que tienen position */
  left: 0;
  right: 0;
  top: var(--sl-mm-top);
  max-height: calc(100vh - var(--sl-mm-top));
  overflow-y: auto;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.sl-mm__panel[hidden] {
  display: none;
}

.sl-mm__bar {
  display: none;
}

/* Grilla: col 1 = títulos de sección + botones de familia (una fila cada uno),
   col 2 = categorías de la familia activa, col 3 = links secundarios.
   La última fila (1fr) absorbe la altura de la lista para que las filas
   de la columna 1 no se estiren. --sl-mm-rows lo calcula el template. */
.sl-mm__body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 230px;
  grid-template-rows: repeat(var(--sl-mm-rows), auto) 1fr;
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
}

.sl-mm__section,
.sl-mm__section-list,
.sl-mm__fam {
  display: contents;
}

/* Título desplegable de sección: encabezado de grupo. Su línea de abajo
   (--color-mid-grey) es un tono más marcada que la de las familias
   (--color-border-grey), sutil pero distinguible. El texto de
   14px le da más presencia que su flecha, sin pasar a las familias. */
.sl-mm__section-btn {
  grid-column: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-mid-grey);
  text-align: left;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-primary);
  cursor: pointer;
}

.sl-mm__section-btn::after {
  margin-left: auto;
}

.sl-mm__section-btn:hover {
  background: var(--color-light-grey);
}

.sl-mm__section + .sl-mm__section .sl-mm__section-btn {
  margin-top: var(--spacing-lg); /* separa los grupos: "Equipos nuevos" no se lee como un ítem más */
}

/* Sección cerrada: se ocultan sus familias. Si la familia seleccionada
   está adentro, sus categorías siguen visibles a la derecha. */
.sl-mm__section-btn[aria-expanded="false"] + .sl-mm__section-list .sl-mm__fam-btn {
  display: none;
}

.sl-mm__fam-btn {
  grid-column: 1;
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border-grey);
  text-align: left;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--color-secondary);
  cursor: pointer;
}

/* En desktop la familia se selecciona (no se despliega): sin flecha. */
.sl-mm__fam-btn::after {
  display: none;
}

.sl-mm__fam-btn:hover {
  background: var(--color-light-grey);
}

.sl-mm__fam-btn[aria-expanded="true"] {
  color: var(--color-primary);
  box-shadow: inset 0 -3px 0 var(--color-safety);
}

.sl-mm__cats {
  grid-column: 2;
  grid-row: 1 / -1;
  display: none;
  margin-left: var(--spacing-lg);
  padding: var(--spacing-sm) 0 0 var(--spacing-xl);
  border-left: 1px solid var(--color-border-grey);
}

.sl-mm__fam-btn[aria-expanded="true"] + .sl-mm__cats {
  display: block;
}

.sl-mm .sl-mm__see-all {
  display: inline-block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-primary);
}

.sl-mm .sl-mm__see-all:hover {
  text-decoration: underline;
}

.sl-mm__list {
  columns: 3 190px;
  column-gap: var(--spacing-lg);
}

.sl-mm__list li {
  break-inside: avoid;
}

.sl-mm__list a {
  display: block;
  padding: var(--spacing-xs) 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-secondary);
}

.sl-mm__list a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.sl-mm__aside {
  grid-column: 3;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-left: var(--spacing-lg);
  padding: var(--spacing-sm) 0 0 var(--spacing-lg);
  border-left: 1px solid var(--color-border-grey);
}

.sl-mm__aside-note {
  margin: 0;
  padding: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  text-align: left;
  color: var(--color-secondary);
}

.sl-mm .sl-mm__wa {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-whatsapp);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-white);
}

.sl-mm .sl-mm__wa:hover {
  background: var(--color-whatsapp-hover);
}

@media (max-width: 1100px) {
  .sl-mm__body {
    grid-template-columns: 260px minmax(0, 1fr) 200px;
  }
}

/* ---------- Mobile: hoja a pantalla completa + acordeón ----------
   Los tamaños en px son mayores que los del sistema porque el sitio usa
   initial-scale=0.6 (header.php): en el celular todo se ve al 60%.
   Ej.: 40px CSS ≈ 24px reales. */
@media (max-width: 768px) {
  .sl-mm {
    --sl-mm-icon: calc(var(--icon-size) / .6);
    display: block;
  }

  /* En mobile el panel se abre desde el menú ☰ (nivel 1), no desde la barra. */
  .cbp-hrmenu > ul > li > .sl-mm__trigger {
    display: none;
  }

  /* Nivel 2 del menú mobile: arranca debajo de la barra (js/menu-mobile.js). */
  .sl-mm__panel {
    inset: 0;
    top: var(--sl-mnav-top, 0px);
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;
  }

  .sl-mm__panel[hidden] {
    display: none;
  }

  /* "← Equipos": vuelve al nivel 1 (como "← Productos" en cat.com). */
  .sl-mm__bar {
    display: block;
    border-bottom: 1px solid var(--color-mid-grey);
  }

  .sl-mm__back {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 92px; /* ≈ 55px reales */
    padding: 0 28px;
    background: none;
    border: 0;
    font-size: 22px; /* ≈ 13px reales */
    font-weight: 400;
    text-align: left;
    color: var(--color-primary);
    cursor: pointer;
  }

  .sl-mm__back svg {
    flex: none;
    width: var(--sl-mm-icon);
    height: var(--sl-mm-icon);
  }

  .sl-mm__body {
    flex: 1;
    display: block;
    overflow-y: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .sl-mm__section,
  .sl-mm__section-list {
    display: block;
  }

  .sl-mm__section-btn {
    min-height: 72px;
    padding: 18px 16px;
    font-size: 20px; /* ≈ 12px reales */
    background: var(--color-light-grey);
    border-bottom: 1px solid var(--color-mid-grey);
  }

  .sl-mm__section + .sl-mm__section .sl-mm__section-btn {
    margin-top: 0;
  }

  .sl-mm__section-btn[aria-expanded="false"] + .sl-mm__section-list {
    display: none;
  }

  .sl-mm__fam {
    display: block;
    border-left: 4px solid transparent;
    border-bottom: 1px solid var(--color-border-grey);
  }

  .sl-mm__fam.is-current {
    border-left-color: var(--color-safety);
  }

  .sl-mm__fam-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 12px 16px 12px 28px; /* sangría: las familias están adentro de la sección */
    border-bottom: 0;
    font-size: 21px;
    font-weight: 400;
    color: var(--color-secondary);
  }

  .sl-mm__fam-btn[aria-expanded="true"],
  .sl-mm__fam.is-current .sl-mm__fam-btn {
    color: var(--color-primary);
  }

  .sl-mm__fam-btn::after {
    display: inline-block;
    margin-left: auto;
  }

  .sl-mm__fam-btn[aria-expanded="true"] {
    box-shadow: none;
  }

  .sl-mm__cats {
    margin: 0;
    padding: 0 16px 14px 44px;
    border-left: 0;
  }

  .sl-mm .sl-mm__see-all {
    display: block;
    margin: 0;
    padding: 14px 0;
    font-size: 19px;
  }

  .sl-mm__list {
    columns: auto;
  }

  .sl-mm__list a {
    padding: 14px 0;
    font-size: 20px;
  }

  .sl-mm__aside {
    position: sticky;
    bottom: 0;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    border-left: 0;
    border-top: 1px solid var(--color-border-grey);
    background: var(--color-light-grey);
  }

  .sl-mm__aside-note {
    margin: 4px 0 0;
    font-size: 17px;
    text-align: center;
  }

  .sl-mm .sl-mm__wa {
    justify-content: center;
    min-height: 64px;
    margin-top: 6px;
    font-size: 20px;
  }

  html.sl-mm-open,
  html.sl-mm-open body {
    overflow: hidden;
  }
}

/* Alto contraste (Windows): las flechas usan el color del sistema. */
@media (forced-colors: active) {
  .sl-mm__caret,
  .sl-mm__section-btn::after,
  .sl-mm__fam-btn::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-mm__caret,
  .sl-mm__section-btn::after,
  .sl-mm__fam-btn::after {
    transition: none;
  }
}