/* =========================================================
   HEADER
   ========================================================= */
header{
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: saturate(120%) blur(6px);
    position: fixed;
    z-index: 2;
}
.site_header{box-shadow: var(--shadow);z-index: 999;}
.site_nav{
    display: flex;
    list-style: none;
    gap: 1em;
    margin: 0;
    padding: 0;
}
.site_nav a{
    text-decoration: none;
    color: var(--ink);
}
.navbar_brand{
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 150%;
    font-weight: bolder;
    color: var(--ink);
}
.navbar_brand img{
    width: 1.5em;
    margin-bottom: 0.5em;
}
.header_top {
    position: relative;
    background-color: black;
    min-height: 2em;
    display: flex;
    align-items: center;
    z-index: 3;
}
.header_top p {
    font-size: 70%;
    color: var(--paper);
    position: absolute;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}
.header_top p.active {
    opacity: 1;
}
/* =========================================================
   RESPONSIVE: MÓVILES / TABLET (≤ 959px)
   ========================================================= */
@media (max-width:959px){
    header{width: 90%;}
    .site_header{width: 100%;}
    .header_lg{display: none;}
    .header_sm{display: flex;flex-direction: column;align-items: center;justify-content: space-between;min-height: 8vh;padding: 1% 3%;}
    .header_container{display: flex;justify-content: space-between;width: 100%;align-items: center;}
    nav{width: 100%;}
    .site_nav{font-size: 80%;margin-top: 1em;justify-content: center;margin-bottom: 0.5em;}
    .header_top {padding: 0.7% 3%;height: 3.5em;}
    .navbar_brand img{margin-left: -0.2em;}
}

/* =========================================================
   RESPONSIVE: ESCRITORIO (≥ 960px)
   ========================================================= */
@media (min-width:960px){
    header{width: 80%;}
    .header_lg{min-height: 10vh;}
    .site_header{width: 100%;}
    .header_sm,.header_lg{padding: .5% 10%;}
    .header_sm{display: none;}
    .header_lg{display: flex;justify-content: space-between;align-items: center;}
    .header_lg nav, .header_lg .header_container{width: 40%;}
    .header_lg nav{font-size: 80%;}
    .header_container{display: flex;justify-content: end;}
    .header_top {padding: 0.2% 10%;}
}