/* Base comum do site Ana Lobbo Estética (tokens do 02-conceito/sistema.md).
   O hero (css/hero.css) usa os mesmos valores com prefixo --d-. Seções usam só estes tokens. */
:root{
  --noite:#0b1d19; --garrafa-0:#0f2a24; --garrafa-1:#1a352e; --garrafa-2:#29443d; --oliva:#414220;
  --creme:#efe6d8; --creme-2:#e6d6c1; --papel:#f6f0e6;
  --caramelo:#b0957a; --caramelo-escuro:#7a5f45;
  --ouro:#d6a441; --ouro-2:#b8893a; --ouro-claro:#f0d38c; --ouro-tinta:#8a6424;
  --tinta:#13241f; --tinta-2:#3d4a44;
  --ouro-metal:linear-gradient(in oklab 135deg,#f0d38c,#d6a441 45%,#b8893a);
  --filete:rgb(214 164 65 / .35);
  --serifa:"Bona Nova SC","Bona Nova",Georgia,serif;
  --sans:"Raleway","Helvetica Neue",Arial,sans-serif;
  --margem:clamp(1.25rem,5.4vw,5.5rem);
  --largura:80rem;
  --respiro:clamp(5rem,11vw,10rem);
  --curva:cubic-bezier(.2,.7,.2,1);
  --curva-traco:cubic-bezier(.55,.05,.25,1);
  --whats:"https://wa.me/5561983630483";
}
html{scroll-behavior:auto}
body{font-variant-numeric:lining-nums}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:4px}
.secao{position:relative;isolation:isolate;overflow:clip;padding:var(--respiro) var(--margem)}
.secao--clara{background:var(--papel);color:var(--tinta)}
.secao--escura{background:var(--garrafa-0);color:var(--creme)}
.secao--noite{background:var(--noite);color:var(--creme)}
.miolo{max-width:var(--largura);margin:0 auto}
/* rótulo e título padrão (as seções podem compor diferente) */
.rot{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;margin:0 0 1.2rem;display:flex;align-items:center;gap:.8rem}
.rot::before{content:"";width:2rem;height:1px;background:currentColor;opacity:.6}
.secao--clara .rot{color:var(--caramelo-escuro)}
.secao--escura .rot,.secao--noite .rot{color:var(--caramelo)}
.tit{font-family:var(--serifa);font-weight:400;font-size:clamp(2.2rem,4.2vw,4.2rem);line-height:1.04;letter-spacing:.01em;margin:0;text-wrap:balance}
.tit em{font-style:italic}
.secao--clara .tit em{color:var(--ouro-tinta)}
.secao--escura .tit em,.secao--noite .tit em{color:var(--ouro-claro)}
.secao--clara p{color:var(--tinta-2)}
/* botão dourado e botão contorno */
.btn-ouro{display:inline-flex;align-items:center;gap:.65rem;padding:1rem 1.6rem;border-radius:999px;background:var(--ouro-metal);color:#10251f;text-decoration:none;font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.04em;box-shadow:0 10px 30px rgb(214 164 65 / .22),inset 0 1px 0 rgb(255 255 255 / .45);transition:transform .4s ease,box-shadow .4s ease}
.btn-ouro:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgb(214 164 65 / .32),inset 0 1px 0 rgb(255 255 255 / .45)}
.btn-ouro svg{width:1.25rem;height:1.25rem}
.btn-verde{display:inline-flex;align-items:center;gap:.65rem;padding:1rem 1.6rem;border-radius:999px;background:var(--garrafa-0);color:var(--creme);text-decoration:none;font-weight:600;font-size:1rem;letter-spacing:.04em;transition:transform .4s ease,background .4s}
.btn-verde:hover{transform:translateY(-2px);background:var(--garrafa-1)}
.btn-verde svg{width:1.25rem;height:1.25rem}
.link-ouro{text-underline-offset:.3em;text-decoration-color:rgb(214 164 65 / .7)}
/* revelação: só com JS */
.js [data-rev]{opacity:0;transform:translateY(18px);transition:opacity 1.2s var(--curva),transform 1.2s var(--curva);transition-delay:calc(var(--rev-i,0) * .14s)}
.js [data-rev].is-in{opacity:1;transform:none}
/* granulado único, fixo */
.grao-fixo{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* botão flutuante do WhatsApp (celular) */
.whats-flut{position:fixed;z-index:40;right:1rem;bottom:1rem;display:none;align-items:center;gap:.5rem;padding:.85rem 1.15rem;border-radius:999px;background:var(--ouro-metal);color:#10251f;font-weight:600;text-decoration:none;box-shadow:0 12px 30px rgb(0 0 0 / .35);transform:translateY(140%);transition:transform .5s var(--curva)}
.whats-flut svg{width:1.3rem;height:1.3rem}
.whats-flut.is-on{transform:none}
@media (max-width:979px){.whats-flut{display:inline-flex}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .js [data-rev]{opacity:1;transform:none}
  .whats-flut{transition:none}
}