/* ═══════════════════════════════════════════════════════════════════════
   NATASCHA ARCOS — ADVOCACIA PREVIDENCIÁRIA
   Header + Hero (abertura da marca)

   O monograma é o vetor original do manual, revelado por uma máscara de
   traços que o desenha progressivamente. Nada foi redesenhado.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Sora;src:url(../fonts/sora-extralight.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:Sora;src:url(../fonts/sora-light.woff2)      format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Sora;src:url(../fonts/sora-regular.woff2)    format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Sora;src:url(../fonts/sora-medium.woff2)     format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ─────────────────────────────── TOKENS ─────────────────────────────── */
:root{
  --rose:#EABBA1;                 /* nude do manual                       */
  --ink-0:#1B1F28;                /* azul-grafite profundo (borda)        */
  --ink-1:#242936;                /* azul-grafite (base)                  */
  --ink-2:#2E3547;                /* clareado do centro                   */
  --fog:#B6BCCA;                  /* texto secundário — 8,2:1 no grafite  */
  --fog-dim:#9BA3B5;              /* rótulos discretos — 5,7:1            */

  --line:rgba(234,187,161,.30);
  --line-soft:rgba(234,187,161,.13);

  --gut:clamp(1.25rem,4.4vw,4.5rem);
  --hd:clamp(4.5rem,6vw,5.75rem);
  --mono-w:clamp(8.5rem,min(19vw,26vh),17rem);
  --sig-w:calc(var(--mono-w) * 2.905);   /* proporcao do lockup original */

  /* Intensidade da geometria de fundo. 1 = como está; 0.6 mais discreto;
     1.4 mais presente. Único botão para calibrar arcos e monograma.     */
  --geo:1;

  --e:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.25,1);
  --px:0px; --py:0px;             /* deslocamento do ponteiro             */
}

/* ──────────────────────────────── BASE ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100svh;
  background:var(--ink-1);color:var(--fog);
  font-family:Sora,ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  font-weight:300;font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
p{margin:0}
svg{display:block}
::selection{background:var(--rose);color:var(--ink-0)}
:focus-visible{outline:2px solid var(--rose);outline-offset:5px;border-radius:3px}

.skip-link{
  position:fixed;top:.75rem;left:.75rem;z-index:200;
  transform:translateY(-160%);transition:transform .3s var(--e);
  background:var(--rose);color:var(--ink-0);padding:.7rem 1.1rem;border-radius:3px;
  font-size:.8125rem;letter-spacing:.04em;
}
.skip-link:focus-visible{transform:none}

/* ═══════════════════════════════ HERO ════════════════════════════════ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;min-height:100dvh;
  display:grid;grid-template-columns:minmax(0,1fr);
  place-items:center;
  padding:calc(var(--hd) + 2vh) var(--gut) clamp(7rem,15vh,10rem);
}

/* ── fundo: luz + geometria da própria marca ── */
.bg{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--rose);overflow:hidden}

.bg__glow{
  position:absolute;inset:-20%;
  background:
    radial-gradient(48% 42% at 50% 30%,rgba(90,104,136,.40),transparent 72%),
    radial-gradient(38% 34% at 12% 62%,rgba(234,187,161,.075),transparent 70%),
    radial-gradient(60% 55% at 82% 78%,rgba(43,50,68,.55),transparent 70%);
  animation:drift 26s var(--e-io) infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-1.4%,-1%,0) scale(1)}
  to  {transform:translate3d(1.4%,1.4%,0) scale(1.05)}
}

/* A geometria toda vive aqui. A máscara abre um vazio no meio da tela:
   nenhuma linha chega perto do lockup, então o centro fica limpo e os
   arcos só aparecem nas bordas, onde não competem com a marca.        */
.bg__geo{
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 46% 67% at 50% 61%,
    transparent 0,transparent 78%,#000 100%);
          mask-image:radial-gradient(ellipse 46% 67% at 50% 61%,
    transparent 0,transparent 78%,#000 100%);
}

/* arcos enormes, cortados pelas bordas */
.bg__arcs{
  position:absolute;inset:0;width:100%;height:100%;
  transform:translate3d(calc(var(--px)*-1.1),calc(var(--py)*-1.1),0);
  will-change:transform;
}
.bg__c{stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.anim .bg__c{animation:trace 3.4s var(--e) forwards}
.bg__c--1{animation-delay:.35s;--o:calc(.17 * var(--geo))}
.bg__c--2{animation-delay:.60s;--o:calc(.11 * var(--geo))}
@keyframes trace{
  from{stroke-dashoffset:1;opacity:0}
  10%{opacity:var(--o)}
  to{stroke-dashoffset:0;opacity:var(--o)}
}

/* monograma gigante, sangrando pela direita */
.bg__mono{
  position:absolute;right:-19vw;bottom:-30vh;z-index:-1;
  width:clamp(26rem,50vw,56rem);height:auto;
  fill:var(--rose);opacity:0;
  transform:translate3d(calc(var(--px)*1.5),calc(var(--py)*1.5),0);
  transition:opacity 2.6s 1.1s ease;will-change:transform;
}
.anim .rv .bg__mono{opacity:calc(.032 * var(--geo))}

/* ══════════════════════ COMPOSIÇÃO CENTRAL ══════════════════════ */
.marca{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.75rem,3.6vh,3rem);
  transform:translate3d(calc(var(--px)*.34),calc(var(--py)*.34),0) scale(var(--z,1));
  will-change:transform;
}

.mono{
  width:var(--mono-w);height:auto;
  filter:drop-shadow(0 0 40px rgba(234,187,161,.13));
}
.mono__art{fill:var(--rose)}

/* ── a máscara que desenha o monograma ── */
.dr{
  fill:none;stroke:#fff;stroke-width:44;          /* > espessura da arte  */
  stroke-linecap:round;stroke-linejoin:round;
}
.anim .dr{stroke-dasharray:1;stroke-dashoffset:1}
.anim .rv .dr{animation:draw var(--d,.5s) var(--e-io) var(--t,0s) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes revelar{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes aproximar{from{transform:scale(1.1)}to{transform:none}}

/* ordem e ritmo: círculo → N → A */
.dr--circ{--d:1.15s;--t:.15s}
.dr--nv  {--d:.42s; --t:1.02s}   /* haste esquerda do N */
.dr--nd  {--d:.50s; --t:1.24s}   /* diagonal do N       */
.dr--nc  {--d:.52s; --t:1.50s}   /* haste alta do N     */
.dr--al  {--d:.46s; --t:1.82s}   /* perna esquerda do A */
.dr--ar  {--d:.50s; --t:2.02s}   /* perna direita do A  */

.sig{
  width:min(var(--sig-w),calc(100vw - var(--gut) * 2));height:auto;fill:var(--rose);
}
/* o nome entra primeiro; os fios e a especialidade logo depois */
.anim .sig__word,.anim .sig__sub{
  opacity:0;transform:translateY(12px);
  transition:opacity 1s var(--e),transform 1s var(--e);
}
.anim .rv .sig__word{opacity:1;transform:none;transition-delay:2.42s}
.anim .rv .sig__sub {opacity:1;transform:none;transition-delay:2.76s}

/* ═════════════════════════════ HEADER ════════════════════════════════ */
.hd{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--hd);
  transition:background-color .18s linear,backdrop-filter .18s linear,height .3s var(--e);
}
.hd::after{
  content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line-soft);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e);
}
.hd.is-stuck{
  height:calc(var(--hd) * .82);
  background:rgba(27,31,40,.72);
  background:color-mix(in srgb,var(--ink-0) 74%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
}
.hd.is-stuck::after{transform:scaleX(1)}

.hd__in{
  height:100%;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}

/* o header inteiro só entra depois que a marca termina de se formar */
/* A entrada atrasada do header existe só na home, onde ela espera o
   monograma terminar de se desenhar. Nas páginas internas não há abertura
   nenhuma para esperar: o header aparece junto com a página.            */
.anim .pagina-home .hd__in>*{opacity:0;transform:translateY(-10px);
  transition:opacity .9s var(--e),transform .9s var(--e)}
.anim .pagina-home.rv .hd__in>*{opacity:1;transform:none}
.anim .pagina-home.rv .brand{transition-delay:3.06s}
.anim .pagina-home.rv .nav   {transition-delay:3.16s}
.anim .pagina-home.rv .cta   {transition-delay:3.24s}
.anim .pagina-home.rv .burger{transition-delay:3.16s}

/* ── marca reduzida ── */
.brand{display:flex;align-items:center;gap:.72rem;flex:none;color:var(--rose);
  transition:color .18s linear}
.brand__mark{width:clamp(1.75rem,2.1vw,2.125rem);height:auto;fill:currentColor}
.brand__txt{display:flex;flex-direction:column;gap:.3em;padding-top:.12em}
.brand__name{
  font-size:clamp(.75rem,.82vw,.8125rem);font-weight:300;line-height:1;
  letter-spacing:.235em;text-transform:uppercase;white-space:nowrap;color:#E6E9EF;
}
.brand__sub{
  font-size:.5625rem;font-weight:400;line-height:1;letter-spacing:.2em;
  text-transform:uppercase;white-space:nowrap;color:var(--fog-dim);
}

/* ── navegação ── */
.nav>ul{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.25rem)}
.sub ul{display:block}
.nav__l{
  position:relative;display:block;padding-block:.45rem;
  font-size:.84375rem;font-weight:300;letter-spacing:.03em;color:var(--fog);
  transition:color .18s linear;
}
.nav__l::after{
  content:"";position:absolute;left:0;right:0;bottom:.12rem;height:1px;
  background:var(--rose);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--e);
}
.nav__l:hover,.nav__l:focus-visible{color:#F2F4F8}
.nav__l:hover::after,.nav__l:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav__l.is-on{color:#F2F4F8}
.nav__l.is-on::after{transform:scaleX(1)}

/* ── botão contorno ── */
.cta{
  position:relative;overflow:hidden;isolation:isolate;flex:none;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.78rem 1.5rem;border:1px solid var(--line);border-radius:100px;
  font-size:.8125rem;font-weight:300;letter-spacing:.03em;color:var(--rose);
  transition:color .18s linear,border-color .18s linear;
}
.cta span,.cta svg{position:relative;z-index:1}
.cta svg{width:.875rem;height:.875rem;fill:none;stroke:currentColor;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--e)}
.cta::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--rose);
  transform:translateY(101%);transition:transform .55s var(--e);
}
.cta:hover,.cta:focus-visible{color:var(--ink-0);border-color:var(--rose)}
.cta:hover::before,.cta:focus-visible::before{transform:none}
.cta:hover svg,.cta:focus-visible svg{transform:translateX(4px)}
.cta--solid{background:var(--rose);color:var(--ink-0);border-color:var(--rose)}
.cta--solid::before{background:var(--ink-0)}
.cta--solid:hover,.cta--solid:focus-visible{color:var(--rose)}

/* ── hambúrguer ── */
.burger{display:none;width:2.75rem;height:2.75rem;margin-right:-.7rem;position:relative;cursor:pointer}
.burger span{
  position:absolute;left:50%;width:1.375rem;height:1px;background:var(--rose);
  transition:transform .5s var(--e),background-color .18s linear;
}
.burger span:nth-child(1){top:calc(50% - 4px);transform:translateX(-50%)}
.burger span:nth-child(2){top:calc(50% + 4px);transform:translateX(-50%) scaleX(.6);transform-origin:left}
.burger[aria-expanded=true] span:nth-child(1){transform:translateX(-50%) translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){transform:translateX(-50%) translateY(-4px) rotate(-45deg) scaleX(1)}

/* ═════════════════════════ MENU MOBILE ══════════════════════════ */
.menu{
  position:fixed;inset:0;z-index:99;background:var(--ink-0);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--hd) var(--gut) 2.5rem;
  opacity:0;pointer-events:none;transition:opacity .5s var(--e);
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1;pointer-events:auto}
.menu__list{border-top:1px solid var(--line-soft);margin-bottom:2.5rem}
.menu__list li{overflow:hidden;border-bottom:1px solid var(--line-soft)}
.menu__list a{
  display:block;padding:1.05rem 0;color:#EDEFF3;
  font-size:clamp(1.5rem,7vw,2rem);font-weight:200;letter-spacing:-.01em;
  transform:translateY(105%);transition:transform .65s var(--e);
}
.menu.is-open .menu__list a{transform:none}
.menu__list li:nth-child(1) a{transition-delay:.08s}
.menu__list li:nth-child(2) a{transition-delay:.14s}
.menu__list li:nth-child(3) a{transition-delay:.20s}
.menu__list li:nth-child(4) a{transition-delay:.26s}
.menu__list li:nth-child(5) a{transition-delay:.32s}
.menu__in .cta{align-self:flex-start;opacity:0;transform:translateY(12px);
  transition:opacity .6s .36s var(--e),transform .6s .36s var(--e),color .45s var(--e),border-color .45s var(--e)}
