/* =========================================================
   Advocacia Imobiliária — folha de estilo
   Direção visual: linguagem do memorial descritivo e da
   planta topográfica (o artefato central da usucapião).
   ========================================================= */

:root{
  /* Cor */
  --papel:      #EFF1EB;   /* papel de cartório, frio, levemente esverdeado */
  --papel-2:    #E3E7DE;   /* faixa de apoio */
  --tinta:      #15302A;   /* tinta de registro, verde quase preto */
  --tinta-2:    #406054;   /* texto secundário */
  --tinta-3:    #6E8579;   /* legendas e metadados */
  --linha:      #C6CDC1;   /* fio de divisa */
  --carimbo:    #56469B;   /* violeta de carimbo de cartório */
  --carimbo-luz:#EDEAF6;

  /* Tipografia */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --corpo:   "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --util:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Medidas */
  --larg:    1120px;
  --leitura: 700px;
  --topo:    64px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:17px;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--tinta); text-decoration-color:var(--linha); text-underline-offset:3px; }
a:hover{ text-decoration-color:var(--carimbo); }

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

.env{ width:100%; max-width:var(--larg); margin:0 auto; padding:0 24px; }

.pular{
  position:absolute; left:-9999px; top:0;
  background:var(--tinta); color:var(--papel);
  padding:12px 18px; z-index:99;
}
.pular:focus{ left:12px; top:12px; }

/* ---------------- Cabeçalho ---------------- */

.topo{
  position:sticky; top:0; z-index:40;
  background:rgba(239,241,235,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--linha);
}
.topo-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:var(--topo);
}
.marca{
  font-family:var(--display);
  font-weight:600;
  font-size:19px;
  letter-spacing:-.01em;
  text-decoration:none;
  line-height:1.1;
}
.marca span{
  display:block;
  font-family:var(--util);
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tinta-3);
  margin-top:3px;
  font-weight:400;
}
.nav{ display:flex; gap:26px; align-items:center; }
.nav a{
  font-size:14.5px;
  text-decoration:none;
  color:var(--tinta-2);
  padding:4px 0;
  border-bottom:1.5px solid transparent;
}
.nav a:hover{ color:var(--tinta); border-bottom-color:var(--linha); }
.nav a[aria-current="page"]{ color:var(--tinta); border-bottom-color:var(--carimbo); }

.menu-btn{
  display:none; background:none; border:1px solid var(--linha);
  border-radius:3px; padding:7px 10px; cursor:pointer; color:var(--tinta);
  font-family:var(--util); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}

/* ---------------- Rótulos e fios ---------------- */

.rotulo{
  font-family:var(--util);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--tinta-3);
  display:flex; align-items:center; gap:10px;
  margin:0 0 18px;
}
.rotulo::after{
  content:""; flex:1; height:1px; background:var(--linha);
}

.fio{ border:0; border-top:1px solid var(--linha); margin:0; }

/* ---------------- Hero ---------------- */

.hero{ padding:72px 0 64px; }
.hero-grade{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:56px;
  align-items:center;
}
.hero h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(34px,5.2vw,58px);
  line-height:1.08;
  letter-spacing:-.022em;
  margin:0 0 24px;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 40;
}
.hero h1 em{
  font-style:normal;
  display:block;
  color:var(--carimbo);
}
.hero-sub{
  font-size:19px;
  color:var(--tinta-2);
  max-width:46ch;
  margin:0 0 32px;
}
.hero-acoes{ display:flex; gap:14px; flex-wrap:wrap; }

/* Planta topográfica — elemento-assinatura */
.planta{ width:100%; height:auto; }
.planta .divisa{
  fill:none; stroke:var(--tinta); stroke-width:1.6;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:tracar 2.4s cubic-bezier(.65,.02,.28,1) .25s forwards;
}
.planta .hachura{ stroke:var(--linha); stroke-width:.8; }
.planta .vertice{ fill:var(--papel); stroke:var(--carimbo); stroke-width:1.6; }
.planta .cota{ stroke:var(--tinta-3); stroke-width:.8; stroke-dasharray:3 3; }
.planta text{ font-family:var(--util); fill:var(--tinta-3); font-size:9.5px; letter-spacing:.06em; }
.planta .miolo{ font-family:var(--util); fill:var(--tinta-2); font-size:10.5px; letter-spacing:.18em; }
.planta .surge{ opacity:0; animation:surgir .7s ease 1.9s forwards; }

