/* ==========================================================================
   BSBB Advogados — estilos
   Ordem: fontes → tokens → base → layout → componentes → seções → utilitários
   Cores PROVISÓRIAS (medidas nos arquivos da cliente) — trocar só os tokens.
   ========================================================================== */

/* ---------- Fontes locais (OFL) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Fontes alternativas para o carregamento: fontes do sistema ajustadas às medidas das fontes do site
   (largura e linha de base medidas no navegador), para o texto não "pular" quando a fonte chega. */
@font-face {
  font-family: "Playfair Fallback";
  src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia");
  font-weight: 700;
  size-adjust: 89.2%;
  ascent-override: 121.1%;
  descent-override: 28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  size-adjust: 106.3%;
  ascent-override: 97.8%;
  descent-override: 20.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 700;
  size-adjust: 106.3%;
  ascent-override: 97.8%;
  descent-override: 20.7%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  --cor-fundo: #ffffff;
  --cor-fundo-2: #f6f2ec;
  --cor-fundo-3: #ebd7b8;
  --cor-texto: #1e1e1e;
  --cor-texto-2: #5a5249;
  --cor-primaria: #5e4733;
  --cor-primaria-escura: #47352a;
  --cor-creme: #ebd7b8;
  --cor-dourado: #b39a5c; /* só decorativo — nunca em texto */
  --cor-borda: #d8cbb6;
  --cor-foco: #8a6d2f; /* contorno de foco: ≥ 3:1 no branco e no off-white */

  --fonte-texto: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-titulo: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;

  /* Hierarquia: títulos 700 (Playfair) · subtítulos 600 (Jakarta) · texto 400 (Jakarta).
     No celular os títulos ficam menores (h1 ≈ 34px, h2 ≈ 27px). */
  --fs-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.625rem);
  --fs-h2: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-corpo: 1.0625rem;
  --fs-pequeno: 0.9375rem;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --secao: clamp(64px, 8vw, 112px);
  --container: 1200px;
  --lateral: 20px;

  --raio: 4px;
  --raio-card: 8px;
  --sombra: 0 1px 2px rgba(30, 30, 30, 0.04), 0 8px 24px rgba(94, 71, 51, 0.08);
  --header-h: 72px;
  --transicao: 200ms ease;
}
@media (min-width: 1024px) {
  :root { --lateral: 32px; --header-h: 84px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* Sem scroll-behavior: smooth — a rolagem suave com desaceleração é feita no main.js */
}
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--fs-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.18;
  color: var(--cor-texto);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.012em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.005em; }
p { margin: 0 0 var(--s-4); }
ul, ol { margin: 0; padding: 0; }
a {
  color: var(--cor-primaria);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transicao), text-decoration-color var(--transicao);
}
a:hover { color: var(--cor-primaria-escura); text-decoration-thickness: 2px; }
:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
  border-radius: 2px;
}
address { font-style: normal; }
strong { font-weight: 600; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--lateral);
}
.secao { padding-block: var(--secao); }
.secao--alt { background: var(--cor-fundo-2); }
.secao__topo { max-width: 720px; margin-bottom: var(--s-7); }
.secao__topo--centro { margin-inline: auto; text-align: center; }
.secao__topo--centro .linha-decor { margin-inline: auto; }
.secao__intro { color: var(--cor-texto-2); font-size: 1.125rem; line-height: 1.6; margin: 0; }
.linha-decor {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--cor-dourado);
  margin-bottom: var(--s-5);
}