.menu.is-open .cta{opacity:1;transform:none}

/* ═══════════════════ INDICADOR DE ROLAGEM ═══════════════════════ */
.scroll{
  position:absolute;left:50%;bottom:clamp(2rem,5vh,3.25rem);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  opacity:0;transition:opacity .9s var(--e),transform .5s var(--e);
}
.anim .rv .scroll{opacity:1;transition-delay:3.16s}
.scroll__mouse{
  position:relative;display:block;width:1.375rem;height:2.125rem;
  border:1px solid var(--line);border-radius:100px;
}
.scroll__mouse i{
  position:absolute;left:50%;top:.42rem;width:3px;height:3px;border-radius:50%;
  background:var(--rose);margin-left:-1.5px;
}
.anim .rv .scroll__mouse i{animation:wheel 2.1s var(--e-io) 3.7s infinite}
@keyframes wheel{
  0%{transform:translateY(0);opacity:0}
  22%{opacity:1}
  72%{transform:translateY(.72rem);opacity:0}
  100%{transform:translateY(.72rem);opacity:0}
}
.scroll__txt{
  font-size:.625rem;font-weight:400;line-height:1.7;letter-spacing:.26em;
  text-transform:uppercase;text-align:center;color:var(--fog-dim);
  transition:color .4s var(--e);
}
.scroll:hover .scroll__txt,.scroll:focus-visible .scroll__txt{color:var(--fog)}

/* ═══════════════════════ NOTAS EDITORIAIS ═══════════════════════ */
.note{
  position:absolute;bottom:clamp(2rem,5vh,3.25rem);
  font-size:.625rem;font-weight:400;line-height:2.05;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fog-dim);
  opacity:0;transform:translateY(10px);
  transition:opacity 1s var(--e),transform 1s var(--e);
}
.anim .rv .note{opacity:1;transform:none}
.anim .rv .note--l{transition-delay:3.32s}
.anim .rv .note--r{transition-delay:3.42s}
.note i{display:block;width:1.75rem;height:1px;background:var(--line);margin-bottom:1.1rem}
.note--l{left:var(--gut)}
.note--r{right:var(--gut);text-align:right}
.note--r i{margin-left:auto}

/* ═══════════════════════════ RESPONSIVO ══════════════════════════════ */
@media (max-width:1080px){
  .nav ul{gap:1.1rem}
  .nav__l{font-size:.8125rem}
}
@media (max-width:900px){
  .nav,.hd__in>.cta{display:none}
  .burger{display:block}
}
@media (max-width:680px){
  :root{--mono-w:min(28vw,7rem)}
  .hero{padding-bottom:clamp(6.5rem,16vh,8.5rem)}
  .bg__mono{right:-36vw;bottom:-10vh;width:100vw}
  .anim .rv .bg__mono{opacity:calc(.026 * var(--geo))}
  /* dimensionada a partir das caixas reais da marca e do indicador */
  .bg__geo{
    -webkit-mask-image:radial-gradient(ellipse 78% 56% at 50% 65%,
      transparent 0,transparent 78%,#000 100%);
            mask-image:radial-gradient(ellipse 78% 56% at 50% 65%,
      transparent 0,transparent 78%,#000 100%);
  }
  /* os textos laterais saem: a marca fica sozinha, como manda o conceito */
  .note{display:none}
  .scroll{gap:.85rem;bottom:clamp(2rem,5.5vh,3rem)}
  .scroll__txt{font-size:.5625rem;letter-spacing:.22em}
}
@media (max-width:400px){
  .brand__name{font-size:.6875rem;letter-spacing:.19em}
  .brand__sub{font-size:.5rem;letter-spacing:.16em}
  .note{max-width:38vw}
}
/* paisagem baixa */
@media (max-height:560px) and (min-width:681px){
  :root{--mono-w:min(22vh,8rem)}
  .marca{gap:1.25rem}
  .note,.scroll__txt{font-size:.5625rem}
}

/* ═══════════════════ PREFERÊNCIAS DE MOVIMENTO ══════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.001ms!important;transition-delay:0s!important;
  }
  .anim .dr{stroke-dashoffset:0}
  .bg__c{stroke-dashoffset:0;opacity:.13}
  .bg__glow{animation:none}
  .marca,.bg__arcs,.bg__mono{transform:none!important}
}

/* ═════════════════════ RESERVA SEM JAVASCRIPT ═══════════════════
   Se o main.js não rodar, a classe .rv nunca é aplicada. Sem isto a
   marca ficaria invisível — inaceitável numa página de apresentação. */
html:not(.anim) .dr{stroke-dashoffset:0}
html:not(.anim) .bg__c{stroke-dashoffset:0;opacity:.14}
html:not(.anim) .sig__word,
html:not(.anim) .sig__sub,
html:not(.anim) .scroll,
html:not(.anim) .note,
html:not(.anim) .hd__in>*{opacity:1!important;transform:none!important}
/* o header das páginas internas volta a ter transição de cor própria */
.pagina-sobre .brand{transition:color .18s linear}
.pagina-sobre .hd .cta{transition:color .18s linear,border-color .18s linear}
html:not(.anim) .bg__mono{opacity:.032}

/* ═══════════════════════════════════════════════════════════════════════
   SEÇÕES — sistema comum
   Cada seção declara data-tone="light" ou "dark". Os componentes usam só
   tokens (--bg, --tx, --ac...), então o mesmo código serve aos dois tons.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Newsreader;src:url(../fonts/newsreader.woff2) format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-italic.woff2) format("woff2");font-weight:300 400;font-style:italic;font-display:swap}

:root{
  --paper:#F6F2ED;                /* off-white quente                     */
  --grafite:#20242E;              /* 13,9:1 sobre o papel — AAA           */
  --grafite-mid:#4A5162;          /*  7,1:1 — corpo de texto              */
  --rose-ink:#945C43;             /*  4,9:1 — rosé para texto pequeno     */
  --rose-disp:#B07A5C;            /*  3,3:1 — só em texto grande          */
  --hair-d:rgba(32,36,46,.13);
}

[data-tone="light"]{
  --bg:var(--paper);       --tx:var(--grafite);   --tx-mid:var(--grafite-mid);
  --ac:var(--rose-ink);    --ac-disp:var(--rose-disp);
  --fio:var(--hair-d);
  --ac-fio:rgba(148,92,67,.42);
  --ac-borda:rgba(148,92,67,.38);
  --ac-wash:rgba(148,92,67,.055);
  --sobre-ac:var(--paper);        /* texto por cima do acento preenchido  */
}
[data-tone="dark"]{
  --bg:var(--ink-1);       --tx:#EDEFF3;          --tx-mid:var(--fog);
  --ac:var(--rose);        --ac-disp:var(--rose);
  --fio:rgba(234,187,161,.16);
  --ac-fio:rgba(234,187,161,.5);
  --ac-borda:rgba(234,187,161,.34);
  --ac-wash:rgba(234,187,161,.05);
  --sobre-ac:var(--ink-0);
}

/* a hero também declara tom, para o header saber o que tem embaixo dele */
.hero{--bg:var(--ink-1)}


/* a hero fica presa ao topo enquanto a seção clara sobe sobre ela */
.hero{position:sticky;top:0;height:100svh;height:100dvh}

/* o conteúdo da hero se apaga conforme a seção clara cobre a tela */
.marca,.scroll,.note{opacity:var(--fade,1)}
.anim .rv .marca{transition:opacity .25s linear,transform .8s var(--e)}

.sec{
  position:relative;z-index:2;isolation:isolate;overflow:hidden;
  color:var(--tx);
}
/* A tira acima da curva precisa ter a cor da seção ANTERIOR — senão aparece
   o fundo do body e a curva some (ou vira uma faixa fora de lugar).       */
.sec__topo{position:relative;line-height:0;margin-bottom:-1px;
  background:var(--bg-ant,transparent)}
[data-prev="light"]{--bg-ant:var(--paper)}
[data-prev="dark"] {--bg-ant:#242936}
[data-prev="rose"] {--bg-ant:#D3BCAC}
/* Exceção da home: a hero não é cor chapada, é gradiente. Pintar a tira de
   #242936 criava uma faixa emendando fora de tom logo acima da curva. Aqui a
   tira volta a ser transparente e a própria hero — que fica presa ao topo —
   aparece atrás dela, de modo que o azul chega à curva sem costura. */
.pagina-home #areas .sec__topo{background:transparent}
.sec__corpo{
  /* Posicionado de propósito: .sec__topo também é relative e, sem isto, seria
     pintado por cima do corpo. O corpo precisa cobrir a última linha da tira,
     onde a borda fracionária do SVG mistura o preenchimento com o fundo e
     deixa um fio cinza atravessando a página. */
  position:relative;z-index:1;
  background:var(--bg);
  padding-bottom:clamp(4.5rem,9vh,7.5rem);
}

.sec__curva{display:block;width:100%;height:clamp(4rem,9vw,9.5rem)}
.sec__curva path{fill:var(--bg)}
/* espelhada na horizontal: alterna o sentido do arco de seção em seção
   (scaleY inverteria o lado preenchido — não é o que se quer) */
.sec__curva--espelho{transform:scaleX(-1)}

.sec__in{padding-inline:var(--gut);padding-top:clamp(1.5rem,4vh,3.5rem)}

/* ── cabeçalho da seção ─────────────────────────────────────────── */
.sec__cab{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;column-gap:clamp(2rem,5vw,5rem);
  margin-bottom:clamp(3.5rem,8vh,6.5rem);
}

.tag{
  grid-column:1;display:flex;align-items:center;gap:.9rem;
  font-size:.6875rem;font-weight:400;letter-spacing:.26em;
  text-transform:uppercase;color:var(--tx-mid);
  margin-bottom:clamp(1.5rem,3.4vh,2.5rem);
}
.tag__n{color:var(--ac)}
.tag i{display:block;width:clamp(1.5rem,3vw,2.75rem);height:1px;background:var(--ac);opacity:.55}

.tit{
  grid-column:1;margin:0 0 clamp(1.5rem,3.4vh,2.25rem);
  font-family:Newsreader,Georgia,"Times New Roman",serif;
  font-weight:400;font-size:clamp(2.125rem,min(5.4vw,7.2vh),4.25rem);
  line-height:1.12;letter-spacing:-.012em;color:var(--tx);
}
.tit__l{display:block;overflow:hidden;padding-block:.04em .14em;margin-block:-.04em -.14em}
.tit__l>span{display:block}
.tit em{font-style:italic;color:var(--ac-disp);font-weight:300}

.intro{
  grid-column:1;max-width:31rem;
  font-size:clamp(.9375rem,.35vw + .86rem,1.0625rem);line-height:1.72;
  color:var(--tx-mid);text-wrap:pretty;
}

.lateral{
  grid-column:2;grid-row:1 / span 4;justify-self:end;text-align:right;
  font-size:.625rem;font-weight:400;line-height:2.3;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tx-mid);white-space:nowrap;
}
.lateral i{display:block;width:2rem;height:1px;background:var(--ac);margin:0 0 1.4rem auto;opacity:.6}

/* ── lista editorial ────────────────────────────────────────────── */
.lista{border-top:1px solid var(--fio)}
.area{border-bottom:1px solid var(--fio);transition:border-color .5s var(--e)}

.area__l{
  display:grid;
  grid-template-columns:clamp(3rem,4.4vw,4.25rem) minmax(0,.92fr) minmax(0,1.12fr) 2.75rem;
  align-items:center;column-gap:clamp(1.25rem,3vw,3.25rem);
  padding:clamp(1.5rem,3.4vh,2.4rem) clamp(.5rem,1.4vw,1.25rem);
  margin-inline:clamp(-.5rem,-1.4vw,-1.25rem);
  position:relative;isolation:isolate;
}
.area__l::before{                       /* rosé quase imperceptível no hover */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--ac-wash),transparent 62%,transparent);
  opacity:0;transition:opacity .5s var(--e);
}

.area__n{
  font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1;color:var(--ac-disp);
  transition:transform .55s var(--e);
}

.area__t{
  position:relative;
  font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1.0625rem,1.55vw,1.5rem);line-height:1.28;
  letter-spacing:-.004em;color:var(--tx);
  transition:transform .55s var(--e);
}
.area__t::before{                        /* fio curto que separa número e título */
  content:"";position:absolute;left:calc(clamp(1.25rem,3vw,3.25rem) / -2);
  top:50%;width:1px;height:2.6em;transform:translateY(-50%);
  background:var(--fio);transition:background-color .5s var(--e);
}

.area__d{
  font-size:.84375rem;line-height:1.65;color:var(--tx-mid);
  max-width:34rem;transition:color .5s var(--e);
}

