/* ============================================================
   L&M ASSESSORIA JURÍDICA — folha de estilo global do site
   Paleta e tipografia: Manual da Marca (Fase 2)
   ============================================================ */

:root {
  --azul: #101C33;
  --azul-medio: #1F3358;
  --azul-footer: #0B1425;
  --bronze: #A67C3D;
  --bronze-claro: #C39A57;
  --papel: #F2F0EB;
  --base: #FBFAF8;
  --texto: #1C2430;
  --texto-sec: #5A6472;
  --branco-suave: #F7F5F1;

  --serif: "Newsreader", Georgia, serif;
  --sans: "Public Sans", -apple-system, Segoe UI, Roboto, sans-serif;

  --largura: 1120px;
  --raio: 6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--texto);
  background: var(--base);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--bronze); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ---------- tipografia utilitária ---------- */

.etiqueta {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
}

.secao-escura .etiqueta { color: var(--bronze-claro); }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; }

h2.titulo-secao {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin: 12px 0 16px;
  color: var(--azul);
}

.secao-escura h2.titulo-secao { color: #FFFFFF; }

.intro-secao {
  color: var(--texto-sec);
  max-width: 640px;
  font-size: 1.05rem;
}

.secao-escura .intro-secao { color: #C9D0DC; }

/* ---------- botões ---------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: var(--raio);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

.btn-bronze {
  background: var(--bronze);
  color: #FFFFFF;
}
.btn-bronze:hover { background: #8F6A32; color: #FFFFFF; }

.btn-contorno-claro {
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
}
.btn-contorno-claro:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.06); }

.btn-contorno-azul {
  border: 1px solid var(--azul);
  color: var(--azul);
}
.btn-contorno-azul:hover { background: var(--azul); color: #FFFFFF; }

/* ============================================================
   HEADER
   ============================================================ */

.topo {
  background: var(--azul);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.topo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

.logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.logo:hover { text-decoration: none; }

.logo-lm {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.75rem;
  color: #FFFFFF;
}
.logo-lm .ponto { color: var(--bronze-claro); }

.logo-descritor {
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #C9D0DC;
  margin-top: 4px;
}

.nav-principal { display: flex; align-items: center; gap: 28px; }

.nav-principal a {
  color: #E8EBF0;
  font-size: 0.9rem;
  font-weight: 500;
}
.nav-principal a:hover { color: var(--bronze-claro); text-decoration: none; }

.nav-principal .btn { padding: 10px 20px; font-size: 0.85rem; }

/* menu mobile */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  background: var(--azul);
  color: #FFFFFF;
  padding: 96px 0 104px;
  position: relative;
}

.hero .etiqueta { color: var(--bronze-claro); }

.hero h1 {
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  max-width: 820px;
  margin: 20px 0 24px;
  color: #FFFFFF;
}

.hero h1 .destaque { color: var(--bronze-claro); }

.hero-sub {
  font-size: 1.1rem;
  color: #C9D0DC;
  max-width: 640px;
  margin-bottom: 40px;
}

.hero-acoes { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.hero-nota {
  margin-top: 28px;
  font-size: 0.85rem;
  color: #8D97A8;
}

/* ============================================================
   SITUAÇÕES (voz do cliente)
   ============================================================ */

.situacoes { background: var(--papel); padding: 88px 0; }

.grade-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.card-situacao {
  background: #FFFFFF;
  border-radius: var(--raio);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--bronze);
  box-shadow: 0 1px 3px rgba(16, 28, 51, 0.06);
}

.card-situacao .area {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin-bottom: 16px;
}

.card-situacao h3 {
  font-size: 1.35rem;
  color: var(--azul);
  margin-bottom: 14px;
}

.card-situacao p { color: var(--texto-sec); font-size: 0.95rem; flex: 1; }

.card-situacao .proximo-passo {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ECE9E2;
  font-size: 0.9rem;
}

.card-situacao .cidades {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ============================================================
   DIFERENCIAIS (seção escura)
   ============================================================ */

.secao-escura { background: var(--azul); color: #E8EBF0; padding: 88px 0; }

.diferenciais .grade-3 { margin-top: 48px; }

.card-diferencial { padding-right: 16px; }

.card-diferencial .numero {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--bronze-claro);
  display: block;
  margin-bottom: 12px;
}

.card-diferencial h3 { font-size: 1.3rem; color: #FFFFFF; margin-bottom: 12px; }

.card-diferencial p { font-size: 0.95rem; color: #C9D0DC; }

/* ============================================================
   COMO FUNCIONA
   ============================================================ */

.como-funciona { padding: 88px 0; background: var(--base); }

.passos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
  counter-reset: passo;
}

.passo { position: relative; padding-top: 8px; }

.passo .num {
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--bronze);
  line-height: 1;
  display: block;
  margin-bottom: 16px;
}

.passo h3 { font-size: 1.2rem; color: var(--azul); margin-bottom: 10px; }
.passo p { font-size: 0.95rem; color: var(--texto-sec); }

/* ============================================================
   SÓCIOS
   ============================================================ */

.socios { background: var(--papel); padding: 88px 0; }

.grade-socios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}

.card-socio {
  background: #FFFFFF;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 28, 51, 0.06);
  display: grid;
  grid-template-columns: 220px 1fr;
}

.foto-socio {
  background: var(--azul-medio);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-family: var(--serif);
  font-size: 2.5rem;
}

.info-socio { padding: 32px 30px; }

.info-socio .oab {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 8px;
}

.info-socio h3 { font-size: 1.4rem; color: var(--azul); margin-bottom: 12px; }

.info-socio p { font-size: 0.92rem; color: var(--texto-sec); margin-bottom: 12px; }

.credenciais { list-style: none; margin-top: 4px; }

.credenciais li {
  font-size: 0.88rem;
  color: var(--texto-sec);
  padding-left: 18px;
  position: relative;
  margin-bottom: 8px;
}

.credenciais li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 2px;
  background: var(--bronze);
}

/* ============================================================
   UNIDADES
   ============================================================ */

.unidades { padding: 88px 0; background: var(--base); }

.grade-unidades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}

