/* ============================================================================
   ROCHA, ALMEIDA & SANGY ADVOGADOS
   Direção: editorial art-déco, ancorada no monograma RAS e no arco do manual.
   Público: pessoa em crise (familiar de preso, investigado), trabalhador, motorista.
   Proibido aqui: gradiente roxo, mesh escuro, glassmorphism, 3 cards iguais,
   preto puro e branco puro em superfície grande.
   ========================================================================= */

/* ---------- FONTES (self-host, sem request externo) ---------- */
@font-face {
  font-family: "Stardom";
  src: url("../fontes/Stardom-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fontes/montserrat-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fontes/Satoshi-Variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
}

/* ---------- TOKENS ---------- */
:root {
  /* Superfície: near-black quente, nunca #000. O manual pede preto, mas preto puro
     em tela grande achata a imagem e entrega cara de template. */
  --tinta:        #0b0a09;
  --tinta-2:      #14120f;
  --tinta-3:      #1f1c18;
  --papel:        #f4f1ea;
  --papel-2:      #e8e3d8;

  /* Dourado do manual, decomposto em 3 paradas pro gradiente metálico */
  --ouro:         #c9a961;
  --ouro-claro:   #eddcae;
  --ouro-escuro:  #8a6d34;
  --ouro-grad: linear-gradient(135deg, var(--ouro-escuro) 0%, var(--ouro-claro) 45%, var(--ouro) 100%);

  /* Texto sobre escuro: 4 níveis, senão a hierarquia morre */
  --txt-1: #f4f1ea;
  --txt-2: rgb(244 241 234 / .72);
  --txt-3: rgb(244 241 234 / .52);
  --txt-4: rgb(244 241 234 / .34);
  /* --txt-4 e reprovado no WCAG (2,82:1). Usar SO em decoracao aria-hidden,
     nunca em conteudo real como numero de OAB ou aviso legal. */
  /* Texto sobre claro */
  --esc-1: #0b0a09;
  --esc-2: rgb(11 10 9 / .70);
  --esc-3: rgb(11 10 9 / .48);

  --linha:        rgb(244 241 234 / .10);
  --linha-forte:  rgb(244 241 234 / .18);
  --linha-esc:    rgb(11 10 9 / .12);

  /* Tipografia fluida. clamp() sempre, nunca breakpoint de font-size. */
  --f-display: "Stardom", "Didot", Georgia, serif;
  --f-corpo:   "Montserrat", system-ui, -apple-system, sans-serif;
  --f-tec:     "Satoshi", "Montserrat", sans-serif;

  --t-hero:  clamp(2.8rem, 6.4vw, 6.6rem);
  --t-h2:    clamp(2rem, 4.6vw, 4.25rem);
  --t-h3:    clamp(1.35rem, 2vw, 1.85rem);
  --t-corpo: clamp(1rem, 1.05vw, 1.1rem);
  --t-peq:   clamp(.82rem, .9vw, .9rem);
  /* Piso de 12px: abaixo disso o Google marca "texto ilegível" na análise
     mobile da página de destino, o que derruba a nota de experiência. */
  --t-label: clamp(.75rem, .8vw, .8rem);

  /* Ritmo. Varia por seção de propósito: seção com espaço igual = cara de template. */
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --max: 78rem;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-forte: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tinta);
  color: var(--txt-1);
  font-family: var(--f-corpo);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 2px; }

