/* Componente MENU — botón hamburguesa (se anima a X) + panel desplegable
   agrupado en Navegación / Legal e institucional, con iconos */
.menu{
  position:relative;
  display:flex;
  justify-content:center;
  margin-top:.9rem;
}

.menu__boton{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(190,227,245,0.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, border-color .2s ease;
}
.menu__boton:hover{ background:rgba(190,227,245,0.18); }
.menu__boton:focus-visible{
  outline:3px solid #FFFFFF;
  outline-offset:3px;
}

.menu__linea{
  width:18px;
  height:2px;
  background:#FFFFFF;
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
/* Al abrir, las 3 líneas se transforman en una X */
.menu__boton--abierto .menu__linea:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu__boton--abierto .menu__linea:nth-child(2){ opacity:0; }
.menu__boton--abierto .menu__linea:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.menu__panel{
  position:absolute;
  top:calc(100% + .6rem);
  left:50%;
  width:max-content;
  min-width:15.5rem;
  display:flex;
  flex-direction:column;
  padding:.6rem;
  background:rgba(11,12,16,0.85);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:14px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 14px 36px rgba(0,0,0,.45);
  z-index:15;
  /* estado cerrado: invisible pero listo para animar */
  opacity:0;
  transform:translate(-50%, -8px) scale(.97);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.menu__panel--abierto{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
  pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
  .menu__panel, .menu__linea{ transition:none; }
}

/* Encabezados de grupo, tipo "Navegación" / "Legal e institucional" */
.menu__grupoTitulo{
  font-family:"Atkinson Hyperlegible", system-ui, sans-serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(190,227,245,0.65);
  padding:.5rem .75rem .3rem;
}
.menu__grupoTitulo--conBorde{
  margin-top:.3rem;
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:.7rem;
}

.menu__enlace{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.62rem .75rem;
  font-family:"Atkinson Hyperlegible", system-ui, sans-serif;
  font-size:.88rem;
  color:#FFFFFF;
  text-decoration:none;
  border-radius:9px;
  -webkit-tap-highlight-color:transparent;
}
.menu__enlace:hover{ background:rgba(255,255,255,0.08); }
.menu__enlace:focus-visible{
  outline:2px solid #BEE3F5;
  outline-offset:-2px;
}
.menu__enlaceIcono{
  flex-shrink:0;
  width:1.1rem;
  text-align:center;
  font-size:.85rem;
  color:#BEE3F5;
}
svg.menu__enlaceIcono{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}