/* SECCION: menu · dentro del panel de la portada (mockup final): lockup a la izquierda, enlaces sueltos
   sin cápsula de vidrio y Escríbeme a la derecha. No es fijo: se va con la portada al bajar.
   Se monta encima del panel (posición absoluta) para que el <header> siga fuera de <main>.
   Solo usa variables de tokens.css. */

.menu {
  position: absolute;
  z-index: 50;
  top: var(--panel-borde);
  left: var(--panel-borde);
  right: var(--panel-borde);
  height: var(--menu-alto);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
}
.menu__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
}
/* Lockup en el menú: símbolo + nombre en Geist Medium, mayúsculas, tracking 0.28em (wordmark del brandbook).
   El SVG del lockup completo deja el nombre a ~6 px de alto: ilegible. Por eso el nombre va como texto. */
.menu__marca { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: var(--tactil-min); text-decoration: none; color: var(--tinta); } /* 44 px de alto para el dedo; la barra lo centra igual */
.menu__simbolo { width: 40px; height: auto; fill: currentColor; }
.menu__nombre { font-size: var(--t-wordmark); font-weight: var(--peso-medium); letter-spacing: var(--tracking-wordmark); text-transform: uppercase; white-space: nowrap; }

.menu__enlaces { display: none; gap: var(--space-5); margin-left: auto; margin-right: var(--space-5); }
.menu__enlaces a {
  display: block;
  padding: 10px 0;
  font-size: 0.9375rem;
  font-weight: var(--peso-medium);
  text-decoration: none;
  transition: color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .menu__enlaces a:hover { color: var(--cta); }
}

.menu .boton { min-height: 44px; padding: 10px 18px; }

/* Celulares chicos: el panel le quita 20 px al menú; el nombre baja a 12 px para que "Escríbeme" quepa entero a 360 */
@media (max-width: 399px) {
  .menu__barra { gap: var(--space-2); }
  .menu__nombre { font-size: 0.75rem; }
  .menu .boton { padding-inline: 14px; }
}
.menu .boton { flex: none; }
@media (max-width: 370px) { /* 360 px: el botón se compacta un poco más, sin bajar del área táctil de 44 px */
  .menu .boton { padding-inline: 10px; font-size: 0.9375rem; }
}

@media (min-width: 900px) {
  .menu__simbolo { width: 46px; }
  .menu__enlaces { display: flex; }
}