/* ==========================================================================
   3º Registro de Imóveis de Goiânia — Design System V3
   Redesign completo da home. Referência: Apple, Stripe, Linear, Vercel.
   Preto/cinza institucional (cores da marca). Sóbrio, espaçado, premium.
   ========================================================================== */

/* ==========================================================================
   Paleta institucional V4 — cinza, branco e preto (cores da marca: monograma
   cinza #5D5E5E + preto/branco). Substitui o preto+dourado anterior.
   --------------------------------------------------------------------------
   Os componentes usam tokens SEMÂNTICOS (--ink, --text, --muted, --line,
   --surface, --card-bg, --accent...). Em áreas escuras (navbar, hero, banner
   das páginas internas, faixa das vagas, rodapé) os mesmos tokens são
   redefinidos logo abaixo, em ".site-nav, .hero-cinematic, ...", então o
   mesmo componente funciona sobre fundo claro ou escuro sem regra duplicada.
   ========================================================================== */
:root {
  /* Primitivos */
  --black:#0B0B0B;
  --graphite:#161616;
  --graphite-2:#222222;
  --gray-700:#3A3A3A;
  --gray-600:#5D5E5E;   /* cinza oficial do monograma */
  --gray-500:#6B6B6B;
  --gray-400:#9A9A9A;
  --gray-300:#CFCFCF;
  --gray-200:#E3E3E3;
  --gray-100:#F1F1F1;
  --gray-50:#F7F7F7;
  --white:#FFFFFF;

  /* Semânticos — contexto claro (padrão) */
  --ink:#111111;          /* títulos */
  --text:#474747;         /* texto corrido — 9:1 sobre branco */
  --muted:#6B6B6B;        /* texto secundário — 5.3:1 sobre branco */
  --line:#E3E3E3;
  --line-strong:#CFCFCF;
  --surface:#F4F4F4;      /* seções alternadas / campos */
  --card-bg:#FFFFFF;
  --page-bg:#FFFFFF;
  --accent:#111111;       /* ícones, friso, estado ativo */
  --accent-hover:#5D5E5E;
  --accent-soft:#F1F1F1;  /* fundo das caixas de ícone */
  --accent-contrast:#FFFFFF; /* texto sobre --accent */
  --accent-press:#333333;    /* hover de botão preenchido */

  /* Nomes legados (ainda citados em alguns pontos) */
  --blue-900:#0B0B0B;
  --blue-800:#161616;
  --blue-700:#222222;
  --blue-600:#5D5E5E;
  --blue-500:#5D5E5E;
  --blue-400:#9A9A9A;
  --blue-100:#E3E3E3;

  /* Tipografia — Inter para interface/dados, Fraunces para títulos institucionais */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-editorial: "Fraunces", "Inter", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Métricas */
  --container: 1220px;
  --container-narrow: 860px;
  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 14px;

  /* Sombras — neutras e suaves, adequadas a superfícies claras */
  --shadow-xs: 0 1px 2px rgba(17,17,17,.05);
  --shadow-sm: 0 1px 2px rgba(17,17,17,.04), 0 6px 18px -10px rgba(17,17,17,.16);
  --shadow-md: 0 2px 4px rgba(17,17,17,.04), 0 18px 38px -20px rgba(17,17,17,.28);
  --shadow-lg: 0 4px 8px rgba(17,17,17,.05), 0 28px 56px -26px rgba(17,17,17,.34);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Contexto escuro: mesmos tokens, valores invertidos */
.site-nav, .hero-cinematic, .page-banner, .site-footer, .section--dark, .section--blue,
.vaga-card__band, .structure-carousel__viewport, .a11y-bar, .lightbox {
  --ink:#FFFFFF;
  --text:#D2D2D2;
  --muted:#A8A8A8;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.24);
  --surface:#1C1C1C;
  --card-bg:#1A1A1A;
  --accent:#FFFFFF;
  --accent-hover:#D6D6D6;
  --accent-soft:rgba(255,255,255,.1);
  --accent-contrast:#111111;
  --accent-press:#E4E4E4;
}
/* Painéis claros que moram dentro da navbar escura (dropdown e busca) */
.nav-drop__panel, .nav-search__panel {
  --ink:#111111; --text:#474747; --muted:#6B6B6B; --line:#E3E3E3; --line-strong:#CFCFCF;
  --surface:#F4F4F4; --card-bg:#FFFFFF; --accent:#111111; --accent-hover:#5D5E5E;
  --accent-soft:#F1F1F1; --accent-contrast:#FFFFFF;
}

/* --- Reset / Base -------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  margin:0; font-family:var(--font-body); color:var(--text);
  font-size:1rem; line-height:1.7;
  /* URLs longas (uma "palavra" só, sem espaços) não eram quebradas pelo
     navegador e esticavam a página inteira em telas estreitas, criando rolagem
     horizontal. Só quebra o que não caberia de outro jeito. */
  overflow-wrap:break-word;

  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-color:var(--page-bg);
}

h1,h2,h3,h4,h5 {
  font-family:var(--font-display); color:var(--ink); font-weight:800;
  line-height:1.15; letter-spacing:-.025em; margin:0 0 .5em;
}
h1,h2 { font-family:var(--font-editorial); font-weight:600; letter-spacing:-.01em; }

p { margin:0 0 1rem; }
a { color:var(--accent); text-decoration:none; transition:color .2s; }
a:hover { color:var(--accent-hover); }
/* Links dentro de texto corrido: sublinhados, já que têm a mesma cor do texto */
main p a:not([class]), main li a:not([class]), .form-note a { text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--line-strong); }
main p a:not([class]):hover, main li a:not([class]):hover, .form-note a:hover { text-decoration-color:currentColor; }
img,svg { max-width:100%; }
::selection { background:var(--blue-100); color:var(--ink); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.shell { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.shell--narrow { max-width:var(--container-narrow); }

/* --- Utility --------------------------------------------------------------- */
.text-center { text-align:center; }
.mt-0 { margin-top:0; }
.actions-row { display:flex; flex-wrap:wrap; gap:.9rem; }
.glass {
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.6);
}

/* --- Section patterns -------------------------------------------------------- */
.section { padding-block:clamp(5rem,10vw,8.5rem); }
.section--blue { background:var(--blue-800); color:rgba(255,255,255,.88); }
.section--blue h2,.section--blue h3,.section--blue h4 { color:#fff; }
.section--blue p { color:rgba(255,255,255,.72); }
.section--blue a { color:var(--blue-100); }
.section--gray { background:var(--surface); }
.section--gray + .section--gray { border-top:1px solid var(--line); }
.section--dark { background:var(--blue-900); color:rgba(255,255,255,.85); }
.section--dark h2,.section--dark h3 { color:#fff; }

.section-head { max-width:640px; margin-bottom:3.8rem; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head h2 { font-size:clamp(1.9rem,3.6vw,2.6rem); letter-spacing:-.03em; }
.section-head p { color:var(--text); font-size:1.08rem; margin:0; }
.section--blue .section-head p,.section--dark .section-head p { color:rgba(255,255,255,.68); }

.section-divider { display:flex; align-items:center; justify-content:center; gap:.7rem; margin:.9rem 0 1.2rem; }
.section-head:not(.center) .section-divider { justify-content:flex-start; }
.section-divider__line { width:34px; height:1px; background:var(--line-strong); }
.section-divider__icon {
  width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  background:var(--ink); border:1px solid var(--ink); color:#fff; font-size:.82rem; flex:none;
  box-shadow:0 6px 14px -6px rgba(17,17,17,.5);
}

.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.74rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gray-600); margin:0 0 .8rem;
}
.section--blue .eyebrow,.section--dark .eyebrow,.page-banner .eyebrow { color:var(--muted); }
.gold-text { color:var(--gray-600); }
.site-footer .gold-text,.page-banner .gold-text,.section--dark .gold-text { color:inherit; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.75rem; border-radius:var(--radius-sm);
  font-weight:700; font-size:.97rem; letter-spacing:.01em; border:1px solid transparent;
  cursor:pointer; transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), background .35s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn-ripple {
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.5); transform:translate(-50%,-50%) scale(0);
  pointer-events:none; animation:btnRipple .55s var(--ease) forwards;
}
.btn--secondary .btn-ripple,.btn--white .btn-ripple { background:rgba(17,17,17,.12); }
@keyframes btnRipple { to { transform:translate(-50%,-50%) scale(22); opacity:0; } }
.btn-spinner {
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:btnSpin .7s linear infinite;
}
.btn--secondary .btn-spinner { border-color:rgba(17,17,17,.2); border-top-color:var(--ink); }
@keyframes btnSpin { to { transform:rotate(360deg); } }
.btn.is-loading { cursor:progress; opacity:.85; }
.btn--primary {
  background:var(--accent);
  color:var(--accent-contrast); border-color:var(--accent);
  box-shadow:0 2px 6px rgba(17,17,17,.22), 0 14px 28px -12px rgba(17,17,17,.45);
}
.btn--primary:hover {
  background:var(--accent-press);
  color:var(--accent-contrast); transform:translateY(-2px); border-color:var(--accent-press);
  box-shadow:0 4px 10px rgba(17,17,17,.28), 0 20px 36px -14px rgba(17,17,17,.5);
}
.btn--secondary {
  background:var(--card-bg); color:var(--ink); border:2px solid var(--ink);
  box-shadow:0 1px 2px rgba(17,17,17,.06);
}
.btn--secondary:hover { border-color:var(--ink); background:var(--ink); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(17,17,17,.4); }
.btn--white { background:#fff; color:#111; box-shadow:0 14px 32px rgba(16,17,18,.14); }
.btn--white:hover { background:#fff; transform:translateY(-2px); box-shadow:0 20px 44px rgba(16,17,18,.18); }
.btn--ghost-white { background:transparent; color:#fff; border-color:rgba(255,255,255,.32); }
.btn--ghost-white:hover { border-color:#fff; background:rgba(255,255,255,.08); color:#fff; transform:translateY(-2px); }
.btn--sm { padding:.6rem 1.1rem; font-size:.86rem; }
.btn--full { width:100%; justify-content:center; }
.btn--primary:active,.btn--secondary:active,.btn--white:active,.btn--ghost-white:active { transform:translateY(0); box-shadow:var(--shadow-xs); }

/* --- Navbar -------------------------------------------------------------- */
.site-nav {
  position:fixed; top:0; left:0; right:0; width:100%; z-index:1000;
  background:rgba(10,10,10,.28);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-block:1.1rem;
  transition:background-color .35s var(--ease), padding-block .35s var(--ease), box-shadow .35s var(--ease), top .3s var(--ease);
}
.site-nav.is-scrolled {
  background:rgba(11,11,11,.96);
  border-bottom-color:rgba(255,255,255,.1);
  padding-block:.75rem;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.site-nav .shell { max-width:min(92vw,1600px); }

.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; }
.brand { display:flex; align-items:center; gap:.65rem; min-width:0; flex:1 1 auto; }
.brand__seal { height:44px; width:auto; flex:none; filter:brightness(0) invert(1); }
.brand__text { display:flex; flex-direction:column; min-width:0; }
.brand__name {
  font-weight:700; font-size:.96rem; color:#fff; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand__name--short { display:none; }
.brand__sub { display:block; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-400); font-weight:600; margin-top:.15rem; }
.nav-links { display:flex; align-items:center; gap:.15rem; list-style:none; margin:0; padding:0; flex:none; }
.nav-links a {
  position:relative; display:block; padding:.6rem .85rem; border-radius:0;
  font-weight:500; font-size:.9rem; color:rgba(255,255,255,.72);
  white-space:nowrap; /* impede que um item ("Em breve") quebre em 2 linhas e
                         estufe a altura da navbar em telas intermediárias */
  transition:color .3s var(--ease);
}
.nav-links a::after {
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.15rem; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover { color:#fff; }
.nav-drop__panel a::after { display:none; }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-links a.active { color:#fff; font-weight:600; }
.nav-links a.active::after { transform:scaleX(1); }

.nav-cta { display:flex; align-items:center; gap:.45rem; flex:none; }
.nav-search { position:relative; }
.nav-search-toggle {
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:none; border:0; color:rgba(255,255,255,.8); font-size:1.05rem; cursor:pointer;
  transition:background-color .25s var(--ease), transform .2s var(--ease), color .25s var(--ease);
}
.nav-search-toggle:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-search-toggle:active { transform:scale(.92); }
.nav-search__panel {
  position:absolute; top:calc(100% + 12px); right:0; width:320px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav-search.open .nav-search__panel { opacity:1; visibility:visible; transform:translateY(0); }
.nav-search .search-bar input { box-shadow:var(--shadow-md); }
.nav-toggle { display:none; background:none; border:0; color:#fff; font-size:1.5rem; cursor:pointer; padding:.2rem .4rem; }

/* Dropdown */
.nav-drop { position:relative; }
.nav-drop__panel {
  position:absolute; top:calc(100% + 8px); left:0; min-width:220px;
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:.5rem; list-style:none; margin:0;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav-drop:hover .nav-drop__panel,
.nav-drop:focus-within .nav-drop__panel { opacity:1; visibility:visible; transform:translateY(0); }
.nav-drop__panel a { display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:8px; color:var(--text); font-weight:500; font-size:.9rem; transition:background-color .2s var(--ease), color .2s var(--ease), padding-left .25s var(--ease); }
.nav-drop__panel a:hover { background:var(--surface); color:var(--ink); padding-left:.9rem; }
.nav-drop__panel i { color:var(--ink); font-size:1.05rem; }
.nav-drop > a i.chev { font-size:.65rem; margin-left:.15rem; }

/* Mobile drawer */
.nav-mobile { display:none; }

/* --- Search bar (uso geral, fundo claro) ---------------------------------- */
.search-bar { position:relative; max-width:480px; }
.search-bar input {
  width:100%; padding:.75rem 1rem .75rem 2.8rem;
  font-size:.94rem; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--card-bg); color:var(--ink);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease); box-shadow:var(--shadow-xs);
}
.search-bar input::placeholder { color:var(--muted); }
.search-bar input:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(17,17,17,.08); }
.search-bar .search-icon { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--muted); }
.search-results-dropdown {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); max-height:320px; overflow-y:auto;
  display:none; z-index:10;
}
.search-results-dropdown.show { display:block; }
.search-result-item {
  display:block; padding:.8rem 1rem; border-bottom:1px solid var(--line);
  color:var(--ink); transition:background .15s;
}
.search-result-item:last-child { border-bottom:0; }
.search-result-item:hover,.search-result-item.is-active { background:var(--surface); }
.search-result-item--loading,.search-result-item--error { color:var(--muted); font-size:.88rem; cursor:default; }
.search-result-item--loading:hover,.search-result-item--error:hover { background:none; }
.search-result-item strong { display:block; font-size:.92rem; }
.search-result-item span { font-size:.82rem; color:var(--muted); }
/* Selo de tipo (Serviço/Página/FAQ) -- resultados de tipos diferentes agora
   vêm misturados e ordenados por relevância (04/09/2026), então cada item
   ganha essa etiqueta discreta pra deixar claro o que é cada um. */
.search-result-item__tag {
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-600); margin-bottom:.2rem;
}


/* ==========================================================================
   HOMEPAGE — componentes dedicados
   ========================================================================== */

/* --- 1. Hero cinematográfico — foto, texto e atalhos como uma composição única --------- */
/* O hero ocupa a tela inteira em monitores altos, mas NUNCA prende o conteúdo
   numa altura fixa: em notebooks (telas largas e baixas, ex.: 1366x768) o
   título, os botões e o "Acesso rápido" não cabiam em 100dvh e acabavam se
   sobrepondo. Usando min-height + coluna flex, a seção cresce quando o
   conteúdo precisa de mais espaço e o Acesso rápido desce junto, em fluxo
   normal, em vez de ficar ancorado por cima. O padding-top reserva a altura
   da navbar fixa, que antes cobria o topo do título nas telas baixas. */
.hero-cinematic {
  position:relative; display:flex; flex-direction:column;
  overflow:hidden; background:var(--ink);
  min-height:100vh; /* fallback */
  min-height:100svh;
  min-height:100dvh;
  padding-top:7rem;
}
.hero-cinematic__bg { position:absolute; inset:0; }
.hero-cinematic__bg img { width:100%; height:100%; object-fit:cover; object-position:50% 32%; display:block; }
.hero-cinematic__scrim {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(10,10,11,.32) 0%,
    rgba(10,10,11,.1) 30%,
    transparent 50%,
    rgba(10,10,11,.2) 70%,
    rgba(10,10,11,.72) 100%
  );
}
.hero-cinematic__scrim-left {
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,6,7,.55) 0%, rgba(6,6,7,.15) 42%, transparent 62%);
}
/* margin-block:auto centraliza o conteúdo no espaço que sobra acima do
   Acesso rápido (mesmo efeito visual de antes em telas altas), mas sem impedir
   que a seção cresça quando o espaço acaba. */
.hero-cinematic__grid { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3rem; margin-block:auto; width:100%; }
.hero-cinematic__content { position:relative; z-index:2; color:#fff; max-width:38rem; padding-bottom:2.5rem; }
.hero-cinematic__eyebrow {
  color:rgba(255,255,255,.82); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  padding:.4rem .9rem; border-radius:999px;
}
.hero-cinematic__title {
  font-family:var(--font-editorial); font-weight:600; font-size:clamp(2.3rem,5vw,4rem);
  line-height:1.1; letter-spacing:-.02em; color:#fff; margin:1.2rem 0 1.2rem;
}
.hero-cinematic__lead { font-size:1.14rem; color:rgba(255,255,255,.88); line-height:1.7; max-width:30rem; margin-bottom:2.2rem; }
.hero-cinematic__actions { display:flex; flex-wrap:wrap; gap:.9rem; }
.hero-cinematic__actions .btn { padding:1rem 1.85rem; font-size:.98rem; }

/* Card lateral — compacto de propósito (só 3 itens, sem descrição longa) para não competir com o título */
.hero-info-card {
  position:relative; z-index:2; width:300px; flex:none;
  background:rgba(17,17,17,.55); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg);
  padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:1.3rem;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.hero-info-card__item { display:flex; gap:.9rem; align-items:flex-start; }
.hero-info-card__item + .hero-info-card__item { padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.1); }
.hero-info-card__item i { font-size:1.15rem; color:var(--accent); flex:none; margin-top:.15rem; }
.hero-info-card__item strong { display:block; font-size:.86rem; color:#fff; font-weight:600; margin-bottom:.25rem; }
.hero-info-card__item span { font-size:.8rem; color:rgba(255,255,255,.68); line-height:1.5; }

/* TESTE: oculta temporariamente o .hero-info-card (card "Segurança jurídica" /
   "Atendimento especializado") e faz o grid do Hero ocupar 1 coluna só, sem
   deixar vazio onde o card estava. Nada foi apagado: os estilos do
   .hero-info-card acima continuam intactos.
   Para reverter: remova a classe "hero-cinematic--card-hidden" da <section
   class="hero-cinematic"> em templates/pages/home.html. */
.hero-cinematic--card-hidden .hero-info-card { display:none; }
.hero-cinematic--card-hidden .hero-cinematic__grid { grid-template-columns:1fr; }


/* Atalhos — painel compacto: título+descrição únicos acima da faixa (não por item, pra não encher a barra) */
.quickbar-panel {
  background:rgba(17,17,17,.5); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg);
  padding:1.4rem 1.6rem 0;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.45);
}
.quickbar-panel__head { display:flex; justify-content:center; text-align:center; padding-bottom:1.1rem; }
.quickbar-panel__head strong { font-size:.98rem; font-weight:700; color:#fff; }
.quick-strip {
  position:relative; display:flex; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.1); border-radius:0;
  overflow:hidden; background:transparent;
}
.quick-strip a {
  position:relative;
  flex:1 1 0; min-width:180px; display:flex; align-items:center; justify-content:center; gap:.65rem;
  padding:1.3rem 1rem; font-weight:600; font-size:.9rem; color:#fff;
  border-right:1px solid rgba(255,255,255,.16);
  transition:background-color .3s var(--ease);
}
.quick-strip a:last-child { border-right:0; }
.quick-strip a::after {
  content:""; position:absolute; left:1.2rem; right:1.2rem; bottom:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:center;
  transition:transform .3s var(--ease);
}
.quick-strip a i { color:var(--accent); font-size:1.05rem; transition:transform .3s var(--ease); }
.quick-strip a:hover { background:rgba(255,255,255,.06); }
.quick-strip a:hover::after { transform:scaleX(1); }
.quick-strip a:hover i { transform:translateY(-1px); }

/* Em fluxo normal (não mais absoluto): margin-top:auto mantém o Acesso rápido
   colado na base enquanto sobra espaço e, quando não sobra, ele simplesmente
   fica abaixo do conteúdo em vez de cobri-lo. */
.hero-cinematic__quickbar { position:relative; z-index:3; margin-top:auto; padding-bottom:2.2rem; }

/* --- 3. Nossos serviços — composição editorial: texto+line-art + grade 2×2 --- */
.services-hero { padding-block:clamp(6.5rem,13vw,10rem); }
.services-hero__layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:4.5rem; align-items:center; }
.services-hero__intro { position:relative; }
.services-hero__title { font-size:clamp(2.2rem,3.6vw,2.9rem); margin-bottom:1rem; }
.services-hero__intro > p { font-size:1.05rem; line-height:1.75; margin-bottom:2rem; max-width:26rem; }
.services-showcase { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }

