/* ===========================================================
   DM ADVOCACIA — preto & dourado
   =========================================================== */

:root{
  --preto:#0a0a0a;
  --preto-2:#111111;
  --preto-3:#161513;
  --carvao:#1e1c19;
  --ouro:#c9a227;
  --ouro-claro:#e0c273;
  --ouro-suave:#d4af6a;
  --creme:#f2ede3;
  --texto:#e9e4da;
  --texto-2:#b9b2a4;
  --linha:rgba(201,162,39,.22);
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--preto);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.18;margin:0;text-wrap:balance}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ouro);color:#000;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px;border-radius:4px}

/* ---------- eyebrow / títulos de seção ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--ouro-suave);
  margin:0 0 14px;
  font-weight:600;
}
.eyebrow::after{
  content:"";display:block;width:44px;height:2px;
  background:linear-gradient(90deg,var(--ouro),transparent);
  margin-top:10px;
}

/* ===========================================================
   TOPO
   =========================================================== */
.topo{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,.82);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s,border-color .3s;
}
.topo.is-solid{background:rgba(10,10,10,.97);border-bottom-color:var(--linha)}
.topo__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}

.marca{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.marca__logo{width:auto;height:42px;flex-shrink:0}
.marca__logo--rodape{height:54px}
.marca__txt{display:flex;flex-direction:column;line-height:1.15}
.marca__txt b{font-family:var(--serif);font-size:18px;letter-spacing:.05em;color:var(--creme)}
.marca__txt i{font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-suave);margin-top:3px}