/* ---------- GRÃO DE FILME (fixo na viewport, não anda com o scroll) ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");
}

/* ---------- UTILITÁRIOS ---------- */
.env { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.fig { margin: 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Classes que substituem atributos style= inline. Existem para a CSP poder
   rodar com `style-src 'self'`, sem 'unsafe-inline'. */
.sprite { position: absolute; width: 0; height: 0; }
.rotulo-mb { margin-bottom: 1.6rem; }
.canal-endereco { font-size: 1.05rem; line-height: 1.4; display: block; }

/* Pular para o conteúdo: só aparece ao receber foco pelo teclado.
   Feito em CSS puro para a CSP não precisar de 'unsafe-inline' em script-src. */
.pular { position: absolute; left: -9999px; top: 0; z-index: 300; }
.pular:focus-visible { left: 1rem; top: 1rem; }
.ouro-txt {
  background: var(--ouro-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ouro);
}
.display { font-family: var(--f-display); font-weight: 400; line-height: .92; letter-spacing: -.02em; }
.serifado { font-family: var(--f-display); }

/* Rótulo editorial numerado. Substitui o "chip de categoria com bolinha",
   que é o tell nº 1 de layout feito por IA. */
.rotulo {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  font-family: var(--f-tec);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.rotulo b { font-weight: 600; color: var(--ouro); font-variant-numeric: tabular-nums; }
.rotulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linha-forte);
  transform: translateY(-.28em);
}

/* ---------- BOTÕES ---------- */
.btn {
  --bg: var(--ouro-grad);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.05rem 1.9rem;
  font-family: var(--f-tec);
  font-size: var(--t-peq);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -12px rgb(201 169 97 / .55); }
.btn:hover::after { transform: translateX(120%); }

/* Secundário: contorno, deliberadamente mais discreto que o de ligar */
.btn-2 {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1.05rem 1.6rem;
  font-family: var(--f-tec);
  font-size: var(--t-peq);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--txt-2);
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  transition: color .4s, border-color .4s, background-color .4s;
}
.btn-2 svg { width: 1.1em; height: 1.1em; }
.btn-2:hover { color: var(--txt-1); border-color: var(--ouro); background: rgb(201 169 97 / .07); }

/* ============================================================================
   CABEÇALHO
   ========================================================================= */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: clamp(.9rem, 1.6vw, 1.4rem);
  transition: background-color .5s var(--ease), border-color .5s, backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.topo.fixo {
  background: rgb(11 10 9 / .82);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--linha);
}
.topo .env { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
/* padding + margem negativa: estende a área de toque para 44px+
   sem mudar um pixel do layout visual */
.marca { display: flex; align-items: center; gap: .85rem; padding-block: .4rem; margin-block: -.4rem; }
.marca img { width: clamp(38px, 4.4vw, 52px); }
.marca span {
  font-family: var(--f-display);
  font-size: clamp(.9rem, 1.15vw, 1.08rem);
  line-height: 1.15;
  letter-spacing: .04em;
  color: var(--txt-1);
}
.marca span i { display: block; font-style: normal; font-family: var(--f-tec); font-size: .58em; letter-spacing: .3em; color: var(--txt-3); }

.menu { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); }
.menu a {
  font-family: var(--f-tec);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--txt-2);
  transition: color .35s;
}
.menu a:hover { color: var(--ouro); }
.topo .btn { padding: .8rem 1.3rem; }

/* 44x44 de área de toque (mínimo confortável no polegar); o desenho de 30x18
   fica centralizado dentro. Antes o botão era só o desenho, 30x18 de toque. */
.hamb { display: none; width: 44px; height: 44px; position: relative; margin-right: -7px; }
.hamb i { position: absolute; left: 7px; width: 30px; height: 1.5px; background: var(--txt-1); transition: transform .45s var(--ease), opacity .3s; }
.hamb i:nth-child(1) { top: 13px; }
.hamb i:nth-child(2) { top: 21px; }
.hamb i:nth-child(3) { top: 29px; }
body.menu-on .hamb i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-on .hamb i:nth-child(2) { opacity: 0; }
body.menu-on .hamb i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================================
   1. HERO — o arco do manual usado como estrutura, não como enfeite
   ========================================================================= */
/* A altura do hero MANDA na escala da foto de fundo: com `cover`, hero alto
   força a imagem a ampliar e virar close-up de rosto. Mantido perto de 100svh
   para a foto ficar quase 1:1 e os três continuarem visíveis. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Texto no terço de baixo: deixa os rostos limpos na parte de cima. */
  justify-content: flex-end;
  min-height: min(100svh, 880px);
  padding-top: clamp(6.5rem, 11vh, 8.5rem);
  padding-bottom: clamp(2.5rem, 5vh, 3.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* ---------- FOTO DE FUNDO ---------- */
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centralizado no eixo X: os três ficam simétricos no quadro.
     Deslocar para o lado cortava justamente um deles. */
  object-position: 50% 15%;
  /* dessatura e escurece pra foto viver na paleta preto/dourado do site,
     em vez de brigar com ela (o original tem escritório claro e azul de terno) */
  filter: grayscale(.45) saturate(.7) contrast(1.12) brightness(.66);
}

