/* =====================================================================
   Todos os valores vêm do Open Props (open-props.style).
   Regra: nada de números soltos. Só variáveis --cor-*, --size-*, --radius-*,
   --shadow-*, --font-*, --ease-*. Exceção inevitável: os pontos de quebra
   dos @media, porque CSS não aceita variáveis ali.
   ===================================================================== */

/* ===== Nomes da marca, apontando para as variáveis do Open Props ===== */
:root {
  --esmeralda: var(--teal-11);
  --esmeralda-profunda: var(--teal-12);
  --esmeralda-clara: var(--stone-1);
  --borda-escura: var(--teal-10);
  --marca-texto: var(--yellow-4);
  --marca-texto-hover: var(--yellow-5);
  --papel: var(--stone-0);
  --tinta: var(--gray-10);
  --tinta-suave: var(--gray-7);
  --linha: var(--stone-4);
  --claro: var(--gray-0);
  --claro-suave: var(--gray-4);
  --claro-apagado: var(--gray-5);
  --whatsapp: var(--green-6);
  --fonte: "Schibsted Grotesk", var(--font-sans);
  --shadow-color: 165 90% 5%;
  --shadow-strength: 20%;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: var(--size-10); }

body {
  font-family: var(--fonte);
  color: var(--tinta);
  background: white;
  font-size: var(--font-size-2);
  line-height: var(--font-lineheight-3);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: var(--font-lineheight-0); }
h2 {
  font-size: var(--font-size-fluid-2);
  font-weight: var(--font-weight-7);
  margin-bottom: var(--size-3);
  max-width: var(--size-header-1);
}
h3 { font-size: var(--font-size-3); font-weight: var(--font-weight-7); }
p + p { margin-top: var(--size-3); }
a { color: inherit; }

:focus-visible { outline: var(--border-size-2) solid var(--marca-texto); outline-offset: var(--size-1); border-radius: var(--radius-2); }

.container { width: 100%; max-width: calc(var(--size-lg) + 2 * var(--size-fluid-4)); margin: 0 auto; padding: 0 var(--size-fluid-3); }

/* ===== Botões ===== */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--size-2);
  background: var(--marca-texto);
  color: var(--tinta);
  font-weight: var(--font-weight-7);
  text-decoration: none;
  padding: var(--size-3) var(--size-5);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  transition: background .15s var(--ease-2);
}
.botao:hover { background: var(--marca-texto-hover); }
.botao--grande { padding: var(--size-4) var(--size-7); font-size: var(--font-size-3); }
.botao--escuro { background: var(--esmeralda-profunda); color: var(--claro); box-shadow: var(--shadow-4); }
.botao--escuro:hover { background: var(--esmeralda); }
.icone-whats { width: var(--size-5); height: var(--size-5); flex-shrink: 0; }

/* ===== Cabeçalho ===== */
.topo { position: sticky; top: 0; z-index: var(--layer-3); background: var(--esmeralda-profunda); color: var(--claro); border-bottom: var(--border-size-1) solid var(--borda-escura); }
.topo__inner { display: flex; align-items: center; gap: var(--size-7); min-height: var(--size-9); padding-top: var(--size-2); padding-bottom: var(--size-2); }
.marca { display: flex; align-items: center; gap: var(--size-3); text-decoration: none; margin-right: auto; }
.marca__logo { width: var(--size-7); height: var(--size-7); flex-shrink: 0; font-family: var(--fonte); }
.marca__textos { display: flex; flex-direction: column; line-height: var(--font-lineheight-0); }
.marca__nome { font-size: var(--font-size-2); font-weight: var(--font-weight-8); }
.marca__sub { font-size: var(--font-size-0); color: var(--claro-apagado); }
.menu { display: flex; gap: var(--size-7); }
.menu a { text-decoration: none; font-size: var(--font-size-1); color: var(--claro-suave); }
.menu a:hover { color: var(--claro); }
.topo__fone {
  font-weight: var(--font-weight-7); font-size: var(--font-size-1); text-decoration: none; white-space: nowrap;
  padding: var(--size-2) var(--size-3);
  border: var(--border-size-1) solid var(--borda-escura); border-radius: var(--radius-2);
}
.topo__fone:hover { border-color: var(--marca-texto); color: var(--marca-texto); }