/* ---------- Utilitários ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.icone { width: 24px; height: 24px; flex-shrink: 0; }
.icone--sm { width: 20px; height: 20px; }

/* Marcador de conteúdo pendente: visível de propósito até a cliente enviar o dado */
.preencher {
  background: #fff4d6;
  color: #5c4300;
  border: 1px dashed #b08a2e;
  border-radius: 3px;
  padding: 0 0.3em;
  font-family: var(--fonte-texto);
  font-size: 0.9em;
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Pular para o conteúdo ---------- */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  background: var(--cor-primaria);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--raio);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--s-4); color: #fff; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid transparent;
  border-radius: var(--raio);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primario { background: var(--cor-primaria); color: #fff; }
.btn--primario:hover { background: var(--cor-primaria-escura); color: #fff; }
.btn--secundario { background: transparent; color: var(--cor-primaria); border-color: var(--cor-primaria); }
.btn--secundario:hover { background: var(--cor-fundo-3); color: var(--cor-primaria-escura); }
.btn--claro { background: var(--cor-creme); color: var(--cor-primaria-escura); }
.btn--claro:hover { background: #fff; color: var(--cor-primaria-escura); }
.btn--claro:focus-visible { outline-color: var(--cor-creme); }
.btn--contorno-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.btn--contorno-claro:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn--contorno-claro:focus-visible { outline-color: var(--cor-creme); }
.btn--pequeno { min-height: 44px; padding: 10px 18px; font-size: 0.9375rem; }

/* Animação "flow" (adaptada do FlowButton): o main.js adiciona .btn--flow e os elementos internos.
   Sem JS, o botão continua funcionando com o hover simples acima. */
.btn--flow {
  --btn-preench: var(--cor-primaria-escura);
  --btn-texto-hover: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-inline: 26px 48px; /* espaço fixo à direita para a seta */
  border-radius: 100px;
  transition: border-radius 600ms cubic-bezier(0.23, 1, 0.32, 1), color 600ms cubic-bezier(0.23, 1, 0.32, 1), border-color 600ms ease, transform 200ms ease;
}
.btn--flow.btn--pequeno { padding-inline: 20px 42px; }
.btn--flow:hover,
.btn--flow:focus-visible { border-radius: 12px; color: var(--btn-texto-hover); }
.btn--flow:active { transform: scale(0.96); }
.btn--flow.btn--primario { --btn-preench: #2a2019; }
.btn--flow.btn--primario:hover { background: var(--cor-primaria); }
.btn--flow.btn--secundario { --btn-preench: var(--cor-primaria); }
.btn--flow.btn--secundario:hover,
.btn--flow.btn--secundario:focus-visible { background: transparent; border-color: var(--cor-primaria); }
.btn--flow.btn--claro { --btn-preench: #fff; --btn-texto-hover: var(--cor-primaria-escura); }
.btn--flow.btn--claro:hover { background: var(--cor-creme); }
.btn--flow.btn--contorno-claro { --btn-preench: var(--cor-creme); --btn-texto-hover: var(--cor-primaria-escura); }
.btn--flow.btn--contorno-claro:hover,
.btn--flow.btn--contorno-claro:focus-visible { background: transparent; border-color: var(--cor-creme); }
.btn__conteudo {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.btn__preench {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 240%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--btn-preench);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1), opacity 800ms cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}
.btn--flow:hover .btn__preench,
.btn--flow:focus-visible .btn__preench { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.btn__seta {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
/* Seta fica sempre à direita; no hover só avança um pouco */
.btn__seta--dir { right: 20px; }
.btn--flow.btn--pequeno .btn__seta--dir { right: 16px; }
.btn--flow:hover .btn__seta--dir,
.btn--flow:focus-visible .btn__seta--dir { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.site-header.is-rolado {
  border-bottom-color: var(--cor-borda);
  box-shadow: 0 4px 16px rgba(30, 30, 30, 0.05);
}
.site-header__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
}

/* Marca em texto — PROVISÓRIA até o SVG oficial do logo */
.marca {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--cor-texto);
  line-height: 1;
  padding: var(--s-1) 0;
}
.marca:hover { color: var(--cor-texto); }
.marca__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  margin-right: -0.22em;
}
.marca__linha {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--cor-dourado);
  margin: 6px 0 5px;
}
.marca__sub {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  margin-right: -0.32em;
}

.nav { display: flex; align-items: center; gap: var(--s-2); }
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: #fff;
  color: var(--cor-texto);
  cursor: pointer;
}
.nav__toggle .icone--fechar { display: none; }
.nav__toggle[aria-expanded="true"] .icone--abrir { display: none; }
.nav__toggle[aria-expanded="true"] .icone--fechar { display: block; }
.nav__painel {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  background: #fff;
  border-bottom: 1px solid var(--cor-borda);
  box-shadow: 0 16px 32px rgba(30, 30, 30, 0.08);
  padding: var(--s-4) var(--lateral) var(--s-6);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.nav__painel[hidden] { display: none; }
/* Sem JS: menu sempre visível no fluxo, sem botão */
.no-js .nav__toggle { display: none; }
.no-js .site-header__barra { flex-wrap: wrap; }
.no-js .nav__painel { position: static; box-shadow: none; border: 0; padding: 0 0 var(--s-4); }
.nav__lista { list-style: none; }
.nav__lista a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--s-2) 0;
  color: var(--cor-texto);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--cor-fundo-2);
}
.nav__lista a:hover { color: var(--cor-primaria); }
.nav__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.idioma {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-pequeno);
  font-weight: 600;
}
.idioma a, .idioma span[aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s-2);
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--cor-texto-2);
}
.idioma span[aria-current] { color: var(--cor-primaria); text-decoration: underline; text-underline-offset: 4px; }
.idioma a:hover { color: var(--cor-primaria); background: var(--cor-fundo-2); }
.idioma__sep { color: var(--cor-borda); }