/* Camada escura de DOMINÂNCIA VERTICAL: leve em cima, onde estão os rostos,
   e pesada embaixo, onde o texto precisa de contraste. Um degradê horizontal
   forte (como estava) apagava o advogado da esquerda atrás do título.
   A terceira parada é o véu quente que harmoniza a foto com o dourado da marca. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(11 10 9 / .72) 0%, rgb(11 10 9 / .3) 16%, rgb(11 10 9 / .34) 40%, rgb(11 10 9 / .84) 72%, var(--tinta) 97%),
    linear-gradient(98deg, rgb(11 10 9 / .5) 0%, rgb(11 10 9 / .12) 46%, rgb(11 10 9 / .34) 100%),
    linear-gradient(150deg, rgb(201 169 97 / .13) 0%, transparent 58%);
}

.hero-pattern {
  position: absolute;
  top: -6%;
  right: -12%;
  z-index: -1;
  width: min(48vw, 620px);
  opacity: .05;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: gira 190s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.hero-txt { max-width: 46rem; }
.hero h1 { font-size: var(--t-hero); margin-block: 1.6rem 1.5rem; }
.hero h1 em { font-style: normal; display: block; }
.hero h1 .l2 { padding-left: clamp(0px, 4vw, 4.5rem); }
.hero-sub {
  max-width: 34ch;
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  color: var(--txt-2);
  margin-bottom: 2.2rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* Endereço de frente pra delegacia. É o ativo de confiança mais forte que eles têm. */
.hero-local {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-top: 2.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
  max-width: 40ch;
  font-family: var(--f-tec);
  font-size: var(--t-peq);
  line-height: 1.5;
  color: var(--txt-3);
}
.hero-local svg { width: 1.15em; height: 1.15em; flex: none; margin-top: .18em; color: var(--ouro); }
.hero-local b { display: block; font-weight: 600; color: var(--txt-2); }

/* O arco: caixa alta com topo redondo, igual ao manual */
.arco {
  position: relative;
  border-radius: 999px 999px 4px 4px;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 8%, rgb(201 169 97 / .16) 0%, transparent 62%),
    linear-gradient(180deg, var(--tinta-3) 0%, var(--tinta) 88%);
  isolation: isolate;
}
.arco::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgb(201 169 97 / .55), rgb(201 169 97 / .05) 55%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
}
/* ---------- ANIMAÇÃO DE DESTAQUE DO BOTÃO DE LIGAR ----------
   Respiro lento em anel dourado. Chama o olho sem piscar nem saltar,
   que num site de advocacia criminal passaria vergonha. */
.btn-pulso { position: relative; }
.btn-pulso::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 4px;
  border: 1.5px solid var(--ouro);
  opacity: 0;
  pointer-events: none;
  animation: respiro 3.4s var(--ease) infinite;
}
@keyframes respiro {
  0%   { transform: scale(.985); opacity: 0; }
  35%  { opacity: .75; }
  100% { transform: scale(1.075); opacity: 0; }
}
.btn-pulso:hover::before { animation-play-state: paused; opacity: 0; }

/* faixa de credenciais que corre embaixo do hero */
.faixa {
  margin-top: clamp(2rem, 5vh, 4rem);
  padding-block: 1.1rem;
  border-block: 1px solid var(--linha);
  overflow: hidden;
}
.faixa-pista { display: flex; gap: 3.5rem; width: max-content; animation: correr 42s linear infinite; }
.faixa-pista span {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--f-tec);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-4);
  white-space: nowrap;
}
.faixa-pista span::before { content: ""; width: 4px; height: 4px; background: var(--ouro); transform: rotate(45deg); }
@keyframes correr { to { transform: translateX(-50%); } }
.faixa:hover .faixa-pista { animation-play-state: paused; }

/* ============================================================================
   2. SITUAÇÕES — identificação do problema
   ========================================================================= */
.sit { padding-block: clamp(4.5rem, 11vh, 9rem); }
.sit-topo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.sit-topo h2 { font-size: var(--t-h2); }
.sit-topo p { color: var(--txt-2); max-width: 42ch; }

/* Grade quebrada de propósito: 6 itens, larguras diferentes.
   Grade de cards idênticos é o outro grande tell de IA. */
