/* fl. 04 — Em nome de quem fica (áreas de atuação). Única seção escura. Prefixo ar- */
.ar-secao{position:relative;isolation:isolate;background:var(--e-noite);color:var(--e-papel);padding:var(--e-secao) var(--e-margem);overflow:hidden;overflow:clip}
/* malha: some antes do topo e do pé, que ficam em --e-noite puro */
.ar-curvas{position:absolute;inset:0;width:100%;height:100%;color:var(--e-ouro-claro);opacity:.22;-webkit-mask-image:linear-gradient(180deg,transparent 8%,#000 30%,#000 58%,transparent 76%);mask-image:linear-gradient(180deg,transparent 8%,#000 30%,#000 58%,transparent 76%)}
.ar-fundo{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 36% at 70% 44% in oklab, color-mix(in oklab, var(--e-ardosia) 78%, var(--e-noite)) 0%, color-mix(in oklab, var(--e-noite-2) 60%, transparent) 46%, transparent 76%),
    radial-gradient(50% 30% at 4% 70% in oklab, color-mix(in oklab, var(--e-noite-2) 80%, var(--e-noite)) 0%, transparent 74%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%)}
.ar-dentro{max-width:1280px;margin:0 auto}
.ar-cab{padding-bottom:16px;border-bottom:1px solid color-mix(in oklab, var(--e-ouro-claro) 30%, transparent)}

.ar-grade{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"texto pasta" "abas pasta";grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,96px);align-items:start;margin-top:clamp(40px,5.5vw,80px)}
.ar-texto{grid-area:texto}.ar-pasta{grid-area:pasta}
.ar-titulo{font-family:var(--e-serifa);font-weight:400;font-size:clamp(34px,4vw,58px);line-height:1.08;letter-spacing:-.02em;color:var(--e-papel)}
.ar-titulo span{display:block;margin-top:.28em;font-style:italic;font-size:.62em;line-height:1.25;letter-spacing:-.01em;color:var(--e-ouro-claro)}
.ar-apoio{margin-top:28px;max-width:30em;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.6;color:color-mix(in oklab, var(--e-papel) 82%, var(--e-noite))}
.ar-onde{margin-top:8px;font-size:13.5px;line-height:1.55;letter-spacing:.02em;color:color-mix(in oklab, var(--e-papel) 72%, var(--e-noite))}