@media (min-width: 1024px) {
  .nav__toggle { display: none; }
  .nav__painel,
  .nav__painel[hidden] {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    position: static;
    padding: 0;
    border: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    background: transparent;
  }
  .nav__lista { display: flex; gap: var(--s-5); }
  .nav__lista a {
    min-height: 44px;
    border: 0;
    font-size: var(--fs-pequeno);
    position: relative;
  }
  .nav__lista a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 8px;
    height: 1.5px;
    background: var(--cor-dourado);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transicao);
  }
  .nav__lista a:hover::after { transform: scaleX(1); }
  .nav__acoes { margin: 0; gap: var(--s-3); }
}

/* ---------- Hero (vídeo do escritório) ---------- */
/* Celular: vídeo vertical em tela cheia, texto embaixo sobre degradê café.
   Desktop: fundo desfocado + vídeo em moldura à direita, texto à esquerda. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(calc(100svh - var(--header-h)), 920px);
  overflow: hidden;
  background: #2a2019;
  color: #fff;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* ≥ 0,7 de opacidade onde começa o texto: contraste do branco ≥ 4,5:1 mesmo sobre parede branca */
  background: linear-gradient(180deg, rgba(42, 32, 25, 0.35) 0%, rgba(42, 32, 25, 0.72) 38%, rgba(42, 32, 25, 0.9) 60%, rgba(42, 32, 25, 0.95) 100%);
  pointer-events: none;
}
.hero__grade {
  position: static;
  display: grid;
  gap: var(--s-7);
  align-items: center;
  padding-block: var(--s-9) var(--s-7);
}
.hero__texto { max-width: 640px; }
.hero h1 { color: #fff; }
.hero__sub {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: #f3ece2;
  margin-bottom: var(--s-6);
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__midia {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}
.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  background: #2a2019;
}
.hero__pausa {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 100px;
  background: rgba(42, 32, 25, 0.78);
  color: #fff;
  font-family: var(--fonte-texto);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transicao);
}
.hero__pausa:hover { background: rgba(42, 32, 25, 0.95); }
.hero__pausa:focus-visible { outline-color: var(--cor-creme); }
.hero__pausa .icone--play,
.hero__pausa .icone--repetir { display: none; }
.hero__pausa[data-estado="parado"] .icone--play { display: block; }
.hero__pausa[data-estado="fim"] .icone--repetir { display: block; }
.hero__pausa[data-estado="parado"] .icone--pausa,
.hero__pausa[data-estado="fim"] .icone--pausa { display: none; }
/* Destino da rolagem recebe foco (acessibilidade) sem contorno visual */
section[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }
.hero :focus-visible { outline-color: var(--cor-creme); }

