:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --ink: #1b2330;
  --muted: #5a6270;
  --line: #dcd7cc;
  --accent: #1f3a5a;
  --accent-ink: #ffffff;
  --gold: #9a7b4f;
  --wa: #1f8f4e;
  --placeholder-bg: #fff4d6;
  --placeholder-ink: #7a5a00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161d; --surface: #1a2029; --ink: #e8e4db; --muted: #a3a9b3;
    --line: #2c3440; --accent: #8fb0d6; --accent-ink: #0f1620; --gold: #c7a676;
    --wa: #25a35d; --placeholder-bg: #3a2f12; --placeholder-ink: #f0cf7a;
  }
}
:root[data-theme="dark"] {
  --bg: #12161d; --surface: #1a2029; --ink: #e8e4db; --muted: #a3a9b3;
  --line: #2c3440; --accent: #8fb0d6; --accent-ink: #0f1620; --gold: #c7a676;
  --wa: #25a35d; --placeholder-bg: #3a2f12; --placeholder-ink: #f0cf7a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 "DM Sans", system-ui, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1; }
h1, h2, h3, .brand { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 400; line-height: 1.25; }
a { color: var(--accent); }
/* Margens simétricas: partindo de uma coluna de 1080px centralizada, as duas bordas ficam até
   100px mais perto das laterais. À esquerda alinham os textos; à direita, o menu, o logo e os
   links do rodapé. Nunca menos de 32px da borda da tela. */
:root { --wrap-r: 16px; --wrap-l: 16px; }
@media (min-width: 720px) {
  :root {
    --wrap-r: max(32px, calc((100vw - 1080px) / 2 + 32px - 100px));
    --wrap-l: max(32px, calc((100vw - 1080px) / 2 + 32px - 140px)); /* esquerda: 40px mais perto da borda */
  }
}
.wrap { margin: 0; padding: 0 var(--wrap-r) 0 var(--wrap-l); }
.narrow > * { max-width: 716px; }

.ph {
  background: var(--placeholder-bg);
  color: var(--placeholder-ink);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: .92em;
}

/* Cabeçalho e rodapé: tom escuro tirado da foto da página inicial */
:root { --chrome: #1e2125; /* chumbo bem escuro */ --chrome-ink: #f4f1ea; --chrome-muted: #a9adb3; --chrome-line: rgba(255,255,255,.12); --chrome-gold: #d4b384; }
header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--chrome) 95%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--chrome-line);
  transition: background-color .3s, border-color .3s;
}
/* Na página inicial o cabeçalho fica sobre a foto e só escurece ao rolar */
.photo-page header { position: fixed; left: 0; right: 0; }
.photo-page header:not(.scrolled) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
/* Logo e título centralizados na vertical; título em maiúsculas, um pouco menor que o logo */
.brand {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 400;
  /* Em maiúsculas na Montserrat o título ocupa ~21,9 vezes o tamanho da fonte; o menu (DM Sans)
     ocupa ~335px. 23px a partir de ~1000px de largura; abaixo disso diminui para caber. */
  text-transform: uppercase;
  font-size: clamp(12px, calc((100vw - 500px) / 22), 23px); line-height: 1; letter-spacing: 0; /* 500: menu com as duas setas */
  text-decoration: none; color: var(--chrome-ink); white-space: nowrap;
}
.brand img { height: 40px; width: auto; flex: none; }
.brand span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .nav { gap: 10px; }
  .brand { font-size: min(22px, calc((100vw - 132px) / 22)); letter-spacing: 0; gap: 10px; }
  .brand img { height: 32px; }
  .menu-btn { padding: 4px 10px; font-size: 1.1rem; line-height: 1.2; }
}
/* Links com borda em cima e embaixo (a de cima invisível) para o texto ficar no mesmo
   centro vertical do logo e do título */
.nav ul { list-style: none; display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; }
.nav ul a { display: block; line-height: 1; color: var(--chrome-ink); text-decoration: none; font-weight: 500; font-size: 14px; padding: 6px 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
.nav ul a:hover { color: var(--chrome-gold); }
.nav ul a[aria-current="page"] { border-bottom-color: var(--chrome-gold); }
.menu-btn { display: none; background: none; border: 1px solid rgba(255,255,255,.35); color: var(--chrome-ink); border-radius: 4px; padding: 6px 12px; font: inherit; cursor: pointer; }
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .nav ul {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--chrome); border-bottom: 1px solid var(--chrome-line);
  }
  .nav ul.open { display: flex; }
  .nav ul a { display: block; padding: 14px 16px; border-top: 1px solid var(--chrome-line); border-bottom: 0; }
  .nav ul a[aria-current="page"] { color: var(--chrome-gold); font-weight: 600; }
}

/* Hero / page head */
.hero { padding: 96px 0 80px; }
.page-head { padding: 64px 0 40px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin: 0; }
.page-head p { color: var(--muted); max-width: 62ch; margin: 14px 0 0; font-size: 1.08rem; }
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 600; margin: 0 0 14px; }
.hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); margin: 0 0 22px; max-width: 18ch; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; margin: 0 0 30px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 38px; padding: 0; list-style: none; }
.tags li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .88rem; color: var(--muted); background: var(--surface); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 4px; text-decoration: none;
  font-weight: 600; font-size: .95rem; border: 1px solid var(--accent); cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-outline { color: var(--accent); background: transparent; }
.btn:hover { opacity: .9; }

/* Página inicial com foto de fundo */
.hero-photo {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-start;
  color: #f4f1ea;
  /* o cabeçalho fixo (69px) fica por cima da foto; o texto dourado começa 50px abaixo dele,
     em todas as páginas, e fica alinhado ao topo mesmo quando o conteúdo é curto */
  padding: 119px 0 72px;
}
/* Na página inicial a foto fica atrás de toda a página (cabeçalho, conteúdo e rodapé) e rola
   junto com ela. Tem o tamanho da tela, ancorada à direita e no topo; onde a foto termina, ela
   se funde no chumbo, e o rodapé translúcido deixa ver o que estiver atrás dele. */
body.photo-page { background: var(--chrome); position: relative; }
body.photo-page::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  --img-h: calc(var(--zoom) * var(--base) / 1.5);
  /* Foto puxada para cima: o topo da cabeça fica a ~25% da altura da foto, e é posicionado
     cerca de 20px abaixo do cabeçalho (68px). --img-bottom é onde a foto termina depois do deslocamento. */
  --shift: calc(100px - 0.25 * var(--img-h));
  --img-bottom: calc(var(--img-h) + var(--shift));
  background:
    linear-gradient(180deg, rgba(30,33,37,0) calc(var(--img-bottom) - 260px), var(--chrome) var(--img-bottom)),
    linear-gradient(90deg, rgba(12,16,24,.9) 0%,
      rgba(12,16,24,.82) calc(100% - 0.36 * max(100vw, 150svh) - 140px),
      rgba(12,16,24,.3) calc(100% - 0.36 * max(100vw, 150svh) + 10px),
      rgba(12,16,24,.12) 100%),
    var(--chrome) url("hero-escritorio.jpg")
      right calc(-0.36 * (var(--zoom) - 1) * var(--base)) top var(--shift) / calc(var(--zoom) * var(--base)) auto no-repeat;
  /* Zoom na foto. --base é a largura que cobre a tela; ampliada por --zoom, a foto é deslocada para
     a direita na medida exata para a mão da pessoa continuar no mesmo ponto (36% de --base a partir
     da borda direita). Assim ela fica maior sem avançar sobre a coluna de texto; o que é cortado
     é a parede à direita e o pé da foto. Com zoom acima de ~1,4 a pessoa começaria a ser cortada. */
  --zoom: 1.25;
  --base: max(100vw, 150svh);
}
/* Sombra leve no topo, para o menu ficar legível sobre a foto */
.hero-photo::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 150px;
  background: linear-gradient(180deg, rgba(15,19,25,.55), rgba(15,19,25,0));
}
/* Fotos de paisagem como fundo: body.bg-cidade (noite em Santo André, página Contato) e
   body.bg-colunas (colunas clássicas, página inicial). Cada classe só define a foto em --foto.
   A foto tem o tamanho da tela, centralizada no topo, e termina se fundindo no chumbo.
   Por ser bem iluminada, leva uma máscara escura geral mais forte que a do retrato, e uma
   escura extra do lado do texto, para as cores das letras continuarem as mesmas. */