/* a pasta: abas de arquivo + pilha de folhas */
.ar-pasta{position:relative;min-width:0}
.ar-abas{display:none}
.ar-pilha{position:relative;display:grid;gap:26px}
.ar-sob{display:none}
.ar-doc{position:relative;min-width:0;display:flex;flex-direction:column;background:linear-gradient(178deg,var(--e-papel-claro),var(--e-papel) 60%,var(--e-papel-2));color:var(--e-tinta);padding:30px 42px 38px 66px;box-shadow:0 1px 0 rgba(11,19,45,.08),0 30px 54px -26px rgba(0,0,0,.75)}
.ar-doc::before{content:"";position:absolute;left:40px;top:0;bottom:0;width:1px;background:var(--e-margem-rosa);opacity:.8}
/* furos de arquivo */
.ar-doc::after{content:"";position:absolute;left:12px;top:0;bottom:0;width:16px;background:radial-gradient(circle at 50% 30% in oklab, var(--e-noite) 0 5.5px, color-mix(in oklab, var(--e-tinta) 28%, transparent) 6px, transparent 7.5px),radial-gradient(circle at 50% 70% in oklab, var(--e-noite) 0 5.5px, color-mix(in oklab, var(--e-tinta) 28%, transparent) 6px, transparent 7.5px)}
.ar-doc-cab{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--e-ouro-tinta);padding-bottom:16px}
.ar-doc-t{font-family:var(--e-serifa);font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1.08;letter-spacing:-.02em}
.ar-doc-oque{margin-top:12px;max-width:34em;font-size:16px;line-height:1.55;color:var(--e-tinta-2)}
.ar-fala{margin-top:24px;padding:2px 0 2px 20px;border-left:2px solid var(--e-ouro)}
.ar-fala p{font-family:var(--e-serifa);font-style:italic;font-size:clamp(19px,1.85vw,25px);line-height:1.32;letter-spacing:-.01em;color:var(--e-tinta);max-width:22em}
.ar-fala .ar-fala-2{margin-top:6px;font-size:clamp(15.5px,1.2vw,17px);color:var(--e-tinta-2)}
.ar-fala cite{display:block;margin-top:9px;font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--e-ouro-tinta)}
.ar-lanc-cab{margin-top:26px;padding-bottom:9px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--e-ouro-tinta)}
.ar-lanc{list-style:none;counter-reset:ar-l}
.ar-lanc li{counter-increment:ar-l}
.ar-lanc li::before{content:counter(ar-l,upper-roman) ".";font:600 10.5px var(--e-sem);letter-spacing:.14em;color:var(--e-ouro-tinta)}
.ar-lanc strong{padding-right:22px}
.ar-timbre{display:grid;justify-items:center;gap:3px;color:var(--e-tinta);letter-spacing:0;text-transform:none}
.ar-timbre b{font-family:var(--e-serifa);font-weight:400;font-size:11.5px;letter-spacing:.34em;margin-right:-.34em;line-height:1}
.ar-timbre i{position:relative;width:100%;height:1px;background:var(--e-ouro-tinta)}
.ar-timbre i::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;background:var(--e-ouro-tinta);transform:translate(-50%,-50%) rotate(45deg)}
.ar-timbre small{font-size:6px;letter-spacing:.5em;margin-right:-.5em;font-weight:600;line-height:1}
.ar-lanc li{display:grid;grid-template-columns:2.1em minmax(0,.8fr) minmax(0,1.2fr);gap:4px 0;align-items:baseline;border-top:1px solid rgba(11,19,45,.16);padding:11px 0 10px}
.ar-lanc li:last-child{border-bottom:1px solid rgba(11,19,45,.16)}
.ar-lanc strong{font-family:var(--e-serifa);font-weight:400;font-size:16.5px;line-height:1.3}
.ar-lanc span{font-size:14.5px;line-height:1.5;color:var(--e-tinta-2)}
.ar-nota{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--e-tinta-2)}
.ar-nota b{font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--e-ouro-tinta);margin-right:6px}
/* o campo preenchido à mão: a linha de assinatura do hero */
.ar-campo{display:grid;gap:2px;margin-top:auto;padding-top:30px;padding-right:74px}
.ar-campo-r{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--e-ouro-tinta)}
.ar-campo-l{position:relative;flex:1;min-width:0;display:block;border-bottom:1.5px solid color-mix(in oklab, var(--e-tinta) 70%, transparent);padding:6px 4px 2px 26px;text-align:left}
.ar-xis{position:absolute;left:0;bottom:3px;font-family:var(--e-sem);font-style:normal;font-weight:300;font-size:16px;line-height:1;color:var(--e-ouro-tinta)}
.ar-mao{display:inline-block;font-family:var(--e-mao);font-size:clamp(40px,4.2vw,60px);line-height:.9;color:var(--e-ardosia);white-space:nowrap;padding:0 .14em 0 0;transform:translateY(.12em)}
/* o selo, uma vez, fecho da pasta */
.ar-selo{position:absolute;z-index:3;right:-34px;bottom:-40px;width:112px;height:112px;color:var(--e-ouro-tinta);background:radial-gradient(circle at 35% 30%,color-mix(in oklab, var(--e-ouro-claro) 70%, var(--e-papel-claro)),var(--e-ouro-claro) 45%,var(--e-ouro));border-radius:50%;padding:6px;box-shadow:0 10px 18px -8px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.4);transform:rotate(9deg)}
.ar-selo-a{font-family:var(--e-serifa)}
.ar-folhear{display:none}

/* pé: fora dos quatro */
.ar-pe{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px;margin-top:clamp(64px,7vw,104px);padding-top:26px;border-top:1px solid color-mix(in oklab, var(--e-ouro-claro) 30%, transparent)}
.ar-pe-t{font-size:15.5px;line-height:1.55;max-width:38em;color:color-mix(in oklab, var(--e-papel) 86%, var(--e-noite))}
.ar-pe-t span{white-space:nowrap}
.ar-btn{flex:none;background:var(--e-papel);color:var(--e-tinta);text-decoration:none;padding:16px 26px;font-weight:500;font-size:15px;letter-spacing:.02em;border-radius:2px;transition:background .3s}
.ar-btn:hover{background:var(--e-ouro-claro)}
.ar-secao :focus-visible{outline:2px solid var(--e-ouro-claro);outline-offset:3px}

