/* ==========================================================================
   Barra superior
   Valores idênticos ao desenho aprovado — não alterar sem revalidar contra
   o backup em tmp/hero-bone-broth/.
   ========================================================================== */

/* ---------- header ---------- */
.site-header {
    position: absolute;
    top: var(--margem); left: var(--margem); right: var(--margem);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 var(--gutter);
    top: calc(var(--margem) + var(--gutter));
    transform: translateY(-50%);
    /* Acima do botão e do selo do hero, que também estão em 30 e vinham depois
       no HTML — empatados, quem vem depois vence, e eles passavam por cima da
       barra fixa. Abaixo de 90, onde começa a camada do menu mobile. */
    z-index: 60;
    color: var(--offwhite);
    transition: background 560ms cubic-bezier(0.22, 1, 0.36, 1),
                padding 560ms cubic-bezier(0.22, 1, 0.36, 1),
                backdrop-filter 560ms ease,
                color 400ms ease;
}
/* ---------- estado rolado: barra fixa translúcida ----------
   O fundo com blur pega a cor do que passa atrás: esverdeia sobre o cartão,
   embranquece sobre a página. Ele desce de volta em vez de grudar no topo
   desde o início — assim não salta (ver js/header-scroll.js). */
.site-header.is-scrolled {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: clamp(10px, 1.3vw, 18px) calc(var(--margem) + var(--gutter));
    background: rgba(245, 241, 236, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(46, 50, 39, 0.07);
    color: var(--ink);
    animation: header-desce 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes header-desce {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Na barra fixa a marca troca de desenho: a empilhada sai e a horizontal entra,
   em cross-fade. É aqui que o nome da marca aparece — a headline do hero é o
   produto. A versão escura é exigência da barra clara. */
.site-header.is-scrolled .brand-logo__img--empilhada {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(0.94);
    transition-delay: 0s, 0s, 420ms;
}

.site-header.is-scrolled .brand-logo__img--horizontal {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .site-header.is-scrolled { animation: none; }
}

.main-nav { display: flex; gap: 28px; }
.main-nav a {
    color: currentColor;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.main-nav a:hover { opacity: 0.75; }

/* Grade de uma célula só: as duas versões se sobrepõem sem sair do fluxo, e a
   caixa reserva a maior das duas — assim a troca não empurra nada ao lado. */
.brand-logo {
    display: grid;
    justify-self: center;
    place-items: center;
    line-height: 0;
}
/* A que está fora de cena vira `visibility: hidden` — só DEPOIS do fade, pelo
   atraso na transição. Assim ela some do mouse e do leitor de tela sem perder o
   cross-fade. `display: none` não serviria: além de não ser animável, colapsaria
   a célula e a caixa mudaria de largura no meio do movimento. */
.brand-logo__img {
    grid-area: 1 / 1;
    width: auto;
    display: block;
    transition: opacity 420ms ease,
                transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s;
}
/* proporcional à viewport, com piso legível e teto do desenho aprovado */
.brand-logo__img--empilhada {
    height: clamp(40px, 4vw, 58px);
}
/* mais baixa que a empilhada: a horizontal é larga, e igualar altura a faria
   ocupar o header inteiro */
.brand-logo__img--horizontal {
    /* 40px é o valor aprovado em 1440 (40/1440 = 2.78vw) */
    height: clamp(32px, 2.78vw, 40px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px) scale(0.96);
    /* opacity, transform, visibility — só a última espera o fade acabar */
    transition-delay: 0s, 0s, 420ms;
}

.site-header__start {
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-header__end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
}
.btn-icon {
    width: clamp(20px, 1.6vw, 26px);
    height: clamp(20px, 1.6vw, 26px);
    color: currentColor;
    display: inline-flex;
}
.btn-icon svg { width: 100%; height: 100%; }

.btn-solid {
    background: var(--terra);
    color: var(--offwhite);
    font-weight: 800;
    font-size: clamp(11px, 0.9vw, 13.5px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: clamp(10px, 0.9vw, 14px) clamp(16px, 1.8vw, 28px);
    border-radius: 999px;
    margin-left: 8px;
    white-space: nowrap;
}
.btn-solid:hover { filter: brightness(1.06); }