.area__seta{
  justify-self:end;display:grid;place-items:center;
  width:2.5rem;height:2.5rem;border-radius:100px;
  border:1px solid var(--ac-borda);color:var(--ac);
  transition:transform .6s var(--e),background-color .5s var(--e),
             border-color .5s var(--e),color .5s var(--e);
}
.area__seta svg{width:.9375rem;height:.9375rem;fill:none;stroke:currentColor;
  stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}

/* ── microinterações ───────────────────────────────────────────── */
@media (hover:hover){
  .area:hover{border-bottom-color:var(--ac-fio)}
  .area:hover .area__l::before{opacity:1}
  .area:hover .area__n{transform:translateX(-4px)}
  .area:hover .area__t{transform:translateX(8px)}
  .area:hover .area__t::before{background:var(--ac-fio)}
  .area:hover .area__d{color:var(--tx)}
  .area:hover .area__seta{
    transform:rotate(-45deg) translateX(1px);
    background:var(--ac);border-color:var(--ac);color:var(--sobre-ac);
  }
}
.area__l:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:3px}
.area:focus-within .area__seta{
  background:var(--ac);border-color:var(--ac);color:var(--sobre-ac);
  transform:rotate(-45deg);
}
.area:focus-within .area__t{transform:translateX(8px)}

/* ── rodapé da seção ───────────────────────────────────────────── */
.sec__pe{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap;
  margin-top:clamp(3rem,7vh,5rem);
}
.cta--sec{
  border-color:var(--ac-borda);color:var(--ac);
  padding:1rem 1.9rem;font-size:.875rem;
}
.cta--sec::before{background:var(--ac)}
.cta--sec:hover,.cta--sec:focus-visible{color:var(--bg);border-color:var(--ac)}

.rodape-nota{
  display:flex;align-items:center;gap:1rem;
  font-size:.625rem;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tx-mid);
}
.rodape-nota i{display:block;width:clamp(1.5rem,3vw,2.75rem);height:1px;background:var(--ac);opacity:.55}

/* ═══════════════════ 03 · SOBRE ═══════════════════ */
.sobre{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  align-items:start;gap:clamp(2rem,5vw,5rem);
  margin-bottom:clamp(3rem,7vh,5rem);
}
.sobre__txt{margin-bottom:0}
.sobre .lateral{display:none}   /* o retrato já ocupa a coluna da direita */
.sobre__p{grid-column:1;max-width:34rem;margin-top:clamp(1.25rem,3vh,2rem)}
.sobre__p p{
  font-size:clamp(.9375rem,.35vw + .86rem,1.0625rem);line-height:1.75;
  color:var(--tx-mid);text-wrap:pretty;
}
.sobre__p p + p{margin-top:1.15em}

/* retrato no arco da marca */
.retrato{position:relative;margin:0;justify-self:end;width:clamp(11rem,24vw,19rem)}
.retrato__arco{
  position:relative;aspect-ratio:62/100;overflow:hidden;
  border-radius:50% 50% 0 0 / 31% 31% 0 0;background:var(--ink-0);
}
.retrato__arco img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;
  filter:saturate(.88) contrast(1.03)}
.retrato__arco::after{
  content:"";position:absolute;inset:auto 0 0;height:34%;
  background:linear-gradient(to top,var(--bg),transparent);
}
.retrato__eco{
  position:absolute;inset:0;border:1px solid var(--ac-fio);
  border-radius:50% 50% 0 0 / 31% 31% 0 0;
  transform:translateX(-1.6rem);opacity:.7;
}

.creds{border-top:1px solid var(--fio)}
.cred{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  align-items:baseline;gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(.95rem,2.2vh,1.35rem);border-bottom:1px solid var(--fio);
}
.cred__t{font-family:Newsreader,Georgia,serif;font-size:clamp(1rem,1.15vw,1.125rem);
  line-height:1.35;color:var(--tx)}
.cred__i{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-mid)}

/* ═════════ 04 · COMO FUNCIONA O ATENDIMENTO ═════════ */
.passos{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;border-top:1px solid var(--fio);counter-reset:none;
}
.passo{
  position:relative;padding:clamp(1.75rem,4vh,2.75rem) clamp(1rem,2.2vw,2rem)
          clamp(1.5rem,3.4vh,2.25rem) 0;
}
.passo + .passo{padding-left:clamp(1rem,2.2vw,2rem)}
.passo + .passo::before{
  content:"";position:absolute;left:0;top:0;bottom:clamp(1.5rem,3.4vh,2.25rem);
  width:1px;background:var(--fio);
}
.passo__n{
  display:block;font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,2.2vw,2rem);line-height:1;color:var(--ac-disp);
  margin-bottom:clamp(1rem,2.4vh,1.5rem);
}
.passo__t{
  margin:0 0 .7rem;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1rem,1.25vw,1.1875rem);line-height:1.3;color:var(--tx);
}
.passo__d{font-size:.8125rem;line-height:1.65;color:var(--tx-mid)}

/* ═════════════ 05 · FORMA DE ATUAÇÃO ═════════════ */
.pilares{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2rem,5vw,4.5rem);border-top:1px solid var(--fio);
}
.pilar{
  padding-block:clamp(1.75rem,4vh,2.5rem);border-bottom:1px solid var(--fio);
}
.pilar__t{
  margin:0 0 .8rem;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1.125rem,1.5vw,1.4375rem);line-height:1.28;color:var(--tx);
}
.pilar__d{font-size:.875rem;line-height:1.7;color:var(--tx-mid);max-width:30rem}

/* ═══════════════ 06 · CONTEÚDOS ═══════════════ */
.posts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border-top:1px solid var(--fio);
}
.post{position:relative}
.post + .post::before{
  content:"";position:absolute;left:0;top:0;bottom:clamp(1.5rem,3vh,2rem);
  width:1px;background:var(--fio);
}
.post__l{
  display:flex;flex-direction:column;align-items:flex-start;height:100%;
  padding:clamp(1.75rem,4vh,2.5rem) clamp(1.25rem,2.6vw,2.25rem)
          clamp(1.5rem,3vh,2rem) 0;
}
.post + .post .post__l{padding-left:clamp(1.25rem,2.6vw,2.25rem)}
.post__cat{
  font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ac);
  margin-bottom:clamp(.9rem,2vh,1.25rem);
}
.post__t{
  margin:0 0 .8rem;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1.0625rem,1.35vw,1.3125rem);line-height:1.32;color:var(--tx);
  transition:color .4s var(--e);
}
.post__d{font-size:.8125rem;line-height:1.65;color:var(--tx-mid);margin-bottom:1.5rem}
.post__ler{
  margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);
}
.post__ler svg{width:.875rem;height:.875rem;fill:none;stroke:currentColor;
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--e)}
@media (hover:hover){
  .post__l:hover .post__ler svg{transform:translateX(5px)}
  .post__l:hover .post__t{color:var(--ac-disp)}
}
.post__l:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:3px}

/* ═══════════════ 07 · CONTATO ═══════════════ */
.sec--fecho .tit{max-width:18ch}
.fecho{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:clamp(1.5rem,4vw,3rem);
  padding-block:clamp(2rem,5vh,3.5rem);
  border-top:1px solid var(--fio);border-bottom:1px solid var(--fio);
}
.fecho__acao{display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.75rem);flex-wrap:wrap}
.cta--cheio{
  background:var(--ac);color:var(--sobre-ac);border-color:var(--ac);
  padding:1rem 1.9rem;font-size:.875rem;
}
.cta--cheio::before{background:var(--tx)}
.cta--cheio:hover,.cta--cheio:focus-visible{color:var(--bg);border-color:var(--tx)}
.canais{
  display:flex;gap:clamp(1rem,2.4vw,2rem);flex-wrap:wrap;
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-mid);
}
.canais li{position:relative}
.canais li + li::before{
  content:"";position:absolute;left:calc(clamp(1rem,2.4vw,2rem) / -2);top:.5em;
  width:2px;height:2px;border-radius:50%;background:var(--ac);
}

.pe{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;
  margin-top:clamp(2.5rem,6vh,4rem);
}
.pe__marca{
  display:flex;align-items:center;gap:.75rem;
  font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tx);
}
.pe__marca span{display:block;width:2px;height:2px;border-radius:50%;background:var(--ac)}

/* A assinatura do fecho usa o mesmo lockup do rodapé: a versão em texto
   quebrava em duas colunas no celular, com o ponto separador solto no meio. */
.pe__brand{flex:0 0 auto}
@media (max-width:760px){
  .pe{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .pe__brand{margin-bottom:.35rem}
}
.pe__leg a{
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tx-mid);transition:color .3s var(--e);
}
.pe__leg a:hover,.pe__leg a:focus-visible{color:var(--tx)}
.pe__oab,.pe__nota{
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-mid);
}

/* ── header sobre o fundo claro ────────────────────────────────── */
.hd.is-light .brand__name{color:var(--grafite)}
.hd.is-light .brand__sub,
.hd.is-light .nav__l{color:var(--grafite-mid)}
.hd.is-light .nav__l:hover,
.hd.is-light .nav__l.is-on{color:var(--grafite)}
.hd.is-light .brand{color:var(--rose-ink)}
.hd.is-light .cta{color:var(--rose-ink);border-color:rgba(154,98,72,.4)}
.hd.is-light .cta::before{background:var(--rose-ink)}
.hd.is-light .cta:hover,.hd.is-light .cta:focus-visible{color:var(--paper)}
.hd.is-light .burger span{background:var(--rose-ink)}
.hd.is-light.is-stuck{
  background:rgba(246,242,237,.78);
  background:color-mix(in srgb,var(--paper) 80%,transparent);
}
.hd.is-light::after{background:var(--hair-d)}

/* ── entrada progressiva no scroll ─────────────────────────────── */
.anim [data-io]{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--e),transform .6s var(--e)}
.anim [data-io].in{opacity:1;transform:none}
.anim .tit[data-io]{opacity:1;transform:none}
.anim .tit__l>span{transform:translateY(115%);transition:transform .7s var(--e)}
.anim .tit.in .tit__l>span{transform:none}
.anim .tit.in .tit__l:nth-child(2)>span{transition-delay:.06s}
.anim .tit.in .tit__l:nth-child(3)>span{transition-delay:.12s}

/* ══════════════════════════ RESPONSIVO ═══════════════════════════ */
@media (max-width:1000px){
  .lateral{display:none}
  .sec__cab{grid-template-columns:minmax(0,1fr)}
  .area__l{grid-template-columns:clamp(2.5rem,5vw,3.5rem) minmax(0,1fr) minmax(0,1fr) 2.5rem;
    column-gap:clamp(1rem,2.4vw,2rem)}
}

@media (max-width:680px){
  .sec__corpo{padding-bottom:clamp(3.5rem,9vh,5rem)}
  .sec__curva{height:clamp(2.75rem,11vw,5rem)}
  .sec__cab{margin-bottom:clamp(2.5rem,6vh,3.5rem)}
  .intro{max-width:none}

  /* cada área empilha: número, título, descrição, seta */
  .area__l{
    grid-template-columns:1fr auto;
    row-gap:.7rem;column-gap:1rem;
    padding-block:clamp(1.4rem,4vh,2rem);
    align-items:start;
  }
  .area__n{grid-column:1;font-size:1.0625rem}
  .area__t{grid-column:1 / -1;font-size:1.125rem}
  .area__t::before{display:none}
  .area__d{grid-column:1 / -1;font-size:.8125rem;max-width:none}
  .area__seta{grid-column:2;grid-row:1;width:2.25rem;height:2.25rem}

  .sec__pe{flex-direction:column;align-items:flex-start;gap:1.75rem}
  .cta--claro{width:100%;justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  .anim [data-io]{opacity:1!important;transform:none!important}
  .anim .sp-hero__foto,.anim .sp-quem__foto,
  .anim .ic-hero__foto,.anim .ic-ajuda__foto{animation:none!important;clip-path:none!important}
  .anim .tit__l>span{transform:none!important}
  .marca,.scroll,.note{opacity:1!important}
}

html:not(.anim) [data-io]{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINA SOBRE
   Mesmo sistema de tons e curvas da home; composições próprias.
   ═══════════════════════════════════════════════════════════════════════ */

/* terceiro tom, só do CTA final desta página */
[data-tone="rose"]{
  --bg:#D3BCAC;            --tx:var(--grafite);   --tx-mid:#3E4453;
  --ac:#6E3E2A;            --ac-disp:#6E3E2A;
  --fio:rgba(32,36,46,.20);
  --ac-fio:rgba(110,62,42,.45);
  --ac-borda:rgba(110,62,42,.4);
  --ac-wash:rgba(110,62,42,.06);
  --sobre-ac:var(--paper);
}

.pagina-sobre .sec__corpo{background:var(--bg)}

/* ── peças reaproveitadas ── */
.rotulo{
  font-size:.625rem;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ac);
}
.link-ed{
  display:inline-flex;align-items:center;gap:1rem;
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-mid);
  transition:color .4s var(--e);
}
.link-ed__c{
  display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:100px;
  border:1px solid var(--ac-borda);color:var(--ac);
  transition:transform .6s var(--e),background-color .45s var(--e),
             border-color .45s var(--e),color .45s var(--e);
}
.link-ed__c svg{width:.875rem;height:.875rem;fill:none;stroke:currentColor;
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){
  .link-ed:hover{color:var(--tx)}
  .link-ed:hover .link-ed__c{
    background:var(--ac);border-color:var(--ac);color:var(--sobre-ac);transform:translateX(4px);
  }
}
.link-ed:focus-visible{outline:2px solid var(--ac);outline-offset:5px;border-radius:3px}