/* ===== Hero ===== */
.hero { background: var(--esmeralda-profunda); color: var(--claro); }
.hero__grid {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--size-10); align-items: end;
  padding-top: var(--size-fluid-6); padding-bottom: var(--size-fluid-6);
}
.hero h1 {
  font-size: calc(var(--font-size-fluid-3) * 1.2);
  font-weight: var(--font-weight-8);
  line-height: var(--font-lineheight-00);
  max-width: var(--size-header-1);
}
/* Traço amarelo sob o título */
.hero h1::after {
  content: ""; display: block;
  width: var(--size-10); height: var(--size-2);
  margin-top: var(--size-5);
  background: var(--marca-texto); border-radius: var(--radius-round);
}

/* Faixa amarela de confiança */
.faixa { background: var(--marca-texto); color: var(--tinta); }
.faixa__lista {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--size-7);
  padding-top: var(--size-6); padding-bottom: var(--size-6);
}
.faixa__lista li { font-size: var(--font-size-1); line-height: var(--font-lineheight-2); }
.faixa__lista strong { display: block; font-size: var(--font-size-3); font-weight: var(--font-weight-8); }
.hero__sub { margin-top: var(--size-5); font-size: var(--font-size-2); max-width: var(--size-content-2); color: var(--claro-suave); }
.hero__acoes { margin-top: var(--size-7); }

/* Credencial pequena */
.credencial {
  display: flex; align-items: center; gap: var(--size-3);
  margin-top: var(--size-8); padding-top: var(--size-5);
  border-top: var(--border-size-1) solid var(--borda-escura);
  max-width: var(--size-content-2);
}
.credencial img {
  width: var(--size-9); height: var(--size-9); border-radius: var(--radius-round);
  object-fit: cover; object-position: top;
  border: var(--border-size-2) solid var(--marca-texto);
}
.credencial div { display: flex; flex-direction: column; line-height: var(--font-lineheight-1); }
.credencial strong { font-size: var(--font-size-2); }
.credencial span { font-size: var(--font-size-1); color: var(--claro-suave); }
.credencial a { color: var(--claro); text-underline-offset: var(--size-1); }
.credencial a:hover { color: var(--marca-texto); }

/* Índice de áreas no hero */
.indice__titulo { font-size: var(--font-size-1); color: var(--claro-apagado); margin-bottom: var(--size-3); }
.indice ol { list-style: none; border-top: var(--border-size-1) solid var(--borda-escura); }
.indice a {
  display: flex; flex-direction: column; gap: var(--size-1);
  padding: var(--size-3) 0; border-bottom: var(--border-size-1) solid var(--borda-escura);
  text-decoration: none; transition: padding .2s var(--ease-3);
}
.indice span { font-size: var(--font-size-4); font-weight: var(--font-weight-6); }
.indice small { font-size: var(--font-size-1); color: var(--claro-apagado); }
.indice a:hover { padding-left: var(--size-2); }
.indice a:hover span { color: var(--marca-texto); }

/* ===== Seções ===== */
.secao { padding: var(--size-fluid-6) 0; }
.secao--papel { background: var(--papel); }
.secao__cabeca { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-7) var(--size-9); align-items: end; margin-bottom: var(--size-8); }
.secao__cabeca h2 { margin-bottom: 0; }
.secao__intro { font-size: var(--font-size-2); color: var(--tinta-suave); max-width: var(--size-content-2); }