@media (min-width: 1024px) {
  .hero {
    align-items: center;
    background: #2a2019 url("../img/hero-fundo.jpg") center / cover no-repeat;
  }
  .hero::after {
    background: linear-gradient(90deg, rgba(42, 32, 25, 0.93) 0%, rgba(42, 32, 25, 0.84) 48%, rgba(42, 32, 25, 0.62) 100%);
  }
  .hero__grade {
    grid-template-columns: 1.25fr 0.75fr;
    gap: var(--s-8);
    padding-block: var(--s-8);
  }
  .hero__midia {
    position: relative;
    inset: auto;
    z-index: 0;
    justify-self: end;
    width: min(100%, 360px);
    margin-right: 16px;
  }
  .hero__midia::before {
    content: "";
    position: absolute;
    inset: 16px -16px -16px 16px;
    z-index: -1;
    border: 1.5px solid var(--cor-dourado);
    border-radius: var(--raio-card);
  }
  .hero__video {
    height: auto;
    aspect-ratio: 480 / 832;
    border-radius: var(--raio-card);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  }
  .hero__pausa { top: auto; right: auto; bottom: var(--s-3); left: var(--s-3); }
}

/* Abertura em sequência: 1) letras do título e textos (fade), 2) botões, 3) vídeo.
   Só opacidade (sem deslocamento), então vale também para quem pede menos movimento. */
@keyframes hero-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero__anim { animation: hero-fade 800ms ease-out both; }
.hero__anim--1 { animation-delay: 100ms; }
.hero__anim--2 { animation-delay: 200ms; }
.hero__anim--3 { animation-delay: 750ms; }
.hero__anim--4 { animation-delay: 850ms; }
/* Com JS, o título vira letras que aparecem uma a uma (o main.js define o atraso de cada uma) */
.hero h1.hero__letras { animation: none; }
.hero__letra { animation: hero-fade 600ms ease-out both; }
.hero__acoes { animation: hero-fade 700ms ease-out 1300ms both; }
.hero__midia { animation: hero-fade 900ms ease-out 150ms both; } /* entra junto com o texto */

/* ---------- Faixa informativa ---------- */
.info { background: var(--cor-fundo-2); color: var(--cor-texto); border-bottom: 1px solid var(--cor-borda); }
.info__lista {
  list-style: none;
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-6);
}
.info__item { display: flex; gap: var(--s-4); align-items: flex-start; }
/* Fade sequencial da esquerda para a direita, só quando a faixa entra na tela (main.js) */
.js .info__item {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 700ms ease-out, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js .info__item:nth-child(2) { transition-delay: 250ms; }
.js .info__item:nth-child(3) { transition-delay: 500ms; }
.js .info.is-visivel .info__item { opacity: 1; transform: none; }
.info__item .icone { color: var(--cor-primaria); width: 28px; height: 28px; margin-top: 2px; }
.info__titulo { display: block; font-weight: 600; color: var(--cor-texto); }
.info__texto { display: block; color: var(--cor-texto-2); font-size: var(--fs-pequeno); }
@media (min-width: 768px) {
  .info__lista { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
}
.icone-circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cor-fundo-2);
  color: var(--cor-primaria);
  margin-bottom: var(--s-5);
}
.icone-circulo .icone { width: 28px; height: 28px; }

