/* =============================================================================
   Deamici Ferreira Advogados · style.css
   Design system do site. Mobile-first, sem framework, sem @import.
   Design system do site Deamici Ferreira Advogados

   Índice
   01 Tokens                      15 Passos numerados
   02 Temas (claro e escuro)      16 O escritório (foto + texto)
   03 Reset e base                17 Perfil e retrato com moldura
   04 Tipografia                  18 Compromissos
   05 Layout                      19 FAQ (acordeão)
   06 Utilitários                 20 Contato e formulário
   07 Ícones e traço DF           21 Rodapé
   08 Botões e links              22 WhatsApp fixo (dock)
   09 Header e navegação          23 Páginas internas (áreas)
   10 Menu mobile                 24 Política de privacidade
   11 Cabeçalho de seção          25 Página 404
   12 Hero da home                26 Movimento
   13 Cartões de situação         27 Preferências do usuário */


/* 01 · Tokens */
:root{
  /* primitivas (navy e dourado oficiais do vetor) */
  --navy-950:#000F21; --navy-900:#011A35; --navy-800:#0B2747; --navy-700:#163A63;
  --gold-300:#D6B886; --gold-500:#C09A5F; --gold-600:#A9844B; --gold-700:#7A5A28;
  --ivory-50:#FFFDF8; --ivory-100:#F6F2EA; --ivory-200:#EEE7DA; --sand-300:#D8CFBF;
  --slate-500:#5B6878; --slate-550:#6B7686; --slate-700:#3D4B5C;
  --mist-300:#B7C2CF; --mist-400:#8292A8; --red-600:#B3261E;
  --gold-a24:rgba(192,154,95,.24);

  /* tipografia */
  --font-brand:"Jost","Futura","Century Gothic","Avenir Next","Segoe UI",system-ui,sans-serif;
  --font-text:"Figtree","Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  --fs-display:clamp(2.25rem,1.6667rem + 2.5926vw,4rem);
  --fs-h1:clamp(2rem,1.5833rem + 1.8519vw,3.25rem);
  --fs-h2:clamp(1.75rem,1.4167rem + 1.4815vw,2.75rem);
  --fs-h3:clamp(1.25rem,1.1667rem + .3704vw,1.5rem);
  --fs-card:clamp(1.125rem,1.0833rem + .1852vw,1.25rem);
  --fs-q:clamp(1.0625rem,1rem + .2778vw,1.25rem);
  --fs-num:clamp(2rem,1.6667rem + 1.4815vw,3rem);
  --fs-lead:clamp(1.125rem,1.0625rem + .2778vw,1.3125rem);
  --fs-body:clamp(1.0625rem,1.0417rem + .0926vw,1.125rem);
  --fs-small:.9375rem; --fs-xs:.875rem;
  --fs-label:clamp(.75rem,.7292rem + .0926vw,.8125rem);
  --fs-nav:.8125rem; --fs-button:1rem;
  --lh-display:1.08; --lh-h1:1.1; --lh-h2:1.15; --lh-h3:1.3; --lh-lead:1.55; --lh-body:1.65; --lh-small:1.55;
  --ls-display:-.015em; --ls-h1:-.012em; --ls-h2:-.01em; --ls-label:.2em; --ls-nav:.12em; --ls-meta:.16em; --ls-button:.02em;

  /* espaço e layout */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;
  --space-section:clamp(4rem,2.6667rem + 5.9259vw,8rem);
  --space-head:clamp(2rem,1.5rem + 2.2222vw,3.5rem);
  --space-grid:clamp(1rem,.6667rem + 1.4815vw,2rem);
  --gutter:clamp(1.25rem,.3333rem + 4.0741vw,4rem);
  --container:77.5rem; --container-text:45rem;
  --header-h:4rem;
  --trace-w:40px;
  /* distância da borda do contêiner até a borda da tela */
  --edge:max(var(--gutter),(100vw - var(--container)) / 2);

  /* forma */
  --radius:0; --cut-sm:8px; --cut-md:14px; --cut-lg:24px;
  --shadow-1:0 1px 2px rgba(1,26,53,.06),0 4px 12px -4px rgba(1,26,53,.10);
  --shadow-2:0 2px 4px rgba(1,26,53,.06),0 16px 32px -12px rgba(1,26,53,.22);
  --tshadow-hero:0 1px 2px rgba(0,15,33,.55);

  /* movimento */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-in:cubic-bezier(.55,0,1,.45);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:700ms; --dur-5:1200ms; --stagger:80ms;

  /* camadas */
  --z-dock:80; --z-menu:95; --z-header:100; --z-subnav:110; --z-skip:200;
}
@media (min-width:48em){ :root{ --ls-label:.28em; --trace-w:64px; } }
@media (min-width:64em){ :root{ --header-h:5rem; } }


/* 02 · Temas semânticos */
/* Cada seção declara .theme-dark ou .theme-light; componentes usam só estes tokens. */
:root, .theme-light{
  color-scheme:light;
  --bg:var(--ivory-100);
  --bg-alt:var(--ivory-200);
  --surface:var(--ivory-50);
  --fg:var(--navy-900);
  --fg-muted:var(--slate-700);
  --fg-subtle:var(--slate-500);
  --accent-text:var(--gold-700);
  --accent-deco:var(--gold-500);
  --accent-hover:var(--navy-900);
  --line:var(--sand-300);
  --line-strong:var(--slate-550);
  --focus:var(--gold-700);
  --field-bg:var(--ivory-100);
  --field-bg-focus:var(--ivory-50);
}
.theme-dark{
  color-scheme:dark;
  --bg:var(--navy-900);
  --bg-alt:var(--navy-950);
  --surface:var(--navy-800);
  --fg:var(--ivory-100);
  --fg-muted:var(--mist-300);
  --fg-subtle:var(--mist-400);
  --accent-text:var(--gold-500);
  --accent-deco:var(--gold-500);
  --accent-hover:var(--gold-300);
  --line:var(--gold-a24);
  --line-strong:var(--mist-400);
  --focus:var(--gold-500);
}
.theme-dark, .theme-light{ background-color:var(--bg); color:var(--fg); }
.bg-alt{ background-color:var(--bg-alt); }


/* 03 · Reset e base */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  overflow-x:hidden; overflow-x:clip;
  scroll-padding-top:5rem;
}
@media (max-width:79.99em){ html{ scroll-padding-bottom:5rem; } }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0; min-height:100vh; overflow-x:clip;
  font:400 var(--fs-body)/var(--lh-body) var(--font-text);
  color:var(--fg); background-color:var(--ivory-100);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,picture,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
input,button,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
figure,blockquote{ margin:0; }
address{ font-style:normal; }
[hidden]{ display:none !important; }
ul[role="list"],ol[role="list"]{ list-style:none; margin:0; padding:0; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
[tabindex="-1"]:focus{ outline:none; }
::selection{ background:var(--gold-300); color:var(--navy-900); }
html.menu-open{ overflow:hidden; }


/* 04 · Tipografia */
h1,h2,h3,h4{
  margin:0; font-family:var(--font-brand); font-weight:400; color:var(--fg);
  text-wrap:balance; overflow-wrap:break-word;
}
h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); }
h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); max-inline-size:22ch; }
h3{ font-size:var(--fs-h3); font-weight:500; line-height:var(--lh-h3); max-inline-size:28ch; }
p{ margin:0 0 1em; max-inline-size:65ch; text-wrap:pretty; }
strong,b{ font-weight:600; }
.lead{ font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--fg-muted); max-inline-size:56ch; }

/* Links de texto (sem classe): sempre sublinhados */
a{ color:inherit; }
a:not([class]){
  color:var(--fg);
  text-decoration-line:underline; text-decoration-thickness:1px;
  text-underline-offset:.2em; text-decoration-color:var(--accent-text);
  transition:color var(--dur-2) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ a:not([class]):hover{ color:var(--accent-text); } }

/* Rótulo pequeno em caixa alta (Formação, títulos de grupo, sumário) */
.label{
  margin:0 0 var(--space-4);
  font:500 .8125rem/1.4 var(--font-brand); letter-spacing:var(--ls-meta);
  text-transform:uppercase; color:var(--accent-text);
}


/* 05 · Layout */
.container{ width:min(100% - 2 * var(--gutter), var(--container)); margin-inline:auto; }
.container--text{ width:min(100% - 2 * var(--gutter), var(--container-text)); }
.section{ position:relative; padding-block:var(--space-section); }
.section--rule{ border-top:1px solid var(--line); }
.actions{ display:flex; flex-direction:column; gap:12px; }
@media (min-width:30em){ .actions{ flex-direction:row; flex-wrap:wrap; align-items:center; } }
.section-cta{ margin-top:var(--space-7); display:flex; }
.section-cta .btn{ width:100%; }
@media (min-width:48em){ .section-cta{ justify-content:center; } .section-cta .btn{ width:auto; } }


/* 06 · Utilitários */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:-100px; left:var(--gutter); z-index:var(--z-skip);
  padding:12px 20px; background:var(--gold-500); color:var(--navy-900);
  font:500 1rem/1.2 var(--font-brand); text-decoration:none;
  transition:top var(--dur-1) var(--ease-out);
}
.skip-link:focus{ top:calc(env(safe-area-inset-top,0px) + 8px); outline-color:var(--navy-900); }
.break-any{ overflow-wrap:anywhere; }
.nw{ white-space:nowrap; }
.top-sentinel{ position:absolute; top:0; left:0; width:1px; height:24px; pointer-events:none; }


/* 07 · Ícones e traço DF */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.icon{ width:20px; height:20px; flex:none; fill:currentColor; }
.icon--arrow{ transition:transform var(--dur-2) var(--ease-out); }
.chev{ width:12px; height:8px; flex:none; transition:transform var(--dur-2) var(--ease-out); }

/* Traço: linha de 1 px que termina subindo a 60°, como os terminais do monograma */
.trace{
  width:var(--trace-w); height:12px; flex:none; overflow:hidden;
  fill:none; stroke:var(--accent-deco); stroke-width:1;
}


/* 08 · Botões e links */
.btn{
  --cut:var(--cut-sm);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:52px; padding:0 28px;
  font:500 var(--fs-button)/1.2 var(--font-brand); letter-spacing:var(--ls-button);
  text-align:center; text-decoration:none; color:var(--fg);
  border:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn:active{ transform:translateY(1px); }
.btn--lg{ min-height:56px; }
.btn--sm{ --cut:6px; min-height:44px; padding:0 18px; font-size:.9375rem; gap:10px; }
.btn--sm .icon{ width:18px; height:18px; }
.btn--block{ width:100%; }

/* Corte diagonal (60°): canto superior esquerdo e inferior direito */
.cut, .btn--primary::before, .wa-dock__link::before, .step__num{
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut) * 1.732),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 calc(var(--cut) * 1.732));
}

/* Primário: fundo dourado no ::before (o anel de foco fica inteiro no elemento) */
.btn--primary{ color:var(--navy-900); }
.btn--primary::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-color:var(--gold-500);
  transition:background-color var(--dur-2) var(--ease-out);
}
.btn--primary:active::before{ background-color:var(--gold-600); }

/* Secundário contornado */
.btn--ghost{ color:var(--fg); box-shadow:inset 0 0 0 1px var(--line-strong); }

@media (hover:hover) and (pointer:fine){
  .btn--primary:hover::before{ background-color:var(--gold-300); }
  .btn--primary:active::before{ background-color:var(--gold-600); }
  .btn--ghost:hover{ box-shadow:inset 0 0 0 1px var(--accent-deco); background-color:rgba(192,154,95,.08); }
  .btn:hover .icon--arrow, .link-arrow:hover .icon--arrow{ transform:translateX(4px); }
}