/* monograma como marca d'água */
.marca-agua{
  position:absolute;z-index:0;pointer-events:none;
  top:-8%;right:-10vw;width:clamp(22rem,46vw,50rem);height:auto;
  fill:var(--ac);opacity:.035;
}

/* palavra gigante ao fundo */
.palavrao{
  position:absolute;z-index:0;left:var(--gut);right:0;bottom:clamp(-3.5rem,-3vw,-1.5rem);
  pointer-events:none;white-space:nowrap;
  font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(4rem,13vw,13rem);line-height:.9;letter-spacing:-.02em;
  color:var(--ac);opacity:.055;
}
.palavrao em{font-style:italic;letter-spacing:.02em}

/* ══════════════ HERO DA PÁGINA ══════════════ */
.sp-hero .sec__corpo{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:calc(var(--hd) + clamp(1rem,3vh,2.5rem)) clamp(2rem,6vh,4rem);
}
.sp-hero__grade{
  position:relative;
  width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  align-items:center;gap:clamp(2rem,5vw,5.5rem);
}
.sp-hero__txt{position:relative;z-index:2;padding-left:var(--gut);max-width:42rem}
.tit--maior{font-size:clamp(1.875rem,min(4.2vw,6.2vh),3.375rem);line-height:1.16}
.sp-hero__txt .intro{margin-block:clamp(1.5rem,3.4vh,2.25rem)}

.sp-hero__foto{
  position:relative;z-index:1;margin:0;align-self:center;justify-self:end;
  width:min(100%,23rem);margin-right:var(--gut);
  aspect-ratio:62/100;          /* o raio do arco depende desta proporção */
  /* Arco pleno: o raio horizontal é metade da largura e o vertical vale o
     mesmo em relação à altura — 0,5 / 1,613 = 31%. Semicírculo exato, não
     um canto arredondado a esmo.                                          */
  border-radius:50% 50% 0 0 / 31% 31% 0 0;
  overflow:hidden;background:var(--paper-2,#EFEAE3);
}
.sp-hero__foto img{width:100%;height:100%;object-fit:cover;object-position:52% 20%}

/* Eco do arco em fio nude. Fica FORA da figura: o retrato tem
   overflow:hidden para recortar a imagem, e recortaria o eco junto. */
.sp-hero__eco{
  position:absolute;z-index:0;pointer-events:none;
  right:calc(var(--gut) + 1.9rem);top:50%;
  width:min(100%,23rem);aspect-ratio:62/100;
  transform:translateY(calc(-50% + 1.15rem));
  border:1px solid var(--ac-fio);border-radius:50% 50% 0 0 / 31% 31% 0 0;
}
/* Revelação por máscara. Roda por animação no carregamento: a foto do hero
   está sempre visível na primeira tela, então não pode depender de um
   IntersectionObserver — se ele falhar, a imagem some da página.        */
.anim .sp-hero__foto{animation:revelar .85s .08s var(--e-io) both}
.anim .sp-hero__foto img{animation:aproximar 1.3s .08s var(--e-io) both}

.sp-hero__arcos{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,#000 0 34%,transparent 52%);
          mask-image:linear-gradient(to right,#000 0 34%,transparent 52%);
}

/* ══════════════ QUEM É NATASCHA ══════════════ */
.sp-quem .sec__corpo{position:relative;overflow:hidden}
.sp-quem__grade{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.15fr) minmax(0,.95fr);
  align-items:center;gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(2rem,6vh,4.5rem);
}
.sp-quem__foto{
  position:relative;margin:0 0 0 calc(var(--gut) * -1);grid-column:1;
  aspect-ratio:7/10;overflow:hidden;
}
.sp-quem__foto img{
  width:100%;height:100%;object-fit:cover;object-position:50% 16%;
}
/* dissolve a foto no fundo com camadas de gradiente — mais previsível que
   compor duas máscaras, que depende de mask-composite */
.sp-quem__foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,transparent 44%,var(--bg) 97%),
    linear-gradient(to top,var(--bg) 0,transparent 24%);
}
.anim .sp-quem__foto{clip-path:inset(0 0 100% 0);transition:clip-path .62s var(--e-io)}
.anim .sp-quem__foto.in{clip-path:inset(0 0 0 0)}

.sp-quem__tit{grid-column:2;margin:0;font-size:clamp(1.75rem,min(3.6vw,5.6vh),2.875rem)}
.sp-quem__bio{grid-column:3;display:flex;flex-direction:column;gap:1.15rem;max-width:26rem}
.sp-quem__bio p:not(.rotulo){
  font-size:.9375rem;line-height:1.75;color:var(--tx-mid);text-wrap:pretty;
}
.sp-quem__bio .link-ed{margin-top:.5rem}
.sp-quem__eds{
  position:absolute;right:var(--gut);bottom:clamp(2rem,6vh,4rem);
  font-size:.5625rem;line-height:2.4;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tx-mid);text-align:right;
}

/* ══════════════ FORMAÇÃO ══════════════ */
/* Tabela editorial de duas faixas: 3 colunas iguais de sangria a sangria.
   As 4 linhas internas (número, rótulo, nome, instituição) são compartilhadas
   pelas 3 colunas via subgrid — é o que impede o bloco 03, de título mais
   longo, de desalinhar a instituição dos outros dois.                       */
.sp-form .sec__corpo{position:relative;overflow:hidden}
.sp-form .sec__in{position:static}

.sp-form__cab{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;column-gap:clamp(2rem,5vw,5rem);
  margin-bottom:clamp(2.5rem,6vh,4rem);
}
.sp-form__cab .tag,.sp-form__cab .tit{grid-column:1}
.sp-form__cab .tit{margin-bottom:0}
.sp-form__cab .lateral{grid-column:2;grid-row:1 / span 2}

.tabela{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto;       /* explícitas: 1/-1 precisa delas */
  column-gap:0;                       /* o fio mora na divisa, não num gap */
  border-block:1px solid var(--fio);
}
/* os dois fios verticais atravessam as duas faixas de alto a baixo */
.tabela__fio{grid-row:1 / -1;border-left:1px solid var(--fio);pointer-events:none}
.tabela__fio:nth-of-type(1){grid-column:2}
.tabela__fio:nth-of-type(2){grid-column:3}

/* Variante de duas formações: duas colunas e um fio só na divisa. */
.tabela--duas{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
.tabela--duas .tabela__fio{grid-column:2}
.tabela--duas .formacoes{grid-row:1}
@supports (grid-template-rows: subgrid){
  .tabela--duas .formacoes{grid-template-rows:auto auto auto auto}
}

.formacoes{grid-column:1 / -1;grid-row:1;display:grid;grid-template-columns:subgrid}
.fmc{display:grid;align-content:start;
  padding:clamp(1.5rem,3.4vh,2.25rem) clamp(1.25rem,2.4vw,2rem)
          clamp(1.5rem,3.4vh,2.25rem) 0}
.fmc:not(:first-child){padding-left:clamp(1.25rem,2.4vw,2rem)}

/* alinhamento real das 4 linhas entre as colunas */
@supports (grid-template-rows: subgrid){
  .formacoes{grid-template-rows:auto auto auto auto}
  .fmc{grid-row:1 / -1;grid-template-rows:subgrid}
}
/* sem subgrid o layout continua íntegro, só perde o alinhamento fino */
@supports not (grid-template-rows: subgrid){
  .fmc__t{min-height:2.6em}
}

.fmc__n{
  display:block;font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,2.2vw,2.125rem);line-height:1;color:var(--ac-disp);
  margin-bottom:clamp(.9rem,2.2vh,1.4rem);
}
.fmc__k{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tx-mid);margin-bottom:.4rem}
.fmc__t{margin:0 0 .5rem;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1rem,1.3vw,1.1875rem);line-height:1.3;color:var(--tx)}
.fmc__i{font-size:.75rem;line-height:1.5;color:var(--tx-mid);align-self:start}

/* faixa complementar: mesma partição, soldada por um único fio */
.compl{
  grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:subgrid;
  border-top:1px solid var(--fio);
}
@supports not (grid-template-columns: subgrid){
  .compl{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.compl__cab{grid-column:1;padding:clamp(1.5rem,3.4vh,2.25rem) clamp(1.25rem,2.4vw,2rem) clamp(1.5rem,3.4vh,2.25rem) 0}
.tag--min{font-size:.5625rem;margin-bottom:.7rem}
.compl__esa{font-family:Newsreader,Georgia,serif;font-size:1.0625rem;
  line-height:1.35;color:var(--tx)}
.compl__nota{margin-top:1.1rem;font-size:.75rem;line-height:1.55;color:var(--tx-mid);opacity:.85}

.compl__l{
  grid-column:2 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem clamp(1.5rem,3vw,2.5rem);align-content:center;
  padding:clamp(1.5rem,3.4vh,2.25rem) 0 clamp(1.5rem,3.4vh,2.25rem) clamp(1.25rem,2.4vw,2rem);
  font-size:.8125rem;line-height:1.5;color:var(--tx-mid);
}
.compl__l li{position:relative;padding-left:1rem}
.compl__l li::before{
  content:"";position:absolute;left:0;top:.62em;width:4px;height:1px;background:var(--ac);opacity:.7;
}

/* ══════════════ MANIFESTO ══════════════ */
.sp-mani .sec__corpo{position:relative;overflow:hidden;
  padding-block:clamp(3rem,10vh,7rem) clamp(4rem,12vh,8rem)}
.sp-mani__arcos{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6;
}
.sp-mani__grade{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.72fr);
  gap:clamp(2rem,5vw,5rem);align-items:end;
  margin-top:clamp(1.5rem,4vh,3rem);
}
.mani{
  margin:0;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1.875rem,min(4.4vw,6.6vh),3.5rem);
  line-height:1.22;letter-spacing:-.012em;color:var(--tx);
}
.mani__l{display:block;opacity:var(--o,.16);transition:opacity .45s linear}
.mani i{font-style:italic}                    /* ênfase de ritmo, mesma cor */
.mani em{font-style:italic;color:var(--ac-disp)}   /* o único destaque em rosé */
.sp-mani__nota{display:flex;flex-direction:column;gap:1.5rem;padding-bottom:.5rem}
.sp-mani__nota p:not(.rotulo){
  font-size:.9375rem;line-height:1.75;color:var(--tx-mid);max-width:22rem;
}

/* ══════════════ FORMA DE ATUAR ══════════════ */
.sp-atuar__grade{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.35fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.sp-atuar__cab{grid-column:1}
.sp-atuar__cab .intro{margin-block:clamp(1.25rem,3vh,2rem)}
.sp-atuar__lista{grid-column:2;border-top:1px solid var(--fio)}
.sp-atuar__lista .area__l{
  grid-template-columns:clamp(3rem,4.4vw,4.25rem) minmax(0,.85fr) minmax(0,1.25fr);
}
/* princípios não levam a lugar nenhum: sem seta e sem afordância de clique */
.area--estatica .area__l{cursor:default}
.area--estatica .area__l::before{content:none}
.sp-atuar__lista .area__t{font-size:clamp(1rem,1.3vw,1.1875rem);
  letter-spacing:.08em;text-transform:uppercase;font-family:Sora,sans-serif;font-weight:300}

/* ══════════════ CTA FINAL ══════════════ */
.sp-cta .sec__corpo{padding-block:clamp(2.5rem,7vh,4.5rem) clamp(3rem,8vh,5rem)}
.sp-cta__grade{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;
}
.sp-cta__tit{
  margin:0;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.42;color:var(--tx);
}
.sp-cta__tit em{font-style:italic;color:var(--ac)}
.sp-cta .cta--cheio{background:var(--grafite);border-color:var(--grafite);color:var(--paper)}
.sp-cta .cta--cheio::before{background:var(--ac)}
.sp-cta .cta--cheio:hover,.sp-cta .cta--cheio:focus-visible{color:var(--paper)}
.sp-cta__nota{
  font-size:.625rem;line-height:2;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tx-mid);text-align:right;
}