/* Áreas */
.areas__grade { display: grid; gap: var(--s-5); }
.area { padding: var(--s-6); display: flex; flex-direction: column; }
.area h3 { margin-bottom: var(--s-3); }
.area__desc { color: var(--cor-texto-2); }
.area__subtitulo {
  font-size: var(--fs-pequeno);
  font-weight: 600;
  margin: var(--s-2) 0 var(--s-3);
}
.lista-marcada { list-style: none; display: grid; gap: var(--s-2); }
.lista-marcada li { position: relative; padding-left: 22px; }
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 1.5px;
  background: var(--cor-dourado);
}
.areas__empresas {
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--cor-dourado);
  background: var(--cor-fundo-2);
  border-radius: 0 var(--raio-card) var(--raio-card) 0;
}
.areas__empresas p:last-child { margin: 0; }
@media (min-width: 768px) {
  .areas__grade { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
}

/* Sobre */
.sobre__grade { display: grid; gap: var(--s-7); align-items: center; }
/* Mesma moldura dourada deslocada do vídeo do hero */
.sobre__foto {
  position: relative;
  isolation: isolate;
  width: calc(100% - 16px);
  margin: 0 16px 16px 0;
}
.sobre__foto::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  z-index: -1;
  border: 1.5px solid var(--cor-dourado);
  border-radius: var(--raio-card);
}
.sobre__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
}
.sobre__legenda { font-size: var(--fs-pequeno); color: var(--cor-texto-2); margin-top: var(--s-3); }
.sociedade {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  background: var(--cor-fundo-2);
  border-radius: var(--raio-card);
  font-size: var(--fs-pequeno);
  margin-top: var(--s-5);
}
.sociedade .icone { color: var(--cor-primaria); margin-top: 2px; }
.sociedade p { margin: 0; }
.equipe { margin-top: var(--s-8); }
/* Título "Equipe" no mesmo tamanho dos títulos das seções (continua h3 na hierarquia, dentro de "Sobre") */
.equipe__titulo { font-size: var(--fs-h2); margin-bottom: var(--s-4); }
.equipe .linha-decor { margin-bottom: var(--s-7); }
/* Cards entram com fade da esquerda para a direita, só quando estão na tela (main.js) */
.js .advogado.entra {
  opacity: 0;
  translate: -24px 0;
  transition: opacity 1006ms ease-out, translate 1294ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1), border-color 600ms ease;
}
.js .advogado.entra.is-visivel { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .js .advogado.entra { translate: 0 0; }
}
/* Cards da equipe: verticais, sóbrios. O monograma dá lugar à foto real quando existir. */
/* Flex com quebra centralizada: o card que sobra sozinho na linha fica no meio */
.equipe__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
}
.equipe__lista > li { flex: 0 1 300px; }
.advogado {
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform 600ms var(--suave), box-shadow 600ms var(--suave), border-color 600ms ease;
}
.advogado:hover {
  transform: translateY(-4px);
  border-color: rgba(179, 154, 92, 0.6);
  box-shadow: 0 2px 4px rgba(30, 30, 30, 0.05), 0 22px 44px rgba(94, 71, 51, 0.16);
}
.advogado__retrato {
  position: relative;
  aspect-ratio: 1 / 1.05; /* mesma área em todos os cards; o card fica vertical (~2:3) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #3a2c22 0%, #2a2019 100%);
}
/* Brilho quente que aparece devagar no hover */
.advogado__retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(179, 154, 92, 0.22) 0%, rgba(179, 154, 92, 0) 65%);
  opacity: 0;
  transition: opacity 700ms ease;
}
.advogado:hover .advogado__retrato::after { opacity: 1; }
.advogado__monograma {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(179, 154, 92, 0.75);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: 0.08em;
  color: var(--cor-creme);
  transition: transform 700ms var(--suave), border-color 700ms ease, letter-spacing 700ms var(--suave);
}
.advogado:hover .advogado__monograma { transform: scale(1.06); border-color: rgba(212, 187, 125, 1); letter-spacing: 0.14em; }
.advogado__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-5) var(--s-5) var(--s-6);
  text-align: center;
}
.advogado__nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.005em; margin: 0; }
.advogado__linha { display: block; width: 32px; height: 1.5px; margin: var(--s-3) auto; background: var(--cor-dourado); transition: width 700ms var(--suave); }
.advogado:hover .advogado__linha { width: 72px; }
.advogado__oab {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-texto-2);
}
@media (min-width: 1024px) {
  .equipe__lista { gap: var(--s-6); }
  .equipe__lista > li { flex-basis: 320px; }
}
@media (min-width: 1024px) {
  .sobre__grade { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}

/* Como funciona */
.passos { list-style: none; display: grid; gap: var(--s-5); counter-reset: passo; }
.passo { padding: var(--s-6); position: relative; }
.passo__num {
  position: absolute;
  top: var(--s-5);
  right: var(--s-6);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--cor-foco); /* ≥ 4.5:1 no branco */
}
.passo h3 { margin-bottom: var(--s-2); }
.passo p { color: var(--cor-texto-2); margin: 0; }
.modos { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
.modo {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5) var(--s-6);
  border-radius: var(--raio-card);
  background: #fff;
  border: 1px solid var(--cor-borda);
}
.modo .icone { color: var(--cor-primaria); width: 28px; height: 28px; margin-top: 4px; }
.modo h3 { font-size: 1.25rem; margin-bottom: var(--s-1); }
.modo p { margin: 0; color: var(--cor-texto-2); }
@media (min-width: 768px) {
  .passos { grid-template-columns: repeat(3, 1fr); }
  .modos { grid-template-columns: repeat(2, 1fr); }
}