/* Link com seta */
.link-arrow{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font:500 1rem/1.3 var(--font-brand); color:var(--accent-text);
  text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:.28em;
  text-decoration-color:currentColor;
  text-decoration-color:color-mix(in srgb, currentColor 50%, transparent);
  transition:color var(--dur-2) var(--ease-out), text-decoration-color var(--dur-2) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .link-arrow:hover{ color:var(--accent-hover); text-decoration-color:currentColor; }
}


/* 09 · Header fixo e navegação */
.site-header{
  position:fixed; inset:0 0 auto; z-index:var(--z-header);
  padding-top:env(safe-area-inset-top,0px);
  background-color:transparent;
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-color:rgba(1,26,53,.92);
  -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(192,154,95,.22);
  opacity:0; transition:opacity var(--dur-3) var(--ease-out);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header::before{ background-color:rgba(1,26,53,.98); }
}
.site-header.is-scrolled::before, .menu-open .site-header::before{ opacity:1; }
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
  height:var(--header-h); transition:height var(--dur-3) var(--ease-out);
}
.brand{ display:inline-flex; align-items:center; flex:none; min-height:44px; }
.brand img{
  width:auto; height:40px;
  transform-origin:left center; transition:transform var(--dur-3) var(--ease-out);
}
@media (min-width:64em){
  .brand img{ height:48px; }
  .is-scrolled .site-header__bar, .menu-open .site-header__bar{ height:4rem; }
  .is-scrolled .brand img, .menu-open .brand img{ transform:scale(.833); }
}

/* Navegação completa (≥ 1280 px; abaixo disso, botão "Menu" e a barra do WhatsApp) */
.nav{ display:none; }
.nav__list{ display:flex; align-items:center; gap:24px; }
.nav__item{ position:relative; }
.nav__link{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:12px 0; border:0; background:none;
  font:500 var(--fs-nav)/1.2 var(--font-brand); letter-spacing:var(--ls-nav);
  text-transform:uppercase; text-decoration:none; color:var(--ivory-100);
  white-space:nowrap; cursor:pointer;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:var(--ls-nav); bottom:8px; height:1px;
  background-color:var(--gold-500); transform:scaleX(0); transform-origin:left;
  transition:transform 240ms var(--ease-out);
}
.nav__link[aria-current="page"]::after,
.nav__link[aria-expanded="true"]::after,
.nav__link:focus-visible::after{ transform:scaleX(1); }
.nav__link[aria-expanded="true"] .chev{ transform:rotate(180deg); }
@media (hover:hover) and (pointer:fine){ .nav__link:hover::after{ transform:scaleX(1); } }
@media (min-width:80em){
  .nav{ display:flex; align-items:center; gap:var(--space-6); }
  .menu-toggle{ display:none !important; }
}
@media (min-width:90em){ .nav__list{ gap:32px; } }
/* botão do topo: só "WhatsApp" à vista; o leitor de tela ouve "Conversar pelo WhatsApp" */
.nav .btn{ white-space:nowrap; }
.btn__more{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Submenu "Áreas de atuação" (disclosure, abre só por clique) */
.subnav{
  position:absolute; top:calc(100% + 12px); left:-24px; z-index:var(--z-subnav);
  width:34rem; padding:24px;
  background-color:var(--navy-900); border:1px solid rgba(192,154,95,.28);
}
.subnav ul{ display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; }
.subnav a{
  display:grid; grid-template-columns:2rem 1fr; align-items:center;
  min-height:48px; padding:10px 12px;
  font:400 1rem/1.3 var(--font-text); color:var(--ivory-100); text-decoration:none;
  transition:background-color var(--dur-2) var(--ease-out);
}
.subnav a:hover, .subnav a:focus-visible, .subnav a[aria-current="page"]{ background-color:var(--navy-800); }
.subnav a:focus-visible{ outline-offset:-2px; }
.subnav__num, .num-tag{
  font:500 .8125rem/1 var(--font-brand); letter-spacing:.06em; color:var(--gold-500);
  font-variant-numeric:tabular-nums lining-nums;
}

/* Botão do menu (< 1200 px) */
.menu-toggle{
  display:inline-flex; align-items:center; gap:12px;
  min-width:44px; min-height:44px; margin-right:-6px; padding:0 6px 0 8px;
  border:0; background:none; color:var(--ivory-100);
  font:500 .75rem/1 var(--font-brand); letter-spacing:.2em; text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
}
.menu-toggle__text{ line-height:1; }
.menu-toggle__icon{ position:relative; width:24px; height:24px; flex:none; }
.menu-toggle__icon span{
  position:absolute; right:0; width:24px; height:1.5px; background-color:currentColor;
  transition:transform var(--dur-3) var(--ease-out);
}
.menu-toggle__icon span:first-child{ top:8px; }
.menu-toggle__icon span:last-child{ top:15px; transform:translateX(4px) scaleX(.667); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* Sem JavaScript: o botão some e o link do <noscript> leva à navegação do rodapé;
   no desktop, o submenu de áreas abre com o foco ou com o mouse */
html:not(.js) [data-menu-toggle]{ display:none; }
.menu-toggle--nojs{ text-decoration:none; }
html:not(.js) .nav__item:hover > .subnav[hidden],
html:not(.js) .nav__item:focus-within > .subnav[hidden]{ display:block !important; }


/* 10 · Menu mobile (painel em tela cheia, irmão do header) */
.mobile-menu{
  position:fixed; top:calc(4rem + env(safe-area-inset-top,0px)); inset-inline:0; bottom:0;
  z-index:var(--z-menu); overflow-y:auto; overscroll-behavior:contain;
  padding:24px 0 calc(32px + env(safe-area-inset-bottom,0px));
  background-color:var(--navy-950);
  opacity:0; transform:translateY(-8px);
  transition:opacity 200ms var(--ease-in), transform 200ms var(--ease-in);
}
.mobile-menu.is-open{
  opacity:1; transform:none;
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.mobile-menu__main a{
  display:flex; align-items:center; min-height:56px;
  font:400 1.5rem/1.2 var(--font-brand); color:var(--ivory-100); text-decoration:none;
  border-bottom:1px solid var(--line);
}
.mobile-menu__main a[aria-current="page"]{ color:var(--gold-500); }
.mobile-menu .eyebrow{ margin:var(--space-6) 0 var(--space-3); }
.mobile-menu__areas a{
  display:grid; grid-template-columns:2rem 1fr; align-items:center; min-height:48px;
  font:400 1.0625rem/1.3 var(--font-text); color:var(--mist-300); text-decoration:none;
  transition:color var(--dur-2) var(--ease-out);
}
.mobile-menu__areas a:hover, .mobile-menu__areas a[aria-current="page"]{ color:var(--ivory-100); }
.mobile-menu__contact{ margin-top:var(--space-6); }
.mobile-menu__contact p{ margin:12px 0 0; font-size:var(--fs-small); color:var(--mist-300); }
.mobile-menu li, .mobile-menu__contact{
  opacity:0; transform:translateY(6px);
}
.mobile-menu.is-open li, .mobile-menu.is-open .mobile-menu__contact{
  opacity:1; transform:none;
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay:calc(var(--mi, 0) * 30ms);
}


/* 11 · Cabeçalho de seção com traço */
.eyebrow{
  display:flex; align-items:center; gap:14px; margin:0 0 20px; max-inline-size:none;
  font:500 var(--fs-label)/1.4 var(--font-brand); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--accent-text);
}
.eyebrow--wrap{ align-items:flex-start; }
.eyebrow--wrap .trace{ margin-top:2px; }
.section-head{ max-inline-size:52rem; margin-bottom:var(--space-head); }
.section-head h2{ margin-bottom:16px; }
.section-head > :last-child{ margin-bottom:0; }
.section-head .lead{ margin-bottom:0; }
@media (min-width:48em){
  .section-head--center{ margin-inline:auto; text-align:center; }
  .section-head--center .eyebrow{ justify-content:center; }
  .section-head--center .eyebrow span{ margin-inline-end:calc(-1 * var(--ls-label)); }
  /* espaçador invisível do tamanho do traço: o texto fica no centro exato */
  .section-head--center .eyebrow::after{ content:""; flex:none; width:var(--trace-w); }
  .section-head--center h2, .section-head--center .lead{ margin-inline:auto; }
}
@media (min-width:64em){
  .section-head--split{
    display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--space-grid);
    align-items:end; max-inline-size:none;
  }
  .section-head--split > :first-child{ grid-column:1 / 6; }
  .section-head--split > .lead{ grid-column:7 / 13; }
  .section-head--split h2{ margin-bottom:0; }
}
.section-foot{ margin:var(--space-6) 0 0; color:var(--fg-muted); }


/* 12 · Hero da home */
.hero{
  position:relative; isolation:isolate; overflow:hidden; overflow:clip;
  display:flex; flex-direction:column;
  background-color:var(--navy-900); color:var(--ivory-100);
}
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__media picture{ height:100%; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:92% 50%; }
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(1,26,53,.60) 0%, rgba(1,26,53,.12) 12%, rgba(1,26,53,.20) 100%);
}
.hero__inner{
  --hero-pad-bottom:32px;
  position:relative; display:flex; align-items:flex-end;
  min-height:max(560px,100vh); min-height:max(560px,100svh);
  padding-top:calc(var(--header-h) + 32px + env(safe-area-inset-top,0px));
  padding-bottom:var(--hero-pad-bottom);
}
.hero__content{ position:relative; isolation:isolate; width:100%; max-inline-size:36rem; }
/* scrim preso ao bloco de texto: navy ≥ 0,90 atrás de todo o texto, em qualquer altura */
.hero__content::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-72px -100vw calc(-1 * var(--hero-pad-bottom)) -100vw;
  background:linear-gradient(180deg, rgba(1,26,53,0) 0, rgba(1,26,53,.90) 72px, rgba(1,26,53,.95) 100%);
}
/* H1 = sobretítulo (palavra-chave + cidade) + título visual, num só heading */
.hero__heading{
  margin:0; max-inline-size:none;
  font:inherit; letter-spacing:normal; color:inherit; text-wrap:wrap;
}
.hero__kicker{ color:var(--gold-500); }
/* o "·" fica no vão entre as duas partes; se a segunda quebrar linha, ele sai pela
   esquerda e é cortado (overflow), sem sobrar no fim da primeira linha */
.hero__kicker-text{ display:flex; flex-wrap:wrap; column-gap:1.25em; min-width:0; overflow:hidden; }
.hero__kicker-text .k{ position:relative; }
.hero__kicker-text .k + .k::before{ content:"·"; position:absolute; right:calc(100% + .4em); }
.hero__title{
  display:block; margin:0 0 20px; max-inline-size:20ch;
  font:400 var(--fs-display)/var(--lh-display) var(--font-brand); letter-spacing:var(--ls-display);
  color:var(--ivory-100); text-wrap:balance; text-shadow:var(--tshadow-hero);
}
.hero__title .l{ display:block; }
.hero__title .l--accent{ color:var(--gold-500); }
.hero__lede{ margin:0 0 32px; max-inline-size:52ch; color:var(--mist-300); text-shadow:var(--tshadow-hero); }
.hero__arc{ display:none; }