.svc-feature {
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  padding:1.9rem 1.7rem; background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  color:inherit; min-height:220px; box-shadow:var(--shadow-xs);
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.svc-feature::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.svc-feature:hover::after { transform:scaleX(1); }
.svc-feature__icon {
  width:56px; height:56px; border-radius:var(--radius-sm); display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.5rem; margin-bottom:1.2rem;
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.svc-feature h3 { font-family:var(--font-editorial); font-weight:600; font-size:1.25rem; margin-bottom:.6rem; color:var(--ink); }
.svc-feature p { font-size:.92rem; color:var(--text); line-height:1.6; flex:1; margin-bottom:1.2rem; }
.svc-feature__cta { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem; color:var(--accent); }
.svc-feature__cta i { transition:transform .3s var(--ease); }
.svc-feature:hover { border-color:var(--ink); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.svc-feature:hover .svc-feature__icon { background:var(--accent); color:var(--accent-contrast); transform:translateY(-2px); }
.svc-feature:hover .svc-feature__cta i { transform:translateX(4px); }

/* --- 4. Nossa estrutura — carrossel editorial: foto + conteúdo integrado por overlay --------- */
.structure-hero__title { font-size:clamp(2.4rem,4.6vw,3.6rem); margin-bottom:0; }
.structure-hero__divider { display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:1.2rem; }
.structure-hero__divider-line { width:46px; height:1px; background:linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.structure-hero__divider-diamond { width:6px; height:6px; background:var(--accent); transform:rotate(45deg); flex:none; }

.structure-carousel { max-width:1180px; margin-inline:auto; margin-top:2.5rem; }
.structure-carousel__viewport {
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(17,17,17,.08); box-shadow:var(--shadow-lg); background:#111;
}
.structure-carousel__slide {
  position:absolute; inset:0; opacity:0; transition:opacity .8s var(--ease);
}
.structure-carousel__slide.is-active { opacity:1; z-index:1; }
.structure-carousel__slide img { width:100%; height:100%; object-fit:cover; display:block; }

/* Overlay escuro só do lado esquerdo, em transição suave — a foto continua visível à direita */
.structure-carousel__scrim {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,8,8,.88) 0%, rgba(8,8,8,.55) 32%, rgba(8,8,8,.15) 56%, transparent 74%);
}

.structure-carousel__content {
  position:absolute; z-index:3; left:0; top:0; bottom:0;
  width:min(52%,460px); display:flex; flex-direction:column; justify-content:center;
  padding:2.4rem 2.2rem;
}
.structure-carousel__eyebrow {
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.9rem;
}
.structure-carousel__heading {
  font-family:var(--font-editorial); font-weight:600; font-size:clamp(1.35rem,2.3vw,1.85rem);
  line-height:1.25; color:#fff; margin-bottom:.9rem;
}
.structure-carousel__text { font-size:.94rem; line-height:1.65; color:rgba(255,255,255,.78); margin-bottom:1.6rem; }
.structure-carousel__note {
  display:flex; align-items:center; gap:.7rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.14);
}
.structure-carousel__note i { color:var(--accent); font-size:1.1rem; flex:none; }
.structure-carousel__note span { font-size:.82rem; color:rgba(255,255,255,.65); line-height:1.4; }

.structure-carousel__nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
  background:rgba(10,10,10,.55); color:#fff; display:grid; place-items:center;
  cursor:pointer; font-size:.95rem; transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.structure-carousel__nav:hover { background:#fff; color:#111; border-color:#fff; }
.structure-carousel__nav--prev { left:.9rem; }
.structure-carousel__nav--next { right:.9rem; }

.structure-carousel__dots { position:absolute; right:1.1rem; bottom:1rem; z-index:4; display:flex; gap:.4rem; }
.structure-carousel__dot { width:18px; height:2px; border-radius:2px; background:rgba(255,255,255,.3); transition:background-color .3s var(--ease), width .3s var(--ease); }
.structure-carousel__dot.is-active { background:var(--accent); width:26px; }

.structure-carousel__tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:1.5rem; }
.structure-carousel__tab {
  padding:.5rem 1.1rem; border-radius:999px; border:1px solid var(--line-strong); background:var(--card-bg);
  color:var(--text); font-size:.86rem; font-weight:600; cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.structure-carousel__tab:hover { border-color:var(--ink); color:var(--ink); }
.structure-carousel__tab.is-active { background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }

/* Quatro diferenciais institucionais, abaixo das categorias */
.structure-perks { display:flex; margin-top:3rem; border-top:1px solid var(--line); padding-top:2.2rem; }
.structure-perks__item { flex:1; display:flex; gap:.8rem; align-items:flex-start; padding:0 1.4rem; border-left:1px solid var(--line); }
.structure-perks__item:first-child { border-left:0; padding-left:0; }
.structure-perks__item:last-child { padding-right:0; }
.structure-perks__item i { color:var(--ink); font-size:1.2rem; margin-top:.15rem; flex:none; }
.structure-perks__item strong { display:block; font-size:.92rem; color:var(--ink); margin-bottom:.25rem; }
.structure-perks__item span { font-size:.82rem; color:var(--text); line-height:1.5; }

/* --- 5. Oficiala e substituto — editorial, sem estética de equipe de startup --- */
.leadership-category {
  display:flex; align-items:center; justify-content:center; gap:1.1rem;
  max-width:420px; margin:0 auto 2.6rem;
}
.leadership-category__line { flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.leadership-category__label {
  font-family:var(--font-editorial); font-weight:600; font-size:1.05rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gray-600); white-space:nowrap;
}
/* Sem fotos: apresentação em pilha vertical, oficiala titular com destaque
   maior (card--primary) e substituto abaixo, em formato mais compacto
   (card--secondary) — hierarquia clara sem depender de imagem. */
.leadership-stack { display:flex; flex-direction:column; gap:1.75rem; max-width:760px; margin-inline:auto; }
.leadership-card {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* friso preto no topo: marca o card como "registro" oficial */
.leadership-card::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--ink); }
.leadership-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-md); }
.leadership-card__tag {
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gray-600); margin-bottom:.6rem;
}
.leadership-card--primary { padding:2.4rem; }
.leadership-card--primary .leadership-card__text strong { font-size:1.7rem; }
.leadership-card--secondary { padding:1.7rem 2rem; }
.leadership-card--secondary .leadership-card__text strong { font-size:1.2rem; }
.leadership-card--secondary .leadership-card__text p { font-size:.92rem; }
.leadership-card--secondary .leadership-card__badges { grid-template-columns:1fr; gap:.6rem; }
.leadership-card__text strong { display:block; font-family:var(--font-editorial); font-weight:600; color:var(--ink); }
.leadership-card__text > span { display:block; font-size:.9rem; color:var(--blue-600); font-weight:600; margin:.2rem 0 1rem; }
.leadership-card__text p { font-size:.98rem; font-style:normal; color:var(--text); line-height:1.7; margin-bottom:1rem; }
/* auto-fit + minmax: cai sozinho para 1 coluna quando não há largura para duas
   (antes eram 2 colunas fixas, que estouravam a tela em celulares estreitos). */
.leadership-card__badges { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.9rem; margin-bottom:1.4rem; }
.leadership-card__badge { padding:.7rem .95rem; border-left:2px solid var(--ink); background:var(--surface); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.leadership-card__badge strong { display:block; font-size:.82rem; color:var(--ink); font-weight:700; }
.leadership-card__badge span { display:block; font-size:.78rem; color:var(--text); line-height:1.4; }

/* --- 6. Transição entre seções — divisor discreto (linha dourada em gradiente,
   mesmo recurso já usado no topo do rodapé), evita corte seco entre a liderança
   e o atendimento sem reintroduzir conteúdo removido --- */
.home-divider { display:flex; align-items:center; justify-content:center; gap:1.4rem; padding-block:1.5rem 0; }
.home-divider__line { flex:1; height:1px; max-width:420px; background:linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.home-divider__dot { width:7px; height:7px; border-radius:50%; background:var(--ink); flex:none; }

/* --- 7. Atendimento e localização — claro, sem faixa escura --------------------- */
/* Link com seta, reaproveitado em vários pontos (liderança, institucional) */
.services-ed__more { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:1rem; color:var(--ink); margin-top:.5rem; }
.services-ed__more i { font-size:.85rem; color:var(--ink); transition:transform .3s var(--ease); }
.services-ed__more:hover { color:var(--accent); }
.services-ed__more:hover i { transform:translateX(4px); }

/* --- Atendimento e localização — claro, sem faixa escura --------------------- */
/* .about-ed__grid é usada em Contato e Institucional (foto + texto lado a lado)
   mas nunca teve regra própria: as duas colunas viravam blocos empilhados em
   largura total, com a foto gigante. Mesmo par de colunas do .contact-ed__grid,
   que já existia e resolve o mesmo problema. */
.about-ed__grid,
.contact-ed__grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.contact-ed p { color:var(--text); font-size:1.02rem; }
.contact-ed__facts { display:flex; flex-direction:column; gap:.8rem; margin:1.6rem 0 1.8rem; }
.contact-ed__facts div { display:flex; align-items:center; gap:.65rem; font-size:.92rem; color:var(--text); }
.contact-ed__facts i { color:var(--accent); font-size:1rem; }
.location-map { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); min-height:280px; }
.location-map iframe { display:block; width:100%; height:100%; min-height:280px; border:0; }
/* Área de competência: o segundo mapa (Área do 3º Registro) fica desalinhado
   dentro da sua coluna em alguns navegadores; centraliza pelo alinhamento do
   próprio container, sem tocar em tamanho/altura do mapa ou no iframe. */
.location-map--center { width:100%; margin-inline:auto; }


/* ==========================================================================
   Componentes de páginas internas (serviços, institucional, contato, etc.)
   ========================================================================== */

.grid { display:grid; gap:1.2rem; }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }

.svc-card {
  position:relative; overflow:hidden;
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2rem 1.8rem; box-shadow:var(--shadow-xs);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); display:flex; flex-direction:column; height:100%;
}
.svc-card::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.svc-card::before {
  content:""; position:absolute; left:0; bottom:-2px; width:6px; height:6px; border-radius:50%;
  background:var(--accent); opacity:0; pointer-events:none;
}
.svc-card:hover { border-color:var(--ink); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.svc-card:hover::after { transform:scaleX(1); }
.svc-card:hover::before { animation:cardDot .5s ease .6s forwards; }
@keyframes cardDot { 0%{opacity:1; left:0;} 95%{opacity:1;} 100%{opacity:0; left:calc(100% - 6px);} }
.svc-card__icon {
  width:52px; height:52px; display:grid; place-items:center;
  border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent);
  font-size:1.35rem; margin-bottom:1.2rem; transition:background-color .3s var(--ease), color .3s var(--ease);
}
.svc-card:hover .svc-card__icon { background:var(--accent); color:var(--accent-contrast); }
.svc-card h3 { font-size:1.15rem; margin-bottom:.45rem; color:var(--ink); }
.svc-card p { font-size:.94rem; color:var(--text); margin-bottom:1rem; line-height:1.6; }
/* Resumo dos cards de serviço (Nível 2, /servicos/categoria/<slug>): além do
   recorte de ~180 caracteres feito no template (servicos_categoria.html),
   um clamp visual de 4 linhas como reforço -- evita que um resumo futuro
   mais longo estique o card, mesmo dentro do limite de caracteres.
   02/09/2026 (9): mais espaço reservado pro resumo (line-height/margem
   maiores, card um pouco mais alto) para aproveitar melhor a área do card. */
.svc-card__resumo {
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.65; margin-bottom:1.3rem;
}
.svc-card .btn--sm { margin-top:auto; align-self:flex-start; }
.section--gray .svc-card { background:var(--card-bg); }

/* Grid de Serviços (/servicos/categoria/<slug>): cada card fica dentro de um
   "slot" -- desde 04/09/2026, os cards se alinham SEM altura fixa em pixels
   e sem position:absolute (o CSS Grid já iguala a altura de todos os itens
   de uma mesma linha ao maior deles, sozinho -- é o comportamento padrão de
   "stretch" do Grid, não algo que precisa ser calculado/travado em px).
   Antes (02/09/2026 (9) e anteriores): o slot tinha altura FIXA (560/580/
   540px conforme a largura) e o .svc-card ficava position:absolute dentro
   dele, ocupando sempre esse espaço fixo. Isso cortava conteúdo sempre que
   o texto (resumo, lista de documentos) não cabia nesse número mágico --
   inclusive com o recurso de acessibilidade "A+" (aumentar fonte, ver
   templates/base.html/main.js), que faz TODO o site crescer proporcional
   mas não crescia a altura fixa do slot junto, cortando o rodapé do card.
   Agora o slot só embrulha o card (display:flex, um único filho) e o card
   tem height:auto -- cresce com o texto que tiver, e o Grid, por padrão,
   iguala a altura de todos os cards de uma mesma linha ao maior deles, sem
   nenhum valor fixo escrito aqui. Cards continuam alinhados/organizados,
   só que agora acompanhando o conteúdo real em vez de um número fixo. */
.svc-grid .svc-card-slot { display:flex; min-width:0; }
@media (max-width:1100px) {
  .grid--3.svc-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px) {
  .grid--3.svc-grid { grid-template-columns:1fr; }
}
/* position:relative aqui (04/09/2026 (14)): precisa continuar relative --
   NÃO static -- porque é essa a "âncora" de posicionamento da linha/ponto
   dourados do hover (.svc-card::after/::before, position:absolute) e o que
   faz o overflow:hidden do próprio .svc-card recortar essa linha nos limites
   do card. Um bug anterior (ver comentário acima) trocou isso por
   position:static ao remover o position:absolute do card -- sem querer,
   isso tirou o card de seu próprio contexto de posicionamento: a linha
   dourada (::after) passou a se posicionar em relação ao ancestral
   posicionado mais próximo acima na árvore (nenhum, na prática == viewport),
   ficando esticada por toda a largura da tela e por cima de outros cards,
   sem ser mais recortada pelo overflow:hidden do card. width:100%/
   height:auto (abaixo) continuam garantindo que o card não fique
   absolutamente posicionado/travado -- só a base de ancoragem precisa ser
   relative, não static. */
.svc-grid .svc-card { position:relative; width:100%; height:auto; min-width:0; }
.svc-grid .svc-card { padding:2.3rem 2rem; }

/* Nível 1 da aba Serviços (02/09/2026): grade dos 10 cards de CATEGORIA
   (/servicos). ".cat-card" reaproveita a classe ".svc-card" (mesma borda,
   fundo, ícone, hover, tipografia de h3/p) só ACRESCENTANDO o essencial:
   o card inteiro é um <a> (clicável em qualquer ponto) e ganha uma linha
   final "N serviços ->" fixada embaixo. Fica FORA de ".svc-grid" de
   propósito -- não deve herdar a altura fixa/posição absoluta/expansão
   "Ver mais" das regras acima, que são só para os cards de SERVIÇO
   (Nível 2, /servicos/categoria/<slug>, mesmo componente de antes). */

/* Introdução curta acima da grade de categorias (02/09/2026 (8)) */
.cat-intro {
  max-width:62ch; margin:0 0 2rem; color:var(--text); font-size:1.02rem; line-height:1.7;
}

.cat-grid .cat-card, a.cat-card {
  text-decoration:none; color:inherit; cursor:pointer;
  padding:2.2rem 1.9rem 1.9rem;
}

/* Detalhe decorativo dourado discreto: barra fina no topo do card, some em
   repouso e se revela suavemente no hover -- não interfere com o
   sublinhado/ponto (.svc-card::after/::before) herdados de .svc-card. */
.cat-card__accent {
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--ink);
  opacity:0; transform:scaleX(.4); transform-origin:center;
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.cat-card:hover .cat-card__accent { opacity:1; transform:scaleX(1); }

/* Hover mais sofisticado que o .svc-card base: elevação um pouco maior e
   borda dourada mais nítida, com pequena animação no ícone. */
.cat-card:hover {
  border-color:var(--ink);
  box-shadow:var(--shadow-lg);
  transform:translateY(-5px);
}

/* Ícones com mais destaque nos cards de categoria: maiores que o padrão de
   .svc-card__icon, com um brilho dourado suave por trás no hover. Escopo
   restrito a .cat-card para não afetar os cards de serviço (Nível 2). */
.cat-card .svc-card__icon {
  position:relative; width:62px; height:62px; font-size:1.6rem; margin-bottom:1.4rem;
}
.cat-card .svc-card__icon::before {
  content:""; position:absolute; inset:-8px; border-radius:50%;
  background:radial-gradient(circle, rgba(17,17,17,.1), transparent 70%);
  opacity:0; transition:opacity .4s var(--ease);
}
.cat-card:hover .svc-card__icon::before { opacity:1; }
.cat-card:hover .svc-card__icon { background:var(--accent); color:var(--accent-contrast); transform:scale(1.04); }

.cat-card h3 { font-size:1.2rem; margin-bottom:.55rem; letter-spacing:-.01em; }
.cat-card p { font-size:.93rem; line-height:1.65; margin-bottom:1.3rem; }

/* Hierarquia visual do rodapé: contagem em texto discreto/factual + CTA em
   destaque dourado ("Explorar categoria"), separados por um ponto sutil --
   substitui o antigo "X serviços ->" plano, sem mudar link/contagem. */
.cat-card__count {
  margin-top:auto; padding-top:1.1rem; flex:0 0 auto;
  border-top:1px solid var(--line);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem;
  font-size:.85rem;
}
.cat-card__count-num { color:var(--muted); font-weight:500; }
.cat-card__sep { color:var(--line-strong); }
.cat-card__cta {
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:600; color:var(--accent);
}
.cat-card__cta i { font-size:.75rem; transition:transform .3s var(--ease); }
.cat-card:hover .cat-card__cta i { transform:translateX(4px); }

@media (max-width:700px) {
  .cat-grid .cat-card, a.cat-card { padding:1.8rem 1.5rem 1.5rem; }
}

/* Categorias da aba Serviços — subtítulos que agrupam os cards existentes */
.svc-category { margin-bottom:1.6rem; }
.svc-category__title {
  font-family:var(--font-editorial); font-size:1.3rem; font-weight:600;
  letter-spacing:-.01em; color:var(--ink); margin:0;
  padding-left:.9rem; border-left:3px solid var(--ink);
}
.svc-category__sub { margin:.5rem 0 0 .9rem; color:var(--text); font-size:.94rem; }
.section + .section .svc-category { margin-top:0; }

