/* =========================================================
   MENÚ DESPLEGABLE
   LedLab — landing. Editar SOLO lo de esta sección acá.
   ---------------------------------------------------------
   Panel a pantalla completa que cubre todo (incluido el fondo del
   header, que queda por encima con su z-index 100). Se abre desde el
   botón .menu-toggle; la lógica está en js/main.js.
   ========================================================= */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--color-panel);
  display: flex;
  align-items: center;
  /* Cerrado: fuera de pantalla a la derecha (el botón que lo abre está
     arriba a la derecha, así que entra desde ese lado). Sin opacidad: es
     un slide, no un desvanecimiento.
     No usamos el atributo hidden porque corta las transiciones; con
     visibility el panel además sale del orden de tabulación mientras
     está cerrado. La transición de visibility hace que al cerrar el
     panel siga visible durante todo el slide y recién ahí desaparezca. */
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.5s cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0.5s;
}
.menu.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.menu__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-columns);
  align-items: center;
  width: 100%;
  /* Solo el alto del header: sin aire extra, para que los items no queden
     lejos del logo. */
  padding-top: var(--header-h);
}
@media (min-width: 1025px) {
  .menu__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------------------------
   LISTA DE SECCIONES
   6 enlaces internos. En reposo son --color-5; en hover el texto se
   corre a la derecha, aparece un cuadrado en el lugar que dejó libre
   y el color pasa al claro de la marca.
   El texto va dentro de un <span> para poder moverlo con transform
   (lo hace la GPU) sin arrastrar el cuadrado, que está absoluto.
   --------------------------------------------------------- */
.menu__nav {
  display: flex;
  flex-direction: column;
}

.menu__link {
  position: relative;
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: clamp(2rem, 3.6vw, 4.5rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--color-5);

  /* Entrada escalonada + hover instantáneo.
     Las propiedades van listadas una por una a propósito: el
     transition-delay del escalonado se aplica SOLO a opacity y transform.
     Si se usara el atajo `transition` con un delay único, ese delay
     también valdría para color y el hover del último item tardaba medio
     segundo en cambiar de color. El color va con duración 0s: instantáneo. */
  opacity: 0;
  transform: translateX(1.4rem);
  transition-property: color, opacity, transform;
  transition-duration: 0s, 0.45s, 0.45s;
  transition-timing-function: linear, ease, cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0s, 0s, 0s;
}
.menu.is-open .menu__link {
  opacity: 1;
  transform: translateX(0);
}
/* color siempre 0s de delay; el escalonado solo afecta a opacity/transform */
.menu.is-open .menu__link:nth-child(1) { transition-delay: 0s, 0.20s, 0.20s; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 0s, 0.26s, 0.26s; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 0s, 0.32s, 0.32s; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 0s, 0.38s, 0.38s; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 0s, 0.44s, 0.44s; }
.menu.is-open .menu__link:nth-child(6) { transition-delay: 0s, 0.50s, 0.50s; }
.menu__link span {
  display: inline-block;
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* El cuadrado: mismo lenguaje que el de los botones. */
.menu__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.26em;
  height: 0.26em;
  background: currentColor;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.08s linear, transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu__link:hover,
.menu__link:focus-visible {
  color: var(--color-text-light);
}
.menu__link:hover span,
.menu__link:focus-visible span {
  transform: translateX(0.95em);
}
.menu__link:hover::before,
.menu__link:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

/* ---------------------------------------------------------
   COLUMNA DERECHA — cohete + redes
   --------------------------------------------------------- */
.menu__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  /* Entra igual que los enlaces, un poco más tarde. */
  opacity: 0;
  transform: translateX(2rem);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu.is-open .menu__aside {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.32s;
}

.menu__rocket {
  width: 100%;
  max-width: 520px;
  height: auto;
  /* Vuelo en loop: sube y baja describiendo una curva y cabecea un poco,
     como un cohete sostenido en el aire. El keyframe 0% y 100% son
     iguales para que el ciclo no tenga salto. */
  animation: rocketFly 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes rocketFly {
  0%   { transform: translate3d(0, 0, 0)          rotate(0deg); }
  25%  { transform: translate3d(1.8%, -3%, 0)     rotate(2deg); }
  50%  { transform: translate3d(0, -4.6%, 0)      rotate(0deg); }
  75%  { transform: translate3d(-1.8%, -2.2%, 0)  rotate(-2deg); }
  100% { transform: translate3d(0, 0, 0)          rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .menu__rocket { animation: none; }

  /* Sin slide ni escalonado: el panel y su contenido aparecen y
     desaparecen sin desplazamiento. */
  .menu,
  .menu__link,
  .menu__aside { transition-duration: 0.01s; }
  .menu { transform: none; }
  .menu:not(.is-open) { transform: translateX(100%); }
  .menu__link,
  .menu__aside { transform: none; }
}

/* Redes: ícono + nombre, alineadas a la derecha en desktop. */
.menu__social {
  display: flex;
  gap: var(--space-5);
  align-self: center;
}
@media (min-width: 1025px) {
  .menu__social { align-self: flex-end; }
}

.menu__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-light);
  font-size: 20px;
  transition: opacity var(--transition-fast);
}
.menu__social-link:hover { opacity: 0.7; }

.menu__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  /* Cuadrado, sin radio, como el resto del sitio. El degradado usa la
     paleta de la marca (naranja -> rosa). */
  background: linear-gradient(135deg, var(--color-2), var(--color-5));
}
.menu__social-icon svg {
  width: 22px;
  height: 22px;
  fill: var(--color-text-light);
}

/* ---------------------------------------------------------
   RESPONSIVE
   En mobile el cohete se reduce y las redes van debajo de la lista.
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Contenido arraigado ARRIBA, no centrado vertical: así los items no
     quedan lejos del logo. */
  .menu {
    align-items: flex-start;
  }
  .menu__inner {
    grid-template-columns: 1fr;
    align-content: start;
    gap: var(--space-4);
    padding-block: calc(var(--header-h) + var(--space-3)) var(--space-5);
  }

  /* Todo alineado a la izquierda, contra el margen lateral del sitio:
     items, cohete y redes comparten el mismo borde izquierdo. */
  .menu__nav,
  .menu__aside {
    width: 100%;
  }

  .menu__link {
    font-size: clamp(2.4rem, 9vw, 3.4rem);
  }

  /* El cohete es un ELEMENTO en el flujo, entre los items y las redes
     (ese es su orden en el HTML), no un fondo absoluto.
     Nota para no repetir el error: se intentó ponerlo de fondo con
     position: absolute + inset: 0, y quedaba encuadrado en la caja de las
     redes. El motivo es que .menu__aside, su ancestro, tenía primero un
     transform (la animación de entrada) y después un position: relative
     (para el z-index): cualquiera de los dos lo convierte en el
     contenedor de referencia de sus descendientes absolutos. Si algún día
     se quiere de fondo, el cohete tiene que salir de .menu__aside en el
     HTML y ser hijo directo de .menu. */
  .menu__aside {
    align-items: flex-start;
    gap: var(--space-4);
  }
  .menu__rocket {
    max-width: min(100%, 340px);
  }

  /* Redes una debajo de la otra, alineadas con los items. */
  .menu__social {
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    gap: var(--space-3);
  }
}
@media (max-width: 640px) {
  .menu__social { gap: var(--space-4); }
  .menu__social-link { font-size: 16px; }
  .menu__social-icon { width: 32px; height: 32px; }
  .menu__social-icon svg { width: 18px; height: 18px; }
}