/* Faixa de destaques */
.hero__facts{
  position:relative; background-color:rgba(0,15,33,.88); border-top:1px solid var(--gold-a24);
}
.hero__facts ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; margin-inline:auto; padding-block:16px; }
.hero__facts li{
  display:flex; align-items:flex-start; gap:10px;
  font:600 var(--fs-xs)/1.4 var(--font-text); color:var(--ivory-100);
}
.hero__facts li::before{
  content:""; flex:none; display:inline-block; width:1px; height:12px; margin-top:.2em;
  background-color:var(--gold-500); transform:skewX(-30deg);
}
/* recorte da foto: o painel com o nome do escritório (≈ 72–95% da largura) fica sempre inteiro */
@media (min-width:48em){
  .hero__media img{ object-position:100% 50%; }
  .hero__facts ul{ grid-template-columns:repeat(4,minmax(0,1fr)); padding-block:20px; }
  .hero__facts li{ font-size:var(--fs-small); }
}
@media (min-width:64em){
  .hero__facts ul{ display:flex; justify-content:space-between; gap:24px; }
}
@media (min-width:64em){
  .hero{ min-height:clamp(640px,100vh,960px); min-height:clamp(640px,100svh,960px); }
  .hero__media img{ object-position:90% 50%; }
  .hero__media::after{
    background:
      linear-gradient(180deg, rgba(1,26,53,.55) 0, rgba(1,26,53,0) 14%),
      linear-gradient(90deg, rgba(1,26,53,.96) 0%, rgba(1,26,53,.92) 56%, rgba(1,26,53,.60) 70%, rgba(1,26,53,.14) 86%, rgba(1,26,53,0) 100%);
  }
  .hero__inner{ --hero-pad-bottom:96px; flex:1; min-height:0; align-items:center; }
  /* nenhum texto do hero passa de 55% da largura da tela */
  .hero__content{ width:min(44rem, 55vw - var(--edge)); max-inline-size:none; }
  .hero__content::before{ display:none; }
  .hero__arc{
    display:block; position:absolute; top:0; left:calc(100% + 40px);
    width:140px; height:100%; overflow:visible;
    fill:none; stroke:var(--gold-500); stroke-opacity:.5; stroke-width:1;
  }
}
@media (min-width:64em) and (max-height:30em){ .hero__arc{ display:none; } }
@media (max-height:30em){ .hero__inner{ min-height:0; } }


/* 13 · Cartões de situação */
.sit-grid{ display:grid; gap:12px; }
@media (min-width:48em){ .sit-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-grid); } }
@media (min-width:64em){ .sit-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sit-card{
  position:relative; display:flex; flex-direction:column; gap:10px; height:100%;
  padding:20px; background-color:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-1);
  transition:transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
@media (min-width:48em){ .sit-card{ padding:24px; } }
.sit-card::before{
  content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:2px;
  background-color:var(--gold-500); transform:scaleX(.18); transform-origin:left;
  transition:transform 400ms var(--ease-out);
}
.sit-card__area{
  margin:0; font:500 .75rem/1.4 var(--font-brand); letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-text);
}
.sit-card__title{ margin:0; font:500 var(--fs-card)/1.3 var(--font-brand); }
.sit-card__text{ margin:0; font-size:1rem; line-height:1.55; color:var(--fg-muted); }
.sit-card__link{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:6px;
  font:500 .9375rem/1.3 var(--font-brand); color:var(--accent-text); text-decoration:none;
}
.sit-card__link::after{ content:""; position:absolute; inset:0; }
.sit-card:active{ transform:translateY(0); }
@media (hover:hover) and (pointer:fine){
  .sit-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:#CFC4B0; }
  .sit-card:hover::before{ transform:scaleX(1); }
  .sit-card:hover .icon--arrow{ transform:translateX(4px); }
}
.sit-card:has(.sit-card__link:focus-visible){ outline:2px solid var(--focus); outline-offset:4px; }
@supports selector(:has(*)){ .sit-card__link:focus-visible{ outline:none; } }


/* 14 · Grade de áreas (fundo escuro, filetes em vez de cartões) */
.area-grid{ display:grid; border-top:1px solid var(--line); border-left:1px solid var(--line); }
@media (min-width:48em){ .area-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:64em){ .area-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.area-card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:clamp(24px,3vw,40px);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background-color 240ms var(--ease-out);
}
.area-card::before{
  content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:2px;
  background-color:var(--gold-500); transform:scaleX(0); transform-origin:left;
  transition:transform 400ms var(--ease-out);
}
.area-card__num{
  font:400 var(--fs-num)/1 var(--font-brand); color:var(--gold-500);
  font-variant-numeric:tabular-nums lining-nums;
}
.area-card__title{ margin:0; }
.area-card__text{ margin:0; font-size:1rem; line-height:1.6; color:var(--fg-muted); max-inline-size:38ch; }
.area-card__link{ margin-top:auto; }
.area-card__link::after{ content:""; position:absolute; inset:0; }
/* No celular a seção vem logo depois de "Qual é a sua situação?": versão compacta
   em linhas (número + nome + seta; a linha inteira é o link), sem repetir as descrições */
@media (max-width:47.99em){
  .area-grid{ border-left:0; }
  .area-card{ flex-direction:row; align-items:center; gap:14px; padding:10px 0; border-right:0; }
  .area-card__num{ flex:none; width:2.25rem; font-size:1.25rem; }
  .area-card__title{ flex:1 1 0; min-width:0; }
  .area-card__text{ display:none; }
  .area-card__link{ flex:none; margin:0; }
  .area-card__cta{
    position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap;
  }
}
@media (hover:hover) and (pointer:fine){
  .area-card:hover{ background-color:var(--navy-800); }
  .area-card:hover::before{ transform:scaleX(1); }
  .area-card:hover .icon--arrow{ transform:translateX(4px); }
  .area-card:hover .link-arrow{ color:var(--gold-300); text-decoration-color:currentColor; }
}
.area-card:has(a:focus-visible){ outline:2px solid var(--gold-500); outline-offset:-6px; }
@supports selector(:has(*)){ .area-card__link:focus-visible{ outline:none; } }


/* 15 · Passos numerados (linha do tempo) */
.steps{ display:grid; gap:32px; }
.step{ position:relative; display:grid; grid-template-columns:44px 1fr; column-gap:20px; align-content:start; }
.step__num{
  --cut:8px;
  grid-row:1 / span 2; display:grid; place-items:center; width:44px; height:44px;
  background-color:var(--navy-900); color:var(--gold-500);
  font:500 1.125rem/1 var(--font-brand); font-variant-numeric:tabular-nums lining-nums;
}
.theme-dark .step__num{ background-color:var(--navy-800); }
.step__title{ margin:8px 0; }
.step__text{ margin:0; color:var(--fg-muted); }
.step::after{
  content:""; position:absolute; left:22px; top:52px; bottom:-24px; width:1px;
  background-color:var(--gold-500); transform-origin:top;
  transition:transform 900ms var(--ease-in-out) calc(var(--i, 0) * var(--stagger) + 300ms);
}
.step:last-child::after{ display:none; }
@media (min-width:48em){
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 32px; }
  .step{ grid-template-columns:1fr; row-gap:20px; }
  .step__num{ grid-row:auto; }
  .step__title{ margin:0; }
  .step::after{ display:none; }
}
@media (min-width:64em){
  .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
  .step__num{ width:48px; height:48px; }
  .step__text{ max-inline-size:32ch; }
  .step::after{ display:block; left:64px; right:-16px; top:24px; bottom:auto; width:auto; height:1px; transform-origin:left; }
  .step:last-child::after{ display:none; }
}


/* 16 · O escritório (texto + foto que sangra) */
.about{ display:grid; gap:var(--space-7); }
.about__media{
  --cut:var(--cut-md);
  margin-inline:calc(-1 * var(--gutter)); aspect-ratio:4 / 3; overflow:hidden;
}
.about__media picture, .about__media img{ width:100%; height:100%; }
/* recorte próprio (sala de reunião e estantes), diferente do hero e sem cortar o painel com o logo */
.about__media img{ object-fit:cover; object-position:0% 50%; transform:scale(1.22); transform-origin:0% 55%; }
.about__text h2{ margin-bottom:var(--space-5); }
.about__text p{ color:var(--fg-muted); }
.about__text p:last-child{ margin-bottom:0; }
.about__text .about__lead{ font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--fg); }
@media (min-width:48em){
  .about__media{ --cut:var(--cut-lg); margin-inline:0; }
  .about__text{ max-inline-size:56ch; }
}
@media (min-width:64em){
  .about{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--space-grid); align-items:center; }
  .about__text{ grid-column:1 / 6; grid-row:1; }
  .about__media{ grid-column:7 / 13; grid-row:1; margin-inline-end:calc(-1 * var(--edge)); }
}


/* 17 · Perfil do responsável e retrato com moldura */
.profile{ display:grid; gap:40px; align-items:start; }
@media (min-width:48em){ .profile{ grid-template-columns:5fr 7fr; gap:clamp(32px,6vw,96px); } }
@media (min-width:64em){ .profile{ align-items:center; } }
.portrait{
  position:relative; isolation:isolate; aspect-ratio:3 / 4;
  width:calc(100% - 10px); max-inline-size:360px; margin:0 10px 10px 0;
}
.portrait picture, .portrait img{ width:100%; height:100%; }
.portrait img, .portrait-cut{
  object-fit:cover; object-position:50% 30%;
  clip-path:polygon(7% 0, 100% 0, 100% 90.9%, 93% 100%, 0 100%, 0 9.1%);
}
.portrait__frame{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%; overflow:visible;
  transform:translate(10px,10px);
  fill:none; stroke:var(--gold-500); stroke-width:.85;
}
@media (min-width:48em){
  .portrait{ width:calc(100% - 16px); max-inline-size:460px; margin:0 16px 16px 0; }
  .portrait__frame{ transform:translate(16px,16px); stroke-width:.7; }
}
.profile__oab, .oab-line{
  margin:8px 0 var(--space-5);
  font:500 .8125rem/1.4 var(--font-brand); letter-spacing:var(--ls-meta);
  text-transform:uppercase; color:var(--accent-text);
}
.profile__body > h2{ max-inline-size:none; }
.profile__body > p{ color:var(--fg-muted); }
.profile__education{ margin-top:var(--space-6); }
.profile__quote{
  margin:var(--space-6) 0 0; padding-left:20px; border-left:1px solid var(--gold-500);
  font:400 clamp(1.25rem,1.1rem + .6vw,1.625rem)/1.35 var(--font-brand); color:var(--fg);
}
.profile__quote p{ margin:0; }
.profile__cta{ margin-top:var(--space-6); }
@media (max-width:29.99em){ .profile__cta .btn{ width:100%; } }

/* Lista com marcador de traço e barra */
.dash-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.dash-list li{ position:relative; padding-left:28px; }
.dash-list li::before, .dash-list li::after{ content:""; position:absolute; background-color:var(--gold-500); }
.dash-list li::before{ left:0; top:.85em; width:14px; height:1px; }
.dash-list li::after{ left:14px; top:calc(.85em - 5px); width:1px; height:6px; transform:skewX(-30deg); transform-origin:bottom; }
.dash-list--cols{ gap:12px; }
@media (min-width:48em){ .dash-list--cols{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; } }


/* 18 · Compromissos */
.commit-grid{ display:grid; gap:0 var(--space-grid); }
.commit{ position:relative; padding-block:24px 8px; border-top:1px solid var(--line); }
.commit::before{
  content:""; position:absolute; top:-1px; left:0; width:24px; height:1px; background-color:var(--gold-500);
}
.commit__title{ margin:0 0 10px; }
.commit p{ margin:0; font-size:1rem; line-height:1.6; color:var(--fg-muted); }
@media (min-width:48em){ .commit-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5) var(--space-6); } }
@media (min-width:64em){
  .commit-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .commit{ padding:0 0 0 24px; border-top:0; border-left:1px solid var(--line); }
  .commit::before{ top:0; left:-1px; width:1px; height:24px; }
}


