/* ============================================================================
   Menú «Precios y modelos» con categorías (02-oct-2026) — compartido por TODAS las páginas de Ensutex
   Lo pidió Carlitos el 02-oct: que el texto sea un enlace al catálogo y que el desplegable traiga solo las categorías de producto,
   con miniatura. Se sacó de catalogo-02oct.css para que el inicio, el catálogo y las guías muestren el mismo menú.
   Carga al final del <head> y todo lleva el prefijo `html body:not(.mf):not(.rx)` (marca.css y ux-refresh.css fuerzan casi todo con
   !important). Tipografía solo por token (--mk-display / --mk-body); movimiento solo transform y opacity.
   ============================================================================ */

/* ============================== 1 · MENÚ DE ESCRITORIO ============================== */
/* «Precios y modelos» es un enlace (lleva al héroe del catálogo, con todos los productos) y el chevron es un botón
   aparte que abre el desplegable (también al pasar el mouse, como siempre). El desplegable solo trae categorías. */
html body:not(.mf):not(.rx) .ens-nav-catalogo {
  display: inline-flex; align-items: center; border-radius: 999px;
  transition: background-color .2s var(--mk-curva);
}
html body:not(.mf):not(.rx) .ens-nav-catalogo:hover,
html body:not(.mf):not(.rx) .ens-nav-catalogo:focus-within,
html body:not(.mf):not(.rx) .ens-nav-catalogo.is-open { background: #ffffff; }
html body:not(.mf):not(.rx) .ensutex-nav-menu > .ens-nav-catalogo > a.ens-nav-catalogo__link {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
  padding: 10px 2px 10px 14px !important; background: transparent !important; border-radius: 999px 0 0 999px !important;
}
html body:not(.mf):not(.rx) .ens-nav-catalogo__flecha {
  display: inline-flex; align-items: center; justify-content: center; align-self: stretch; flex: 0 0 44px;
  min-width: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 0 999px 999px 0; background: transparent;
  color: var(--mk-ink-2); cursor: pointer;
}
html body:not(.mf):not(.rx) .ens-nav-catalogo__flecha .nav-chevron { margin: 0 0 3px; transition: transform .2s var(--mk-curva); }
html body:not(.mf):not(.rx) .ens-nav-catalogo:hover .nav-chevron,
html body:not(.mf):not(.rx) .ens-nav-catalogo.is-open .nav-chevron { transform: rotate(225deg); margin-bottom: -2px; }
html body:not(.mf):not(.rx) .ens-nav-catalogo__flecha:focus-visible { outline: 3px solid #87CEEB; outline-offset: -3px; }

/* El panel se posiciona y se muestra con CSS propio: en el inicio las utilidades de Tailwind (top-full, -translate-x-1/2,
   group-hover:…) cargan diferidas y, hasta que llegan, el panel caía fuera de lugar. */
html body:not(.mf):not(.rx) .ens-nav-catalogo { position: relative; }
html body:not(.mf):not(.rx) .ens-nav-categorias {
  position: absolute; left: 50%; top: 100%; z-index: 50; transform: translateX(-50%);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .2s var(--mk-curva), visibility .2s var(--mk-curva);
  width: 304px; margin-top: 12px; padding: 8px; box-sizing: border-box;
}
html body:not(.mf):not(.rx) .ens-nav-catalogo:hover > .ens-nav-categorias,
html body:not(.mf):not(.rx) .ens-nav-catalogo:focus-within > .ens-nav-categorias {
  visibility: visible; opacity: 1; pointer-events: auto;
}
/* puente invisible sobre el hueco de 12 px: el mouse puede bajar del enlace al panel sin que se cierre */
html body:not(.mf):not(.rx) .ens-nav-categorias::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
html body:not(.mf):not(.rx) .ens-nav-catalogo.is-open > .ens-nav-categorias {
  visibility: visible; opacity: 1; pointer-events: auto;
}
html body:not(.mf):not(.rx) .ens-nav-categorias ul,
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-menu ul { list-style: none; margin: 0; padding: 0; }
html body:not(.mf):not(.rx) .ens-nav-categorias a.ens-nav-categoria,
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-menu a.ens-nav-categoria {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 10px; box-sizing: border-box;
  border: 0 !important; border-radius: 14px !important; text-align: left; text-decoration: none;
  color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; background: transparent !important;
  font-family: var(--mk-body) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.2; letter-spacing: -.01em;
  transition: background-color .15s var(--mk-curva);
}
html body:not(.mf):not(.rx) .ens-nav-categorias a.ens-nav-categoria:hover,
html body:not(.mf):not(.rx) .ens-nav-categorias a.ens-nav-categoria:focus-visible,
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-menu a.ens-nav-categoria:hover,
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-menu a.ens-nav-categoria:focus-visible { background: var(--mk-bg) !important; }
html body:not(.mf):not(.rx) .ens-nav-categoria a:focus-visible,
html body:not(.mf):not(.rx) a.ens-nav-categoria:focus-visible { outline: 3px solid #87CEEB; outline-offset: -3px; }
/* la miniatura va sobre el negro de marca, igual que la foto en la tarjeta: la prenda blanca se lee y no hay rectángulo */
html body:not(.mf):not(.rx) .ens-nav-categoria__img {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--mk-negro);
}
html body:not(.mf):not(.rx) .ens-nav-categoria__img img { width: 40px; height: 40px; object-fit: contain; }

/* ============================== 2 · MENÚ DEL CELULAR ============================== */
/* Un solo acordeón: la fila lleva el enlace «Precios y modelos» (que va al héroe) y, aparte, el botón del chevron (44 px o más)
   que abre y cierra las categorías. Tocar el texto nunca abre el acordeón; tocar el chevron nunca navega. */
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-head {
  display: flex; align-items: stretch; background: #ffffff; border: 1px solid var(--mk-line); border-radius: 14px; overflow: hidden;
}
html body:not(.mf):not(.rx) #mobileDrawer a.mobile-catalog-link {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: 52px; padding: 0 16px; box-sizing: border-box;
  color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; background: transparent !important;
  font-family: var(--mk-body) !important; font-size: 17px; font-weight: 600; text-decoration: none;
}
html body:not(.mf):not(.rx) #mobileDrawer button.mobile-catalog-primary {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; min-height: 52px; padding: 0; margin: 0;
  border: 0 !important; border-left: 1px solid var(--mk-line) !important; border-radius: 0 !important; background: transparent !important;
  color: var(--mk-ink) !important; cursor: pointer;
}
html body:not(.mf):not(.rx) #mobileDrawer button.mobile-catalog-primary:focus-visible { outline: 3px solid #87CEEB; outline-offset: -3px; }
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-chevron {
  display: block; width: 10px; height: 10px; margin: -4px 0 0; border: solid var(--mk-ink); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform .22s var(--mk-curva); position: static;
}
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-accordion.is-open .mobile-catalog-chevron { transform: rotate(225deg); margin-top: 4px; }
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-menu {
  margin-top: 8px; padding: 8px; background: var(--mk-bg); border: 1px solid var(--mk-line); border-radius: 14px; overflow: hidden;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .22s var(--mk-curva), transform .22s var(--mk-curva);
}
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-accordion.is-open .mobile-catalog-menu { opacity: 1; transform: none; }
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-menu[hidden] { display: none; }
/* con el drawer abierto en 360×740 todo cabe: 7 filas de 56 px + la fila del acordeón + guías + el botón; si no cabe, el
   cajón se desplaza (no se corta) */
html body:not(.mf):not(.rx) #mobileDrawer { max-height: calc(100svh - 84px) !important; overflow-y: auto !important; overscroll-behavior: contain; }