.sit-lista { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.sit-item { padding: clamp(1.6rem, 2.6vw, 2.4rem); background: var(--tinta); transition: background-color .5s var(--ease); }
/* Ritmo assimétrico, mas sem deixar célula vazia: cada linha soma 6.
   3+3 / 2+4 / 4+2. Cards de largura idêntica são o tell nº 2 de layout de IA. */
.sit-item:nth-child(1), .sit-item:nth-child(2) { grid-column: span 3; }
.sit-item:nth-child(3) { grid-column: span 2; }
.sit-item:nth-child(4) { grid-column: span 4; }
.sit-item:nth-child(5) { grid-column: span 4; }
.sit-item:nth-child(6) { grid-column: span 2; }
.sit-item:hover { background: var(--tinta-2); }
.sit-item i {
  display: block;
  font-family: var(--f-display);
  font-style: normal;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--ouro);
  opacity: .55;
  margin-bottom: 1.1rem;
}
.sit-item h3 { font-size: var(--t-h3); font-family: var(--f-display); margin-bottom: .6rem; }
.sit-item p { font-size: var(--t-peq); color: var(--txt-3); }

/* Bloco de posicionamento: o Estado tem estrutura, o cidadão precisa de defesa técnica */
.contraste {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--papel);
  color: var(--esc-1);
  border-radius: 3px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.contraste img { width: clamp(74px, 9vw, 118px); opacity: .92; }
.contraste p { font-family: var(--f-display); font-size: clamp(1.3rem, 2.5vw, 2.15rem); line-height: 1.24; }
.contraste small { display: block; margin-top: 1rem; font-family: var(--f-tec); font-size: var(--t-peq); color: var(--esc-3); }

/* ============================================================================
   3. ÁREAS — criminal em destaque, as outras duas menores. Hierarquia real.
   ========================================================================= */
.areas { padding-block: clamp(4.5rem, 11vh, 9rem); background: var(--tinta-2); }
.areas h2 { font-size: var(--t-h2); margin-block: 1.4rem clamp(2.5rem, 6vh, 4rem); max-width: 24ch; }

.area-destaque {
  display: grid;
  grid-template-columns: 1fr clamp(200px, 26vw, 330px);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  border: 1px solid var(--linha-forte);
  border-radius: 3px;
  background:
    radial-gradient(80% 130% at 92% 50%, rgb(201 169 97 / .10) 0%, transparent 60%),
    var(--tinta);
  margin-bottom: 1rem;
}
.area-destaque .tag {
  display: inline-block;
  font-family: var(--f-tec);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 1rem;
}
.area-destaque h3 { font-family: var(--f-display); font-size: clamp(1.9rem, 3.6vw, 3.1rem); margin-bottom: 1rem; }
.area-destaque p { color: var(--txt-2); max-width: 52ch; margin-bottom: 1.8rem; }
.area-destaque ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem 1.5rem; margin-bottom: 2rem; }
.area-destaque li {
  display: flex;
  gap: .6rem;
  font-family: var(--f-tec);
  font-size: var(--t-peq);
  color: var(--txt-2);
}
.area-destaque li::before { content: ""; width: 5px; height: 5px; margin-top: .55em; flex: none; background: var(--ouro); transform: rotate(45deg); }
/* Aqui vai o SELO da marca, não a foto.
   Repetir a mesma foto dos três em 3 lugares era o ponto mais fraco do layout. */
.area-arco { aspect-ratio: 3 / 3.5; display: grid; place-items: center; }
.area-arco img {
  width: 62%;
  max-width: 210px;
  opacity: .8;
  filter: drop-shadow(0 0 28px rgb(201 169 97 / .18));
}

.areas-menores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.area-min {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--linha);
  border-radius: 3px;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.area-min:hover { border-color: rgb(201 169 97 / .4); transform: translateY(-3px); }
.area-min .num { font-family: var(--f-tec); font-size: var(--t-label); font-weight: 700; letter-spacing: .16em; color: var(--txt-3); }
.area-min h3 { font-family: var(--f-display); font-size: var(--t-h3); margin-block: .9rem .7rem; }
.area-min p { font-size: var(--t-peq); color: var(--txt-3); margin-bottom: 1.3rem; }
.area-min ul { display: flex; flex-wrap: wrap; gap: .4rem; }
.area-min li {
  font-family: var(--f-tec);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--txt-3);
  padding: .3rem .7rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
}

/* ============================================================================
   4. ESCRITÓRIO — autoridade + como funciona
   ========================================================================= */
.escr { padding-block: clamp(4.5rem, 11vh, 9rem); }
.escr-grade { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
/* A foto original é 16/9. Uso a MESMA proporção para não cortar ninguém,
   e o arredondamento da base mantém a citação ao arco da marca. */
.escr-foto { position: relative; border-radius: 3px 3px 120px 120px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--tinta-3); }
.escr-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) contrast(1.1) brightness(.86); }
/* Selo dourado ancorando a coluna abaixo da foto */
.escr-selo { display: block; width: 92px; margin: 2rem auto 0; opacity: .55; }
.escr-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 10 9 / .35), transparent 45%, rgb(11 10 9 / .55)); }

