/* Página de área de atuação (sem frame no Figma: segue o padrão das páginas internas,
   com banner da publicação aberta, cards numerados e vidro). Base em css/base.css. */
.ar-topo{height:calc(504 * var(--u))}
.ar-topo .qs-topo-foto{object-position:var(--pos, 50% 50%)}
.ar-cartao{
  position:relative;z-index:2;margin-top:calc(-180 * var(--u));width:calc(918 * var(--u));min-width:0;max-width:100%;
  padding:calc(105 * var(--u)) calc(50 * var(--u)) calc(34 * var(--u));border-radius:20px;
  background:linear-gradient(180deg, rgba(236,228,219,.55) 0%, rgba(236,228,219,.92) 55%, #ECE4DB 75%);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.25);
}
.ar-voltar{display:inline-flex;align-items:center;gap:6px;font-family:var(--titulo);font-size:max(13px, calc(15 * var(--u)));color:var(--tinta);transition:gap .4s cubic-bezier(.16,1,.3,1)}
.ar-voltar:hover{gap:10px}
.ar-titulo{margin-top:calc(22 * var(--u));font-family:var(--titulo);font-size:max(30px, calc(48 * var(--u)));line-height:1.1;color:var(--preto)}
.ar-destaque{margin-top:calc(24 * var(--u));max-width:calc(760 * var(--u));min-width:0;font-family:var(--titulo);font-size:max(16px, calc(18.5 * var(--u)));line-height:1.64;color:#000}

.ar-grade{margin-top:calc(40 * var(--u));padding-left:calc(50 * var(--u));display:grid;grid-template-columns:calc(802 * var(--u)) minmax(0,1fr);column-gap:calc(99 * var(--u));align-items:start}
.ar-texto p{font-size:max(16px, calc(18.5 * var(--u)));line-height:1.64;color:#000}
.ar-texto p + p{margin-top:1.64em}
.ar-setores{margin-top:calc(48 * var(--u))}
.ar-setores h2,.ar-como h2,.ar-equipe h2{font-family:var(--titulo);font-size:max(22px, calc(30 * var(--u)));line-height:1.24;color:var(--preto)}
.ar-setores ul{margin-top:calc(22 * var(--u));display:flex;flex-wrap:wrap;gap:10px}
.ar-setores li{
  padding:9px 18px;border-radius:100px;background:rgba(255,255,255,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  font-family:var(--titulo);font-size:15px;color:var(--tinta);transition:background .4s ease, color .4s ease;
}
.ar-setores li:hover{background:var(--pessego);color:var(--preto)}

/* Coluna lateral: contato + outras áreas (acompanha a rolagem) */
.ar-lado{position:sticky;top:40px;display:flex;flex-direction:column;gap:calc(48 * var(--u))}
.ar-contato{position:relative;overflow:hidden;padding:34px 30px 32px;border-radius:20px;background:var(--grafite);color:var(--areia)}
.ar-contato::after{content:"";position:absolute;right:-46px;top:-40px;width:170px;height:112px;background:url(../img/menu-simbolo.svg) center/contain no-repeat;opacity:.12;pointer-events:none}
.ar-contato h2{position:relative;font-family:var(--titulo-leve);font-weight:300;font-size:max(22px, calc(26 * var(--u)));line-height:1.25;color:var(--pessego)}
.ar-contato p{position:relative;margin-top:14px;font-size:16px;line-height:1.6;color:var(--areia)}
.ar-contato .botao-circulo{position:relative;margin-top:24px}
.ar-outras h2{font-family:var(--titulo);font-size:max(20px, calc(24 * var(--u)));color:var(--preto)}
.ar-outras ul{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.ar-outras a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:10px;font-family:var(--titulo);font-size:16px;color:var(--tinta-2);transition:background .4s ease, color .4s ease}
.ar-outras a:hover{background:rgba(255,255,255,.45);color:var(--preto)}
.ar-outras-seta{display:flex;color:var(--preto);opacity:0;transform:translateX(-6px);transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1)}
.ar-outras-seta svg{transform:rotate(-45deg)}
.ar-outras a:hover .ar-outras-seta{opacity:1;transform:none}

/* Como atuamos: cards numerados (versão compacta para itens curtos) */
.ar-como{margin-top:calc(64 * var(--u))}
.ar-como-grade{margin-top:calc(26 * var(--u));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ar-item{
  min-height:max(210px, calc(236 * var(--u)));padding:22px 28px 28px;border-radius:16px;background:#fff;
  box-shadow:0 16px 32px -24px rgba(59,58,60,.4);display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}
/* Se sobrar um card sozinho na última linha, ele ocupa a largura toda */
.ar-item:last-child:nth-child(odd){grid-column:1 / -1;min-height:0}
.ar-item:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(59,58,60,.5)}
.ar-item-num{font-family:var(--titulo);font-size:18.5px;line-height:1.64;background:linear-gradient(180deg,#FDCF9D,#3B3A3C);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.ar-item p{font-size:max(16px, calc(18.5 * var(--u)));line-height:1.6;color:#000}
.ar-como-grade.compacta{gap:12px}
.ar-como-grade.compacta .ar-item{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:18px;padding:18px 24px}
.ar-como-grade.compacta .ar-item p{font-family:var(--titulo);font-size:max(15px, calc(17 * var(--u)));line-height:1.35}

/* Equipe da área */
.ar-equipe{padding:calc(100 * var(--u)) 0 calc(120 * var(--u)) calc(50 * var(--u))}
.ar-equipe-topo{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ar-equipe-topo p{margin-top:10px;font-size:max(16px, calc(18.5 * var(--u)));line-height:1.64;color:var(--tinta-2)}
.ar-equipe-grade{margin-top:calc(40 * var(--u));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(14 * var(--u))}
/* Mais de 4 pessoas: carrossel com setas (e arrasto/toque, com encaixe) */
.ar-equipe-controles{display:flex;align-items:center;gap:22px}
.ar-equipe-viewport{margin-top:calc(40 * var(--u));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ar-equipe-viewport::-webkit-scrollbar{display:none}
.ar-equipe-trilha{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 14 * var(--u)) / 4);gap:calc(14 * var(--u))}
.ar-equipe-trilha > .profissional{scroll-snap-align:start}
.ar-equipe-controles .seta:disabled{opacity:.35;pointer-events:none}
.profissional{position:relative;aspect-ratio:1024/1016;border-radius:13px;overflow:hidden;background:#2E2D2F}
.profissional > img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.profissional::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#2E2D2F 0%,rgba(46,45,47,0) 50%);pointer-events:none}
.profissional:hover > img{transform:scale(1.05)}
.profissional-perfil{position:absolute;inset:0;z-index:1}
.profissional-info{position:absolute;z-index:1;left:22px;right:80px;bottom:22px;color:#fff;pointer-events:none}
.profissional-info h3{font-family:var(--texto);font-weight:700;font-size:16px;line-height:1.25}
.profissional-info span{display:block;margin-top:6px;font-size:16px;line-height:1.25}
.profissional-linkedin{
  position:absolute;z-index:2;right:23px;bottom:26px;width:46px;height:46px;border-radius:100px;
  background:var(--grafite);color:var(--pessego);display:flex;align-items:center;justify-content:center;
  font-family:"Figtree",sans-serif;font-weight:700;font-size:20px;transition:background .4s ease, color .4s ease;
}
.profissional-linkedin:hover{background:var(--pessego);color:var(--grafite)}

@media (max-width:1024px){
  .ar-topo{height:260px}
  .ar-cartao{margin-top:-80px;width:100%;padding:32px 24px 26px}
  .ar-destaque{max-width:none}
  .ar-grade{grid-template-columns:1fr;row-gap:56px;padding-left:0;margin-top:32px}
  .ar-lado{position:static}
  .ar-como-grade{grid-template-columns:1fr}
  .ar-equipe{padding:72px 0}
  .ar-equipe-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ar-equipe-trilha{grid-auto-columns:calc((100% - 12px) / 2);gap:12px}
}
@media (max-width:640px){
  .ar-equipe-grade{grid-template-columns:1fr}
  .ar-equipe-trilha{grid-auto-columns:82%}
}