/* Menú principal — el mismo en las noventa páginas. * * Vive aparte de `lineup.css` porque también lo cargan las cuatro páginas que * vienen de Framer (home, FAQ, collab, privacy), y `lineup.css` trae * selectores globales (`*`, `body`, `h1`…) que allí chocarían con los suyos. * * El plegable de móvil lo enciende `menu.js` marcando ``. * Sin JavaScript no hay botón y queda la fila con scroll de siempre. */ .ff-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; padding: 0 32px; /* Oscuro, no claro. El fondo era `rgba(250,250,250,.12)` —un velo blanco— y los enlaces son blancos: encima del hero se leía, pero al pasar por las secciones de fondo claro (los accesos, el cartel) quedaba blanco sobre blanco y el menú desaparecía. Con el velo oscuro el texto blanco tiene contraste en todo el recorrido, y es el mismo tono que ya usaba el panel plegado de móvil. */ background: rgba(12, 12, 14, 0.55); border-bottom: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ff-nav { display: flex; align-items: center; justify-content: space-between; width: min(1120px, 100%); gap: 30px; } .ff-menu-boton { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 -8px 0 0; padding: 0; border: 0; border-radius: 999px; background: none; color: #fff; cursor: pointer; } .ff-menu-boton svg { width: 22px; height: 22px; fill: currentColor; } .ff-menu-boton:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; } .ff-nav a { color: rgba(255, 255, 255, 0.72); font-size: 15px; font-weight: 700; text-decoration: none; text-transform: uppercase; transition: color 160ms ease; } .ff-nav a:hover, .ff-nav a[aria-current="page"] { color: #fff; } /* El selector de idioma (`.ff-idioma`) lo inyecta `i18n.js` como último elemento del menú. Se estiliza aquí y no allí para que comparta tamaños con los enlaces: heredando salía a 12px en las páginas de Framer y a 16 en las propias, porque cada una tiene otro tamaño de cuerpo. */ .ff-nav .ff-idioma { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5px; white-space: nowrap; color: rgba(255, 255, 255, 0.72); font-size: 15px; font-weight: 700; text-transform: uppercase; } .ff-nav .ff-idioma a { color: inherit; text-decoration: none; opacity: 0.6; transition: opacity 160ms ease; } .ff-nav .ff-idioma a:hover, .ff-nav .ff-idioma a[aria-current] { color: #fff; opacity: 1; } .ff-nav .ff-idioma-sep { opacity: 0.3; } @media (max-width: 860px) { .ff-header { min-height: 58px; padding: 0 18px; } .ff-nav { gap: 14px; overflow-x: auto; padding-bottom: 2px; } .ff-nav a, .ff-nav .ff-idioma { flex: 0 0 auto; font-size: 13px; } .ff-js .ff-menu-boton { display: inline-flex; } .ff-js .ff-header { justify-content: flex-end; gap: 12px; } .ff-js .ff-header[data-menu="cerrado"] .ff-nav { display: none; } /* Con el menú plegado no hay barra: sólo el botón. La cabecera pintaba el fondo de lado a lado aunque el icono viva pegado a la derecha, y sobre el arte del hero se veía como una banda suelta que no era nada. Al quedarse transparente la cabecera sigue siendo una franja fija de 58px de ancho completo, así que hay que devolverle los clics a lo que tiene debajo o se queda una zona muerta en todo el borde superior. El botón se los recupera para sí. */ .ff-js .ff-header[data-menu="cerrado"] { background: none; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; } .ff-js .ff-header[data-menu="cerrado"] .ff-menu-boton { pointer-events: auto; } /* El velo oscuro se lo queda el botón: sin él desaparecía sobre las secciones claras, que es justo lo que se acaba de arreglar arriba. */ .ff-js .ff-menu-boton { background: rgba(12, 12, 14, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ff-js .ff-header[data-menu="abierto"] .ff-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; width: auto; gap: 0; padding: 4px 18px 12px; overflow-x: visible; background: rgba(12, 12, 14, 0.94); border-bottom: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ff-js .ff-header[data-menu="abierto"] .ff-nav > a, .ff-js .ff-header[data-menu="abierto"] .ff-nav > .ff-idioma { padding: 13px 0; font-size: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .ff-js .ff-header[data-menu="abierto"] .ff-nav > :last-child { border-bottom: 0; } }