/* --- Oficiala Timeline --------------------------------------------------- */
.oficiala-hero { display:flex; gap:2.2rem; align-items:flex-start; }
.oficiala-hero__photo {
  width:140px; height:140px; border-radius:var(--radius-lg); flex:none;
  object-fit:cover; box-shadow:var(--shadow-sm); border:1px solid var(--line);
}
.oficiala-hero__photo--placeholder {
  display:grid; place-items:center; font-size:2.4rem; font-weight:700;
  background:var(--accent-soft); color:var(--accent);
}
.oficiala-hero__quote {
  margin:0; padding:.9rem 1.2rem; border-left:3px solid var(--ink);
  background:var(--surface); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:1.02rem; font-style:italic; color:var(--text); line-height:1.65;
}
.oficiala-atribuicoes { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.oficiala-atribuicoes li { display:flex; gap:.6rem; align-items:flex-start; font-size:.98rem; line-height:1.6; }
.oficiala-atribuicoes i { color:var(--accent); margin-top:.2rem; flex:none; }
@media (max-width:560px) { .oficiala-hero { flex-direction:column; align-items:center; text-align:center; } }

.off-timeline { position:relative; padding-left:2.6rem; }
.off-timeline::before { content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background:var(--blue-100); }
.off-timeline-item { position:relative; padding-bottom:2rem; }
.off-timeline-item:last-child { padding-bottom:0; }
.off-timeline-item__dot {
  position:absolute; left:-2.6rem; top:.25rem;
  width:20px; height:20px; border-radius:50%;
  background:var(--ink); border:4px solid var(--page-bg); box-shadow:0 0 0 1px var(--line-strong);
}
.off-timeline-item__year { font-size:.8rem; font-weight:700; color:var(--gray-600); margin-bottom:.25rem; }
.off-timeline-item p { margin:0; font-size:1rem; line-height:1.65; }

/* --- Member cards -------------------------------------------------------- */
.member-card {
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2.2rem; text-align:center; box-shadow:var(--shadow-xs);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.member-card:hover { border-color:var(--ink); box-shadow:var(--shadow-md); }
.section--gray .member-card { background:var(--card-bg); }
.member-card__avatar {
  width:88px; height:88px; border-radius:50%; margin:0 auto 1rem;
  display:grid; place-items:center; font-size:1.6rem; font-weight:700;
  background:var(--accent-soft); color:var(--accent); border:2px solid var(--accent-soft);
}
.member-card__avatar--photo { object-fit:cover; background:none; display:block; }
.member-card h3 { font-size:1.15rem; margin-bottom:.25rem; color:var(--ink); }
.member-card span { font-size:.92rem; color:var(--muted); }

/* --- Galeria institucional (placeholder para fotos reais, padrão "ficha registral") --- */
.gallery-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.gallery-tile {
  position:relative; aspect-ratio:1/1; border-radius:var(--radius); border:1px solid var(--line);
  background-color:var(--surface);
  background-image:
    radial-gradient(circle at 85% 15%, var(--accent-soft) 0%, transparent 45%),
    repeating-linear-gradient(0deg, rgba(17,18,19,.035) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(17,18,19,.035) 0 1px, transparent 1px 22px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  color:var(--muted); transition:border-color .3s var(--ease), color .3s var(--ease);
}
.gallery-tile:hover { border-color:var(--accent); color:var(--accent); }
.gallery-tile i { font-size:1.6rem; color:var(--accent); }
.gallery-tile span { font-size:.78rem; font-weight:600; text-align:center; padding:0 .4rem; }
.gallery-tile--photo { padding:0; overflow:hidden; background:none; }
.gallery-tile--photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.gallery-tile--photo:hover img { transform:scale(1.05); }
.gallery-tile__label {
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:.7rem .8rem .55rem; font-size:.78rem; font-weight:600; color:#fff;
  background:linear-gradient(0deg, rgba(12,12,13,.75) 0%, transparent 90%);
}
@media (max-width:768px) { .gallery-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px) { .gallery-grid { grid-template-columns:repeat(2,1fr); } }

/* --- Lightbox (15/09/2026): fotos da galeria institucional abrem ampliadas
   dentro da própria página, em vez de em outra aba (target="_blank" removido
   dos .gallery-tile--photo em institucional.html; ver .js-lightbox no JS). --- */
.lightbox {
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:5vh 4vw; background:rgba(0,0,0,.92);
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility 0s linear .25s;
}
.lightbox.show { opacity:1; visibility:visible; transition:opacity .25s var(--ease); }
.lightbox__figure { position:relative; max-width:min(1100px,92vw); max-height:88vh; }
.lightbox__figure img {
  display:block; max-width:100%; max-height:88vh; width:auto; height:auto;
  border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.6);
  transform:scale(.96); transition:transform .25s var(--ease);
}
.lightbox.show .lightbox__figure img { transform:scale(1); }
.lightbox__caption {
  position:absolute; left:0; right:0; bottom:0; padding:.9rem 1.1rem .75rem; color:#fff;
  font-size:.9rem; font-weight:600; border-radius:0 0 var(--radius) var(--radius);
  background:linear-gradient(0deg, rgba(0,0,0,.78) 0%, transparent 100%);
}
.lightbox__close {
  position:absolute; top:-46px; right:0; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25);
  font-size:1.15rem; cursor:pointer; transition:background .2s var(--ease);
}
.lightbox__close:hover { background:rgba(255,255,255,.22); }
@media (max-width:600px) { .lightbox__close { top:-42px; right:0; width:34px; height:34px; } }

/* --- Foto institucional em destaque (ex.: fachada ao lado do texto de história) --- */
.institutional-photo { aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.institutional-photo img { width:100%; height:100%; object-fit:cover; display:block; }

/* Seção "Nossa história" (Institucional): sem foto ao lado — a fachada
   aparece só na galeria ("Conheça o cartório"), logo abaixo. Aqui é um
   único bloco de texto corrido (.history-copy), largo e centralizado na
   página (em vez da antiga coluna estreita ao lado da imagem), mantendo a
   citação de boas-vindas em destaque (.oficiala-hero__quote, reaproveitada
   de outra página). */
.history-copy { max-width:900px; margin-inline:auto; display:flex; flex-direction:column; gap:1.5rem; }
.history-copy h2 { font-size:clamp(2rem,3.3vw,2.7rem); line-height:1.18; margin:.2rem 0 .4rem; }
.history-copy p { font-size:1.07rem; line-height:1.85; color:var(--text); margin:0; }
.history-copy .oficiala-hero__quote { margin-top:.4rem; font-size:1.05rem; }

@media (max-width:768px) {
  .history-copy h2 { font-size:clamp(1.7rem,3.6vw,2.2rem); }
  .history-copy p { font-size:1rem; }
}

/* --- Missão, Visão e Valores (O Cartório) ---------------------------------
   Reaproveita a linguagem visual de .svc-feature (ícone petróleo, cartão
   escuro, friso dourado no hover) para Missão/Visão, e um cartão menor no
   mesmo espírito de .leadership-card__badge (borda discreta + acento
   dourado) para cada um dos 5 valores. --- */
.mvv-card {
  display:flex; flex-direction:column; gap:1rem; position:relative; overflow:hidden;
  padding:2.3rem 2.1rem; background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.mvv-card::after {
  content:""; position:absolute; left:0; top:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.mvv-card:hover { border-color:var(--ink); box-shadow:var(--shadow-md); }
.mvv-card:hover::after { transform:scaleX(1); }
.mvv-card__icon {
  width:56px; height:56px; border-radius:var(--radius-sm); display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.5rem; flex:none;
}
.mvv-card h3 { font-family:var(--font-editorial); font-weight:600; font-size:1.3rem; margin:0; }
.mvv-card p { font-size:.98rem; color:var(--text); line-height:1.75; margin:0; }

.values-head { text-align:center; max-width:640px; margin:3.4rem auto 2.2rem; padding-top:2.6rem; border-top:1px solid var(--line); }
.values-head .eyebrow { margin:0 0 .5rem; }
.values-head h3 { font-size:clamp(1.5rem,2.6vw,1.9rem); letter-spacing:-.02em; margin:0; }

.values-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.value-card {
  display:flex; flex-direction:column;
  padding:1.5rem 1.3rem; background:var(--card-bg); border:1px solid var(--line); border-top:2px solid var(--line);
  border-radius:var(--radius); transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.value-card:hover { border-top-color:var(--ink); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.value-card__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.value-card__num { font-family:var(--font-editorial); font-weight:700; font-size:.8rem; letter-spacing:.05em; color:var(--gray-600); }
.value-card__icon { font-size:1.05rem; color:var(--accent); }
.value-card h4 { font-size:.98rem; font-weight:600; color:var(--ink); margin:0 0 .5rem; }
.value-card p { font-size:.84rem; color:var(--text); line-height:1.6; margin:0; }

/* Linha final "Ética · Colaboração · Responsabilidade · Excelência" (04/09/2026) */
.values-footer {
  text-align:center; margin:2.4rem auto 0; max-width:640px;
  font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}

@media (max-width:992px) { .values-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .values-grid { grid-template-columns:1fr; } .values-head { margin-top:2.6rem; } .values-footer { font-size:.72rem; letter-spacing:.06em; } }

/* --- Vagas (/trabalhe-conosco) — 15/09/2026, estilo "cartaz de vaga" pedido
   pelo Hiroshi (referência: arte com faixa escura + ícone, 3 colunas com
   selo colorido por coluna e itens com check). As cores azul/verde deste
   componente são uma exceção deliberada à regra geral do design system
   (dourado como único acento -- ver comentário em :root) para reproduzir a
   estética da vaga de emprego/RH, que é visualmente distinta do resto do
   site institucional. --- */
.vagas-list { display:flex; flex-direction:column; gap:1.5rem; }
.vaga-card {
  position:relative; background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-xs);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.vaga-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-md); }

.vaga-card__band {
  position:relative; display:flex; align-items:flex-start; gap:1.1rem;
  padding:1.8rem clamp(1.3rem,3vw,2.4rem); border-bottom:1px solid var(--line);
  background:linear-gradient(165deg, #1E1E1E 0%, #0B0B0B 100%);
}
.vaga-card__icon {
  width:52px; height:52px; border-radius:var(--radius-sm); display:grid; place-items:center; flex:none;
  background:var(--accent); color:var(--accent-contrast); font-size:1.35rem;
}
.vaga-card__band-text { min-width:0; }
.vaga-card__eyebrow { display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:.3rem; }
.vaga-card__band h2 { font-size:1.45rem; margin:0 0 .4rem; color:#fff; }
.vaga-card__resumo { margin:0; color:var(--text); font-size:.94rem; max-width:62ch; }

.vaga-card__body { padding:1.9rem clamp(1.3rem,3vw,2.4rem) 2.1rem; }
.vaga-card__blocks { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.9rem 1.6rem; margin-bottom:0; }
.vaga-card__block-head { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.vaga-card__block-icon { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none; font-size:.92rem; }
.vaga-card__block--0 .vaga-card__block-icon { background:var(--ink); color:#fff; }
.vaga-card__block--1 .vaga-card__block-icon { background:var(--gray-600); color:#fff; }
.vaga-card__block--2 .vaga-card__block-icon { background:transparent; color:var(--ink); border:2px solid var(--ink); }
.vaga-card__block h3 { font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin:0; }
.vaga-card__block ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.vaga-card__block li { position:relative; padding-left:1.05rem; font-size:.9rem; color:var(--text); line-height:1.5; }
.vaga-card__block li::before { content:""; position:absolute; left:2px; top:.62em; width:4px; height:4px; border-radius:50%; background:var(--ink); }

.vaga-card__foot {
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  padding:1.3rem clamp(1.3rem,3vw,2.4rem); border-top:1px solid var(--line); background:var(--gray-50);
}
.vaga-card__cta { display:flex; align-items:center; gap:.8rem; color:inherit; }
.vaga-card__cta-icon {
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--accent-soft); color:var(--accent); font-size:1.15rem;
  transition:background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.vaga-card__cta:hover .vaga-card__cta-icon { background:var(--ink); color:#fff; }
.vaga-card__cta-text strong { display:block; font-size:.96rem; color:var(--ink); }
.vaga-card__cta-text span { display:block; font-size:.82rem; color:var(--muted); }
.vaga-card__email { display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--text); }
.vaga-card__email i { color:var(--accent); }

@media (max-width:640px) {
  .vaga-card__band { flex-direction:column; }
  .vaga-card__foot { flex-direction:column; align-items:flex-start; }
}

.vagas-empty { text-align:center; padding:3rem 1.5rem; background:var(--card-bg); border:1px dashed var(--line); border-radius:var(--radius-lg); }
.vagas-empty i { font-size:2rem; color:var(--accent); margin-bottom:.8rem; display:block; }

/* --- FAQ accordion -------------------------------------------------------- */
.faq-toolbar { max-width:820px; margin:0 auto 2rem; display:flex; flex-direction:column; gap:1rem; }
.faq-toolbar .search-bar { max-width:100%; }
.faq-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.faq-tag {
  padding:.45rem .95rem; border-radius:20px; border:1px solid var(--line); background:var(--card-bg);
  color:var(--text); font-size:.84rem; font-weight:600; cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.faq-tag:hover { border-color:var(--ink); color:var(--ink); }
.faq-tag.active { background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
.faq-empty { text-align:center; padding:2rem 0; color:var(--muted); }
.faq-accordion { max-width:820px; margin-inline:auto; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q {
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem .25rem; font-size:1.08rem; font-weight:600; color:var(--ink); transition:color .2s var(--ease);
}
.faq-q:hover { color:var(--gray-600); }
.faq-q i { flex:none; color:var(--ink); transition:transform .3s var(--ease); font-size:1rem; }
.faq-item.open .faq-q i { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a p { padding:0 .25rem 1.3rem; margin:0; color:var(--text); font-size:1rem; line-height:1.65; }


/* --- Contact --------------------------------------------------------------- */
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:1rem; }
.contact-line {
  display:flex; gap:.85rem; align-items:flex-start;
  padding:1.1rem 1.3rem; background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-xs);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.contact-line:hover { border-color:var(--ink); box-shadow:var(--shadow-sm); }
.contact-line__icon {
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent); font-size:1.2rem;
}
.contact-line strong { display:block; color:var(--ink); font-weight:600; margin-bottom:.15rem; font-size:.9rem; }
.contact-line span,.contact-line a { font-size:.96rem; color:var(--text); }
.contact-line a:hover { color:var(--gray-600); }
.contact-line__icon { transition:background-color .3s var(--ease), color .3s var(--ease); }
.contact-line--link:hover .contact-line__icon { background:var(--ink); color:#fff; }

/* Cards de contato que viram o próprio link (endereço, telefones, e-mail,
   Instagram) — mesma aparência do .contact-line, só sem o sublinhado/azul
   padrão de <a>, e com indicação sutil de que o card inteiro é clicável. */
.contact-line--link { text-decoration:none; color:inherit; cursor:pointer; }
.contact-line--link:hover strong { color:var(--ink); }

.form-card { position:relative; background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.3rem; box-shadow:var(--shadow-md); }

/* --- Emolumentos --------------------------------------------------------- */
.emolumentos-card { margin-bottom:2.5rem; }
.emolumentos-card__head { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.2rem; }
.emolumentos-card__icon {
  width:56px; height:56px; flex:none; border-radius:var(--radius-sm); display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.5rem;
}
.emolumentos-card__head h2 { font-size:1.4rem; margin-bottom:.4rem; }
.emolumentos-card__badge {
  display:inline-block; padding:.25rem .7rem; border-radius:999px;
  background:var(--accent-soft); border:1px solid var(--line-strong);
  color:var(--accent); font-size:.76rem; font-weight:700; letter-spacing:.03em;
}
.emolumentos-card p { color:var(--text); font-size:1rem; line-height:1.7; margin-bottom:1rem; }
.emolumentos-card__meta { display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--muted); }
.emolumentos-card__pending {
  padding:1rem 1.2rem; border-radius:var(--radius-sm); background:var(--surface);
  border-left:2px solid var(--ink); color:var(--text);
}
.emolumentos-note { padding-top:.5rem; }
.emolumentos-note h3 { font-size:1.05rem; margin-bottom:1rem; }
.emolumentos-note ul { margin:0 0 1.4rem; padding-left:1.2rem; }
.emolumentos-note li { color:var(--text); font-size:.96rem; line-height:1.65; margin-bottom:.7rem; }
.field { margin-bottom:1rem; }
.field label { display:block; font-size:.88rem; font-weight:600; color:var(--ink); margin-bottom:.4rem; }
.field .req { color:#B42318; }
.field input,.field select,.field textarea {
  width:100%; padding:.8rem .95rem; font-size:1rem; font-family:var(--font-body);
  color:var(--ink); background:var(--gray-50); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus {
  outline:none; border-color:var(--ink); background:#fff;
  box-shadow:0 0 0 3px rgba(17,17,17,.08);
}
.field input.touched:invalid,.field select.touched:invalid,.field textarea.touched:invalid {
  border-color:#B42318; background:#FEF3F2;
}
.field input.touched:invalid:focus,.field textarea.touched:invalid:focus {
  box-shadow:0 0 0 3px rgba(180,35,24,.12);
}
.field input.touched:valid,.field textarea.touched:valid {
  border-color:#5D5E5E;
}
.field textarea { resize:vertical; min-height:120px; }
.form-note { font-size:.8rem; color:var(--muted); margin-top:.2rem; }
.flash { display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:.92rem; font-weight:500; }
.flash.sucesso { background:#EEF6F0; color:#1E5B34; border:1px solid #BFDCC8; }
.flash.erro { background:#FEF3F2; color:#912018; border:1px solid #F4C7C3; }

/* --- Calculadora de Emolumentos (04/09/2026) -----------------------------
   Reaproveita .form-card/.emolumentos-card/.field/.flash/.btn-spinner já
   usados em /emolumentos e /contato -- só o necessário de novo é o layout
   do resultado dinâmico (total, atos, taxas extras, extra_information) e o
   erro por campo, que a página de contato não precisava (ela usa
   flash+reload de página; aqui o envio é via fetch, sem recarregar). ---- */
.form-error { color:#B42318; font-size:.82rem; margin-top:.35rem; line-height:1.4; }
#calcAlerta[hidden], #calcResultado[hidden], .form-error[hidden] { display:none; }

.calc-emol-result { margin-top:2rem; }
.calc-emol-result__total {
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  padding-bottom:1.4rem; margin-bottom:1.4rem; border-bottom:1px solid var(--line);
}
.calc-emol-result__total-label { font-size:1rem; color:var(--text); font-weight:600; }
.calc-emol-result__total-value { font-family:var(--font-display); font-size:2rem; font-weight:800; color:var(--ink); }

.calc-emol-ato { padding:1.1rem 0; border-bottom:1px solid var(--line); }
.calc-emol-ato:last-child { border-bottom:0; }
.calc-emol-ato__title { font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.7rem; }
.calc-emol-ato__row { display:flex; justify-content:space-between; gap:1rem; font-size:.92rem; color:var(--text); padding:.25rem 0; }
.calc-emol-ato__row--subtotal { font-weight:700; color:var(--ink); border-top:1px dashed var(--line); margin-top:.4rem; padding-top:.55rem; }

.calc-emol-result__extras { margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.calc-emol-result__extras h4 { font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.6rem; font-weight:700; }

.calc-emol-result__info {
  margin-top:1.6rem; padding:1rem 1.2rem; border-radius:var(--radius-sm); background:var(--surface);
  border-left:2px solid var(--ink); color:var(--text); font-size:.9rem; line-height:1.65;
}
.calc-emol-result__info p { margin:0 0 .6rem; }
.calc-emol-result__info p:last-child,.calc-emol-result__info ul:last-child,.calc-emol-result__info ol:last-child { margin-bottom:0; }
.calc-emol-result__info ul,.calc-emol-result__info ol { margin:0 0 .6rem 1.2rem; }

@media (max-width:600px){
  .calc-emol-result__total { flex-direction:column; align-items:flex-start; }
  .calc-emol-result__total-value { font-size:1.6rem; }
  .calc-emol-ato__row { font-size:.88rem; }
}

.map-embed { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.map-embed iframe { display:block; width:100%; height:340px; border:0; }

/* --- Links úteis --------------------------------------------------------- */
.link-card {
  display:flex; gap:1rem; align-items:center; height:100%;
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.4rem 1.5rem; box-shadow:var(--shadow-xs);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.link-card:hover { border-color:var(--ink); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.link-card__icon {
  flex:none; width:50px; height:50px; display:grid; place-items:center;
  border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent); font-size:1.3rem;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.link-card:hover .link-card__icon { background:var(--accent); color:var(--accent-contrast); }
.link-card h3 { font-size:1.05rem; margin-bottom:.15rem; color:var(--ink); }
.link-card p { font-size:.9rem; margin:0; color:var(--text); line-height:1.55; }

/* --- Page banner (hero interno, usado por todas as páginas internas via macros.html) --- */
.page-banner {
  position:relative; overflow:hidden;
  padding-top:9rem; padding-bottom:3.5rem;
  background-color:#111111;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:44px 44px;
  border-bottom:1px solid var(--line);
}
.page-banner::before {
  content:""; position:absolute; top:-40%; right:-8%; width:34%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 70%);
  pointer-events:none;
}
.page-banner::after {
  content:""; position:absolute; bottom:-50%; left:-6%; width:26%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  pointer-events:none;
}
.page-banner > .shell { position:relative; z-index:1; }
.page-banner__crumbs { font-size:.82rem; color:var(--muted); margin-bottom:.8rem; }
.page-banner__crumbs a { color:var(--muted); }
.page-banner__crumbs a:hover { color:var(--ink); }
.page-banner h1 { font-size:clamp(2.15rem,4.2vw,3rem); color:var(--ink); }
.page-banner p { font-size:1.12rem; color:var(--text); line-height:1.65; max-width:44rem; margin:0; }

/* --- Footer ------------------------------------------------------------------ */
.site-footer {
  position:relative; background-color:var(--blue-900); color:rgba(255,255,255,.68); padding-top:5.5rem; overflow:hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:44px 44px;
}
.site-footer::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.site-footer::after {
  content:""; position:absolute; top:-30%; right:-10%; width:40%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%); pointer-events:none;
}
.footer-grid { position:relative; display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:2.5rem; padding-bottom:3.2rem; }
.footer-brand { display:flex; align-items:center; gap:.65rem; margin-bottom:1.2rem; }
.footer-brand img { height:40px; width:auto; flex:none; }
.footer-brand__name { font-weight:700; font-size:1.15rem; color:#fff; }
.footer-brand__name span { display:block; font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-400); font-weight:600; }
.site-footer p { font-size:.95rem; line-height:1.7; }
.footer-col h4 { color:#fff; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.2rem; }
.footer-col ul { list-style:none; margin:0; padding:0; }
.footer-col li { margin-bottom:.6rem; }
.footer-col a { position:relative; color:rgba(255,255,255,.65); font-size:.94rem; transition:color .3s var(--ease), padding-left .3s var(--ease); }
.footer-col a:hover { color:#fff; padding-left:.4rem; }
.footer-contact li { display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.85rem; font-size:.94rem; }
.footer-contact i { color:var(--blue-400); margin-top:.2rem; transition:transform .3s var(--ease); }
.footer-contact li:hover i { transform:scale(1.15); }
.footer-social { display:flex; gap:.6rem; margin-top:1.3rem; }
.footer-social a {
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); color:#fff; font-size:1rem;
  transition:background-color .3s cubic-bezier(.34,1.56,.64,1), border-color .3s cubic-bezier(.34,1.56,.64,1), color .3s cubic-bezier(.34,1.56,.64,1), transform .3s cubic-bezier(.34,1.56,.64,1);
}
.footer-social a:hover { background:#fff; border-color:#fff; color:var(--ink); transform:translateY(-3px) scale(1.06); }
.footer-bar { position:relative; border-top:1px solid rgba(255,255,255,.08); padding-block:1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-bar p { margin:0; font-size:.82rem; }
.footer-bar__links { display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer-bar__links a { color:rgba(255,255,255,.6); font-size:.82rem; transition:color .3s var(--ease); }
.footer-bar__links a:hover { color:var(--blue-400); }

.footer-credit { text-align:center; font-size:.72rem; color:rgba(255,255,255,.5); padding-bottom:1.4rem; margin:0; }

/* --- Back to top --------------------------------------------------------------- */
.to-top {
  position:fixed; right:20px; bottom:20px; z-index:900;
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:#111; color:#fff; border:1px solid rgba(255,255,255,.18); cursor:pointer; font-size:1.1rem;
  box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), visibility .3s, transform .3s var(--ease), background-color .3s var(--ease);
}
.to-top.show { opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover { background:#3A3A3A; }

/* --- Accessibility toolbar ----------------------------------------------------- */
.a11y-bar {
  position:fixed; top:0; left:0; right:0; z-index:1100;
  background:var(--blue-900); color:#fff; padding:.35rem 0;
  font-size:.78rem; display:flex; align-items:center; justify-content:flex-end;
  transform:translateY(-100%); transition:transform .3s;
}
.a11y-bar.show { transform:translateY(0); }
.a11y-bar__inner { display:flex; align-items:center; justify-content:flex-end; gap:.2rem; }
.a11y-bar.show ~ .site-nav { top:32px; }
.a11y-btn {
  background:none; border:0; color:rgba(255,255,255,.8); cursor:pointer;
  padding:.2rem .65rem; font-size:.78rem; display:inline-flex; align-items:center; gap:.3rem;
  transition:color .2s;
}
.a11y-btn:hover { color:#fff; }
.a11y-toggle {
  position:fixed; bottom:70px; right:20px; z-index:900;
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:#fff; color:#111; border:1px solid var(--line-strong); cursor:pointer; font-size:1.2rem;
  box-shadow:var(--shadow-md); transition:background-color .3s var(--ease);
}
.a11y-toggle:hover { background:#111; color:#fff; border-color:#111; }

/* --- High contrast mode --------------------------------------------------------- */
body.high-contrast { background:#000 !important; color:#fff !important; }
body.high-contrast * { border-color:#fff !important; }
body.high-contrast .site-nav,body.high-contrast .site-footer,
body.high-contrast .svc-card,body.high-contrast .contact-line,
body.high-contrast .form-card,body.high-contrast .link-card,
body.high-contrast .member-card,
body.high-contrast .quick-strip a,body.high-contrast .leadership-card img,
body.high-contrast .institutional-strip,body.high-contrast .structure-carousel__viewport
{ background:#111 !important; color:#fff !important; }
body.high-contrast a { color:#5eead4 !important; }
body.high-contrast .page-banner { background:#000 !important; }

/* --- Reveal animation ------------------------------------------------------------ */
.reveal { opacity:0; transform:translateY(32px) scale(.97); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; }
.reveal.d2 { transition-delay:.16s; }
.reveal.d3 { transition-delay:.24s; }
.reveal.d4 { transition-delay:.32s; }

/* --- 404 ---------------------------------------------------------------------------- */
.err-wrap { min-height:70vh; display:grid; place-items:center; text-align:center; padding-top:6rem; }
.err-wrap .code { font-size:clamp(5rem,14vw,9rem); color:var(--gray-300); line-height:1; font-weight:800; }

/* --- Página legal (Aviso de Privacidade / LGPD) ------------------------------------- */
.legal-doc__updated { font-size:.85rem; color:var(--muted); margin-bottom:1.5rem; }
.legal-doc__intro { font-size:1.05rem; color:var(--text); line-height:1.75; margin-bottom:2.5rem; padding-bottom:2rem; border-bottom:1px solid var(--line); }
.legal-doc h2 { font-size:1.2rem; font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; margin-top:2.5rem; margin-bottom:.8rem; color:var(--ink); }
.legal-doc h2:first-of-type { margin-top:0; }
.legal-doc p { font-size:1rem; line-height:1.75; color:var(--text); }
.legal-doc__list { margin:0 0 1rem; padding-left:1.3rem; }
.legal-doc__list li { font-size:1rem; line-height:1.75; color:var(--text); margin-bottom:.3rem; }

/* --- Search results page -------------------------------------------------------- */
.search-page-form { position:relative; max-width:600px; margin-bottom:2rem; }
.search-page-form .search-icon { position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); color:var(--muted); }
.search-page-input {
  width:100%; max-width:600px; padding:.85rem 1.2rem .85rem 2.8rem;
  font-size:1rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--gray-50); color:var(--ink); transition:border-color .2s;
}
.search-page-input:focus { outline:none; border-color:var(--gray-600); background:var(--card-bg); color:var(--ink); box-shadow:0 0 0 3px rgba(233,236,239,.14); }
.search-page-count { color:var(--muted); font-size:.9rem; margin-bottom:1.5rem; }
.search-page-heading { font-size:1.1rem; margin-bottom:1rem; }
.search-page-row {
  display:block; padding:1rem 1.2rem; background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-sm);
  margin-bottom:.6rem; color:var(--ink); box-shadow:var(--shadow-xs);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.search-page-row:hover { border-color:var(--ink); box-shadow:var(--shadow-sm); transform:translateX(3px); }
.search-page-row--static { cursor:default; }
.search-page-row strong { display:block; }
.search-page-row span { display:block; font-size:.88rem; color:var(--text); margin-top:.2rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* --- Navbar em telas intermediárias (notebooks) --------------------------
   O menu horizontal completo (marca + 7 links + busca + botão) só cabe numa
   linha a partir de ~1320px. Abaixo disso a marca era espremida até sumir e o
   link "Em breve" quebrava em duas linhas, estufando a navbar. Aqui o menu é
   compactado (nome curto do cartório + itens mais justos) para continuar
   cabendo; abaixo de 1080px, onde nem compactado cabe, ele passa a ser o menu
   lateral — que contém exatamente os mesmos links, nada é removido. */
@media (max-width:1320px) {
  .brand__name--full { display:none; }
  .brand__name--short { display:block; }
  .nav-links a { padding:.6rem .6rem; font-size:.875rem; }
  .nav-inner { gap:.9rem; }
}

@media (max-width:1080px) {
  .nav-links { display:none; }
  .nav-toggle { display:block; }
  .nav-mobile {
    display:block; position:fixed; inset:0; z-index:1100;
    background:rgba(10,10,11,.6); opacity:0; visibility:hidden;
    overflow:hidden; /* recorta o painel fechado (translateX(100%)), que antes
                        vazava para fora e criava rolagem horizontal no celular */
    transition:opacity .3s var(--ease), visibility .3s;
  }
  .nav-mobile.open { opacity:1; visibility:visible; }
  .nav-mobile__panel {
    position:absolute; top:0; right:0; height:100%; width:min(84%,340px);
    background:var(--card-bg); border-left:1px solid var(--line-card);
    padding:1.5rem; box-shadow:var(--shadow-lg);
    transform:translateX(100%); transition:transform .35s var(--ease);
    display:flex; flex-direction:column; gap:.2rem; overflow-y:auto;
  }
  .nav-mobile.open .nav-mobile__panel { transform:none; }
  .nav-mobile__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
  .nav-mobile__head .brand__name { color:var(--ink); }
  .nav-mobile__close { background:none; border:0; font-size:1.5rem; color:var(--ink); cursor:pointer; }
  .nav-mobile a { padding:.75rem .5rem; border-radius:8px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line); transition:background-color .2s var(--ease); }
  .nav-mobile a:hover { background:var(--surface); color:var(--ink); }
  .nav-mobile a:last-of-type { border-bottom:0; }
  .nav-mobile .btn--primary { display:inline-flex; justify-content:center; margin-top:.8rem; }
  .nav-mobile__label { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:.8rem .5rem .2rem; }
}

@media (max-width:992px) {
  .hero-cinematic__grid { grid-template-columns:1fr; }
  .hero-info-card { display:none; }
  .hero-cinematic__content { max-width:100%; padding-bottom:2.5rem; }
  .services-hero__layout { grid-template-columns:1fr; gap:2.5rem; text-align:center; }
  .services-hero__intro > p { margin-inline:auto; }
  .about-ed__grid,
  .contact-ed__grid { grid-template-columns:1fr; gap:2.5rem; }
  .services-ed__grid { grid-template-columns:1fr; gap:2.5rem; }
  .leadership-stack { max-width:520px; }
  .leadership-card--primary { padding:1.9rem; }
  .leadership-card--secondary { padding:1.5rem 1.7rem; }
  .hero-cinematic__quickbar { padding-bottom:1.6rem; }
  .quick-strip { display:grid; grid-template-columns:repeat(2,1fr); }
  .quick-strip a { border-right:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); min-width:0; padding:1.1rem .75rem; font-size:.84rem; text-align:center; }
  .quick-strip a:nth-child(2n) { border-right:0; }
  .quick-strip a:nth-last-child(-n+2) { border-bottom:0; }
  .contact-grid { grid-template-columns:1fr; }
  .grid--4 { grid-template-columns:repeat(2,1fr); }
  .grid--3 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  /* A navbar compacta e o menu lateral são definidos acima (≤1320px e ≤1080px),
     já valendo aqui — este bloco cuida só do conteúdo das páginas. */

  /* --- Hero: seção própria e mais curta, não ocupa mais a viewport inteira nem
     reserva espaço pro Acesso Rápido (que agora é um bloco separado, abaixo) ---
     Revisado em 04/09/2026 (2ª rodada): o Hiroshi ainda achou o hero alto/pesado
     no celular -- título ocupando espaço demais, vãos grandes entre os
     elementos, "Acesso rápido" grande demais e a transição pra "Encontre o
     serviço que você precisa" abrupta. Reduzi mais um degrau cada tamanho/
     espaçamento abaixo (título, subtítulo, botões, Acesso rápido) e passei a
     tratar também o início da seção seguinte (.services-hero, que antes NÃO
     tinha nenhum ajuste específico de mobile e usava o padding-block do
     desktop -- clamp(6.5rem,13vw,10rem), ou seja, no mínimo ~104px vazios em
     cima E embaixo só de respiro, daí a transição parecer um "buraco" entre
     as duas seções). Tudo dentro deste @media max-width:768px, que só existe
     em telas estreitas -- nada aqui toca no desktop. */
  .hero-cinematic { height:auto; min-height:auto; display:block; padding-top:0; }
  .hero-cinematic__grid { margin-block:0; }
  .hero-cinematic__content { padding-block:4.6rem 1rem; max-width:100%; }
  .hero-cinematic__eyebrow { font-size:.66rem; padding:.32rem .7rem; margin-bottom:.45rem; }
  .hero-cinematic__title { font-size:clamp(1.4rem,6.2vw,1.75rem); line-height:1.16; margin:.45rem 0 .5rem; }
  .hero-cinematic__lead { font-size:.9rem; line-height:1.48; margin-bottom:1rem; max-width:34rem; }

  /* Botões: principal mais baixo (mas com alvo de toque confortável, ~44px) e
     "Fale conosco" bem mais próximo dele (gap reduzido) */
  .hero-cinematic__actions { flex-direction:column; align-items:stretch; gap:.35rem; }
  .hero-cinematic__actions .btn--primary { padding:.62rem 1.4rem; font-size:.9rem; width:100%; justify-content:center; }
  .hero-cinematic__actions .btn--ghost-white {
    width:auto; align-self:center; padding:.46rem 1.15rem; font-size:.82rem;
    border-color:rgba(255,255,255,.32); justify-content:center;
  }
  .contact-ed .actions-row .btn,.emolumentos-card .actions-row .btn { width:100%; justify-content:center; }

  /* Acesso rápido: sai de "flutuando sobre a foto" e vira bloco próprio, com fundo
     sólido escuro — mesma linguagem visual (bordas discretas, dourado, cantos
     arredondados), só que como seção autônoma, não mais espremido no hero.
     Espaçamentos reduzidos (topo do bloco e do painel, altura de cada atalho)
     pra ele ficar mais compacto e mais colado nos botões, sem o vão vazio de
     antes nem ocupar tanta tela. */
  .hero-cinematic__quickbar {
    position:static; margin-top:0; padding:.75rem 0 1.4rem;
    background:#111; border-top:1px solid rgba(255,255,255,.08);
  }
  .quickbar-panel { padding:.85rem .95rem 0; }
  .quickbar-panel__head { padding-bottom:.55rem; }
  .quickbar-panel__head strong { font-size:.85rem; }
  .quick-strip a { padding:.9rem .6rem; font-size:.8rem; gap:.4rem; min-width:0; line-height:1.25; }
  .quick-strip a i { font-size:.9rem; }

  /* Transição hero -> "Encontre o serviço que você precisa": no desktop o
     respiro grande (padding-block:clamp(6.5rem,13vw,10rem), ver acima) faz
     sentido; no celular ele só criava um vão vazio entre as duas seções.
     Reduzido pra um respiro mais proporcional à tela, sem ficar colado. */
  .services-hero { padding-block:2.6rem 3rem; }
  .services-hero__title { font-size:clamp(1.55rem,6.6vw,1.9rem); }
  .services-hero__intro > p { font-size:.96rem; }

  /* (as colunas dos selos já se ajustam sozinhas via auto-fit/minmax) */
  .services-showcase { grid-template-columns:1fr; gap:1.25rem; }
  .grid--2 { grid-template-columns:1fr; }
  .section-head { margin-bottom:1.6rem; }

  /* Nossa estrutura no mobile: overlay passa a cobrir a imagem inteira (de baixo
     pra cima, já que o texto ocupa a largura toda), carrossel mais alto pra caber
     foto+texto sem espremer, categorias com scroll horizontal, diferenciais em coluna */
  .structure-carousel__viewport { aspect-ratio:4/5; border-radius:var(--radius); }
  .structure-carousel__scrim {
    background:linear-gradient(180deg, rgba(8,8,8,.1) 0%, rgba(8,8,8,.55) 45%, rgba(8,8,8,.94) 75%, rgba(8,8,8,.97) 100%);
  }
  .structure-carousel__content { width:100%; padding:1.6rem 1.4rem; justify-content:flex-end; }
  .structure-carousel__heading { font-size:1.25rem; }
  .structure-carousel__text { margin-bottom:1.1rem; }
  .structure-carousel__note { padding-top:1rem; }
  .structure-carousel__dots { bottom:auto; top:1rem; }
  .structure-carousel__tabs { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding-bottom:.4rem; -webkit-overflow-scrolling:touch; }
  .structure-carousel__tab { flex:none; }
  .structure-perks { flex-direction:column; gap:1.6rem; margin-top:2.2rem; padding-top:1.8rem; }
  .structure-perks__item { border-left:0; padding:0; }

  /* Botões flutuantes (voltar ao topo / acessibilidade): um pouco menores e mais
     colados no canto no mobile, pra invadir menos o conteúdo dos cards por trás
     deles ao rolar a página (ex.: cards de liderança e avaliações). Continuam
     com a mesma função/posição relativa, só um pouco mais discretos. */
  .to-top,.a11y-toggle { width:40px; height:40px; right:14px; font-size:1.05rem; }
  .a11y-toggle { bottom:62px; }
  .to-top { bottom:14px; }
}

@media (max-width:560px) {
  .shell { padding-inline:16px; }
  .grid--4,.grid--3 { grid-template-columns:1fr; }
  .services-showcase { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:1.8rem; }
  .brand__sub { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}

/* --- Hero em escala maior para desktops grandes (≥ 1440px) ------------------------
   Nada de transform/zoom — tudo via max-width, padding e font-size reais. --- */
@media (min-width:1440px) {
  .hero-cinematic__content { max-width:44rem; padding-bottom:3rem; }
  .hero-cinematic__lead { font-size:1.2rem; max-width:35rem; }
  .hero-cinematic__actions .btn { padding:1.1rem 2.05rem; font-size:1.08rem; }
}

/* ==========================================================================
   Componentes acrescentados — documentos necessários, modelos de
   requerimentos, "como funciona" e utilitários de acessibilidade.
   Reaproveitam as variáveis e o vocabulário visual já existentes.
   ========================================================================== */

/* Utilitário: texto lido por leitores de tela, invisível na tela */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Link "pular para o conteúdo" — só aparece ao receber foco pelo teclado.
   Fica totalmente fora do fluxo e recortado por padrão (padrão sr-only), em
   vez de apenas deslocado com top negativo: assim ele não pode reaparecer no
   canto superior esquerdo caso algum ancestral crie um contexto de
   posicionamento ou altere o overflow da página. */
.skip-link {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link:focus {
  position:fixed; left:16px; top:16px; z-index:2000;
  width:auto; height:auto; margin:0; overflow:visible;
  clip:auto; clip-path:none;
  padding:.7rem 1.1rem; border-radius:var(--radius-sm);
  background:#111; color:#fff;
  font-weight:600; font-size:.92rem;
}

/* Bloco de aviso para conteúdo pendente de confirmação oficial */
.pending-note {
  display:flex; gap:.8rem; align-items:flex-start;
  padding:1.1rem 1.3rem; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line-strong);
}
.pending-note i { color:var(--ink); font-size:1.05rem; line-height:1.6; flex:none; }
/* min-width:0 — sem isso o parágrafo, como item flex, adota a largura mínima do
   seu conteúdo; com uma URL longa (que não quebra) isso estourava a tela. */
.pending-note p { margin:0; min-width:0; font-size:.94rem; color:var(--text); line-height:1.6; }
/* 'anywhere' (e não 'break-word') porque só ele reduz a largura mínima
   intrínseca — necessário para URLs cruas dentro de grades/flex. */
.pending-note a, .docref-body a, .faq-a a, .legal-doc__pre a { overflow-wrap:anywhere; }

/* Cards de modelos de requerimentos.
   Grid de 6 colunas "finas"; cada card ocupa 2 (span 2) => 3 cards por linha
   em fluxo normal. Isso, mais grid-auto-rows:1fr, garante largura e altura
   iguais para todos os cards, mesmo em linhas diferentes.
   Hoje a lista (MODELOS_REQUERIMENTOS, em content.py) tem exatamente 5 itens:
   3 na 1ª linha (fluxo normal) + 2 centralizados na 2ª (regras nth-child(4)
   e nth-child(5) abaixo, pensadas especificamente para 5 itens). Se a lista
   mudar de tamanho, revisar/remover essas duas regras. */
.docs-grid { display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; gap:1.2rem; margin-bottom:2.8rem; }
.docs-grid .docs-card { grid-column:span 2; }
.docs-grid .docs-card:nth-child(4) { grid-column:2 / span 2; }
.docs-grid .docs-card:nth-child(5) { grid-column:4 / span 2; }
.docs-card {
  display:flex; flex-direction:column;
  padding:1.6rem; border-radius:var(--radius-lg);
  background:var(--card-bg); border:1px solid var(--line); box-shadow:var(--shadow-xs);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.docs-card:hover { border-color:var(--ink); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.docs-card__title { font-size:1.1rem; margin:0 0 .9rem; color:var(--ink); }
.docs-card__title i { color:var(--accent); font-size:1rem; margin-right:.5rem; }
.docs-card__desc { font-size:.92rem; color:var(--text); line-height:1.6; margin:0 0 1.2rem; }
.docs-card__pending { font-size:.9rem; color:var(--muted); line-height:1.6; margin:0 0 1.2rem; }
.docs-card__pending i { color:var(--gray-600); margin-right:.35rem; }
.docs-card .btn { align-self:flex-start; margin-top:auto; }

@media (max-width:992px) {
  .docs-grid { grid-template-columns:repeat(2,1fr); }
  .docs-grid .docs-card,
  .docs-grid .docs-card:nth-child(4),
  .docs-grid .docs-card:nth-child(5) { grid-column:span 1; }
  .docs-grid .docs-card:nth-child(5) { grid-column:1 / -1; max-width:calc(50% - .6rem); margin-inline:auto; }
}

@media (max-width:560px) {
  .docs-grid { grid-template-columns:1fr; }
  .docs-grid .docs-card:nth-child(5) { max-width:none; }
}

/* Card de acesso sem link (ex.: Ouvidoria sem URL oficial cadastrada) */
.link-card--static { cursor:default; }
.link-card--static:hover { border-color:var(--line); box-shadow:none; }
.link-card--static a { color:var(--accent); text-decoration:underline; }

/* "Como funciona" — lista numerada de etapas */
.steps-flow { list-style:none; margin:0; padding:0; display:grid; gap:1.2rem; }
.steps-flow__item {
  display:flex; gap:1.2rem; align-items:flex-start;
  padding:1.4rem 1.5rem; border-radius:var(--radius-lg);
  background:var(--card-bg); border:1px solid var(--line);
}
.steps-flow__num {
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line-strong);
  font-family:var(--font-editorial); font-weight:600; font-size:1rem;
  color:var(--accent);
}
.steps-flow__body h3 { font-size:1.08rem; margin-bottom:.35rem; display:flex; align-items:center; gap:.5rem; }
.steps-flow__body h3 i { color:var(--accent); font-size:.95rem; }
.steps-flow__body p { margin:0; font-size:.94rem; color:var(--text); line-height:1.65; }

/* "Como funciona" — blocos de orientação (protocolo, nota devolutiva) */
.orientacao { padding-top:1.8rem; margin-top:1.8rem; border-top:1px solid var(--line); }
.orientacao:first-of-type { padding-top:0; margin-top:0; border-top:0; }
.orientacao__title { font-size:1.2rem; margin-bottom:.7rem; display:flex; align-items:center; gap:.55rem; }
.orientacao__title i { color:var(--accent); font-size:1rem; }
.orientacao p { font-size:.96rem; color:var(--text); line-height:1.7; margin-bottom:.8rem; }

@media (max-width:560px) {
  .steps-flow__item { padding:1.2rem; gap:.9rem; }
}

/* --- Card de serviço: documentos --------------------------------------
   Estende o .svc-card existente (mesma borda, fundo, hover e ícone), apenas
   acrescentando o bloco de documentos. --- */
/* .svc-card__docs é o "miolo" do card: um flex item que ocupa o espaço
   restante dentro da altura fixa do .svc-card (flex:1 1 auto + min-height:0).
   02/09/2026 (9): o card não expande mais em nenhum estado -- a lista
   completa continua sempre no DOM (nenhum documento é removido/perdido),
   mas .svc-card__doclist tem max-height fixo (recorte de prévia, ~5-6
   linhas conforme o tamanho do texto) com overflow:hidden. É só um
   recorte visual, sem rolagem e sem clique -- para ver a lista inteira,
   "Ver mais"/"Saiba mais" levam à página interna do serviço. */
.svc-card__docs {
  margin-bottom:1.3rem; padding-top:1.2rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden;
}
.svc-card__docs-label {
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .6rem; flex:0 0 auto;
}
.svc-card__doclist {
  list-style:none; padding:0; margin:0; flex:0 0 auto;
  max-height:7rem; overflow:hidden;
}
.svc-card__doclist li {
  position:relative; padding-left:.9rem; margin-bottom:.35rem;
  font-size:.86rem; color:var(--text); line-height:1.5;
  overflow-wrap:anywhere; word-break:break-word;
}
.svc-card__doclist li::before {
  content:""; position:absolute; left:0; top:.55em;
  width:4px; height:4px; border-radius:50%; background:var(--accent);
}
.svc-card__doclist li[hidden] { display:none; }
/* Título de seção dentro do card (cards com mais de uma modalidade/situação,
   ex.: "Via Extrajudicial" / "Via Judicial") -- mesma <ul>, sem marcador de
   lista, ligeiramente destacado das <li> normais. Seletores repetem
   ".svc-card__doclist li" para vencer a especificidade das regras gerais
   de <li> (mesmo class+element+pseudo-element "peso"), em vez de depender
   da ordem de declaração no arquivo. */
.svc-card__doclist li.svc-card__docsection-title {
  list-style:none; padding-left:0; margin:.75rem 0 .35rem; font-size:.72rem;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gray-600); border-top:1px dashed var(--line); padding-top:.6rem;
}
.svc-card__doclist li.svc-card__docsection-title:first-child { margin-top:0; border-top:0; padding-top:0; }
.svc-card__doclist li.svc-card__docsection-title::before { content:none; }
.svc-card__docs-pending { font-size:.86rem; color:var(--muted); line-height:1.5; margin:0; flex:0 0 auto; }
.svc-card__docs-note {
  font-size:.8rem; color:var(--muted); line-height:1.5; margin:.6rem 0 0; font-style:italic;
  flex:0 0 auto; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Página de detalhe do serviço: mesma nota, mas sem o corte de 2 linhas dos
   cards compactos da listagem — aqui o texto completo precisa aparecer
   (30/09/2026). */
.svc-card__docs-note--full {
  display:block; -webkit-line-clamp:unset; overflow:visible;
}
/* Link (não mais botão) -- leva direto para a página interna do serviço,
   exatamente como "Saiba mais" logo abaixo (02/09/2026 (9)). */
.svc-card__more {
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem;
  text-decoration:none; cursor:pointer; flex:0 0 auto;
  font-family:var(--font-body); font-size:.82rem; font-weight:600; color:var(--accent);
}
.svc-card__more i { font-size:.7rem; transition:transform .3s var(--ease); }
.svc-card__more:hover { color:var(--gray-600); }
.svc-card__more:hover i { transform:translateX(4px); }

/* --- Avaliações (Home) ---------------------------------------------------
   Dados reais do Google (Places API (New)) buscados pelo backend e
   cacheados (ver google_reviews.py / app._avaliacoes_home()) — sem fetch no
   navegador. Sem dado real disponível (API fora + sem cache), nota e cards
   somem e fica só o aviso discreto (.reviews-unavailable) e os links de
   fallback. "Leia mais" é um link simples pro Google — não precisa de JS. */
.reviews-summary {
  display:flex; flex-direction:column; align-items:center;
  gap:.5rem; margin-top:2.6rem; margin-bottom:3.2rem;
}
.reviews-summary__row {
  display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap;
  gap:.7rem;
}
.reviews-summary__score {
  font-size:2.1rem; font-weight:700; color:var(--accent); font-family:var(--font-editorial);
  line-height:1;
}
.reviews-summary__score small { font-size:1rem; font-weight:500; color:var(--muted); margin-left:.1rem; }
.reviews-summary__stars { color:var(--accent); font-size:1.3rem; letter-spacing:.1em; }
.reviews-summary__count { color:var(--muted); font-size:.9rem; }
/* Mostrado no lugar do resumo quando a API do Google está indisponível e
   não há cache (avaliacoes.resumo is None) — nunca inventa nota/total. */
.reviews-unavailable {
  text-align:center; color:var(--muted); font-size:.9rem;
  margin:2rem auto 3.2rem; max-width:52ch;
}

.review-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
  max-width:1000px; margin-inline:auto;
}
/* Menos de 3 avaliações com texto vindas do Google: centraliza os cards
   existentes em vez de deixar colunas vazias. */
.review-cards--1 { grid-template-columns:minmax(0,1fr); max-width:340px; }
.review-cards--2 { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:680px; }
.review-card {
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
  padding:2rem 1.8rem; display:flex; flex-direction:column; gap:1.1rem;
  height:100%;
}
.review-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.review-card__head { display:flex; align-items:center; gap:.85rem; }
.review-card__avatar {
  width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--ink); color:#fff;
  border:0;
  font-weight:700; font-size:1rem;
}
.review-card__head strong { display:block; font-size:1.05rem; color:var(--ink); margin-bottom:.15rem; }
.review-card__author { color:inherit; text-decoration:none; }
.review-card__author:hover strong { color:var(--accent); }
.review-card__head span { display:block; font-size:.78rem; color:var(--muted); }
.review-card__stars { color:var(--accent); font-size:.9rem; letter-spacing:.08em; }
.review-card__text {
  font-size:.96rem; color:var(--text); line-height:1.7; margin:0;
  white-space:pre-line;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.review-card__more {
  align-self:flex-start; display:inline-flex; align-items:center; gap:.3rem;
  margin:-.5rem 0 0; padding:0; border:0; background:none;
  font-family:var(--font-body); font-size:.84rem; font-weight:600; color:var(--accent);
  transition:color .2s var(--ease);
}
.review-card__more span { transition:transform .25s var(--ease); }
.review-card__more:hover { color:var(--gray-600); }
.review-card__more:hover span { transform:translateX(3px); }
.review-card__source {
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.72rem; color:var(--muted);
}
.review-card__source i { color:var(--muted); font-size:.74rem; }

@media (max-width:920px) {
  .review-cards { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .review-cards { grid-template-columns:1fr; }
}

/* --- Documentos Necessários (guia de referência) -------------------------
   Reaproveita .faq-item/.faq-q/.faq-a (mesmo acordeão, mesmo JS) e
   .search-bar/.pending-note já existentes; só acrescenta o necessário
   para o conteúdo interno de cada item (notas, "ou", subtítulos). --- */
.docref-item .faq-q { align-items:flex-start; }
.docref-q-label { flex:1; }
.docref-num {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.6rem; height:1.6rem; padding:0 .4rem; margin-right:.7rem;
  border-radius:999px; background:var(--accent-soft); color:var(--accent);
  font-size:.76rem; font-weight:700; vertical-align:middle;
}
.docref-body { padding:0 .25rem 1.3rem; }
.docref-body p { margin:0 0 .9rem; }
.docref-body p:last-child { margin-bottom:0; }
.docref-subhead {
  font-size:.98rem; font-weight:700; color:var(--ink);
  text-transform:uppercase; letter-spacing:.04em;
  margin:1.5rem 0 .8rem;
}
.docref-subhead:first-child { margin-top:0; }
.docref-note {
  margin:.9rem 0; padding:.9rem 1.1rem; border-radius:var(--radius-sm);
  background:var(--surface); border-left:3px solid var(--ink);
}
.docref-note p { margin:0; font-size:.93rem; color:var(--text); }
.docref-or { display:flex; align-items:center; gap:.8rem; margin:.7rem 0; }
.docref-or::before,.docref-or::after { content:""; flex:1; height:1px; background:var(--line); }
.docref-or span {
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); padding:.25rem .75rem; border:1px solid var(--line-strong); border-radius:999px;
}

/* --------------------------------------------------------------------------
   LGPD — navegação e páginas (estrutura/accordion; conteúdo jurídico
   reservado, exceto a Apresentação)
   Reaproveita componentes já existentes (.faq-item/.faq-q/.faq-a, .link-card,
   .leadership-card, .svc-card, .form-card) e acrescenta só o necessário: a
   subnavegação entre as 5 páginas, o indicador de "conteúdo a definir" (para
   os campos que ainda não foram preenchidos) e um bloco de texto simples
   com quebras de linha preservadas (.legal-doc__pre), usado na Apresentação
   e reaproveitável quando o texto das demais páginas for fornecido.
   -------------------------------------------------------------------------- */

/* Subnavegação entre as páginas da LGPD — mesmo visual de .faq-tag, mas como
   links de navegação reais (não filtro em JS). */
.lgpd-subnav { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.6rem; }
.lgpd-subnav__item {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem; border-radius:20px; border:1px solid var(--line); background:var(--card-bg);
  color:var(--text); font-size:.86rem; font-weight:600;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.lgpd-subnav__item i { font-size:.9rem; }
.lgpd-subnav__item:hover { border-color:var(--ink); color:var(--ink); }
.lgpd-subnav__item.is-active { background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }

/* Bloco reservado para texto longo ainda não inserido (mesmo padrão visual
   de .docref-note/.pending-note: fundo sutil + friso dourado à esquerda). */
.content-pending {
  margin:.9rem 0; padding:1rem 1.2rem; border-radius:var(--radius-sm);
  background:var(--surface); border-left:3px solid var(--line-strong);
  color:var(--muted); font-size:.94rem; font-style:italic; line-height:1.6;
}
.content-pending:first-child { margin-top:0; }

/* Marcador inline discreto para campos curtos ainda não preenchidos (nome,
   e-mail, datas etc.) dentro de cards e listas. */
.text-pending { color:var(--muted); font-style:italic; }

/* Encarregado de Dados — espaçamento da lista de atribuições abaixo do
   card em destaque (reaproveita .oficiala-atribuicoes para os itens). */
.lgpd-dpo-atribuicoes { margin-top:2rem; }
.lgpd-dpo-atribuicoes h3 { font-size:1.05rem; margin-bottom:1rem; }

/* Capacitação em LGPD — reaproveita .svc-card; acrescenta a lista de
   metadados (instituição, carga horária, data) em formato rótulo/valor. */
.lgpd-training-meta { display:flex; flex-direction:column; gap:.4rem; margin:.9rem 0 1.1rem; }
.lgpd-training-meta__row { display:flex; gap:.4rem; font-size:.86rem; }
.lgpd-training-meta__row strong { color:var(--ink); font-weight:600; }
.lgpd-training-meta__row span { color:var(--muted); }
.docref-source { font-size:.85rem; color:var(--muted); margin-top:2rem; text-align:center; }

/* Texto simples com quebras de linha/parágrafos preservados (uma quebra =
   nova linha, linha em branco = parágrafo), sem que nenhum parser
   reclassifique listas ou parágrafos. Usado na Apresentação e no texto
   integral da Política/PSI/Encarregado/Capacitação. */
.legal-doc__pre {
  white-space:pre-line; font-family:var(--font-display); font-size:1rem;
  line-height:1.75; color:var(--text); margin:0; word-break:break-word;
  overflow-wrap:break-word;
}

/* Cabeçalho/preâmbulo de um documento (acima do accordion de seções),
   levemente destacado do restante do texto. */
.legal-doc__cabecalho {
  padding-bottom:1.6rem; margin-bottom:1.8rem; border-bottom:1px solid var(--line);
}
.legal-doc__cabecalho .legal-doc__pre { color:var(--ink); }

/* ==========================================================================
   Cards — refinamento (paleta cinza/branco/preto)
   Linguagem única para todos os cards do site:
   · fundo branco, fio cinza claro, sombra neutra e baixa;
   · caixa de ícone quadrada em cinza claro, que vira preta no hover;
   · hover dos cards clicáveis: fio preto + leve elevação + friso preto na base;
   · cards "documento" (liderança, formulários) com friso preto no topo.
   ========================================================================== */

/* Caixa de ícone padrão — preta e sólida já em repouso (antes ficava cinza
   quase apagado, só virando preto no hover, o que deixava os ícones sem
   destaque nenhum na primeira leitura da página). Ganha sombra suave por
   baixo pra flutuar sobre o card branco. O hover ainda dá feedback claro:
   escurece para um cinza-grafite e cresce um pouco (não pode simplesmente
   repetir a mesma cor do repouso). */
.svc-card__icon,.svc-feature__icon,.link-card__icon,.contact-line__icon,
.mvv-card__icon,.emolumentos-card__icon {
  background:var(--ink); color:#fff; border:1px solid var(--ink);
  box-shadow:0 8px 18px -9px rgba(17,17,17,.55);
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-card:hover .svc-card__icon,.svc-feature:hover .svc-feature__icon,
.link-card:hover .link-card__icon,.cat-card:hover .svc-card__icon,
.contact-line--link:hover .contact-line__icon {
  background:var(--gray-700); border-color:var(--gray-700); color:#fff;
  transform:scale(1.08); box-shadow:0 12px 22px -8px rgba(17,17,17,.5);
}

/* Sem o "ponto" animado na base (efeito antigo do dourado); fica só o friso */
.svc-card::before { content:none; }
.svc-card::after,.svc-feature::after { height:3px; }

/* Numeração discreta nos cards de categoria e nos serviços em destaque da
   home — como os atos numerados de uma matrícula (01, 02, 03...). Puro CSS,
   sem alterar o HTML/conteúdo. */
.cat-grid { counter-reset:cat; }
.services-showcase { counter-reset:feat; }
.cat-card { counter-increment:cat; }
.svc-feature { counter-increment:feat; }
.cat-card::before,.svc-feature::before {
  position:absolute; top:1.35rem; right:1.5rem; left:auto; bottom:auto;
  width:auto; height:auto; border-radius:0; background:none; opacity:1; animation:none;
  font-family:var(--font-editorial); font-weight:600; font-size:1.05rem; letter-spacing:.02em;
  color:var(--gray-300); transition:color .35s var(--ease);
}
.cat-card::before { content:counter(cat, decimal-leading-zero); }
.svc-feature::before { content:counter(feat, decimal-leading-zero); }
.cat-card:hover::before,.svc-feature:hover::before { color:var(--ink); animation:none; opacity:1; left:auto; }

/* Cards "documento": friso preto no topo */
.form-card { overflow:hidden; }
.form-card::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--ink); }

/* Avaliações: aspas grandes em cinza claro, como marca d'água */
.review-card { position:relative; overflow:hidden; }
.review-card::before {
  content:"\201C"; position:absolute; top:.2rem; right:1.2rem;
  font-family:var(--font-editorial); font-size:5.5rem; line-height:1; color:var(--gray-100);
  pointer-events:none;
}
.review-card > * { position:relative; }
.reviews-summary__stars,.review-card__stars { color:var(--ink); }

/* Links úteis: seta indicando link externo, que "sai" no hover */
.link-card { position:relative; padding-right:2.8rem; }
.link-card::after {
  content:"\2197"; position:absolute; top:1.1rem; right:1.2rem;
  font-size:1rem; color:var(--gray-400); transition:transform .3s var(--ease), color .3s var(--ease);
}
.link-card:hover::after { color:var(--ink); transform:translate(2px,-2px); }
.link-card--static::after { content:none; }

/* Contato: linha do card com friso à esquerda no hover */
.contact-line { position:relative; overflow:hidden; }
.contact-line::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ink);
  transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease);
}
.contact-line--link:hover::before { transform:scaleY(1); }

/* Valores: número em destaque e friso superior preto no hover */
.value-card { background:var(--card-bg); box-shadow:var(--shadow-xs); }
.value-card__num { font-size:1rem; color:var(--gray-500); transition:color .3s var(--ease); }
.value-card:hover .value-card__num { color:var(--ink); }

/* Missão/Visão: friso superior já existente (::after) agora preto e mais firme */
.mvv-card::after { height:3px; }

/* Membros da equipe e modelos de requerimento */
.member-card,.docs-card { position:relative; overflow:hidden; }
.member-card::after,.docs-card::after {
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.member-card:hover::after,.docs-card:hover::after { transform:scaleX(1); }

/* Vagas: faixa escura com ícone branco; CTA (enviar currículo) segue a
   mesma caixa de ícone preta e sólida do restante do site. */
.vaga-card__icon { background:#fff; color:#111; }
.vaga-card__cta-icon {
  background:var(--ink); color:#fff; border:1px solid var(--ink);
  box-shadow:0 8px 18px -9px rgba(17,17,17,.55);
}
.vaga-card__cta:hover .vaga-card__cta-icon { background:var(--gray-700); border-color:var(--gray-700); transform:scale(1.08); }

/* Etiquetas/pílulas (FAQ, LGPD, abas da estrutura) em cinza neutro */
.faq-tag,.lgpd-subnav__item { background:var(--card-bg); border-color:var(--line-strong); }

/* Movimento reduzido: sem elevação nos cards */
@media (prefers-reduced-motion:reduce) {
  .svc-card:hover,.svc-feature:hover,.cat-card:hover,.link-card:hover,.docs-card:hover,
  .review-card:hover,.value-card:hover,.search-page-row:hover { transform:none; }
}


/* ==========================================================================
   Camada de presença — ícones, navbar, cards e CTAs
   Diagnóstico: tudo vivia num único plano tonal (card branco sobre página
   branca, fio de 1px), com glifos de traço fino, textos secundários a 60-72%
   de opacidade e hovers que só trocavam de cor. Solução, só com grafite,
   cinza e branco:
   1. camadas tonais: chão cinza sob os cards brancos e borda de card própria;
   2. três níveis de ícone: tile grafite "tinta" (primário), tile outline
      (secundário) e tile cinza claro (terciário/menus);
   3. glifos com traço mais grosso (text-stroke) para ler a mesma silhueta
      em tamanho pequeno;
   4. affordance: setas em "chip" que preenchem no hover, navbar com pílula
      de hover/ativo, números como fólios editoriais com filete.
   ========================================================================== */
:root { --line-card:#D2D2D2; --ground:#EDEDED; }

/* 1 · Camadas tonais ------------------------------------------------------ */
.services-hero { background:var(--ground); border-top:1px solid var(--line-card); border-bottom:1px solid var(--line-card); }
.section--gray.structure-hero { background:#fff; border-bottom:1px solid var(--line); }
.svc-card,.svc-feature,.link-card,.contact-line {
  border-color:var(--line-card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(17,17,17,.06), 0 12px 24px -16px rgba(17,17,17,.28);
}
.svc-card:hover,.svc-feature:hover,.link-card:hover { border-color:var(--ink); box-shadow:0 2px 4px rgba(17,17,17,.08), 0 22px 36px -18px rgba(17,17,17,.4); }

/* 2 · Ícones — nível 1: tile grafite com acabamento ------------------------ */
.svc-card__icon,.svc-feature__icon,.link-card__icon,.contact-line__icon,
.mvv-card__icon,.emolumentos-card__icon,.vaga-card__cta-icon {
  background:linear-gradient(155deg,#333 0%,#151515 55%,#0B0B0B 100%);
  border-color:#0B0B0B; color:#fff; -webkit-text-stroke:.45px currentColor;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.05), 0 12px 20px -10px rgba(17,17,17,.65);
}
.svc-card:hover .svc-card__icon,.svc-feature:hover .svc-feature__icon,
.link-card:hover .link-card__icon,.cat-card:hover .svc-card__icon,
.contact-line--link:hover .contact-line__icon,.vaga-card__cta:hover .vaga-card__cta-icon {
  background:linear-gradient(155deg,#4A4A4A 0%,#262626 60%,#141414 100%); border-color:#262626; transform:translateY(-2px) scale(1.06);
}
/* nível 2: tile outline (diferenciais, contato no rodapé de vaga) */
.structure-perks__item i {
  width:40px; height:40px; display:grid; place-items:center; margin-top:0; border-radius:var(--radius-sm);
  background:#fff; border:1.5px solid var(--ink); color:var(--ink); font-size:1.1rem; -webkit-text-stroke:.4px currentColor;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.structure-perks__item:hover i { background:var(--ink); color:#fff; }
.value-card__icon { -webkit-text-stroke:.35px currentColor; }

/* 3 · Navbar --------------------------------------------------------------- */
.site-nav {
  background:linear-gradient(180deg,rgba(8,8,8,.8),rgba(8,8,8,.55));
  -webkit-backdrop-filter:blur(10px) saturate(130%); backdrop-filter:blur(10px) saturate(130%);
  border-bottom-color:rgba(255,255,255,.16);
}
.site-nav.is-scrolled { background:rgba(11,11,11,.96); }
.nav-links a {
  color:rgba(255,255,255,.92); font-weight:600; font-size:.92rem; border-radius:8px;
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.nav-links a:hover { color:#fff; background:rgba(255,255,255,.13); }
.nav-links a.active { color:#fff; background:rgba(255,255,255,.17); }
.nav-links a::after { height:2px; bottom:.3rem; background:#fff; }
.nav-drop__panel a:hover,.nav-drop__panel a.active { background:var(--gray-100); }
.nav-drop > a i.chev { font-size:.72rem; -webkit-text-stroke:.5px currentColor; transition:transform .3s var(--ease); }
.nav-drop:hover > a i.chev,.nav-drop:focus-within > a i.chev { transform:rotate(180deg); }
.nav-search-toggle { border:1px solid rgba(255,255,255,.32); color:#fff; -webkit-text-stroke:.3px currentColor; }
.nav-search-toggle:hover { background:#fff; color:#111; border-color:#fff; }

/* dropdown: painel com friso preto e ícones em tile cinza */
.nav-drop__panel {
  min-width:262px; padding:.5rem; border:1px solid var(--line-card); border-top:2px solid var(--ink);
  box-shadow:0 26px 48px -20px rgba(0,0,0,.6);
}
.nav-drop__panel a { color:var(--ink); font-weight:600; padding:.4rem .55rem; gap:.75rem; }
.nav-drop__panel a:hover { padding-left:.55rem; }
.nav-drop__panel a i {
  width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:8px;
  background:var(--gray-100); border:1px solid var(--line-card); color:var(--ink); font-size:1rem;
  -webkit-text-stroke:.35px currentColor; transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.nav-drop__panel a:hover i { background:var(--ink); border-color:var(--ink); color:#fff; }

/* Acesso rápido: painel mais firme e ícones em círculo */
.quickbar-panel { background:rgba(12,12,12,.7); border-color:rgba(255,255,255,.26); }
.quick-strip a i {
  width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); color:#fff; font-size:1.05rem;
  -webkit-text-stroke:.35px currentColor; transition:background-color .3s var(--ease), color .3s var(--ease);
}
.quick-strip a:hover { background:rgba(255,255,255,.09); }
.quick-strip a:hover i { background:#fff; color:#111; transform:none; }
.footer-contact i { color:#DADADA; -webkit-text-stroke:.3px currentColor; }

/* 4 · CTAs "Saiba mais" / "Explorar categoria" ---------------------------- */
.svc-feature__cta,.cat-card__cta {
  color:var(--ink); font-weight:700; gap:.6rem;
}
.svc-feature__cta i,.cat-card__cta i {
  width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%;
  border:1.5px solid var(--ink); font-size:.78rem; -webkit-text-stroke:.4px currentColor;
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.svc-feature:hover .svc-feature__cta i,.cat-card:hover .cat-card__cta i { background:var(--ink); color:#fff; transform:translateX(4px); }
.cat-card__cta i { width:22px; height:22px; font-size:.68rem; }

/* 5 · Números 01–04 como fólios editoriais --------------------------------- */
.cat-card::before,.svc-feature::before {
  top:1.2rem; right:1.5rem; font-size:1.7rem; font-weight:500; line-height:1; color:#8A8A8A;
  padding-bottom:.4rem;
  background:linear-gradient(currentColor,currentColor) right bottom/1.1rem 1.5px no-repeat;
  transition:color .35s var(--ease), background-size .45s var(--ease);
}
.cat-card:hover::before,.svc-feature:hover::before { color:var(--ink); background-size:100% 1.5px; }

@media (max-width:560px) {
  .quick-strip a i { width:28px; height:28px; font-size:.9rem; }
  .cat-card::before,.svc-feature::before { font-size:1.4rem; }
}
@media (prefers-reduced-motion:reduce) {
  .svc-card:hover .svc-card__icon,.svc-feature:hover .svc-feature__icon,.link-card:hover .link-card__icon,
  .cat-card:hover .svc-card__icon,.svc-feature:hover .svc-feature__cta i,.cat-card:hover .cat-card__cta i { transform:none; }
  .nav-drop:hover > a i.chev { transform:none; }
}

/* botão fantasma do hero: contorno e véu mais firmes sobre a foto */
.btn--ghost-white { border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.1); }
.btn--ghost-white:hover { background:rgba(255,255,255,.2); border-color:#fff; }
.err-wrap .code { color:#8A8A8A; }


/* ==========================================================================
   Rodada 3 — cor nos ícones, Acesso rápido claro, vagas claras, mapas
   e fim da "piscada" entre páginas
   ========================================================================== */

/* Piscada cinza/branca ao trocar de página: no hero (contexto escuro) o token
   --ink vale BRANCO, então `background:var(--ink)` deixava o hero branco até a
   foto carregar. Fundo fixo escuro + crossfade nativo entre documentos. */
.hero-cinematic { background:#0B0B0B; }

/* Paleta de ícones: seis tons sóbrios e dessaturados (sem dourado), ciclados
   por posição do card. Cada card define --tc; tile, CTA, filete e número herdam. */
:root { --tc-default:#2B2B2B; }
.svc-feature:nth-child(6n+1),.cat-card:nth-child(6n+1),.link-card:nth-child(6n+1),.contact-line:nth-child(6n+1),.mvv-card:nth-child(6n+1),.value-card:nth-child(6n+1),.structure-perks__item:nth-child(6n+1),.quick-strip a:nth-child(6n+1),.vaga-card:nth-child(6n+1),.nav-drop__panel li:nth-child(6n+1),.svc-card-slot:nth-child(6n+1) .svc-card { --tc:#2B2B2B; }
.svc-feature:nth-child(6n+2),.cat-card:nth-child(6n+2),.link-card:nth-child(6n+2),.contact-line:nth-child(6n+2),.mvv-card:nth-child(6n+2),.value-card:nth-child(6n+2),.structure-perks__item:nth-child(6n+2),.quick-strip a:nth-child(6n+2),.vaga-card:nth-child(6n+2),.nav-drop__panel li:nth-child(6n+2),.svc-card-slot:nth-child(6n+2) .svc-card { --tc:#2B2B2B; }
.svc-feature:nth-child(6n+3),.cat-card:nth-child(6n+3),.link-card:nth-child(6n+3),.contact-line:nth-child(6n+3),.mvv-card:nth-child(6n+3),.value-card:nth-child(6n+3),.structure-perks__item:nth-child(6n+3),.quick-strip a:nth-child(6n+3),.vaga-card:nth-child(6n+3),.nav-drop__panel li:nth-child(6n+3),.svc-card-slot:nth-child(6n+3) .svc-card { --tc:#2B2B2B; }
.svc-feature:nth-child(6n+4),.cat-card:nth-child(6n+4),.link-card:nth-child(6n+4),.contact-line:nth-child(6n+4),.mvv-card:nth-child(6n+4),.value-card:nth-child(6n+4),.structure-perks__item:nth-child(6n+4),.quick-strip a:nth-child(6n+4),.vaga-card:nth-child(6n+4),.nav-drop__panel li:nth-child(6n+4),.svc-card-slot:nth-child(6n+4) .svc-card { --tc:#2B2B2B; }
.svc-feature:nth-child(6n+5),.cat-card:nth-child(6n+5),.link-card:nth-child(6n+5),.contact-line:nth-child(6n+5),.mvv-card:nth-child(6n+5),.value-card:nth-child(6n+5),.structure-perks__item:nth-child(6n+5),.quick-strip a:nth-child(6n+5),.vaga-card:nth-child(6n+5),.nav-drop__panel li:nth-child(6n+5),.svc-card-slot:nth-child(6n+5) .svc-card { --tc:#2B2B2B; }
.svc-feature:nth-child(6n+6),.cat-card:nth-child(6n+6),.link-card:nth-child(6n+6),.contact-line:nth-child(6n+6),.mvv-card:nth-child(6n+6),.value-card:nth-child(6n+6),.structure-perks__item:nth-child(6n+6),.quick-strip a:nth-child(6n+6),.vaga-card:nth-child(6n+6),.nav-drop__panel li:nth-child(6n+6),.svc-card-slot:nth-child(6n+6) .svc-card { --tc:#2B2B2B; }

.svc-card__icon,.svc-feature__icon,.link-card__icon,.contact-line__icon,
.mvv-card__icon,.emolumentos-card__icon,.vaga-card__cta-icon,.vaga-card__icon {
  background:linear-gradient(155deg,color-mix(in srgb,var(--tc,var(--tc-default)) 78%,#fff) 0%,var(--tc,var(--tc-default)) 55%,color-mix(in srgb,var(--tc,var(--tc-default)) 82%,#000) 100%);
  border-color:color-mix(in srgb,var(--tc,var(--tc-default)) 80%,#000); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 20px -10px color-mix(in srgb,var(--tc,var(--tc-default)) 75%,#000);
}
.svc-card:hover .svc-card__icon,.svc-feature:hover .svc-feature__icon,
.link-card:hover .link-card__icon,.cat-card:hover .svc-card__icon,
.contact-line--link:hover .contact-line__icon,.vaga-card__cta:hover .vaga-card__cta-icon {
  background:linear-gradient(155deg,color-mix(in srgb,var(--tc,var(--tc-default)) 60%,#fff) 0%,color-mix(in srgb,var(--tc,var(--tc-default)) 90%,#fff) 55%,var(--tc,var(--tc-default)) 100%);
  border-color:var(--tc,var(--tc-default));
}
.svc-feature::after,.svc-card::after,.cat-card__accent,.mvv-card::after,.member-card::after,.docs-card::after { background:var(--tc,var(--ink)); }
.svc-feature__cta i,.cat-card__cta i { border-color:var(--tc,var(--ink)); color:var(--tc,var(--ink)); }
.svc-feature:hover .svc-feature__cta i,.cat-card:hover .cat-card__cta i { background:var(--tc,var(--ink)); color:#fff; }
.cat-card:hover::before,.svc-feature:hover::before { color:var(--tc,var(--ink)); }
.structure-perks__item i { border-color:var(--tc,var(--ink)); color:var(--tc,var(--ink)); }
.structure-perks__item:hover i { background:var(--tc,var(--ink)); color:#fff; }
.value-card__icon { color:var(--tc,var(--ink)); font-size:1.3rem; }
.value-card:hover { border-top-color:var(--tc,var(--ink)); }
.nav-drop__panel a i { color:var(--tc,var(--ink)); }
.nav-drop__panel a:hover i { background:var(--tc,var(--ink)); border-color:var(--tc,var(--ink)); color:#fff; }

/* Botão primário: grafite médio em vez de preto chapado; no hero/áreas escuras
   continua branco. */
.btn--primary { background:linear-gradient(180deg,#4B4B4B,#333); border-color:#333; color:#fff; }
.btn--primary:hover { background:linear-gradient(180deg,#5C5C5C,#404040); border-color:#404040; color:#fff; }
.hero-cinematic .btn--primary,.page-banner .btn--primary,.section--dark .btn--primary,.site-footer .btn--primary {
  background:#fff; border-color:#fff; color:#111;
}
.hero-cinematic .btn--primary:hover,.page-banner .btn--primary:hover,.section--dark .btn--primary:hover,.site-footer .btn--primary:hover {
  background:#EDEDED; border-color:#EDEDED; color:#111;
}

/* Acesso rápido: painel claro, divisórias visíveis, ícones coloridos */
.quickbar-panel {
  background:rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.7);
  box-shadow:0 26px 50px -20px rgba(0,0,0,.55); padding:1.15rem 1.5rem 0;
}
.quickbar-panel__head { align-items:center; padding-bottom:1rem; }
.quickbar-panel__head::before,.quickbar-panel__head::after { content:""; flex:1; height:1px; background:#CFCFCF; }
.quickbar-panel__head::before { margin-right:1.1rem; }
.quickbar-panel__head::after { margin-left:1.1rem; }
.quickbar-panel__head strong { color:#111; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; }
.quick-strip { border-top:1px solid #CFCFCF; }
.quick-strip a { color:#111; border-right:1px solid #CFCFCF; padding:1.15rem 1rem; }
.quick-strip a i {
  width:38px; height:38px; font-size:1.1rem; color:#fff; border:0;
  background:linear-gradient(155deg,color-mix(in srgb,var(--tc,var(--tc-default)) 78%,#fff),var(--tc,var(--tc-default)));
  box-shadow:0 8px 14px -8px var(--tc,var(--tc-default));
}
.quick-strip a::after { background:var(--tc,#111); left:1rem; right:1rem; }
.quick-strip a:hover { background:#F1F1F1; }
.quick-strip a:hover i { background:linear-gradient(155deg,color-mix(in srgb,var(--tc,var(--tc-default)) 78%,#fff),var(--tc,var(--tc-default))); color:#fff; transform:scale(1.08); }
@media (max-width:1080px) {
  .quick-strip a { border-right:1px solid #CFCFCF; border-bottom:1px solid #CFCFCF; }
  .quick-strip a:nth-child(2n) { border-right:0; }
  .quick-strip a:nth-last-child(-n+2) { border-bottom:0; }
}
@media (max-width:560px) { .quick-strip a i { width:30px; height:30px; font-size:.95rem; } }

/* Vagas: faixa superior clara, com filete colorido e texto escuro */
.vaga-card__band {
  --ink:#111; --text:#474747; --muted:#5A5A5A; --accent:#111; --accent-contrast:#fff; --line:#E3E3E3;
  background:linear-gradient(180deg,#FAFAFA,#EFEFEF); border-top:4px solid var(--tc,var(--tc-default));
  border-bottom:1px solid var(--line-card);
}
.vaga-card__band h2 { color:#111; }
.vaga-card__eyebrow { color:var(--tc,var(--tc-default)); }
.vaga-card__resumo { color:#474747; }
.vaga-card__block--0 .vaga-card__block-icon { background:#2B2B2B; color:#fff; border:0; }
.vaga-card__block--1 .vaga-card__block-icon { background:#2B2B2B; color:#fff; border:0; }
.vaga-card__block--2 .vaga-card__block-icon { background:#2B2B2B; color:#fff; border:0; }
.vaga-card__block li::before { background:var(--tc,#111); }
.vaga-card__foot { background:#F4F4F4; }

/* Mapas: fundo e moldura claros */
.location-map,.map-embed { background:#fff; border-color:var(--line-card); }
.location-map iframe,.map-embed iframe { color-scheme:light; background:#fff; }


/* ==========================================================================
   Rodada 4 — sem números, Acesso rápido discreto, detalhes, mapas, piscada
   ========================================================================== */
:root { color-scheme:only light; }
html { scrollbar-width:thin; scrollbar-color:#9A9A9A #F1F1F1; }
::selection { background:#2B2B2B; color:#fff; }

/* Piscada ao trocar de página: o conteúdo nascia invisível (opacity 0 + zoom
   + deslocamento) e a página aparecia como "banner escuro + vazio branco".
   O JS agora mostra na hora tudo que já está na primeira tela; o resto entra
   com um fade curto, sem zoom. */
.reveal { transform:translateY(14px); transition:opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1); }
.reveal.in { transform:none; }
.reveal.reveal--instant { transition:none; }

/* Sem os números 01, 02… nos cards */
.cat-card::before,.svc-feature::before { content:none; display:none; }

/* Acesso rápido: ícones pequenos e discretos (tinta clara + glifo colorido) */
.quick-strip a i {
  width:30px; height:30px; font-size:.95rem; -webkit-text-stroke:0;
  color:var(--tc,var(--tc-default));
  background:color-mix(in srgb,var(--tc,var(--tc-default)) 11%,#fff);
  border:1px solid color-mix(in srgb,var(--tc,var(--tc-default)) 28%,#fff);
  box-shadow:none;
}
.quick-strip a:hover i { background:var(--tc,var(--tc-default)); color:#fff; border-color:var(--tc,var(--tc-default)); transform:none; }
@media (max-width:560px) { .quick-strip a i { width:26px; height:26px; font-size:.85rem; } }

/* Hero: "Solicitar serviço" com contorno branco (vidro escuro, sem preenchimento chapado) */
.hero-cinematic .btn--primary {
  background:rgba(12,12,12,.38); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:2px solid #fff; color:#fff; box-shadow:0 14px 30px -14px rgba(0,0,0,.6);
}
.hero-cinematic .btn--primary:hover { background:#fff; border-color:#fff; color:#111; }

/* Detalhes ---------------------------------------------------------------- */
/* estrelas douradas (ouro escuro: 3,3:1 sobre branco) */
.reviews-summary__stars,.review-card__stars { color:#B8860B; }
.review-card__stars { letter-spacing:.12em; }
/* selo do Google em quatro cores */
.review-card__source i {
  background:conic-gradient(from -45deg,#EA4335 0 25%,#4285F4 0 50%,#34A853 0 75%,#FBBC05 0);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-size:.85rem;
}
/* avatares das avaliações com o mesmo ciclo de cores dos ícones */
.review-card:nth-child(6n+1){--tc:#2B2B2B} .review-card:nth-child(6n+2){--tc:#2B2B2B} .review-card:nth-child(6n+3){--tc:#2B2B2B} .review-card:nth-child(6n+4){--tc:#2B2B2B} .review-card:nth-child(6n+5){--tc:#2B2B2B} .review-card:nth-child(6n+6){--tc:#2B2B2B}
.review-card__avatar { background:linear-gradient(155deg,color-mix(in srgb,var(--tc,var(--tc-default)) 78%,#fff),var(--tc,var(--tc-default))); }
/* WhatsApp e Instagram com a cor da própria marca */
.contact-line:has(.bi-whatsapp) { --tc:#2B2B2B; }
.contact-line:has(.bi-instagram) { --tc:#2B2B2B; }
.footer-contact .bi-whatsapp { color:rgba(255,255,255,.85); }
.footer-contact .bi-instagram { color:rgba(255,255,255,.85); }
.footer-social a:hover { background:#fff; border-color:#fff; color:#111; color:#fff; }
.btn .bi-whatsapp { color:#2B2B2B; }
.btn--secondary:hover .bi-whatsapp { color:rgba(255,255,255,.85); }
/* ícones semânticos de aviso/informação */
.section .bi-info-circle,.section .bi-info-circle-fill { color:#2B2B2B; }
.section .bi-exclamation-triangle,.section .bi-exclamation-triangle-fill { color:#5A5A5A; }
/* selo "Vigência" */
.emolumentos-card__badge { background:color-mix(in srgb,var(--tc-default) 10%,#fff); border-color:color-mix(in srgb,var(--tc-default) 32%,#fff); color:#2B2B2B; }

/* Entrada de conteúdo por rolagem, em CSS puro (Chrome/Edge): quem já está na
   primeira tela nasce visível — nada de página "vazia" enquanto o JS carrega. */
@supports (animation-timeline:view()) {
  .reveal,.reveal.in { opacity:1; transform:none; transition:none; animation:revealUp linear both; animation-timeline:view(); animation-range:entry 0% entry 35%; }
  @keyframes revealUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
}
@media (prefers-reduced-motion:reduce) { .reveal,.reveal.in { animation:none; opacity:1; transform:none; } }

/* ==========================================================================
   Rodada 7 — refinamento institucional
   Menos "sistema de componentes": cantos mais retos, sem blur, sem elevação no
   hover, listas e colunas com fio no lugar de cards, bloco grafite de contraste.
   ========================================================================== */
:root {
  --shadow-xs:none;
  --shadow-sm:0 1px 2px rgba(17,17,17,.06);
  --shadow-md:0 2px 8px -2px rgba(17,17,17,.14);
  --shadow-lg:0 6px 18px -8px rgba(17,17,17,.28);
  --ground:#F5F5F4; --surface:#F5F5F4;
}

/* sem blur/vidro */
.site-nav { -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(180deg,rgba(8,8,8,.9),rgba(8,8,8,.74)); }
.hero-info-card,.quickbar-panel,.hero-cinematic .btn--primary { -webkit-backdrop-filter:none; backdrop-filter:none; }
.quickbar-panel { background:#fff; border-color:#fff; box-shadow:0 12px 28px -16px rgba(0,0,0,.5); }
.hero-cinematic .btn--primary { background:rgba(12,12,12,.5); box-shadow:none; }
.hero-cinematic .btn--primary:hover { background:#fff; }

/* sem elevação no hover: o estado é dado por fio/cor */
.btn--secondary:hover,.btn--white:hover,.btn--ghost-white:hover,.svc-card:hover,.value-card:hover,
.link-card:hover,.docs-card:hover,.review-card:hover,.svc-feature:hover,.footer-social a:hover,
.svc-feature:hover .svc-feature__icon,.quick-strip a:hover i { transform:none; }
.btn--secondary:hover,.btn--white:hover { box-shadow:none; }
.svc-card:hover,.value-card:hover,.link-card:hover,.docs-card:hover { box-shadow:none; }

/* ícones: cor sólida e contida, sem gradiente nem brilho */
.svc-card__icon,.svc-feature__icon,.link-card__icon,.contact-line__icon,
.svc-card:hover .svc-card__icon,.svc-feature:hover .svc-feature__icon,.link-card:hover .link-card__icon,.contact-line:hover .contact-line__icon {
  background:color-mix(in srgb,var(--tc,var(--tc-default)) 84%,#2a2a2a); border:0; box-shadow:none; border-radius:var(--radius-sm);
}

/* elementos só decorativos */
.home-divider,.structure-hero__divider,.leadership-category,.section-divider,.value-card__num,.cat-intro { display:none; }
.review-card::before { content:none; display:none; }

/* Home · instalações: bloco grafite de contraste */
.section--gray.structure-hero {
  --ink:#fff; --text:rgba(255,255,255,.74); --muted:rgba(255,255,255,.6); --line:rgba(255,255,255,.16); --line-strong:rgba(255,255,255,.28);
  --accent:#fff; --accent-contrast:#111; --card-bg:transparent;
  background:#161616; color:var(--text);
}
.structure-hero .eyebrow { color:rgba(255,255,255,.6); }
.structure-hero__title { font-size:clamp(2rem,3.6vw,2.8rem); }
.structure-carousel__viewport { border:0; box-shadow:none; border-radius:var(--radius); }
.structure-carousel__tabs { justify-content:flex-start; gap:0; margin-top:0; border-bottom:1px solid var(--line); }
.structure-carousel__tab { border:0; border-radius:0; background:none; color:rgba(255,255,255,.66); padding:1rem 1.4rem .9rem; border-bottom:2px solid transparent; margin-bottom:-1px; }
.structure-carousel__tab:hover { color:#fff; border-color:transparent; }
.structure-carousel__tab.is-active { background:none; color:#fff; border-bottom-color:#fff; }
.structure-perks { margin-top:2.6rem; border-top:0; padding-top:0; }
.structure-perks__item i,.structure-perks__item:hover i { background:none; border:0; width:auto; height:auto; padding:0; color:rgba(255,255,255,.85); font-size:1.15rem; }
.structure-perks__item strong { color:#fff; }
.structure-perks__item span { color:rgba(255,255,255,.7); }


.services-hero { padding-block:clamp(4.5rem,8vw,6.5rem); }
.btn--primary { background:#2B2B2B; border-color:#2B2B2B; box-shadow:none; }
.btn--primary:hover { background:#444; border-color:#444; box-shadow:none; }
.hero-cinematic .btn--primary,.page-banner .btn--primary,.section--dark .btn--primary,.site-footer .btn--primary { box-shadow:none; }
.hero-cinematic .btn--primary { background:rgba(12,12,12,.5); border-color:#fff; }
.hero-cinematic .btn--primary:hover,.page-banner .btn--primary:hover,.section--dark .btn--primary:hover,.site-footer .btn--primary:hover { background:#EDEDED; border-color:#EDEDED; }
.hero-cinematic .btn--primary:hover { background:#fff; }
.structure-carousel__content { padding-left:5rem; }
@media (max-width:767px) { .structure-carousel__content { padding-left:1.4rem; } }
@media (max-width:767px) { .structure-carousel__nav { display:none; } }

/* ==========================================================================
   Rodada 8 — paleta única (grafite), cantos arredondados, mapas claros,
   responsáveis em coluna
   ========================================================================== */
/* Paleta: um único tom de destaque (grafite) para ícones, filetes e estados.
   O ciclo de cores por categoria foi removido. */
:root { --tc-default:#2B2B2B; }
.review-card__source i { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--muted); -webkit-text-fill-color:currentColor; }
.review-card__avatar { background:#2B2B2B; }

/* Cantos: raio único e discreto em cards, mapas, vagas e blocos */
.location-map,.map-embed,.vaga-card,.leadership-card,.review-card,.svc-feature,.svc-card,.cat-card,.link-card,.docs-card,.value-card,.mvv-card,.member-card,.emolumentos-card,.contact-line,.institutional-photo,.structure-carousel__viewport { border-radius:var(--radius-lg); }
.location-map iframe,.map-embed iframe { border-radius:inherit; }

/* Mapas: apresentação clara. Se o sistema do visitante estiver em modo escuro e o
   Google desenhar o mapa escuro, a moldura inverte o desenho para o claro. */
.location-map,.map-embed { background:#EDEDED; border:1px solid var(--line-strong); }


/* Responsáveis: um abaixo do outro, Oficiala em destaque */
.leadership-stack { max-width:820px; gap:1.5rem; }
.leadership-card--primary { padding:2.3rem 2.4rem; }
.leadership-card--primary .leadership-card__text strong { font-size:1.6rem; }
.leadership-card--secondary { padding:1.8rem 2.4rem; background:var(--surface); box-shadow:none; }
.leadership-card--secondary::before { background:var(--gray-400); height:2px; }
.leadership-card--secondary .leadership-card__text strong { font-size:1.25rem; }
.leadership-card__badges { grid-template-columns:repeat(2,1fr); gap:.6rem 1.4rem; }
.leadership-card--secondary .leadership-card__badges { grid-template-columns:repeat(2,1fr); }
.leadership-card__badge { background:none; border-left:0; border-top:1px solid var(--line-strong); border-radius:0; padding:.6rem 0 0; }
.leadership-card .leadership-card__text .leadership-card__badge strong { font-family:var(--font-body); font-size:.82rem; font-weight:700; line-height:1.4; }
.leadership-card__badge span { line-height:1.4; }
@media (max-width:640px) { .leadership-card--primary,.leadership-card--secondary { padding:1.6rem 1.4rem; } .leadership-card__badges,.leadership-card--secondary .leadership-card__badges { grid-template-columns:1fr; } }


/* ==========================================================================
   Rodada 10 — mesma versão anterior, cor só como detalhe.
   Estrutura e cards ficam neutros; ícones, indicadores e estados carregam a
   cor, em tinta suave (fundo claro + glifo colorido), sem gradiente.
   ========================================================================== */
:root { --tc-default:#1F6F6B; }
.svc-feature:nth-child(6n+1),.cat-card:nth-child(6n+1),.link-card:nth-child(6n+1),.contact-line:nth-child(6n+1),.mvv-card:nth-child(6n+1),.value-card:nth-child(6n+1),.structure-perks__item:nth-child(6n+1),.quick-strip a:nth-child(6n+1),.vaga-card:nth-child(6n+1),.nav-drop__panel li:nth-child(6n+1),.svc-card-slot:nth-child(6n+1) .svc-card { --tc:#1F6F6B; }
.svc-feature:nth-child(6n+2),.cat-card:nth-child(6n+2),.link-card:nth-child(6n+2),.contact-line:nth-child(6n+2),.mvv-card:nth-child(6n+2),.value-card:nth-child(6n+2),.structure-perks__item:nth-child(6n+2),.quick-strip a:nth-child(6n+2),.vaga-card:nth-child(6n+2),.nav-drop__panel li:nth-child(6n+2),.svc-card-slot:nth-child(6n+2) .svc-card { --tc:#8C2F3F; }
.svc-feature:nth-child(6n+3),.cat-card:nth-child(6n+3),.link-card:nth-child(6n+3),.contact-line:nth-child(6n+3),.mvv-card:nth-child(6n+3),.value-card:nth-child(6n+3),.structure-perks__item:nth-child(6n+3),.quick-strip a:nth-child(6n+3),.vaga-card:nth-child(6n+3),.nav-drop__panel li:nth-child(6n+3),.svc-card-slot:nth-child(6n+3) .svc-card { --tc:#56702B; }
.svc-feature:nth-child(6n+4),.cat-card:nth-child(6n+4),.link-card:nth-child(6n+4),.contact-line:nth-child(6n+4),.mvv-card:nth-child(6n+4),.value-card:nth-child(6n+4),.structure-perks__item:nth-child(6n+4),.quick-strip a:nth-child(6n+4),.vaga-card:nth-child(6n+4),.nav-drop__panel li:nth-child(6n+4),.svc-card-slot:nth-child(6n+4) .svc-card { --tc:#5E4390; }
.svc-feature:nth-child(6n+5),.cat-card:nth-child(6n+5),.link-card:nth-child(6n+5),.contact-line:nth-child(6n+5),.mvv-card:nth-child(6n+5),.value-card:nth-child(6n+5),.structure-perks__item:nth-child(6n+5),.quick-strip a:nth-child(6n+5),.vaga-card:nth-child(6n+5),.nav-drop__panel li:nth-child(6n+5),.svc-card-slot:nth-child(6n+5) .svc-card { --tc:#B24E27; }
.svc-feature:nth-child(6n+6),.cat-card:nth-child(6n+6),.link-card:nth-child(6n+6),.contact-line:nth-child(6n+6),.mvv-card:nth-child(6n+6),.value-card:nth-child(6n+6),.structure-perks__item:nth-child(6n+6),.quick-strip a:nth-child(6n+6),.vaga-card:nth-child(6n+6),.nav-drop__panel li:nth-child(6n+6),.svc-card-slot:nth-child(6n+6) .svc-card { --tc:#5D5E5E; }
.review-card:nth-child(6n+1){--tc:#1F6F6B} .review-card:nth-child(6n+2){--tc:#8C2F3F} .review-card:nth-child(6n+3){--tc:#56702B} .review-card:nth-child(6n+4){--tc:#5E4390} .review-card:nth-child(6n+5){--tc:#B24E27} .review-card:nth-child(6n+6){--tc:#5D5E5E} 
.contact-line:has(.bi-whatsapp) { --tc:#1F9D55; }
.contact-line:has(.bi-instagram) { --tc:#C13584; }

/* ícones em tinta suave: a cor é o glifo, não o bloco */
.svc-card__icon,.svc-feature__icon,.link-card__icon,.contact-line__icon,
.mvv-card__icon,.emolumentos-card__icon,.vaga-card__cta-icon,.vaga-card__icon {
  background:color-mix(in srgb,var(--tc,var(--tc-default)) 11%,#fff);
  border:1px solid color-mix(in srgb,var(--tc,var(--tc-default)) 28%,#fff);
  color:var(--tc,var(--tc-default)); box-shadow:none;
}
.svc-card:hover .svc-card__icon,.svc-feature:hover .svc-feature__icon,
.link-card:hover .link-card__icon,.cat-card:hover .svc-card__icon,
.contact-line--link:hover .contact-line__icon,.vaga-card__cta:hover .vaga-card__cta-icon {
  background:var(--tc,var(--tc-default)); border-color:var(--tc,var(--tc-default)); color:#fff;
}
.review-card__avatar { background:var(--tc,#5D5E5E); color:#fff; }
.review-card__source i { background:conic-gradient(from -45deg,#EA4335 0 25%,#4285F4 0 50%,#34A853 0 75%,#FBBC05 0); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

/* vagas: mesma identidade em todas (filete neutro); só os três ícones internos têm cor */
.vaga-card { --tc:#5D5E5E !important; }
.vaga-card__eyebrow { color:#5D5E5E; }
.vaga-card__block--0 .vaga-card__block-icon { background:color-mix(in srgb,#1F6F6B 12%,#fff); color:#1F6F6B; border:1px solid color-mix(in srgb,#1F6F6B 30%,#fff); }
.vaga-card__block--1 .vaga-card__block-icon { background:color-mix(in srgb,#B24E27 12%,#fff); color:#B24E27; border:1px solid color-mix(in srgb,#B24E27 30%,#fff); }
.vaga-card__block--2 .vaga-card__block-icon { background:color-mix(in srgb,#5E4390 12%,#fff); color:#5E4390; border:1px solid color-mix(in srgb,#5E4390 30%,#fff); }
.vaga-card__cta-icon { --tc:#5D5E5E; }
.vaga-card .vaga-card__icon { --tc:#5D5E5E; }

/* estados e detalhes */
.emolumentos-card__badge { color:#14524E; }
.section .bi-info-circle,.section .bi-info-circle-fill { color:#5D5E5E; }
.section .bi-exclamation-triangle,.section .bi-exclamation-triangle-fill { color:#B26A00; }
.btn .bi-whatsapp { color:#1F9D55; }
.footer-contact .bi-whatsapp { color:#5BD98A; }
.footer-contact .bi-instagram { color:#F08AB9; }
.footer-social a:hover { background:linear-gradient(45deg,#F9A03F,#DD2A7B,#8134AF); border-color:transparent; color:#fff; }

/* ==========================================================================
   Rodada 11 — ícones em tinta translúcida e dessaturada (linha da referência):
   fundo levemente colorido, glifo na mesma família, sem brilho nem saturação.
   ========================================================================== */
:root { --tc-default:#4F7F7B; }
.svc-feature:nth-child(6n+1),.cat-card:nth-child(6n+1),.link-card:nth-child(6n+1),.contact-line:nth-child(6n+1),.mvv-card:nth-child(6n+1),.value-card:nth-child(6n+1),.structure-perks__item:nth-child(6n+1),.quick-strip a:nth-child(6n+1),.vaga-card:nth-child(6n+1),.nav-drop__panel li:nth-child(6n+1),.svc-card-slot:nth-child(6n+1) .svc-card { --tc:#4F7F7B; }
.svc-feature:nth-child(6n+2),.cat-card:nth-child(6n+2),.link-card:nth-child(6n+2),.contact-line:nth-child(6n+2),.mvv-card:nth-child(6n+2),.value-card:nth-child(6n+2),.structure-perks__item:nth-child(6n+2),.quick-strip a:nth-child(6n+2),.vaga-card:nth-child(6n+2),.nav-drop__panel li:nth-child(6n+2),.svc-card-slot:nth-child(6n+2) .svc-card { --tc:#8A5560; }
.svc-feature:nth-child(6n+3),.cat-card:nth-child(6n+3),.link-card:nth-child(6n+3),.contact-line:nth-child(6n+3),.mvv-card:nth-child(6n+3),.value-card:nth-child(6n+3),.structure-perks__item:nth-child(6n+3),.quick-strip a:nth-child(6n+3),.vaga-card:nth-child(6n+3),.nav-drop__panel li:nth-child(6n+3),.svc-card-slot:nth-child(6n+3) .svc-card { --tc:#6B7B4A; }
.svc-feature:nth-child(6n+4),.cat-card:nth-child(6n+4),.link-card:nth-child(6n+4),.contact-line:nth-child(6n+4),.mvv-card:nth-child(6n+4),.value-card:nth-child(6n+4),.structure-perks__item:nth-child(6n+4),.quick-strip a:nth-child(6n+4),.vaga-card:nth-child(6n+4),.nav-drop__panel li:nth-child(6n+4),.svc-card-slot:nth-child(6n+4) .svc-card { --tc:#74679A; }
.svc-feature:nth-child(6n+5),.cat-card:nth-child(6n+5),.link-card:nth-child(6n+5),.contact-line:nth-child(6n+5),.mvv-card:nth-child(6n+5),.value-card:nth-child(6n+5),.structure-perks__item:nth-child(6n+5),.quick-strip a:nth-child(6n+5),.vaga-card:nth-child(6n+5),.nav-drop__panel li:nth-child(6n+5),.svc-card-slot:nth-child(6n+5) .svc-card { --tc:#A5715A; }
.svc-feature:nth-child(6n+6),.cat-card:nth-child(6n+6),.link-card:nth-child(6n+6),.contact-line:nth-child(6n+6),.mvv-card:nth-child(6n+6),.value-card:nth-child(6n+6),.structure-perks__item:nth-child(6n+6),.quick-strip a:nth-child(6n+6),.vaga-card:nth-child(6n+6),.nav-drop__panel li:nth-child(6n+6),.svc-card-slot:nth-child(6n+6) .svc-card { --tc:#5F6B75; }
.review-card:nth-child(6n+1){--tc:#4F7F7B} .review-card:nth-child(6n+2){--tc:#8A5560} .review-card:nth-child(6n+3){--tc:#6B7B4A} .review-card:nth-child(6n+4){--tc:#74679A} .review-card:nth-child(6n+5){--tc:#A5715A} .review-card:nth-child(6n+6){--tc:#5F6B75} 
.contact-line:has(.bi-whatsapp) { --tc:#4F8A66; }
.contact-line:has(.bi-instagram) { --tc:#9A5C7C; }

.svc-card__icon,.svc-feature__icon,.link-card__icon,.contact-line__icon,
.mvv-card__icon,.emolumentos-card__icon,.vaga-card__cta-icon,.vaga-card__icon,
.quick-strip a i,.review-card__avatar {
  background:color-mix(in srgb,var(--tc,var(--tc-default)) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--tc,var(--tc-default)) 24%,transparent);
  color:var(--tc,var(--tc-default)); box-shadow:none;
}
.svc-card:hover .svc-card__icon,.svc-feature:hover .svc-feature__icon,
.link-card:hover .link-card__icon,.cat-card:hover .svc-card__icon,
.contact-line--link:hover .contact-line__icon,.vaga-card__cta:hover .vaga-card__cta-icon,
.quick-strip a:hover i,.nav-drop__panel a:hover i {
  background:color-mix(in srgb,var(--tc,var(--tc-default)) 26%,transparent);
  border-color:color-mix(in srgb,var(--tc,var(--tc-default)) 40%,transparent);
  color:var(--tc,var(--tc-default));
}
.value-card__icon,.nav-drop__panel a i,.gallery-tile i { color:var(--tc,var(--tc-default)); }
.vaga-card .vaga-card__icon,.vaga-card__cta-icon { --tc:#5F6B75; }
.vaga-card__block--0 .vaga-card__block-icon { background:color-mix(in srgb,#4F7F7B 15%,transparent); color:#4F7F7B; border:1px solid color-mix(in srgb,#4F7F7B 26%,transparent); }
.vaga-card__block--1 .vaga-card__block-icon { background:color-mix(in srgb,#A5715A 15%,transparent); color:#A5715A; border:1px solid color-mix(in srgb,#A5715A 26%,transparent); }
.vaga-card__block--2 .vaga-card__block-icon { background:color-mix(in srgb,#74679A 15%,transparent); color:#74679A; border:1px solid color-mix(in srgb,#74679A 26%,transparent); }
.svc-feature__cta i,.cat-card__cta i { border-color:color-mix(in srgb,var(--tc,var(--ink)) 55%,transparent); color:var(--tc,var(--ink)); }
.svc-feature:hover .svc-feature__cta i,.cat-card:hover .cat-card__cta i { background:color-mix(in srgb,var(--tc,var(--ink)) 18%,transparent); color:var(--tc,var(--ink)); }
.btn .bi-whatsapp { color:#4F8A66; }
.footer-contact .bi-whatsapp { color:#8DBBA0; }
.footer-contact .bi-instagram { color:#C79AB3; }
.footer-social a:hover { background:#fff; border-color:#fff; color:#111; }
.section .bi-exclamation-triangle,.section .bi-exclamation-triangle-fill { color:#9A7442; }
.emolumentos-card__badge { color:#3E6663; }

/* Hero: os dois botões em vidro escuro discreto, integrados à foto.
   Só cor/borda/ícone: padding, fonte e bordas (espessura) seguem iguais. */
.hero-cinematic .hero-cinematic__actions .btn--primary,
.hero-cinematic .hero-cinematic__actions .btn--ghost-white {
  background:rgba(10,14,20,.55); color:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.45); box-shadow:none;
}
.hero-cinematic .hero-cinematic__actions .btn--primary:hover,
.hero-cinematic .hero-cinematic__actions .btn--ghost-white:hover {
  background:rgba(10,14,20,.72); color:#fff; border-color:rgba(255,255,255,.7); transform:none;
}
.hero-cinematic .hero-cinematic__actions .btn i { color:rgba(255,255,255,.72); }

/* ==========================================================================
   Rodada 12 — cor de apoio onde ainda havia ícone/detalhe cinza ou preto
   (mesma paleta dessaturada dos ícones; a estrutura segue neutra)
   ========================================================================== */
/* ícones de título nas páginas de serviço (estilo inline usa cinza) */
h2 > i.bi[style*="blue-600"],h3 > i.bi[style*="blue-600"] { color:#4F7F7B !important; }
h2 > i.bi-signpost-split[style*="blue-600"] { color:#5F6B75 !important; }
h3 > i.bi-people[style*="blue-600"] { color:#74679A !important; }
h3 > i.bi-clock[style*="blue-600"] { color:#A5715A !important; }
h2 > i.bi-book[style*="blue-600"] { color:#8A5560 !important; }

/* FAQ, documentos, emolumentos, contato, vagas */
.faq-q i { color:#4F7F7B; }
.docs-card:nth-child(6n+1){--tc:#4F7F7B} .docs-card:nth-child(6n+2){--tc:#8A5560} .docs-card:nth-child(6n+3){--tc:#6B7B4A}
.docs-card:nth-child(6n+4){--tc:#74679A} .docs-card:nth-child(6n+5){--tc:#A5715A} .docs-card:nth-child(6n+6){--tc:#5F6B75}
.docs-card__title i,.docs-card .btn i,.svc-card__more i,.member-card .btn i { color:var(--tc,#4F7F7B); }
.services-ed__more i { color:var(--tc,#4F7F7B); }
.contact-ed__facts i { color:#4F7F7B; }
.contact-ed__facts div:nth-child(2) i { color:#A5715A; }
.vaga-card__email i { color:#4F7F7B; }
.emolumentos-card__meta i { color:#A5715A; }

/* rodapé: ícones em tons claros dessaturados */
.footer-contact .bi-whatsapp { color:#8DBBA0; }
.footer-contact .bi-instagram { color:#C79AB3; }

/* página da Oficiala / Substituto: linha do tempo e citação */
.off-timeline-item__dot { background:#4F7F7B; }
.oficiala-hero__quote { border-left-color:#4F7F7B; }
.off-timeline-item__year { color:#4F7F7B; }

/* Home: Oficiala e Substituto com cor de apoio */
.leadership-card--primary { --tc:#4F7F7B; }
.leadership-card--secondary { --tc:#74679A; background:color-mix(in srgb,var(--tc) 5%,#fff); }
.leadership-card--primary::before,.leadership-card--secondary::before { background:var(--tc); height:3px; }
.leadership-card__tag {
  padding:.28rem .7rem; border-radius:999px; margin-bottom:.9rem; align-self:flex-start;
  background:color-mix(in srgb,var(--tc) 13%,transparent); color:color-mix(in srgb,var(--tc) 72%,#000);
}
.leadership-card__text > span { color:color-mix(in srgb,var(--tc) 72%,#000); }
.leadership-card .leadership-card__text .leadership-card__badge strong { color:color-mix(in srgb,var(--tc) 72%,#000); }
.leadership-card__badge { border-top-color:color-mix(in srgb,var(--tc) 28%,#fff); }
.leadership-card .services-ed__more,.leadership-card .services-ed__more i { color:color-mix(in srgb,var(--tc) 72%,#000); }

/* ==========================================================================
   Rodada 13 — tema escuro desenhado à mão (equivale ao site com Dark Reader,
   mas com contraste, ícones e mapas ajustados). Grafite azulado neutro,
   cards levemente mais claros que o fundo, ícones em tinta translúcida.
   ========================================================================== */
:root {
  color-scheme:dark;
  --page-bg:#111418; --surface:#15191E; --ground:#15191E; --card-bg:#1A1F25;
  --ink:#F1F3F5; --text:#B9C0C8; --muted:#8C949D;
  --line:#262C33; --line-strong:#343B44; --line-card:#2B323A;
  --accent:#E9ECEF; --accent-hover:#C4CAD1; --accent-soft:rgba(255,255,255,.08); --accent-contrast:#111418; --accent-press:#FFFFFF;
  --gray-50:#15191E; --gray-100:#1D2228; --gray-200:#2A3038; --gray-300:#3A424B; --gray-400:#6E7781; --gray-500:#8C949D; --gray-600:#A7AFB8; --gray-700:#C4CAD1;
  --blue-600:#A7AFB8; --blue-500:#A7AFB8; --blue-400:#6E7781; --blue-100:#2A3038;
  --shadow-xs:none; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px -8px rgba(0,0,0,.6); --shadow-lg:0 12px 30px -12px rgba(0,0,0,.7);
  --tc-default:#7FB3AD;
}
html,body { background:#111418; color:var(--text); }
::selection { background:#3A4550; color:#fff; }
html { scrollbar-color:#3A424B #111418; }
.section--gray,.section--gray.structure-hero { background:var(--surface); }
.section--gray.structure-hero { background:#0D1013; }
#avaliacoes { background:var(--surface); }
.services-hero { background:var(--surface); }

/* nav e painéis dentro dela */
.nav-drop__panel,.nav-search__panel {
  --ink:#F1F3F5; --text:#B9C0C8; --muted:#8C949D; --line:#2B323A; --line-strong:#343B44;
  --surface:#1D2228; --card-bg:#1A1F25; --accent:#E9ECEF; --accent-hover:#C4CAD1; --accent-soft:rgba(255,255,255,.08); --accent-contrast:#111418;
}
.nav-drop__panel { background:#181D22; border-color:#2B323A; }
.nav-drop__panel a:hover,.nav-drop__panel a.active { background:#222831; }

/* botões */
.btn--primary { background:#232930; border-color:#39414A; color:#F1F3F5; }
.btn--primary:hover { background:#2D343C; border-color:#4A535D; color:#fff; }
.btn--secondary { background:transparent; border-color:#39414A; color:#F1F3F5; }
.btn--secondary:hover { background:#232930; border-color:#4A535D; color:#fff; }
.hero-cinematic .btn--primary:hover,.page-banner .btn--primary:hover,.section--dark .btn--primary:hover,.site-footer .btn--primary:hover { background:#232930; border-color:#4A535D; color:#fff; }
.hero-cinematic .btn--primary,.page-banner .btn--primary,.section--dark .btn--primary,.site-footer .btn--primary { background:#232930; border-color:#39414A; color:#fff; }

/* acesso rápido */
.quickbar-panel { background:rgba(17,20,24,.88); border-color:#2B323A; box-shadow:0 20px 44px -18px rgba(0,0,0,.6); }
.quickbar-panel__head::before,.quickbar-panel__head::after { background:#2B323A; }
.quickbar-panel__head strong { color:#DDE1E5; }
.quick-strip { border-top-color:#2B323A; }
.quick-strip a { color:#F1F3F5; border-right-color:#2B323A; }
.quick-strip a:hover { background:rgba(255,255,255,.05); }

/* cards e superfícies */
.svc-card,.svc-feature,.cat-card,.link-card,.docs-card,.value-card,.mvv-card,.member-card,.emolumentos-card,.contact-line,
.leadership-card,.review-card,.vaga-card,.form-card,.faq-item,.gallery-tile,.legal-card,.info-card { background:var(--card-bg); border-color:var(--line-card); }
.leadership-card--secondary { background:#161B20; }
.leadership-card--primary::before,.leadership-card--secondary::before { opacity:.9; }
.location-map,.map-embed { background:#1A1F25; border-color:#2B323A; }
.location-map iframe,.map-embed iframe { color-scheme:light; background:#fff; }
.oficiala-hero__quote { background:#161B20; }
.emolumentos-card__badge { background:color-mix(in srgb,var(--tc-default) 14%,transparent); border-color:color-mix(in srgb,var(--tc-default) 30%,transparent); color:#A9D2CD; }

/* formulários */
input,select,textarea,.form-control { background:#151A1F; color:#F1F3F5; border-color:#343B44; }
input::placeholder,textarea::placeholder { color:#7B848E; }
.flash.sucesso { background:#15231C; color:#9FD3B4; border-color:#25402F; }

/* vagas: faixa escura consistente */
.vaga-card__band { --ink:#F1F3F5; --text:#B9C0C8; --muted:#8C949D; background:#1D2228; border-top:3px solid #4A535D; border-bottom:1px solid #2B323A; }
.vaga-card__band h2 { color:#F1F3F5; }
.vaga-card__eyebrow { color:#9BA9B7; }
.vaga-card__resumo { color:#B9C0C8; }
.vaga-card__foot { background:#161B20; }
.vaga-card .vaga-card__icon,.vaga-card__cta-icon { --tc:#9BA9B7; }

/* ícones: mesmo tratamento, em tons claros dessaturados */
.svc-feature:nth-child(6n+1),.cat-card:nth-child(6n+1),.link-card:nth-child(6n+1),.contact-line:nth-child(6n+1),.mvv-card:nth-child(6n+1),.value-card:nth-child(6n+1),.structure-perks__item:nth-child(6n+1),.quick-strip a:nth-child(6n+1),.vaga-card:nth-child(6n+1),.nav-drop__panel li:nth-child(6n+1),.svc-card-slot:nth-child(6n+1) .svc-card { --tc:#7FB3AD; }
.svc-feature:nth-child(6n+2),.cat-card:nth-child(6n+2),.link-card:nth-child(6n+2),.contact-line:nth-child(6n+2),.mvv-card:nth-child(6n+2),.value-card:nth-child(6n+2),.structure-perks__item:nth-child(6n+2),.quick-strip a:nth-child(6n+2),.vaga-card:nth-child(6n+2),.nav-drop__panel li:nth-child(6n+2),.svc-card-slot:nth-child(6n+2) .svc-card { --tc:#C48A94; }
.svc-feature:nth-child(6n+3),.cat-card:nth-child(6n+3),.link-card:nth-child(6n+3),.contact-line:nth-child(6n+3),.mvv-card:nth-child(6n+3),.value-card:nth-child(6n+3),.structure-perks__item:nth-child(6n+3),.quick-strip a:nth-child(6n+3),.vaga-card:nth-child(6n+3),.nav-drop__panel li:nth-child(6n+3),.svc-card-slot:nth-child(6n+3) .svc-card { --tc:#A3B47C; }
.svc-feature:nth-child(6n+4),.cat-card:nth-child(6n+4),.link-card:nth-child(6n+4),.contact-line:nth-child(6n+4),.mvv-card:nth-child(6n+4),.value-card:nth-child(6n+4),.structure-perks__item:nth-child(6n+4),.quick-strip a:nth-child(6n+4),.vaga-card:nth-child(6n+4),.nav-drop__panel li:nth-child(6n+4),.svc-card-slot:nth-child(6n+4) .svc-card { --tc:#A99DD0; }
.svc-feature:nth-child(6n+5),.cat-card:nth-child(6n+5),.link-card:nth-child(6n+5),.contact-line:nth-child(6n+5),.mvv-card:nth-child(6n+5),.value-card:nth-child(6n+5),.structure-perks__item:nth-child(6n+5),.quick-strip a:nth-child(6n+5),.vaga-card:nth-child(6n+5),.nav-drop__panel li:nth-child(6n+5),.svc-card-slot:nth-child(6n+5) .svc-card { --tc:#D4A08A; }
.svc-feature:nth-child(6n+6),.cat-card:nth-child(6n+6),.link-card:nth-child(6n+6),.contact-line:nth-child(6n+6),.mvv-card:nth-child(6n+6),.value-card:nth-child(6n+6),.structure-perks__item:nth-child(6n+6),.quick-strip a:nth-child(6n+6),.vaga-card:nth-child(6n+6),.nav-drop__panel li:nth-child(6n+6),.svc-card-slot:nth-child(6n+6) .svc-card { --tc:#9BA9B7; }
.review-card:nth-child(6n+1){--tc:#7FB3AD} .docs-card:nth-child(6n+1){--tc:#7FB3AD} .review-card:nth-child(6n+2){--tc:#C48A94} .docs-card:nth-child(6n+2){--tc:#C48A94} .review-card:nth-child(6n+3){--tc:#A3B47C} .docs-card:nth-child(6n+3){--tc:#A3B47C} .review-card:nth-child(6n+4){--tc:#A99DD0} .docs-card:nth-child(6n+4){--tc:#A99DD0} .review-card:nth-child(6n+5){--tc:#D4A08A} .docs-card:nth-child(6n+5){--tc:#D4A08A} .review-card:nth-child(6n+6){--tc:#9BA9B7} .docs-card:nth-child(6n+6){--tc:#9BA9B7} 
.contact-line:has(.bi-whatsapp) { --tc:#8DBBA0; }
.contact-line:has(.bi-instagram) { --tc:#C79AB3; }
.vaga-card__block--0 .vaga-card__block-icon { background:color-mix(in srgb,#7FB3AD 16%,transparent); color:#7FB3AD; border-color:color-mix(in srgb,#7FB3AD 28%,transparent); }
.vaga-card__block--1 .vaga-card__block-icon { background:color-mix(in srgb,#D4A08A 16%,transparent); color:#D4A08A; border-color:color-mix(in srgb,#D4A08A 28%,transparent); }
.vaga-card__block--2 .vaga-card__block-icon { background:color-mix(in srgb,#A99DD0 16%,transparent); color:#A99DD0; border-color:color-mix(in srgb,#A99DD0 28%,transparent); }
h2 > i.bi[style*="blue-600"],h3 > i.bi[style*="blue-600"] { color:#7FB3AD !important; }
h2 > i.bi-signpost-split[style*="blue-600"] { color:#9BA9B7 !important; }
h3 > i.bi-people[style*="blue-600"] { color:#A99DD0 !important; }
h3 > i.bi-clock[style*="blue-600"] { color:#D4A08A !important; }
h2 > i.bi-book[style*="blue-600"] { color:#C48A94 !important; }
.faq-q i,.contact-ed__facts i,.vaga-card__email i { color:#7FB3AD; }
.contact-ed__facts div:nth-child(2) i,.emolumentos-card__meta i { color:#D4A08A; }
.btn .bi-whatsapp { color:#8DBBA0; }
.off-timeline-item__dot { background:#7FB3AD; border-color:#111418; box-shadow:0 0 0 1px #343B44; }
.oficiala-hero__quote { border-left-color:#7FB3AD; }
.off-timeline-item__year { color:#7FB3AD; }
.leadership-card--primary { --tc:#7FB3AD; }
.leadership-card--secondary { --tc:#A99DD0; }
.leadership-card__tag { background:color-mix(in srgb,var(--tc) 16%,transparent); color:var(--tc); }
.leadership-card__text > span,.leadership-card .leadership-card__text .leadership-card__badge strong,.leadership-card .services-ed__more,.leadership-card .services-ed__more i { color:var(--tc); }
.leadership-card__badge { border-top-color:color-mix(in srgb,var(--tc) 30%,#111418); }
.reviews-summary__stars,.review-card__stars { color:#D4A537; }
.eyebrow { color:#8C949D; }

/* Oficiala e Substituto: sem azul/roxo — oliva e terracota dessaturados */

/* ==========================================================================
   Rodada 14 — correções: menu de navegação sem cor, Oficiala/Substituto sem
   cor (destaque apenas em negrito), e o ciclo de cor do rodapé (que colocava
   o WhatsApp em roxo por engano, já que a lista tem 7 itens e o ciclo era de
   6) removido — cada ícone recebe a cor que faz sentido para ele, ou nenhuma.
   ========================================================================== */

/* Menu (Institucional / LGPD / Contato): ícones neutros, sem cor de categoria */
.nav-drop__panel a i { color:var(--ink) !important; background:var(--gray-100) !important; border-color:var(--line-card) !important; }
.nav-drop__panel a:hover i { background:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important; }

/* Oficiala e Substituto: sem cor — hierarquia só por peso e espaçamento */
.leadership-card--primary,.leadership-card--secondary { --tc:var(--ink); }
.leadership-card--secondary { background:var(--surface); }
.leadership-card--primary::before,.leadership-card--secondary::before { background:var(--ink); }
.leadership-card__tag { background:var(--gray-100); color:var(--text); font-weight:700; }
.leadership-card__text > span { color:var(--muted); font-weight:600; }
.leadership-card .leadership-card__text .leadership-card__badge strong { color:var(--ink); }
.leadership-card__badge { border-top-color:var(--line-strong); }
.leadership-card .services-ed__more,.leadership-card .services-ed__more i { color:var(--ink); }
.off-timeline-item__dot { background:var(--ink); }
.oficiala-hero__quote { border-left-color:var(--ink); }
.off-timeline-item__year { color:var(--muted); }

/* Rodapé: só WhatsApp e Instagram têm cor (a da própria marca); telefone,
   e-mail, endereço e horário ficam neutros, como já eram por padrão. */
.footer-contact .bi-whatsapp { color:#8DBBA0; }
.footer-contact .bi-instagram { color:#C79AB3; }
.footer-contact .bi-geo-alt,.footer-contact .bi-telephone,.footer-contact .bi-envelope,.footer-contact .bi-clock { color:#DADADA; }

/* Links úteis: sigla do órgão/portal em vez de ícone genérico do Bootstrap
   (não temos como baixar os logos oficiais aqui) — bloco neutro, sem ciclo de
   cor, coerente com o padrão institucional do site. */
.link-card__icon--mono {
  width:auto; min-width:50px; height:50px; padding:0 .5rem;
  background:var(--gray-100); color:var(--ink); font-size:.95rem;
}
.link-card__icon--mono span { font-family:var(--font-body); font-weight:800; letter-spacing:.01em; white-space:nowrap; }
.link-card__icon--mono[data-len="5"] span { font-size:.72rem; letter-spacing:0; }
.link-card:hover .link-card__icon--mono { background:var(--ink); color:#fff; }

/* Troca de conteúdo do carrossel "Nossa estrutura": fade-out curto do texto
   atual e fade-in com leve deslocamento vertical do novo, em vez do corte
   seco. Ver static/js/main.js (paintText). */
.structure-carousel__eyebrow,.structure-carousel__heading,.structure-carousel__text {
  transition:opacity .24s ease-out, transform .24s ease-out;
}
.structure-carousel__eyebrow.is-copy-out,
.structure-carousel__heading.is-copy-out,
.structure-carousel__text.is-copy-out {
  transition:opacity .14s ease-out;
  opacity:0;
}
.structure-carousel__eyebrow.is-copy-enter,
.structure-carousel__heading.is-copy-enter,
.structure-carousel__text.is-copy-enter {
  transition:none;
  opacity:0;
  transform:translateY(8px);
}


/* ==========================================================================
   Campos de formulário no tema escuro (05/10/2026)
   Bug: o tema escuro deixa o texto dos campos claro (--ink:#F1F3F5), mas as
   regras originais de .field :focus (fundo #fff) e .touched:invalid (fundo
   #FEF3F2) continuavam claras -- com o campo aberto/focado ou inválido, ficava
   texto claro sobre fundo branco (ilegível), inclusive na lista de opções do
   <select> (contato e calculadora de emolumentos). Aqui o foco e o erro ganham
   versões escuras, e as opções da lista recebem fundo/cor explícitos.
   ========================================================================== */
.field input:focus,.field select:focus,.field textarea:focus {
  background:#1A2026; color:#F1F3F5; border-color:#A7AFB8;
  box-shadow:0 0 0 3px rgba(233,236,239,.14);
}
.field input.touched:invalid,.field select.touched:invalid,.field textarea.touched:invalid {
  border-color:#F97066; background:#2A1618; color:#F1F3F5;
}
select option,select optgroup { background:#1A1F25; color:#F1F3F5; }
select option:checked { background:#2A3038; color:#FFFFFF; }
select option:disabled { color:#7B848E; }


/* ==========================================================================
   VERSÃO MOBILE (05/10/2026) -- tudo abaixo vale só em telas <=768px; no
   desktop/tablet os elementos novos ficam display:none e nada muda.
   1) menu (3 linhas) à esquerda + lupa à direita; gaveta abre pela esquerda
      e passa a ser escura (antes: fundo branco com letras claras = ilegível)
   2) home no formato de app: banner de largura total, abas, grade de ícones,
      botão flutuante "Fale conosco"
   3) campos: busca (foco branco com texto claro) e preenchimento automático
   ========================================================================== */
.m-home,.m-fab,.nav-m-search { display:none; }

@media (max-width:768px) {
  /* --- 1) Cabeçalho: [menu] [marca] ............ [lupa] --- */
  .nav-inner { gap:.35rem; }
  .nav-cta { order:-1; }
  .nav-toggle { font-size:1.75rem; padding:.3rem .45rem; margin-left:-.45rem; line-height:1; }
  .brand { order:0; }
  .nav-m-search {
    display:grid; place-items:center; order:2; flex:none; width:42px; height:42px; margin-right:-.4rem;
    border-radius:50%; color:#fff; font-size:1.2rem;
  }
  .nav-m-search:active { background:rgba(255,255,255,.1); }

  /* Gaveta: abre pela esquerda, fundo escuro do tema */
  .nav-mobile__panel {
    right:auto; left:0; transform:translateX(-100%);
    background:var(--card-bg); border-right:1px solid var(--line-card);
  }

  /* --- 2) Home: cabeçalho sólido + banner de largura total --- */
  body.is-home .site-nav,body.is-home .site-nav.is-scrolled { background:rgba(11,11,11,.97); }
  .hero-cinematic { padding-top:80px; background:#0b0b0b; }
  .hero-cinematic__bg { position:relative; inset:auto; height:clamp(190px,58vw,260px); }
  .hero-cinematic__scrim,.hero-cinematic__scrim-left,.hero-cinematic__fade { display:none; }
  /* título/botões do hero saem da vista (continuam no HTML para leitores de tela;
     os atalhos equivalentes estão na grade logo abaixo do banner) */
  .hero-cinematic__grid {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .hero-cinematic__quickbar { display:none; }

  .m-home { display:block; background:var(--page-bg,#111418); padding-bottom:1.2rem; }
  .m-tabs {
    display:flex; overflow-x:auto; padding-inline:8px; border-bottom:1px solid var(--line);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .m-tabs::-webkit-scrollbar { display:none; }
  .m-tab {
    flex:none; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1px;
    padding:1rem .95rem .85rem; font:600 .95rem var(--font-body); color:var(--muted); cursor:pointer;
  }
  .m-tab[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent); }
  .m-panel { padding:1.5rem 6px .4rem; }
  .m-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.35rem .2rem; }
  .m-item {
    --tc:#7FB3AD; display:flex; flex-direction:column; align-items:center; gap:.55rem;
    min-width:0; padding:0 .1rem; text-align:center; color:var(--ink);
    font-size:.72rem; line-height:1.25; font-weight:500; -webkit-tap-highlight-color:transparent;
  }
  .m-item:nth-child(4n+2) { --tc:#E39AA4; }
  .m-item:nth-child(4n+3) { --tc:#CFD18A; }
  .m-item:nth-child(4n+4) { --tc:#AEA2E6; }
  .m-item__icon {
    width:62px; height:62px; display:grid; place-items:center; border-radius:17px; font-size:1.7rem; color:var(--tc);
    background:color-mix(in srgb,var(--tc) 13%,var(--card-bg)); border:1px solid var(--line-card);
    transition:transform .15s var(--ease);
  }
  .m-item:active .m-item__icon { transform:scale(.94); }
  .m-item__label {
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; hyphens:auto;
  }

  .m-fab {
    display:inline-flex; align-items:center; gap:.5rem; position:fixed; left:50%; bottom:16px; z-index:900;
    transform:translateX(-50%); padding:.8rem 1.35rem; border-radius:999px;
    background:#17803F; color:#fff; font-weight:700; font-size:.95rem; white-space:nowrap;
    box-shadow:0 8px 22px rgba(0,0,0,.45);
  }
  .m-fab:active { transform:translateX(-50%) scale(.97); }
  .m-fab i { font-size:1.15rem; }

  /* --- 3) Campos: busca com foco escuro; autofill do navegador sem fundo claro --- */
  .search-page-input:focus { background:#1A2026; color:#F1F3F5; border-color:#A7AFB8; box-shadow:0 0 0 3px rgba(233,236,239,.14); }
  input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
  textarea:-webkit-autofill,select:-webkit-autofill {
    -webkit-text-fill-color:#F1F3F5; caret-color:#F1F3F5;
    box-shadow:0 0 0 1000px #15191E inset; -webkit-box-shadow:0 0 0 1000px #15191E inset;
    transition:background-color 9999s ease-out 0s;
  }
}

/* ==========================================================================
   AJUSTES 05/10/2026 — carrossel arrastável, nome completo, telefone
   ========================================================================== */
.structure-carousel__viewport { touch-action:pan-y; }
.structure-carousel__slide img { -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }

/* Nome completo do cartório (sem abreviações) na marca do cabeçalho */
@media (max-width:1320px) {
  .brand__name--short { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.15; font-size:.84rem; }
  .brand__sub { display:none; }
}
@media (max-width:560px) {
  .brand__name--short { font-size:.74rem; }
  .brand__seal { height:38px; }
}
.nav-mobile__head .brand__name { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }
.footer-brand__name { overflow-wrap:break-word; }

/* Telefone e e-mail clicáveis no item Contato */
.structure-perks__item .perk-link { color:#fff; font-weight:700; text-decoration:none; }
.structure-perks__item .perk-link:hover, .structure-perks__item .perk-link:focus-visible { text-decoration:underline; }

/* ==========================================================================
   TEXTO JUSTIFICADO (05/10/2026, revisado)
   Justificado apenas nos TEXTOS CORRIDOS LONGOS (colunas largas, vários
   parágrafos): políticas e avisos legais, documentos necessários, respostas do
   FAQ, história do cartório e apresentações. Em cards, listas e colunas
   estreitas o justificado abre buracos entre as palavras, então esses ficam
   alinhados à esquerda. Hifenização automática (lang="pt-BR") evita "rios" de
   espaço. Títulos, introdução dos banners e textos centralizados não mudam.
   ========================================================================== */
.legal-doc p, .legal-doc li, .legal-doc__pre,
.docref-body p, .docref-note, .faq-a p, .history-copy p,
.leadership-card__text p, .oficiala-hero__quote {
  text-align:justify; text-justify:inter-word;
  -webkit-hyphens:auto; hyphens:auto;
}
/* blocos curtos dentro das áreas acima: sem justificar */
.legal-doc__cabecalho .legal-doc__pre, .svc-card .legal-doc__pre, .pending-note p, .form-note,
.docref-source, .docref-or { text-align:left; }
.section-head.center p, p.docref-source, .shell[style*="text-align:center"] p { text-align:center; }
/* telas estreitas (celular e tablet pequeno): a coluna fica com ~35 caracteres
   e o justificado abre espaços enormes entre as palavras -> alinhado à esquerda */
@media (max-width:700px) {
  .legal-doc p, .legal-doc li, .legal-doc__pre,
  .docref-body p, .docref-note, .faq-a p, .history-copy p,
  .leadership-card__text p, .oficiala-hero__quote { text-align:left; -webkit-hyphens:manual; hyphens:manual; }
}


/* ==========================================================================
   AVALIAÇÕES: MOVIMENTO NOS CARDS (06/10/2026)
   entrada em cascata, estrelas que acendem, flutuação leve, brilho e
   destaque ao passar o mouse. Tudo desligado em "reduzir movimento".
   ========================================================================== */
.review-card { --tc-fx:var(--tc,#111); isolation:isolate; }
/* aspas decorativas ao fundo */
.review-card::after {
  content:"\201C"; position:absolute; top:.2rem; right:1.1rem; z-index:-1;
  font-family:Georgia,"Times New Roman",serif; font-size:6.5rem; line-height:1;
  color:var(--tc-fx); opacity:.07; pointer-events:none;
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.review-card:hover::after { opacity:.16; transform:translateY(-4px) scale(1.08) rotate(-4deg); }
/* friso colorido que cresce embaixo do card */
.review-card .review-card__source { position:relative; }
.review-card .review-card__source::before {
  content:""; position:absolute; left:0; right:0; top:-.7rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--tc-fx),transparent);
  transform:scaleX(.18); transform-origin:left; opacity:.55;
  transition:transform .55s var(--ease), opacity .4s var(--ease);
}
.review-card:hover .review-card__source::before { transform:scaleX(1); opacity:1; }
.review-card:hover { box-shadow:0 18px 38px -16px color-mix(in srgb,var(--tc-fx) 38%,transparent), var(--shadow-md); }
.review-card__avatar { transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.review-card:hover .review-card__avatar {
  transform:scale(1.1) rotate(-6deg);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tc-fx) 20%,transparent);
}
.review-star { display:inline-block; }
.review-card:hover .review-star.is-on { animation:reviewStarPop .5s var(--ease) both; animation-delay:calc(var(--s,0) * 70ms); }

@media (prefers-reduced-motion:no-preference) {
  /* entrada: sobe e aparece em cascata quando a seção entra na tela */
  .review-cards.reveal:not(.in) .review-card { opacity:0; }
  .review-cards.in .review-card {
    animation:
      reviewIn .75s var(--ease) both,
      reviewFloat 7s ease-in-out infinite;
    animation-delay:calc(var(--i,0) * 140ms), calc(1.1s + var(--i,0) * 900ms);
  }
  /* com o mouse em cima, o card para de flutuar */
  .review-cards.in .review-card:hover { animation-play-state:running, paused; }
  /* depois de acenderem, as estrelas "brilham" em onda, de tempos em tempos */
  .review-cards.in .review-star.is-on {
    animation:
      reviewStarOn .55s var(--ease) both,
      reviewTwinkle 5.5s ease-in-out infinite;
    animation-delay:
      calc(var(--i,0) * 140ms + 450ms + var(--s,0) * 90ms),
      calc(2.4s + var(--i,0) * 600ms + var(--s,0) * 130ms);
  }
}
@keyframes reviewIn {
  from { opacity:0; transform:translateY(34px) scale(.96); }
  to   { opacity:1; transform:none; }
}
@keyframes reviewFloat {
  0%,100% { translate:0 0; }
  50%     { translate:0 -5px; }
}
@keyframes reviewStarOn {
  0%   { opacity:0; transform:scale(.2) rotate(-40deg); }
  60%  { opacity:1; transform:scale(1.35) rotate(8deg); }
  100% { opacity:1; transform:none; }
}
@keyframes reviewStarPop {
  0%,100% { transform:none; }
  45%     { transform:scale(1.35) translateY(-2px); }
}
@keyframes reviewTwinkle {
  0%,78%,100% { transform:none; filter:none; }
  88%         { transform:scale(1.3) translateY(-1px); filter:brightness(1.5) drop-shadow(0 0 4px rgba(218,165,32,.7)); }
}
@media (prefers-reduced-motion:reduce) {
  .review-card, .review-card::after, .review-card__avatar { transition:none; }
}