/* ==========================================================================
   JULIANA CAMPOS ADVOCACIA — Sistema de design
   Paleta derivada por extração de pixel da logo original (#DABA93).
   Assinatura visual: "filete de assinatura" — regra fina areia que encerra
   blocos como a linha de assinatura de uma peça processual.
   ========================================================================== */

:root {
  color-scheme: only light;

  /* --- Cor --------------------------------------------------------------
     marinho   : âncora institucional (cabeçalho, rodapé, hero)
     areia     : cor exata da logo. Assinatura, nunca preenchimento de botão
     grafite   : ação. Botões primários e texto forte sobre fundo claro
     papel/osso: superfícies claras                                       */
  --marinho:        #0B1E3D;
  --marinho-fundo:  #071730;
  --marinho-linha:  #1B3357;
  --areia:          #DABA93;
  --areia-clara:    #EBD8BF;
  --grafite:        #33302B;
  --grafite-claro:  #57524A;
  --papel:          #F3ECDC;
  --osso:           #E8DEC7;
  --osso-linha:     #DBCFAE;
  --branco:         #FAF6EB;

  /* --- Tipografia ------------------------------------------------------ */
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --texto:   "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --t-hero:  clamp(2.1rem, 1.35rem + 3.2vw, 4.05rem);
  --t-h1:    clamp(1.95rem, 1.35rem + 2.5vw, 3.35rem);
  --t-h2:    clamp(1.55rem, 1.15rem + 1.6vw, 2.4rem);
  --t-h3:    clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --t-corpo: clamp(1.02rem, 0.98rem + 0.22vw, 1.12rem);
  --t-peq:   0.9rem;
  --t-mini:  0.775rem;

  /* --- Layout ---------------------------------------------------------- */
  --container: 1200px;
  --container-texto: 720px;
  --gutter: clamp(22px, 5.5vw, 48px);
  --bloco: clamp(72px, 9.5vw, 136px);
  --raio: 4px;
  --borda-fina: 1px;
  --sombra-cartao: 0 1px 2px rgba(20, 30, 51, 0.04);
  --sombra-cartao-hover: 0 24px 48px -24px rgba(11, 30, 61, 0.32), 0 8px 16px -8px rgba(11, 30, 61, 0.12);
  --sombra-botao: 0 10px 24px -10px rgba(11, 30, 61, 0.35);
}

/* iOS Safari sobrescreve cores herdadas em modo escuro: forçamos claro. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; }
  html, body { background-color: #F3ECDC !important; color: #33302B !important; -webkit-text-fill-color: #33302B; }
}

/* --------------------------------------------------------------------------
   Fontes (a versão de produção referencia os arquivos; a autocontida embute)
   -------------------------------------------------------------------------- */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/newsreader-400.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/newsreader-500.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/newsreader-600.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/newsreader-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-500.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/archivo-700.woff2") format("woff2"); }

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