.escr h2 { font-size: var(--t-h2); margin-block: 1.4rem 1.5rem; }
.escr-texto p { color: var(--txt-2); margin-bottom: 1.1rem; max-width: 54ch; }

/* Sócios. Bloco RETIRADO do HTML em 25/07/2026 porque dois dos três ainda não
   têm número de OAB para publicar. O CSS fica aqui de propósito: quando os
   números chegarem, é só recolocar o markup na home. Ver PENDENCIAS.md. */
.socios { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); margin-block: 2.5rem; }
.socio { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; padding: 1.15rem 1.4rem; background: var(--tinta); }
.socio b { font-family: var(--f-display); font-weight: 400; font-size: 1.22rem; letter-spacing: .01em; }
.socio span { font-family: var(--f-tec); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); }
.socio em { margin-left: auto; font-style: normal; font-family: var(--f-tec); font-size: var(--t-peq); color: var(--ouro); }
.pend { background: rgb(201 169 97 / .09) !important; border-left: 2px solid var(--ouro); }
.pend b { color: var(--ouro); }

/* Processo em 4 passos, com linha que se preenche no scroll */
.passos { counter-reset: p; margin-top: 1rem; }
.passo { position: relative; padding: 0 0 2rem 3.2rem; }
.passo::before {
  counter-increment: p;
  content: "0" counter(p);
  position: absolute;
  left: 0;
  top: -.15em;
  font-family: var(--f-tec);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ouro);
}
.passo::after { content: ""; position: absolute; left: .62rem; top: 1.4em; bottom: 0; width: 1px; background: var(--linha-forte); }
.passo:last-child { padding-bottom: 0; }
.passo:last-child::after { display: none; }
.passo h4 { font-family: var(--f-display); font-size: 1.2rem; margin-bottom: .35rem; }
.passo p { font-size: var(--t-peq); color: var(--txt-3); max-width: 48ch; }

/* ============================================================================
   5. CONTATO
   ========================================================================= */
.contato { padding-block: clamp(4.5rem, 11vh, 9rem); background: var(--papel); color: var(--esc-1); }
.contato .rotulo { color: var(--esc-3); }
.contato .rotulo::after { background: var(--linha-esc); }
.contato h2 { font-size: var(--t-h2); font-family: var(--f-display); margin-block: 1.4rem 1.2rem; max-width: 26ch; }
.contato-lead { color: var(--esc-2); max-width: 46ch; margin-bottom: 2.5rem; }
.contato-grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); }

.canais { display: grid; gap: 1px; background: var(--linha-esc); border: 1px solid var(--linha-esc); border-radius: 3px; overflow: hidden; }
.canal { display: flex; align-items: center; gap: 1.1rem; padding: 1.35rem 1.5rem; background: var(--papel); transition: background-color .4s; }
.canal:hover { background: var(--papel-2); }
.canal svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--esc-1); }
.canal span { display: block; font-family: var(--f-tec); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--esc-3); }
.canal b { font-family: var(--f-display); font-size: 1.28rem; font-weight: 400; }
.canal.destaque { background: var(--tinta); color: var(--txt-1); }
.canal.destaque:hover { background: var(--tinta-2); }
.canal.destaque svg { color: var(--ouro); }
.canal.destaque span { color: var(--txt-3); }

.mapa { border: 1px solid var(--linha-esc); border-radius: 3px; overflow: hidden; min-height: 320px; background: var(--papel-2); }
.mapa iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; filter: grayscale(.35) contrast(1.05); }
.horario { margin-top: 1rem; padding: 1.2rem 1.4rem; border: 1px solid var(--linha-esc); border-radius: 3px; }
.horario dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.5rem; margin: 0; font-family: var(--f-tec); font-size: var(--t-peq); }
.horario dt { color: var(--esc-3); }
.horario dd { margin: 0; text-align: right; color: var(--esc-1); font-weight: 600; }

