/* Barra superior común: la misma de la home («cordón de Brock»), 19 oct 2026.
   La usan todas las páginas menos la home, que la lleva en su propio <style>.
   styles.css estiliza todo <header> y todo <nav> (la barra antigua de «Perceptalis Center»): aquí se neutraliza.
   El menú lateral del móvil sigue siendo el de siempre (#navDrawer); el botón conserva el id navHamburger. */
:root { --nav-h: 64px; }

.site-nav {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--nav-h);
    z-index: 999;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(16px, 3vw, 36px);
    overflow: visible;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.site-nav nav { height: auto; width: auto; max-width: none; margin: 0; padding: 0; }
:where(.site-nav) a { color: inherit; text-decoration: none; }
:where(.site-nav) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.site-nav .logo {
    display: flex; align-items: center; gap: 0;
    color: var(--color-text-dark);
    font-size: 19px; font-weight: 700; letter-spacing: 0.06em;
}
.site-nav .logo span { color: var(--color-primary); }
/* logo.png trae margen transparente (~18 %): los márgenes negativos lo compensan */
.site-nav .logo img { width: 38px; height: 38px; margin: -7px 5px -6px -7px; }

.site-nav .nav-links {
    display: flex; gap: 24px; align-items: center;
    font-size: 13px; font-weight: 500; color: rgba(29, 29, 31, 0.74);
}
.site-nav .nav-links a:hover { color: var(--color-text-dark); }
.site-nav .nav-links a[aria-current="page"] { color: var(--color-primary); font-weight: 600; }
.site-nav .nav-links .pill {
    color: var(--color-primary); font-weight: 600;
    background: rgba(7, 117, 117, 0.08);
    border: 1px solid rgba(7, 117, 117, 0.45);
    padding: 8px 15px; border-radius: 999px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.site-nav .nav-links .pill:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }

.site-nav .nav-burger { display: none; width: 40px; height: 40px; border-radius: 999px; align-items: center; justify-content: center; }
.site-nav .nav-burger i,
.site-nav .nav-burger i::before,
.site-nav .nav-burger i::after { display: block; width: 18px; height: 1.6px; background: var(--color-text-dark); position: relative; content: ""; }
.site-nav .nav-burger i::before { position: absolute; top: -6px; }
.site-nav .nav-burger i::after { position: absolute; top: 6px; }

/* con el logo, los enlaces no caben por debajo de ~1080 px: menú lateral */
@media (max-width: 1080px) {
    .site-nav .nav-links { display: none; }
    .site-nav .nav-burger { display: flex; }
}
@media (max-width: 860px) {
    :root { --nav-h: 58px; }
}