/* ══════════════ RODAPÉ ══════════════ */
.rodape{background:var(--bg);color:var(--tx);padding-block:clamp(2.5rem,6vh,4rem)}
.rodape__topo{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap;
  padding-bottom:clamp(1.75rem,4vh,2.5rem);border-bottom:1px solid var(--fio);
}
.rodape .brand{color:var(--ac)}
.rodape__nav ul{display:flex;gap:clamp(1rem,2.4vw,2rem);flex-wrap:wrap}
.rodape__nav a{
  font-size:.8125rem;font-weight:300;color:var(--tx-mid);
  transition:color .35s var(--e);
}
.rodape__nav a:hover,.rodape__nav a:focus-visible{color:var(--tx)}
.redes{display:flex;gap:.6rem}
.redes a{
  display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:100px;
  border:1px solid var(--fio);color:var(--tx-mid);
  transition:color .4s var(--e),border-color .4s var(--e),transform .5s var(--e);
}
.redes svg{width:1.0625rem;height:1.0625rem;fill:none;stroke:currentColor;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.redes a:hover,.redes a:focus-visible{color:var(--ac);border-color:var(--ac-borda);transform:translateY(-2px)}

.rodape__base{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(.75rem,3vw,2rem);flex-wrap:wrap;
  padding-top:clamp(1.25rem,3vh,1.75rem);
  font-size:.6875rem;color:var(--tx-mid);
}
.rodape__oab{letter-spacing:.18em;text-transform:uppercase}
.rodape__leg{display:flex;gap:clamp(1rem,2.4vw,1.75rem)}
.rodape__leg a{transition:color .35s var(--e)}
.rodape__leg a:hover,.rodape__leg a:focus-visible{color:var(--tx)}

/* ═══════════════════════════════════════════════════════════════════════
   SUBMENU DE ÁREAS DE ATUAÇÃO
   ═══════════════════════════════════════════════════════════════════════ */
.tem-sub{position:relative}
.nav__l--bt{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  font-family:inherit;font-size:.84375rem;font-weight:300;letter-spacing:.03em;
}
.nav__seta{width:.5rem;height:.3125rem;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--e)}
.tem-sub:hover .nav__seta,.nav__l--bt[aria-expanded=true] .nav__seta{transform:rotate(180deg)}

.sub{
  position:absolute;top:100%;left:50%;z-index:20;
  min-width:19rem;padding:.6rem 0;
  transform:translate(-50%,.5rem);
  background:var(--paper);border:1px solid var(--hair-d);border-radius:4px;
  box-shadow:0 18px 40px -22px rgba(20,24,32,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--e),transform .28s var(--e),visibility .28s;
}
.tem-sub:hover .sub,
.tem-sub:focus-within .sub,
.nav__l--bt[aria-expanded=true] + .sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.sub__l{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.62rem 1.25rem;
  font-size:.8125rem;font-weight:300;line-height:1.35;color:var(--grafite-mid);
  transition:color .3s var(--e),background-color .3s var(--e);
}
a.sub__l:hover,a.sub__l:focus-visible{color:var(--grafite);background:rgba(148,92,67,.06)}
a.sub__l.is-on{color:var(--rose-ink)}
.sub__l--breve{color:rgba(74,81,98,.5);cursor:default}
.sub__l--breve i{
  font-style:normal;flex:none;font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(148,92,67,.7);
}

/* no menu mobile as áreas viram um grupo recuado */
.menu__grupo{padding-block:1.05rem}
.menu__rot{
  display:block;margin-bottom:.9rem;
  font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);
}
.menu__sub{display:grid;gap:.55rem;padding-left:1rem;border-left:1px solid var(--line-soft)}
.menu__sub .sub__l{padding:0;font-size:.9375rem;color:#D6D9E0}
.menu__sub a.sub__l:hover{background:none;color:#fff}
.menu__sub .sub__l--breve{color:rgba(214,217,224,.45)}

/* O menu é a navegação inteira no celular: precisa rolar quando a tela é
   baixa (senão o botão final fica inalcançável) e ter alvos de toque
   confortáveis nos seis itens de área. */
.menu__in{
  width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.menu{justify-content:flex-start;padding-top:calc(var(--hd) + 1rem)}
.menu__sub{gap:0}
.menu__sub li + li{border-top:1px solid rgba(255,255,255,.07)}
.menu__sub .sub__l{
  display:block;padding:.72rem 0;font-size:1.0625rem;line-height:1.3;
}
/* Telas baixas: o corpo dos itens principais cede espaço antes de rolar. */
@media (max-height:720px){
  .menu__list a{font-size:clamp(1.25rem,5.5vw,1.625rem);padding:.8rem 0}
  .menu__grupo{padding-block:.8rem}
  .menu__list{margin-bottom:1.75rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINA · BENEFÍCIOS POR INCAPACIDADE
   ═══════════════════════════════════════════════════════════════════════ */
.migalhas{margin-bottom:clamp(1.25rem,3vh,2rem)}
.migalhas ol{display:flex;flex-wrap:wrap;gap:.5rem;
  font-size:.6875rem;letter-spacing:.06em;color:var(--tx-mid)}
.migalhas li+li::before{content:"/";margin-right:.5rem;opacity:.5}
.migalhas a{transition:color .3s var(--e)}
.migalhas a:hover,.migalhas a:focus-visible{color:var(--ac)}
.migalhas [aria-current]{color:var(--tx)}

.nota-fio{
  display:flex;align-items:flex-start;gap:.9rem;
  font-size:.625rem;line-height:1.9;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx-mid);
}
.nota-fio i{flex:none;display:block;width:1.75rem;height:1px;background:var(--ac);
  opacity:.6;margin-top:.55em}

/* ── hero ── */
.ic-hero .sec__corpo{padding-block:var(--hd) 0}
.ic-hero__grade{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr) auto;
  align-items:stretch;min-height:calc(100svh - var(--hd));
}
.ic-hero__txt{
  grid-column:1;align-self:center;
  padding:clamp(1.5rem,4vh,3rem) clamp(1.5rem,3vw,3.5rem)
          clamp(2rem,5vh,3.5rem) var(--gut);
  max-width:38rem;
}
.ic-hero__txt .intro{margin-block:clamp(1.25rem,3vh,2rem)}
.ic-hero__acao{display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.5rem);flex-wrap:wrap}

.ic-hero__foto{
  grid-column:2;position:relative;margin:0;overflow:hidden;
  border-radius:0 0 0 clamp(5rem,16vw,13rem);
  background:var(--paper-2,#EFEAE3);
}
.ic-hero__foto img{width:100%;height:100%;object-fit:cover;object-position:52% 45%}
.anim .ic-hero__foto{animation:revelar .85s .08s var(--e-io) both}
.anim .ic-hero__foto img{animation:aproximar 1.3s .08s var(--e-io) both}

.ic-hero__faixa{
  grid-column:3;position:relative;overflow:hidden;
  width:clamp(9rem,15vw,14rem);
  background:var(--ink-1);color:var(--fog);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1.5rem,4vh,2.5rem) clamp(1rem,1.8vw,1.75rem);
}
.ic-hero__faixa .marca-agua{
  top:auto;bottom:-6%;right:-58%;width:190%;fill:var(--rose);opacity:.07;
}
.ic-hero__eds,.ic-hero__pe{
  position:relative;z-index:1;
  font-size:.5625rem;line-height:2.2;letter-spacing:.24em;text-transform:uppercase;
}
.ic-hero__pe{color:rgba(182,188,202,.75);line-height:1.9}

/* ── o que são ── */
.ic-oque .sec__corpo{padding-block:clamp(3rem,8vh,5.5rem)}
.ic-oque__grade{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.ic-oque__txt{display:flex;flex-direction:column;gap:clamp(1.5rem,3.4vh,2.25rem)}
.ic-oque__txt p:not(.nota-fio){
  font-size:clamp(.9375rem,.35vw + .86rem,1.0625rem);line-height:1.75;
  color:var(--tx-mid);max-width:34rem;
}

/* ── principais benefícios ── */
.ic-benef__grade{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.6fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.ic-benef__cab .intro{margin-top:clamp(1.25rem,3vh,2rem)}
.beneficios{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto;column-gap:0;
  border-top:1px solid var(--fio);
}
.ben{
  grid-row:1 / -1;display:grid;grid-template-rows:subgrid;align-content:start;
  padding:clamp(1.5rem,3.4vh,2.25rem) clamp(1.1rem,2.2vw,1.75rem) clamp(1.5rem,3.4vh,2.25rem) 0;
  position:relative;
}
@supports not (grid-template-rows: subgrid){.ben{display:block}.ben__t{min-height:3.4em}}
.ben:not(:first-child){padding-left:clamp(1.1rem,2.2vw,1.75rem);
  border-left:1px solid var(--fio)}
.ben__n{
  font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,2.2vw,2.125rem);line-height:1;color:var(--ac-disp);
  margin-bottom:clamp(.9rem,2.2vh,1.4rem);transition:transform .5s var(--e);
}
.ben__t{
  margin:0 0 .7rem;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1rem,1.3vw,1.1875rem);line-height:1.32;color:var(--tx);
  transition:transform .5s var(--e);
}
.ben__sub{display:block;font-family:Sora,sans-serif;font-size:.625rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx-mid);margin-top:.45rem}
.ben__d{font-size:.8125rem;line-height:1.65;color:var(--tx-mid);
  transition:color .45s var(--e)}
@media (hover:hover){
  .ben:hover .ben__n{transform:translateX(-4px)}
  .ben:hover .ben__t{transform:translateX(5px)}
  .ben:hover .ben__d{color:var(--tx)}
}

/* ── situações ── */
.ic-sit__grade{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.7fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.ic-sit__cab .nota-fio{margin-top:clamp(1.5rem,3.4vh,2.25rem)}
.situacoes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vh,2.75rem) clamp(1.5rem,3vw,2.5rem);
}
.sit{display:flex;flex-direction:column;gap:.55rem;
  padding-top:clamp(1.1rem,2.4vh,1.6rem);border-top:1px solid var(--fio)}
.sit__i{color:var(--ac)}
.sit__i svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;
  stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.sit__t{margin:.35rem 0 0;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(.9375rem,1.15vw,1.0625rem);line-height:1.3;color:var(--tx)}
.sit__d{font-size:.78125rem;line-height:1.6;color:var(--tx-mid)}

/* ── como podemos ajudar ── */
.ic-ajuda .sec__corpo{padding-block:0}
.ic-ajuda__grade{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.ic-ajuda__foto{
  position:relative;margin:0;align-self:stretch;min-height:clamp(24rem,52vh,34rem);
  overflow:hidden;background:var(--ink-0);
}
.ic-ajuda__foto img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 55%}
.ic-ajuda__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(72deg,rgba(20,24,32,.82),rgba(20,24,32,.34) 62%,transparent);
}
.ic-ajuda__foto figcaption{
  position:relative;z-index:1;height:100%;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(1.5rem,4vh,2.5rem);
  padding:clamp(2rem,5vh,3.5rem) clamp(1.75rem,4vw,3rem) clamp(2rem,5vh,3.5rem) var(--gut);
}
.ic-ajuda__frase{
  font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1.375rem,2.6vw,2.125rem);line-height:1.24;color:#F2F4F8;
}
.ic-ajuda__nota{
  font-size:.5625rem;line-height:2;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(234,187,161,.85);
}
.anim .ic-ajuda__foto{clip-path:inset(0 0 100% 0);transition:clip-path .62s var(--e-io)}
.anim .ic-ajuda__foto.in{clip-path:inset(0 0 0 0)}
.ic-ajuda__txt{padding-block:clamp(3rem,8vh,5rem);padding-right:var(--gut)}
.ic-ajuda__txt .tit{margin-bottom:clamp(2rem,4.5vh,3rem)}

.etapas{border-top:1px solid var(--fio)}
.etapa{
  display:grid;grid-template-columns:clamp(3rem,4.4vw,4rem) minmax(0,1fr);
  gap:clamp(1rem,2.4vw,1.75rem);align-items:baseline;
  padding-block:clamp(1.1rem,2.6vh,1.65rem);border-bottom:1px solid var(--fio);
}
.etapa__n{font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.25rem,1.8vw,1.625rem);line-height:1;color:var(--ac-disp)}
.etapa__t{margin:0 0 .3rem;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(.9375rem,1.2vw,1.0625rem);line-height:1.3;color:var(--tx)}
.etapa__d{font-size:.78125rem;line-height:1.6;color:var(--tx-mid)}

