/* ══════════════════════════════════════════════════════════════
   Autonomia em Saúde — base compartilhada (home, sobre, livro-vivo, blog)
   Paleta da casa: uva/ameixa/vinho/coral/âmbar sobre noite ou papel.
   ══════════════════════════════════════════════════════════════ */
:root{
  --noite:#140E18; --noite2:#1D1322; --uva:#39223A; --ameixa:#5E2F44;
  --vinho:#BC4A5B; --coral:#EB5E50; --ambar:#F39655; --ouro:#F7C08A;
  --papel:#FDFBF7; --tinta:#3A2E33; --suave:#7A6A70; --pena:#CBB9C4;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter","Avenir Next","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--papel); color:var(--tinta);
  line-height:1.65; font-size:17px; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.wrap-texto{max-width:680px;margin:0 auto;padding:0 22px}

/* ---------- navegação ---------- */
.nav{
  position:sticky; top:0; z-index:90;
  background:rgba(20,14,24,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(243,150,85,.14);
}
.nav-in{
  max-width:1060px; margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; gap:18px;
}
.nav-marca{
  font-family:var(--serif); font-weight:700; font-size:1.06rem;
  color:var(--ouro); text-decoration:none; letter-spacing:.04em;
  white-space:nowrap;
}
.nav-links{
  display:flex; gap:4px; margin-left:auto; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  color:#EFE3EA; text-decoration:none; font-size:.86rem; font-weight:500;
  padding:7px 12px; border-radius:20px; white-space:nowrap;
  transition:background .25s,color .25s;
}
.nav-links a:hover{background:rgba(243,150,85,.16); color:var(--ouro)}
.nav-links a.ativo{background:rgba(243,150,85,.22); color:var(--ouro)}

/* ---------- botões ---------- */
.btn{
  display:inline-block; background:var(--ambar); color:var(--uva);
  padding:15px 34px; border-radius:40px; text-decoration:none;
  font-weight:700; font-size:1.02rem; border:0; cursor:pointer;
  font-family:var(--sans);
  box-shadow:0 6px 22px rgba(243,150,85,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(243,150,85,.45)}
.btn-fantasma{
  display:inline-block; color:var(--ouro); text-decoration:none; font-weight:600;
  padding:14px 30px; border:1.5px solid rgba(247,192,138,.55); border-radius:40px;
  font-size:1rem; transition:background .25s,border-color .25s;
}
.btn-fantasma:hover{background:rgba(247,192,138,.12); border-color:var(--ouro)}

/* ---------- reveal ao rolar (só esconde quando o JS está ativo) ---------- */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease,transform .8s ease}
.js .reveal.visto{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ---------- rodapé ---------- */
.rodape{
  background:var(--noite); color:var(--pena); text-align:center;
  padding:46px 22px 40px; font-size:.86rem; line-height:1.8;
}
.rodape a{color:var(--ouro)}
.rodape .bordao{
  font-family:var(--serif); font-size:1.5rem; color:var(--ouro);
  font-style:italic; display:block; margin-bottom:18px;
}
.rodape .aviso{opacity:.75; max-width:560px; margin:0 auto 14px}

/* ---------- tipografia dark ---------- */
.escuro{background:var(--noite); color:#F2E8EE}
.escuro h1,.escuro h2{font-family:var(--serif); color:#FBF4EC; font-weight:600; letter-spacing:-.01em}
.eyebrow{
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ambar); font-weight:600; margin-bottom:18px;
}