.menu-btn{
  width:44px;height:44px;border:1px solid var(--linha);background:transparent;
  display:grid;place-content:center;gap:5px;cursor:pointer;padding:0;border-radius:2px;
}
.menu-btn span{display:block;width:20px;height:1.6px;background:var(--ouro-claro);transition:transform .3s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

.nav{
  position:fixed;inset:70px 0 auto 0;
  background:rgba(8,8,8,.99);
  border-bottom:1px solid var(--linha);
  display:flex;flex-direction:column;padding:8px 22px 24px;
  transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s,transform .25s,visibility .25s;
  max-height:calc(100vh - 70px);overflow-y:auto;
}
.nav.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nav a{
  text-decoration:none;padding:15px 2px;font-size:16px;color:var(--texto);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav a:last-child{border-bottom:0}
.nav__cta{
  margin-top:18px;text-align:center;background:var(--ouro);color:#0a0a0a!important;
  font-weight:700;border:0!important;border-radius:2px;padding:15px 20px!important;
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position:relative;
  padding:56px 0 64px;
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(201,162,39,.13),transparent 58%),
    linear-gradient(180deg,#0d0c0a,var(--preto) 70%);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ouro),transparent);opacity:.5;
}
.hero__in{display:grid;gap:44px}

.hero__logo{width:auto;height:70px;margin-bottom:24px}
.hero__txt h1{
  font-size:clamp(46px,12vw,66px);
  letter-spacing:.05em;
  background:linear-gradient(100deg,#f3e2b4,var(--ouro-suave) 42%,#a8801d 88%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  margin-bottom:20px;
}
.hero__txt h1 span{
  display:block;
  font-family:var(--sans);font-weight:500;
  font-size:clamp(13px,3.3vw,16px);
  letter-spacing:.30em;text-transform:uppercase;
  color:var(--ouro-suave);
  -webkit-text-fill-color:var(--ouro-suave);
  margin-top:10px;
}
.hero__slogan{
  font-family:var(--serif);
  font-size:clamp(19px,4.6vw,23px);
  line-height:1.45;
  color:var(--creme);
  margin-bottom:20px;
}
.hero__lead{color:var(--texto-2);max-width:46ch;margin-bottom:28px}
.hero__acoes{display:flex;flex-wrap:wrap;gap:12px}
.hero__nota{
  margin-top:20px;font-size:13.5px;letter-spacing:.05em;color:var(--texto-2);
  padding-left:14px;border-left:2px solid var(--ouro);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 26px;font-size:15.5px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;border-radius:2px;transition:transform .2s,box-shadow .25s,background .25s,color .25s;
}
.btn--ouro{
  background:linear-gradient(100deg,var(--ouro-claro),var(--ouro));
  color:#0a0a0a;box-shadow:0 8px 26px rgba(201,162,39,.22);
}
.btn--ouro:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(201,162,39,.32)}
.btn--linha{border:1px solid var(--linha);color:var(--texto)}
.btn--linha:hover{border-color:var(--ouro);color:var(--ouro-claro)}

.hero__foto{position:relative;justify-self:center;max-width:420px;width:100%}
.hero__foto img{
  position:relative;z-index:2;
  filter:contrast(1.04) saturate(.96);
  box-shadow:0 30px 70px rgba(0,0,0,.7);
}
.hero__foto-borda{
  position:absolute;z-index:1;
  inset:16px -16px -16px 16px;
  border:1px solid var(--ouro);opacity:.55;
}

/* ===========================================================
   FAIXA
   =========================================================== */
.faixa{
  background:linear-gradient(100deg,#14120d,#0f0e0c);
  border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
}
.faixa__in{display:flex;gap:16px;align-items:flex-start;padding-top:26px;padding-bottom:26px}
.faixa__ic{width:28px;height:28px;flex-shrink:0;color:var(--ouro);margin-top:3px}
.faixa p{font-size:16px;color:var(--texto-2);max-width:74ch}
.faixa b{color:var(--creme)}

/* ===========================================================
   SEÇÕES
   =========================================================== */
.sec{padding:70px 0}
.sec--escuro{background:linear-gradient(180deg,#0e0d0b,#0a0a0a)}
.sec--contato{
  background:
    radial-gradient(90% 70% at 50% 0%,rgba(201,162,39,.10),transparent 60%),
    #0c0b09;
  border-top:1px solid var(--linha);
}
.sec__cab{margin-bottom:44px;max-width:60ch}
.sec__cab h2{font-size:clamp(27px,6.4vw,38px);color:var(--creme);margin-bottom:16px}
.sec__sub{color:var(--texto-2)}

/* ---------- áreas ---------- */
.areas{display:grid;gap:20px}
.area{
  background:linear-gradient(165deg,var(--carvao),var(--preto-2));
  border:1px solid rgba(255,255,255,.07);
  border-radius:3px;
  position:relative;
  overflow:hidden;
  transition:border-color .3s;
  scroll-margin-top:88px;
}
.area::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--ouro);
  transform:scaleX(.18);transform-origin:left;transition:transform .45s;
}
.area:hover{border-color:var(--linha)}
.area:hover::before{transform:scaleX(1)}

/* arte clicável */
.area__arte{
  display:block;position:relative;width:100%;
  border:0;padding:0;margin:0;background:#000;cursor:zoom-in;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.area__arte img{width:100%;height:auto;transition:opacity .3s,transform .5s}
.area__arte:hover img{opacity:.82;transform:scale(1.015)}
.area__lupa{
  position:absolute;right:14px;bottom:14px;
  width:42px;height:42px;padding:10px;border-radius:50%;
  background:rgba(10,10,10,.72);border:1px solid var(--linha);color:var(--ouro-claro);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .3s,border-color .3s;
}
.area__arte:hover .area__lupa{background:rgba(201,162,39,.9);color:#0a0a0a;border-color:var(--ouro)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.area__txt{padding:28px 24px 30px}
.area h3{font-size:23px;color:var(--creme);margin-bottom:12px}
.area__tag{color:var(--ouro-suave);font-size:16px;line-height:1.6;margin-bottom:20px}
.area__nota{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);
  color:var(--texto-2);font-size:15px;font-style:italic;
}

.serv{list-style:none;margin:0;padding:0}
.serv li{
  position:relative;padding-left:21px;margin-bottom:14px;
  font-size:15px;color:var(--texto-2);line-height:1.55;
}
.serv li:last-child{margin-bottom:0}
.serv li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:7px;height:7px;border:1px solid var(--ouro);transform:rotate(45deg);
}
.serv b{
  display:block;font-family:var(--sans);font-weight:600;
  font-size:15.5px;color:var(--texto);margin-bottom:2px;
}

.areas__nota{
  margin-top:34px;text-align:center;color:var(--texto-2);font-size:16px;
  max-width:58ch;margin-left:auto;margin-right:auto;
}

/* ---------- blocos duplos (foto + texto) ---------- */
.dupla{display:grid;gap:38px;align-items:center}
.dupla__foto img{
  width:100%;
  border:1px solid var(--linha);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  filter:contrast(1.03) saturate(.96);
}
.dupla__txt h2{font-size:clamp(26px,6vw,36px);color:var(--creme);margin-bottom:18px}
.dupla__txt p{color:var(--texto-2)}

.checks{list-style:none;margin:26px 0 0;padding:0}
.checks li{
  position:relative;padding-left:30px;margin-bottom:13px;
  color:var(--texto);font-size:16px;line-height:1.6;
}
.checks li:last-child{margin-bottom:0}
.checks li::before{
  content:"";position:absolute;left:2px;top:.42em;
  width:13px;height:7px;border-left:2px solid var(--ouro);border-bottom:2px solid var(--ouro);
  transform:rotate(-45deg);
}

/* ---------- passos ---------- */
.passos{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:p}
.passos li{
  position:relative;
  background:linear-gradient(165deg,var(--preto-3),var(--preto-2));
  border:1px solid rgba(255,255,255,.07);
  border-left:2px solid var(--ouro);
  padding:26px 24px 26px 22px;
}
.passos__n{
  display:block;font-family:var(--serif);font-size:15px;letter-spacing:.14em;
  color:var(--ouro);margin-bottom:10px;
}
.passos h3{font-size:19.5px;color:var(--creme);margin-bottom:9px}
.passos p{color:var(--texto-2);font-size:16px}

/* ---------- contato ---------- */
.contato{display:grid;gap:14px}
.cartao{
  display:flex;gap:16px;align-items:center;
  text-decoration:none;
  background:linear-gradient(150deg,var(--carvao),var(--preto-2));
  border:1px solid rgba(255,255,255,.08);
  padding:22px 20px;border-radius:3px;
  transition:border-color .3s,transform .25s,background .3s;
}
.cartao:hover{border-color:var(--ouro);transform:translateY(-2px)}
.cartao__ic{
  width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--linha);color:var(--ouro);border-radius:50%;padding:11px;
}
.cartao--zap .cartao__ic{background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.4);color:#25d366}
.cartao--zap:hover{border-color:rgba(37,211,102,.55)}
.cartao__txt{display:flex;flex-direction:column;min-width:0}
.cartao__txt b{
  font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ouro-suave);font-weight:600;margin-bottom:5px;
}
.cartao__txt i{font-style:normal;font-size:16.5px;color:var(--creme);line-height:1.4;word-break:break-word}
.cartao__txt em{font-style:normal;font-size:13.5px;color:var(--texto-2);margin-top:5px}

.contato__horario{
  margin-top:32px;padding:22px 24px;
  border:1px solid var(--linha);
  background:rgba(201,162,39,.05);
  color:var(--texto-2);font-size:16px;
}
.contato__horario b{color:var(--ouro-claro);display:block;margin-bottom:4px}

/* ===========================================================
   RODAPÉ
   =========================================================== */
.rodape{background:#070706;border-top:1px solid var(--linha);padding:52px 0 110px}
.rodape__marca{margin-bottom:38px}
.rodape__logo{width:auto;height:112px}
.rodape__oab{
  margin-top:14px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ouro-suave);font-weight:600;
}

.rodape__cols{display:grid;gap:30px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.07)}
.rodape__cols h4{
  font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ouro-suave);margin-bottom:14px;font-weight:600;
}
.rodape__cols a{display:block;text-decoration:none;color:var(--texto-2);font-size:15.5px;padding:5px 0;transition:color .2s}
.rodape__cols a:hover{color:var(--ouro-claro)}
.rodape__cols p{color:var(--texto-2);font-size:15.5px;margin-bottom:14px;line-height:1.65}
.rodape__cols p b{color:var(--ouro-suave);letter-spacing:.06em}