@keyframes tracar{ to{ stroke-dashoffset:0; } }
@keyframes surgir{ to{ opacity:1; } }

/* ---------------- Botões ---------------- */

.btn{
  display:inline-block;
  font-family:var(--corpo);
  font-size:15px;
  font-weight:500;
  padding:13px 26px;
  border-radius:2px;
  text-decoration:none;
  border:1.5px solid var(--tinta);
  transition:background .18s ease,color .18s ease;
}
.btn-cheio{ background:var(--tinta); color:var(--papel); }
.btn-cheio:hover{ background:var(--carimbo); border-color:var(--carimbo); }
.btn-vazio{ background:transparent; color:var(--tinta); }
.btn-vazio:hover{ background:var(--papel-2); }

/* ---------------- Blocos de seção ---------------- */

.bloco{ padding:68px 0; border-top:1px solid var(--linha); }
.bloco-fundo{ background:var(--papel-2); }

.bloco h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(26px,3.4vw,38px);
  line-height:1.15;
  letter-spacing:-.018em;
  margin:0 0 20px;
  max-width:22ch;
}
.bloco p.intro{ font-size:18px; color:var(--tinta-2); max-width:62ch; margin:0 0 40px; }

/* Situações — cartões de identificação */
.situacoes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;
  background:var(--linha);
  border:1px solid var(--linha);
}
.situacao{
  background:var(--papel);
  padding:30px 26px;
}
.situacao .cod{
  font-family:var(--util); font-size:10.5px; letter-spacing:.18em;
  color:var(--carimbo); text-transform:uppercase; display:block; margin-bottom:12px;
}
.situacao h3{
  font-family:var(--display); font-weight:500; font-size:20px;
  line-height:1.25; margin:0 0 10px; letter-spacing:-.012em;
}
.situacao p{ margin:0; font-size:15.5px; color:var(--tinta-2); }

/* Lista de atuação */
.atuacao{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 32px;
}
.atuacao li{
  padding:13px 0; border-bottom:1px solid var(--linha);
  font-size:16px; display:flex; gap:12px; align-items:baseline;
}
.atuacao li::before{
  content:"—"; color:var(--carimbo); font-family:var(--util); font-size:13px;
}

/* Cartões de artigo */
.artigos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; }
.cartao{
  background:var(--papel);
  border:1px solid var(--linha);
  padding:28px 26px 26px;
  display:flex; flex-direction:column;
  text-decoration:none;
  transition:border-color .18s ease,transform .18s ease;
}
.cartao:hover{ border-color:var(--carimbo); transform:translateY(-2px); }
.cartao .meta{
  font-family:var(--util); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-3); margin-bottom:14px;
}
.cartao h3{
  font-family:var(--display); font-weight:500; font-size:22px;
  line-height:1.22; letter-spacing:-.015em; margin:0 0 12px;
}
.cartao p{ font-size:15.5px; color:var(--tinta-2); margin:0 0 20px; flex:1; }
.cartao .ler{
  font-family:var(--util); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--carimbo);
}

/* Citação-âncora */
.ancora{
  border-left:3px solid var(--carimbo);
  padding:6px 0 6px 28px;
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(21px,2.9vw,29px);
  line-height:1.3;
  letter-spacing:-.015em;
  max-width:26ch;
}

/* ---------------- Artigo ---------------- */

.artigo{ padding:56px 0 24px; }
.artigo-cab{ max-width:var(--leitura); margin:0 auto 40px; }
.artigo-cab .meta{
  font-family:var(--util); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tinta-3); margin:0 0 18px;
}
.artigo-cab h1{
  font-family:var(--display); font-weight:500;
  font-size:clamp(30px,4.4vw,46px); line-height:1.12;
  letter-spacing:-.022em; margin:0 0 20px;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 36;
}
.artigo-cab .resumo{ font-size:19px; color:var(--tinta-2); margin:0; }

.corpo{ max-width:var(--leitura); margin:0 auto; }
.corpo h2{
  font-family:var(--display); font-weight:500;
  font-size:clamp(23px,3vw,30px); line-height:1.2;
  letter-spacing:-.018em; margin:52px 0 16px;
}
.corpo h3{
  font-family:var(--corpo); font-weight:600;
  font-size:18px; line-height:1.35; margin:34px 0 10px;
}
.corpo p{ margin:0 0 20px; }
.corpo ul,.corpo ol{ margin:0 0 22px; padding-left:22px; }
.corpo li{ margin-bottom:9px; }
.corpo strong{ font-weight:600; }