/* ── FAQ ── */
.ic-faq .sec__corpo{padding-block:clamp(3rem,8vh,5.5rem)}
.ic-faq__grade{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.faqs{border-top:1px solid var(--fio)}
.faq{border-bottom:1px solid var(--fio);transition:border-color .45s var(--e)}
.faq h3{margin:0}
.faq__b{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,2.4vw,2rem);text-align:left;cursor:pointer;
  padding-block:clamp(1.05rem,2.4vh,1.5rem);
  font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(.9375rem,1.15vw,1.0625rem);line-height:1.4;color:var(--tx);
}
.faq__b>span:first-child{transition:transform .45s var(--e)}
.faq__mais{
  position:relative;flex:none;display:grid;place-items:center;
  width:1.875rem;height:1.875rem;border-radius:100px;
  border:1px solid var(--ac-borda);
  transition:background-color .4s var(--e),border-color .4s var(--e),transform .5s var(--e);
}
.faq__mais i{position:absolute;background:var(--ac);transition:opacity .3s var(--e),background-color .4s var(--e)}
.faq__mais i:nth-child(1){width:.625rem;height:1px}
.faq__mais i:nth-child(2){width:1px;height:.625rem}
.faq__b[aria-expanded=true] .faq__mais{background:var(--ac);border-color:var(--ac);transform:rotate(180deg)}
.faq__b[aria-expanded=true] .faq__mais i{background:var(--sobre-ac)}
.faq__b[aria-expanded=true] .faq__mais i:nth-child(2){opacity:0}
@media (hover:hover){
  .faq__b:hover>span:first-child{transform:translateX(5px)}
  .faq:hover{border-bottom-color:var(--ac-fio)}
}
.faq__b:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:3px}

.faq__c{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--e)}
.faq__c[hidden]{display:none}
.faq__c.aberto{grid-template-rows:1fr}
.faq__p{overflow:hidden}
.faq__p p{
  padding:0 clamp(2.5rem,5vw,4rem) clamp(1.25rem,2.8vh,1.75rem) 0;
  font-size:.84375rem;line-height:1.75;color:var(--tx-mid);max-width:44rem;
}

/* ── CTA final ── */
.ic-cta .sec__corpo{position:relative;overflow:hidden;
  padding-block:clamp(3rem,8vh,5rem) clamp(3.5rem,9vh,6rem)}
.ic-cta .marca-agua{top:-30%;right:-14vw;width:clamp(24rem,48vw,52rem);opacity:.045}
.ic-cta__grade{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
}
.ic-cta__acao{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.25rem,3vh,2rem)}
.ic-cta__acao p{font-size:.875rem;line-height:1.7;color:var(--tx-mid);max-width:24rem}
.ic-cta__nota{
  font-size:.5625rem;line-height:2.1;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tx-mid);text-align:right;
}

/* ═══════════════ PÁGINA · AUXÍLIO-ACIDENTE ═══════════════ */
.ac-oque .sec__corpo{padding-block:clamp(3rem,8vh,5.5rem)}
.ac-oque__grade{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,4rem) clamp(2rem,5vw,5rem);align-items:start;
}
.ac-oque__cab{grid-column:1;grid-row:1 / span 2}
.ac-oque__resumo{
  margin-top:clamp(1.5rem,3.4vh,2.25rem);max-width:26rem;
  font-size:.9375rem;line-height:1.75;color:var(--tx-mid);
}
.ac-oque__txt{
  grid-column:2;grid-row:1;max-width:36rem;
  font-size:clamp(.9375rem,.35vw + .86rem,1.0625rem);line-height:1.75;color:var(--tx-mid);
}
.caracs{
  grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:0;margin-top:clamp(1.5rem,3.4vh,2.5rem);
}
.carac{padding:0 clamp(1rem,2vw,1.5rem) 0 0}
.carac:not(:first-child){padding-left:clamp(1rem,2vw,1.5rem);border-left:1px solid var(--fio)}

/* Variante de quatro cartões: eles descem para uma faixa própria, ocupando a
   largura inteira, em vez de se espremerem na coluna da direita. */
.ac-oque--largo .ac-oque__cab{grid-row:1}
.ac-oque--largo .caracs{
  grid-column:1 / -1;grid-row:2;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(2rem,5vh,3.5rem);
}
.carac__i{display:block;color:var(--ac);margin-bottom:.9rem}
.carac__i svg{width:1.625rem;height:1.625rem;fill:none;stroke:currentColor;
  stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round}
.carac__t{margin:0 0 .25rem;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.3;color:var(--tx)}
.carac__d{font-size:.78125rem;line-height:1.55;color:var(--tx-mid)}

.ac-casos__grade{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.ac-casos__cab .nota-fio{margin-top:clamp(1.5rem,3.4vh,2.25rem)}
.casos{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,3.4vh,2.5rem) clamp(1.5rem,3vw,2.5rem);
}
.caso{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;
  padding-bottom:clamp(1.25rem,2.8vh,1.75rem);border-bottom:1px solid var(--fio);
}
.caso__i{color:var(--ac);margin-top:.15rem}
.caso__i svg{width:1.625rem;height:1.625rem;fill:none;stroke:currentColor;
  stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round}
.caso__t{margin:0 0 .3rem;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(.9375rem,1.2vw,1.0625rem);line-height:1.3;color:var(--tx)}
.caso__d{font-size:.78125rem;line-height:1.6;color:var(--tx-mid)}

/* ═══════════════ PÁGINA · APOSENTADORIAS ═══════════════ */
.ap-modal__grade{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.55fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.ap-modal__cab .intro{margin-top:clamp(1.25rem,3vh,2rem)}
.modais{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vh,2.5rem) 0;
}
.modal{
  padding:0 clamp(1.1rem,2.2vw,1.75rem) clamp(1.25rem,2.8vh,1.75rem) 0;
  border-bottom:1px solid var(--fio);
}
.modal:not(:nth-child(3n+1)){padding-left:clamp(1.1rem,2.2vw,1.75rem);
  border-left:1px solid var(--fio)}
.modal__i{display:block;color:var(--ac);margin-bottom:.9rem}
.modal__i svg{width:1.625rem;height:1.625rem;fill:none;stroke:currentColor;
  stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round}
.modal__t{margin:0 0 .4rem;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(.9375rem,1.15vw,1.0625rem);line-height:1.3;color:var(--tx)}
.modal__d{font-size:.78125rem;line-height:1.6;color:var(--tx-mid)}

/* Os cards dividem as linhas internas entre si: ícone, título e texto ficam
   alinhados mesmo quando um título ocupa duas linhas e o vizinho, uma. */
@supports (grid-template-rows: subgrid){
  .caracs{grid-template-rows:auto auto auto}
  .carac{grid-row:1 / -1;display:grid;grid-template-rows:subgrid}

  /* .modais tem duas faixas de três: cada card ocupa a faixa inteira. */
  .modais{grid-template-rows:repeat(2,auto auto auto);row-gap:0}
  .modal{display:grid;grid-template-rows:subgrid}
  .modal:nth-child(-n+3){grid-row:1 / span 3}
  .modal:nth-child(n+4){grid-row:4 / span 3;padding-top:clamp(1.75rem,4vh,2.5rem)}
}
@supports not (grid-template-rows: subgrid){
  .carac__t,.modal__t{min-height:2.6em}
}


/* ══════════ ENDEREÇO ══════════ */
.endereco{
  margin-top:clamp(1.5rem,3.5vh,2.25rem);
  font-style:normal;font-size:.8125rem;line-height:1.8;color:var(--tx-mid);
}
.endereco__r{
  display:block;margin-bottom:.5rem;
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);
}
.rodape__end{
  grid-column:1 / -1;
  margin-top:clamp(1.25rem,3vh,2rem);padding-top:clamp(1.25rem,3vh,2rem);
  border-top:1px solid var(--fio);
  font-style:normal;font-size:.75rem;line-height:1.75;color:var(--tx-mid);
}

/* As redes na seção de contato da home: mesma pastilha do rodapé, alinhadas
   à direita da assinatura. */
.redes--pe{justify-self:end;margin-top:.25rem}
@media (max-width:760px){.redes--pe{justify-self:start;margin-top:1rem}}


/* ══════════ ROL LEGAL DAS MOLÉSTIAS (isenção de IR) ══════════ */
.ir-rol__cab{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
  margin-bottom:clamp(2.25rem,5.5vh,3.5rem);
}
.ir-rol__cab .intro{margin:0}

/* Fluxo por coluna: a leitura desce cada coluna, como numa lista impressa.
   17 itens em 6 linhas → 6 / 6 / 5. */
.rol{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(6,auto);grid-auto-flow:column;
  column-gap:clamp(1.5rem,4vw,3.25rem);
  border-top:1px solid var(--fio);
}
.rol li{
  display:flex;gap:.85rem;align-items:baseline;
  padding:clamp(.7rem,1.7vh,1.05rem) 0;
  border-bottom:1px solid var(--fio);
  font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(.9375rem,1.02vw,1.0625rem);line-height:1.35;color:var(--tx);
}
.rol__n{
  flex:0 0 auto;font-family:Sora,system-ui,sans-serif;font-size:.625rem;
  letter-spacing:.12em;color:var(--ac);font-variant-numeric:tabular-nums;
}
.rol__pe{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.25rem,3vw,3.25rem);
  margin-top:clamp(2rem,5vh,3.25rem);
}
.rol__grau{
  grid-column:1 / -1;max-width:52rem;
  font-size:clamp(.875rem,.3vw + .82rem,.9375rem);line-height:1.8;color:var(--tx-mid);
}
.rol__grau strong{color:var(--tx);font-weight:400}
.rol__grau em{font-style:italic;color:var(--ac)}
.rol__extra{font-size:.8125rem;line-height:1.8;color:var(--tx-mid)}
.rol__extra strong{color:var(--tx);font-weight:400}
.rol__fonte{
  font-size:.6875rem;line-height:1.85;color:var(--tx-mid);opacity:.8;
  align-self:end;
}
@media (max-width:1000px){
  .ir-rol__cab{grid-template-columns:minmax(0,1fr)}
  .rol{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(9,auto)}
  .rol__pe{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .rol{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
}

/* ══════════ RESSALVA INFORMATIVA ══════════ */
/* Exigência de conformidade: o bloco fica visível e legível, nunca em corpo 10
   escondido no rodapé (Prov. CFOAB 205/2021; CED art. 39 e 43). */
.ressalva{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);
  margin-top:clamp(2.5rem,6vh,4rem);padding-top:clamp(1.5rem,3.5vh,2.25rem);
  border-top:1px solid var(--fio);
}
.ressalva__r{
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);
}
.ressalva p{font-size:.78125rem;line-height:1.8;color:var(--tx-mid);max-width:44rem}
.ressalva div p + p{margin-top:.7rem}
.ressalva strong{color:var(--tx);font-weight:400}
@media (max-width:760px){.ressalva{grid-template-columns:minmax(0,1fr);gap:.9rem}}

/* No bloco de contato o endereço é a outra ponta da linha do botão, não um
   bloco empilhado abaixo dele. */
.fecho .endereco{margin-top:0;text-align:right}
@media (max-width:760px){.fecho .endereco{text-align:left}}


/* ══════════════ 05 · CONTEÚDOS NAS REDES ══════════════
   Três linhas editoriais, no mesmo idioma da lista de áreas de atuação:
   ícone, nome, arroba e seta, separados por fio. */
.redes-l{border-top:1px solid var(--fio)}
.rede{border-bottom:1px solid var(--fio)}
.rede__l{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:clamp(1rem,2.6vw,2rem);
  padding-block:clamp(1.35rem,3.2vh,2rem);
  transition:padding-left .5s var(--e);
}
.rede__i{display:flex;color:var(--ac);transition:transform .5s var(--e)}
.rede__i svg{
  width:clamp(1.5rem,2.4vw,1.875rem);height:clamp(1.5rem,2.4vw,1.875rem);
  fill:none;stroke:currentColor;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round;
}
.rede__n{
  font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1.125rem,1.7vw,1.5rem);line-height:1.2;color:var(--tx);
  transition:color .4s var(--e);
}
.rede__a{
  font-size:.8125rem;letter-spacing:.02em;color:var(--tx-mid);
  transition:color .4s var(--e);
}
.rede__seta{
  display:grid;place-items:center;
  width:clamp(2.25rem,3.4vw,2.75rem);height:clamp(2.25rem,3.4vw,2.75rem);
  border:1px solid var(--ac-borda);border-radius:50%;color:var(--ac);
  transition:background-color .45s var(--e),color .45s var(--e),transform .45s var(--e);
}
.rede__seta svg{width:.875rem;height:.875rem;fill:none;stroke:currentColor;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){
  .rede__l:hover{padding-left:clamp(.5rem,1.4vw,1.25rem)}
  .rede__l:hover .rede__i{transform:translateX(.15rem)}
  .rede__l:hover .rede__n{color:var(--ac-disp)}
  .rede__l:hover .rede__a{color:var(--tx)}
  .rede__l:hover .rede__seta{background:var(--ac);color:var(--sobre-ac);transform:translateX(.2rem)}
}
.rede__l:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
.rodape-nota--solta{margin-top:clamp(1.5rem,3.5vh,2.25rem)}