/* 19 · FAQ (details/summary) */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:64px; padding:20px 0; list-style:none; cursor:pointer;
  font:500 var(--fs-q)/1.35 var(--font-brand); color:var(--fg);
  transition:color var(--dur-2) var(--ease-out);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::marker{ content:""; }
.faq__q:focus-visible{ outline-offset:4px; }
.faq__icon{ position:relative; flex:none; width:20px; height:20px; }
.faq__icon::before, .faq__icon::after{
  content:""; position:absolute; left:50%; top:50%; background-color:var(--accent-text);
  transform:translate(-50%,-50%);
}
.faq__icon::before{ width:16px; height:1.5px; }
.faq__icon::after{ width:1.5px; height:16px; transition:transform 240ms var(--ease-out); }
.faq__item[open] .faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
@media (hover:hover) and (pointer:fine){ .faq__q:hover{ color:var(--accent-text); } }
.faq__a{ padding:0 0 24px; color:var(--fg-muted); }
.faq__a p{ margin:0; max-inline-size:68ch; }
.faq__a p + p, .faq__a ul + p, .faq__a p + ul{ margin-top:.75em; }
.faq__a ul{ max-inline-size:66ch; }
@supports (interpolate-size:allow-keywords){
  :root{ interpolate-size:allow-keywords; }
  .faq__item::details-content{
    block-size:0; overflow:hidden;
    transition:block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
  }
  .faq__item[open]::details-content{ block-size:auto; }
}

/* Nota informativa (acima do FAQ, abaixo da lista de documentos) */
.note{
  margin:0 0 var(--space-5); padding:4px 16px; max-inline-size:65ch;
  border-left:2px solid var(--accent-deco);
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--fg-subtle);
}
.theme-dark .note{ color:var(--mist-300); }

/* Layout do FAQ na home: cabeçalho fixo à esquerda */
.faq-layout{ display:grid; gap:var(--space-head); }
.faq-layout__head{ margin-bottom:0; }
.faq-layout__head .note{ margin-top:var(--space-5); }
.faq-layout .faq{ max-inline-size:45rem; }
@media (min-width:64em){
  .faq-layout{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--space-grid); align-items:start; }
  .faq-layout__head{ grid-column:1 / 5; position:sticky; top:calc(4rem + 32px); padding-right:var(--space-5); }
  .faq-layout .faq{ grid-column:5 / 13; max-inline-size:none; }
}


/* 20 · Contato e formulário (monta a mensagem e abre o WhatsApp) */
.contact{ display:grid; gap:32px; }
.contact__head{ margin-bottom:0; }
.contact__direct{ width:100%; }
.contact__divider{
  display:flex; align-items:center; gap:16px; margin:0; max-inline-size:none;
  font-size:var(--fs-xs); color:var(--fg-subtle);
}
.contact__divider::before, .contact__divider::after{ content:""; flex:1; height:1px; background-color:var(--line); }
.channels{ display:grid; gap:20px; margin:0; }
.channels dt{
  margin-bottom:4px; font:500 .75rem/1.4 var(--font-brand); letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-text);
}
.channels dd{ margin:0; font-size:1.0625rem; line-height:1.5; color:var(--fg); overflow-wrap:anywhere; }
.channels dd a:not([class]){ text-decoration-color:var(--accent-deco); }
.channels .link-arrow{ margin-top:2px; }
.contact-card{
  --cut:var(--cut-lg);
  padding:clamp(24px,4vw,48px); background-color:var(--surface); color:var(--fg);
}
.contact-card__title{ margin:0 0 var(--space-5); }
@media (min-width:64em){
  .contact{
    grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto auto auto 1fr;
    column-gap:var(--space-grid); row-gap:32px; align-items:start;
  }
  .contact > *{ grid-column:1 / 6; }
  .contact__head{ grid-row:1; }
  .contact__direct{ grid-row:2; width:auto; justify-self:start; }
  .contact__channels{ grid-row:3; }
  .contact__divider{ display:none; }
  .contact > .contact-card{ grid-column:7 / 13; grid-row:1 / span 4; }
  /* no desktop o dourado da seção é o do formulário: o botão direto vira contornado */
  .btn--ghost-lg{ color:var(--fg); box-shadow:inset 0 0 0 1px var(--line-strong); }
  .btn--ghost-lg::before{ display:none; }
}
@media (min-width:64em) and (hover:hover) and (pointer:fine){
  .btn--ghost-lg:hover{ box-shadow:inset 0 0 0 1px var(--accent-deco); background-color:rgba(192,154,95,.08); }
}

.wa-form{ display:grid; gap:20px; }
/* nome e assunto lado a lado só quando o cartão tem largura para isso */
@media (min-width:48em) and (max-width:63.99em), (min-width:80em){
  .wa-form{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
  .wa-form > *{ grid-column:1 / -1; }
  .wa-form > .field--half{ grid-column:auto; }
}
.field{ display:grid; gap:8px; min-width:0; margin:0; }
.field > label, .field legend{ font:600 var(--fs-small)/1.4 var(--font-text); color:var(--navy-900); }
.field legend{ padding:0; margin-bottom:4px; }
fieldset.field{ display:block; border:0; padding:0; }
.field__opt{ font-weight:400; color:var(--slate-500); }
.field input[type="text"], .field select, .field textarea{
  width:100%; min-height:52px; padding:0 16px; margin:0;
  font:400 1.0625rem/1.4 var(--font-text); color:var(--navy-900);
  background-color:var(--field-bg); border:1px solid var(--line-strong); border-radius:0;
  -webkit-appearance:none; appearance:none;
  transition:border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.field textarea{ min-height:128px; padding:14px 16px; line-height:1.5; resize:vertical; }
.field select{
  padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23011A35' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.field ::placeholder{ color:var(--slate-500); opacity:1; }
@media (hover:hover) and (pointer:fine){
  .field input[type="text"]:hover, .field select:hover, .field textarea:hover{ border-color:var(--navy-900); }
}
.field input[type="text"]:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.field input[type="text"]:focus, .field select:focus, .field textarea:focus{
  background-color:var(--field-bg-focus); border-color:var(--navy-900);
  outline:2px solid var(--gold-700); outline-offset:2px;
}
.field [aria-invalid="true"]{ border-color:var(--red-600) !important; box-shadow:inset 3px 0 0 var(--red-600); }
.choices{ display:grid; }
@media (min-width:48em){ .choices{ display:flex; flex-wrap:wrap; column-gap:28px; } }
.choice, .field--check{
  display:grid; grid-template-columns:22px 1fr; column-gap:12px; align-items:start;
}
.choice{ min-height:44px; padding-block:10px; font-size:1rem; line-height:1.4; color:var(--navy-900); cursor:pointer; }
.choice input, .field--check input{
  width:22px; height:22px; margin:0; accent-color:var(--navy-900); cursor:pointer;
}
.field--check{ row-gap:8px; }
.field--check label{
  min-height:44px; padding-top:1px; cursor:pointer;
  font-weight:400; font-size:var(--fs-small); line-height:1.5; color:var(--navy-900);
}
.field--check .field__error{ grid-column:1 / -1; }
.field__meta{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; }
.field__hint, .field__count{ margin:0; font-size:var(--fs-xs); line-height:1.5; color:var(--slate-500); }
.field__hint{ flex:1 1 20rem; }
.field__count{ margin-left:auto; font-variant-numeric:tabular-nums; }
.field__count.is-near{ color:var(--gold-700); }
.field__error{
  display:flex; gap:8px; align-items:flex-start; margin:0;
  font:600 var(--fs-xs)/1.45 var(--font-text); color:var(--red-600);
}
.field__error:empty{ display:none; }
.field__error::before{
  content:""; flex:none; width:16px; height:16px; margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23B3261E' stroke-width='1.5'/%3E%3Cpath d='M8 4.2v5' stroke='%23B3261E' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='11.6' r='.95' fill='%23B3261E'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
.wa-preview{ margin:0; }
.wa-preview__label{
  margin:0 0 8px; font:500 .75rem/1.4 var(--font-brand); letter-spacing:.2em;
  text-transform:uppercase; color:var(--slate-500);
}
.wa-preview__text{
  margin:0; max-inline-size:none; padding:16px 20px;
  background-color:var(--ivory-100); border-left:2px solid var(--gold-500);
  font-size:var(--fs-small); line-height:1.55; color:var(--navy-900);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.wa-preview__text .ph{ color:var(--slate-500); }
.wa-preview__text.is-updated{ animation:preview-pulse 300ms var(--ease-out); }
@keyframes preview-pulse{ from{ border-left-color:rgba(192,154,95,.4); } }
.wa-form__submit{ width:100%; }
@media (min-width:48em){ .wa-form__submit{ width:auto; justify-self:start; } }
.form-note{ margin:-8px 0 0; font-size:var(--fs-xs); line-height:1.5; color:var(--slate-500); overflow-wrap:anywhere; }
.form-note + .form-note{ margin-top:-12px; }
.form-status{ margin:0; font:600 var(--fs-small)/1.5 var(--font-text); color:var(--navy-900); }
.form-status:empty{ margin-top:-20px; }


/* 21 · Rodapé */
.site-footer{
  background-color:var(--navy-950);
  padding-top:calc(var(--space-section) * .75);
  /* a barra de WhatsApp some quando o rodapé aparece: não é preciso reservar espaço para ela */
  padding-bottom:env(safe-area-inset-bottom,0px);
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--mist-300);
}
.site-footer__grid{ display:grid; gap:40px 32px; padding-bottom:var(--space-7); }
.site-footer__brand img{ width:150px; height:auto; margin-bottom:20px; }
.site-footer__brand p{ margin:0; max-inline-size:34ch; }
.site-footer__nav{ display:grid; gap:40px 24px; }
@media (min-width:22.5em){ .site-footer__nav{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.site-footer__title{
  margin:0 0 12px; max-inline-size:none;
  font:500 .75rem/1.4 var(--font-brand); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-500);
}
.site-footer__list a, .site-footer__contact a, .site-footer__legal a{
  display:inline-flex; align-items:center; min-height:32px;
  color:var(--mist-300); text-decoration:none; overflow-wrap:anywhere;
  transition:color var(--dur-2) var(--ease-out);
}
.site-footer a:hover{ color:var(--ivory-100); text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--gold-500); }
.site-footer__contact{ display:grid; gap:8px; }
.site-footer__contact p{ margin:0; }
.site-footer .site-footer__contact a{ display:inline; min-height:0; padding-block:4px; }
.site-footer__legal{
  display:grid; gap:16px 48px; padding-block:24px;
  border-top:1px solid var(--line);
  font-size:var(--fs-xs); color:var(--mist-400);
}
.site-footer__legal p{ margin:0; max-inline-size:78ch; }
.site-footer__legal .site-footer__oab{ color:var(--mist-300); margin-bottom:8px; }
/* link para conferir a inscrição no Cadastro Nacional dos Advogados (todas as páginas) */
.site-footer__legal .site-footer__cna{ margin:-4px 0 8px; }
.site-footer__legal .site-footer__cna a{ color:var(--mist-300); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; text-decoration-color:rgba(192,154,95,.6); }
.site-footer__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px; }
.site-footer__legal .site-footer__top{ color:var(--mist-300); }
@media (min-width:48em){
  .site-footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer__nav{ grid-column:1 / -1; grid-row:2; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:64em){
  .site-footer__grid{ grid-template-columns:1.4fr 2fr 1fr; }
  .site-footer__nav{ grid-column:auto; grid-row:auto; }
  .site-footer__legal{ grid-template-columns:1fr auto; align-items:end; }
  .site-footer__meta{ justify-content:flex-end; }
}


/* 22 · WhatsApp fixo: barra inferior abaixo de 1200 px.
   A partir de 1200 px o header fixo já mostra "Fale pelo WhatsApp" o tempo todo,
   então não há botão flutuante (ele cobria conteúdo, como os "+" do FAQ). */
.wa-dock{
  position:fixed; inset-inline:0; bottom:0; z-index:var(--z-dock);
  padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom,0px));
  background-color:rgba(0,15,33,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid rgba(192,154,95,.28);
  visibility:hidden; transform:translateY(110%);
  transition:transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
}
.wa-dock.is-visible{
  visibility:visible; transform:none;
  transition:transform var(--dur-3) var(--ease-out), visibility 0s;
}
.wa-dock__link{
  --cut:var(--cut-sm);
  position:relative; isolation:isolate;
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; min-height:48px; padding:0 20px;
  font:500 var(--fs-button)/1.2 var(--font-brand); letter-spacing:var(--ls-button);
  color:var(--navy-900); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.wa-dock__link::before{
  content:""; position:absolute; inset:0; z-index:-1; background-color:var(--gold-500);
  transition:background-color var(--dur-2) var(--ease-out);
}
.wa-dock__link:active::before{ background-color:var(--gold-600); }
@media (min-width:48em){ .wa-dock__link{ max-width:26rem; margin-inline:auto; } }
@media (hover:hover) and (pointer:fine){ .wa-dock__link:hover::before{ background-color:var(--gold-300); } }
@media (min-width:80em){ .wa-dock{ display:none !important; } }


/* 23 · Páginas internas (áreas de atuação) */

/* Trilha de navegação: "/" desenhado a 60° */
.breadcrumb{ margin-bottom:24px; font-size:var(--fs-xs); color:var(--mist-300); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; list-style:none; margin:0; padding:0; }
.breadcrumb li{ display:inline-flex; align-items:center; }
.breadcrumb li + li::before{
  content:""; display:inline-block; width:1px; height:12px; margin-inline:12px;
  background-color:var(--gold-500); transform:skewX(-30deg);
}
/* inline-flex centraliza o texto na área de toque (44 px em telas de toque) */
.breadcrumb a{ display:inline-flex; align-items:center; padding-block:4px; color:var(--mist-300); text-decoration:none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible{ color:var(--ivory-100); text-decoration:underline; text-underline-offset:.2em; }
.breadcrumb [aria-current="page"]{ color:var(--ivory-100); }

/* Hero de texto (LCP = H1, sem foto) */
.page-hero{
  position:relative;
  padding-top:calc(var(--header-h) + 40px + env(safe-area-inset-top,0px));
  padding-bottom:clamp(56px,7vw,104px);
}
.page-hero__grid{ position:relative; display:grid; }
.page-hero h1{ margin-bottom:20px; max-inline-size:20ch; }
/* segunda linha do H1 das áreas ("em Bagé/RS"): menor e dourada, mas parte do heading */
.page-hero__place{
  display:block; margin-top:.35em;
  font:400 var(--fs-h3)/1.3 var(--font-brand); letter-spacing:0; color:var(--accent-text);
}
.page-hero .lead{ margin-bottom:32px; max-inline-size:52ch; color:var(--mist-300); }
.page-hero__more{ margin-top:12px; }
.page-hero__meta{ margin:0; font-size:var(--fs-xs); color:var(--mist-400); }
.page-hero__arc, .page-hero__mark{ display:none; }
.page-hero--compact{ padding-bottom:clamp(48px,5vw,72px); }
.page-hero--compact .lead{ margin-bottom:20px; }
@media (min-width:64em){
  .page-hero__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--space-grid); }
  .page-hero__content{ grid-column:1 / 8; }
  /* o arco acompanha a altura do conteúdo (absoluto: não empurra a altura do hero) */
  .page-hero__arc{
    display:block; position:absolute; top:0; left:calc(100% * 8 / 12 + var(--space-grid));
    width:min(300px, 100% * 4 / 12 - var(--space-grid)); height:100%; overflow:visible;
    fill:none; stroke:var(--gold-500); stroke-opacity:.35; stroke-width:1;
  }
  /* monograma DF dentro do arco: preenche as colunas da direita sem competir com o H1 */
  .page-hero__mark{
    display:block; position:absolute; top:50%; z-index:-1;
    left:calc(100% * 8 / 12 + var(--space-grid) + clamp(40px, 5vw, 96px));
    width:clamp(150px, 15vw, 220px); height:auto;
    opacity:.14; transform:translateY(-50%); pointer-events:none;
  }
}

/* Introdução + "Quando procurar": título fixo à esquerda, lista à direita */
.split{ display:grid; gap:var(--space-7); }
.split__aside > p:not([class]){ font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--fg-muted); }
.split__aside > p:last-child{ margin-bottom:0; }
.split__aside h2{ margin-bottom:var(--space-5); }
@media (min-width:64em){
  .split{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--space-grid); align-items:start; }
  .split__aside{ grid-column:1 / 6; position:sticky; top:96px; }
  .split__main{ grid-column:7 / 13; }
}

/* Lista de situações com marcador "/" */
.slash-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.slash-list li{ position:relative; padding:16px 0 16px 28px; border-bottom:1px solid var(--line); color:var(--fg); }
.slash-list li::before{
  content:""; position:absolute; left:6px; top:calc(16px + 6px); width:1px; height:14px;
  background-color:var(--gold-500); transform:skewX(-30deg);
}

/* Lista de serviços: título curto + uma frase, sobre filete com o traço dourado.
   8 itens = 4 colunas no desktop (2 linhas cheias); grupos de 5 e 3 usam --3. */
.service-grid{ display:grid; column-gap:var(--space-grid); }
@media (min-width:48em){ .service-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--space-5); } }
@media (min-width:64em){
  .service-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:var(--space-6); }
  .service-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.service{ position:relative; padding:18px 0 20px; border-top:1px solid var(--line); }
