/* Menú tipo "sándwich" (hamburguesa) — se aplica en pantallas de hasta 768 px */

/* El botón no existe visualmente en escritorio */
.menu-toggle { display: none; }
.site-header .wrap { position: relative; }

@media (max-width: 768px) {
  .site-title { display: inline-block; max-width: calc(100% - 60px); }

  /* Botón (las 3 rayitas) arriba a la derecha */
  .menu-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 0; right: var(--gutter);
    width: 44px; height: 44px; padding: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  }
  .menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .menu-toggle .bars,
  .menu-toggle .bars::before,
  .menu-toggle .bars::after { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, background .2s; }
  .menu-toggle .bars { position: relative; }
  .menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; }
  .menu-toggle .bars::before { top: -7px; }
  .menu-toggle .bars::after  { top: 7px; }
  /* Se convierte en una X al abrir */
  .menu-toggle.is-open .bars { background: transparent; }
  .menu-toggle.is-open .bars::before { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.is-open .bars::after  { transform: translateY(-7px) rotate(-45deg); }

  /* El menú queda oculto hasta tocar el botón */
  .site-nav { display: none; margin-top: 14px; }
  .site-nav.open { display: block; }
  .menu { flex-direction: column; gap: 0; }
  .menu > li { border-top: 1px solid var(--line); }
  .menu > li > a { display: block; padding: 13px 4px; font-size: 1rem; }

  /* Submenú "Categorías": se despliega dentro del menú con un toque */
  .has-sub { width: 100%; }
  .has-sub:hover > .sub, .has-sub:focus-within > .sub { display: none; }
  .has-sub.open > .sub { display: block; }
  .sub { position: static; min-width: 0; margin: 0 0 8px 12px; padding: 0; background: transparent; border: 0; border-left: 2px solid var(--line); border-radius: 0; box-shadow: none; }
  .sub a { padding: 11px 14px; }
}