/* ---------- com JS: um documento por vez ---------- */
.ar-js .ar-abas{grid-area:abas;display:grid;margin-top:34px;border-bottom:1px solid color-mix(in oklab, var(--e-papel) 18%, transparent)}
.ar-js .ar-aba{appearance:none;border:0;border-top:1px solid color-mix(in oklab, var(--e-papel) 18%, transparent);background:transparent;cursor:pointer;position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;grid-template-areas:"n t m" "n d m";align-items:center;column-gap:6px;text-align:left;font-family:var(--e-sem);color:var(--e-papel);padding:15px 6px 14px 14px;opacity:.62;transition:opacity .4s,background .4s}
.ar-js .ar-aba::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;background:var(--e-ouro-claro);transform:translate(-50%,-50%) rotate(45deg) scale(0);transition:transform .4s var(--e-curva-pouso)}
.ar-js .ar-aba:hover{opacity:.9}
.ar-js .ar-aba[aria-selected="true"]{opacity:1;background:linear-gradient(90deg,color-mix(in oklab, var(--e-papel) 9%, transparent),transparent 85%)}
.ar-js .ar-aba[aria-selected="true"]::before{transform:translate(-50%,-50%) rotate(45deg) scale(1)}
.ar-aba-n{grid-area:n;font-size:10.5px;letter-spacing:.2em;font-weight:600;color:var(--e-ouro-claro)}
.ar-aba-t{grid-area:t;font-family:var(--e-serifa);font-size:clamp(20px,1.75vw,25px);line-height:1.2;white-space:nowrap}
.ar-aba-d{grid-area:d;font-size:13px;letter-spacing:.02em;color:color-mix(in oklab, var(--e-papel) 78%, var(--e-noite))}
.ar-aba-m{grid-area:m;font-family:var(--e-mao);font-size:clamp(24px,2.1vw,30px);line-height:1;white-space:nowrap;padding:0 4px 0 8px}
.ar-js .ar-pasta{transform:rotate(-.7deg)}
.ar-js .ar-pilha{gap:0}
.ar-js .ar-doc{grid-area:1/1;z-index:1}
.ar-js .ar-doc[hidden]{display:block;visibility:hidden}
.ar-js .ar-sob{display:block;position:absolute;inset:0;background:linear-gradient(178deg,var(--e-papel),var(--e-papel-2));box-shadow:0 20px 40px -24px rgba(0,0,0,.7);transition:transform .7s var(--e-curva-pouso)}
.ar-js .ar-sob-1{transform:rotate(1.1deg) translate(7px,7px);filter:brightness(.93)}
.ar-js .ar-sob-2{transform:rotate(-1.3deg) translate(-9px,12px);filter:brightness(.86)}
.ar-js .ar-sob-3{transform:rotate(2.1deg) translate(12px,16px);filter:brightness(.78)}
.ar-js [data-atual="2"] .ar-sob-1{transform:rotate(-.9deg) translate(-7px,8px)}
.ar-js [data-atual="2"] .ar-sob-2{transform:rotate(1.6deg) translate(10px,11px)}
.ar-js [data-atual="2"] .ar-sob-3{transform:rotate(-2deg) translate(-12px,17px)}
.ar-js [data-atual="3"] .ar-sob-1{transform:rotate(1.4deg) translate(9px,6px)}
.ar-js [data-atual="3"] .ar-sob-2{transform:rotate(-.8deg) translate(-6px,13px)}
.ar-js [data-atual="3"] .ar-sob-3{transform:rotate(1.2deg) translate(8px,18px)}
.ar-js [data-atual="4"] .ar-sob-1{transform:rotate(-1.2deg) translate(-8px,7px)}
.ar-js [data-atual="4"] .ar-sob-2{transform:rotate(.9deg) translate(8px,12px)}
.ar-js [data-atual="4"] .ar-sob-3{transform:rotate(-1.7deg) translate(-11px,16px)}
.ar-js .ar-folhear{display:flex;align-items:center;gap:16px;margin-top:44px;padding-left:40px}
.ar-seta{appearance:none;cursor:pointer;width:46px;height:46px;border-radius:2px;border:1px solid color-mix(in oklab, var(--e-papel) 45%, transparent);background:transparent;color:var(--e-papel);font:400 18px var(--e-sem);transition:background .3s,color .3s}
.ar-seta:hover{background:var(--e-papel);color:var(--e-tinta)}
.ar-conta{font-size:13px;letter-spacing:.04em;color:color-mix(in oklab, var(--e-papel) 80%, var(--e-noite))}