.bg-cidade { --foto: url("fundo-santo-andre.jpg"); }
.bg-colunas { --foto: url("fundo-colunas.jpg"); }
.bg-equipe { --foto: url("fundo-areas.jpg"); }   /* Atuação: pessoas num saguão com faixas de luz e sombra */
.bg-camera { --foto: url("fundo-politica.jpg"); }  /* Política de privacidade: câmera de segurança (foto espelhada) */
.bg-prev { --foto: url("fundo-previdenciario.jpg"); }   /* Previdenciário: casal de idosos diante do mar (foto espelhada, casal à direita) */
.bg-civel { --foto: url("fundo-contencioso-civel.jpg"); }
.bg-estrategico { --foto: url("fundo-contencioso-estrategico.jpg"); }
.bg-empresarial { --foto: url("fundo-empresarial.jpg"); }
.bg-familia { --foto: url("fundo-familia-e-sucessoes.jpg"); }
.bg-imobiliario { --foto: url("fundo-imobiliario.jpg"); }
.bg-penal { --foto: url("fundo-penal.jpg"); }
.bg-consumo { --foto: url("fundo-relacoes-de-consumo.jpg"); }
.bg-trabalhista { --foto: url("fundo-trabalhista.jpg"); }
.bg-social { --foto: url("fundo-responsabilidade-social.jpg"); }
.bg-remo { --foto: url("fundo-equipe.jpg"); }       /* Equipe: barco de remo visto de cima */
.bg-sala { --foto: url("fundo-escritorio.jpg"); }   /* O Escritório: sala de trabalho */
.bg-torre { --foto: url("fundo-como-trabalhamos.jpg"); }  /* Como Trabalhamos: torre de blocos */
.bg-teclas { --foto: url("fundo-perguntas-frequentes.jpg"); }  /* Perguntas Frequentes: lâmpadas acesas */
body.photo-page:is(.bg-cidade, .bg-colunas, .bg-equipe, .bg-prev, .bg-civel, .bg-estrategico, .bg-empresarial, .bg-familia, .bg-imobiliario, .bg-penal, .bg-consumo, .bg-trabalhista, .bg-social, .bg-remo, .bg-sala, .bg-torre, .bg-teclas, .bg-camera)::before {
  /* Ajustes por página (opcionais): --zf amplia a foto, --px a posiciona na horizontal (padrão:
     centralizada), --dx a desloca para a direita e --sobe a sobe; o fim da foto acompanha. */
  /* --zf-auto e --fim-auto vêm do site.js (fim da foto em relação ao rodapé; ver lá) */
  --larg: calc(var(--zf-auto, var(--zf, 1)) * var(--base));
  /* --desce-auto/--topo-auto (site.js): em páginas longas a foto desce, e o topo dela se dissolve no chumbo */
  --img-h: var(--fim-auto, calc(var(--desce-auto, 0px) + var(--larg) / 1.5 - var(--sobe, 0px)));
  background:
    linear-gradient(180deg, var(--chrome) var(--desce-auto, 0px), rgba(30,33,37,0) calc(var(--desce-auto, 0px) + var(--topo-auto, 0px)), rgba(30,33,37,0) calc(var(--img-h) - 280px), var(--chrome) var(--img-h)),
    /* Máscara única da esquerda (texto, ~92% escuro) para a direita (~35%), com paradas
       intermediárias em curva suave para a transição não ter degraus. */
    linear-gradient(90deg,
      rgba(12,16,24,.92) 0%, rgba(12,16,24,.9) 40%, rgba(12,16,24,.8) 58%,
      rgba(12,16,24,.66) 70%, rgba(12,16,24,.5) 80%, rgba(12,16,24,.4) 90%, rgba(12,16,24,.35) 100%),
    var(--chrome) var(--foto) calc(var(--px, 50%) + var(--dx, 0px)) calc(var(--desce-auto, 0px) - var(--sobe, 0px)) / var(--larg) auto no-repeat;
}
/* O Escritório: foto 150px mais alta (em telas largas ela ainda passa por trás do rodapé translúcido) */
@media (min-width: 901px) { body.photo-page.bg-sala::before { --sobe: 150px; } }
/* Contencioso Estratégico: foto 120px mais alta e 100px mais à direita (15% maior, para não abrir
   uma faixa sem foto à esquerda). Contencioso Cível: sem zoom, 200px mais alta e 100px mais à direita
   (a faixa de 100px sem foto à esquerda fica sob a parte mais escura da máscara). */
@media (min-width: 901px) {
  body.photo-page.bg-estrategico::before { --zf: 1.15; --dx: 100px; --sobe: 120px; }
  body.photo-page.bg-civel::before { --dx: 100px; --sobe: 200px; }
}
/* Previdenciário: foto 60px mais alta */
@media (min-width: 901px) { body.photo-page.bg-prev::before { --sobe: 60px; } }
/* Família e Sucessões: foto 20% maior e ancorada à esquerda, para as duas mulheres ficarem mais
   à direita, fora da coluna de texto (a janela clara da direita sai do enquadramento). */
/* Trabalhista: em vez de deslocar a foto (o que deixava uma faixa sem foto
   à esquerda), ela é ampliada e ancorada à esquerda, cobrindo a largura toda; a sobra sai pela
   direita e o assunto fica mais à direita, ao lado do texto. */
body.photo-page.bg-trabalhista::before { --zf: 1.12; --px: 0%; }
/* Responsabilidade social: foto com 95% da largura da tela, com as mãos (48% da largura da foto)
   centralizadas entre o fim do texto e a margem direita do site (--centro-maos) e descida o bastante
   (--desce) para passar cerca de 40% da altura do rodapé translúcido; os dois valores vêm do site.js.
   O topo e a borda esquerda da foto se dissolvem no chumbo. */
@media (min-width: 901px) {
  body.photo-page.bg-social::before {
    --larg: calc(0.95 * var(--base));
    --img-h: var(--fim-auto, calc(var(--desce, 0px) + var(--larg) / 1.5));
    --foto-esq: calc(var(--centro-maos, 80vw) - 0.48 * var(--larg)); /* onde começa a foto */
    background:
      linear-gradient(180deg, var(--chrome) var(--desce, 0px), rgba(30,33,37,0) calc(var(--desce, 0px) + 160px), rgba(30,33,37,0) calc(var(--img-h) - 280px), var(--chrome) var(--img-h)),
      linear-gradient(90deg, var(--chrome) var(--foto-esq), rgba(30,33,37,0) calc(var(--foto-esq) + 220px)),
      linear-gradient(90deg,
        rgba(12,16,24,.92) 0%, rgba(12,16,24,.9) 40%, rgba(12,16,24,.8) 58%,
        rgba(12,16,24,.66) 70%, rgba(12,16,24,.5) 80%, rgba(12,16,24,.4) 90%, rgba(12,16,24,.35) 100%),
      var(--chrome) var(--foto) var(--foto-esq) var(--desce, 0px) / var(--larg) auto no-repeat;
  }
  /* Perguntas frequentes: foto 1,3 x maior e 150px mais abaixo (o topo se dissolve no chumbo), para as
     lâmpadas descerem e a foto passar por trás do rodapé translúcido */
  body.photo-page.bg-teclas::before {
    --zf: 1.3;
    --larg: calc(var(--zf-auto, var(--zf)) * var(--base));
    --desce: 150px;
    --img-h: var(--fim-auto, calc(var(--desce) + var(--larg) / 1.5));
    background:
      linear-gradient(180deg, var(--chrome) var(--desce), rgba(30,33,37,0) calc(var(--desce) + 180px), rgba(30,33,37,0) calc(var(--img-h) - 280px), var(--chrome) var(--img-h)),
      linear-gradient(90deg,
        rgba(12,16,24,.92) 0%, rgba(12,16,24,.9) 40%, rgba(12,16,24,.8) 58%,
        rgba(12,16,24,.66) 70%, rgba(12,16,24,.5) 80%, rgba(12,16,24,.4) 90%, rgba(12,16,24,.35) 100%),
      var(--chrome) var(--foto) center var(--desce) / var(--larg) auto no-repeat;
  }
}
body.photo-page.bg-familia::before { --zf: 1.2; --px: 0%; } /* foto 20% maior, presa à esquerda */
@media (min-width: 901px) { body.photo-page.bg-familia::before { --sobe: 60px; } } /* e 60px mais alta */
@media (max-width: 900px) {
  body.photo-page:is(.bg-cidade, .bg-colunas, .bg-equipe, .bg-prev, .bg-civel, .bg-estrategico, .bg-empresarial, .bg-familia, .bg-imobiliario, .bg-penal, .bg-consumo, .bg-trabalhista, .bg-social, .bg-remo, .bg-sala, .bg-torre, .bg-teclas, .bg-camera)::before {
    background:
      linear-gradient(180deg, rgba(30,33,37,0) calc(var(--img-h) - 200px), var(--chrome) var(--img-h)),
      linear-gradient(rgba(12,16,24,.78), rgba(12,16,24,.78)),
      var(--chrome) var(--foto) 55% 0 / var(--base) auto no-repeat;
  }
}
/* ===== Padrão das páginas internas (Áreas, Sobre, Contato, Política) =====
   Mesmas fontes, tamanhos, cores e espaçamentos da página inicial:
   - linha dourada = frase dourada da inicial (DM Sans 600, 18px, maiúsculas, dourado)
   - título da página = slogan da inicial (Montserrat 400, até 30,4px, creme-claro)
   - a linha dourada começa 50px abaixo do cabeçalho (119px do topo) e fica 14px acima do título */
