/* ============================================================================
   Movimento compartilhado — header scroll-aware + entradas + parallax sutil.
   Linkado DEPOIS do <style> inline de cada página (vence a cascata).
   CSP-safe (arquivo externo). Tudo degrada com prefers-reduced-motion e sem JS.
   ==========================================================================*/

:root{ --nav-h:66px; }
html{ scroll-padding-top:calc(var(--nav-h) + .6rem); }

/* ---- HEADER: estado SÓLIDO como default seguro (legível sempre) ---- */
.nav{
  position:fixed; inset:0 0 auto; z-index:30;
  background:rgba(244,240,234,.97);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 1px 0 rgba(126,100,65,.16), 0 10px 30px rgba(36,28,23,.08);
  transition:background .32s ease, box-shadow .32s ease, -webkit-backdrop-filter .32s ease, backdrop-filter .32s ease;
}
.nav__wrap{ transition:padding-block .32s ease; padding-block:.72rem; }
.nav__brand{ color:var(--tinta); text-shadow:none; }
.nav__brand span{ color:var(--terracota); }
.nav__links a{ color:var(--tinta); text-shadow:none; }
.nav__links a[aria-current]{ color:var(--terracota); }
/* hover legível sobre o papel — vence o resquício inline `:hover{color:#fff}`
   das páginas de hero (especificidade 0,0,3,1) e exclui o CTA de propósito. */
.nav__links a:not(.nav__cta):hover{ color:var(--terracota); }
.nav__cta{ border-color:rgba(146,80,58,.55); color:var(--terracota); text-shadow:none; }
.nav__cta:hover{ background:var(--terracota); color:#FBF7F2; }

/* ---- COR DO HERO: no topo de uma página com hero, o header assume o TOM ESCURO
   do hero (blend perfeito sobre o painel escuro) com texto claro. Ao rolar para
   fora do hero, o JS adiciona .nav-solid e ele TRANSICIONA para o papel sólido.
   O fundo escuro semi-opaco (não transparente) garante a leitura dos links mesmo
   sobre a parte clara da foto — era exatamente isso que o transparente puro
   quebrava. Cor sólida (não gradiente) para a transição ao papel animar suave. */
html.js:not(.nav-solid) body.nav-hero .nav{
  background:rgba(36,28,23,.78); box-shadow:none;
  -webkit-backdrop-filter:saturate(120%) blur(3px); backdrop-filter:saturate(120%) blur(3px);
}
html.js:not(.nav-solid) body.nav-hero .nav__wrap{ padding-block:1.1rem; }
html.js:not(.nav-solid) body.nav-hero .nav__brand{ color:var(--creme); text-shadow:0 1px 12px rgba(36,28,23,.7); }
html.js:not(.nav-solid) body.nav-hero .nav__brand span{ color:var(--areia); }
html.js:not(.nav-solid) body.nav-hero .nav__links a{ color:#EFE7DF; text-shadow:0 1px 12px rgba(36,28,23,.7); }
html.js:not(.nav-solid) body.nav-hero .nav__links a[aria-current]{ color:var(--areia); }
html.js:not(.nav-solid) body.nav-hero .nav__links a:not(.nav__cta):hover{ color:#fff; }
html.js:not(.nav-solid) body.nav-hero .nav__cta{ border-color:rgba(242,238,234,.55); color:#EFE7DF; }
html.js:not(.nav-solid) body.nav-hero .nav__cta:hover{ background:rgba(242,238,234,.14); color:#fff; }
html.js:not(.nav-solid) body.nav-hero .nav:not(.menu-open) .nav__toggle{ color:var(--creme); }

.nav-sentinel{ display:block; height:0; margin:0; padding:0; }

/* alvo de toque do CTA (era ~40px no mobile) */
.nav__cta{ min-height:44px; display:inline-flex; align-items:center; }

/* ---- MENU MOBILE (hambúrguer) ---- */
.nav__toggle{ display:none; }
.nav__toggle{ width:44px; height:44px; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:transparent; border:0; padding:0; cursor:pointer; color:var(--tinta); }
.nav__toggle .bar{ display:block; width:24px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media(max-width:640px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:absolute; top:calc(100% + .3rem); left:.9rem; right:.9rem;
    flex-direction:column; align-items:stretch; gap:.1rem;
    background:var(--papel); border:1px solid rgba(126,100,65,.18); border-radius:8px;
    padding:.5rem; box-shadow:0 20px 44px rgba(36,28,23,.2);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.menu-open .nav__links{ opacity:1; visibility:visible; transform:none; }
  .nav__links a{ display:block!important; padding:.9rem 1rem; font-size:.86rem;
    color:var(--tinta)!important; text-shadow:none!important; letter-spacing:.06em; border-radius:5px; }
  .nav__links a[aria-current]{ color:var(--terracota)!important; }
  .nav__links a:hover{ background:var(--papel-2); }
  .nav__cta{ margin-top:.35rem; justify-content:center; min-height:48px;
    border:1px solid var(--terracota)!important; color:var(--terracota)!important; }
  /* barra fica sólida quando o menu está aberto (mesmo sobre o hero) */
  .nav.menu-open{ background:rgba(244,240,234,.98)!important;
    -webkit-backdrop-filter:blur(8px)!important; backdrop-filter:blur(8px)!important;
    box-shadow:0 1px 0 rgba(126,100,65,.16)!important; }
  .nav.menu-open .nav__brand{ color:var(--tinta)!important; text-shadow:none!important; }
  .nav.menu-open .nav__brand span{ color:var(--terracota)!important; }
  .nav.menu-open .nav__toggle{ color:var(--tinta)!important; }
}
@media(prefers-reduced-motion:reduce){
  .nav__toggle .bar,.nav__links{ transition:none; }
}

/* ---- ENTRADAS: variantes do .reveal (reagem ao .on que o site.js já aplica) ---- */
.js .reveal-stagger.on > *{ opacity:1; transform:none; }
.js .reveal-stagger > *{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal-stagger.on > :nth-child(1){ transition-delay:0ms }
.js .reveal-stagger.on > :nth-child(2){ transition-delay:70ms }
.js .reveal-stagger.on > :nth-child(3){ transition-delay:140ms }
.js .reveal-stagger.on > :nth-child(4){ transition-delay:210ms }
.js .reveal-stagger.on > :nth-child(5){ transition-delay:280ms }
.js .reveal-stagger.on > :nth-child(6){ transition-delay:350ms }

/* ---- PARALLAX sutil só nos full-bleed (scroll-driven, com fallback estático) ---- */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .parallax{
      will-change:transform;
      animation:al-parallax linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes al-parallax{
      from{ transform:translate3d(0,-14px,0) scale(1.08); }
      to  { transform:translate3d(0, 14px,0) scale(1.08); }
    }
  }
}

@media(prefers-reduced-motion:reduce){
  .nav, .nav__wrap{ transition:none; }
  .js .reveal-stagger > *{ opacity:1; transform:none; transition:none; }
  .parallax{ animation:none; transform:none; }
}