.service::before{
  content:""; position:absolute; top:-1px; left:0; width:24px; height:1px; background-color:var(--gold-500);
}
@media (min-width:48em){ .service{ padding:20px 0 8px; } }
.service__title{ margin:0 0 6px; max-inline-size:none; font:500 var(--fs-card)/1.3 var(--font-brand); color:var(--fg); }
.service p{ margin:0; font-size:1rem; line-height:1.6; color:var(--fg-muted); }
.service-group + .service-group{ margin-top:var(--space-7); }

/* Documentos que costumam ajudar (seção escura) */
.docs .dash-list li{ color:var(--fg); }
.docs .note{ margin:var(--space-6) 0 0; }

/* Aviso em destaque (ex.: senha do gov.br) */
.notice{
  display:flex; gap:12px; align-items:flex-start; margin-top:var(--space-6); padding:16px 20px;
  max-inline-size:65ch; border:1px solid var(--accent-deco);
  font:600 var(--fs-small)/1.55 var(--font-text); color:var(--fg);
}
.notice .icon{ margin-top:1px; color:var(--accent-text); }
.notice p{ margin:0; }

/* Chamada "Tem uma empresa?" */
.callout{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px;
  margin-top:var(--space-7); padding:24px; background-color:var(--surface); border:1px solid var(--line);
}
.callout p{ margin:0; flex:1 1 22rem; }

/* Perfil compacto do responsável */
.profile-mini{ display:grid; grid-template-columns:96px 1fr; gap:20px; align-items:start; }
@media (min-width:48em){ .profile-mini{ grid-template-columns:120px 1fr; gap:24px; } }
.profile-mini__photo{ aspect-ratio:3 / 4; }
.profile-mini__photo picture, .profile-mini__photo img{ width:100%; height:100%; }
.profile-mini__name{ margin:0; font:500 1.25rem/1.3 var(--font-brand); max-inline-size:none; }
.profile-mini .oab-line{ margin:6px 0 12px; }
.profile-mini p:not([class]){ font-size:1rem; line-height:1.6; color:var(--fg-muted); }
.profile-mini .label{ margin-bottom:8px; }
.profile-mini .link-arrow{ margin-top:-4px; }

/* Encerramento: CTA final + perfil compacto */
.closing{ display:grid; gap:var(--space-8); }
.final-cta h2{ margin-bottom:16px; }
.final-cta > p:not([class]){ color:var(--fg-muted); max-inline-size:52ch; margin-bottom:32px; }
@media (min-width:64em){
  .closing{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--space-grid); align-items:center; }
  .closing .profile-mini{ grid-column:1 / 6; grid-row:1; }
  .closing .final-cta{ grid-column:7 / 13; grid-row:1; }
}

/* Assuntos relacionados */
.related{ display:flex; flex-wrap:wrap; align-items:center; gap:0 28px; margin-bottom:var(--space-8); }
.related .label{ flex-basis:100%; max-inline-size:none; margin-bottom:4px; }
/* texto e seta no mesmo fluxo: se o link quebrar linha, a seta acompanha a última palavra */
.related .link-arrow{ display:block; min-height:0; padding-block:10px; line-height:1.5; }
.related .link-arrow .icon{ display:inline-block; vertical-align:-5px; margin-left:8px; }
.link-arrow__end{ white-space:nowrap; }