/* Colunas animadas (adaptadas do "testimonials-columns"): informações do atendimento, sem depoimentos */
.colunas { padding-top: 0; }
.colunas__area {
  position: relative;
  display: flex;
  justify-content: center;
  gap: var(--s-5);
  max-height: 640px;
  padding-top: 6px; /* folga para o card que sobe no hover */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.colunas__coluna { flex: 0 1 320px; }
/* Velocidades diferentes por coluna (sem style inline, por causa da CSP) */
.colunas__coluna:nth-child(1) { --duracao: 16s; }
.colunas__coluna:nth-child(2) { --duracao: 20s; }
.colunas__coluna:nth-child(3) { --duracao: 18s; }
.colunas__coluna:nth-child(2),
.colunas__coluna:nth-child(3) { display: none; }
.colunas__trilho {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-bottom: var(--s-5); /* = gap: emenda invisível no loop */
  animation: colunas-sobe var(--duracao, 16s) linear infinite;
}
.colunas__area:hover .colunas__trilho,
.colunas__area:focus-within .colunas__trilho,
.colunas.is-pausado .colunas__trilho { animation-play-state: paused; }
@keyframes colunas-sobe {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
.colunas__lista { list-style: none; display: flex; flex-direction: column; gap: var(--s-5); }
/* Todos os cards com o mesmo tamanho: texto em cima, título fixo embaixo */
.colunas__card {
  display: flex;
  flex-direction: column;
  height: 236px;
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(94, 71, 51, 0.1);
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 450ms ease, border-color 450ms ease;
}
.colunas__card p { margin: 0; color: var(--cor-texto-2); }
.colunas__rodape { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; }
.colunas__rodape .icone-circulo { transition: background-color 450ms ease, color 450ms ease; }
/* Destaque individual no hover (mouse) */
@media (hover: hover) {
  .colunas__card:hover {
    transform: translateY(-3px);
    border-color: rgba(179, 154, 92, 0.7);
    box-shadow: 0 16px 32px rgba(94, 71, 51, 0.16);
  }
  .colunas__card:hover .icone-circulo { background: var(--cor-primaria); color: #fff; }
}
.colunas__rodape .icone-circulo { width: 40px; height: 40px; margin: 0; flex-shrink: 0; }
.colunas__rodape .icone-circulo .icone { width: 20px; height: 20px; }
.colunas__titulo { display: block; font-weight: 600; line-height: 1.25; color: var(--cor-texto); }
.colunas__sub { display: block; font-size: 0.875rem; color: var(--cor-texto-2); }
.colunas__controle { display: flex; justify-content: center; margin-top: var(--s-5); }
.colunas__pausa {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--cor-borda);
  border-radius: 100px;
  background: #fff;
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transicao), background-color var(--transicao);
}
.colunas__pausa:hover { border-color: var(--cor-primaria); background: var(--cor-fundo-2); }
.colunas__pausa .icone--play { display: none; }
.colunas.is-pausado .colunas__pausa .icone--play { display: block; }
.colunas.is-pausado .colunas__pausa .icone--pausa { display: none; }
@media (min-width: 768px) {
  .colunas__coluna:nth-child(2) { display: block; }
}
@media (min-width: 1024px) {
  .colunas__coluna:nth-child(3) { display: block; }
}
/* Menos movimento: colunas paradas, sem cópias. Os 9 cards viram uma grade única que quebra
   centralizada (3 por linha no desktop, 2 + 1 centralizado no tablet, 1 no celular). */
@media (prefers-reduced-motion: reduce) {
  .colunas__area {
    max-height: none;
    overflow: visible; /* o card que sobe no hover não é cortado */
    -webkit-mask-image: none;
    mask-image: none;
    flex-wrap: wrap;
    gap: var(--s-5);
  }
  .colunas__coluna,
  .colunas__coluna:nth-child(2),
  .colunas__coluna:nth-child(3),
  .colunas__trilho,
  .colunas__lista { display: contents; }
  .colunas__trilho { animation: none; }
  .colunas__lista[aria-hidden="true"] { display: none; }
  .colunas__card { flex: 0 1 320px; }
  .colunas__controle { display: none; }
}

/* Faixa de contato */
.faixa {
  position: relative;
  isolation: isolate;
  color: #fff;
  text-align: center;
  padding-block: clamp(72px, 10vw, 128px);
  background: var(--cor-primaria);
}
.faixa__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.faixa__fundo img { width: 100%; height: 100%; object-fit: cover; }
.faixa h2 { color: #fff; max-width: 760px; margin-inline: auto; }
.faixa p { color: var(--cor-creme); max-width: 620px; margin: 0 auto var(--s-6); font-size: 1.125rem; }
.faixa .linha-decor { margin-inline: auto; }

/* Perguntas frequentes */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item {
  border-bottom: 1px solid var(--cor-borda);
}
.faq__item:first-child { border-top: 1px solid var(--cor-borda); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-4) 0;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--cor-primaria); }
.faq__item summary .icone { color: var(--cor-primaria); transition: transform var(--transicao); }
.faq__item[open] summary .icone { transform: rotate(180deg); }
.faq__resposta { padding: 0 0 var(--s-5); color: var(--cor-texto-2); max-width: 70ch; }
.faq__resposta p:last-child { margin: 0; }

