/* III · As frentes — três trilhos, uma frente acende */
.ar{--ar-sepia:sepia(.55) saturate(.62) brightness(1.04) contrast(.92);
  max-width:1680px;margin:0 auto;padding:clamp(72px,11vh,140px) var(--margem) 0}
.ar-cabeca{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.ar-rotulo{margin:0 0 18px;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--tinta-suave)}
.ar-rom{font-family:var(--f-serifa);font-weight:600;color:var(--camelo);letter-spacing:.06em}
.ar-titulo{margin:0;font-family:var(--f-serifa);font-weight:500;font-size:clamp(30px,3.4vw,54px);line-height:1.04;letter-spacing:-.018em;color:var(--tinta)}
.ar-linha{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ar-linha>span{display:inline-block;text-wrap:balance}
.ar-linha-2{color:var(--camelo)}
.ar-apoio{margin:0;max-width:520px;justify-self:end;color:var(--tinta-suave);text-wrap:pretty}

/* ---------- trilhos (índice) ---------- */
.ar-mapa{--ar-col:clamp(52px,4.4vw,68px)}
.ar-socia{display:grid;grid-template-columns:var(--ar-col) auto minmax(0,1fr);align-items:center;gap:0 14px;margin:0;padding:26px 0 14px;position:relative}
.ar-trilho:first-child .ar-socia{padding-top:0}
.ar-n{font-family:var(--f-serifa);font-weight:600;color:var(--camelo)}
.ar-socia>.ar-n{font-size:clamp(28px,2.4vw,38px);line-height:1;letter-spacing:.02em;text-align:center;color:color-mix(in oklab, var(--tinta-suave) 55%, transparent);transition:color .8s ease}
.ar-trilho.ar-tem .ar-socia>.ar-n{color:var(--camelo)}
.ar-socia::after{content:"";position:absolute;left:calc(var(--ar-col) / 2);bottom:0;height:12px;width:1px;background:var(--linha)}
.ar-ft{display:block;width:40px;height:52px;overflow:hidden;background:var(--areia);box-shadow:inset 0 0 0 1px rgba(36,26,21,.08)}
.ar-ft img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:var(--ar-sepia);transition:filter 1.2s ease}
.ar-trilho.ar-tem .ar-ft img{filter:none}
.ar-socia-nome{display:flex;flex-direction:column;gap:2px;min-width:0}
.ar-socia-nome b{font-weight:650;font-size:clamp(15px,1.12vw,18px);color:var(--cafe)}
.ar-nb{white-space:nowrap}
.ar-socia-nome span{font-size:var(--t-mini);color:var(--tinta-suave);letter-spacing:.02em;font-variant-numeric:tabular-nums}

.ar-bt{appearance:none;border:0;background:none;font:inherit;color:var(--tinta-suave);cursor:pointer;width:100%;text-align:left;
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;
  padding:10px 4px 10px var(--ar-col);transition:color .4s}
/* a linha do trilho: um fio contínuo por sócia, na coluna do numeral */
.ar-bt::before{content:"";position:absolute;left:calc(var(--ar-col) / 2);top:0;bottom:0;width:1px;background:var(--linha)}
.ar-bt::after{content:"";position:absolute;left:calc(var(--ar-col) / 2 - .5px);top:0;bottom:0;width:2px;background:var(--camelo);transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--facil)}
.ar-bt[aria-expanded="true"]::after{transform:scaleY(1)}
.ar-bt-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ar-bt-nome{font-family:var(--f-serifa);font-weight:500;font-size:clamp(18px,1.45vw,23px);line-height:1.2;text-wrap:balance}
.ar-bt-qt{font-size:12.5px;letter-spacing:.04em;color:var(--tinta-suave);opacity:.85}
.ar-bt:hover{color:var(--tinta)}
.ar-bt[aria-expanded="true"]{color:var(--tinta)}
.ar-bt[aria-expanded="true"] .ar-bt-qt{color:var(--camelo);opacity:1}
.ar-bt-marca{flex:none;width:22px;height:1px;background:currentColor;opacity:.35;position:relative;transition:width .7s var(--facil),opacity .4s}
.ar-bt[aria-expanded="true"] .ar-bt-marca{width:48px;opacity:1;background:var(--camelo)}
.ar-bt:focus-visible{outline:2px solid var(--camelo);outline-offset:2px}

