/* ============================================================
   NAV.CSS — Cabeçalho e navegação principal
   ============================================================ */

/* --- Cores e fundo --- */
.nav { background-color: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); }
.nav { position: sticky; top: 0; z-index: 100; }

/* --- Container --- */
.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--padding-lado);
}

/* --- Logo --- */
/* --- Tipografia logo --- */
.nav__logo {
    font-family: var(--fonte-titulo);
    font-size: 16px;
    font-weight: var(--peso-bold);
    color: var(--cor-fonte);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}
/* --- Cor do separador e tagline --- */
.nav__logo span {
    font-family: var(--fonte-corpo);
    font-size: 13px;
    font-weight: var(--peso-leve);
    color: #8A9AB0;
}
.nav__logo:hover { color: var(--cor-fonte); }

/* --- Links --- */
.nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav__link {
    font-family: var(--fonte-corpo);
    font-size: var(--t-nav);
    font-weight: var(--peso-normal);
    color: var(--cor-fonte);
    text-decoration: none;
    transition: color 0.2s;
    position: relative;
}
.nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--cor-principal);
    transition: width 0.2s;
}
.nav__link:hover { color: var(--cor-principal); }
.nav__link:hover::after { width: 100%; }
.nav__link--ativo { color: var(--cor-principal); font-weight: var(--peso-bold); }

/* --- Botão CTA --- */
.nav__cta {
    font-family: var(--fonte-corpo);
    font-size: 13px;
    font-weight: var(--peso-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: var(--cor-principal);
    color: #fff;
    padding: 9px 20px;
    border-radius: var(--raio-btn);
    text-decoration: none;
    transition: background-color 0.2s;
    white-space: nowrap;
}
.nav__cta:hover { background-color: #3a5c8f; color: #fff; }

/* --- Hamburguer --- */
.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--cor-fonte);
    transition: all 0.25s;
}

/* --- Responsivo --- */
@media (max-width: 900px) {
    .nav__logo span { display: none; }
}

@media (max-width: 768px) {
    .nav__toggle { display: flex; }
    .nav__links {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background-color: var(--cor-fundo);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        border-bottom: 1px solid var(--cor-borda);
        padding: 12px 0;
        box-shadow: 0 8px 24px var(--cor-sombra);
    }
    .nav__links--aberto { display: flex; }
    .nav__link { width: 100%; padding: 14px 24px; font-size: 15px; }
    .nav__link::after { display: none; }
    .nav__cta { margin: 12px 24px 4px; }
}