/* Silva Prado Advocacia: estilo do site consultivo.
   Paleta tirada do timbre (losangos cinza do SP). Fontes hospedadas no próprio site (licença SIL OFL 1.1),
   sem pedido a servidor de terceiro. */

@font-face {
  font-family: "Source Serif 4";
  src: url("fontes/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fontes/source-serif-4-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fontes/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tinta: #1f1c1b;
  --tinta-suave: #4d4745;
  --pedra-escura: #5b5351;
  --pedra: #9b9391;
  --nevoa: #cdc9c8;
  --nevoa-clara: #e4e1e0;
  --papel: #ffffff;
  --papel-cinza: #f4f3f2;
  --alerta: #8a2b2b;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --texto: 40rem;
  --pagina: 72rem;
  --margem: clamp(1rem, 4vw, 2.5rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  font-optical-sizing: auto;
}

img, svg { max-width: 100%; }

a {
  color: var(--tinta);
  text-decoration-line: underline;
  text-decoration-color: var(--pedra);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--pedra-escura); text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--papel);
  padding: 0.75rem 1rem;
  z-index: 20;
}
.pular:focus { left: 0.5rem; top: 0.5rem; }

/* ---------------------------------------------------------------- topo */

.topo {
  border-bottom: 1px solid var(--nevoa-clara);
  background: var(--papel);
}
.topo-miolo {
  max-width: var(--pagina);
  margin: 0 auto;
  padding: 0.75rem var(--margem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--tinta);
  margin-right: auto;
}
.monograma { width: 2.75rem; height: 2.75rem; flex: none; }
.monograma-letra { font-family: var(--serif); font-size: 25px; font-weight: 500; fill: #ffffff; }
.marca-nome {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0;
}
.menu ul, .menu-movel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu ul { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.menu a, .menu-movel a {
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--tinta-suave);
  text-decoration: none;
}
.menu a:hover, .menu a[aria-current="page"] {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--pedra);
  text-underline-offset: 0.35em;
}
.topo-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--pedra-escura);
  text-decoration: none;
  border: 1px solid var(--nevoa);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}
.topo-whatsapp:hover { border-color: var(--pedra-escura); }
.icone { width: 1.15em; height: 1.15em; flex: none; }

.menu-movel { display: none; position: relative; }
.menu-movel summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--nevoa);
  border-radius: 2px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.menu-movel summary::-webkit-details-marker { display: none; }
.menu-movel[open] summary { border-color: var(--pedra-escura); }
.menu-movel nav {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: var(--papel);
  border: 1px solid var(--nevoa);
  padding: 0.5rem 0;
  min-width: 15rem;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(31, 28, 27, 0.08);
}
.menu-movel li a {
  display: block;
  padding: 0.7rem 1.1rem;
  font-size: 1.05rem;
  color: var(--tinta);
}
.menu-movel li a[aria-current="page"] { font-weight: 600; }

@media (max-width: 62rem) {
  .menu { display: none; }
  .menu-movel { display: block; }
  .marca-nome { font-size: 0.8rem; letter-spacing: 0.22em; }
  .topo-whatsapp { display: none; }
}
@media (max-width: 24rem) {
  .marca-nome { display: none; }
}

/* ---------------------------------------------------------------- conteúdo */

main { display: block; }

.miolo {
  max-width: var(--pagina);
  margin: 0 auto;
  padding: 2.5rem var(--margem) 3.5rem;
}
.miolo > * { max-width: var(--texto); }
.miolo > .largo { max-width: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.18;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  letter-spacing: -0.012em;
  margin: 0 0 1rem;
}
h2 {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.8rem);
  margin: 2.75rem 0 0.75rem;
}
h3 {
  font-size: 1.22rem;
  margin: 2rem 0 0.5rem;
}
p { margin: 0 0 1.05rem; }
ul, ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
li { margin-bottom: 0.45rem; }
li::marker { color: var(--pedra-escura); }
strong { font-weight: 600; }

.entrada {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  margin-bottom: 1.75rem;
}
.caminho {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--tinta-suave);
  margin-bottom: 1.25rem;
}
.caminho a { color: var(--tinta-suave); }