.lei{
  background:var(--carimbo-luz);
  border-left:3px solid var(--carimbo);
  padding:18px 22px;
  margin:0 0 24px;
  font-size:15.5px;
}
.lei .ref{
  font-family:var(--util); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--carimbo); display:block; margin-bottom:7px;
}
.lei p{ margin:0; color:var(--tinta-2); }

.tabela{ width:100%; border-collapse:collapse; margin:0 0 26px; font-size:15px; }
.tabela th,.tabela td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--linha); vertical-align:top;
}
.tabela th{
  font-family:var(--util); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-3); font-weight:400;
  border-bottom:1.5px solid var(--tinta-3);
}
.tabela td:first-child{ font-weight:600; white-space:nowrap; }

.erros{ list-style:none; padding:0; margin:0 0 24px; }
.erros li{
  padding:14px 0 14px 30px; border-bottom:1px solid var(--linha); position:relative;
}
.erros li::before{
  content:"×"; position:absolute; left:6px; top:12px;
  color:var(--carimbo); font-size:19px; line-height:1.2;
}

.faq{ margin:0 0 12px; }
.faq details{ border-bottom:1px solid var(--linha); }
.faq summary{
  cursor:pointer; padding:17px 0; font-weight:600; font-size:16.5px; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--carimbo); font-family:var(--util); font-size:17px; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 18px; color:var(--tinta-2); font-size:16px; }

.fecho{
  max-width:var(--leitura); margin:52px auto 0;
  border-top:1px solid var(--linha); padding-top:28px;
  font-size:16px; color:var(--tinta-2);
}
.fecho p{ margin:0 0 14px; }

/* ---------------- Sobre ---------------- */

.perfil{ display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:start; }
.ficha{
  border:1px solid var(--linha); padding:26px; background:var(--papel);
}
.ficha dl{ margin:0; }
.ficha dt{
  font-family:var(--util); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tinta-3); margin-bottom:5px;
}
.ficha dd{ margin:0 0 20px; font-size:15.5px; }
.ficha dd:last-child{ margin-bottom:0; }

/* ---------------- Contato ---------------- */

.contato{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }

/* ---------------- Rodapé ---------------- */

.rodape{
  border-top:1px solid var(--linha);
  background:var(--tinta);
  color:var(--papel);
  padding:52px 0 32px;
  margin-top:64px;
}
.rodape a{ color:var(--papel); text-decoration-color:rgba(239,241,235,.35); }
.rodape a:hover{ text-decoration-color:var(--papel); }
.rodape-grade{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px;
}
.rodape h4{
  font-family:var(--util); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:400; color:rgba(239,241,235,.5);
  margin:0 0 16px;
}
.rodape ul{ list-style:none; padding:0; margin:0; }
.rodape li{ margin-bottom:9px; font-size:15px; }
.rodape .marca-rod{
  font-family:var(--display); font-size:21px; font-weight:500; margin:0 0 10px;
}
.rodape .texto-rod{ font-size:14.5px; color:rgba(239,241,235,.7); max-width:36ch; margin:0; }
.aviso{
  border-top:1px solid rgba(239,241,235,.18);
  padding-top:24px;
  font-size:12.5px;
  line-height:1.6;
  color:rgba(239,241,235,.6);
  max-width:80ch;
}

/* ---------------- Responsivo ---------------- */

@media (max-width:880px){
  .hero-grade{ grid-template-columns:1fr; gap:40px; }
  .perfil,.contato{ grid-template-columns:1fr; gap:36px; }
  .rodape-grade{ grid-template-columns:1fr; gap:32px; }
}

@media (max-width:680px){
  body{ font-size:16.5px; }
  .env{ padding:0 20px; }
  .hero{ padding:48px 0 44px; }
  .bloco{ padding:52px 0; }
  .menu-btn{ display:block; }
  .nav{
    display:none; position:absolute; top:var(--topo); left:0; right:0;
    background:var(--papel); border-bottom:1px solid var(--linha);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 18px;
  }
  .nav.aberto{ display:flex; }
  .nav a{ padding:12px 0; border-bottom:1px solid var(--linha); }
  .hero-acoes .btn{ width:100%; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .planta .divisa{ stroke-dashoffset:0; }
  .planta .surge{ opacity:1; }
}

@media print{
  .topo,.rodape,.hero-acoes{ display:none; }
  body{ background:#fff; }
}