/* ============================================================
   Faixa de fotos em rotação contínua (a trilha é duplicada por JS)
   ============================================================ */
.fotos-scroll{
  overflow:hidden;
  margin-inline:calc(var(--gut) * -1);   /* sangra até a borda da tela */
  padding-block:2px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - var(--gut)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - var(--gut)),transparent);
}
.fotos-track{
  display:flex;gap:12px;width:max-content;
  transform:translate3d(0,0,0);   /* layer própria de GPU pro loop rAF */
}
.gestao-foto{
  width:158px;height:158px;flex:none;position:relative;overflow:hidden;
  border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:var(--navy-10,#e8e8f5);
}
.gestao-foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease;
}
.gestao-foto:hover img{transform:scale(1.06)}
.gestao-nome{
  position:absolute;inset:auto 0 0 0;padding:10px 12px 8px;
  font-size:13px;font-weight:700;color:#fff;text-align:left;
  background:linear-gradient(0deg,rgba(11,11,109,.88),rgba(11,11,109,0));
  opacity:0;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease;
}
.gestao-foto:hover .gestao-nome,
.gestao-foto:focus-within .gestao-nome{opacity:1;transform:translateY(0)}
/* sem mouse não existe hover: nome fica sempre visível em vez de escondido pra sempre,
   independente do tamanho da tela (tablets também são touch) */
@media (hover:none){
  .gestao-nome{opacity:1;transform:none;background:linear-gradient(0deg,rgba(11,11,109,.78),rgba(11,11,109,0) 70%)}
}

/* ============================================================
   Popup de oportunidade
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(11,11,109,.62);
}
.modal[hidden]{display:none}
.modal-cartao{
  background:var(--branco);border-radius:24px;
  padding:clamp(24px,4vw,40px) clamp(20px,4vw,40px) clamp(24px,4vw,32px);
  max-width:560px;width:100%;position:relative;
  display:flex;flex-direction:column;gap:16px;
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;
}
.modal-fechar{
  position:absolute;top:14px;right:14px;width:44px;height:44px;
  border-radius:50%;border:1.5px solid var(--navy);background:var(--branco);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color .18s ease;
}
.modal-fechar:hover{background:#e2e4f2}
.modal-fechar img{width:18px;height:18px}
.modal-titulo{font-size:clamp(24px,2.6vw,32px);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.modal-texto{font-size:16px;line-height:1.6;color:var(--navy-75)}
.modal .btn{margin-top:8px}

/* ============================================================
   Lightbox da galeria (zoom por clique, arraste/scroll pra navegar)
   ============================================================ */
.modal--lightbox{flex-direction:column;gap:16px;background:rgba(11,11,109,.92)}
.lightbox-viewport{
  max-width:min(900px,92vw);max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);
  width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:16px;
  background:rgba(255,255,255,.06);
}
.lightbox-viewport.zoom{overflow:auto;cursor:zoom-out}
.lightbox-img{
  width:100%;height:100%;display:flex;align-items:flex-end;
  padding:24px;font-size:clamp(18px,2.4vw,24px);font-weight:700;color:var(--branco);
  cursor:zoom-in;transition:width .25s ease,height .25s ease;
}
.lightbox-img img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.lightbox-viewport.zoom .lightbox-img{width:200%;height:200%}
.lightbox-legenda{color:var(--branco);font-size:14px;text-align:center}

/* ============================================================
   Botão voltar ao topo
   ============================================================ */
.topo{
  position:fixed;right:clamp(16px,4vw,36px);bottom:clamp(18px,3vw,32px);z-index:60;
  width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:var(--branco);
  box-shadow:0 10px 24px var(--navy-35);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s ease,visibility .2s ease,transform .2s ease,background-color .18s ease;
}
.topo[data-ativo="true"]{opacity:1;visibility:visible;transform:none}
.topo:hover{background:var(--navy-hover)}
.topo:focus-visible{outline-color:var(--ciano)}