/* Contato */
.contato__grade { display: grid; gap: var(--s-7); }
.canais { list-style: none; display: grid; gap: var(--s-4); }
.canal { display: flex; gap: var(--s-4); align-items: flex-start; }
.canal .icone-circulo { margin: 0; width: 48px; height: 48px; flex-shrink: 0; }
.canal .icone-circulo .icone { width: 22px; height: 22px; }
.canal__rotulo { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cor-texto-2); }
.canal__valor { display: block; font-weight: 600; }
.canal__valor a { display: inline-flex; align-items: center; min-height: 44px; }
.contato__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.mapa {
  position: relative;
  border-radius: var(--raio-card);
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-2);
  aspect-ratio: 4 / 3;
}
.mapa__fachada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mapa__painel {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-5);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.98) 70%, rgba(255, 255, 255, 0));
  text-align: center;
}
.mapa__aviso { font-size: 0.875rem; color: var(--cor-texto-2); margin: var(--s-3) 0 0; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 1024px) {
  .contato__grade { grid-template-columns: 1fr 1.1fr; gap: var(--s-8); align-items: start; }
  .mapa { aspect-ratio: auto; height: 100%; min-height: 440px; }
}

/* ---------- Rodapé ---------- */
.site-footer {
  background: #2a2019;
  color: #e9e2d8;
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--fs-pequeno);
}
.site-footer a { color: #f3e6cf; }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: var(--cor-creme); }
.site-footer .marca { color: #fff; align-items: flex-start; }
.site-footer .marca__linha { width: 100%; }
.footer__info { margin-top: var(--s-5); }
.footer__equipe { list-style: none; display: grid; gap: var(--s-1); margin-bottom: var(--s-4); }
.footer__grade { display: grid; gap: var(--s-6); }
.footer__titulo {
  font-family: var(--fonte-texto);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-creme);
  margin-bottom: var(--s-3);
}
.footer__lista { list-style: none; display: grid; gap: var(--s-1); }
.footer__lista a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__aviso {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(235, 215, 184, 0.25);
  display: grid;
  gap: var(--s-2);
  color: #cfc5b8;
}
.footer__aviso p { margin: 0; }
.site-footer .preencher { font-size: 0.85em; }
@media (min-width: 768px) {
  .footer__grade { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s-7); }
}