.photo-page .page-head { padding-top: 119px; border-bottom: 0; position: relative; }
/* Mesma sombra leve no topo da página inicial, para o menu ficar legível sobre a foto */
.photo-page .page-head::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 150px; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,19,25,.55), rgba(15,19,25,0));
}
.photo-page .page-head > .wrap { position: relative; }
.photo-page .page-head .eyebrow,
.hero-photo.about-photo .eyebrow {
  color: var(--chrome-gold); font-family: "DM Sans", system-ui, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; font-size: 18px; margin: 0 0 14px;
}
.photo-page .page-head h1,
.about-photo h1.page-title {
  color: #f4f1ea; font-family: "Montserrat", system-ui, sans-serif; font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.25; max-width: none;
}
@media (max-width: 720px) {
  .photo-page .page-head .eyebrow, .hero-photo.about-photo .eyebrow { font-size: 15px; }
}
.photo-page .page-head + section { padding-top: 24px; }
/* Texto de abertura abaixo do título (Áreas de atuação): mesmo estilo e mesmo espaço do texto
   principal da página inicial (22px abaixo do título). No computador termina na mesma linha que
   o texto da inicial: 886px a partir da margem esquerda (fim de "Contencioso Estratégico"). */
.photo-page .page-head .intro { margin: 22px 0 8px; max-width: 886px; }
.photo-page .page-head .intro p { margin: 0; color: #d7d3cb; max-width: none; font-size: inherit; }


/* Página Contato sobre a foto da cidade: textos claros e formulário em vidro escuro */
.contato-page dl.info dt { color: var(--chrome-gold); }
.contato-page dl.info dd:not(.ph) { color: #e8e4db; }
/* Status do horário: bolinha verde quando aberto, cinza quando fechado */
.status-atendimento { display: inline-flex; align-items: center; gap: 8px; font-size: .94rem; }
.status-atendimento::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status-atendimento.aberto { color: #e8e4db; }
.status-atendimento.aberto::before { background: #3ecf7a; box-shadow: 0 0 6px rgba(62,207,122,.6); }
.status-atendimento.fechado { color: #bfbab1; }
.status-atendimento.fechado::before { background: #8a8f96; }
/* Links de texto no padrão do site: dourados, sem sublinhado, com brilho ao passar o mouse */
.contato-page main a:not(.btn) { color: var(--chrome-gold); text-decoration: none; }
/* E-mail como os links da página inicial (menu e lista de áreas): na cor do texto, dourado com brilho ao passar o mouse */
.contato-page dl.info dd a { color: #e8e4db; }
.contato-page .map-blocked, .contato-page form {
  background: rgba(20,23,27,.72); border: 1px solid var(--chrome-line); color: #d7d3cb;
  backdrop-filter: blur(4px);
}
.contato-page .map-blocked a, .contato-page form a { color: var(--chrome-gold); }
.contato-page .map { border-color: var(--chrome-line); }
.contato-page form h2, .contato-page label { color: #f4f1ea; }
/* Fontes como no resto do site: título do formulário como os subtítulos (Montserrat dourado);
   informações e campos em DM Sans, no tamanho do texto principal */
.contato-page form h2 {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 400; font-size: 1.3rem;
  line-height: 1.3; color: var(--chrome-gold);
}
.contato-page dl.info dd { font-size: 1.02rem; line-height: 1.7; }
.contato-page label { font-size: .94rem; }
.contato-page input, .contato-page textarea, .contato-page select, .contato-page .map-blocked { font-family: "DM Sans", system-ui, sans-serif; font-size: 1rem; }
.contato-page .page-head .intro p { text-align: justify; -webkit-hyphens: none; hyphens: none; }
/* 32px entre o texto de abertura e o formulário (como entre a abertura e os quadros em Atuação) */
.contato-page .page-head { padding-bottom: 0; }
.contato-page .page-head .intro { margin-bottom: 0; }
.contato-page .page-head + section { padding-top: 32px; }
.contato-page input, .contato-page textarea, .contato-page select {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #f4f1ea;
}
.contato-page select option { background: var(--chrome); color: #f4f1ea; }
.contato-page input:focus, .contato-page textarea:focus, .contato-page select:focus { outline-color: var(--chrome-gold); }
.contato-page .check, .contato-page .notice { color: #bfbab1; }
.contato-page .btn-primary { background: #f4f1ea; color: #14213a; border-color: #f4f1ea; }
.contato-page .btn-outline { color: #f4f1ea; border-color: rgba(244,241,234,.55); }
/* Página Áreas de Atuação sobre a foto do escritório: mesmo padrão da página inicial/Contato */
/* Menos espaço entre o texto de abertura e os quadros (32px) */
.areas-page .page-head { padding-bottom: 0; }
/* Texto de abertura até a margem direita dos quadros */
.areas-page .page-head .intro { margin-bottom: 0; max-width: none; }
.areas-page .page-head .intro p { -webkit-hyphens: none; hyphens: none; } /* sem hífens na quebra de linha */
.areas-page .page-head + section { padding-top: 32px; }
/* Moldura dourada fina: o espaço entre a borda externa e o quadro interno fica com só 2px e é
   preenchido de dourado (com leve brilho metálico); o quadro interno recebe o fundo escuro. */
.areas-page .area {
  padding: 2px; border: 0;
  background: linear-gradient(135deg, #a8844f 0%, #e2c594 45%, #c9a56d 60%, #a8844f 100%);
}
.areas-page .area-inner {
  border-radius: 8px;
  background: rgba(20,23,27,.9); backdrop-filter: blur(4px);
}
/* Nome da área na mesma fonte do título "Áreas de atuação" (Montserrat 400);
   resumo na mesma fonte e tamanho do texto principal (DM Sans 1,02rem, entrelinha 1,7) */
.areas-page .area h2 {
  color: var(--chrome-gold); font-family: "Montserrat", system-ui, sans-serif; font-weight: 400;
  font-size: 1.3rem; line-height: 1.3;
}
/* Resumo dos quadros um pouco menor e mais compacto que o texto principal, para caber textos
   mais longos. Sem limite de linhas (nada é cortado); os quadros de uma mesma fileira ficam
   com a mesma altura. */
.areas-page .area p {
  font-family: "DM Sans", system-ui, sans-serif; font-size: .94rem; line-height: 1.5;
  display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible;
  text-align: justify; hyphens: none; -webkit-hyphens: none;
}
.areas-page .area p { color: #d7d3cb; }
/* Visual mais sutil: a moldura dourada fina, o fundo escuro e a sombra ficam só na imagem;
   o nome da área e o resumo aparecem logo abaixo, direto sobre a foto de fundo, sem quadro. */
.areas-page .area { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.areas-page .area-inner { background: none; backdrop-filter: none; border: 0; border-radius: 0; overflow: visible; }
.areas-page .area-img {
  border: 2px solid transparent; border-radius: 8px;
  background:
    linear-gradient(rgba(20,23,27,.9), rgba(20,23,27,.9)) padding-box,
    linear-gradient(135deg, #a8844f 0%, #e2c594 45%, #c9a56d 60%, #a8844f 100%) border-box;
  box-shadow: 0 14px 32px rgba(0,0,0,.42), 0 3px 8px rgba(0,0,0,.28);
}
/* Texto na mesma posição e largura de antes (18px das laterais), para os resumos manterem 4 linhas */
.areas-page .area-body { background: none; padding: 16px 18px 0; }
/* Quadros 10% mais baixos: a imagem fica mais horizontal (a largura e os textos não mudam) */
.areas-page .area-img { aspect-ratio: 1.56; }
/* Quadro final ("Precisa de orientação…"): só a moldura dourada fina, com fundo neutro (transparente,
   sem chumbo e sem sombra); texto como os nomes das áreas; botão em balão como no resto do site.
   A moldura é desenhada num ::before com máscara, para o miolo ficar vazado. */
.areas-page .cta-band {
  display: flex; padding: 2px; border: 0; border-radius: 10px; background: none; box-shadow: none; position: relative;
}
.areas-page .cta-band::before {
  content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, #a8844f 0%, #e2c594 45%, #c9a56d 60%, #a8844f 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.areas-page .cta-inner {
  flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px 14px 24px; border-radius: 8px; background: none;
}
/* Botões do quadro final começam na mesma linha dos quadros da 3ª coluna (à direita). Largura útil
   do miolo = largura dos quadros - 48px (2px de moldura + 24px e 20px de recuo); a 3ª coluna começa
   2/3 dessa largura + 22px depois do início do texto. */
@media (min-width: 1150px) {
  .areas-page .cta-inner { display: grid; grid-template-columns: calc(200% / 3 + 22px) 1fr; column-gap: 0; }
  .areas-page .cta-inner .btns { justify-self: start; flex-wrap: nowrap; }
}
.areas-page .cta-band p {
  color: #f4f1ea; font-family: "Montserrat", system-ui, sans-serif; font-weight: 400;
  font-size: 1.15rem; line-height: 1.3;
}
.areas-page .btn-primary { background: #f4f1ea; color: #14213a; border-color: #f4f1ea; }/* Páginas de cada área (ex.: Advocacia Colaborativa): mesmo formato da página inicial.
   Título da área no estilo do slogan (Montserrat), sem o espaçamento calculado do slogan. */
.hero-photo h1.titulo-area {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 400; color: #f4f1ea;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.25; max-width: none; margin: 0 0 22px;
}/* Página Sobre sobre a mesma foto: conteúdo na coluna da esquerda, em tons claros */
/* Conteúdo alinhado ao topo (e não centralizado), para a linha dourada ficar a 119px do topo
   como nas outras páginas; título com o mesmo espaço até o texto que o slogan da inicial (22px) */
.hero-photo.about-photo { align-items: flex-start; }
.about-photo h1.page-title { margin: 0 0 22px; }
.about-photo h2 { font-size: 1.6rem; margin: 0 0 4px; color: #f4f1ea; }
.about-photo .oab { color: #bfbab1; margin: 0 0 22px; }
.about-photo ul { margin: 0 0 28px; padding-left: 20px; color: #d7d3cb; }
.about-photo li { margin-bottom: 10px; }
.about-photo blockquote {
  margin: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--chrome-gold);
  font-family: "Libre Caslon Text", Georgia, serif; font-style: italic; font-size: 1.12rem; color: #e8e4db;
}
/* Equipe: cada integrante tem um quadro com a foto (vertical, 3:4, 380 x 507px) e, do lado oposto, o texto sobre
   o profissional. Os quadros alternam entre a margem esquerda (1º, 3º…) e a direita (2º…).
   A moldura é a mesma das imagens da página Atuação: dourada fina, cantos arredondados e sombra. */
/* Conteúdo da Equipe ocupa da margem esquerda até a margem direita do site (fim de "Contato") */
@media (min-width: 901px) {
  .hero-photo.about-photo > .wrap { width: 100%; padding-right: calc(var(--wrap-r) - var(--ext, 0px)); }
}
.equipe { display: grid; gap: 56px; }
/* Espaço de 53px: o texto começa exatamente na linha em que termina o balão "Converse comigo pelo WhatsApp" */
.perfil { display: grid; grid-template-columns: 380px 1fr; gap: 53px; align-items: start; }
.perfil:nth-child(even) { grid-template-columns: 1fr 380px; }
.perfil:nth-child(even) .perfil-foto { order: 2; }
.perfil-foto {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: grid; place-items: center;
  border: 2px solid transparent; border-radius: 8px;
  background:
    linear-gradient(rgba(20,23,27,.9), rgba(20,23,27,.9)) padding-box,
    linear-gradient(135deg, #a8844f 0%, #e2c594 45%, #c9a56d 60%, #a8844f 100%) border-box;
  box-shadow: 0 14px 32px rgba(0,0,0,.42), 0 3px 8px rgba(0,0,0,.28);
}
.perfil-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Espaço reservado enquanto a foto não for inserida */
.perfil-foto::after { content: "Foto do integrante"; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(212,179,132,.55); }
/* O cargo (ex.: Sócio-Fundador) começa um pouco abaixo da borda de cima do quadro */
.perfil-texto { padding-top: 12px; }
.about-photo .perfil .cargo { line-height: 1; margin-top: 0; }
/* Nome nas fontes do site: Montserrat 400, como os títulos das páginas e os nomes das áreas */
.about-photo .perfil-texto h2 { font-family: "Montserrat", system-ui, sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 1.3; color: #f4f1ea; margin: 0 0 4px; }
.perfil-texto p { margin: 0 0 14px; color: #d7d3cb; line-height: 1.7; text-align: justify; -webkit-hyphens: none; hyphens: none; }
.perfil-texto p:last-child { margin-bottom: 0; }
.about-photo .perfil-texto .oab { color: #bfbab1; margin: 0 0 18px; }
.perfil .cargo { margin: 0 0 6px; color: var(--chrome-gold); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.about-photo .btns { margin-top: 56px; }
@media (max-width: 800px) {
  .perfil, .perfil:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .perfil:nth-child(even) .perfil-foto { order: 0; }
  .perfil-foto { width: min(380px, 100%); }
}
/* Rodapé da página inicial translúcido, deixando a foto aparecer por trás */
.photo-page footer { background: rgba(20,23,27,.72); backdrop-filter: blur(2px); }
/* Coluna de texto à esquerda, alinhada ao logo, terminando pouco antes da pessoa na foto.
   A foto tem largura max(100vw, 150svh), ancorada à direita; a mão da pessoa fica a 36% da
   largura da foto a partir da borda direita. A coluna vai até ali, menos 40px de folga. */
.hero-photo > .wrap {
  position: relative; margin: 0; max-width: none;
  width: calc(100% - 0.36 * max(100vw, 150svh) - 40px);
  padding-left: var(--wrap-l);
  padding-right: 24px;
  text-align: left;
}
/* Página inicial: coluna da margem esquerda até o final de "Contato" no menu (margem direita);
   texto justificado, sem hifenização */
@media (min-width: 901px) {
  .hero-photo.hero-centro > .wrap { width: 100%; padding-right: var(--wrap-r); }
}
.hero-centro .intro p { text-align: justify; -webkit-hyphens: none; hyphens: none; }
/* Páginas dedicadas (áreas e escritório): texto justificado, sem hífens no fim das linhas */
.hero-photo .intro p, .inst p, .etapas p, .faq details p { text-align: justify; -webkit-hyphens: none; hyphens: none; }@media (max-width: 900px) {
  .hero-photo > .wrap { width: 100%; padding: 0 16px; }
  body.photo-page::before {
    --img-h: calc(var(--base) / 1.5);
    --shift: calc(100px - 0.25 * var(--img-h));
    background:
      linear-gradient(180deg, rgba(30,33,37,0) calc(var(--img-bottom) - 200px), var(--chrome) var(--img-bottom)),
      linear-gradient(rgba(12,16,24,.8), rgba(12,16,24,.8)),
      var(--chrome) url("hero-escritorio.jpg") 80% var(--shift) / var(--base) auto no-repeat;
  }
}
/* Frase sempre em uma linha: até 16px, mas nunca mais larga que a coluna do texto principal.
   Com espaçamento de 0,06em, a frase "Precisão técnica na advocacia de Santo André e região"
   em maiúsculas (DM Sans, seminegrito) ocupa 38 vezes o tamanho da fonte;
   2,56cqi = largura da coluna / 39 (com folga). Se a frase mudar, esse número precisa ser refeito. */
.hero-photo > .wrap { container-type: inline-size; }
.hero-photo .eyebrow {
  color: #d4b384; letter-spacing: .06em; white-space: nowrap;
  font-size: min(18px, 2.56cqi);
}
.hero h1.slogan { font-size: clamp(1.35rem, 2.4vw, 1.9rem); max-width: none; line-height: 1.25; text-wrap: balance; }
/* Slogan em Montserrat, com as letras espaçadas conforme a largura da coluna do texto principal.
   A linha mais longa ("e soluções estratégicas para quem busca resultados.", 51 caracteres)
   mede 26,15em sem espaçamento; usamos 70% do espaçamento que encheria a coluna, então ela
   termina um pouco antes da margem. Coluna estreita (celular): espaçamento 0 e o texto quebra;
   coluna muito larga: o espaçamento para em 0,14em. Se o slogan mudar, refazer esses números. */
.hero-photo h1.slogan {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 400;
  letter-spacing: clamp(0px, calc(0.7 * (100cqi - 26.25em) / 51), .14em);
}
/* No computador a fonte também diminui se preciso, para o slogan ficar sempre em duas linhas */
@media (min-width: 901px) {
  .hero-photo h1.slogan { font-size: min(clamp(1.35rem, 2.4vw, 1.9rem), 100cqi / 26.4); }
}
.intro { font-family: "DM Sans", system-ui, sans-serif; margin: 0 0 32px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; color: #d7d3cb; font-size: 1.02rem; line-height: 1.7; }
/* 20px só entre um parágrafo e outro; o espaço até os botões continua o mesmo (47px) */
.intro p { margin: 0; }
.intro p + p { margin-top: 20px; }
.hero-photo .intro { margin-bottom: 47px; }
/* Carrossel da página inicial: os parágrafos ocupam o mesmo espaço (altura do maior) e se
   alternam com uma transição suave; setas e indicadores ficam logo abaixo */
.intro.carrossel { display: grid; margin-bottom: 18px; touch-action: pan-y; }
.intro.carrossel > .slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity 1.5s ease-in-out, visibility 1.5s; /* troca lenta */
}
.intro.carrossel > .slide.ativo { opacity: 1; visibility: visible; }
/* Quadro de cada parágrafo: mesma moldura dourada fina, fundo escuro, cantos e sombra dos
   quadros das áreas; imagem à esquerda e texto à direita (no celular, imagem em cima) */
.slide {
  display: flex; padding: 2px; border-radius: 10px;
  background: linear-gradient(135deg, #a8844f 0%, #e2c594 45%, #c9a56d 60%, #a8844f 100%);
  box-shadow: 0 14px 32px rgba(0,0,0,.42), 0 3px 8px rgba(0,0,0,.28);
}
/* A imagem ocupa o quadro inteiro e o texto fica na frente, na parte de baixo, sobre uma
   sombra escura que sobe da base para garantir a leitura. Altura: o dobro do quadro anterior
   (484px no computador) */
.slide-inner {
  flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  min-height: 360px; border-radius: 8px; background: rgba(20,23,27,.9);
}
.slide-img { position: absolute; inset: 0; }
.slide-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.2) sepia(.15) saturate(1.05) contrast(1.05) brightness(.85);
}
.slide-img::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(12,16,24,.82) 0%, rgba(12,16,24,.72) 55%, rgba(12,16,24,.6) 100%);
}
/* Texto no meio do quadro, centralizado */
.slide-texto { position: relative; z-index: 1; padding: 32px 40px; text-align: center; max-width: 760px; margin: 0 auto; }
.hero-photo .intro.carrossel .slide-texto p { text-align: center; }
.intro.carrossel .slide-texto p { margin: 0; color: #f4f1ea; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* Quadros com título (ex.: Missão, Visão e Valores) */
.slide-texto { width: 100%; }
.slide-texto h2 {
  margin: 0 0 16px; font-family: "Montserrat", system-ui, sans-serif; font-weight: 400;
  font-size: 1.9rem; line-height: 1.2; color: var(--chrome-gold); text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
/* Palavras-chave destacadas no texto do quadro (ex.: os valores) */
.slide-texto p strong { color: var(--chrome-gold); font-weight: 500; }
/* Valores centralizados em grade de 3 colunas: nome e, abaixo, a descrição */
.slide-texto .valores {
  margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.slide-texto .valores > div { text-align: center; }
.slide-texto .valores dt { color: #f4f1ea; }
.slide-texto .valores dd { margin: 2px 0 0; color: #e8e4db; font-size: .9rem; line-height: 1.45; }
/* Coluna estreita (celular ou telas entre ~900 e 1000px): quadro mais baixo e texto com
   menos margem. Usa a largura da coluna de texto (container), e não a da tela. */
@container (max-width: 640px) {
  .slide-inner { min-height: 360px; }
  .slide-texto { padding: 24px 18px; }
  .slide-texto h2 { font-size: 1.5rem; }
  .slide-texto .valores { grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
  /* coluna estreita: justificado sem hífens abriria buracos entre as palavras */
  .hero-photo .intro.carrossel .slide-texto p { text-align: left; }
}
/* Indicadores em barras: da margem esquerda até o fim do balão "Agende uma Conversa"
   (largura definida pelo site.js); cada barra tem uma área de clique maior que o traço */
.carrossel-ctrl { margin: 0 0 32px; max-width: 100%; }
/* Linhas de referência junto do quadro: 18px entre a borda de baixo do quadro e as linhas
   (12px de margem + 6px da área de clique acima do traço) */
.inst-page .hero-photo .intro.carrossel, .hero-photo .intro.carrossel { margin-bottom: 12px; }
.carrossel-ctrl .pontos { display: flex; gap: 8px; }
.carrossel-ctrl .pontos button {
  flex: 1; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; position: relative;
}
.carrossel-ctrl .pontos button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
  border-radius: 999px; background: rgba(244,241,234,.28); transition: background-color .3s;
}
.carrossel-ctrl .pontos button:hover::before { background: rgba(212,179,132,.6); }
.carrossel-ctrl .pontos button[aria-current="true"]::before { background: var(--chrome-gold); }
.carrossel-ctrl .pontos button:focus-visible { outline: 2px solid var(--chrome-gold); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .intro.carrossel > .slide { transition: none; } }
.hero-photo .lead { color: #d7d3cb; }
.hero-photo .tags li { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #e8e4db; }
/* Botões da página inicial no formato de balão (pílula), como as antigas etiquetas das áreas */
.hero-photo .btns { gap: 10px; }
.hero-photo .btn, .cta-band .btn, .contato-page .btn {
  border-radius: 999px; padding: 7px 18px; font-size: .9rem; font-weight: 500;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); color: #e8e4db;
  transition: background-color .2s, border-color .2s, color .2s;
}
.hero-photo .btn:hover, .cta-band .btn:hover, .contato-page .btn:hover { background: rgba(255,255,255,.16); border-color: var(--chrome-gold); color: var(--chrome-gold); opacity: 1; }
.photo-page footer { border-top: 0; }

section { padding: 64px 0 80px; }

/* Áreas */
/* 9 quadros verticais separados: 3 colunas no computador, 2 no tablet, 1 no celular.
   Cada quadro: imagem (4:3) em cima, título e resumo de até 4 linhas; bordas e traços dourados. */
.areas { display: grid; grid-template-columns: 1fr; gap: 24px; }
/* 3 colunas só a partir de 1150px: abaixo disso os quadros ficariam estreitos demais para o
   resumo caber em 4 linhas */
@media (min-width: 800px) and (max-width: 1149px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
  /* a 9ª área fica sozinha na última linha, centralizada e com a mesma largura das outras */
  .area:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
}
@media (min-width: 1150px) { .areas { grid-template-columns: repeat(3, 1fr); } }
/* Quadro duplo: quadro externo com sombra e, 7px para dentro, um quadro interno. Todas as linhas
   douradas têm a mesma espessura fina (1px; 0,5px em telas de alta densidade, como celulares e
   Macs) e os cantos são levemente arredondados. */
.area {
  --linha: 1px;
  --dourado-linha: rgba(212,179,132,.55);
  display: flex; padding: 7px;
  background: var(--surface); border: var(--linha) solid var(--dourado-linha); border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0,0,0,.42), 0 3px 8px rgba(0,0,0,.28);
}
@media (min-resolution: 2dppx) { .area { --linha: .5px; } }
.area-inner {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  border: var(--linha) solid var(--dourado-linha); border-radius: 6px;
}
.area-img {
  position: relative; aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(212,179,132,.10), rgba(212,179,132,.03));
  display: grid; place-items: center;
}
/* Linha entre a imagem e o texto: fina, dourada, mais intensa no centro e sumindo nas pontas */
.area-body {
  background: linear-gradient(90deg, rgba(212,179,132,0), rgba(212,179,132,.85) 25%, rgba(212,179,132,.85) 75%, rgba(212,179,132,0))
    top / 100% var(--linha) no-repeat;
}
/* Espaço reservado enquanto a imagem não for inserida */
.area-img::after {
  content: "Imagem da área"; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(212,179,132,.55);
}
/* Tratamento padrão das fotos das áreas, para combinar com o site (chumbo + dourado):
   cores dessaturadas e levemente aquecidas, um pouco mais escuras, e uma máscara que escurece
   em direção à linha dourada, com um leve véu dourado. Ao passar o mouse, a foto clareia um pouco. */
.area-img { overflow: hidden; }
.area-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
  filter: grayscale(.2) sepia(.15) saturate(1.05) contrast(1.05) brightness(.85);
  transition: filter .5s ease, transform .6s ease;
}
.area-img::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12,16,24,.05) 0%, rgba(12,16,24,.25) 55%, rgba(12,16,24,.7) 100%),
    linear-gradient(135deg, rgba(212,179,132,.12), rgba(212,179,132,0) 60%);
}
.area:hover .area-img img { filter: grayscale(0) sepia(.05) saturate(1.35) contrast(1.06) brightness(1.03); transform: scale(1.03); }
/* Quadro inteiro clicável quando a área tem página própria */
.area-link { flex: 1; display: flex; color: inherit; text-decoration: none; border-radius: 6px; }
.area-link:focus-visible { outline: 2px solid var(--chrome-gold); outline-offset: 3px; }
.area-link .area-inner { cursor: pointer; }
/* ===== Efeito padrão dos links ao passar o mouse =====
   Sem sublinhado: o link fica dourado, em "negrito" e com um leve brilho dourado.
   O negrito é feito com sombra do próprio texto (e não com font-weight), para a palavra não
   mudar de largura e o menu/rodapé não "pularem" ao passar o mouse. */
:root {
  --realce: .3px 0 0 currentColor, -.3px 0 0 currentColor, 0 0 8px rgba(212,179,132,.3);
}
.nav ul a, footer a, .link-btn, .area-link h2, .contato-page main a:not(.btn) {
  text-decoration: none; transition: color .2s ease, text-shadow .2s ease;
}
.nav ul a:hover, .nav ul a:focus-visible,
footer a:hover, footer a:focus-visible,
footer .footer-areas a:hover,
.link-btn:hover, .link-btn:focus-visible,
.area-link:hover h2, .area-link:focus-visible h2,
.contato-page main a:not(.btn):hover, .contato-page main a:not(.btn):focus-visible {
  color: var(--chrome-gold); text-decoration: none; text-shadow: var(--realce);
}
@media (prefers-reduced-motion: reduce) { .area-img img { transition: none; } .area:hover .area-img img { transform: none; } }
/* 16px nas laterais: somados aos 8px do quadro externo, o texto tem a mesma largura de antes */
.area-body { padding: 16px 16px 18px; }
.area h2 { font-size: 1.2rem; margin: 0 0 10px; }
/* Resumo: no máximo 4 linhas */
.area p {
  margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
/* Celulares muito estreitos (abaixo de 400px): o resumo pode usar até 6 linhas, para não cortar */
@media (max-width: 399px) { .area p { -webkit-line-clamp: 6; line-clamp: 6; } }
.cta-band { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 28px; border: 1px solid var(--line); background: var(--surface); }
.cta-band p { margin: 0; font-family: "Libre Caslon Text", Georgia, serif; font-size: 1.15rem; }

/* Sobre */
.about { display: grid; gap: 40px; }
@media (min-width: 820px) { .about { grid-template-columns: 1fr 1.5fr; align-items: start; } }
.about h2 { font-size: 1.6rem; margin: 0 0 6px; }
.oab { color: var(--muted); margin: 0; }
.about ul { margin: 0 0 28px; padding-left: 20px; }
.about li { margin-bottom: 10px; }
.about blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--gold); font-family: "Libre Caslon Text", Georgia, serif; font-style: italic; font-size: 1.12rem; }

/* Contato */
.contact { display: grid; gap: 40px; }
@media (min-width: 880px) {
  .contact { grid-template-columns: 1fr 1fr; }
  /* Formulário à esquerda e informações à direita (no celular, as informações continuam primeiro) */
  .contact > form { order: -1; }

  /* O mapa ocupa o espaço que sobra na coluna e termina na mesma linha da caixa do formulário */
  .contact > div { display: flex; flex-direction: column; }
  .contact .map-slot { flex: 1; display: flex; flex-direction: column; min-height: 240px; }
  .contact .map-slot .map, .contact .map-slot .map-blocked { flex: 1; height: auto; }
  .contact .map-slot .map-blocked { display: flex; flex-direction: column; justify-content: center; }
  .contact .map-slot.loaded .map-blocked { display: none; }
}
dl.info { margin: 0 0 24px; }
dl.info dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); font-weight: 600; }
dl.info dd { margin: 2px 0 18px; }
.map { display: block; width: 100%; height: 280px; border: 1px solid var(--line); border-radius: 4px; }

form { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 28px 24px; }
form h2 { margin: 0 0 18px; font-size: 1.3rem; }
label { display: block; font-weight: 500; font-size: .92rem; margin-bottom: 6px; }
input, textarea, select {
  width: 100%; padding: 10px 12px; margin-bottom: 16px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--bg); color: var(--ink); font: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { min-height: 130px; resize: vertical; }
.row { display: grid; gap: 0 16px; }
@media (min-width: 520px) { .row { grid-template-columns: 1fr 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .9rem; color: var(--muted); margin-bottom: 18px; }
.check input { width: auto; margin: 5px 0 0; }
.notice { font-size: .85rem; color: var(--muted); margin: 14px 0 0; }

/* Política */
.prose h2 { font-size: 1.35rem; margin: 40px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink); }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.updated { color: var(--muted); font-size: .92rem; }

/* Rodapé */
footer { background: var(--chrome); border-top: 1px solid var(--chrome-line); padding: 48px 0 40px; font-size: .92rem; color: var(--chrome-muted); }
/* Rodapé compacto: nome e endereço | áreas de atuação | escritório | logo */
.footer-grid {
  display: grid; grid-template-columns: auto auto auto 1fr; align-items: start;
  grid-template-areas: "info areas escritorio logo" "legal legal legal legal"; gap: 0 48px;
}
footer { font-size: .88rem; }
.footer-info { grid-area: info; }
.footer-areas { grid-area: areas; }
/* Escritório: coluna ao lado das áreas, com os três itens nas mesmas linhas da lista de áreas */
.footer-escritorio { grid-area: escritorio; }
.footer-escritorio ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content; gap: 4px 22px; line-height: 1.6; }
/* Telas médias (sem espaço para a coluna): Escritório desce para baixo das áreas, com os itens
   nas mesmas colunas da lista de áreas (o site.js copia a largura das colunas) */
@media (min-width: 761px) and (max-width: 1229px) {
  .footer-grid { grid-template-columns: auto 1fr auto; grid-template-areas: "info areas logo" "info escritorio ." "legal legal legal"; }
  .footer-escritorio { margin-top: 22px; }
  .footer-escritorio ul { grid-template-columns: repeat(3, max-content); }
}
footer .footer-escritorio a { color: var(--chrome-muted); text-decoration: none; }
footer .footer-escritorio a:hover { color: var(--chrome-gold); text-decoration: none; text-shadow: var(--realce); }
.footer-title { color: var(--chrome-ink); font-weight: 600; font-size: 1rem; margin-bottom: 10px !important; }
.footer-areas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, max-content); gap: 4px 22px; line-height: 1.6; }
footer .footer-areas a { color: var(--chrome-muted); text-decoration: none; }
footer .footer-areas a:hover { color: var(--chrome-gold); text-decoration: none; text-shadow: var(--realce); }
/* No computador, a lista de áreas mantém a largura de 504px (a mesma de antes da troca de Advocacia
   Colaborativa por Previdenciário), com as 3 colunas distribuídas nesse espaço: o fim da lista é a linha
   de referência do texto principal e do menu (site.js), que assim não mudam de lugar. */
@media (min-width: 1001px) { .footer-areas ul { width: 504px; justify-content: space-between; } }
@media (max-width: 1000px) { .footer-areas ul { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr auto; grid-template-areas: "info logo" "areas areas" "escritorio escritorio" "legal legal"; }
  .footer-areas { margin-top: 28px; }
}
@media (max-width: 420px) { .footer-areas ul, .footer-escritorio ul { grid-template-columns: 1fr; } }
.footer-logo { grid-area: logo; height: 68px; width: auto; justify-self: end; }
/* No computador o logo fica centralizado na altura da lista de áreas, entre a primeira linha
   ("Contencioso Cível") e a última ("Trabalhista"), com 80% dessa altura (10% de folga em cima e
   embaixo). --lista é a altura da lista: cada linha tem 1,6em e há 4px entre linhas; o logo usa a
   mesma fonte do rodapé para a conta bater. */
@media (min-width: 761px) {
  .footer-logo {
    --lista: calc(3 * 1.6em + 2 * 4px);
    align-self: end; height: calc(var(--lista) * .8); margin-bottom: calc(var(--lista) * .1);
  }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .footer-logo { --lista: calc(5 * 1.6em + 4 * 4px); } /* lista em 2 colunas = 5 linhas */
}
/* Na página inicial o rodapé continua o fundo da foto, sem linha divisória */
.photo-page footer { border-top: 0; }
.footer-legal { grid-area: legal; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--chrome-line); padding-right: 80px; }
footer p { margin: 0; }
.footer-name { color: var(--chrome-ink); font-weight: 600; font-size: 1rem; margin-bottom: 10px; }
footer address { font-style: normal; line-height: 1.6; }
/* Direitos reservados à esquerda; Política de Privacidade e cookies à direita, alinhados ao logo.
   O rodapé tem folga embaixo para essa linha ficar acima do botão do WhatsApp (que ocupa os
   ~80px inferiores da tela à direita), sem precisar recuar os links. */
.footer-legal {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 28px;
  padding-right: 0;
}
footer { padding-bottom: 92px; }
footer a, .link-btn { color: var(--chrome-gold); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; text-decoration: none; cursor: pointer; }
/* Espaço entre "Política de Privacidade" e "Preferências de cookies" (no computador, o site.js alinha
   "Preferências de cookies" com "Contencioso Estratégico") */
.footer-legal [data-cookie-settings] { margin-left: 16px; }
@media (max-width: 520px) { .footer-logo { height: 64px; } }

/* WhatsApp flutuante (só o ícone) */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; /* 56px no computador */
  background: var(--wa); color: #fff; text-decoration: none;
  border-radius: 50%; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.wa-float svg { width: 29px; height: 29px; flex: none; }
@media (min-width: 720px) { .wa-float { right: 28px; bottom: 28px; width: 56px; height: 56px; } .wa-float svg { width: 31px; height: 31px; } }
.wa-float:hover { filter: brightness(1.07); }
.wa-float:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Voltar ao topo: à esquerda do WhatsApp, dentro da folga inferior do rodapé (não cobre os links) */
.to-top {
  position: fixed; right: 80px; bottom: 24px; z-index: 20; /* centrado na altura do WhatsApp */
  width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(212,179,132,.55); cursor: pointer;
  background: rgba(20,23,27,.8); color: var(--chrome-gold); backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s, background-color .2s, color .2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { background: var(--chrome-gold); color: var(--chrome); }
.to-top:focus-visible { outline: 3px solid var(--chrome-gold); outline-offset: 3px; }
@media (min-width: 720px) { .to-top { right: 96px; bottom: 36px; } }

/* Redes sociais: pequenos ícones redondos no meio da linha de baixo do rodapé */
.footer-legal { align-items: center; }
.footer-social { display: flex; gap: 16px; margin-left: auto; } /* direitos e Política à esquerda; redes à direita */
.footer-legal { justify-content: flex-start; }
.footer-social a, .footer-social span {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(226,197,148,.75); color: #e2c594; background: rgba(212,179,132,.08);
  transition: background-color .2s, color .2s, border-color .2s;
}
.footer-social svg { width: 15px; height: 15px; }
.footer-social a:hover, .footer-social a:focus-visible { background: var(--chrome-gold); border-color: var(--chrome-gold); color: var(--chrome); text-shadow: none; }
.footer-social .pendente { cursor: default; }

/* Lista suspensa de "Áreas de atuação" (montada pelo site.js) */
.nav .has-sub { position: relative; display: flex; align-items: center; }
.nav ul > li > a { white-space: nowrap; }
/* Margem direita do site: pode avançar para a direita (--ext, calculado pelo site.js) para
   terminar junto com a lista suspensa de "Atuação", com espaços iguais entre os itens do menu */
.wrap { padding-right: calc(var(--wrap-r) - var(--ext, 0px)); } /* todo o site usa a nova margem */
/* Fonte do menu principal: o site.js pode reduzi-la um pouco (--menu-fs) para o menu caber
   entre a coluna "Quem Somos" do rodapé e a margem direita */
@media (min-width: 901px) { #menu > li > a { font-size: var(--menu-fs, 14px); } }
.sub-toggle {
  display: flex; align-items: center; justify-content: center; padding: 3px; margin-left: 2px;
  background: none; border: 0; color: var(--chrome-ink); cursor: pointer;
}
.sub-toggle svg { width: 12px; height: 12px; transition: transform .2s; }
.sub-toggle:hover, .has-sub:hover .sub-toggle { color: var(--chrome-gold); }
.has-sub.sub-open .sub-toggle svg { transform: rotate(180deg); }
.nav .submenu ul {
  display: block; position: static; margin: 0; padding: 8px 0; list-style: none; width: max-content;
  background: rgba(30,33,37,.97); border: 1px solid var(--chrome-line); border-top: 2px solid var(--chrome-gold);
  border-radius: 0 0 8px 8px; box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.nav .submenu a { padding: 9px 14px 9px 20px; border: 0; line-height: 1.3; white-space: nowrap; font-weight: 400; }
.nav .submenu a[aria-current="page"] { color: var(--chrome-gold); border: 0; }
@media (min-width: 901px) {
  /* A caixa começa logo abaixo do cabeçalho; o espaço de cima é transparente, para o mouse
     passar do link para a lista sem ela fechar */
  .submenu {
    position: absolute; top: 100%; left: -21px; padding-top: 18px; z-index: 5; /* -21px = recuo do texto (20px) + borda (1px): o texto dos itens começa na linha do texto do menu */
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .has-sub.sub-open .submenu { opacity: 1; visibility: visible; transform: none; }
  .has-sub.sub-open .sub-toggle svg { transform: rotate(180deg); }
}
@media (min-width: 901px) and (hover: hover) {
  .has-sub:hover .submenu { opacity: 1; visibility: visible; transform: none; }
  .has-sub:hover .sub-toggle svg { transform: rotate(180deg); }
}
/* Celular e tablet (menu ☰): a seta abre a lista dentro do próprio menu */
@media (max-width: 900px) {
  #menu { align-items: stretch; }
  #menu > li > a { text-align: center; }
  .nav .has-sub { display: block; }
  .sub-toggle {
    position: absolute; top: 0; right: 0; width: 56px; height: 43px; margin: 0;
    border-top: 1px solid var(--chrome-line); border-left: 1px solid var(--chrome-line);
  }
  .sub-toggle svg { width: 14px; height: 14px; }
  .submenu { display: none; }
  .has-sub.sub-open .submenu { display: block; }
  .nav .submenu ul { border: 0; border-radius: 0; box-shadow: none; padding: 0; background: rgba(0,0,0,.2); min-width: 0; }
  .nav .submenu a { padding: 11px 16px; text-align: center; border-top: 1px solid var(--chrome-line); white-space: normal; color: var(--chrome-muted); }
}

/* Páginas do escritório (Quem somos, Como trabalhamos, Responsabilidade social, Perguntas frequentes) */
.inst-page .hero-photo .intro { margin-bottom: 36px; }
.inst h2, .faq h2 {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 400; font-size: 1.15rem;
  color: var(--chrome-gold); margin: 0 0 10px;
}
.inst p { margin: 0 0 28px; color: #d7d3cb; line-height: 1.7; text-align: justify; -webkit-hyphens: none; hyphens: none; }
.inst p strong { color: #f4f1ea; font-weight: 600; }
/* Links dentro dos textos (ex.: e-mail na Política de Privacidade): dourados, com o mesmo realce dos demais links ao passar o mouse */
.hero-photo :is(.inst, .intro) a:not(.btn) { color: var(--chrome-gold); text-decoration: none; transition: text-shadow .2s ease; }
.hero-photo :is(.inst, .intro) a:not(.btn):hover, .hero-photo :is(.inst, .intro) a:not(.btn):focus-visible { text-shadow: var(--realce); }
/* Lista de serviços das áreas: grade de 2 colunas, preenchida linha a linha, marcador dourado.
   Os 2 serviços principais (descrição de 2 linhas) ficam lado a lado no topo; os outros 4 (1 linha)
   vêm abaixo. Distância entre tópicos: 20px de margem + 10px do último item. */
.lista-areas { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; color: #d7d3cb; line-height: 1.5; }
/* Serviços justificados, sem hífens: as linhas cheias da coluna da direita terminam exatamente no fim de
   "Empresarial" no rodapé (mesma linha do parágrafo de abertura), e as da esquerda no fim da sua coluna */
.lista-areas li { position: relative; padding-left: 18px; margin-bottom: 10px; text-align: justify; -webkit-hyphens: none; hyphens: none; }
.lista-areas li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--chrome-gold); }
/* A coluna da esquerda vai 10px além da metade (espaço entre colunas de 30px, e não 40px), para as
   linhas cheias terminarem na mesma linha do balão "Conheça as outras Áreas"; a da direita não muda */
.lista-areas { grid-template-columns: 1fr calc((100% - 40px) / 2); column-gap: 30px; }
@media (max-width: 700px) { .lista-areas { grid-template-columns: 1fr; } }
/* Valores: nome em dourado claro à esquerda, descrição ao lado (um embaixo do outro no celular) */
.valores { margin: 0 0 44px; display: grid; grid-template-columns: max-content 1fr; gap: 12px 28px; }
.valores dt { color: #e8e4db; font-weight: 600; }
.valores dd { margin: 0; color: #d7d3cb; line-height: 1.6; }
@media (max-width: 640px) { .valores { grid-template-columns: 1fr; gap: 2px; } .valores dd { margin-bottom: 12px; } }
/* Etapas numeradas, ligadas por uma linha dourada vertical */
.etapas { list-style: none; counter-reset: etapa; margin: 0 0 6px; padding: 0; }
.etapas li { counter-increment: etapa; position: relative; padding: 0 0 26px 58px; }
.etapas li::before {
  content: counter(etapa); position: absolute; left: 0; top: -4px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--chrome-gold); color: var(--chrome-gold); background: rgba(20,23,27,.7);
  font-family: "Montserrat", system-ui, sans-serif; font-size: 15px;
}
.etapas li:not(:last-child)::after {
  content: ""; position: absolute; left: 18px; top: 36px; bottom: 0; width: 1px;
  background: linear-gradient(rgba(212,179,132,.6), rgba(212,179,132,.15));
}
.etapas h2 { font-family: "Montserrat", system-ui, sans-serif; font-weight: 400; font-size: 1.1rem; color: var(--chrome-gold); margin: 0 0 6px; }
.etapas p { margin: 0; color: #d7d3cb; line-height: 1.65; }
/* Perguntas frequentes: abrem e fecham ao clicar */
.faq { margin-bottom: 44px; }
.faq h2 { margin-top: 36px; }
.faq h2:first-child { margin-top: 0; }
.faq details { border-bottom: 1px solid rgba(255,255,255,.12); }
.faq summary {
  list-style: none; cursor: pointer; position: relative; padding: 14px 36px 14px 0;
  color: #f4f1ea; font-weight: 500; transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 1.5px solid var(--chrome-gold); border-bottom: 1.5px solid var(--chrome-gold);
  transform: rotate(45deg); transition: transform .2s, margin-top .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover, .faq summary:focus-visible { color: var(--chrome-gold); }
.faq details p { margin: 0 0 18px; color: #d7d3cb; line-height: 1.7; text-align: justify; -webkit-hyphens: none; hyphens: none; }

/* Mapa bloqueado até o consentimento */
.map-slot { position: relative; }
.map-slot.loaded .map-blocked { display: none; }
.map-blocked {
  border: 1px dashed var(--line); border-radius: 4px; background: var(--surface);
  padding: 28px 24px; text-align: center; color: var(--muted); font-size: .92rem;
}
.map-blocked p { margin: 0 0 14px; }
.map-blocked p:last-child { margin: 14px 0 0; }

/* Aviso e preferências de cookies */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--chrome); color: var(--chrome-ink);
  border-top: 1px solid var(--chrome-line); box-shadow: 0 -6px 24px rgba(0,0,0,.25);
  transform: translateY(110%); transition: transform .35s ease;
}
.cookie-banner.show { transform: none; }
.cookie-inner {
  max-width: 1080px; margin: 0 auto; padding: 20px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px;
}
@media (min-width: 720px) { .cookie-inner { padding: 22px 32px; } }
.cookie-inner p { flex: 1 1 420px; margin: 0; font-size: .92rem; color: var(--chrome-muted); }
.cookie-inner a { color: var(--chrome-gold); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .btn, .cookie-dialog .btn { padding: 10px 18px; font-size: .9rem; }
.cookie-banner .btn-primary { background: #f4f1ea; color: #14213a; border-color: #f4f1ea; }
.cookie-banner .btn-outline { color: #f4f1ea; border-color: rgba(244,241,234,.55); }

.cookie-modal {
  position: fixed; inset: 0; z-index: 40; background: rgba(8,10,14,.6);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cookie-modal[hidden] { display: none; }
.cookie-dialog {
  background: var(--surface); color: var(--ink); border-radius: 6px;
  max-width: 560px; width: 100%; max-height: calc(100vh - 32px); overflow: auto;
  padding: 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.cookie-dialog h2 { margin: 0 0 8px; font-size: 1.4rem; }
.cookie-dialog > p { margin: 0 0 20px; color: var(--muted); font-size: .92rem; }
.cookie-cat {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--line); font-weight: 400; margin: 0; cursor: default;
}
label.cookie-cat { cursor: pointer; }
.cookie-cat p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.cookie-always { font-size: .8rem; color: var(--gold); font-weight: 600; white-space: nowrap; padding-top: 2px; }
.cookie-dialog .cookie-actions { border-top: 1px solid var(--line); padding-top: 20px; justify-content: flex-end; }

/* Interruptor */
.switch {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 44px; height: 24px; margin: 0; padding: 0; border-radius: 999px;
  background: var(--line); position: relative; cursor: pointer; transition: background .2s; border: 0;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Mantém juntas palavras com hífen (ex.: ex-companheiros) */
.nowrap { white-space: nowrap; }

/* Política de privacidade: texto completo em duas colunas iguais, ocupando o espaço entre a margem
   esquerda e a margem direita do site (fim de "Contato"); títulos não ficam separados do texto */
.politica-duas .atualizacao { color: #bfbab1; margin: 0 0 32px; }
@media (min-width: 901px) {
  .hero-photo.politica-duas > .wrap { width: 100%; padding-right: calc(var(--wrap-r) - var(--ext, 0px)); }
  .politica-colunas { column-count: 2; column-gap: 56px; position: relative; }
  /* linha dourada bem fina e tênue entre as colunas, que some suavemente nas pontas */
  .politica-colunas::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, rgba(212,179,132,0) 0%, rgba(212,179,132,.32) 18%, rgba(212,179,132,.32) 82%, rgba(212,179,132,0) 100%);
  }
}
.politica-colunas h2 { break-after: avoid; }
.politica-colunas h2 ~ h2 { margin-top: 26px; }
.politica-colunas p { margin: 0 0 14px; }
.politica-colunas ul { list-style: none; margin: 0 0 14px; padding: 0; color: #d7d3cb; line-height: 1.7; }
/* marcador dos tópicos igual ao dos serviços das áreas: bolinha dourada de 6px */
.politica-colunas li { position: relative; padding-left: 18px; }
.politica-colunas li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--chrome-gold); }
.politica-colunas li { margin-bottom: 6px; text-align: justify; -webkit-hyphens: none; hyphens: none; }
.politica-colunas li, .politica-colunas p { break-inside: avoid-column; }
.politica-colunas strong { color: #f4f1ea; font-weight: 600; }

/* Formulário de contato: campo antirrobô escondido e mensagem de resultado do envio */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 14px 0 0; padding: 12px 14px; border-radius: 6px; font-size: .95rem; line-height: 1.5; }
.form-status.ok { background: rgba(29,158,117,.14); border: 1px solid rgba(29,158,117,.55); color: #e8f5ef; }
.form-status.erro { background: rgba(226,75,74,.12); border: 1px solid rgba(226,75,74,.5); color: #f6e3e2; }
.form-status a { color: var(--chrome-gold); }