/* ---------- RODAPÉ ---------- */
.rodape { padding-block: clamp(3rem, 7vh, 5rem) 2rem; background: var(--tinta); border-top: 1px solid var(--linha); }
.rodape-grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.rodape-marca img { width: 66px; margin-bottom: 1.2rem; }
.rodape-marca p { font-size: var(--t-peq); color: var(--txt-3); max-width: 34ch; }
.rodape h5 { font-family: var(--f-tec); font-size: var(--t-label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-3); margin: 0 0 1.1rem; }
.rodape li + li { margin-top: .6rem; }
.rodape li a { font-size: var(--t-peq); color: var(--txt-2); transition: color .3s; }
.rodape li a:hover { color: var(--ouro); }
.rodape-base { padding-top: 1.8rem; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.rodape-base p { font-family: var(--f-tec); font-size: .74rem; line-height: 1.6; color: var(--txt-3); max-width: 62ch; }

/* ---------- BARRA FIXA DE LIGAÇÃO (mobile) ---------- */
.barra-tel {
  position: fixed;
  inset: auto 0 0;
  z-index: 150;
  display: none;
  gap: 1px;
  background: var(--linha-forte);
  transform: translateY(100%);
  transition: transform .5s var(--ease-forte);
}
.barra-tel.on { transform: translateY(0); }
.barra-tel a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05rem .8rem;
  font-family: var(--f-tec);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.barra-tel .tel { background: var(--ouro-grad); color: var(--tinta); flex: 1.9; }
.barra-tel .zap { background: var(--tinta-2); color: var(--txt-2); }
.barra-tel svg { width: 1.15em; height: 1.15em; }

/* ============================================================================
   ANIMAÇÃO DE ENTRADA
   Movimento contido de propósito: o público chega em crise, não quer circo.
   ========================================================================= */
/* Só esconde se o JS estiver de fato rodando (o site.js troca no-js -> js na
   primeira linha). Sem essa guarda, falha de rede ou bloqueador deixava a
   página em branco: o conteúdo nascia opacity:0 e nada o revelava. */
html.js .rev { opacity: 0; transform: translateY(26px); }
.rev-linha { display: block; overflow: hidden; }
.rev-linha > span { display: block; }

/* ============================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width: 1000px) {
  /* A foto é horizontal (1.79) com os três lado a lado. Em tela estreita,
     `cover` cortaria as laterais e sobraria só o do meio. Então no mobile a foto
     deixa de ser fundo e vira FAIXA no topo, em proporção natural. */
  .hero { min-height: 0; padding-top: 0; display: block; }
  .hero-bg { position: relative; inset: auto; z-index: 0; margin-bottom: -14%; }
  .hero-bg img { height: auto; aspect-ratio: 16 / 10; object-position: 50% 24%; filter: grayscale(.42) saturate(.72) contrast(1.1) brightness(.72); }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgb(11 10 9 / .82) 0%, rgb(11 10 9 / .12) 34%, rgb(11 10 9 / .55) 76%, var(--tinta) 100%),
      linear-gradient(135deg, rgb(201 169 97 / .10) 0%, transparent 60%);
  }
  .hero .env { position: relative; z-index: 1; }
  .hero-txt { max-width: none; padding-top: 1rem; }
  .sit-topo { grid-template-columns: 1fr; }
  .sit-item, .sit-item:nth-child(1), .sit-item:nth-child(2), .sit-item:nth-child(3), .sit-item:nth-child(4) { grid-column: span 3; }
  .area-destaque { grid-template-columns: 1fr; }
  .area-arco { display: none; }
  .escr-grade { grid-template-columns: 1fr; }
  .escr-foto { max-width: 400px; }
  .contato-grade { grid-template-columns: 1fr; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .menu { display: none; }
  .hamb { display: block; }
  .topo .btn { display: none; }
  .barra-tel { display: flex; }
  body { padding-bottom: 3.6rem; }
  .sit-item, .sit-item:nth-child(n) { grid-column: span 6; }
  .contraste { grid-template-columns: 1fr; text-align: left; }
  .rodape-grade { grid-template-columns: 1fr; gap: 2rem; }
  .hero h1 .l2 { padding-left: 0; }

  /* menu aberto */
  body.menu-on .menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 99;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: rgb(11 10 9 / .97);
    backdrop-filter: blur(8px);
  }
  body.menu-on .menu a { font-size: 1.1rem; letter-spacing: .2em; }
  body.menu-on { overflow: hidden; }
}

/* ---------- QUEM PEDIU MENOS MOVIMENTO ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rev { opacity: 1 !important; transform: none !important; }
  .hero-pattern, .faixa-pista { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- IMPRESSÃO ---------- */
@media print {
  .topo, .barra-tel, .hero-pattern, .faixa, .mapa { display: none !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
}