/* ---------- WhatsApp flutuante ---------- */
.wa-flutuante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cor-primaria);
  color: #fff;
  box-shadow: 0 6px 20px rgba(42, 32, 25, 0.28);
  transition: background-color var(--transicao), opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.wa-flutuante:hover { background: var(--cor-primaria-escura); color: #fff; }
.wa-flutuante .icone { width: 28px; height: 28px; }
.wa-flutuante.is-oculto { opacity: 0; visibility: hidden; transform: translateY(12px); }
@media (min-width: 1024px) {
  .wa-flutuante { right: 24px; bottom: 24px; }
}

/* ---------- Páginas de texto (políticas, 404) ---------- */
.pagina-texto { padding-block: var(--s-8) var(--s-9); }
.prosa { max-width: 760px; }
.prosa h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); }
.prosa h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); margin-top: var(--s-7); }
.prosa h3 { font-size: 1.25rem; margin-top: var(--s-5); }
.prosa ul, .prosa ol { padding-left: 1.4em; margin-bottom: var(--s-4); }
.prosa li { margin-bottom: var(--s-2); }
.prosa table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-5); font-size: var(--fs-pequeno); }
.prosa th, .prosa td { text-align: left; vertical-align: top; padding: var(--s-3); border-bottom: 1px solid var(--cor-borda); }
.prosa th { background: var(--cor-fundo-2); font-weight: 600; }
.tabela-rolagem { overflow-x: auto; }
.aviso-rascunho {
  padding: var(--s-4) var(--s-5);
  background: #fff4d6;
  border: 1px dashed #b08a2e;
  border-radius: var(--raio-card);
  color: #5c4300;
  font-size: var(--fs-pequeno);
  margin-bottom: var(--s-6);
}
.atualizacao { color: var(--cor-texto-2); font-size: var(--fs-pequeno); }

/* ---------- Entrada suave (só com JS e sem reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .revelar { opacity: 0; transform: translateY(12px); transition: opacity 300ms ease, transform 300ms ease; }
  .js .revelar.is-visivel { opacity: 1; transform: none; }
}

/* ---------- Menos movimento (configuração do sistema) ----------
   Nada se desloca, cresce ou rola sozinho. Fades e trocas de cor continuam, suaves,
   para a interface não "pular" de um estado para outro. */
@media (prefers-reduced-motion: reduce) {
  .btn--flow,
  .btn--flow:active { transform: none; }
  .btn__preench { transform: translate(-50%, -50%) scale(1); transition: opacity 400ms ease; }
  .btn--flow:hover .btn__preench,
  .btn--flow:focus-visible .btn__preench { transform: translate(-50%, -50%) scale(1); }
  .btn--flow:hover .btn__seta--dir,
  .btn--flow:focus-visible .btn__seta--dir { transform: none; }
  /* Exceção pedida pelo Blud (2026-10-16): o card ainda levanta um pouco no hover — movimento mínimo, provocado pela pessoa */
  .advogado:hover .advogado__monograma { transform: none; letter-spacing: 0.08em; }
  .advogado:hover .advogado__linha { width: 32px; }
  .js .info__item { transform: none; }
  .faq__item summary .icone { transition: none; }
  .wa-flutuante { transition: opacity 300ms ease, visibility 300ms ease; }
  .wa-flutuante.is-oculto { transform: none; }
}