/* Áreas com situações */
.areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--size-5); }
.area {
  background: var(--claro); border-radius: var(--radius-3); overflow: hidden;
  box-shadow: var(--shadow-3); scroll-margin-top: var(--size-11);
  border-bottom: var(--border-size-3) solid var(--marca-texto);
}
.area h3 {
  background: var(--esmeralda); color: var(--claro);
  padding: var(--size-4) var(--size-5);
}
.area ul { list-style: none; padding: var(--size-2) var(--size-5) var(--size-4); }
.area li + li { border-top: var(--border-size-1) solid var(--linha); }
.area a {
  display: block; padding: var(--size-3) 0; text-decoration: none;
  font-weight: var(--font-weight-6); line-height: var(--font-lineheight-1);
  transition: color .15s var(--ease-2);
}
.area a:hover {
  color: var(--esmeralda);
  text-decoration: underline; text-decoration-color: var(--marca-texto);
  text-decoration-thickness: var(--border-size-3); text-underline-offset: var(--size-1);
}
.areas__outro { margin-top: var(--size-8); color: var(--tinta-suave); }
.areas__outro a { color: var(--esmeralda); font-weight: var(--font-weight-7); }

/* Cartório */
.secao--verde { background: var(--esmeralda); color: var(--claro); }
.cartorio { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-10); align-items: center; }
.cartorio p { color: var(--claro-suave); max-width: var(--size-content-2); }
.cartorio__lista { list-style: none; display: flex; flex-wrap: wrap; gap: var(--size-2); margin-top: var(--size-6); }
.cartorio__lista a {
  display: inline-block; padding: var(--size-2) var(--size-3); border-radius: var(--radius-round);
  background: var(--claro); border: var(--border-size-1) solid var(--linha);
  font-size: var(--font-size-1); font-weight: var(--font-weight-6); color: var(--esmeralda); text-decoration: none;
}
.cartorio__lista a:hover { border-color: var(--esmeralda); }
.comparativo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-3); }
.comparativo { align-items: center; }
.comparativo__col { background: var(--esmeralda-profunda); border-radius: var(--radius-3); padding: var(--size-5); }
.comparativo__col h3 { margin-bottom: var(--size-3); color: var(--claro-apagado); }
.comparativo__col ul { list-style: none; }
.comparativo__col li { padding: var(--size-2) 0; border-top: var(--border-size-1) solid var(--borda-escura); color: var(--claro-apagado); }
.comparativo__col--destaque {
  background: var(--marca-texto); color: var(--tinta);
  padding: var(--size-7) var(--size-5); box-shadow: var(--shadow-5);
}
.comparativo__col--destaque h3 { color: var(--tinta); font-size: var(--font-size-4); }
.comparativo__col--destaque li { color: var(--tinta); font-weight: var(--font-weight-6); border-color: var(--yellow-6); }

/* Passos: sequência real, por isso numerados */
.passos { list-style: none; counter-reset: passo; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--size-8); margin-top: var(--size-8); }
.passos li { counter-increment: passo; }
.passos li::before {
  content: counter(passo);
  display: grid; place-items: center;
  width: var(--size-10); height: var(--size-10); border-radius: var(--radius-round);
  background: var(--marca-texto); color: var(--esmeralda-profunda);
  font-size: var(--font-size-6); font-weight: var(--font-weight-8);
  margin-bottom: var(--size-4); box-shadow: var(--shadow-3);
}
.passos h3 { margin-bottom: var(--size-2); }
.passos p { color: var(--tinta-suave); }

/* O advogado */
.sobre { display: grid; grid-template-columns: var(--size-12) 1fr; gap: var(--size-8); align-items: start; max-width: var(--size-lg); }
.sobre__foto {
  width: var(--size-12); height: var(--size-12); border-radius: var(--radius-round);
  object-fit: cover; object-position: top;
  border: var(--border-size-2) solid var(--claro); box-shadow: var(--shadow-3);
}
.sobre__texto h2 { margin-bottom: var(--size-1); max-width: none; }
.sobre__cargo { font-weight: var(--font-weight-6); color: var(--esmeralda); margin-bottom: var(--size-5); }
.sobre__texto p:not(.sobre__cargo) { font-size: var(--font-size-2); color: var(--tinta-suave); max-width: var(--size-content-3); }