/* Outras áreas em linhas */
.area-rows{ list-style:none; margin:0; padding:0; display:grid; column-gap:var(--space-grid); border-top:1px solid var(--line); }
@media (min-width:64em){ .area-rows{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.area-rows a{
  display:grid; grid-template-columns:3rem 1fr auto; align-items:start; column-gap:8px;
  min-height:64px; padding-block:14px; border-bottom:1px solid var(--line);
  color:var(--fg); text-decoration:none;
}
.area-rows__num{ padding-top:.45em; font:500 .875rem/1 var(--font-brand); color:var(--accent-text); font-variant-numeric:tabular-nums lining-nums; }
.area-rows .icon--arrow{ align-self:center; }
.area-rows__name{ display:block; font:500 var(--fs-card)/1.3 var(--font-brand); transition:color var(--dur-2) var(--ease-out); }
.area-rows__text{ display:block; margin-top:4px; font-size:var(--fs-small); line-height:1.5; color:var(--fg-muted); }
.area-rows .icon--arrow{ color:var(--accent-text); }
@media (hover:hover) and (pointer:fine){
  .area-rows a:hover .area-rows__name{ color:var(--accent-text); }
  .area-rows a:hover .icon--arrow{ transform:translateX(4px); }
}

/* Selo de revisão e aviso informativo (fim das áreas) */
.review-note{
  margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid var(--line);
  font-size:var(--fs-xs); line-height:1.6; color:var(--fg-subtle);
}
.review-note p{ margin:0 0 .5em; max-inline-size:78ch; }


/* 24 · Política de privacidade */
.legal{ display:grid; gap:var(--space-7); }
.toc{ padding:24px; background-color:var(--surface); border:1px solid var(--line); }
.toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.toc a{
  display:grid; grid-template-columns:2rem 1fr; align-items:baseline; min-height:36px; padding-block:6px;
  font-size:var(--fs-small); line-height:1.45; color:var(--fg); text-decoration:none;
}
.toc a:hover{ color:var(--accent-text); text-decoration:underline; text-underline-offset:.2em; }
.toc .num-tag{ color:var(--accent-text); }
.prose{ max-inline-size:68ch; }
.prose h2{
  display:flex; gap:14px; align-items:baseline; max-inline-size:none;
  margin:var(--space-8) 0 var(--space-4); scroll-margin-top:6rem;
  font-size:var(--fs-h3); line-height:1.3;
}
.prose h2:first-child{ margin-top:0; }
.prose h2 .num-tag{ font-size:1rem; color:var(--accent-text); }
.prose p, .prose li{ color:var(--fg-muted); }
.prose .dash-list{ margin:0 0 1em; }
@media (min-width:64em){
  .legal{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--space-grid); align-items:start; }
  .toc{ grid-column:1 / 5; position:sticky; top:96px; }
  .prose{ grid-column:5 / 13; padding-left:var(--space-6); }
}


/* 25 · Página 404 */
.error-page{
  min-height:100vh; min-height:100svh; display:grid; align-items:center;
  padding:calc(var(--header-h) + 48px + env(safe-area-inset-top,0px)) 0 64px; text-align:center;
}
.error-page .eyebrow{ justify-content:center; }
.error-page .eyebrow span{ margin-inline-end:calc(-1 * var(--ls-label)); }
.error-page .eyebrow::after{ content:""; flex:none; width:var(--trace-w); }
.error-page h1, .error-page p{ margin-inline:auto; }
.error-page h1{ margin-bottom:20px; max-inline-size:18ch; }
.error-page .lead{ margin-bottom:32px; }
.error-page .actions{ justify-content:center; }
.error-page__more{ margin-top:12px; }
.error-page__foot{ margin-top:var(--space-6); font-size:var(--fs-small); color:var(--mist-400); }
/* símbolo oficial preenchido (nunca em contorno) */
.monogram{ width:104px; height:auto; margin:0 auto 32px; }
@media (min-width:48em){ .monogram{ width:136px; } }


/* 26 · Movimento */
/* Tudo escondido só com html.reveal-on (posto pelo main.js). Sem JS, tudo aparece. */

/* Revelação ao rolar (usa "translate" para não brigar com o "transform" dos hovers) */
.reveal-on [data-reveal]:not(.is-done){
  transition:opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.reveal-on [data-reveal]:not(.in){ opacity:0; translate:0 16px; }

/* Linhas que se desenham (path/polygon com pathLength="1") */
[data-draw]{
  stroke-dasharray:1; stroke-dashoffset:0;
  transition:stroke-dashoffset var(--dur-5) var(--ease-in-out) 150ms;
}
.trace [data-draw]{ transition-duration:900ms; }
.reveal-on [data-reveal]:not(.in) [data-draw]{ stroke-dashoffset:1; }
.reveal-on .step:not(.in)::after{ transform:scaleY(0); }
@media (min-width:64em){ .reveal-on .step:not(.in)::after{ transform:scaleX(0); } }

/* Abertura dos heróis: traço, arco e monograma se desenham ao carregar.
   Animação só em CSS (estado final = visível): se o main.js falhar, nada fica escondido. */
[data-intro] [data-draw]{ animation:draw var(--dur-5) var(--ease-in-out) 150ms both; }
[data-intro] .trace [data-draw]{ animation-duration:900ms; }
@keyframes draw{ from{ stroke-dashoffset:1; } }
.hero__arc, .page-hero__arc{ animation:arc-in 1600ms var(--ease-in-out) 400ms both; }
@keyframes arc-in{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0 0); } }
.error-page .monogram{ animation:mark-in 1200ms var(--ease-out) 150ms both; }
@keyframes mark-in{ from{ opacity:0; clip-path:inset(100% 0 0 0); } to{ opacity:1; clip-path:inset(0 0 0 0); } }

/* Brilho âmbar de ambiente: estático (sem movimento contínuo) */
[data-ambient]{ position:relative; isolation:isolate; overflow:hidden; overflow:clip; }
[data-ambient]::before{
  content:""; position:absolute; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 42% at 78% 22%, rgba(192,154,95,.10), transparent 70%),
    radial-gradient(30% 36% at 12% 88%, rgba(192,154,95,.06), transparent 70%);
}
body.is-paused *, body.is-paused *::before, body.is-paused *::after{ animation-play-state:paused !important; }


/* 27 · Preferências do usuário */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important;
    transition-duration:.01ms !important; transition-delay:0s !important;
  }
  [data-reveal]{ opacity:1 !important; translate:none !important; }
  [data-draw]{ stroke-dashoffset:0 !important; }
  .hero__arc, .page-hero__arc, .error-page .monogram{ animation:none !important; clip-path:none !important; }
  .step::after{ transform:none !important; }
}
@media (pointer:coarse){
  .breadcrumb a, .site-footer__list a, .site-footer__contact a, .site-footer__legal .site-footer__cna a{ min-height:44px; }
  .site-footer .site-footer__contact a, .channels dd a:not([class]){ display:inline-flex; align-items:center; min-height:44px; }
  .site-footer__legal .site-footer__top, .skip-link{ min-height:44px; }
  .skip-link{ display:inline-flex; align-items:center; }
}
@media (forced-colors:active){
  .btn, .wa-dock__link{ border:1px solid ButtonText; }
  .btn::before, .wa-dock__link::before{ display:none; }
  .trace, .hero__arc, .page-hero__arc, .portrait__frame{ stroke:CanvasText; }
  .sit-card::before, .area-card::before, .step::after{ background-color:CanvasText; }
  /* ícones desenhados com background (sumiriam no alto contraste) */
  .faq__icon::before, .faq__icon::after, .menu-toggle__icon span,
  .dash-list li::before, .dash-list li::after, .slash-list li::before,
  .hero__facts li::before, .breadcrumb li + li::before, .service::before, .commit::before{
    forced-color-adjust:none; background-color:CanvasText;
  }
  /* logos brancos: mantêm o fundo azul-marinho para continuarem legíveis */
  .brand img, .site-footer__brand img{ forced-color-adjust:none; background-color:#011A35; padding:4px 6px; }
}
@media print{
  .site-header, .mobile-menu, .wa-dock, .skip-link, .hero__media, .hero__arc,
  .page-hero__arc, .page-hero__mark, .menu-toggle{ display:none !important; }
  .theme-dark, .theme-light, .hero, .bg-alt{ background:#fff !important; color:#000 !important; }
  /* os filhos usam os tokens do tema: no papel branco, todos passam a ser escuros */
  .theme-dark, .theme-light{
    --fg:#000; --fg-muted:#333; --fg-subtle:#444;
    --accent-text:#5C4318; --accent-deco:#7A5A28; --line:#bbb; --line-strong:#666;
    --surface:#fff; --bg:#fff; --bg-alt:#fff;
  }
  .hero__title, .hero__title .l--accent, .hero__lede, .hero__kicker, .page-hero .lead,
  .breadcrumb, .breadcrumb a, .breadcrumb [aria-current="page"], .site-footer, .site-footer__title,
  .site-footer a, .site-footer__legal, .site-footer__legal .site-footer__oab, .theme-dark .note,
  .page-hero__meta, .error-page__foot{ color:#000 !important; text-shadow:none !important; }
  .hero__facts{ background:none !important; }
  [data-ambient]::before{ display:none; }
  .hero__facts li{ color:#000 !important; }
  .reveal-on [data-reveal]{ opacity:1 !important; translate:none !important; }
  /* imprime também as respostas do FAQ */
  .faq__item::details-content{ block-size:auto !important; content-visibility:visible !important; }
}


/* 28 · Páginas de área: ilustração, serviços com ícone, equipe, passos e foto
   Componentes compartilhados por todas as páginas de areas/ (HTML exato em
   docs/COMPONENTES-AREAS.md). Movimento só com transform, opacity e
   stroke-dashoffset. O estado escondido depende de html.reveal-on (main.js):
   sem JS ou com movimento reduzido, tudo já nasce desenhado e visível.
   A ilustração do hero anima só com CSS (estado final = desenhada).

   28a Cores de traço por tema      28d Como costuma funcionar (.area-steps)
   28b Ilustração do hero (.area-art) 28e Quem atende esta área (.area-team)
   28c Serviços com ícone (.svc-ic)  28f Foto do escritório (.area-photo)
   28g Movimento reduzido, alto contraste e impressão */

/* 28a · Cores de traço (ícones e ilustrações): dourado mais escuro no claro */
.theme-light{ --art-stroke:var(--gold-600); --art-soft:var(--gold-500); }
.theme-dark{ --art-stroke:var(--gold-300); --art-soft:var(--gold-500); }


/* 28b · Ilustração do hero: cena de linha dourada (viewBox 480x360, traço 1.5).
   Cada <g> é um elemento da cena; a ordem dos <g> é a ordem do desenho. */
.area-art{
  position:relative; isolation:isolate; width:100%; max-inline-size:26rem;
  margin:40px 0 0; pointer-events:none;
}
/* brilho dourado suave atrás do desenho (estático; só acende na entrada) */
.area-art::before{
  content:""; position:absolute; inset:-14% -10%; z-index:-1;
  background:radial-gradient(48% 50% at 52% 56%, rgba(214,184,134,.17), rgba(214,184,134,.05) 55%, rgba(214,184,134,0) 72%);
  animation:art-glow 1800ms var(--ease-out) 1500ms both;
}
.area-art__svg{
  display:block; width:100%; height:auto; overflow:visible;
  fill:none; stroke:var(--art-stroke); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round;
}
.area-art__svg path{
  stroke-dasharray:1 1; stroke-dashoffset:0;
  animation:art-draw 1600ms var(--ease-in-out) var(--art-d, 150ms) both;
}
.area-art__svg > g:nth-of-type(2){ --art-d:400ms; }
.area-art__svg > g:nth-of-type(3){ --art-d:750ms; }
.area-art__svg > g:nth-of-type(4){ --art-d:1050ms; }
.area-art__svg > g:nth-of-type(5){ --art-d:1350ms; }
.area-art__svg > g:nth-of-type(6){ --art-d:1650ms; }
/* chão e linhas de apoio: dourado médio, mais discreto */
.area-art__base{ stroke:var(--art-soft); opacity:.75; }
/* elemento principal da cena: traço mais forte (o brilho vem do filtro #area-art-glow do próprio SVG) */
.area-art__focus{ stroke:var(--gold-300); stroke-width:2; }
.area-art__focus path{ animation-duration:1400ms; }
/* cintilações: pequenas cruzes que acendem no fim (sem desenho) */
.area-art__spark{
  stroke:var(--gold-300); stroke-width:1.25;
  transform-box:fill-box; transform-origin:center;
  animation:art-spark 900ms var(--ease-out) 2700ms both;
}
.area-art__spark path{ stroke-dasharray:none; animation:none; }
@keyframes art-draw{ from{ stroke-dashoffset:1; } }
@keyframes art-glow{ from{ opacity:0; } }
@keyframes art-spark{ from{ opacity:0; transform:scale(.4); } }
/* substitui o arco e o monograma decorativos do hero de área */
.page-hero__grid:has(.area-art) > .page-hero__arc,
.page-hero__grid:has(.area-art) > .page-hero__mark{ display:none; }
@media (min-width:64em){
  .area-art{ grid-column:8 / 13; grid-row:1; align-self:center; justify-self:end; max-inline-size:30rem; margin:0; }
}


/* 28c · Serviços em cartões com ícone ("Como podemos ajudar").
   Modificador da .service-grid: o HTML de cada .service ganha só o <svg class="svc-ic">. */
.service-grid--ic{ row-gap:12px; }
.service-grid--ic .service{
  --cut:12px;
  display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:16px; align-content:start;
  padding:20px 20px 22px; border-top:0;
  background-color:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut) * 1.732),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 calc(var(--cut) * 1.732));
}
.service-grid--ic .service > :not(.svc-ic){ grid-column:2; }
/* filete dourado no topo, logo depois do canto cortado; cresce na entrada */
.service-grid--ic .service::before{ top:0; left:var(--cut); width:56px; height:2px; transform-origin:left; }
.svc-ic{
  grid-row:1 / span 2; width:44px; height:44px; overflow:visible;
  fill:none; stroke:var(--art-stroke); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:butt;
}
.svc-ic path{ --svc-d:0ms; stroke-dasharray:1 1; stroke-dashoffset:0; }
.svc-ic path:nth-child(2){ --svc-d:120ms; } .svc-ic path:nth-child(3){ --svc-d:240ms; }
.svc-ic path:nth-child(4){ --svc-d:360ms; } .svc-ic path:nth-child(5){ --svc-d:480ms; }
.svc-ic path:nth-child(n+6){ --svc-d:600ms; }
/* entrada: escondido na hora (sem transição) e desenhado só quando o cartão ganha .in */
.reveal-on .service-grid--ic > li:not(.in) .svc-ic path{ stroke-dashoffset:1; }
.reveal-on .service-grid--ic > li:not(.in)::before{ transform:scaleX(0); }
.reveal-on .service-grid--ic > li.in .svc-ic path{
  transition:stroke-dashoffset 1200ms var(--ease-in-out) calc(var(--i, 0) * var(--stagger) + 200ms + var(--svc-d));
}
.reveal-on .service-grid--ic > li.in::before{
  transition:transform 900ms var(--ease-out) calc(var(--i, 0) * var(--stagger) + 250ms);
}
@media (min-width:48em){
  .service-grid--ic{ row-gap:var(--space-grid); }
  .service-grid--ic .service{ grid-template-columns:minmax(0,1fr); padding:26px 24px 28px; }
  .service-grid--ic .service > :not(.svc-ic){ grid-column:1; }
  .svc-ic{ grid-row:auto; width:56px; height:56px; margin:-4px 0 16px -4px; }
}


/* 28d · Como costuma funcionar: 4 passos ligados por uma linha de luz que se desenha */
.area-steps__list{ display:grid; gap:36px; margin:0; padding:0; list-style:none; }
.area-steps__item{
  --sd:0ms;
  position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:20px; align-content:start;
}
.area-steps__item:nth-child(2){ --sd:450ms; }
.area-steps__item:nth-child(3){ --sd:900ms; }
.area-steps__item:nth-child(n+4){ --sd:1350ms; }
.area-steps__num{
  --cut:10px;
  position:relative; z-index:1; grid-row:1 / span 2;
  display:grid; place-items:center; width:56px; height:56px;
  background-color:var(--navy-800); box-shadow:inset 0 0 0 1px rgba(214,184,134,.5);
  font:500 1.125rem/1 var(--font-brand); color:var(--gold-300);
  font-variant-numeric:tabular-nums lining-nums;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut) * 1.732),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 calc(var(--cut) * 1.732));
}
.theme-light .area-steps__num{ background-color:var(--navy-900); }
/* halo que acende atrás de cada número */
.area-steps__item::before{
  content:""; position:absolute; left:-24px; top:-24px; z-index:0; width:104px; height:104px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(214,184,134,.30), rgba(214,184,134,0));
}
/* linha de luz até o passo seguinte (vertical no celular, horizontal no desktop) */
.area-steps__item::after{
  content:""; position:absolute; left:27.5px; top:64px; bottom:-28px; width:1px; pointer-events:none;
  background:linear-gradient(180deg, var(--gold-300), var(--gold-500));
  box-shadow:0 0 8px 1px rgba(214,184,134,.4);
  transform-origin:top;
}
.area-steps__item:last-child::after{ display:none; }
.area-steps__title{ margin:12px 0 6px; max-inline-size:none; font:500 var(--fs-card)/1.3 var(--font-brand); }
.area-steps__text{ margin:0; font-size:1rem; line-height:1.6; color:var(--fg-muted); max-inline-size:40ch; }
@media (min-width:64em){
  .area-steps__list{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-grid); }
  .area-steps__item{ grid-template-columns:minmax(0,1fr); }
  .area-steps__num{ grid-row:auto; margin-bottom:24px; }
  .area-steps__title{ margin-top:0; }
  .area-steps__item::after{
    left:68px; right:calc(12px - var(--space-grid)); top:27.5px; bottom:auto; width:auto; height:1px;
    background:linear-gradient(90deg, var(--gold-300), var(--gold-500));
    transform-origin:left;
  }
}
/* entrada: a lista não some inteira; cada passo acende em sequência e a linha corre até o próximo */
.reveal-on .area-steps__list[data-reveal]:not(.in){ opacity:1; translate:none; }
.reveal-on .area-steps__list:not(.in) .area-steps__item > *{ opacity:0; translate:0 10px; }
.reveal-on .area-steps__list:not(.in) .area-steps__item::before{ opacity:0; transform:scale(.5); }
.reveal-on .area-steps__list:not(.in) .area-steps__item::after{ transform:scaleY(0); }
@media (min-width:64em){ .reveal-on .area-steps__list:not(.in) .area-steps__item::after{ transform:scaleX(0); } }
.reveal-on .area-steps__list.in .area-steps__item > *{ transition:opacity 700ms var(--ease-out) var(--sd), translate 700ms var(--ease-out) var(--sd); }
.reveal-on .area-steps__list.in .area-steps__item::before{ transition:opacity 900ms var(--ease-out) var(--sd), transform 900ms var(--ease-out) var(--sd); }
.reveal-on .area-steps__list.in .area-steps__item::after{ transition:transform 700ms var(--ease-in-out) calc(var(--sd) + 250ms); }


