/* Menú principal desplegable: se abre al pasar el mouse, al enfocar con teclado o al tocar. Sirve para .site-header y .boxcar-header */
.site-header nav ul, .header-nav ul { align-items: center; }
.has-menu { position: relative; }
.has-menu > a { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem 0; }
.menu-flecha { font-size: .6rem; opacity: .65; transition: transform .2s; }
.has-menu:hover .menu-flecha, .has-menu:focus-within .menu-flecha, .has-menu.abierto .menu-flecha { transform: rotate(180deg); }

.menu-panel {
  position: absolute; top: 100%; left: -1rem; z-index: 1100; min-width: 260px;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
  padding: 1.1rem 1.25rem .9rem; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* puente: el menú no se cierra al bajar el mouse */
.has-menu:hover > .menu-panel, .has-menu:focus-within > .menu-panel, .has-menu.abierto > .menu-panel { opacity: 1; visibility: visible; transform: none; }
.menu-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 1.75rem; }
.menu-col { display: flex; flex-direction: column; gap: .15rem; }
.menu-titulo { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; margin-bottom: .35rem; }
.site-header nav .menu-panel a, .header-nav .menu-panel a { display: block; padding: .38rem .5rem; margin: 0 -.5rem; border-radius: 8px; font-size: .88rem; font-weight: 500; color: #334155; white-space: nowrap; }
.site-header nav .menu-panel a:hover, .header-nav .menu-panel a:hover { background: #F1F5F9; color: var(--color-primary, #E8590C); }
.site-header nav .menu-panel .menu-todo, .header-nav .menu-panel .menu-todo { margin: .8rem 0 0; padding: .6rem 0 0; border-top: 1px solid #E2E8F0; border-radius: 0; font-weight: 700; color: var(--color-primary, #E8590C); }
.site-header nav .menu-panel .menu-todo:hover, .header-nav .menu-panel .menu-todo:hover { background: none; text-decoration: underline; }
.has-menu:nth-last-child(-n+2) > .menu-panel { left: auto; right: -1rem; }
.has-menu:first-child > .menu-panel { left: -1rem; right: auto; }
/* Menús con 3 o más columnas: panel a todo el ancho de la cabecera */
.has-menu.ancho { position: static; }
.has-menu.ancho > .menu-panel { left: 1.5rem; right: 1.5rem; min-width: 0; }
.has-menu.ancho > .menu-panel .menu-cols { grid-auto-columns: 1fr; max-width: 1100px; margin: 0 auto; }
.site-header nav .has-menu.ancho > .menu-panel .menu-todo, .header-nav .has-menu.ancho > .menu-panel .menu-todo { max-width: 1100px; margin-left: auto; margin-right: auto; }

@media (max-width: 768px) {
  /* En el menú del celular las páginas se ven en lista, agrupadas bajo cada sección */
  .menu-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: .25rem 0 .25rem .9rem; min-width: 0; display: none; }
  .has-menu.abierto > .menu-panel { display: block; }
  .has-menu:hover > .menu-panel, .has-menu:focus-within > .menu-panel { display: none; }
  .has-menu.abierto > .menu-panel { display: block !important; }
  .menu-cols { grid-auto-flow: row; gap: .75rem; }
  .menu-panel::before { display: none; }
  .site-header nav .menu-panel a { white-space: normal; }
}