/* ============================================================================
   LAYOUT › CABECERA Y MENÚ
   ----------------------------------------------------------------------------
   position:sticky la deja fija arriba al scrollear, y el backdrop-filter
   difumina el video que pasa por detrás: se lee siempre, sin taparlo.

   NOTA sobre las media queries: cada archivo lleva las suyas al final, en vez
   de tener un archivo "responsive.css" gigante. Así, cuando toques la cabecera,
   TODO lo de la cabecera está en un solo lugar (mobile y desktop juntos).
   ============================================================================ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;                             /* mobile-first: padding chico */
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);            /* prefijo para Safari */
  border-bottom: 1px solid var(--color-borde);
}

.cabecera__izquierda {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;                                   /* permite que el menú se encoja */
}

.logo img {
  height: 34px;
  width: auto;
}

/* --- Menú -----------------------------------------------------------------
   En mobile el menú scrollea horizontalmente en lugar de romper el layout. */
.menu {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;                          /* oculta la barra en Firefox */
}
.menu::-webkit-scrollbar { display: none; }       /* la oculta en Chrome/Safari */

.menu a {
  position: relative;
  color: var(--color-texto);
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;                            /* no parte "EVENTOS" en dos */
  padding: 4px 0;
  transition: color var(--transicion);
}

/* Subrayado animado: una barrita que crece al pasar el mouse.
   Se hace con ::after (no agrega HTML) y scaleX, que es una animación barata
   para la GPU. */
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-acento);
  transform: scaleX(0);
  transition: transform var(--transicion);
}

.menu a:hover           { color: var(--color-acento); }
.menu a:hover::after    { transform: scaleX(1); }

/* --- Desktop: 992px en adelante ------------------------------------------ */
@media (min-width: 992px) {
  .cabecera            { padding: 14px 32px; }
  .cabecera__izquierda { gap: 36px; }
  .logo img            { height: 40px; }
  .menu                { gap: 28px; }
  .menu a              { font-size: 13px; }
}