/* ===== Exemplos reais (prints dos sistemas) nos cartões de capacidades =====
   QUAL print vai em QUAL cartão, por aba, mora em UM lugar só: o mapa TELAS em js/site.js.
   O JS monta o botão "Mostrar exemplo", a figura e o botão "Ampliar". Tudo começa RECOLHIDO,
   pra não poluir; a imagem só é baixada quando alguém pede pra ver. ===== */
.cap__ico{order:-2}
.cap__fig{position:relative;order:-1;margin:0;width:100%}
.cap__fig[hidden]{display:none}
.cap__fig img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;border-radius:10px;cursor:zoom-in;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.4))}
.cap:first-child.mostra .cap__ico{display:none}            /* no destaque, a tela toma o lugar do ícone grande */
.cap:first-child .cap__fig img{filter:drop-shadow(0 18px 40px rgba(8,20,50,.45))}

/* botão "Mostrar exemplo" / "Ocultar exemplo": fica no bloco de texto, logo abaixo do parágrafo */
.cap__ver{
  justify-self:start;display:inline-flex;align-items:center;gap:.45rem;margin-top:.35rem;
  padding:.5rem .85rem;border-radius:999px;border:1px solid var(--line-2);background:transparent;
  color:var(--paper);font:inherit;font-size:.78rem;letter-spacing:.02em;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.cap__ver:hover{border-color:var(--paper);background:rgba(242,239,232,.06)}
.cap__ver svg{width:14px;height:14px;fill:currentColor;flex:none}
.cap:first-child .cap__ver{border-color:rgba(10,10,11,.4);color:var(--ink);font-size:.86rem;padding:.6rem 1rem}
.cap:first-child .cap__ver:hover{border-color:var(--ink);background:rgba(10,10,11,.1)}

/* botão "Ampliar" sobre a imagem (clicar na imagem também amplia) */
.cap__zoom{
  position:absolute;right:.6rem;bottom:.6rem;display:inline-flex;align-items:center;gap:.35rem;
  padding:.4rem .7rem;border-radius:999px;border:1px solid rgba(242,239,232,.28);
  background:rgba(8,9,12,.72);color:#f2efe8;font:inherit;font-size:.74rem;letter-spacing:.02em;cursor:zoom-in;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.cap__zoom:hover{background:rgba(8,9,12,.92)}
.cap__zoom svg{width:13px;height:13px;fill:currentColor}
/* ===== Ampliar o print ao clicar ===== */
.zoom{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);background:rgba(8,9,12,.9);cursor:zoom-out}
.zoom[hidden]{display:none}
.zoom img{max-width:min(100%,1280px);max-height:100%;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.zoom__x{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,239,232,.3);background:rgba(27,29,34,.8);color:#f2efe8;font-size:1.4rem;line-height:1;cursor:pointer}