/* ==========================================================================
   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-block: 0;
    /* Trava na mesma coluna de 1180px das seções; abaixo disso volta ao gutter.
       O -margem existe porque padding em % resolve contra o bloco contentor —
       aqui a viewport inteira — e não contra a caixa do header, que já está
       recuada por --margem. Sem isso a Home ficava 44px à direita das seções. */
    padding-inline: max(var(--gutter), calc((100% - 1180px) / 2 - var(--margem)));
    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-block: clamp(10px, 1.3vw, 18px);
    padding-inline: max(var(--gutter), calc((100% - 1180px) / 2));
    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); }

/* ---------- páginas internas ----------
   Aqui o header é sólido desde o repouso; na home ele nasce sobre o cartão. */

/* Repouso: barra branca opaca. A página é creme, então o branco já separa o
   header do conteúdo — e opaco é o que impede o texto de passar por trás dele
   no meio da rolagem. */
/* Nas páginas internas o conteúdo vive numa coluna de 1180px. O max() trava o
   header nessa mesma coluna em tela larga e devolve o recuo normal quando ela
   já não cabe — assim nav e seções começam e terminam no mesmo x. */
.pagina-interna .site-header {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    transform: none;
    padding-block: clamp(15px, 1.8vw, 25px);
    padding-inline: max(var(--gutter), calc((100% - 1180px) / 2));
    background: var(--branco);
    border-bottom: 1px solid rgba(46, 50, 39, 0.07);
    color: var(--ink);
}

/* Rolado: a barra compacta e fica translúcida, desfocando o que passa atrás.
   Sem a animação de descida da home — aqui o header nunca sai de cena, então
   deslizar de volta pareceria um salto. Os três níveis do seletor são para
   vencer o repouso, que também é composto. */
.pagina-interna .site-header.is-scrolled {
    position: sticky;
    padding-block: clamp(10px, 1.3vw, 18px);
    padding-inline: max(var(--gutter), calc((100% - 1180px) / 2));
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: none;
    transform: none;
}

/* Página de produto: em repouso o header assume o creme da própria dobra de
   compra e perde o fio de baixo — barra e hero viram uma superfície só. Ao
   rolar, volta o comportamento das demais internas (branco translúcido com
   desfoque), que é o que separa a barra do conteúdo em movimento. */
.pagina-produto .site-header {
    background: var(--offwhite);
    border-bottom-color: transparent;
}

/* Rolado: mesmo creme translúcido da home — é a cor da própria página, então
   a barra não muda de cor, só deixa o conteúdo passar desfocado por trás. */
.pagina-produto .site-header.is-scrolled {
    background: rgba(245, 241, 236, 0.78);
    border-bottom-color: rgba(46, 50, 39, 0.07);
}

.pagina-interna .brand-logo__img--empilhada { display: none; }
.pagina-interna .brand-logo__img--horizontal {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}