
:root{--petroleo:#100F0D;--ocre:#C79E68;--grafite:#211C15;--osso:#F8F1E3;--salvia:#E6D6BB;--osso-2:#FCF6EA;--areia:#F6EBD7;--ocre-bg:#F2C485;--ocre-escuro:#6E5424}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Archivo',sans-serif;color:var(--grafite);background:var(--osso);line-height:1.65;font-weight:400}
h1,h2,h3,.serif{font-family:'Cinzel',serif;font-weight:600;line-height:1.2;color:var(--petroleo);letter-spacing:.03em}
a{color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding:0 28px}
.eyebrow{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ocre-escuro);font-weight:600}
.hero .eyebrow{color:var(--ocre)}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--ocre);background-image:linear-gradient(120deg,#6E5424,var(--ocre) 42%,#e6c45b 52%,var(--ocre) 62%,#6E5424);background-size:220% 100%;background-position:0% 0%;color:var(--petroleo);padding:14px 28px;border-radius:2px;text-decoration:none;font-weight:600;font-size:.95rem;letter-spacing:.02em;border:1px solid var(--ocre);transition:background-position .5s var(--ease),transform .18s var(--ease),box-shadow .22s ease}
.btn:hover,.btn:focus-visible{background-position:100% 0%;transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.4),0 0 28px rgba(199,158,104,.30)}
.btn svg{width:17px;height:17px;fill:currentColor}
.mockbar{background:var(--grafite);color:var(--osso);font-size:.8rem;text-align:center;padding:8px 14px;letter-spacing:.03em}
.mockbar b{color:var(--ocre)}
nav{background:var(--petroleo);color:var(--osso)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 28px}
.brandwrap{display:flex;align-items:center;gap:13px;text-decoration:none}
.mono{height:42px;width:auto;display:block}
.brand{display:flex;flex-direction:column;line-height:1.05}
.brand .nm{font-family:'Cinzel',serif;font-size:1.4rem;color:var(--osso);font-weight:600}
.brand .sub{font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ocre);margin-top:3px}
nav .links{display:flex;gap:24px;align-items:center;font-size:.9rem}
nav .links a{color:var(--osso);text-decoration:none;opacity:.85}
nav .links a:hover{opacity:1;color:var(--ocre)}
.hero{background:var(--petroleo);color:var(--osso);padding:64px 0 70px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-120px;top:-80px;width:380px;height:380px;border:1px solid rgba(199,158,104,.28);border-radius:50%}
.hero .wrap{position:relative;z-index:1;max-width:780px}
.hero h1{color:var(--osso);font-size:2.6rem;margin:14px 0 16px}
.hero p{font-size:1.08rem;color:rgba(244,240,230,.85);max-width:820px;font-weight:300}
.oab-chip{display:inline-block;margin-top:24px;font-size:.78rem;letter-spacing:.04em;color:rgba(244,240,230,.7);border-top:1px solid rgba(244,240,230,.18);padding-top:13px}
section{padding:60px 0}
.prose h2{font-size:1.7rem;margin:0 0 12px}
.prose p{color:#3f382e;max-width:980px;margin-bottom:18px}
.como{background:var(--osso-2)}
.como .box{border-left:3px solid var(--ocre);padding:4px 0 4px 22px;max-width:980px}
.faq{background:var(--areia)}
.faq .qa{max-width:1040px}
.faq details{border-bottom:1px solid var(--salvia);padding:6px 0}
.faq summary{font-family:'Cinzel',serif;font-size:1.18rem;color:var(--petroleo);font-weight:600;cursor:pointer;list-style:none;padding:15px 36px 15px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;top:13px;color:var(--ocre);font-size:1.4rem;transition:.2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{font-size:.95rem;color:#4a4234;padding:0 0 16px;max-width:960px}
.ctaband{background:var(--petroleo);color:var(--osso);text-align:center}
.ctaband h2{color:var(--osso);font-size:1.8rem;margin-bottom:10px}
.ctaband p{color:rgba(244,240,230,.82);max-width:760px;margin:0 auto 26px}
.backlink{display:inline-block;margin-top:18px;font-size:.85rem;color:rgba(244,240,230,.7);text-decoration:none}
.backlink:hover{color:var(--ocre)}
footer{background:#080706;color:rgba(244,240,230,.65);font-size:.82rem;padding:34px 0}
footer b{color:var(--osso);font-family:'Cinzel',serif;font-weight:500}
.note{font-size:.72rem;color:rgba(244,240,230,.6);margin-top:8px;max-width:640px}
.wa-float{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:var(--ocre);color:var(--petroleo);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.3);text-decoration:none;z-index:999;transition:transform .2s}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px;fill:currentColor}
@media(max-width:720px){.hero h1{font-size:1.9rem}nav .links{display:none}}

/* ===================== MOVIMENTO & PROFUNDIDADE (Bold) ===================== */
:root{--ease:cubic-bezier(.22,.61,.36,1);--rise:22px;--dur:.42s;--stagger:80ms}

/* Entrada por scroll — .js-reveal é adicionada por anim.js (sem JS = visível) */
.js-reveal{opacity:0;transform:translateY(var(--rise));transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:calc(var(--i,0)*var(--stagger))}
.js-reveal.is-visible{opacity:1;transform:none}

/* Nav fixo + solidifica ao rolar */
nav{position:sticky;top:0;z-index:40;transition:background .25s var(--ease),box-shadow .25s var(--ease)}
nav.nav--scrolled{background:rgba(16,15,13,.96);box-shadow:0 10px 30px rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
nav.nav--scrolled .wrap{padding-top:11px;padding-bottom:11px}

/* Sublinhado dourado animado nos links (exceto botão) */
nav .links a:not(.btn){background-image:linear-gradient(var(--ocre),var(--ocre));background-position:0 100%;background-repeat:no-repeat;background-size:0% 1.5px;transition:opacity .18s ease,color .18s ease,background-size .26s var(--ease)}
nav .links a:not(.btn):hover,nav .links a:not(.btn):focus-visible{background-size:100% 1.5px}

/* Profundidade dos cartões claros (landing) */
.card,.post{transition:transform .2s var(--ease),box-shadow .25s var(--ease);box-shadow:0 6px 20px rgba(16,15,13,.06)}
.card:hover,.post:hover,.card:focus-within,.post:focus-within{transform:translateY(-4px);box-shadow:0 18px 42px rgba(16,15,13,.13)}
.area{transition:transform .2s var(--ease)}
.area:hover{transform:translateY(-3px)}
.area:hover h3{color:var(--ocre-escuro)}

/* Retrato — leve presença no hover */
.portrait{transition:transform .3s var(--ease),filter .3s ease}
.quem .row:hover .portrait,.portrait:hover{transform:scale(1.02);filter:saturate(1.04) contrast(1.03)}

/* Profundidade nas seções escuras: gradiente-mesh + ruído */
.hero{background:radial-gradient(circle at 16% 12%,rgba(199,158,104,.12),transparent 55%),radial-gradient(circle at 88% 0%,rgba(255,255,255,.05),transparent 52%),var(--petroleo)}
.contato{background:radial-gradient(circle at 82% 18%,rgba(199,158,104,.10),transparent 55%),var(--petroleo)}
.ctaband{background:radial-gradient(circle at 50% 120%,rgba(199,158,104,.14),transparent 60%),var(--petroleo)}
.hero,.contato,.ctaband,footer{position:relative;isolation:isolate}
.hero::before,.contato::before,.ctaband::before,footer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .wrap,.contato .wrap,.ctaband .wrap,footer .wrap{position:relative;z-index:1}

/* Brilho do herói (parallax — elemento real .hero-orb) */
.hero-orb{position:absolute;right:-140px;top:-100px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(199,158,104,.18),transparent 68%);pointer-events:none;z-index:0;will-change:transform}

/* Foco acessível (estático — vale mesmo com motion desligado) */
.btn:focus-visible,.card:focus-within,.post:focus-within,nav .links a:focus-visible,.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible,.backlink:focus-visible{outline:2px solid rgba(199,158,104,.85);outline-offset:3px}

footer .social{display:flex;gap:14px;justify-content:center;margin-top:16px}
footer .social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(199,158,104,.35);color:var(--ocre);transition:transform .2s var(--ease),background .2s ease,color .2s ease,border-color .2s ease}
footer .social a:hover,footer .social a:focus-visible{transform:translateY(-2px);background:var(--ocre);color:var(--petroleo);border-color:var(--ocre)}
footer .social svg{width:19px;height:19px;fill:currentColor}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .btn,.card,.post,.area,.portrait,nav,nav .links a{transition:none!important}
  .hero-orb{display:none}
}
