/* ===== base do site (depois de hero.css) =====
   Tokens do hero B (--b-*) continuam valendo; aqui entram os do resto da página. */
:root{
  /* claro: papel de laudo / areia das paredes */
  --papel:#f5ede1;
  --papel-2:#ece0cf;
  --areia-3:#dcc8ae;
  --tinta:#12302e;          /* texto sobre claro */
  --tinta-2:#3a5552;        /* apoio sobre claro (AA sobre --papel) */
  --bronze-txt:#6e4f33;     /* rótulo bronze sobre claro (AA) */
  --grade-clara:rgba(122,90,60,.14);
  --grade-clara-forte:rgba(122,90,60,.26);
  --traco-claro:#1a4442;
  /* escuro */
  --grade-escura:rgba(143,192,181,.10);
  --grade-escura-forte:rgba(143,192,181,.2);
  /* escala */
  --t-secao:clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem);
  --t-sub:clamp(1.35rem, 1.05rem + 1vw, 2rem);
  --t-corpo:clamp(1.125rem, 1.05rem + .25vw, 1.22rem);
  --secao-y:clamp(5.5rem, 3.5rem + 7vw, 10rem);
  --curva:cubic-bezier(.2,.7,.2,1);
}
html{scroll-padding-top:5rem}
section{position:relative}
.wf-claro{background:var(--papel);color:var(--tinta)}
.wf-escuro{background:var(--b-noite);color:var(--b-creme)}
.wf-rot{font-family:var(--b-f-mono);font-size:var(--b-t-mono);letter-spacing:.16em;text-transform:uppercase}
.wf-claro .wf-rot{color:var(--bronze-txt)}
.wf-escuro .wf-rot{color:var(--b-ouro)}
:focus-visible{outline:2px solid var(--b-ouro);outline-offset:3px;border-radius:4px}
.wf-claro :focus-visible{outline-color:var(--bronze-txt)}

/* entrada por rolagem: [data-surge] -> .surgiu (não usar data-rev, que é do hero) */
.js [data-surge]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--curva), transform 1.1s var(--curva)}
.js [data-surge].surgiu{opacity:1;transform:none}

/* barra fixa que aparece ao rolar */
.wf-barra{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:1.6rem;padding:.7rem var(--b-borda);background:color-mix(in oklab, var(--b-noite) 88%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(201,171,120,.18);transform:translateY(-105%);transition:transform .5s var(--curva);color:var(--b-creme)}
.wf-barra.visivel{transform:none}
.wf-barra .b-marca-nome{font-size:.9rem}
.wf-barra nav{display:flex;gap:1.5rem;margin-left:auto;font-size:.92rem}
.wf-barra nav a{text-decoration:none;color:var(--b-texto-2)}
.wf-barra nav a:hover{color:var(--b-creme)}
.wf-barra .b-nav-zap{margin-left:0}
@media (max-width:900px){.wf-barra nav{display:none}.wf-barra .b-nav-zap{margin-left:auto}}

/* botão de WhatsApp que acompanha no celular */
.wf-zap-fixo{display:none}
@media (max-width:820px){
  .wf-zap-fixo{display:flex;position:fixed;z-index:60;left:1rem;right:1rem;bottom:calc(.9rem + env(safe-area-inset-bottom));align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1.2rem;border-radius:999px;background:var(--b-creme);color:var(--b-noite);font-weight:600;text-decoration:none;box-shadow:0 14px 30px -10px rgba(0,0,0,.45);transform:translateY(150%);transition:transform .45s var(--curva)}
  .wf-zap-fixo.visivel{transform:none}
  .wf-zap-fixo svg{width:20px;height:20px;fill:currentColor}
}
@media (prefers-reduced-motion:reduce){
  .js [data-surge]{opacity:1;transform:none;transition:none}
  .wf-barra,.wf-zap-fixo{transition:none}
}