/* Miru — nav compartida: desplegables en escritorio, hoja en móvil.
   El aspecto vive en estilos inline; aquí solo lo que no puede ir inline
   (estados de hover/apertura y el cambio por ancho). */

[data-menu] > [data-panel] {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
[data-menu]:hover > [data-panel],
[data-menu]:focus-within > [data-panel] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

[data-mobile-menu] { display: none; }
[data-mobile-menu] > summary { list-style: none; cursor: pointer; }
[data-mobile-menu] > summary::-webkit-details-marker { display: none; }
[data-mobile-menu][open] > summary [data-burger-open] { display: none; }
[data-mobile-menu]:not([open]) > summary [data-burger-close] { display: none; }

@media (max-width: 900px) {
  [data-nav-links] { display: none !important; }
  [data-mobile-menu] { display: block !important; }
}

/* punteros sin hover (táctiles de cualquier tamaño): la nav usa la hoja de
   hamburguesa, porque un desplegable por hover ahí no se puede abrir */
@media (hover: none) {
  [data-nav-links] { display: none !important; }
  [data-mobile-menu] { display: block !important; }
}