@media (max-width:760px){
  /* Empilha em duas linhas: ícone + nome + seta em cima, arroba embaixo. */
  .rede__l{
    grid-template-columns:auto minmax(0,1fr) auto;
    row-gap:.35rem;column-gap:1rem;
    padding-block:clamp(1.1rem,3vh,1.5rem);
  }
  .rede__n{grid-column:2;font-size:1.1875rem}
  .rede__a{grid-column:2;grid-row:2;font-size:.875rem}
  .rede__i{grid-row:1 / span 2}
  .rede__seta{grid-column:3;grid-row:1 / span 2;width:2.5rem;height:2.5rem}
}

/* ═══════════════════════════════════════════════════════════════════
   DOCUMENTO LEGAL (política de privacidade, termos)
   Página de leitura longa: índice fixo à esquerda, corpo em uma coluna
   com medida curta. Sem ornamento — o que importa aqui é ler.
   ═══════════════════════════════════════════════════════════════════ */
.doc-hero .sec__corpo{padding-block:calc(var(--hd) + clamp(2.5rem,7vh,5rem)) 0}
.doc-hero__meta{
  margin-top:clamp(1.25rem,3vh,2rem);
  font-size:.75rem;letter-spacing:.02em;color:var(--tx-mid);
}
.doc-hero__meta strong{color:var(--tx);font-weight:400}

.doc__grade{
  display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
  padding-top:clamp(2.5rem,6vh,4rem);
}
.doc__indice{position:sticky;top:calc(var(--hd) + 1.5rem)}
.doc__indice h2{
  margin:0 0 1.1rem;font-family:Sora,system-ui,sans-serif;font-weight:400;
  font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ac);
}
.doc__indice ol{display:grid;gap:.1rem;counter-reset:none}
.doc__indice a{
  display:flex;gap:.7rem;padding:.42rem 0;
  font-size:.8125rem;line-height:1.4;color:var(--tx-mid);
  transition:color .3s var(--e);
}
.doc__indice a span{color:var(--ac);font-variant-numeric:tabular-nums;flex:0 0 auto}
.doc__indice a:hover,.doc__indice a:focus-visible{color:var(--tx)}

.doc__corpo{max-width:40rem}
.doc__sec{padding-block:clamp(1.75rem,4.5vh,2.75rem);border-top:1px solid var(--fio)}
.doc__sec:first-child{border-top:0;padding-top:0}
.doc__sec h2{
  display:flex;gap:.85rem;align-items:baseline;
  margin:0 0 clamp(.9rem,2.2vh,1.25rem);
  font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1.1875rem,1.6vw,1.5rem);line-height:1.28;color:var(--tx);
}
.doc__sec h2 span{
  flex:0 0 auto;font-family:Sora,system-ui,sans-serif;font-size:.6875rem;
  letter-spacing:.1em;color:var(--ac);font-variant-numeric:tabular-nums;
  position:relative;top:-.15em;
}
.doc__sec p{font-size:.9375rem;line-height:1.85;color:var(--tx-mid)}
.doc__sec p + p{margin-top:.9rem}
.doc__sec strong{color:var(--tx);font-weight:400}
.doc__sec a{color:var(--ac);text-decoration:underline;text-underline-offset:.2em;
  text-decoration-thickness:1px;text-decoration-color:var(--ac-fio)}
.doc__lista{margin-top:1.1rem;display:grid;gap:.7rem}
.doc__lista li{
  position:relative;padding-left:1.15rem;
  font-size:.9375rem;line-height:1.75;color:var(--tx-mid);
}
.doc__lista li::before{
  content:"";position:absolute;left:0;top:.78em;
  width:5px;height:1px;background:var(--ac);opacity:.75;
}
.doc__lista strong{color:var(--tx);font-weight:400}
/* base legal ao fim do item, discreta */
.doc__base{display:block;margin-top:.15rem;font-size:.8125rem;color:var(--tx-mid);opacity:.78}

.doc__nota{
  margin-top:clamp(1.25rem,3vh,1.75rem);padding:clamp(1rem,2.6vh,1.4rem) clamp(1rem,2.6vw,1.4rem);
  border:1px solid var(--ac-borda);background:var(--ac-wash);
}
.doc__nota p{font-size:.9375rem;line-height:1.75;color:var(--tx)}


/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGE — auxílio-acidente
   Página de conversão: sem menu, um só caminho. Usa os mesmos tokens de
   tom das demais, então o componente serve em fundo claro e escuro.
   ═══════════════════════════════════════════════════════════════════ */
.pagina-lp .hd__in{justify-content:space-between}
.lp-hd{position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--hair-d)}
.lp-hd__in{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(.7rem,1.6vh,1rem) var(--gut);
}
/* O cabeçalho da LP é sempre claro; sem isto a marca e o botão herdam as
   cores pensadas para o header escuro do site e somem no fundo. */
.lp-hd .brand{color:var(--rose-ink)}
.lp-hd .brand__name{color:var(--grafite)}
.lp-hd .brand__sub{color:var(--grafite-mid)}
.lp-hd .cta{padding:.7rem 1.2rem;font-size:.78125rem;
  color:var(--rose-ink);border-color:rgba(154,98,72,.4)}
.lp-hd .cta::before{background:var(--rose-ink)}
.lp-hd .cta:hover,.lp-hd .cta:focus-visible{color:var(--paper)}

/* ── hero: promessa à esquerda, formulário à direita ── */
.lp-hero .sec__corpo{padding-block:clamp(2.5rem,7vh,5rem)}
.lp-hero__grade{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.lp-hero__txt{max-width:34rem}
.lp-selo{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.42rem .9rem;margin-bottom:clamp(1rem,2.5vh,1.5rem);
  border:1px solid var(--ac-borda);border-radius:100px;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);
}
.lp-selo i{width:5px;height:5px;border-radius:50%;background:var(--ac);flex:0 0 auto}
.lp-hero .intro{margin-top:clamp(1.25rem,3vh,2rem);font-size:clamp(1rem,.4vw+.9rem,1.125rem)}

/* ── lista de reconhecimento ── */
.checa{display:grid;gap:.85rem;margin-top:clamp(1.5rem,3.5vh,2.25rem)}
.checa li{
  position:relative;padding-left:1.9rem;
  font-size:.9375rem;line-height:1.6;color:var(--tx-mid);
}
.checa li::before{
  content:"";position:absolute;left:0;top:.32em;
  width:1.1rem;height:1.1rem;border-radius:50%;
  border:1px solid var(--ac-borda);
}
.checa li::after{
  content:"";position:absolute;left:.34rem;top:.62em;
  width:.42rem;height:.22rem;border-left:1.5px solid var(--ac);
  border-bottom:1.5px solid var(--ac);transform:rotate(-45deg);
}

/* ── cartão do formulário ── */
.fx{
  scroll-margin-top:5rem;
  position:relative;background:var(--paper);
  border:1px solid var(--ac-borda);
  padding:clamp(1.5rem,3.5vw,2.5rem);
  box-shadow:0 1px 0 rgba(32,36,46,.04);
}
[data-tone="dark"] .fx{background:var(--ink-0);border-color:rgba(234,187,161,.28)}
.fx__prog{margin-bottom:clamp(1.25rem,3vh,1.75rem)}
.fx__prog[hidden]{display:none}
.fx__prog-l{height:2px;background:var(--fio);overflow:hidden}
.fx__prog-b{display:block;height:100%;width:0;background:var(--ac);
  transition:width .45s var(--e)}
.fx__prog-t{
  display:block;margin-top:.5rem;
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-mid);
}
.fx__tela{min-height:clamp(17rem,34vh,21rem);display:flex;flex-direction:column}
.anim .fx__tela--entra{animation:fxEntra .42s var(--e-io) both}
@keyframes fxEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fx__rot{
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ac);
  margin-bottom:.7rem;
}
.fx__q{
  margin:0 0 .7rem;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1.25rem,1.9vw,1.625rem);line-height:1.28;color:var(--tx);
}
.fx__ajuda{font-size:.875rem;line-height:1.7;color:var(--tx-mid)}
.fx__ajuda + .fx__ajuda{margin-top:.6rem}

.fx__ops{display:grid;gap:.6rem;margin-top:clamp(1.1rem,2.6vh,1.5rem)}
.fx__op{
  display:grid;gap:.2rem;text-align:left;
  padding:.95rem 1.1rem;
  border:1px solid var(--fio);background:transparent;
  transition:border-color .3s var(--e),background-color .3s var(--e),transform .3s var(--e);
}
.fx__op-t{font-size:.9375rem;line-height:1.4;color:var(--tx)}
.fx__op-n{font-size:.78125rem;line-height:1.45;color:var(--tx-mid)}
@media (hover:hover){
  .fx__op:hover{border-color:var(--ac);background:var(--ac-wash);transform:translateX(2px)}
}
.fx__op:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

.fx__form{display:grid;gap:.9rem;margin-top:clamp(1.1rem,2.6vh,1.5rem)}
.fx__campo{display:grid;gap:.4rem}
.fx__label{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mid)}
.fx__campo input{
  width:100%;padding:.85rem 1rem;
  border:1px solid var(--fio);background:transparent;color:var(--tx);
  font-family:inherit;font-size:1rem;
  transition:border-color .3s var(--e);
}
.fx__campo input::placeholder{color:var(--tx-mid);opacity:.6}
.fx__campo input:focus{outline:none;border-color:var(--ac)}
.fx__ok{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;
  align-items:start;margin-top:.3rem;cursor:pointer;
}
.fx__ok input{
  width:1.15rem;height:1.15rem;margin-top:.15rem;flex:0 0 auto;
  accent-color:var(--ac);cursor:pointer;
}
.fx__ok-t{font-size:.8125rem;line-height:1.6;color:var(--tx-mid)}
.fx__ok-t strong{color:var(--tx);font-weight:400}
.fx__erro{min-height:1.1rem;font-size:.8125rem;color:#9A3B2B}
[data-tone="dark"] .fx__erro{color:#F0A18A}
.fx__cta{width:100%;justify-content:center;margin-top:.4rem}
.fx__voltar{
  margin-top:1rem;align-self:flex-start;background:none;border:0;padding:.4rem 0;
  font-size:.78125rem;letter-spacing:.02em;color:var(--tx-mid);
  border-bottom:1px solid var(--fio);transition:color .3s var(--e),border-color .3s var(--e);
}
.fx__voltar:hover{color:var(--tx);border-color:var(--ac)}
.fx__nota{margin-top:auto;padding-top:1.1rem;font-size:.8125rem;line-height:1.65;color:var(--tx-mid)}

/* ── prova de método, não de resultado ── */
.lp-passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--fio)}
.lp-passo{padding:clamp(1.6rem,3.6vh,2.4rem) clamp(1rem,2.2vw,1.75rem) clamp(1.4rem,3vh,2rem) 0}
.lp-passo + .lp-passo{padding-left:clamp(1rem,2.2vw,1.75rem);border-left:1px solid var(--fio)}
.lp-passo__n{display:block;font-family:Newsreader,Georgia,serif;font-style:italic;
  font-weight:300;font-size:clamp(1.375rem,2vw,1.75rem);line-height:1;color:var(--ac-disp);
  margin-bottom:.9rem}
.lp-passo__t{margin:0 0 .55rem;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.3;color:var(--tx)}
.lp-passo__d{font-size:.8125rem;line-height:1.65;color:var(--tx-mid)}

/* ── ressalva de conformidade, visível ── */
.lp-legal{
  margin-top:clamp(2rem,5vh,3rem);padding-top:clamp(1.25rem,3vh,1.75rem);
  border-top:1px solid var(--fio);
  /* Identificação obrigatória (Prov. 205/2021): texto selecionável, nunca
     dentro de imagem, e em corpo que se lê. */
  font-size:.875rem;line-height:1.8;color:var(--tx-mid);
}
.lp-legal strong{color:var(--tx);font-weight:400}
.lp-legal p + p{margin-top:.6rem}

@media (max-width:1000px){
  .lp-hero__grade{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vh,2.75rem)}
  .lp-hero__txt{max-width:none}
  .lp-passos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-passo + .lp-passo{padding-left:0;border-left:0}
  .lp-passo:nth-child(even){padding-left:clamp(1rem,2.4vw,1.5rem);border-left:1px solid var(--fio)}
  .lp-passo:nth-child(n+3){border-top:1px solid var(--fio)}
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — calibração
   O desktop foi fechado primeiro. Aqui as grades editoriais descem para
   duas colunas no tablet e para uma no telefone, os fios trocam de lado
   (vertical → horizontal) e o corpo de texto sobe de escala: o público
   destas páginas inclui pessoas idosas e pessoas com deficiência.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────── TABLET (≤1000px) ─────────── */