html {
  background-color: #F3ECDC;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background-color: #F3ECDC;
  color: #33302B;
  -webkit-text-fill-color: #33302B;
  font-family: var(--texto);
  font-size: var(--t-corpo);
  line-height: 1.72;
  font-weight: 400;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: #0B1E3D;
  -webkit-text-fill-color: #0B1E3D;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: 1.06rem; font-family: var(--texto); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: #0B1E3D; -webkit-text-fill-color: #0B1E3D; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: #DABA93; }

:focus-visible { outline: 3px solid #0B1E3D; outline-offset: 3px; border-radius: 2px; }
.secao-escura :focus-visible, .rodape :focus-visible, .cabecalho :focus-visible { outline-color: #DABA93; }

::selection { background-color: #DABA93; color: #0B1E3D; -webkit-text-fill-color: #0B1E3D; }

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background-color: #0B1E3D; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF;
  padding: 14px 22px; font-size: var(--t-peq); font-weight: 600; text-decoration: none;
}
.pular-para-conteudo:focus { left: 12px; top: 12px; }

.oculto-visual {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Estruturas de layout
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container-texto { width: 100%; max-width: var(--container-texto); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.secao { padding-top: var(--bloco); padding-bottom: var(--bloco); background-color: #F3ECDC; color: #33302B; -webkit-text-fill-color: #33302B; }
.secao-osso { background-color: #E8DEC7; color: #33302B; -webkit-text-fill-color: #33302B; }
.secao-branca { background-color: #FAF6EB; color: #33302B; -webkit-text-fill-color: #33302B; }

.secao-escura { background-color: #0B1E3D; color: #E6E9EF; -webkit-text-fill-color: #E6E9EF; }
.secao-escura h1, .secao-escura h2, .secao-escura h3, .secao-escura h4 { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.secao-escura p, .secao-escura li { color: #D5DBE5; -webkit-text-fill-color: #D5DBE5; }
.secao-escura a { color: #EBD8BF; -webkit-text-fill-color: #EBD8BF; }

/* Sobrancelha + filete de assinatura (elemento de marca) */
.sobrancelha {
  display: block; font-family: var(--texto); font-size: var(--t-mini); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 18px;
  color: #7A6A52; -webkit-text-fill-color: #7A6A52;
}
.secao-escura .sobrancelha, .cabecalho .sobrancelha { color: #DABA93; -webkit-text-fill-color: #DABA93; }
.sobrancelha::before {
  content: ""; display: inline-block; width: 26px; height: 1px;
  background-color: #DABA93; vertical-align: middle; margin-right: 12px; margin-bottom: 3px;
}

.filete { display: block; width: 64px; height: 1px; background-color: #DABA93; border: 0; margin: 34px 0; }
.filete-centro { margin-left: auto; margin-right: auto; }

.cabecalho-secao { max-width: 660px; margin-bottom: clamp(42px, 6vw, 68px); }
.cabecalho-secao.centro { margin-left: auto; margin-right: auto; text-align: center; }
.intro { font-size: clamp(1.06rem, 1rem + 0.35vw, 1.22rem); line-height: 1.65; color: #57524A; -webkit-text-fill-color: #57524A; }
.secao-escura .intro { color: #C3CCDA; -webkit-text-fill-color: #C3CCDA; }

/* --------------------------------------------------------------------------
   Botões  (alvo mínimo de toque: 44px)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 15px 30px;
  font-family: var(--texto); font-size: 0.975rem; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; border: var(--borda-fina) solid transparent; border-radius: var(--raio);
  cursor: pointer; transition: transform 0.22s cubic-bezier(.2,.7,.3,1), background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primario { background-color: #33302B; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; border-color: #33302B; box-shadow: var(--sombra-botao); }
.btn-primario:hover { background-color: #0B1E3D; border-color: #0B1E3D; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; box-shadow: 0 16px 32px -12px rgba(11,30,61,0.45); }

.btn-contorno { background-color: transparent; color: #0B1E3D; -webkit-text-fill-color: #0B1E3D; border-color: #C9C1B2; }
.btn-contorno:hover { border-color: #DABA93; background-color: #FAF6EB; box-shadow: 0 12px 28px -16px rgba(11,30,61,0.28); }

.secao-escura .btn-contorno { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; border-color: #34496B; }
.secao-escura .btn-contorno:hover { border-color: #DABA93; background-color: #10284A; }
.secao-escura .btn-primario { background-color: #DABA93; color: #0B1E3D; -webkit-text-fill-color: #0B1E3D; border-color: #DABA93; box-shadow: 0 14px 30px -12px rgba(0,0,0,0.45); }
.secao-escura .btn-primario:hover { background-color: #EBD8BF; border-color: #EBD8BF; color: #0B1E3D; -webkit-text-fill-color: #0B1E3D; }

.grupo-botoes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

/* --------------------------------------------------------------------------
   Cabeçalho — sempre marinho: a logo é areia e só tem contraste em fundo escuro
   -------------------------------------------------------------------------- */
.cabecalho {
  position: sticky; top: 0; z-index: 90;
  background-color: #0B1E3D; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF;
  border-bottom: 1px solid #1B3357;
}
.cabecalho-interno { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }

.logo { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; padding: 6px 0; text-decoration: none; }
.logo-marca { width: auto; height: 40px; flex: none; }
.logo-texto { display: flex; flex-direction: column; line-height: 1.05; }
.logo-nome { font-family: var(--display); font-size: 1.12rem; font-weight: 500; letter-spacing: 0.005em; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; white-space: nowrap; }
.logo-sufixo { display: block; margin-top: 4px; font-family: var(--texto); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: #DABA93; -webkit-text-fill-color: #DABA93; }
@media (max-width: 400px) { .logo-marca { height: 34px; } .logo-nome { font-size: 1rem; } }

.nav-desktop { display: none; }
@media (min-width: 1040px) {
  .nav-desktop { display: flex; align-items: center; gap: 26px; }
  .btn-menu { display: none !important; }
}
.nav-desktop a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.925rem; font-weight: 500; text-decoration: none;
  color: #E6E9EF; -webkit-text-fill-color: #E6E9EF;
  border-bottom: 2px solid transparent; transition: color 0.18s ease, border-color 0.18s ease;
}
.nav-desktop a:hover { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; border-bottom-color: #DABA93; }
.nav-desktop a[aria-current="page"] { color: #DABA93; -webkit-text-fill-color: #DABA93; border-bottom-color: #DABA93; }
.nav-desktop .btn { min-height: 46px; padding: 11px 22px; font-size: 0.9rem; border-bottom-width: 1px; }

.btn-menu {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; min-width: 46px; padding: 10px 16px;
  background-color: transparent; border: 1px solid #34496B; border-radius: var(--raio);
  color: #FFFFFF; -webkit-text-fill-color: #FFFFFF;
  font-family: var(--texto); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.btn-menu svg { width: 18px; height: 18px; }

/* Menu mobile: overlay de tela cheia com barra própria (independente do header) */
.menu-mobile {
  position: fixed; inset: 0; z-index: 200;
  background-color: #0B1E3D; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF;
  display: none; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.menu-mobile[data-aberto="true"] { display: flex; }
.menu-mobile-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 76px; border-bottom: 1px solid #1B3357;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.menu-mobile-lista { flex: 1; padding: 28px var(--gutter) 40px; }
.menu-mobile-lista ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile-lista li { border-bottom: 1px solid #1B3357; }
.menu-mobile-lista a {
  display: flex; align-items: center; min-height: 60px;
  font-family: var(--display); font-size: 1.32rem; font-weight: 500; text-decoration: none;
  color: #FFFFFF; -webkit-text-fill-color: #FFFFFF;
}
.menu-mobile-lista a[aria-current="page"] { color: #DABA93; -webkit-text-fill-color: #DABA93; }
.menu-mobile-rodape { padding: 0 var(--gutter) 40px; }
.menu-mobile-rodape .btn { width: 100%; }
.menu-mobile-contato { margin-top: 24px; font-size: var(--t-peq); color: #C3CCDA; -webkit-text-fill-color: #C3CCDA; }
.menu-mobile-contato a { color: #EBD8BF; -webkit-text-fill-color: #EBD8BF; }
body[data-menu-aberto="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero — foto em bloco próprio (nunca com texto sobreposto por cima do
   rosto) seguida do bloco de texto. No mobile: foto em cima, texto embaixo,
   nessa ordem no DOM. No desktop: lado a lado, foto à direita via order.
   -------------------------------------------------------------------------- */
.hero {
  background-color: #0B1E3D; color: #E6E9EF; -webkit-text-fill-color: #E6E9EF;
  display: flex; flex-direction: column;
}
.hero-foto-bloco {
  order: 0; width: 100%; aspect-ratio: 4 / 5;
  overflow: hidden; background-color: #071730;
}
.hero-foto-bloco img {
  width: 100%; height: 100%; object-fit: cover; object-position: 90% 22%;
}
.hero-texto-bloco { order: 1; }
.hero-conteudo {
  padding: clamp(40px, 7vw, 56px) var(--gutter) clamp(48px, 7vw, 76px);
}
.hero h1 { font-size: var(--t-hero); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; margin-bottom: 0.4em; font-weight: 500; max-width: 16ch; }
.hero h1 em { font-style: italic; color: #DABA93; -webkit-text-fill-color: #DABA93; }
.hero p { color: #D7DEE9; -webkit-text-fill-color: #D7DEE9; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.24rem); max-width: 50ch; }

@media (min-width: 640px) { .hero-foto-bloco img { object-position: 86% 20%; } }

@media (min-width: 900px) {
  .hero { flex-direction: row; align-items: stretch; min-height: clamp(580px, 84vh, 760px); }
  .hero-foto-bloco { order: 2; width: 44%; aspect-ratio: auto; flex: none; }
  .hero-foto-bloco img { object-position: 92% 24%; }
  .hero-texto-bloco { order: 1; width: 56%; display: flex; align-items: center; }
  /* Lição c: o texto acompanha a coluna do container, nunca cola na borda em telas largas */
  .hero-conteudo { padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); padding-right: clamp(32px, 4vw, 56px); }
}
@media (min-width: 1240px) {
  .hero-foto-bloco { width: 42%; }
  .hero-texto-bloco { width: 58%; }
}

.hero-selo {
  display: block; margin-top: 34px; max-width: 46ch;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.16);
  font-size: var(--t-peq); line-height: 1.75; color: #C7D0DE; -webkit-text-fill-color: #C7D0DE;
}
.hero-selo strong { color: #DABA93; -webkit-text-fill-color: #DABA93; font-weight: 600; }

.hero-interno {
  padding-top: clamp(64px, 9vw, 104px); padding-bottom: clamp(56px, 8vw, 96px);
  background-image: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(218,186,147,0.10), transparent 60%),
                     linear-gradient(165deg, #0E2344 0%, #0B1E3D 46%, #081527 100%);
}
.hero-interno .intro { margin-top: 4px; }

/* --------------------------------------------------------------------------
   Grades e cartões
   -------------------------------------------------------------------------- */
.grade { display: grid; gap: clamp(20px, 3vw, 36px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grade-2, .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cartao {
  display: flex; flex-direction: column; height: 100%;
  background-color: #FAF6EB; color: #33302B; -webkit-text-fill-color: #33302B;
  border: 1px solid #DBCFAE; border-radius: var(--raio);
  padding: clamp(30px, 3.4vw, 42px);
  box-shadow: var(--sombra-cartao);
  transition: border-color 0.28s ease, transform 0.32s cubic-bezier(.2,.7,.3,1), box-shadow 0.32s ease;
}
.secao-osso .cartao { background-color: #F3ECDC; }
.cartao h3 { margin-bottom: 0.55em; }
.cartao p { color: #57524A; -webkit-text-fill-color: #57524A; font-size: 0.985rem; }

a.cartao { text-decoration: none; }
a.cartao:hover { border-color: #DABA93; transform: translateY(-5px); box-shadow: var(--sombra-cartao-hover); }
.cartao-link {
  margin-top: auto; padding-top: 24px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 0.9rem; font-weight: 600; color: #0B1E3D; -webkit-text-fill-color: #0B1E3D;
}
.cartao-link::after { content: "→"; transition: transform 0.2s ease; }
a.cartao:hover .cartao-link::after { transform: translateX(5px); }

.cartao-escuro { background-color: #10284A; border-color: #1B3357; color: #D5DBE5; -webkit-text-fill-color: #D5DBE5; box-shadow: none; }
.cartao-escuro h3 { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.cartao-escuro p { color: #C3CCDA; -webkit-text-fill-color: #C3CCDA; }

/* Lista de processo — numerada porque a ordem carrega informação real */
.processo { display: grid; gap: clamp(28px, 4vw, 44px); grid-template-columns: 1fr; counter-reset: etapa; list-style: none; margin: 0; padding: 0; }
@media (min-width: 860px) { .processo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.processo li { counter-increment: etapa; border-top: 1px solid #DABA93; padding-top: 26px; }
.secao-escura .processo li { border-top-color: #34496B; }
.processo li::before {
  content: counter(etapa, decimal-leading-zero);
  display: block; font-family: var(--texto); font-size: var(--t-mini); font-weight: 700; letter-spacing: 0.14em;
  color: #7A6A52; -webkit-text-fill-color: #7A6A52; margin-bottom: 16px;
}
.secao-escura .processo li::before { color: #DABA93; -webkit-text-fill-color: #DABA93; }
.processo h3 { font-size: 1.22rem; }

/* --------------------------------------------------------------------------
   Bloco de resposta direta (featured snippet / citação por IA)
   -------------------------------------------------------------------------- */
.resposta-direta {
  background-color: #E8DEC7; color: #33302B; -webkit-text-fill-color: #33302B;
  border-left: 3px solid #DABA93; border-radius: 0 var(--raio) var(--raio) 0;
  padding: clamp(28px, 3.6vw, 38px); margin: 0 0 42px;
}
.resposta-direta p { font-size: 1.06rem; line-height: 1.62; color: #33302B; -webkit-text-fill-color: #33302B; }
.resposta-direta .sobrancelha { margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   Conteúdo editorial (artigos e páginas de área)
   -------------------------------------------------------------------------- */
.artigo-corpo { max-width: 720px; }
.artigo-corpo h2 { margin-top: 2.3em; padding-top: 0.1em; }
.artigo-corpo h2:first-child { margin-top: 0; }
.artigo-corpo h3 { margin-top: 1.8em; }
.artigo-corpo ul, .artigo-corpo ol { margin: 0 0 1.3em; padding-left: 1.15em; }
.artigo-corpo li { margin-bottom: 0.6em; }
.artigo-corpo li::marker { color: #DABA93; }
.artigo-corpo strong { font-weight: 600; color: #0B1E3D; -webkit-text-fill-color: #0B1E3D; }
.artigo-corpo a { font-weight: 500; }

.lista-provas {
  background-color: #FAF6EB; border: 1px solid #DBCFAE; border-radius: var(--raio);
  padding: clamp(28px, 3.6vw, 40px); margin: 42px 0;
  color: #33302B; -webkit-text-fill-color: #33302B;
}
.lista-provas h3 { margin-top: 0; font-size: 1.16rem; margin-bottom: 0.8em; }
.lista-provas ul { list-style: none; padding: 0; margin: 0; }
.lista-provas li { position: relative; padding-left: 28px; margin-bottom: 0.85em; font-size: 0.98rem; }
.lista-provas li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #8A7350; -webkit-text-fill-color: #8A7350; font-weight: 700; }

.meta-artigo {
  font-size: var(--t-peq); line-height: 1.7; color: #C3CCDA; -webkit-text-fill-color: #C3CCDA; margin-top: 22px;
}

/* Caixa de autoria — sinal de E-E-A-T em conteúdo YMYL */
.autoria {
  display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start;
  background-color: #0B1E3D; color: #D5DBE5; -webkit-text-fill-color: #D5DBE5;
  border-radius: var(--raio); padding: clamp(32px, 4vw, 46px); margin: 52px 0 0;
}
@media (min-width: 620px) { .autoria { grid-template-columns: 108px 1fr; gap: 32px; } }
.autoria-foto { position: relative; }
.autoria-foto img { width: 108px; height: 108px; object-fit: cover; object-position: 50% 12%; border-radius: 50%; }
.autoria-foto::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(218,186,147,0.6); border-radius: 50%; }
.autoria h3 { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-size: 1.24rem; margin-bottom: 0.3em; }
.autoria .oab { display: block; font-family: var(--texto); font-size: var(--t-mini); letter-spacing: 0.12em; text-transform: uppercase; color: #DABA93; -webkit-text-fill-color: #DABA93; margin-bottom: 18px; }
.autoria p { color: #C3CCDA; -webkit-text-fill-color: #C3CCDA; font-size: 0.96rem; }
.autoria a { color: #EBD8BF; -webkit-text-fill-color: #EBD8BF; }

.aviso-informativo {
  border-top: 1px solid #DBCFAE; margin-top: 42px; padding-top: 24px;
  font-size: var(--t-peq); line-height: 1.6; color: #6B655C; -webkit-text-fill-color: #6B655C;
}

/* Trilha de navegação */
.trilha { background-color: #F3ECDC; color: #6B655C; -webkit-text-fill-color: #6B655C; border-bottom: 1px solid #E7E1D6; }
.trilha ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; margin: 0; padding: 14px 0; font-size: var(--t-peq); }
.trilha li:not(:last-child)::after { content: "/"; margin-left: 8px; color: #B9B1A2; -webkit-text-fill-color: #B9B1A2; }
.trilha a { display: inline-flex; align-items: center; min-height: 30px; color: #6B655C; -webkit-text-fill-color: #6B655C; text-decoration: none; }
.trilha a:hover { text-decoration: underline; text-decoration-color: #DABA93; }
.trilha [aria-current="page"] { color: #33302B; -webkit-text-fill-color: #33302B; }

/* --------------------------------------------------------------------------
   FAQ (acordeão nativo)
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid #DBCFAE; }
.faq details { border-bottom: 1px solid #DBCFAE; background-color: transparent; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 60px; padding: 24px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: clamp(1.06rem, 1rem + 0.35vw, 1.2rem); font-weight: 500;
  color: #0B1E3D; -webkit-text-fill-color: #0B1E3D;
  transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 13px; height: 13px; margin-right: 4px;
  border-right: 2px solid #8A7350; border-bottom: 2px solid #8A7350;
  transform: rotate(45deg) translateY(-3px); transition: transform 0.28s cubic-bezier(.2,.7,.3,1);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq summary:hover { color: #33302B; -webkit-text-fill-color: #33302B; }
.faq-resposta { padding: 0 0 30px; max-width: 68ch; }
.faq-resposta p { color: #57524A; -webkit-text-fill-color: #57524A; font-size: 0.99rem; }

.secao-escura .faq { border-top-color: #1B3357; }
.secao-escura .faq details { border-bottom-color: #1B3357; }
.secao-escura .faq summary { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.secao-escura .faq summary::after { border-color: #DABA93; }
.secao-escura .faq-resposta p { color: #C3CCDA; -webkit-text-fill-color: #C3CCDA; }

/* --------------------------------------------------------------------------
   Cartão de mapa (sem iframe: abre o Google Maps em nova aba). "Interativo"
   aqui significa: responde a hover/toque com zoom e pino animado, e a ação
   real é abrir a localização no Google Maps — sem depender de rede para
   renderizar, então funciona igual publicado ou testado offline.
   -------------------------------------------------------------------------- */
.mapa-cartao {
  display: block; position: relative; overflow: hidden;
  border: 1px solid #DBCFAE; border-radius: var(--raio); text-decoration: none;
  background-color: #EDE7D8; color: #33302B; -webkit-text-fill-color: #33302B;
  min-height: 300px;
  box-shadow: var(--sombra-cartao);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.mapa-cartao:hover, .mapa-cartao:focus-visible { border-color: #DABA93; box-shadow: var(--sombra-cartao-hover); }
.mapa-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: scale(1); transform-origin: 54% 42%;
  transition: transform 0.6s cubic-bezier(.2,.7,.3,1);
}
.mapa-cartao:hover .mapa-svg, .mapa-cartao:focus-visible .mapa-svg { transform: scale(1.08); }
.mapa-pulso {
  transform-origin: center;
  animation: mapa-pulsar 2.6s ease-out infinite;
}
@keyframes mapa-pulsar {
  0%   { transform: scale(0.5); opacity: 0.55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-pulso { animation: none; opacity: 0; }
  .mapa-svg { transition: none; }
}
.mapa-legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(11,30,61,0.97) 0%, rgba(11,30,61,0.94) 70%, rgba(11,30,61,0.8) 100%);
  color: #FFFFFF; -webkit-text-fill-color: #FFFFFF;
  padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px;
}
.mapa-legenda span { font-size: 0.92rem; line-height: 1.45; }
.mapa-legenda strong { display: block; font-weight: 600; color: #DABA93; -webkit-text-fill-color: #DABA93; font-size: var(--t-mini); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 5px; }
.mapa-legenda em { font-style: normal; flex: none; font-size: 0.86rem; font-weight: 600; color: #EBD8BF; -webkit-text-fill-color: #EBD8BF; transition: transform 0.25s ease; }
.mapa-cartao:hover .mapa-legenda em, .mapa-cartao:focus-visible .mapa-legenda em { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Blocos de contato e chamada final
   -------------------------------------------------------------------------- */
.canais { display: grid; gap: 20px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .canais { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.canal {
  display: flex; align-items: flex-start; gap: 18px; min-height: 44px;
  padding: 26px 26px; text-decoration: none;
  background-color: #FAF6EB; border: 1px solid #DBCFAE; border-radius: var(--raio);
  color: #33302B; -webkit-text-fill-color: #33302B;
  box-shadow: var(--sombra-cartao);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.canal:hover { border-color: #DABA93; transform: translateY(-3px); box-shadow: var(--sombra-cartao-hover); }
.canal svg { flex: none; width: 22px; height: 22px; margin-top: 3px; color: #8A7350; }
.canal .rotulo { display: block; font-size: var(--t-mini); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #7A6A52; -webkit-text-fill-color: #7A6A52; margin-bottom: 5px; }
.canal .valor { font-weight: 500; color: #0B1E3D; -webkit-text-fill-color: #0B1E3D; word-break: break-word; }

.chamada-final { background-color: #071730; color: #D5DBE5; -webkit-text-fill-color: #D5DBE5; text-align: center; }
.chamada-final h2 { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.chamada-final p { color: #C3CCDA; -webkit-text-fill-color: #C3CCDA; max-width: 58ch; margin-left: auto; margin-right: auto; }
.chamada-final .grupo-botoes { justify-content: center; }

.cartao-calculadora {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  background-color: #10284A; color: #D5DBE5; -webkit-text-fill-color: #D5DBE5;
  border: 1px solid #1B3357; border-left: 3px solid #DABA93; border-radius: var(--raio);
  padding: clamp(24px, 3vw, 32px); margin-top: clamp(34px, 4vw, 48px); text-decoration: none;
}
.cartao-calculadora h3 { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; margin-bottom: 0.3em; }
.cartao-calculadora p { color: #C3CCDA; -webkit-text-fill-color: #C3CCDA; font-size: 0.95rem; max-width: 54ch; }
.cartao-calculadora .cartao-link { color: #EBD8BF; -webkit-text-fill-color: #EBD8BF; }
.cartao-calculadora:hover .cartao-link::after { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape { background-color: #071730; color: #B7C2D2; -webkit-text-fill-color: #B7C2D2; padding-top: clamp(52px, 6vw, 78px); padding-bottom: 34px; }
.rodape-grade { display: grid; gap: clamp(36px, 5vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 780px) { .rodape-grade { grid-template-columns: 1.15fr 1fr 1fr; } }
.rodape h2, .rodape h3 { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-family: var(--texto); font-size: var(--t-mini); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 20px; }
.rodape .logo { margin-bottom: 24px; }
.rodape p { font-size: 0.92rem; color: #A9B5C7; -webkit-text-fill-color: #A9B5C7; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 2px; }
.rodape a { display: inline-flex; align-items: center; min-height: 40px; font-size: 0.92rem; color: #D5DBE5; -webkit-text-fill-color: #D5DBE5; text-decoration: none; }
.rodape a:hover { color: #DABA93; -webkit-text-fill-color: #DABA93; text-decoration: underline; text-decoration-color: #DABA93; }
.rodape-legal { border-top: 1px solid #14294A; margin-top: clamp(38px, 4vw, 54px); padding-top: 26px; }
.rodape-legal p { font-size: 0.82rem; line-height: 1.65; color: #8FA0B8; -webkit-text-fill-color: #8FA0B8; max-width: 78ch; }
.rodape-oab { font-weight: 600; color: #DABA93 !important; -webkit-text-fill-color: #DABA93 !important; }

/* --------------------------------------------------------------------------
   Botões flutuantes (alvo mínimo 44px)
   -------------------------------------------------------------------------- */
.flutuantes { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 12px; }
.flutuante {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; min-width: 44px; min-height: 44px;
  border-radius: 50%; text-decoration: none; box-shadow: 0 6px 20px rgba(7, 23, 48, 0.28);
  transition: transform 0.18s ease;
}
.flutuante:hover { transform: scale(1.06); }
.flutuante svg { width: 26px; height: 26px; }
.flutuante-whatsapp { background-color: #128C7E; color: #FFFFFF; }
.flutuante-instagram { background-color: #0B1E3D; color: #DABA93; border: 1px solid #1B3357; }

/* --------------------------------------------------------------------------
   Revelação em rolagem (desativada com prefers-reduced-motion)
   -------------------------------------------------------------------------- */
.revelar { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js .revelar { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
  html.js .revelar.visivel { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Landing page — direção clara (osso), separada do institucional
   -------------------------------------------------------------------------- */
.lp .cabecalho { position: static; }
.lp-hero { background-color: #0B1E3D; color: #E6E9EF; -webkit-text-fill-color: #E6E9EF; padding-top: clamp(52px, 7vw, 88px); padding-bottom: clamp(52px, 7vw, 88px); }
.lp-hero h1 { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-size: var(--t-hero); max-width: 18ch; }
.lp-hero p { color: #C9D2DF; -webkit-text-fill-color: #C9D2DF; max-width: 56ch; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); }
.lp-secao-clara { background-color: #E8DEC7; color: #33302B; -webkit-text-fill-color: #33302B; }
.lp-dor { background-color: #FAF6EB; border: 1px solid #DBCFAE; border-top: 3px solid #DABA93; border-radius: var(--raio); padding: clamp(24px, 3vw, 32px); height: 100%; }
.lp-dor h3 { margin-bottom: 0.4em; }
.lp-dor p { color: #57524A; -webkit-text-fill-color: #57524A; font-size: 0.97rem; }
.faixa-cta { background-color: #33302B; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; padding: clamp(34px, 4.5vw, 52px) 0; text-align: center; }
.faixa-cta h2 { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); margin-bottom: 0.5em; }
.faixa-cta p { color: #E4E0D9; -webkit-text-fill-color: #E4E0D9; max-width: 56ch; margin-left: auto; margin-right: auto; }
.faixa-cta .btn-primario { background-color: #DABA93; color: #33302B; -webkit-text-fill-color: #33302B; border-color: #DABA93; }
.faixa-cta .btn-primario:hover { background-color: #EBD8BF; border-color: #EBD8BF; color: #33302B; -webkit-text-fill-color: #33302B; }
.rodape-enxuto { background-color: #071730; color: #A9B5C7; -webkit-text-fill-color: #A9B5C7; padding: clamp(40px, 5vw, 60px) 0 32px; text-align: center; }
.rodape-enxuto img { height: 38px; width: auto; margin: 0 auto 22px; }
.rodape-enxuto p { font-size: 0.85rem; line-height: 1.65; color: #8FA0B8; -webkit-text-fill-color: #8FA0B8; max-width: 70ch; margin-left: auto; margin-right: auto; }
.rodape-enxuto a { color: #D5DBE5; -webkit-text-fill-color: #D5DBE5; }

/* --------------------------------------------------------------------------
   Impressão
   -------------------------------------------------------------------------- */
@media print {
  .cabecalho, .flutuantes, .menu-mobile, .chamada-final, .faixa-cta { display: none !important; }
  body { background-color: #FFFFFF; color: #000000; -webkit-text-fill-color: #000000; }
}