/* 28e · Quem atende esta área: foto 4:5 com canto cortado e moldura que se desenha */
.area-team__grid{ display:grid; gap:32px; align-items:center; }
.area-team__head{ margin-bottom:0; }
.area-team__head h2{ margin-bottom:0; }
.area-team__photo{
  position:relative; isolation:isolate; aspect-ratio:4 / 5;
  width:calc(100% - 14px); max-inline-size:300px; margin:0 14px 14px 0;
}
/* brilho dourado suave atrás do retrato */
.area-team__photo::before{
  content:""; position:absolute; inset:-18%; z-index:-2; pointer-events:none;
  background:radial-gradient(closest-side, rgba(192,154,95,.20), rgba(192,154,95,0));
}
.area-team__photo picture, .area-team__photo img{ width:100%; height:100%; }
.area-team__photo img{
  object-fit:cover; object-position:50% 22%; background-color:var(--navy-900);
  clip-path:polygon(7.5% 0, 100% 0, 100% 89.6%, 92.5% 100%, 0 100%, 0 10.4%);
}
.area-team__frame{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%; overflow:visible;
  transform:translate(14px,14px);
  fill:none; stroke:var(--gold-500); stroke-width:1.25;
}
/* a moldura some na hora e só se desenha quando a foto ganha .in */
.reveal-on .area-team__photo:not(.in) [data-draw]{ transition:none; }
.area-team__name{ margin:0; max-inline-size:none; font:500 var(--fs-h3)/1.25 var(--font-brand); }
.area-team__body .oab-line{ margin:6px 0 16px; }
.area-team__body > p:not([class]){ color:var(--fg-muted); max-inline-size:56ch; }
/* quem acompanha as etapas decisivas (quando o responsável da área é outro advogado) */
.area-team__lead{
  display:flex; align-items:center; gap:14px; margin:var(--space-5) 0 var(--space-6); padding:14px 18px;
  max-inline-size:56ch; border-left:2px solid var(--accent-deco); background-color:var(--surface);
  font-size:var(--fs-small); line-height:1.5; color:var(--fg);
}
.area-team__lead img{ flex:none; width:22px; height:auto; }
.area-team__body .actions{ align-items:flex-start; }
@media (min-width:30em){ .area-team__body .actions{ align-items:center; gap:12px 28px; } }
@media (min-width:48em){
  .area-team__grid{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:auto 1fr;
    column-gap:clamp(40px,6vw,96px); row-gap:24px;
  }
  .area-team__photo{ grid-column:1; grid-row:1 / span 2; align-self:center; max-inline-size:400px; width:calc(100% - 16px); margin:0 16px 16px 0; }
  .area-team__frame{ transform:translate(16px,16px); }
  .area-team__head{ grid-column:2; grid-row:1; align-self:end; }
  .area-team__body{ grid-column:2; grid-row:2; align-self:start; }
}
/* encerramento sem o perfil compacto (quando o responsável da área é o próprio Rodrigo) */
@media (min-width:64em){ .closing > .final-cta:only-child{ grid-column:1 / 9; } }


/* 28f · Foto real do escritório em faixa larga, com cartão de texto por cima */
.area-photo{ position:relative; display:grid; background-color:var(--bg); }
.area-photo__media{ position:relative; margin:0; aspect-ratio:16 / 10; overflow:hidden; background-color:var(--navy-950); }
.area-photo__media picture, .area-photo__media img{ width:100%; height:100%; }
.area-photo__media img{ object-fit:cover; object-position:74% 50%; }
.area-photo__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(1,26,53,0) 55%, rgba(1,26,53,.35) 100%);
}
.area-photo__inner{ position:relative; z-index:1; margin-top:-56px; padding-bottom:var(--space-section); }
/* a sombra acompanha o canto cortado (drop-shadow no invólucro) */
.area-photo__wrap{ filter:drop-shadow(0 18px 28px rgba(1,26,53,.16)); }
.area-photo__card{
  --cut:var(--cut-md);
  position:relative; padding:28px 24px; background-color:var(--surface);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut) * 1.732),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 calc(var(--cut) * 1.732));
}
.area-photo__card::before{
  content:""; position:absolute; top:0; left:var(--cut); width:56px; height:2px; background-color:var(--gold-500);
}
.area-photo__card h2{ margin-bottom:var(--space-4); }
.area-photo__card > p:not([class]){ color:var(--fg-muted); }
.area-photo__card .dash-list{ margin-top:var(--space-5); font-size:var(--fs-small); }
.area-photo__card .dash-list li{ color:var(--fg); }
.reveal-on .area-photo__media[data-reveal]:not(.in){ translate:none; }
.reveal-on .area-photo__media:not(.in) img{ transform:scale(1.06); }
.reveal-on .area-photo__media.in img{ transition:transform 1800ms var(--ease-out); }
@media (min-width:48em){ .area-photo__card{ --cut:var(--cut-lg); padding:40px; max-inline-size:34rem; } }
@media (min-width:64em){
  .area-photo{ min-height:clamp(480px, 42vw, 640px); }
  .area-photo__media{ grid-area:1 / 1; aspect-ratio:auto; }
  .area-photo__media img{ object-position:70% 50%; }
  .area-photo__media::after{
    background:linear-gradient(90deg, rgba(1,26,53,.70) 0%, rgba(1,26,53,.35) 40%, rgba(1,26,53,0) 62%);
  }
  .area-photo__inner{ grid-area:1 / 1; align-self:center; margin-top:0; padding-block:64px; }
  .area-photo__card{ max-inline-size:30rem; }
}


/* 28g · Movimento reduzido, alto contraste e impressão */
@media (prefers-reduced-motion:reduce){
  .area-art::before, .area-art__svg path, .area-art__spark{ animation:none !important; }
  .area-art__svg path, .svc-ic path{ stroke-dashoffset:0 !important; }
  .area-art__spark{ opacity:1 !important; transform:none !important; }
  .area-steps__item > *, .area-steps__item::before{ opacity:1 !important; translate:none !important; transform:none !important; }
  .area-steps__item::after, .service-grid--ic .service::before, .area-photo__media img{ transform:none !important; }
}
@media (forced-colors:active){
  .area-art__svg, .area-art__base, .area-art__focus, .area-art__spark, .svc-ic, .area-team__frame{ stroke:CanvasText; }
  .area-art::before, .area-team__photo::before, .area-steps__item::before{ display:none; }
  .service-grid--ic .service, .area-photo__card{ border:1px solid CanvasText; }
  .area-steps__num{ border:1px solid CanvasText; }
  .area-steps__item::after, .service-grid--ic .service::before, .area-photo__card::before{ forced-color-adjust:none; background:CanvasText; box-shadow:none; }
}
@media print{
  .area-art, .area-photo__media, .area-team__frame{ display:none !important; }
  .area-photo__inner{ margin-top:0; }
  .area-photo__wrap{ filter:none; }
  .reveal-on .area-steps__list .area-steps__item > *{ opacity:1 !important; translate:none !important; }
}