/* ---------- folha da frente ---------- */
.ar-folha{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,20vw,310px);grid-template-rows:auto 1fr;gap:0 clamp(24px,3vw,48px);padding:clamp(24px,3vw,48px);background:color-mix(in oklab, var(--areia) 42%, transparent);box-shadow:inset 0 0 0 1px var(--linha)}
.ar-texto{grid-column:1;grid-row:1 / span 2;min-width:0}
.ar-lado{grid-column:2;grid-row:2;min-width:0;padding-top:4px}
.ar-quem{margin:0 0 14px;font-size:var(--t-mini);font-weight:600;color:var(--cafe);letter-spacing:.02em}
.ar-quem .ar-n{margin-right:6px}
.ar-oab{font-weight:400;color:var(--tinta-suave);margin-left:8px}
.ar-h3{margin:0;font-family:var(--f-serifa);font-weight:500;font-size:clamp(28px,2.6vw,44px);line-height:1.06;letter-spacing:-.015em;color:var(--tinta);overflow:hidden;padding-bottom:.08em;text-wrap:balance}
.ar-h3>span{display:inline-block}
.ar-intro{margin:14px 0 0;max-width:52ch;color:var(--tinta-suave);text-wrap:pretty}
.ar-foto{grid-column:2;grid-row:1;position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--areia)}
.ar-foto::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(36,26,21,.08)}
.ar-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:var(--ar-sepia);transform:scale(1.04);transition:filter 1.2s ease .2s,transform 2.4s var(--facil)}
.ar-acesa .ar-foto img{filter:none;transform:none}
.ar-casos{list-style:none;margin:clamp(22px,2.4vw,36px) 0 0;padding:0;counter-reset:ar;border-bottom:1px solid var(--linha)}
.ar-casos li{counter-increment:ar;border-top:1px solid var(--linha);padding:16px 0 17px;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:6px clamp(18px,2.4vw,40px);align-items:baseline}
.ar-casos h4{margin:0;font-family:var(--f-serifa);font-weight:600;font-size:clamp(17px,1.25vw,20px);line-height:1.25;color:var(--cafe)}
.ar-casos h4::before{content:counter(ar,decimal-leading-zero);display:block;font-family:var(--f-texto);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--camelo);margin-bottom:4px}
.ar-casos p{margin:0;color:var(--tinta-suave);text-wrap:pretty}
.ar-cita{margin:clamp(18px,2vw,26px) 0 0;padding:0;font-family:var(--f-serifa);font-weight:500;font-size:clamp(17px,1.35vw,22px);line-height:1.3;color:var(--tinta);text-wrap:pretty}
.ar-cita .ar-aspa{color:var(--camelo)}
.ar-cita .ar-w{white-space:nowrap}
.ar-zap{display:inline-flex;align-items:center;min-height:48px;margin-top:10px;font-weight:600;font-size:15px;color:var(--cafe);text-decoration:underline;
  text-decoration-color:color-mix(in oklab, var(--camelo) 60%, transparent);text-underline-offset:5px}
.ar-zap::after{content:"→";margin-left:8px;color:var(--camelo)}

/* ---------- fecho ---------- */
.ar-fecho{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(32px,4vw,56px);padding-top:22px;border-top:1px solid var(--linha)}
.ar-aviso{margin:0;font-size:var(--t-mini);color:var(--tinta-suave)}
.ar-cta{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:var(--cafe);color:var(--creme);
  text-decoration:none;font-weight:600;font-size:16px;box-shadow:0 10px 26px -14px rgba(59,42,34,.7);transition:background .3s,transform .3s var(--facil)}
.ar-cta svg{width:20px;height:20px;fill:currentColor}
.ar-cta:hover{background:var(--tinta);transform:translateY(-1px)}

/* ---------- com JS, computador: índice à esquerda, folha acesa à direita ---------- */
@media (min-width:901px){
  .js .ar-mapa{display:grid;grid-template-columns:minmax(300px,4fr) minmax(0,8.4fr);grid-template-rows:repeat(10,auto) 1fr;column-gap:clamp(32px,5vw,96px)}
  .js .ar-trilho,.js .ar-frente{display:contents}
  .js .ar-socia,.js .ar-bt,.js .ar-fecho{grid-column:1}
  .js .ar-fecho{align-self:end;flex-direction:column;align-items:flex-start;margin-top:36px}
  .js .ar-painel{grid-column:2;grid-row:1 / -1;align-self:start;visibility:hidden;opacity:0;transition:opacity .5s ease,visibility 0s linear .5s}
  .js .ar-painel.ar-acesa{visibility:visible;opacity:1;transition:opacity .7s ease .1s,visibility 0s}
}