@media (prefers-reduced-motion:no-preference){
  .ar-js .ar-pilha{transition:opacity .9s ease,transform 1.1s var(--e-curva-pouso)}
  .ar-js:not(.ar-visto) .ar-pilha{opacity:0;transform:rotate(-2.4deg) translateY(40px)}
  .ar-js .ar-mao{clip-path:inset(-30% 100% -30% 0)}
  .ar-js.ar-visto .ar-mao.ar-escrita{clip-path:inset(-30% -5% -30% 0);transition:clip-path 1.1s var(--e-curva) .45s}
  .ar-js .ar-doc.ar-vira{animation:ar-vira .6s var(--e-curva-pouso) both}
  .ar-js .ar-doc.ar-vira-volta{animation:ar-vira-volta .6s var(--e-curva-pouso) both}
}
@keyframes ar-vira{from{opacity:0;transform:translate(46px,10px) rotate(2.2deg)}to{opacity:1;transform:none}}
@keyframes ar-vira-volta{from{opacity:0;transform:translate(-46px,10px) rotate(-2.2deg)}to{opacity:1;transform:none}}

@media (max-width:1100px){
  .ar-grade{grid-template-columns:minmax(0,1fr);grid-template-areas:"texto" "abas" "pasta";grid-template-rows:auto}
  .ar-apoio{max-width:38em}
  /* o seletor vira abas de papel de arquivo, coladas na folha */
  .ar-js .ar-abas{position:relative;z-index:2;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-items:end;margin-top:38px;padding:0 22px 0 40px;border:0}
  .ar-js .ar-aba{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "t";gap:1px;border:0;border-radius:3px 3px 0 0;padding:8px 12px 9px;min-height:52px;opacity:1;color:var(--e-tinta);background:color-mix(in oklab, var(--e-papel-2) 74%, var(--e-tinta-2));transform:translateY(6px);transition:transform .35s var(--e-curva-pouso),background .3s}
  .ar-js .ar-aba::before,.ar-aba-d,.ar-aba-m{display:none}
  .ar-js .ar-aba:hover{opacity:1}
  .ar-js .ar-aba[aria-selected="true"]{background:var(--e-papel-claro);transform:none;padding-bottom:13px}
  .ar-aba-n{color:var(--e-tinta)}
  .ar-aba[aria-selected="true"] .ar-aba-n{color:var(--e-ouro-tinta)}
  .ar-aba-t{font-size:16px}
  .ar-js .ar-pasta{transform:none}
}
@media (max-width:640px){
  .ar-secao{padding-left:16px;padding-right:16px}
  .ar-titulo{font-size:clamp(32px,9.4vw,40px)}
  .ar-doc{padding:20px 18px 62px 36px}
  .ar-doc::before{left:24px}
  .ar-doc::after{left:5px;width:14px;background:radial-gradient(circle at 50% 30% in oklab, var(--e-noite) 0 4.5px, color-mix(in oklab, var(--e-tinta) 28%, transparent) 5px, transparent 6.5px),radial-gradient(circle at 50% 70% in oklab, var(--e-noite) 0 4.5px, color-mix(in oklab, var(--e-tinta) 28%, transparent) 5px, transparent 6.5px)}
  .ar-doc-cab{font-size:9.5px;letter-spacing:.18em;padding-bottom:12px}
  .ar-doc-oque{font-size:15.5px}
  .ar-lanc li{grid-template-columns:2.1em minmax(0,1fr);padding:10px 0 9px}
  .ar-lanc li span{grid-column:2}
  .ar-lanc strong{padding-right:0}
  .ar-lanc strong{font-size:16px}
  .ar-campo{padding-top:24px;padding-right:0}
  .ar-mao{font-size:clamp(30px,9vw,38px)}
  .ar-selo{width:84px;height:84px;right:-8px;bottom:-30px}
  .ar-js .ar-abas{padding:0 2px;gap:2px}
  .ar-js .ar-aba{padding:7px 5px 8px 6px;min-height:48px}
  .ar-js .ar-aba[aria-selected="true"]{padding-bottom:12px}
  .ar-aba-t{font-size:11px;letter-spacing:-.01em}
  .ar-aba-n{font-size:9.5px}
  .ar-js .ar-folhear{padding-left:0;margin-top:44px}
  .ar-pe{flex-direction:column;align-items:flex-start}
}