/* 28f · "Na lei": etapas previstas em lei, como lista de definições (Criminal e Recuperação Judicial) */
.law-phases{ margin:0; border-top:1px solid var(--line); }
.law-phases dt{ margin:0; padding-top:20px; font:500 var(--fs-card)/1.3 var(--font-brand); color:var(--fg); }
.law-phases dd{ margin:6px 0 0; padding-bottom:20px; border-bottom:1px solid var(--line); color:var(--fg-muted); line-height:1.6; }
.law-phases__foot{ margin:var(--space-5) 0 0; font-size:var(--fs-small); color:var(--fg-muted); }
/* ganchos das seções de área (as regras ficam nos elementos internos, §28d e §28e) */
.area-steps, .area-team{ position:relative; }


/* 29 · Textos de explicação justificados (pedido do escritório).
   A hifenização automática em português (html lang="pt-BR") evita buracos entre as palavras em colunas estreitas;
   a última linha de cada parágrafo continua alinhada à esquerda. Títulos, rótulos, botões e textos curtos de
   interface não entram; blocos centralizados continuam centralizados. Os textos do topo (letra grande, poucas palavras
   por linha) ficam alinhados à esquerda, porque justificados abririam buracos entre as palavras. */
main p:not([class]),
main :is(.lead, .note, .form-note, .area-steps__text, .lx-pstep__text, .lx-remote__text, .proc-mov__exp, .proc-msg__text,
         .area-team__lead, .law-phases__foot, .sit-card__desc, .area-rows__text),
main .law-phases dd,
main :is(.slash-list, .dash-list) li{
  text-align:justify; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:7 3 3;
}
main :is(.section-head--center, .error-page) :is(p, li){ text-align:inherit; }
/* nomes próprios do escritório e da equipe nunca são hifenizados */
.nh{ -webkit-hyphens:manual; hyphens:manual; }


/* 30 · Consulte seu processo (consulte-seu-processo.html + assets/js/consulta.js)
   Formulário com máscara, avisos ao lado, resultado com os dados do processo e a linha do
   tempo dos andamentos (do mais recente ao mais antigo), cada um com a explicação simples em
   destaque e o texto original recolhido. O aviso fixo sobre a IA fica logo abaixo. */
.proc{ padding-block:clamp(3rem,2.2rem + 3.4vw,5.5rem); }
.proc-top{ display:grid; gap:clamp(2rem,1.4rem + 2.4vw,3.5rem); align-items:start; }
@media (min-width:64em){ .proc-top{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); } }
.proc-form__form{ display:grid; gap:22px; }
.proc-form__submit{ justify-self:start; min-width:12rem; }
@media (max-width:29.99em){ .proc-form__submit{ justify-self:stretch; } }
.proc-form__form .field input{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }
/* celulares estreitos: o número inteiro (25 caracteres) cabe no campo */
@media (max-width:24em){ .proc-form__form .field input{ letter-spacing:0; padding-inline:12px; } }
@media (max-width:22em){ .proc-form.contact-card{ padding-inline:16px; } .proc-form__form .field input{ font-size:1rem; padding-inline:10px; } }
.proc-status{ min-height:0; }
/* consultando: uma faixa de luz corre sobre a mensagem (sem animação com movimento reduzido) */
.proc-form__form.is-loading .proc-status::before{
  content:""; display:block; height:2px; margin-bottom:10px;
  background:linear-gradient(90deg, transparent, var(--gold-500), transparent) no-repeat;
  background-size:40% 100%; animation:proc-scan 1.4s var(--ease-in-out) infinite;
}
@keyframes proc-scan{ from{ background-position:-40% 0; } to{ background-position:140% 0; } }
.proc-form__form .btn[disabled]{ opacity:.7; cursor:progress; }
.proc-noscript{ margin-top:var(--space-5); }
.proc-notes .label{ margin-bottom:var(--space-5); }

/* resultado */
.proc-result{ margin-top:clamp(2.5rem,1.8rem + 3vw,4.5rem); scroll-margin-top:calc(var(--header-h, 72px) + 16px); }
.proc-result:focus{ outline:none; }
.proc-result:focus-visible{ outline:2px solid var(--focus); outline-offset:8px; }
.proc-head .label{ margin-bottom:var(--space-3); }
.proc-head__title{ margin:0; font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem); overflow-wrap:anywhere; }
.proc-head__num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:29.99em){ .proc-head__num{ white-space:normal; } }
.proc-head__court{ margin:10px 0 0; color:var(--fg-muted); }
.proc-note{
  display:flex; gap:10px; align-items:flex-start; margin:var(--space-5) 0 0; padding:12px 16px;
  max-inline-size:70ch; border:1px solid var(--accent-deco);
  font:600 var(--fs-xs)/1.5 var(--font-text); color:var(--fg);
}
.proc-note .icon{ flex:none; margin-top:1px; color:var(--accent-text); }
.proc-note--test{ border-style:dashed; }
.proc-msg{
  --cut:var(--cut-md);
  display:flex; gap:14px; align-items:flex-start; padding:clamp(20px,1rem + 1.4vw,32px);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--accent-deco);
}
.proc-msg .icon{ flex:none; margin-top:4px; color:var(--accent-text); }
.proc-msg__title{ margin:0 0 8px; font-size:var(--fs-h3); }
.proc-head__title, .proc-msg__title{ max-inline-size:none; }   /* títulos curtos em caixas largas não quebram no meio */
.proc-msg__text{ margin:0; max-inline-size:62ch; color:var(--fg-muted); }

.proc-reg{ margin-top:clamp(2rem,1.5rem + 2vw,3rem); }
.proc-reg--sep{ padding-bottom:clamp(2rem,1.5rem + 2vw,3rem); border-bottom:1px solid var(--line); }
.proc-card{ --cut:var(--cut-md); padding:clamp(20px,1rem + 1.6vw,36px); background:var(--surface); }
.proc-card__title{ margin:0 0 var(--space-4); font-size:var(--fs-card); }
.proc-data{ display:grid; gap:0; margin:0; }
.proc-data__row{ display:grid; gap:2px 24px; padding:12px 0; border-top:1px solid var(--line); }
.proc-data__row dt{ font:500 .75rem/1.4 var(--font-brand); letter-spacing:var(--ls-meta); text-transform:uppercase; color:var(--accent-text); }
.proc-data__row dd{ margin:0; color:var(--fg); overflow-wrap:anywhere; }
@media (min-width:40em){ .proc-data__row{ grid-template-columns:minmax(10rem,14rem) minmax(0,1fr); align-items:baseline; } }
.proc-reg__title{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:clamp(2rem,1.6rem + 1.6vw,3rem) 0 var(--space-5); font-size:var(--fs-h3); }
.proc-reg__count{ font:400 var(--fs-xs)/1.4 var(--font-text); color:var(--fg-subtle); }

/* linha do tempo: trilho fino com um ponto dourado por andamento (ecoa o fio de luz da home) */
/* (.proc-timeline na frente: vence o ol[role="list"]{padding:0} do reset) */
.proc-timeline .proc-timeline__list{ position:relative; margin:0; padding:0 0 0 28px; list-style:none; }
.proc-timeline__list::before{ content:""; position:absolute; left:5px; top:10px; bottom:10px; width:1px; background:var(--line); }
.proc-mov{ position:relative; padding:0 0 26px; }
.proc-mov:last-child{ padding-bottom:0; }
.proc-mov::before{
  content:""; position:absolute; left:-28px; top:6px; width:11px; height:11px; border-radius:50%;
  background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--gold-600);
}
.proc-mov:first-child::before{ background:var(--gold-500); box-shadow:0 0 0 4px rgba(192,154,95,.22); }
.proc-mov:focus{ outline:none; }
.proc-mov:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; }
.proc-mov__date{ margin:0 0 6px; font:500 .8125rem/1.4 var(--font-brand); letter-spacing:.08em; color:var(--accent-text); font-variant-numeric:tabular-nums; }
.proc-mov__body{ display:grid; gap:8px; max-inline-size:68ch; }
.proc-mov__exp{ margin:0; font-size:1.0625rem; line-height:1.6; color:var(--fg); }
.proc-mov__exp:focus{ outline:none; }
.proc-mov__raw{ margin:0; font-size:var(--fs-small); line-height:1.55; color:var(--fg-muted); overflow-wrap:anywhere; }
.proc-mov__na{ margin:0; font-size:var(--fs-xs); color:var(--fg-subtle); }
.proc-mov__orig summary{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; list-style:none;
  font:500 .8125rem/1.3 var(--font-brand); letter-spacing:.08em; color:var(--accent-text);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.28em;
}
.proc-mov__orig summary::-webkit-details-marker{ display:none; }
.proc-mov__orig summary::after{
  content:""; width:7px; height:7px; margin-top:-3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform var(--dur-2) var(--ease-out);
}
.proc-mov__orig[open] summary::after{ margin-top:3px; transform:rotate(-135deg); }
.proc-mov__orig summary:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.proc-mov__orig p{ margin:0 0 4px; padding:10px 14px; border-left:2px solid var(--line); font-size:var(--fs-small); color:var(--fg-muted); overflow-wrap:anywhere; }
.proc-mov__pending{ margin:0; }
.proc-mov__btn{
  display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  font:500 .9375rem/1.3 var(--font-brand); color:var(--accent-text);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.28em;
}
.proc-mov__btn[disabled], .proc-mov__btn[aria-disabled="true"]{ cursor:progress; opacity:.75; text-decoration:none; }
.proc-mov__btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.proc-timeline__more{ margin-top:var(--space-6); }
.proc-source{ margin:var(--space-6) 0 0; font-size:var(--fs-xs); line-height:1.55; color:var(--fg-subtle); max-inline-size:80ch; }
.proc-source + .proc-source{ margin-top:6px; }

/* aviso fixo sobre a IA e canais do escritório */
.proc-aviso__nota{ margin-top:0; }
.proc-aviso__acoes{ margin-top:var(--space-5); }
.proc-aviso__email{ margin:var(--space-4) 0 0; font-size:var(--fs-small); color:var(--fg-muted); }
.proc-aviso__fonte{ margin:var(--space-5) 0 0; font-size:var(--fs-xs); line-height:1.55; color:var(--fg-subtle); max-inline-size:80ch; }
/* coluna estreita: justificado abriria buracos entre as palavras */
@media (max-width:25em){ main :is(.proc-mov__exp, .proc-msg__text){ text-align:left; } }
@media (prefers-reduced-motion:reduce){ .proc-form__form.is-loading .proc-status::before{ animation:none; background-size:100% 100%; } }
@media (forced-colors:active){
  .proc-mov::before{ forced-color-adjust:none; background:CanvasText; box-shadow:none; }
  .proc-timeline__list::before{ background:CanvasText; }
  .proc-msg, .proc-card{ border:1px solid CanvasText; }
}
@media print{
  .proc-top, .proc-timeline__more, .proc-mov__btn{ display:none !important; }
  .proc-mov__orig p{ display:block; }
}