/* ==========================================================================
   Mazutti & Gruber · folha de estilo única
   Todas as decisões visuais estão nas variáveis de :root.
   Para ajustar cores, fontes, tamanhos, espaçamentos, larguras, fios ou
   arredondamentos, altere só as variáveis. O HTML não precisa mudar.
   Abordagem mobile first: as regras base valem para celular e as
   consultas @media ampliam o layout em telas maiores.
   ========================================================================== */

:root {
  /* Cores (extraídas do timbre) */
  --cor-texto: #0b0b0b;              /* texto principal, fios e links */
  --cor-texto-secundario: #5c5c5c;   /* texto secundário (OAB, rótulos, rodapé) */
  --cor-fundo: #ffffff;
  --cor-divisoria: #d4d4d4;          /* só bordas e divisórias, nunca texto */
  --cor-botao-fundo: #0b0b0b;
  --cor-botao-texto: #ffffff;
  --cor-foco: #0b0b0b;

  /* Famílias de fonte (somente fontes do sistema) */
  --fonte-serifa: "Times New Roman", Times, "Liberation Serif", Georgia, serif;
  --fonte-sans: system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  /* Tamanhos de fonte (rem acompanha a ampliação de texto do navegador) */
  --fs-base: 1.125rem;               /* 18 px: texto corrido */
  --fs-destaque: 1.5rem;             /* linha das áreas do Direito */
  --fs-titulo-secao: 1rem;
  --fs-titulo-pagina: 1.75rem;
  --fs-advogado-nome: 1.125rem;
  --fs-advogado-oab: 1.0625rem;
  --fs-rotulo: 1rem;
  --fs-rodape: 1rem;
  --entrelinha: 1.6;
  --entrelinha-titulos: 1.3;

  /* Nome do escritório (h1). Proporções medidas no timbre-cabecalho.png:
     subtítulo com 0,43 do tamanho do nome e cerca de 96% da largura dele. */
  --marca-tamanho: clamp(1.5rem, 7.4vw, 2.25rem);
  --marca-peso: 700;
  --marca-espacamento: 0.07em;
  --marca-sub-proporcao: 0.43;
  --marca-sub-tamanho-min: 0.75rem;  /* legibilidade em telas estreitas */
  --marca-sub-tamanho: max(var(--marca-sub-tamanho-min), calc(var(--marca-tamanho) * var(--marca-sub-proporcao)));
  --marca-sub-espacamento: 0.2em;
  --marca-sub-distancia: calc(var(--marca-tamanho) * 0.06);

  /* Espaçamentos */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2rem;
  --esp-5: 3rem;
  --esp-6: 4rem;
  --margem-lateral: min(1.25rem, 6vw);

  /* Larguras */
  --largura-max: 66rem;              /* largura máxima do conteúdo */
  --largura-texto: 36rem;            /* comprimento máximo das linhas de texto */
  --largura-foto-desktop: 28rem;
  --largura-foto-celular: 34rem;

  /* Fios */
  --fio-espesso: 4px;                /* sob o cabeçalho e sobre o rodapé */
  --fio-fino: 1px;                   /* entre nome e OAB */
  --fio-aviso: 2px;
  --fio-aviso-lateral: 8px;
  --aviso-respiro: min(var(--esp-3), 6vw);
  --fio-foco: 3px;
  --foco-afastamento: 3px;

  /* Arredondamentos */
  --raio: 2px;

  /* Foto */
  --foto-proporcao: 4 / 3;
  --foto-enquadramento: 50% 38%;     /* horizontal vertical: mantém os dois rostos */
}

@media (min-width: 22.5rem) {
  :root {
    --marca-sub-espacamento: 0.32em;
  }
}

@media (min-width: 40rem) {
  :root {
    --margem-lateral: 2rem;
    --marca-tamanho: 2.75rem;
  }
}

@media (min-width: 56rem) {
  :root {
    --marca-tamanho: 3.25rem;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-sans);
  font-size: var(--fs-base);
  line-height: var(--entrelinha);
  text-align: left;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
}

p {
  margin: 0 0 var(--esp-2);
}

