.site-header {
    align-items: center;
    background: var(--chrome-bg);
     border-bottom: .08rem solid var(--chrome-border);
    display: flex;
    justify-content: space-between;
    padding: 1.65rem max(2rem, calc((100% - var(--content)) / 2 + 2rem));
    /* El panel del menú hamburguesa se ubica respecto de la barra y queda por encima del fondo oscurecido */
    position: relative;
    z-index: 30;
}

.brand {
    align-items: center;
    color: var(--text);
    display: inline-flex;
    font-family: "Manrope", sans-serif;
    font-size: .92rem;
    font-weight: 700;
    gap: .7rem;
}

.brand-mark {
    align-items: center;
    background: var(--ink);
    border-radius: .45rem;
    color: var(--white);
    display: inline-flex;
    font-size: .72rem;
    height: 2rem;
    justify-content: center;
    letter-spacing: -.04em;
    width: 2rem;
}

.nav-group {
    align-items: center;
    display: flex;
    gap: 1.5rem;
}

.header-actions {
    align-items: center;
    display: flex;
    gap: 1rem;
}

/* Computadora: la barra queda fija arriba al bajar y se achica a unos 60 px (menu.js agrega is-scrolled).
   En celular y tablet se esconde al bajar y reaparece al subir (ver más abajo). */
@media (min-width: 64rem) {
    .site-header {
        position: sticky;
        top: 0;
        transition: padding .2s ease, box-shadow .2s ease;
    }

    .site-header.is-scrolled {
        box-shadow: 0 .4rem 1.2rem rgba(4, 10, 26, .18);
        padding-bottom: .7rem;
        padding-top: .7rem;
    }

    /* Los enlaces a una sección no quedan tapados por la barra fija */
    html {
        scroll-padding-top: 4.5rem;
    }
}

/* Celular y tablet: la barra se esconde al bajar y reaparece achicada apenas se sube (menu.js agrega is-hidden).
   Sigue ocupando su lugar en la página, así el contenido no salta: lo que se achica el relleno lo compensa el margen. */
@media (max-width: 63.99rem) {
    .site-header {
        position: sticky;
        top: 0;
        transition: transform .25s ease, padding .2s ease, margin .2s ease, box-shadow .2s ease;
    }

    .site-header.is-scrolled {
        box-shadow: 0 .4rem 1.2rem rgba(4, 10, 26, .18);
        margin-bottom: 1.9rem;
        padding-bottom: .7rem;
        padding-top: .7rem;
    }

    .site-header.is-hidden {
        box-shadow: none;
        transform: translateY(-100%);
    }

    /* Los enlaces a una sección no quedan tapados por la barra cuando reaparece */
    html {
        scroll-padding-top: 5rem;
    }
}

@media (max-width: 63.99rem) and (prefers-reduced-motion: reduce) {
    .site-header {
        transition: none;
    }
}