.nota {
  background: var(--papel-cinza);
  border-left: 3px solid var(--pedra);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.nota p:last-child, .nota ul:last-child { margin-bottom: 0; }
.nota-titulo {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  margin: 0 0 0.35rem;
}

.rolagem-tabela { overflow-x: auto; margin: 1.25rem 0 1.5rem; }
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 1rem;
  line-height: 1.45;
}
caption {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--tinta-suave);
  padding-bottom: 0.5rem;
}
th, td {
  text-align: left;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--nevoa-clara);
  vertical-align: top;
}
thead th {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--tinta-suave);
  border-bottom-color: var(--nevoa);
}
td.valor, th.valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-faixas td { font-variant-numeric: tabular-nums; }

/* sequência numerada (só onde o conteúdo é mesmo uma ordem de passos) */
.passos {
  list-style: none;
  counter-reset: passo;
  padding: 0;
  margin: 1.5rem 0 2rem;
}
.passos > li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 1.25rem 3.25rem;
  margin: 0;
  border-left: 1px solid var(--nevoa);
  margin-left: 1.1rem;
}
.passos > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.passos > li::before {
  content: counter(passo);
  position: absolute;
  left: -1.1rem;
  top: -0.1rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--papel);
  border: 1px solid var(--pedra);
  color: var(--pedra-escura);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 2.1rem;
  text-align: center;
}
.passos h3, .passos h2 { margin-top: 0; }

.indice {
  font-family: var(--sans);
  font-size: 1rem;
  border-top: 1px solid var(--nevoa-clara);
  border-bottom: 1px solid var(--nevoa-clara);
  padding: 1rem 0;
  margin: 1.5rem 0 2rem;
}
.indice p { margin: 0 0 0.4rem; color: var(--tinta-suave); }
.indice ol { margin: 0; }
.indice li { margin-bottom: 0.25rem; }

.fontes {
  font-size: 0.98rem;
  color: var(--tinta-suave);
  line-height: 1.55;
}
.fontes li { margin-bottom: 0.5rem; }
.fontes a { color: var(--tinta-suave); overflow-wrap: anywhere; }

details.perguntas { border-top: 1px solid var(--nevoa-clara); }
details.perguntas:last-of-type { border-bottom: 1px solid var(--nevoa-clara); }
details.perguntas summary {
  cursor: pointer;
  padding: 0.9rem 0;
  font-weight: 600;
  list-style-position: outside;
}
details.perguntas[open] summary { padding-bottom: 0.4rem; }
details.perguntas > div { padding-bottom: 0.9rem; }

.lista-cidades {
  columns: 2 14rem;
  column-gap: 2rem;
  padding-left: 1.1rem;
}

/* ---------------------------------------------------------------- abertura da página inicial */

.abertura {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--nevoa-clara);
}
.abertura-miolo {
  max-width: var(--pagina);
  margin: 0 auto;
  padding: 0 var(--margem);
  display: grid;
  grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 1.4fr);
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  min-height: 30rem;
}
.abertura-losangos {
  align-self: stretch;
  position: relative;
  margin-left: calc(-1 * var(--margem) - 3rem);
}
.losangos {
  position: absolute;
  top: 50%;
  right: 0;
  width: min(34rem, 110%);
  height: auto;
  transform: translateY(-50%);
}
.losangos-letra { font-family: var(--serif); font-size: 24px; font-weight: 400; fill: #ffffff; }
.abertura-texto { padding: 3.5rem 0; max-width: 38rem; }
.abertura h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); }
.abertura-sub { font-size: 1.25rem; line-height: 1.55; color: var(--tinta-suave); }
.abertura-acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 1.5rem; }
.abertura-guia { font-size: 1.05rem; margin: 0; }

@media (max-width: 48rem) {
  .abertura-miolo { grid-template-columns: 1fr; min-height: 0; }
  .abertura-losangos { height: 9.5rem; overflow: hidden; margin-left: calc(-1 * var(--margem)); margin-right: calc(-1 * var(--margem)); }
  .losangos { width: 9rem; left: -1.5rem; right: auto; }
  .abertura-texto { padding: 0.5rem 0 2.5rem; }
}