/* Dúvidas */
.duvidas { max-width: var(--size-lg); }
.faq { margin-top: var(--size-5); border-top: var(--border-size-2) solid var(--tinta); }
.faq details { border-bottom: var(--border-size-1) solid var(--linha); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--size-3);
  padding: var(--size-5) 0; font-size: var(--font-size-2); font-weight: var(--font-weight-6);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: var(--font-size-5); font-weight: var(--font-weight-4);
  color: var(--esmeralda); transition: transform .2s var(--ease-3);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--size-5); color: var(--tinta-suave); max-width: var(--size-content-3); }

/* Contato */
.contato { background: var(--marca-texto); color: var(--tinta); padding: var(--size-fluid-6) 0; }
.contato__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.contato h2 { max-width: var(--size-header-2); font-size: var(--font-size-fluid-3); font-weight: var(--font-weight-8); }
.contato__inner > p { margin: 0 0 var(--size-7); font-size: var(--font-size-3); }
.contato__inner > .contato__email { margin: var(--size-5) 0 0; font-size: var(--font-size-1); }
.contato__email a { color: var(--tinta); font-weight: var(--font-weight-7); }

/* Rodapé institucional */
.rodape { background: var(--esmeralda-profunda); color: var(--claro-suave); font-size: var(--font-size-1); padding-top: var(--size-9); }
.rodape__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--size-8); padding-bottom: var(--size-8); }
.rodape__marca { color: var(--claro); font-size: var(--font-size-3); font-weight: var(--font-weight-8); margin-bottom: var(--size-2); }
.rodape__grid p + p { margin-top: var(--size-1); }
.rodape__titulo { color: var(--claro); font-weight: var(--font-weight-6); margin-bottom: var(--size-3); }
.rodape ul { list-style: none; }
.rodape li { padding: var(--size-1) 0; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--marca-texto); }
.rodape__aviso {
  border-top: var(--border-size-1) solid var(--borda-escura);
  padding-top: var(--size-5); padding-bottom: var(--size-5);
  font-size: var(--font-size-0); color: var(--claro-apagado);
}

/* WhatsApp flutuante */
.whats-flutuante {
  position: fixed; right: var(--size-4); bottom: var(--size-4); z-index: var(--layer-4);
  width: var(--size-9); height: var(--size-9); border-radius: var(--radius-round);
  background: var(--whatsapp); color: var(--claro);
  display: grid; place-items: center;
  box-shadow: var(--shadow-4);
}

/* ===== Um único momento de animação: a chegada do hero ===== */
@media (prefers-reduced-motion: no-preference) {
  .hero__texto, .indice { animation: var(--animation-fade-in), var(--animation-slide-in-up); }
}

/* ===== Tablet ===== */
@media (max-width: 1000px) {
  .menu { display: none; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--size-9); }
  .areas { grid-template-columns: 1fr 1fr; }
  .secao__cabeca { grid-template-columns: 1fr; }
  .cartorio { grid-template-columns: 1fr; gap: var(--size-8); }
  .faixa__lista { grid-template-columns: 1fr; gap: var(--size-3); }
  .rodape__grid { grid-template-columns: 1fr 1fr; }
  .rodape__grid > :first-child { grid-column: 1 / -1; }
}

/* ===== Celular ===== */
@media (max-width: 700px) {
  .indice { display: none; }
  .areas { grid-template-columns: 1fr; gap: var(--size-7); }
  .passos { grid-template-columns: 1fr; gap: var(--size-7); }
  .comparativo { grid-template-columns: 1fr; }
  .hero__acoes .botao { width: 100%; }
  .sobre { grid-template-columns: 1fr; gap: var(--size-5); }
  .sobre__foto { width: var(--size-11); height: var(--size-11); }
  .rodape__grid { grid-template-columns: 1fr; gap: var(--size-7); }
}

@media (max-width: 420px) {
  .topo__fone { display: none; }
}