/* Zonta Advocacia — base.
   O tom é deliberadamente sóbrio: o Provimento 205/2021 da OAB exige que a
   publicidade da advocacia tenha "caráter meramente informativo" e prime pela
   "discrição e sobriedade". Nada de superlativo, promessa de resultado, preço
   ou depoimento de cliente. O site convence por precisão, não por grito.

   A tipografia de display é a Fraunces (OFL), autohospedada em fonts/ — sem
   chamada externa na hora do load. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-500.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-600.woff2") format("woff2");
}

:root {
  --tinta: #10192b;          /* azul-noite quase preto, do texto e da marca */
  --tinta-media: #22314b;
  --tinta-suave: #55637c;
  --papel: #faf8f5;          /* off-white, cor de papel bom */
  --papel-escuro: #f1ede6;
  --latao: #a8834e;          /* latão sóbrio; é o único acento */
  --latao-claro: #d6b986;
  --branco: #ffffff;
  --borda: #e3ded4;
  --verde-zap: #25d366;

  --fonte-titulo: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --fonte-texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --largura: 1140px;
  --raio: 4px;               /* cantos quase retos: instituição, não aplicativo */
  --sombra: 0 2px 10px rgba(16, 25, 43, 0.07);
  --sombra-forte: 0 14px 40px rgba(16, 25, 43, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 0.55em;
}
h1 { font-size: clamp(2.2rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.14rem, 2.4vw, 1.32rem); font-weight: 500; }

p { margin: 0 0 1.15em; }
a { color: var(--tinta); }
img { max-width: 100%; height: auto; display: block; }

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

.secao { padding: clamp(60px, 8.5vw, 112px) 0; }
.secao--papel { background: var(--papel-escuro); }
.secao--tinta { background: var(--tinta); color: var(--papel); }
.secao--tinta h2, .secao--tinta h3 { color: var(--branco); }

/* Sobrelinha numerada: o fio de latão + o número da seção são a assinatura
   editorial do site — ritmo de revista, não de template. */
.sobrelinha {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--latao);
  margin-bottom: 16px;
}
.sobrelinha::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--latao);
}
.sobrelinha__num {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-right: 2px;
  opacity: 0.75;
}
.secao--tinta .sobrelinha { color: var(--latao-claro); }
.secao--tinta .sobrelinha::before { background: var(--latao-claro); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--tinta { background: var(--tinta); color: var(--papel); }
.btn--tinta:hover { background: var(--tinta-media); }
.btn--latao { background: var(--latao); color: var(--branco); }
.btn--latao:hover { background: #96733f; }
.btn--contorno { border-color: currentColor; color: var(--tinta); background: transparent; }
.btn--contorno:hover { background: rgba(16, 25, 43, 0.05); }
.secao--tinta .btn--contorno, .capa .btn--contorno, .barra-contato .btn--contorno { color: var(--papel); }
.secao--tinta .btn--contorno:hover, .capa .btn--contorno:hover { background: rgba(255, 255, 255, 0.09); }
.btn--zap { background: var(--verde-zap); color: #06331a; }
.btn--zap:hover { background: #1fbb59; }

.grade {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

/* Entrada suave dos blocos ao rolar (js/pagina.js liga o .reveal--on).
   Sem JavaScript, tudo fica visível — o estado escondido só existe quando a
   página declara .com-js. */
.com-js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.com-js .reveal--on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .com-js .reveal { opacity: 1; transform: none; transition: none; }
}

.pular-para-conteudo { position: absolute; left: -9999px; }
.pular-para-conteudo:focus {
  left: 16px; top: 16px; z-index: 100;
  background: var(--branco); padding: 12px 20px; border-radius: var(--raio);
}