.faixa-inicio {
  max-width: var(--pagina);
  margin: 0 auto;
  padding: 1rem var(--margem) 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.faixa-inicio section { max-width: var(--texto); }
.faixa-inicio h2 { font-size: 1.4rem; margin-top: 2.25rem; }

/* ---------------------------------------------------------------- botões e formulários */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.35rem;
  background: var(--pedra-escura);
  color: #ffffff;
  border: 1px solid var(--pedra-escura);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.botao:hover { background: var(--tinta); border-color: var(--tinta); color: #ffffff; }
.botao-secundario { background: var(--papel); color: var(--pedra-escura); }
.botao-secundario:hover { background: var(--papel-cinza); color: var(--tinta); border-color: var(--tinta); }

.contato {
  background: var(--papel-cinza);
  border-top: 1px solid var(--nevoa-clara);
}
.contato-miolo {
  max-width: var(--pagina);
  margin: 0 auto;
  padding: 2.5rem var(--margem) 3rem;
}
.contato-miolo > * { max-width: var(--texto); }
.contato h2 { margin-top: 0; }
.contato-canais { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 1.25rem 0 1.75rem; }
.contato-canais p { margin: 0; }

.formulario { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: 0.35rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo label, .campo legend {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  padding: 0;
}
.opcoes { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.3rem; }
.opcoes label { font-weight: 400; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; }
input[type="text"], input[type="date"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 1.1rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--pedra);
  border-radius: 2px;
  padding: 0.6rem 0.75rem;
  min-height: 48px;
}
textarea { resize: vertical; min-height: 7rem; }
input[type="radio"], input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--pedra-escura); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--alerta); border-width: 2px; }
.dica { font-size: 0.95rem; color: var(--tinta-suave); margin: 0.2rem 0 0; }
.erro-campo { font-family: var(--sans); font-size: 0.95rem; color: var(--alerta); margin: 0.2rem 0 0; }
.aviso-privacidade { font-size: 0.98rem; color: var(--tinta-suave); margin: 0.25rem 0 0; }
.formulario .botao { justify-self: start; }
.formulario-retorno:empty { display: none; }
/* armadilha contra robô: pessoa não vê nem alcança pelo teclado; robô que preenche tudo se denuncia */
.campo-armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulario-retorno {
  background: var(--papel);
  border: 1px solid var(--nevoa);
  padding: 1rem 1.25rem;
}
.formulario-retorno p:last-child { margin-bottom: 0; }
.formulario-retorno dl { margin: 0.5rem 0 1rem; font-size: 1rem; }
.formulario-retorno dt { font-family: var(--sans); font-weight: 500; }
.formulario-retorno dd { margin: 0 0 0.5rem; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- calculadora */

.calculadora {
  background: var(--papel-cinza);
  border: 1px solid var(--nevoa-clara);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin: 1.5rem 0 2rem;
  max-width: 46rem;
}
.calculadora .formulario { gap: 1.2rem; }
.calculadora fieldset.campo { border: 0; }
.abas { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 0.5rem; }
.abas label { font-family: var(--sans); font-size: 1.05rem; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.grupo-divorcio[hidden], .grupo-inventario[hidden] { display: none; }
.campo .dica-marcar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
}
.dinheiro { position: relative; }
.dinheiro span {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-suave);
  font-size: 1.05rem;
  pointer-events: none;
}
.dinheiro input { padding-left: 2.6rem; font-variant-numeric: tabular-nums; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.2rem; }
.resultado:empty { display: none; }
.resultado {
  background: var(--papel);
  border: 1px solid var(--nevoa);
  padding: 1.25rem 1.25rem 0.5rem;
  margin-top: 1.5rem;
}
.resultado h2 { font-size: 1.35rem; margin: 0 0 0.75rem; }
.resultado table { margin-bottom: 1rem; }
.resultado .linha-total td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--pedra); }
.resultado .observacoes { font-size: 1rem; color: var(--tinta-suave); }
.resultado .erro { color: var(--alerta); font-family: var(--sans); }

/* ---------------------------------------------------------------- WhatsApp flutuante */

.whatsapp-flutuante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.1rem;
  background: var(--pedra-escura);
  color: #ffffff;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(31, 28, 27, 0.18);
}
.whatsapp-flutuante:hover { background: var(--tinta); color: #ffffff; }

/* ---------------------------------------------------------------- rodapé */

.rodape { border-top: 1px solid var(--nevoa); background: var(--papel); }
.rodape-miolo {
  max-width: var(--pagina);
  margin: 0 auto;
  padding: 2rem var(--margem) 5.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}
.rodape-marca { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.monograma-rodape { width: 2.25rem; height: 2.25rem; }
.rodape .marca-nome { color: var(--tinta); }
.rodape p { margin: 0 0 0.75rem; }
.rodape a { color: var(--tinta-suave); }

/* ---------------------------------------------------------------- impressão */

@media print {
  .topo nav, .menu-movel, .topo-whatsapp, .contato, .whatsapp-flutuante, .pular { display: none !important; }
  body { font-size: 11pt; }
  a { text-decoration: none; }
  .miolo { padding: 0; }
}