/* ---------- celular: acordeão ---------- */
@media (max-width:900px){
  .ar-cabeca{grid-template-columns:minmax(0,1fr);gap:14px}
  .ar-apoio{justify-self:start}
  .ar-mapa{--ar-col:46px}
  .ar-socia{padding:30px 0 10px}
  .ar-casos{grid-template-columns:minmax(0,1fr)}
  .ar-bt{min-height:60px;padding-right:2px}
  .ar-bt-marca{width:14px;height:14px;background:none;opacity:1}
  .ar-bt-marca::before,.ar-bt-marca::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--camelo);transition:transform .5s var(--facil)}
  .ar-bt-marca::after{transform:rotate(90deg)}
  .ar-bt[aria-expanded="true"] .ar-bt-marca{width:14px;background:none}
  .ar-bt[aria-expanded="true"] .ar-bt-marca::after{transform:rotate(0)}
  .ar-quem{display:none}
  .ar-folha{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;margin:2px 0 12px;padding:0}
  .ar-foto{grid-column:1;grid-row:1;aspect-ratio:16/10}
  .ar-texto{grid-column:1;grid-row:2;padding:20px 20px 0}
  .ar-lado{grid-column:1;grid-row:3;padding:0 20px 14px}
  .ar-cita{font-size:var(--t-frase)}
  .ar-casos li{grid-template-columns:minmax(0,1fr)}
  .ar-cta{font-size:15px;padding:0 20px;white-space:nowrap}
  .js .ar-painel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .7s var(--facil),visibility 0s linear .7s}
  .js .ar-dobra{min-height:0;overflow:hidden}
  .js .ar-painel.ar-acesa{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .7s var(--facil),visibility 0s}
  .ar-fecho{flex-direction:column;align-items:flex-start}
}

/* ---------- gesto: a frente acende ---------- */
.js .ar-painel .ar-h3>span{transform:translateY(105%);transition:transform 0s}
.js .ar-visto .ar-painel.ar-acesa .ar-h3>span{transform:none;transition:transform 1.1s var(--facil) .1s}
.js .ar-painel .ar-casos li{opacity:0;transform:translateY(14px)}
.js .ar-visto .ar-painel.ar-acesa .ar-casos li{opacity:1;transform:none;transition:opacity .9s ease,transform 1s var(--facil)}
.js .ar-visto .ar-painel.ar-acesa .ar-casos li:nth-child(1){transition-delay:.25s}
.js .ar-visto .ar-painel.ar-acesa .ar-casos li:nth-child(2){transition-delay:.35s}
.js .ar-visto .ar-painel.ar-acesa .ar-casos li:nth-child(3){transition-delay:.45s}
.js .ar-visto .ar-painel.ar-acesa .ar-casos li:nth-child(4){transition-delay:.55s}
.ar-cita .ar-c{opacity:1}
.js .ar-painel .ar-cita .ar-c{opacity:0}
.js .ar-visto .ar-painel.ar-acesa .ar-cita .ar-c{animation:ar-letra .5s ease both;animation-delay:calc(.7s + var(--i) * 26ms)}
@keyframes ar-letra{from{opacity:0}to{opacity:1}}

/* entrada da seção */
.js .ar:not(.ar-visto) .ar-linha>span{transform:translateY(105%)}
.js .ar .ar-linha>span{transition:transform 1.1s var(--facil)}
.js .ar .ar-linha-2>span{transition-delay:.18s}
.js .ar:not(.ar-visto) .ar-apoio,.js .ar:not(.ar-visto) .ar-mapa{opacity:0;transform:translateY(22px)}
.js .ar .ar-apoio,.js .ar .ar-mapa{transition:opacity 1s ease .3s,transform 1.2s var(--facil) .3s}

/* enquadramento de cada foto (faixa alta no computador, faixa larga no celular) */
.ar-foto img[src*="naila"]{object-position:60% 30%}
.ar-foto img[src*="ana-paula"]{object-position:60% 40%}
.ar-foto img[src*="andressa"]{object-position:50% 25%}
@media (max-width:900px){
  .ar-foto img[src*="naila"]{object-position:50% 22%}
  .ar-foto img[src*="ana-paula"]{object-position:50% 42%}
  .ar-foto img[src*="andressa"]{object-position:50% 16%}
}