.rodape__legal{margin-top:30px;font-size:13.5px;color:#8b8577;max-width:78ch;line-height:1.7}
.rodape__copy{margin-top:16px;font-size:13.5px;color:#8b8577}

/* ===========================================================
   BOTÃO FLUTUANTE
   =========================================================== */
.zap-flut{
  position:fixed;right:16px;bottom:16px;z-index:90;
  display:flex;align-items:center;gap:9px;
  background:#25d366;color:#04270f;
  padding:13px 18px 13px 15px;border-radius:100px;
  text-decoration:none;font-weight:700;font-size:15px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform .25s,box-shadow .25s;
}
.zap-flut svg{width:23px;height:23px;flex-shrink:0;stroke:none}
.zap-flut:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(37,211,102,.3)}

/* ===========================================================
   LIGHTBOX
   =========================================================== */
.lb{
  position:fixed;inset:0;z-index:200;
  background:rgba(4,4,4,.96);
  display:flex;align-items:center;justify-content:center;
  padding:56px 14px 20px;
  overflow-y:auto;
}
.lb[hidden]{display:none}
.lb__fig{margin:0;max-width:min(720px,100%);text-align:center}
.lb__fig img{
  width:100%;height:auto;
  border:1px solid var(--linha);
  box-shadow:0 24px 70px rgba(0,0,0,.8);
}
.lb__fig figcaption{
  margin-top:14px;font-size:14px;color:var(--texto-2);letter-spacing:.03em;
}
.lb__fechar{
  position:fixed;top:12px;right:14px;
  width:46px;height:46px;line-height:1;
  font-size:30px;color:var(--ouro-claro);
  background:rgba(20,18,14,.9);border:1px solid var(--linha);border-radius:50%;
  cursor:pointer;transition:background .25s,color .25s;
}
.lb__fechar:hover{background:var(--ouro);color:#0a0a0a}

/* ===========================================================
   ANIMAÇÃO
   =========================================================== */
/* só esconde se o JS estiver ativo — sem JS, o conteúdo aparece normalmente */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===========================================================
   RESPONSIVO
   =========================================================== */
@media (min-width:640px){
  .areas{grid-template-columns:1fr 1fr;align-items:start}
  .passos{grid-template-columns:1fr 1fr}
  .contato{grid-template-columns:1fr 1fr}
  .rodape__cols{grid-template-columns:1fr 1fr}
}

@media (min-width:900px){
  body{font-size:17.5px}
  .wrap{padding:0 34px}
  .sec{padding:98px 0}
  .hero{padding:82px 0 96px}
  .hero__in{grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
  .hero__foto{justify-self:end;max-width:430px}
  .hero__logo{height:86px;margin-bottom:28px}
  .hero__txt h1{font-size:clamp(52px,5.4vw,66px)}

  .menu-btn{display:none}
  .nav{
    position:static;inset:auto;flex-direction:row;align-items:center;gap:26px;
    background:transparent;border:0;padding:0;opacity:1;visibility:visible;
    transform:none;pointer-events:auto;max-height:none;overflow:visible;
  }
  .nav a{
    border:0;padding:6px 0;font-size:14.5px;color:var(--texto-2);
    position:relative;transition:color .25s;
  }
  .nav a:not(.nav__cta)::after{
    content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ouro);transition:width .3s;
  }
  .nav a:hover{color:var(--ouro-claro)}
  .nav a:not(.nav__cta):hover::after{width:100%}
  .nav__cta{margin:0;padding:11px 20px!important;font-size:14px}

  .dupla{grid-template-columns:.92fr 1.08fr;gap:64px}
  .dupla--inv .dupla__txt{order:1}
  .dupla--inv .dupla__foto{order:2}
  .dupla__foto{max-width:440px}

  .areas{grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .passos{grid-template-columns:repeat(4,1fr)}
  .contato{grid-template-columns:repeat(2,1fr);gap:18px}
  .rodape__cols{grid-template-columns:1fr 1fr 1.3fr;gap:44px}
  .rodape{padding:70px 0 60px}
  .zap-flut{right:26px;bottom:26px}
}

@media (min-width:1100px){
  .contato{grid-template-columns:repeat(4,1fr)}
  .cartao{flex-direction:column;align-items:flex-start;gap:18px;padding:28px 24px}
  .areas{grid-template-columns:repeat(3,1fr)}
  .lb{padding:70px 24px 32px}
  .lb__fig{max-width:min(760px,100%)}
}