/* ==========================================================================
   Header — marca · navegação em pílula · ações · menu mobile
   ========================================================================== */

.header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-header);
    isolation: isolate; /* mantém o menu (z-index -1) dentro do header, nunca atrás da página */
    padding-top: max(var(--header-top), env(safe-area-inset-top));
    pointer-events: none; /* só a barra e o menu recebem clique */
}

.header__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    width: min(100% - 2 * var(--gutter), var(--shell));
    min-height: var(--header-h);
    margin-inline: auto;
    padding-inline: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    pointer-events: auto;
    transition:
        background-color var(--dur-slow) var(--ease-apple),
        border-color var(--dur-slow) var(--ease-apple),
        box-shadow var(--dur-slow) var(--ease-apple),
        min-height var(--dur-slow) var(--ease-apple);
}

/* Ao rolar, a barra ganha corpo (vidro) para se destacar do conteúdo. */
.header.is-scrolled .header__bar {
    min-height: calc(var(--header-h) - 10px);
    /* Opaco o bastante para continuar escuro sobre as seções claras. */
    background: rgba(var(--co-deep-rgb), 0.8);
    border-color: var(--glass-border);
    box-shadow: var(--shadow-md);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

/* Entrada: desliza de cima assim que o JS sinaliza `is-ready`. */
html.js .header {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
    transition:
        opacity var(--dur-reveal) var(--ease-out-expo),
        transform var(--dur-reveal) var(--ease-out-expo);
}

html.js .header.is-ready {
    opacity: 1;
    transform: none;
}

/* --- Marca ------------------------------------------------------------------ */
.header__brand {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
}

.header__logo {
    width: auto;
    height: 32px;
}

/* --- Navegação em pílula ------------------------------------------------------ */
.header__nav {
    display: none;
    justify-self: center;
}

.nav-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: rgba(var(--co-deep-rgb), 0.45);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-pill__item {
    position: relative;
    z-index: 1;
}

.nav-pill__link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 1.05rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-3);
    border-radius: var(--radius-pill);
    transition: color var(--dur-base) var(--ease-apple);
}

.nav-pill__link.is-active,
.nav-pill__link:hover,
.nav-pill__link:focus-visible {
    color: var(--text);
}

/* Indicador deslizante: posição/largura vêm de header.js via --x / --w. */
.nav-pill__indicator {
    position: absolute;
    top: 4px;
    left: 0;
    z-index: 0;
    width: var(--w, 0px);
    height: calc(100% - 8px);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translate3d(var(--x, 0px), 0, 0);
    opacity: var(--o, 0);
    transition:
        transform var(--dur-slow) var(--ease-out-expo),
        width var(--dur-slow) var(--ease-out-expo),
        opacity var(--dur-base) var(--ease-apple);
}

/* --- Ações -------------------------------------------------------------------- */
.header__actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: var(--space-2);
}

.header__phone {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    min-height: 44px;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    white-space: nowrap;
    color: var(--text-2);
    border-radius: var(--radius-pill);
    transition: color var(--dur-base) var(--ease-apple);
}

.header__phone .icon {
    font-size: 1rem;
    color: var(--co-accent);
}

.header__phone:hover {
    color: var(--text);
}

.header__actions .btn--light {
    display: none;
}

.header__toggle {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--text);
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    transition: background-color var(--dur-base) var(--ease-apple);
}

.header__toggle:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* --- Menu mobile ------------------------------------------------------------------ */
.menu {
    position: fixed;
    inset: 0;
    z-index: -1; /* abaixo da barra, acima da página */
    display: grid;
    align-items: end;
    padding:
        calc(var(--header-h) + var(--header-top) + var(--space-6))
        var(--gutter)
        max(var(--space-8), env(safe-area-inset-bottom));
    background: rgba(var(--co-deep-rgb), 0.82);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--dur-slow) var(--ease-apple),
        visibility 0s linear var(--dur-slow);
}

.menu.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.menu__inner {
    display: grid;
    gap: var(--space-8);
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

.menu__nav {
    display: grid;
}

.menu__link {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    color: var(--text-2);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        color var(--dur-base) var(--ease-apple),
        opacity var(--dur-reveal) var(--ease-out-expo),
        transform var(--dur-reveal) var(--ease-out-expo);
}

.menu__link.is-active,
.menu__link:hover {
    color: var(--text);
}

.menu__index {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wider);
    color: var(--co-accent);
}

.menu__footer {
    display: grid;
    gap: var(--space-5);
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity var(--dur-reveal) var(--ease-out-expo),
        transform var(--dur-reveal) var(--ease-out-expo);
}

.menu__contact {
    display: grid;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    color: var(--text-3);
}

.menu__contact a {
    color: var(--text-2);
    width: fit-content;
}

/* Cascata dos itens ao abrir. */
.menu.is-open .menu__link,
.menu.is-open .menu__footer {
    opacity: 1;
    transform: none;
}

.menu.is-open .menu__link:nth-child(1) { transition-delay: 60ms; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 120ms; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 180ms; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 240ms; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 300ms; }
.menu.is-open .menu__link:nth-child(6) { transition-delay: 360ms; }
.menu.is-open .menu__footer           { transition-delay: 420ms; }

/* --- Desktop -------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .header__bar {
        grid-template-columns: 1fr auto 1fr;
        padding-inline: var(--space-4);
    }

    .header__logo {
        height: 34px;
    }

    .header__nav {
        display: block;
    }

    .header__actions .btn--light {
        display: inline-flex;
    }

    .header__toggle,
    .menu {
        display: none;
    }
}

/* O telefone só entra quando há folga real ao lado da navegação. */
@media (min-width: 1200px) {
    .header__phone {
        display: inline-flex;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .header__actions .btn--light {
        display: inline-flex;
    }
}