/* ==========================================================================
   LAB — Piezas compartidas por los experimentos
   El menú del Figma: General Sans semibold de 15px, sin fondos. El estado se
   lee solo por el color del texto: lo activo en tinta, lo demás en gris
   fantasma. Lo usan el nav y, justo debajo, los filtros del archivo.
   ========================================================================== */

:root {
  /* Valores propios del lab. Si se gradúan, pasan a tokens.css. */
  --lab-menu-hover: #8c6a12;   /* [provisional] el amarillo activo oscurecido: 5:1 sobre crema */
  --lab-nav-h: 1.375rem;       /* 22px: alto de una fila del menú [figma]. El contenido se aparta de él */
  --lab-logo-w: 4.43125rem;    /* 70.9 × 18px [figma] */
}

.lab-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0; /* los elementos van pegados: el aire lo pone su padding [figma: 208.9 × 22] */
  font: var(--type-sm-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-sm);
}
.lab-menu--main { text-transform: uppercase; } /* el contenido se escribe en minúsculas */

.lab-menu__item {
  padding: 2px; /* [figma] */
  text-transform: inherit; /* los botones no heredan ni las mayúsculas */
  letter-spacing: inherit; /* ni el tracking */
  color: var(--color-text-ghost);
  transition: color var(--duration-fast) var(--ease-fade);
}
.lab-menu__item[data-state="on"] { color: var(--color-text); }
@media (hover: hover) { .lab-menu__item:hover { color: var(--lab-menu-hover); } } /* en táctil no hay hover */
/* Con JS los colores los anima GSAP (lab.js): sin transición de CSS que compita */
.has-lab-menu .lab-menu__item { transition: none; }

/* ---------- Nav: pegado al borde superior ----------
   Menú y filtros forman un solo bloque, sin separación entre filas. */
.lab-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.lab-nav__bar {
  display: grid;
  justify-items: center;
  pointer-events: auto;
}
.lab-nav__logo { padding: 2px 4px; } /* [figma: marco de 78.9 × 22] */
.lab-nav__logo .c-logo { width: var(--lab-logo-w); height: 1.125rem; color: inherit; } /* el dibujo desborda 0.6px, sin mover la fila */
.lab-nav .lab-filters[hidden] { display: none; }

/* ---------- Zonas táctiles ----------
   En móvil, cada elemento se puede pulsar en un área mayor que su texto, sin
   que cambie nada a la vista: una capa invisible que llena el hueco entre
   palabras y crece en alto. El menú está pegado al borde superior, así que su
   zona solo puede crecer hacia abajo: 44px si está solo (home) y 24px si
   lleva los filtros debajo (archivo). Los filtros empiezan donde acaba esa
   zona y bajan 44px. Así ninguna zona pisa a otra. */
@media (max-width: 767.98px), (pointer: coarse) {
  .lab-menu__item { position: relative; }
  .lab-menu--main { position: relative; z-index: 1; } /* su zona queda por encima del borde de los filtros */
  .lab-menu__item::after {
    content: "";
    position: absolute;
    inset: 0 0 auto; /* los elementos van pegados: la zona ocupa su ancho */
    height: 2.75rem; /* 44px */
  }
  .lab-nav__bar:has(.lab-filters:not([hidden])) .lab-menu--main .lab-menu__item::after { height: 1.5rem; } /* 24px */
  .lab-filters .lab-menu__item::after { top: 2px; } /* justo donde acaba la zona del menú (22 + 2 = 24) */
}

@media (max-width: 599.98px) {
  .lab-filters { font: var(--type-xs-label); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-xs); }
}