/* ═══════════════════════════════════════════════════════════════ Cabecera fija y navegación de escritorio. ═══════════════════════════════════════════════════════════════ */ :root { --nav-height: var(--alto-cabecera); --nav-text-color: var(--tinta); --nav-hover-color: var(--morado); --nav-font-size: 15.5px; --nav-font-weight: 500; } /* ── ENLACE DE SALTO (WCAG 2.4.1) ─────────────────────────────── */ /* * Es el primer elemento del y así debe seguir: con teclado * evita recorrer logotipo, menú y distintivo en cada página. * Oculto fuera de pantalla hasta recibir el foco (nunca display:none, * que lo sacaría del orden de tabulación). */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 18px; background: var(--tinta); color: #fff; font-family: var(--font-body); font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 0 0 10px 0; } .skip-link:focus { left: 8px; top: 8px; } /* ── BARRA FIJA ───────────────────────────────────────────────── */ /* * position:fixed, no sticky. body lleva overflow-x:hidden * (style-generic.css) y un ancestro con overflow distinto de visible * deja a position:sticky sin contenedor de desplazamiento: la barra * no se quedaría fija. Con fixed hace falta #header-filler, que ya * está, y --alto-cabecera ya alimenta scroll-padding-top y las anclas. */ .sticky { position: fixed; top: 0; width: 100%; z-index: 50; background: rgba(234, 232, 231, 0.94); /* --hueso al 94 % */ backdrop-filter: saturate(160%) blur(8px); -webkit-backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--linea); } /* * Reserva el hueco de la barra fija para que no tape el contenido. * .sticky mide --nav-height MÁS su border-bottom de 1 px, así que el * hueco es --nav-height + 1px: restarlo dejaba los 2 primeros píxeles * del contenido bajo la barra translúcida. */ #header-filler { height: calc(var(--nav-height) + 1px); } /* * La anchura máxima y el acolchado lateral los pone .contenedor, que es * el mismo de todas las secciones: así la cabecera queda alineada con el * contenido de la página en vez de repetir sus medidas a mano. */ .header-fila { display: flex; align-items: center; gap: 26px; } #header-menu-1 { height: var(--nav-height); } /* ── LOGOTIPO ─────────────────────────────────────────────────── */ /* * El se declara a tamaño real (420x187) y aquí se le da la altura * de pintado; width:auto conserva la proporción, así que no hay * deformación y el hueco reservado es exacto. */ .header-logo { flex: none; display: flex; align-items: center; text-decoration: none; } .header-logo img { height: 34px; width: auto; } /* ── NAVEGACIÓN ───────────────────────────────────────────────── */ /* El menú y el distintivo van pegados al borde derecho de la fila. */ .header-nav { margin-left: auto; } .header-nav ul { list-style: none; margin: 0; gap: 24px; height: 100%; } .header-nav li { height: 100%; display: flex; align-items: center; } .header-nav a { position: relative; display: flex; align-items: center; height: 100%; padding: 6px 0; font-family: var(--font-body); font-size: var(--nav-font-size); font-weight: var(--nav-font-weight); color: var(--nav-text-color); text-decoration: none; white-space: nowrap; } .header-nav a:hover { color: var(--nav-hover-color); } /* La página actual queda subrayada en morado, no solo en color: el subrayado se ve también sin percibir el matiz. */ .header-nav a[aria-current="page"] { font-weight: 600; } /* El subrayado va sobre el propio texto, no sobre la caja del enlace. Con un ::after posicionado contra la caja (que es alta, porque ocupa el alto de la barra) la linea caia a media altura y el rotulo se veia TACHADO. text-decoration se ancla a la linea base y no puede fallar asi, ademas de seguir al texto si cambia el tamano de fuente. */ .header-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--morado); text-decoration-thickness: 2.5px; text-underline-offset: 6px; } /* Los separadores del marcado sobran en esta composición: el ritmo lo marca el gap. Son decorativos (aria-hidden), así que ocultarlos no quita nada a nadie. */ .header-nav .separator-line { display: none; } /* ── DISTINTIVO DE INSCRIPCIÓN ────────────────────────────────── */ /* * El aspecto entero lo pone .chip-inscripcion (style-buttons.css, que * se carga en todas las páginas). Aquí solo se impide que encoja: es * el último elemento de una fila flexible y su rótulo no debe partirse. */ .header-fila .chip-inscripcion { flex: none; } /* ── BARRA MÓVIL ──────────────────────────────────────────────── */ #device-header-bar { display: none; } /* * La navegación horizontal necesita sitio de sobra: hasta 1160 px se * muestra el botón de menú. Es el mismo corte que usan * style-device-menu.css y responsive-navbar.js. */ @media all and (max-width: 1160px) { #header-menu-1 { display: none; } /* Anchura máxima y acolchado los pone .contenedor, igual que arriba. */ #device-header-bar { display: flex; justify-content: space-between; height: var(--nav-height); } } @media all and (max-width: 700px) { :root { --nav-height: 66px; } .header-logo img { height: 30px; } }