@media (max-width:1000px){

  /* A faixa editorial lateral da hero é decorativa e some antes de tudo. */
  .ic-hero__faixa{display:none}
  .ic-hero__grade{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}

  /* Três e quatro colunas viram duas. */
  .caracs,.ac-oque--largo .caracs,
  .modais,.situacoes,.beneficios,.posts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .passos{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* O subgrid alinhava linhas entre três colunas; com outro número de
     colunas ele passa a empilhar os cartões uns sobre os outros. */
  .caracs,.modais,.beneficios{grid-template-rows:none}
  .carac,.modal,.ben{grid-row:auto;display:block}
  /* fora do subgrid o numeral volta a ser inline e perde a margem */
  .ben__n{display:block}
  .modal:nth-child(-n+3),.modal:nth-child(n+4){grid-row:auto;padding-top:0}

  /* Fios: de divisa vertical para régua horizontal. */
  .carac,.modal,.ben{
    padding:clamp(1.2rem,2.8vh,1.6rem) clamp(1rem,2.4vw,1.5rem) clamp(1.2rem,2.8vh,1.6rem) 0;
    border-top:1px solid var(--fio);border-bottom:0;
  }
  .carac:not(:first-child),.modal:not(:nth-child(3n+1)),
  .ben:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .carac:nth-child(even),.modal:nth-child(even),.ben:nth-child(even){
    padding-left:clamp(1rem,2.4vw,1.5rem);border-left:1px solid var(--fio);
  }
  .caracs{border-top:0}

  .passo{padding:clamp(1.6rem,3.6vh,2.25rem) clamp(1rem,2.4vw,1.5rem) clamp(1.4rem,3vh,2rem) 0}
  .passo + .passo{padding-left:0}
  .passo + .passo::before{display:none}
  .passo:nth-child(even){padding-left:clamp(1rem,2.4vw,1.5rem);
    border-left:1px solid var(--fio)}
  .passo:nth-child(n+3){border-top:1px solid var(--fio)}

  .post + .post::before{display:none}
  .post + .post .post__l{padding-left:0}
  .post__l{padding-inline:0 clamp(1rem,2.4vw,1.5rem)}
  .post:nth-child(even) .post__l{padding-left:clamp(1rem,2.4vw,1.5rem)}
  .post:nth-child(even){border-left:1px solid var(--fio)}
  .post:nth-child(n+3){border-top:1px solid var(--fio)}

  /* Grades de duas colunas “cabeçalho + conteúdo” empilham. */
  .ic-oque__grade,.ac-oque__grade,.ic-benef__grade,.ic-sit__grade,
  .ac-casos__grade,.ap-modal__grade,.ir-rol__cab,.ic-faq__grade,
  .sp-atuar__grade,.sp-mani__grade,.sobre,.pilares{
    grid-template-columns:minmax(0,1fr);
  }
  .ac-oque__cab,.ac-oque__txt,.caracs{grid-column:1;grid-row:auto}
  .ac-oque--largo .caracs{grid-column:1}
  .ic-cta__grade{grid-template-columns:minmax(0,1fr)}
  .ic-cta__nota{display:none}
}

/* ─────────── TELEFONE (≤760px) ─────────── */
@media (max-width:760px){

  /* ── Hero das páginas de área: texto, depois foto ── */
  .ic-hero .sec__corpo{padding-block:0}
  .ic-hero__grade{grid-template-columns:minmax(0,1fr);min-height:0}
  .ic-hero__txt{
    grid-column:1;max-width:none;
    padding:calc(var(--hd) + clamp(1rem,4vh,2rem)) var(--gut) clamp(1.75rem,4vh,2.5rem);
  }
  .ic-hero__foto{
    grid-column:1;aspect-ratio:5/4;min-height:0;
    border-radius:clamp(3rem,22vw,6rem) 0 0 0;
  }
  .ic-hero__foto img{object-position:52% 40%}
  .ic-hero__acao{flex-wrap:wrap;gap:1.25rem}
  .ic-hero__acao .cta{width:100%;justify-content:space-between}
  .nota-fio{width:100%}

  /* ── Hero da página Sobre ── */
  .sp-hero .sec__corpo{min-height:0}
  .sp-hero__grade{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,6vh,3rem)}
  /* No desktop a foto ocupava a direita e o texto só precisava da margem
     esquerda. Empilhado, ele precisa das duas. */
  .sp-hero__txt{padding-inline:var(--gut)}
  .sp-hero__foto{justify-self:center;margin-right:0;width:min(100%,20rem)}
  .sp-hero__eco{display:none}

  /* ── Uma coluna em tudo ── */
  .caracs,.ac-oque--largo .caracs,.modais,.situacoes,.beneficios,
  .posts,.passos,.casos,.creds,.pilares{
    grid-template-columns:minmax(0,1fr);
  }
  .carac:nth-child(even),.modal:nth-child(even),.ben:nth-child(even),
  .passo:nth-child(even),.post:nth-child(even){padding-left:0;border-left:0}
  .passo:nth-child(n+2),.post:nth-child(n+2){border-top:1px solid var(--fio)}
  .passo,.post__l{padding-right:0}
  .carac,.modal,.ben{padding-right:0}

  /* ── Sobre: a tabela de formação vira lista ── */
  .tabela{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .tabela__fio{display:none}
  .formacoes,.compl{grid-template-columns:minmax(0,1fr);grid-column:1;grid-row:auto}
  .fmc{grid-row:auto;grid-template-rows:none;
    padding:clamp(1.25rem,3vh,1.75rem) 0;border-bottom:1px solid var(--fio)}
  .fmc:not(:first-child){padding-left:0}
  .fmc:last-child{border-bottom:0}
  .compl__l{grid-column:1;grid-template-columns:minmax(0,1fr);padding-left:0}

  .sp-quem__grade{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,5vh,2.5rem)}
  .ic-ajuda__grade{grid-template-columns:minmax(0,1fr);gap:0}
  .ic-ajuda__foto{min-height:0;aspect-ratio:5/4}

  /* Safari x Chrome: com aspect-ratio e largura automática, a figura também
     recebe align-self:stretch e os dois motores desempatam de formas opostas
     — o Chrome estica a largura, o Safari resolve pela altura e a imagem
     encolhe para metade. Dar largura definida acaba com a ambiguidade: a
     largura manda, a altura sai da proporção. */
  .ic-hero__foto,.ic-ajuda__foto{
    align-self:start;justify-self:stretch;width:100%;height:auto;
  }
  .sp-quem__foto{
    align-self:start;justify-self:stretch;height:auto;
    width:calc(100% + var(--gut) * 2);
  }
  .ic-ajuda__txt{padding:clamp(2rem,6vh,3rem) var(--gut) 0}

  /* Empilhar a grade não basta: os filhos com grid-column fixo recriam
     colunas implícitas e espremem a primeira faixa a alguns pixels. */
  .sp-quem__foto,.sp-quem__tit,.sp-quem__bio,.sp-quem__eds,
  .sp-atuar__cab,.sp-atuar__lista,
  .sp-form__cab .tag,.sp-form__cab .tit,.sp-form__cab .lateral,
  .compl__cab,.compl__l,
  .sobre__txt,.sobre__p,.sobre__lat,
  .ic-hero__txt,.ic-hero__foto,.ic-hero__faixa{
    grid-column:auto;grid-row:auto;justify-self:stretch;text-align:left;
  }
  /* No desktop o retrato sangra pela esquerda. Empilhado, sangrar só de um
     lado fica torto: no celular ele vai de borda a borda. */
  .sp-quem__foto{margin-inline:calc(var(--gut) * -1)}
  .sp-atuar__lista{border-top:1px solid var(--fio)}
  .sp-form__cab .lateral,.sobre__lat{display:none}
  .sp-form__cab{grid-template-columns:minmax(0,1fr)}

  /* O retrato da home tinha justify-self:end e largura mínima de 11rem: no
     celular ficava com 45% da tela, encostado à direita, com o eco do arco
     saindo pelo lado. Empilhado, ele centraliza e ganha corpo. */
  .retrato{justify-self:center;width:min(100%,19rem);margin-inline:auto}
  .retrato__eco{transform:translateX(-1rem) translateY(-.75rem);opacity:.5}

  /* Cada credencial vira rótulo sobre valor. */
  .cred{grid-template-columns:minmax(0,1fr);gap:.3rem}

  /* ── Etapas numeradas ── */
  .etapa{grid-template-columns:2.5rem minmax(0,1fr);gap:1rem}

  /* ── Escala de leitura ──
     O piso das fontes do desktop é pequeno demais para um público que
     inclui pessoas idosas e pessoas com deficiência. */
  .intro{font-size:1rem;line-height:1.75}
  .carac__d,.modal__d,.etapa__d,.sit__d,.ben__d,.caso__d,
  .passo__d,.post__d,.pilar__d,.rol__extra,.ac-oque__resumo,
  .ac-oque__txt,.ic-oque__txt,.faq__p p,.ic-cta__acao p,
  .ic-ajuda__txt p,.ressalva p{font-size:.9375rem;line-height:1.72}
  .rol__grau{font-size:.9375rem;line-height:1.75}
  .rol li{font-size:1rem}
  .fmc__i,.endereco,.rodape__end{font-size:.8125rem}
  .rol__fonte,.compl__nota{font-size:.875rem;line-height:1.7}
  .compl__l,.compl__l li{font-size:.875rem;line-height:1.6}
  /* a entrelinha maior no celular desloca o traço do marcador */
  .compl__l li::before{top:.82em}
  .rodape__c,.rodape__leg,.rodape__oab{font-size:.78125rem}
  .doc-hero__meta{font-size:.875rem}
  .carac__t,.modal__t,.etapa__t,.sit__t,.ben__t{font-size:1.0625rem}
  .faq__b{font-size:1rem;padding-block:1.15rem}

  /* ── Alvos de toque ── */
  .brand{padding-block:.35rem}
  .migalhas a,.migalhas li{padding-block:.5rem}
  .migalhas ol{gap:.4rem .55rem}
  .rodape__nav a,.rodape__leg a{display:inline-block;padding-block:.7rem}
  .redes a{width:2.75rem;height:2.75rem}

  /* ── Documento legal ── */
  .doc__grade{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,5vh,2.5rem);padding-top:clamp(1.75rem,5vh,2.5rem)}
  .doc__indice{position:static;padding-bottom:clamp(1.25rem,3vh,1.75rem);border-bottom:1px solid var(--fio)}
  .doc__indice ol{grid-template-columns:minmax(0,1fr)}
  .doc__indice a{padding-block:.6rem;font-size:.875rem}
  .doc__corpo{max-width:none}
  .doc__sec p,.doc__lista li{font-size:1rem;line-height:1.8}
  .doc__base{font-size:.875rem}

  /* ── Landing page ── */
  .lp-passos{grid-template-columns:minmax(0,1fr)}
  .lp-passo:nth-child(even){padding-left:0;border-left:0}
  .lp-passo:nth-child(n+2){border-top:1px solid var(--fio)}
  .lp-passo{padding-right:0}
  .lp-passo__d{font-size:.9375rem;line-height:1.7}
  /* a nota carrega nome e OAB: precisa de corpo de leitura */
  .fx__nota{font-size:.875rem;line-height:1.7}
  .fx__ok-t{font-size:.875rem}
  .fx{padding:clamp(1.25rem,4vw,1.75rem);margin-inline:calc(var(--gut) * -1);
    border-inline:0}
  .fx__tela{min-height:0}
  .fx__q{font-size:1.25rem}
  .fx__op{padding:1rem 1.1rem}
  .fx__op-t{font-size:1rem}
  .fx__ajuda,.fx__op-n{font-size:.875rem}
  /* Seta sozinha não diz para onde leva. Encurta o texto, não o remove. */
  .lp-hd .cta{padding:.6rem .9rem;font-size:.75rem;letter-spacing:.06em}
  .lp-hd .cta svg{display:none}
  .lp-hd .brand__sub{display:none}
  .checa li{font-size:1rem}

  /* ── Rodapé e fecho ── */
  .fecho{flex-direction:column;align-items:flex-start;gap:1.75rem}
  .fecho__acao{width:100%}
  /* Empilhado, a borda do topo do endereço duplicava o fio que já fecha
     o bloco de cima. */
  .rodape__end{border-top:0;padding-top:0;margin-top:1.25rem}
  .fecho .cta--cheio{width:100%;justify-content:space-between}
  .rodape__topo{gap:1.75rem}
  .rodape__base{gap:.65rem}
  .ic-cta__acao .cta{width:100%;justify-content:space-between}
}

/* ─────────── TELAS ESTREITAS (≤400px) ─────────── */
@media (max-width:400px){
  .ic-hero__foto{aspect-ratio:1/1}
  .etapa{grid-template-columns:2.1rem minmax(0,1fr);gap:.85rem}
  .rol li{font-size:.9375rem}
  .migalhas{font-size:.6875rem}
}