a {
  color: var(--cor-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: var(--fio-foco) solid var(--cor-foco);
  outline-offset: var(--foco-afastamento);
}

/* Mantém "São Miguel do Oeste/SC" e o CEP inteiros sempre que cabem na linha;
   com texto muito ampliado, quebram normalmente em vez de vazar da tela. */
.sem-quebra {
  display: inline-block;
}

/* Largura comum do cabeçalho, do conteúdo e do rodapé */
.cabecalho,
.conteudo,
.rodape {
  width: min(var(--largura-max), 100% - 2 * var(--margem-lateral));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Cabeçalho: nome do escritório como no timbre, com fio espesso abaixo
   -------------------------------------------------------------------------- */

.cabecalho {
  padding-block: var(--esp-4) var(--esp-3);
  border-bottom: var(--fio-espesso) solid var(--cor-texto);
}

.marca {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin: 0;
  font-family: var(--fonte-serifa);
  font-weight: 400;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  color: var(--cor-texto);
}

.marca-nome {
  font-size: var(--marca-tamanho);
  font-weight: var(--marca-peso);
  letter-spacing: var(--marca-espacamento);
  /* compensa o espaço extra que o espaçamento entre letras deixa no fim */
  margin-right: calc(-1 * var(--marca-espacamento));
}

.marca-e {
  font-weight: 400;
}

.marca-sub {
  margin-top: var(--marca-sub-distancia);
  font-size: var(--marca-sub-tamanho);
  letter-spacing: var(--marca-sub-espacamento);
  margin-right: calc(-1 * var(--marca-sub-espacamento));
  line-height: 1.3;
}

.marca-sub b {
  font-weight: 700;
  color: var(--cor-texto);
}

.marca-area {
  color: var(--cor-texto-secundario);
}

/* --------------------------------------------------------------------------
   Seções
   -------------------------------------------------------------------------- */

.secao {
  padding-block: var(--esp-5);
}

.secao + .secao {
  border-top: var(--fio-fino) solid var(--cor-divisoria);
}

.titulo-secao {
  margin: 0 0 var(--esp-3);
  font-family: var(--fonte-serifa);
  font-size: var(--fs-titulo-secao);
  font-weight: 700;
  line-height: var(--entrelinha-titulos);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Apresentação: texto primeiro, foto depois (lado a lado no desktop) */

.apresentacao-texto p {
  max-width: var(--largura-texto);
}

.apresentacao-texto > :last-child {
  margin-bottom: 0;
}

.destaque {
  font-family: var(--fonte-serifa);
  font-size: var(--fs-destaque);
  line-height: var(--entrelinha-titulos);
}

.apresentacao-foto {
  max-width: var(--largura-foto-celular);
  margin-top: var(--esp-4);
}

.apresentacao-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--foto-proporcao);
  object-fit: cover;
  object-position: var(--foto-enquadramento);
  border-radius: var(--raio);
}

/* Advogados: dois blocos idênticos, nome | OAB com fio vertical fino */

.advogados-lista {
  display: grid;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.advogado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--esp-3);
  row-gap: var(--esp-1);
}

.advogado-nome,
.advogado-oab {
  margin: 0;
  font-family: var(--fonte-serifa);
  line-height: var(--entrelinha-titulos);
}

.advogado-nome {
  font-size: var(--fs-advogado-nome);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.advogado-oab {
  padding-left: var(--esp-3);
  border-left: var(--fio-fino) solid var(--cor-texto-secundario);
  font-size: var(--fs-advogado-oab);
  letter-spacing: 0.04em;
  color: var(--cor-texto-secundario);
}

/* Canais oficiais e aviso antigolpe */

.contato {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-5);
}

.canais-whatsapp {
  margin: 0 0 var(--esp-3);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--cor-botao-fundo);
  border-radius: var(--raio);
  background: var(--cor-botao-fundo);
  color: var(--cor-botao-texto);
  font-family: var(--fonte-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.botao:hover {
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.canais-lista {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
}

.canais-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.canais-item dt {
  font-size: var(--fs-rotulo);
  color: var(--cor-texto-secundario);
}

.canais-item dd {
  margin: 0;
}

.canais-item a {
  display: inline-block;
  padding-block: 0.5rem;
}

.aviso {
  padding: var(--aviso-respiro);
  border: var(--fio-aviso) solid var(--cor-texto);
  border-left-width: var(--fio-aviso-lateral);
  border-radius: var(--raio);
}

.aviso-titulo {
  margin: 0 0 var(--esp-2);
  font-family: var(--fonte-serifa);
  font-size: var(--fs-titulo-secao);
  font-weight: 700;
  line-height: var(--entrelinha-titulos);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.aviso p {
  margin: 0;
}

/* Páginas simples (/calculadora e 404) */

.pagina-simples {
  padding-block: var(--esp-5) var(--esp-6);
}

.titulo-pagina {
  margin: 0 0 var(--esp-2);
  font-family: var(--fonte-serifa);
  font-size: var(--fs-titulo-pagina);
  font-weight: 700;
  line-height: var(--entrelinha-titulos);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pagina-simples p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Rodapé: como no timbre, fio espesso acima e endereço centralizado
   -------------------------------------------------------------------------- */

.rodape {
  padding-block: var(--esp-4) var(--esp-5);
  border-top: var(--fio-espesso) solid var(--cor-texto);
  text-align: center;
}

.rodape-endereco {
  max-width: 60rem;
  margin-inline: auto;
  font-family: var(--fonte-serifa);
  font-size: var(--fs-rodape);
  font-style: normal;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--cor-texto-secundario);
}

.rodape-endereco strong {
  font-weight: 700;
  color: var(--cor-texto);
}

/* --------------------------------------------------------------------------
   Telas maiores
   -------------------------------------------------------------------------- */

@media (min-width: 40rem) {
  .botao {
    width: auto;
  }

  /* rótulo à esquerda e canais à direita */
  .canais-item {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    column-gap: var(--esp-3);
    align-items: baseline;
  }

  .canais-item dt {
    grid-column: 1;
  }

  .canais-item dd {
    grid-column: 2;
  }
}

@media (min-width: 48rem) {
  /* Nome e OAB alinhados em colunas, como no lado direito do timbre */
  @supports (grid-template-columns: subgrid) {
    .advogados-lista {
      grid-template-columns: auto auto;
      justify-content: start;
      column-gap: 0;
    }

    .advogado {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }

    .advogado-nome {
      padding-right: var(--esp-3);
    }
  }
}

@media (min-width: 56rem) {
  .cabecalho {
    padding-block: var(--esp-5) 3.25rem;
  }

  .apresentacao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--largura-foto-desktop));
    gap: var(--esp-5);
    align-items: center;
  }

  .apresentacao-foto {
    max-width: none;
    margin-top: 0;
  }

  .contato {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}