.card-unidade {
  border: 1px solid #E4E0D7;
  border-radius: var(--raio);
  padding: 36px 32px;
  background: #FFFFFF;
}

.card-unidade h3 { font-size: 1.3rem; color: var(--azul); margin: 10px 0 14px; }

.card-unidade address {
  font-style: normal;
  color: var(--texto-sec);
  font-size: 0.95rem;
  margin-bottom: 18px;
}

.card-unidade .links { display: flex; gap: 20px; font-size: 0.9rem; font-weight: 600; }

.faixa-online {
  margin-top: 28px;
  background: var(--papel);
  border-radius: var(--raio);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* As duas saídas de cidade: a irmã e o atendimento online. Lado a lado no
   computador; empilhadas e ocupando a largura toda no celular, senão viram
   dois botões espremidos que ninguém acerta com o dedo. */
.opcoes-cidade {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .faixa-online { padding: 22px 20px; }
  .opcoes-cidade { width: 100%; flex-direction: column; gap: 10px; }
  .opcoes-cidade .btn { width: 100%; text-align: center; }
}

.faixa-online p { color: var(--texto); font-size: 0.98rem; }
.faixa-online strong { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; color: var(--azul); }

/* ============================================================
   CTA FINAL
   ============================================================ */

.cta-final { background: var(--azul); color: #FFFFFF; padding: 96px 0; text-align: center; }

.cta-final h2 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  max-width: 720px;
  margin: 16px auto 20px;
  color: #FFFFFF;
}

.cta-final p { color: #C9D0DC; max-width: 560px; margin: 0 auto 36px; }

.cta-final .hero-nota { margin-top: 24px; }

/* ============================================================
   FOOTER
   ============================================================ */

.rodape { background: var(--azul-footer); color: #8D97A8; padding: 64px 0 32px; font-size: 0.88rem; }

.rodape-grade {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.rodape h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9D0DC;
  margin-bottom: 16px;
}

.rodape ul { list-style: none; }
.rodape li { margin-bottom: 10px; }
.rodape a { color: #8D97A8; }
.rodape a:hover { color: var(--bronze-claro); text-decoration: none; }

.rodape .logo-lm { font-size: 1.5rem; }
.rodape .logo-descritor { margin-bottom: 16px; }

.rodape-legal {
  padding-top: 28px;
  font-size: 0.78rem;
  color: #5A6472;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================
   BOTÃO FLUTUANTE WHATSAPP
   ============================================================ */

.zap-flutuante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bronze);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(16, 28, 51, 0.3);
  z-index: 60;
  transition: background 0.2s ease;
}
.zap-flutuante:hover { background: #8F6A32; }
.zap-flutuante svg { width: 28px; height: 28px; fill: #FFFFFF; }

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 900px) {
  .grade-3, .passos { grid-template-columns: 1fr; gap: 20px; }
  .grade-socios, .grade-unidades { grid-template-columns: 1fr; }
  .card-socio { grid-template-columns: 1fr; }
  .foto-socio { min-height: 220px; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav-principal {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--azul);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 28px;
    gap: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-principal.aberto { display: flex; }
  .menu-toggle { display: block; }
  .hero { padding: 64px 0 72px; }
  .situacoes, .secao-escura, .como-funciona, .socios, .unidades { padding: 64px 0; }
  .cta-final { padding: 72px 0; }
  .rodape-grade { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   ANIMAÇÃO — revelação ao rolar
   Sóbria de propósito: um deslocamento curto e um fade.
   ============================================================ */

/* IMPORTANTE: o conteúdo só é escondido depois que o JS confirma que vai animar
   (classe .js-anima no <html>). Sem JS, com JS quebrado ou com o robô do Google,
   tudo aparece normalmente. Esconder por CSS puro arriscaria uma página em branco. */

html.js-anima .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Sem will-change fixo: seriam 53 camadas de GPU vivas o tempo todo. */
html.js-anima .reveal.visivel { opacity: 1; transform: none; }

.reveal-d1 { transition-delay: 0.09s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.27s; }

.card-situacao, .card-unidade, .card-socio, .card-reconhecimento {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-situacao:hover, .card-unidade:hover, .card-reconhecimento:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(16, 28, 51, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html:not(.forcar-animacao) .reveal { opacity: 1; transform: none; transition: none; }
  html:not(.forcar-animacao) .card-situacao:hover,
  html:not(.forcar-animacao) .card-unidade:hover,
  html:not(.forcar-animacao) .card-reconhecimento:hover {
    transform: none; box-shadow: none;
  }
  html:not(.forcar-animacao) .faq-resposta { transition: none; }
}

/* ============================================================
   FAIXA DE AUTORIDADE (números)
   ============================================================ */

/* Mesmo azul do hero, não o azul médio: como faixa inteira, o tom de apoio
   virava uma terceira cor que não aparecia em mais lugar nenhum. Aqui ela lê
   como continuação do hero, e o filete bronze faz a separação. */
.faixa-autoridade {
  background: var(--azul);
  border-top: 1px solid rgba(166, 124, 61, 0.35);
  padding: 40px 0 44px;
}

.grade-numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.numero-item {
  text-align: center;
  padding: 0 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.numero-item:first-child { border-left: none; }

.numero-item .valor {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1;
  color: var(--bronze-claro);
  margin-bottom: 10px;
}

.numero-item .rotulo {
  font-size: 0.85rem;
  color: #C9D0DC;
  line-height: 1.45;
  display: block;
}

/* ============================================================
   RECONHECIMENTO
   ============================================================ */

.reconhecimento { padding: 88px 0; background: var(--base); }

.grade-reconhecimento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.card-reconhecimento {
  background: #FFFFFF;
  border: 1px solid #E4E0D7;
  border-radius: var(--raio);
  padding: 34px 30px;
}

.card-reconhecimento .icone {
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  color: var(--bronze);
}
.card-reconhecimento .icone svg { width: 100%; height: 100%; fill: currentColor; }

.card-reconhecimento h3 {
  font-size: 1.2rem;
  color: var(--azul);
  margin-bottom: 12px;
}

.card-reconhecimento p { font-size: 0.93rem; color: var(--texto-sec); }

.lista-elogios { list-style: none; margin-top: 14px; }

.lista-elogios li {
  font-size: 0.9rem;
  color: var(--texto-sec);
  padding-left: 18px;
  position: relative;
  margin-bottom: 9px;
}

.lista-elogios li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 2px;
  background: var(--bronze);
}

.nota-conformidade {
  margin-top: 32px;
  font-size: 0.85rem;
  color: var(--texto-sec);
  border-left: 2px solid var(--bronze);
  padding-left: 16px;
  max-width: 720px;
}

/* ============================================================
   PERGUNTAS FREQUENTES
   ============================================================ */

.faq { background: var(--papel); padding: 88px 0; }

.lista-faq {
  margin-top: 44px;
  max-width: 860px;
  border-top: 1px solid #DFDAD0;
}

.faq-item { border-bottom: 1px solid #DFDAD0; }

.faq-pergunta {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--azul);
  transition: color 0.2s ease;
}

.faq-pergunta:hover { color: var(--bronze); }

.faq-pergunta::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--bronze);
  border-bottom: 2px solid var(--bronze);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.faq-item.aberto .faq-pergunta::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.faq-resposta {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq-resposta > div {
  padding: 0 44px 26px 0;
  color: var(--texto-sec);
  font-size: 0.97rem;
}

.faq-resposta p + p { margin-top: 12px; }

.faq-rodape {
  margin-top: 40px;
  font-size: 0.97rem;
  color: var(--texto-sec);
}

/* ============================================================
   RESPONSIVO — blocos novos
   ============================================================ */

@media (max-width: 900px) {
  .grade-reconhecimento { grid-template-columns: 1fr; }
  .grade-numeros { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .numero-item:nth-child(odd) { border-left: none; }
}

@media (max-width: 720px) {
  .faixa-autoridade { padding: 36px 0; }
  .reconhecimento, .faq { padding: 64px 0; }
  .faq-pergunta { font-size: 1.02rem; }
}

/* ---------- sufixo dos contadores ("+") ---------- */

.numero-item .sufixo {
  font-family: var(--serif);
  font-size: 0.62em;
  color: var(--bronze-claro);
  margin-left: 2px;
}

/* ---------- card de reconhecimento com foto ---------- */

.card-reconhecimento.com-foto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Altura fixa em vez de aspect-ratio: dentro de um flex column o aspect-ratio
   cedia e cada foto ficava de um tamanho, conforme a proporção do arquivo. */
.card-reconhecimento .foto-reconhecimento {
  height: 220px;
  flex: 0 0 220px;
  background: var(--azul-medio);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card-reconhecimento .foto-reconhecimento img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-reconhecimento .corpo-reconhecimento { padding: 30px; }

/* ---------- modo de conferência: ?animar=1 ----------
   Reativa a animação mesmo com "reduzir movimento" ligado no sistema.
   Só existe para o cliente conseguir ver o efeito antes de aprovar. */

@media (prefers-reduced-motion: reduce) {
  html.forcar-animacao { scroll-behavior: smooth; }

  html.forcar-animacao .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  html.forcar-animacao .reveal.visivel { opacity: 1; transform: none; }

  html.forcar-animacao .faq-resposta {
    transition: max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  html.forcar-animacao .card-situacao:hover,
  html.forcar-animacao .card-unidade:hover,
  html.forcar-animacao .card-reconhecimento:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(16, 28, 51, 0.10);
  }
}

/* ============================================================
   CELULAR — ajustes de leitura
   ============================================================ */

@media (max-width: 720px) {

  /* Texto corrido sempre alinhado à esquerda: centralizar parágrafo faz o olho
     perder onde a próxima linha começa. Só título curto e número ficam centrados. */
  .hero h1, .hero-sub, .titulo-secao, .intro-secao,
  .card-situacao p, .card-diferencial p, .passo p,
  .info-socio p, .card-reconhecimento p, .faq-resposta p {
    text-align: left;
  }

  .hero { padding: 56px 0 64px; }
  .hero h1 { font-size: 1.95rem; }
  .hero-sub { font-size: 1rem; margin-bottom: 32px; }

  /* Botões de ação ocupam a largura toda: alvo de toque maior e sem
     ficarem lado a lado espremidos. */
  .hero-acoes { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-acoes .btn { text-align: center; }

  .cta-final { padding: 60px 0 64px; }
  .cta-final h2 { font-size: 1.7rem; }
  .cta-final .btn { display: block; }

  .faixa-online { flex-direction: column; align-items: flex-start; }
  .faixa-online .btn { width: 100%; text-align: center; }

  .card-situacao .cidades { flex-direction: column; gap: 8px; }

  /* ---- O botão flutuante vira barra inferior ----
     Redondo e fixo no canto, ele cobria o texto do fim da página.
     Em barra, nada fica escondido e o alvo de toque é muito maior. */
  .zap-flutuante {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 0;
    /* Enxuta: ~44px de altura, o mínimo confortável para o dedo.
       A barra fica sobre o conteúdo o tempo todo — cada pixel a mais
       é leitura a menos, ainda mais em celular com barra do navegador. */
    padding: 11px 20px calc(11px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    /* Some enquanto a pessoa desce lendo e volta assim que ela sobe:
       durante a leitura a tela fica inteira, e a ação continua a um gesto. */
    transition: transform 0.28s ease, background 0.2s ease;
    box-shadow: 0 -1px 10px rgba(16, 28, 51, 0.20);
  }

  .zap-flutuante::after {
    content: "Falar com um advogado";
    color: #FFFFFF;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.2;
  }

  .zap-flutuante svg { width: 18px; height: 18px; }

  /* Espaço para a barra não cobrir o rodapé. */
  body { padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   FAIXAS DE SITUAÇÕES — a "cauda longa" da busca

   Caixas brancas com sombra, levemente fora de linha e boiando de leve.
   O desalinhamento e o movimento existem por um motivo funcional: uma fila
   perfeitamente reta parece conteúdo estático, e ninguém tenta arrastar.

   Rolagem manual, nunca automática — carrossel que gira sozinho troca o
   slide antes de a pessoa terminar de ler.
   ============================================================ */

.faixas-situacoes { margin-top: 40px; }

.faixa-area { margin-bottom: 22px; }
.faixa-area:last-child { margin-bottom: 0; }

.rotulo-faixa {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin-bottom: 6px;
}

/* Moldura: segura as setas e as máscaras de gradiente das pontas. */
.moldura-trilho { position: relative; }

.trilho {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 16px 24px 18px;
  margin: 0 -24px;
  -webkit-overflow-scrolling: touch;
  /* Sem barra de rolagem: as setas e o corte na borda já contam a história. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.trilho::-webkit-scrollbar { display: none; }

.trilho:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: -2px;
  border-radius: 6px;
}

/* ---------- as caixinhas ---------- */

.chip {
  flex: 0 0 auto;
  background: #FFFFFF;
  border: 1px solid #EAE6DE;
  border-radius: 40px;
  padding: 12px 22px;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--texto);
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(16, 28, 51, 0.09),
              0 1px 2px rgba(16, 28, 51, 0.05);
  animation: boiar 6s ease-in-out infinite;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Fora de linha e fora de compasso: cada caixa em uma altura e num tempo
   diferente, senão o conjunto sobe e desce junto e vira uma onda só. */
.chip:nth-child(4n+1) { margin-top: 0;     animation-delay: 0s;    animation-duration: 6.0s; }
.chip:nth-child(4n+2) { margin-top: 14px;  animation-delay: -1.6s; animation-duration: 6.8s; }
.chip:nth-child(4n+3) { margin-top: -10px; animation-delay: -3.1s; animation-duration: 5.6s; }
.chip:nth-child(4n+4) { margin-top: 8px;   animation-delay: -4.4s; animation-duration: 7.2s; }

@keyframes boiar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.chip::before {
  content: "“";
  color: var(--bronze);
  font-family: var(--serif);
  margin-right: 3px;
}

.chip::after {
  content: "”";
  color: var(--bronze);
  font-family: var(--serif);
  margin-left: 2px;
}

.chip:hover {
  border-color: var(--bronze);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(16, 28, 51, 0.14);
  animation-play-state: paused;
}

.chip-final {
  background: var(--azul);
  border-color: var(--azul);
  color: #FFFFFF;
  font-weight: 600;
}
.chip-final::before, .chip-final::after { content: none; }
.chip-final:hover { background: var(--azul-medio); border-color: var(--azul-medio); color: #FFFFFF; }

/* ---------- setas ---------- */

.seta-trilho {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #E4E0D7;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(3px);
  color: var(--azul);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 8px rgba(16, 28, 51, 0.10);
}

.seta-trilho:hover { opacity: 1; background: #FFFFFF; box-shadow: 0 4px 14px rgba(16,28,51,0.18); }
.seta-trilho:focus-visible { opacity: 1; outline: 2px solid var(--bronze); outline-offset: 2px; }

.seta-trilho svg { width: 16px; height: 16px; fill: currentColor; }

.seta-esq { left: -8px; }
.seta-dir { right: -8px; }

/* Some quando não há mais para onde ir daquele lado. */
.seta-trilho[hidden] { display: none; }

/* Véu nas pontas: reforça que o conteúdo continua além da borda. */
.moldura-trilho::before,
.moldura-trilho::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.25s ease;
}

.moldura-trilho::before {
  left: -24px;
  background: linear-gradient(to right, var(--papel), rgba(242,240,235,0));
}

.moldura-trilho::after {
  right: -24px;
  background: linear-gradient(to left, var(--papel), rgba(242,240,235,0));
}

.moldura-trilho.no-inicio::before { opacity: 0; }
.moldura-trilho.no-fim::after { opacity: 0; }

/* ---------- ponte para os cards de área ---------- */

.ponte-areas {
  margin-top: 46px;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--azul);
}

.ponte-areas + .grade-3 { margin-top: 20px; }

/* Movimento é enfeite: quem pediu para reduzi-lo fica sem ele, e nada quebra. */
@media (prefers-reduced-motion: reduce) {
  html:not(.forcar-animacao) .chip {
    animation: none;
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  .chip { font-size: 0.87rem; padding: 11px 18px; }
  /* Desnível menor no celular: três faixas empilhadas inchariam a página. */
  .chip:nth-child(4n+2) { margin-top: 9px; }
  .chip:nth-child(4n+3) { margin-top: -6px; }
  .chip:nth-child(4n+4) { margin-top: 5px; }
  .seta-trilho { display: none; }
  .ponte-areas { font-size: 1.05rem; margin-top: 38px; }
}

/* ---------- arrastar com o mouse ---------- */

.trilho { cursor: grab; }
.trilho.arrastando { cursor: grabbing; user-select: none; scroll-snap-type: none; }

/* Enquanto arrasta, a caixinha não deve reagir ao passar do cursor
   nem capturar o arrasto como se fosse um clique no link. */
.trilho.arrastando .chip {
  animation-play-state: paused;
  pointer-events: none;
}

/* ---------- barra de progresso ---------- */

.barra-progresso {
  position: relative;
  height: 3px;
  background: #E2DDD3;
  border-radius: 2px;
  margin-top: 2px;
  overflow: hidden;
}

.barra-progresso span {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--bronze);
  border-radius: 2px;
  transition: width 0.15s ease;
}

.barra-progresso[hidden] { display: none; }

/* A frase que fecha a história dos sócios: é o único ponto de emoção da
   seção, então ganha peso e a cor da marca. */
.socios .intro-secao strong {
  display: block;
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--azul);
}

@media (max-width: 720px) {
  .socios .intro-secao strong { font-size: 1.15rem; }
}

/* ============================================================
   CHAMADAS DO MEIO DA PÁGINA
   Colocadas só onde a pessoa acabou de ganhar um motivo para agir:
   depois de se reconhecer numa situação e depois de ver que o
   primeiro passo é simples. Botão em toda seção vira insistência.
   ============================================================ */

.chamada-meio {
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid rgba(28, 36, 48, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.chamada-meio p {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--azul);
  margin: 0;
}

.situacoes .chamada-meio { border-top-color: #DFDAD0; }

@media (max-width: 720px) {
  .chamada-meio {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 16px;
    margin-top: 38px;
  }
  .chamada-meio p { font-size: 1.08rem; }
  .chamada-meio .btn { text-align: center; }
}

/* A instrução de arrastar precisa ser lida antes das caixas, senão a
   pessoa não descobre que há mais conteúdo à direita. */
.situacoes .intro-secao strong { color: var(--azul); font-weight: 700; }

/* A faixa inteira é área de arrasto, não só o trilho: o rótulo da área
   deixava uma tira larga que não respondia ao clique-e-puxa. */
.faixa-area { cursor: grab; }
.faixa-area.arrastando { cursor: grabbing; user-select: none; }
.faixa-area.arrastando .rotulo-faixa { user-select: none; }

/* ============================================================
   CORPO DE TEXTO MAIOR
   O público inclui aposentados e pensionistas. Corpo em 15px é
   confortável para quem tem 20 anos e cansativo para quem tem 70.
   ============================================================ */

body { font-size: 1.06rem; }

.intro-secao { font-size: 1.12rem; }

.card-situacao p { font-size: 1.02rem; }
.card-situacao .proximo-passo { font-size: 0.97rem; }
.card-situacao .cidades { font-size: 0.92rem; }

.card-diferencial p { font-size: 1.02rem; }
.passo p { font-size: 1.02rem; }

.info-socio p { font-size: 1rem; }
.credenciais li { font-size: 0.95rem; }

.card-reconhecimento p { font-size: 1rem; }
.lista-elogios li { font-size: 0.97rem; }
.nota-conformidade { font-size: 0.92rem; }

.card-unidade address { font-size: 1.02rem; }
.card-unidade .links { font-size: 0.97rem; }
.faixa-online p { font-size: 1.05rem; }

.faq-pergunta { font-size: 1.18rem; }
.faq-resposta > div { font-size: 1.04rem; }
.faq-rodape { font-size: 1.04rem; }

.ponte-areas { font-size: 1.25rem; }
.chamada-meio p { font-size: 1.28rem; }

.hero-sub { font-size: 1.16rem; }
.hero-nota { font-size: 0.9rem; }

.numero-item .rotulo { font-size: 0.9rem; }
.chip { font-size: 0.97rem; }

.rodape { font-size: 0.94rem; }

@media (max-width: 720px) {
  body { font-size: 1.04rem; }
  .intro-secao { font-size: 1.08rem; }
  .faq-pergunta { font-size: 1.08rem; }
  .chip { font-size: 0.92rem; }
  .ponte-areas { font-size: 1.12rem; }
  .chamada-meio p { font-size: 1.14rem; }
}

@media (max-width: 720px) {
  /* Barra recolhida: sai de cena enquanto a pessoa desce lendo. */
  .zap-flutuante.recolhida { transform: translateY(110%); }

  /* Com a barra escondendo, o espaço reservado embaixo pode ser menor —
     ela nunca fica parada sobre o rodapé por muito tempo. */
  body { padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px)); }

  .zap-flutuante::after { font-size: 0.85rem; }
  .zap-flutuante svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.forcar-animacao) .zap-flutuante { transition: none; }
}

/* A "pista" é criada pelo JavaScript e é ela que desliza, via transform.
   O trilho continua sendo a janela com rolagem — o dedo e o arrasto
   seguem funcionando normalmente. */
.trilho > .pista {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  will-change: transform;
}

/* ============================================================
   AJUSTES 12/08 — frases de transição centralizadas
   São frases curtas que anunciam o que vem a seguir. Centralizadas
   elas lêem como um respiro entre blocos; à esquerda competiam com
   o texto corrido em volta. O botão fica logo abaixo, no mesmo eixo.
   ============================================================ */

.ponte-areas {
  text-align: center;
  font-size: 1.35rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.chamada-meio {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.chamada-meio p { max-width: 560px; }

@media (max-width: 720px) {
  .ponte-areas { font-size: 1.2rem; }
  .chamada-meio { align-items: stretch; }
  .chamada-meio .btn { text-align: center; }
}

/* ============================================================
   PÁGINAS DE TEXTO CORRIDO (política de privacidade)
   Coluna estreita de propósito: linha longa demais cansa a leitura.
   ============================================================ */

.pagina-texto { padding: 64px 0 88px; background: var(--base); }
.pagina-texto .container { max-width: 760px; }

.pagina-texto h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--azul);
  margin: 12px 0 10px;
}

.pagina-texto .atualizado {
  font-size: 0.92rem;
  color: var(--texto-sec);
  margin-bottom: 28px;
}

.pagina-texto .abertura {
  font-size: 1.12rem;
  color: var(--texto);
  padding-bottom: 28px;
  border-bottom: 2px solid var(--bronze);
  margin-bottom: 36px;
}

.pagina-texto h2 {
  font-size: 1.45rem;
  color: var(--azul);
  margin: 40px 0 12px;
}

.pagina-texto h3 {
  font-size: 1.15rem;
  color: var(--azul);
  margin: 26px 0 8px;
}

.pagina-texto p { margin-bottom: 14px; color: var(--texto-sec); }
.pagina-texto p strong { color: var(--texto); }

.lista-simples { list-style: none; margin: 0 0 18px; }

.lista-simples li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: var(--texto-sec);
}

.lista-simples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 9px;
  height: 2px;
  background: var(--bronze);
}

.volta-home { margin-top: 48px; }

.rodape-legal a { color: #8D97A8; text-decoration: underline; }
.rodape-legal a:hover { color: var(--bronze-claro); }

@media (max-width: 720px) {
  .pagina-texto { padding: 48px 0 64px; }
  .pagina-texto h2 { font-size: 1.3rem; }
  .volta-home .btn { display: block; text-align: center; }
}

/* ============================================================
   PÁGINAS DE ÁREA (trabalhista/criminal/previdenciário × cidade)
   Mesmo esqueleto nas seis; o que muda é o conteúdo.
   ============================================================ */

.hero-area { padding: 56px 0 72px; }

.migalhas {
  font-size: 0.85rem;
  color: #8D97A8;
  margin-bottom: 18px;
}
.migalhas a { color: var(--bronze-claro); }
.migalhas span { margin: 0 6px; opacity: 0.6; }

.hero-area h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }

/* Faixa de prazo: a informação mais urgente da página, logo abaixo do hero. */
.faixa-alerta {
  background: var(--azul-medio);
  padding: 20px 0;
  border-top: 1px solid rgba(166, 124, 61, 0.35);
}
.faixa-alerta p {
  color: #E8EBF0;
  font-size: 1.02rem;
  max-width: 860px;
}
.faixa-alerta strong { color: var(--bronze-claro); }

.secao-conteudo { padding: 72px 0; background: var(--base); }
.secao-conteudo.fundo-papel { background: var(--papel); }

/* ---------- blocos de caso ---------- */

.blocos-caso {
  margin-top: 44px;
  display: grid;
  gap: 22px;
}

.bloco-caso {
  background: #FFFFFF;
  border: 1px solid #E9E5DC;
  border-left: 3px solid var(--bronze);
  border-radius: var(--raio);
  padding: 0;                 /* o respiro agora é do topo e do corpo */
  /* Compensa o cabeçalho fixo quando se chega por âncora vinda da home. */
  scroll-margin-top: 90px;
}

/* ============================================================
   CASO EM ACORDEÃO
   Fechado, a pessoa vê os 11 títulos numa tela só e acha o caso
   dela sem rolar a página inteira. Aberto, lê e já encontra o
   botão no fim do próprio bloco.

   É <details> nativo de propósito: abre e fecha sem JavaScript,
   já vem acessível pelo teclado, e o Ctrl+F do navegador consegue
   abrir o bloco para achar o texto lá dentro.

   PROPOSITALMENTE DIFERENTE DO FAQ: o FAQ é lista corrida com
   linha embaixo e uma seta pequena. O caso é card branco com barra
   bronze e um sinal redondo de + / −. São duas coisas distintas na
   mesma página e não podem parecer a mesma.
   ============================================================ */

.bloco-caso > summary {
  list-style: none;           /* tira o triângulo padrão do navegador */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px 24px 29px;
  border-radius: var(--raio);
  transition: background 0.15s ease;
}

.bloco-caso > summary::-webkit-details-marker { display: none; }
.bloco-caso > summary:hover { background: #FBF9F5; }

.bloco-caso > summary:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: -2px;
}

/* O título vira o rótulo do acordeão: perde a margem de baixo. */
.bloco-caso > summary h2,
.bloco-caso > summary h3 {
  margin: 0;
  flex: 1;
  font-size: 1.28rem;
  line-height: 1.35;
  color: var(--azul);
}

/* Sinal de + que vira − ao abrir. O FAQ usa seta; aqui é círculo. */
.caso-sinal {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #E0D9CB;
  background: var(--papel);
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.caso-sinal::before,
.caso-sinal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--bronze);
  transform: translate(-50%, -50%);
}

.caso-sinal::before { width: 12px; height: 2px; }
.caso-sinal::after  { width: 2px;  height: 12px; transition: opacity 0.15s ease; }

.bloco-caso[open] > summary .caso-sinal { background: var(--bronze); border-color: var(--bronze); }
.bloco-caso[open] > summary .caso-sinal::before { background: #FFFFFF; }
.bloco-caso[open] > summary .caso-sinal::after  { opacity: 0; }

.caso-corpo { padding: 2px 29px 28px; }
.caso-corpo > :first-child { margin-top: 0; }

/* Âncora local dentro do caso: o trecho que só vale para esta cidade —
   a vara onde o processo corre, a agência do INSS, o perfil de trabalho.
   É o que separa a página de Jundiaí da de Campinas, então se distingue
   do texto geral em vez de se misturar a ele. */
.local-caso {
  background: var(--papel);
  border-left: 2px solid var(--bronze);
  padding: 14px 18px;
  margin: 16px 0 0;
  font-size: 0.97rem;
}

.local-caso strong { color: var(--azul); }

/* Quem pediu "reduzir movimento" não vê transição nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .bloco-caso > summary,
  .caso-sinal,
  .caso-sinal::after { transition: none; }
}

.fundo-papel .bloco-caso { border-color: #E4E0D7; border-left-color: var(--bronze); }

.bloco-caso h3 {
  font-size: 1.35rem;
  color: var(--azul);
  margin-bottom: 14px;
}

.bloco-caso p { color: var(--texto-sec); margin-bottom: 12px; }
.bloco-caso p:last-child { margin-bottom: 0; }

.bloco-caso .dica {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--papel);
  border-radius: 4px;
  font-size: 0.97rem;
}
.fundo-papel .bloco-caso .dica { background: #F7F5F0; }
.bloco-caso .dica strong { color: var(--azul); }

/* ---------- documentos ---------- */

.lista-documentos {
  list-style: none;
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 32px;
}

.lista-documentos li {
  position: relative;
  padding-left: 22px;
  color: var(--texto-sec);
}

.lista-documentos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 2px;
  background: var(--bronze);
}

.lista-documentos strong { color: var(--texto); }

/* ---------- conteúdo local ---------- */

.grade-local {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

.card-local {
  background: #FFFFFF;
  border: 1px solid #E4E0D7;
  border-radius: var(--raio);
  padding: 30px 32px;
}

.card-local h3 { font-size: 1.2rem; color: var(--azul); margin-bottom: 14px; }
.card-local address { font-style: normal; color: var(--texto-sec); margin-bottom: 16px; }
.card-local p { color: var(--texto-sec); margin-bottom: 12px; }
.card-local p:last-child { margin-bottom: 0; }

.nota-local {
  margin-top: 28px;
  padding: 30px 32px;
  background: var(--azul);
  border-radius: var(--raio);
  color: #C9D0DC;
}

.nota-local h3 { font-size: 1.2rem; color: #FFFFFF; margin-bottom: 14px; }
.nota-local p { margin-bottom: 12px; }
.nota-local strong { color: var(--bronze-claro); }

.nota-local .fonte {
  font-size: 0.85rem;
  color: #8D97A8;
  margin-bottom: 0;
  margin-top: 16px;
}

/* ---------- unidade com espaço de mapa ---------- */

.grade-unidade-pagina {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
  align-items: stretch;
}

.dados-unidade {
  background: #FFFFFF;
  border: 1px solid #E4E0D7;
  border-radius: var(--raio);
  padding: 30px 32px;
}

.dados-unidade address {
  font-style: normal;
  color: var(--texto-sec);
  margin-bottom: 16px;
  font-size: 1.02rem;
}

.dados-unidade p { color: var(--texto-sec); margin-bottom: 18px; }
.dados-unidade .links { display: flex; gap: 20px; font-weight: 600; flex-wrap: wrap; }

.mapa-espaco {
  min-height: 260px;
  background: var(--azul-medio);
  border-radius: var(--raio);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: hidden;
}
.mapa-espaco iframe { width: 100%; height: 100%; border: 0; }

/* ---------- responsivo das páginas de área ---------- */

@media (max-width: 900px) {
  .grade-local, .grade-unidade-pagina { grid-template-columns: 1fr; }
  .lista-documentos { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero-area { padding: 40px 0 56px; }
  .secao-conteudo { padding: 56px 0; }
  .bloco-caso { padding: 26px 22px; }
  .card-local, .dados-unidade, .nota-local { padding: 26px 22px; }
  .faixa-alerta p { font-size: 0.97rem; }
  .mapa-espaco { min-height: 200px; }
}

/* Convite ao fim de cada caso: a pessoa acabou de se reconhecer no texto,
   é o pico de interesse. Link, não botão — botão grande onze vezes
   viraria insistência e queimaria a sobriedade. */
.cta-bloco {
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid #EFEBE3;
}

.cta-bloco a {
  font-weight: 600;
  font-size: 0.97rem;
}

/* Aviso de que nenhum documento é exigido para o primeiro contato.
   Ganha destaque porque desarma o principal motivo de a pessoa adiar. */
.destaque-aviso {
  max-width: 780px;
  background: #FFFFFF;
  border-left: 3px solid var(--bronze);
  padding: 20px 24px;
  border-radius: 0 4px 4px 0;
  color: var(--texto);
}
.fundo-papel .destaque-aviso { background: #FFFFFF; }
.destaque-aviso strong { color: var(--azul); }

.atualizado-em {
  margin-top: 30px;
  font-size: 0.88rem;
  color: var(--texto-sec);
  font-style: italic;
}

/* Horário também precisa estar visível para o leitor — o dado estruturado
   serve ao buscador, não a quem está decidindo se liga agora. */
.horario-atendimento {
  font-size: 0.97rem;
  color: var(--texto-sec);
  margin-top: 10px;
}
.horario-atendimento strong { color: var(--azul); }

/* O "SELETOR DE CIDADE" (.seletor-cidade / .btn-cidade / .rotulo-seletor) foi
   removido em 12/08/2026 — HTML, CSS e JS. Quem pergunta a cidade agora é a
   caixinha (.caixa-cidade), no primeiro clique numa situação. Se for preciso
   ressuscitar, o CSS está no histórico deste arquivo. */

/* ============================================================
   CIDADE ESCOLHIDA + SAÍDA PARA TROCAR
   Só aparece depois que a pessoa escolheu. Discreto de propósito:
   não é uma decisão a tomar de novo, é uma correção disponível.
   ============================================================ */

/* Fluxo normal, NÃO flex: com flex cada trecho de texto vira um item e o
   gap entra até antes do ponto final ("Jundiaí ."). Aqui é uma frase. */
.cidade-atual {
  margin-top: 26px;
  font-size: 0.95rem;
  color: var(--texto-sec);
  line-height: 1.6;
}

.cidade-atual strong { color: var(--azul); }

.trocar-cidade {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--bronze);
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  padding: 0 0 1px;
  margin-left: 6px;
  cursor: pointer;
}

.trocar-cidade:hover { color: var(--azul); }

.trocar-cidade:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

/* ============================================================
   IMAGEM DA PÁGINA DE ÁREA
   ============================================================ */

.figura-area {
  margin: 40px 0 8px;
  border-radius: var(--raio);
  overflow: hidden;
  max-height: 320px;
  display: flex;
  align-items: center;
}

.figura-area img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   ASSINATURA DE AUTORIA
   Conteúdo jurídico é categoria sensível para o Google: ele olha
   quem assina. E o leitor também — saber quem escreveu sobre prisão
   ou INSS muda a confiança no texto.
   ============================================================ */

.assinatura-autoria { padding: 48px 0; background: var(--papel); }

.bloco-autoria {
  max-width: 720px;
  border-left: 3px solid var(--bronze);
  padding: 22px 26px;
  background: #FFFFFF;
  border-radius: 0 var(--raio) var(--raio) 0;
}

.rotulo-autoria {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 8px;
}

.nome-autoria {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--azul);
  margin-bottom: 4px;
}

.cargo-autoria { font-size: 0.95rem; color: var(--texto-sec); margin-bottom: 14px; }

.nota-autoria {
  font-size: 0.9rem;
  color: var(--texto-sec);
  padding-top: 14px;
  border-top: 1px solid #EFEBE3;
}

@media (max-width: 720px) {
  .figura-area { max-height: 210px; margin-top: 30px; }
  .assinatura-autoria { padding: 36px 0; }
  .bloco-autoria { padding: 20px 20px; }
}

/* ============================================================
   PÁGINAS-GUIA (sem cidade)
   Organizadas por pergunta, com resposta curta antes do
   aprofundamento — é esse trecho que o Google usa na caixa de
   destaque e que as respostas de IA costumam citar.
   ============================================================ */

.indice-guia {
  margin-top: 30px;
  max-width: 720px;
  counter-reset: item;
  list-style: none;
}

.indice-guia li {
  counter-increment: item;
  position: relative;
  padding-left: 34px;
  margin-bottom: 11px;
}

.indice-guia li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--azul);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.indice-guia a { color: var(--texto); font-weight: 500; }
.indice-guia a:hover { color: var(--bronze); }

.bloco-caso h2 {
  font-size: 1.45rem;
  color: var(--azul);
  margin-bottom: 14px;
  line-height: 1.25;
}

.resposta-direta {
  font-size: 1.08rem;
  color: var(--texto) !important;
  background: var(--papel);
  border-left: 3px solid var(--bronze);
  padding: 16px 20px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 16px !important;
}

.fundo-papel .resposta-direta { background: #F7F5F0; }
.resposta-direta strong { color: var(--azul); }

.card-local a { font-weight: 600; }

@media (max-width: 720px) {
  .bloco-caso h2 { font-size: 1.25rem; }
  .resposta-direta { font-size: 1.02rem; padding: 14px 16px; }
}

/* ============================================================
   CAIXINHA DE CIDADE
   Aparece no momento do clique, quando a escolha é necessária —
   e não antes, quando ainda é abstrata.
   ============================================================ */

.caixa-cidade[hidden] { display: none; }

.caixa-cidade {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.caixa-cidade-fundo {
  position: absolute;
  inset: 0;
  background: rgba(16, 28, 51, 0.62);
  backdrop-filter: blur(2px);
}

.caixa-cidade-conteudo {
  position: relative;
  background: var(--base);
  border-radius: 8px;
  padding: 38px 36px 32px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(16, 28, 51, 0.4);
  border-top: 3px solid var(--bronze);
}

.caixa-cidade-conteudo h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--azul);
  margin: 10px 0 12px;
}

.caixa-sub { color: var(--texto-sec); font-size: 1rem; margin-bottom: 24px; }

.opcoes-caixa { display: flex; flex-direction: column; gap: 10px; }
.opcoes-caixa .btn { text-align: center; }

.caixa-nota {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--texto-sec);
  text-align: center;
}

.fechar-caixa {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--texto-sec);
  cursor: pointer;
  padding: 4px 8px;
}
.fechar-caixa:hover { color: var(--azul); }

@media (max-width: 720px) {
  .caixa-cidade { align-items: flex-end; padding: 0; }
  .caixa-cidade-conteudo {
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    padding: 30px 22px calc(26px + env(safe-area-inset-bottom, 0px));
  }
  .caixa-cidade-conteudo h2 { font-size: 1.4rem; }
}

/* Ponte da home para os guias sem cidade — sem esses links eles seriam
   páginas órfãs, alcançadas só pelo sitemap. */
.guias-gerais {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid #DFDAD0;
}

.titulo-guias {
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--azul);
  margin-bottom: 14px;
}

.lista-guias { display: flex; flex-wrap: wrap; gap: 10px; }

.lista-guias a {
  background: #FFFFFF;
  border: 1px solid #E4E0D7;
  border-radius: 40px;
  padding: 10px 20px;
  font-size: 0.94rem;
  color: var(--texto);
  font-weight: 500;
  transition: border-color .2s ease, color .2s ease;
}
.lista-guias a:hover { border-color: var(--bronze); color: var(--azul); text-decoration: none; }

@media (max-width: 720px) {
  .lista-guias { flex-direction: column; }
  .lista-guias a { text-align: center; }
}