/* =================================================================
   LOGOTIPO / MARCA
   ================================================================ */

.brand {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 800 19px Manrope, Arial, sans-serif;
    letter-spacing: -.06em;
    color: #111;
    text-decoration: none;
}

.brand b {
    font: 13px "DM Mono", monospace;
    letter-spacing: -1.5px;
    background: #111;
    color: #fff;
    padding: 5px 6px 4px;
    border-radius: 4px;
}


/* =================================================================
   NAVEGACIÓN DEL HEADER
   ================================================================ */

.header nav {
    display: flex;
    align-items: center;
    gap: 27px;
    font: 600 13px Manrope, Arial, sans-serif;
}

.header nav > a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.header nav > a:hover {
    color: #111;
}


/* =================================================================
   DISEÑO RESPONSIVO (MÓVILES)
   ================================================================ */

@media (max-width: 700px) {
    .header {
        height: 68px;
        padding: 0 20px;
    }
    
    .header nav > a:not(.button) {
        display: none;
    }
}