/* ============================================================
   Capturas do produto — linguagem herdada do deck do InvenTI
   (apresentacao/index.html): moldura .shot com elevação no hover,
   affordance "⤢ ampliar" e lightbox em tela cheia.

   🔴 Fonte única das imagens: Prints/ do repositório do InvenTI.
   Nenhuma captura entra sem a pré-voo de privacidade.
   ============================================================ */

.shot {
  position: relative; display: block; margin: 0;
  border: 1px solid var(--line); border-radius: 14px;
  background: #000; overflow: hidden; cursor: zoom-in;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.shot:hover, .shot:focus-visible { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(202,45,126,.28); }
.shot img { display: block; width: 100%; height: auto; }
/* 🔴 16/09 · A moldura tem fundo PRETO (para a imagem não piscar branco enquanto carrega),
   e a legenda herdava `--fg` — que no tema claro é quase preto. Texto 1,16 sobre a própria
   moldura, nos dois temas, porque a moldura não segue o tema: ela é preta sempre.
   *Fundo que não muda com o tema exige texto que também não mude.* */
.shot figcaption { color: #e9e6f4; }
.shot figcaption b, .shot figcaption strong { color: #ffffff; }
.shot.alta img { max-height: 74vh; object-fit: cover; object-position: top; }

.shot::after {
  content: "⤢ ampliar"; position: absolute; right: 10px; bottom: 10px;
  font: 700 .68rem/1 var(--mono); letter-spacing: .06em;
  padding: .4rem .6rem; border-radius: 8px;
  background: rgba(10,8,20,.82); border: 1px solid rgba(255,255,255,.14); color: #f2f0f8;
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.shot:hover::after, .shot:focus-visible::after { opacity: 1; }

.legenda-print { margin: .7rem 0 0; font: 400 .8rem/1.5 var(--mono); color: var(--fg-faint); text-align: center; }

/* dois lados: captura + argumentos */
.lado-a-lado {
  display: grid; gap: clamp(1.4rem, 3.5vw, 2.8rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center; margin-top: 2rem;
}
.lado-a-lado.invertido { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.lado-a-lado.invertido > figure { order: 2; }
@media (max-width: 900px) {
  .lado-a-lado, .lado-a-lado.invertido { grid-template-columns: 1fr; }
  .lado-a-lado.invertido > figure { order: 0; }
}

.duas-capturas { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 820px) { .duas-capturas { grid-template-columns: 1fr; } }

/* lista de ganhos, no padrão do deck */
ul.feat { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
ul.feat li { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; line-height: 1.45; color: var(--fg-soft); max-width: 48ch; }
ul.feat li b { color: var(--fg); font-weight: 600; }
ul.feat .chk {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; margin-top: 1px;
  background: linear-gradient(135deg, var(--roxo), var(--rosa));
  color: #fff; font-size: .72rem;
}

/* título em gradiente — o mesmo do deck */
.titulo-gradiente {
  background: linear-gradient(90deg, var(--fg), var(--rosa));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* pílulas de escopo */
.pilulas { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.pilula {
  border: 1px solid var(--line); background: var(--bg-soft); border-radius: 999px;
  padding: .45rem .85rem; font: 400 .8rem/1 var(--texto); color: var(--fg-soft);
}

/* ---- lightbox ---- */

.lb {
  position: fixed; inset: 0; z-index: 80; display: none;
  background: rgba(6,4,12,.94); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; flex-direction: column; padding: 3vh 3vw;
}
.lb.aberto { display: flex; animation: lbEntra .22s ease; }
@keyframes lbEntra { from { opacity: 0; } to { opacity: 1; } }
/* 🔴 Terceira vez nesta série que `[hidden]` perde para um `display` do autor
   (antes: `.form-saida` e `.idioma-menu`). O padrão é sempre o mesmo — a regra que
   POSICIONA é escrita, a que ESCONDE é herdada do navegador, e a escrita ganha.
   *Sempre que uma regra define `display` num elemento que o script esconde por atributo,
   o par precisa da linha explícita — não é exceção, é o caso normal.* */
.lb img[hidden] { display: none; }
.lb img {
  max-width: 96vw; max-height: 84vh; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14); object-fit: contain; background: #000;
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
}
.lb figcaption { margin-top: .9rem; font-size: .9rem; color: #f2f0f8; text-align: center; max-width: 80ch; }
.lb .conta { margin-top: .35rem; font: 400 .76rem/1 var(--mono); color: #a9a3c2; }
.lb button {
  position: absolute; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #f2f0f8;
  display: grid; place-items: center;
}
.lb .fechar { top: 18px; right: 22px; width: 44px; height: 44px; font-size: 1.25rem; }
.lb .seta { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.5rem; }
.lb .seta.esq { left: 20px; } .lb .seta.dir { right: 20px; }
.lb button:hover { background: rgba(255,255,255,.14); }
@media (max-width: 820px) { .lb .seta { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .shot, .lb.aberto { transition: none; animation: none; }
}

/* ============================================================
   🔴 CAPTURA RETIDA — a moldura sem a imagem.

   Motivo: as capturas de Prints/ vêm da base de demonstração e
   carregam DADO PESSOAL REAL (a lista nominal do drill-down traz
   nomes completos de colaboradores, patrimônio e valor).
   Nenhuma volta à página antes de recaptura com dado fictício.
   Ver .planning/FRONTEIRA-DE-DIVULGACAO.md §7.
   ============================================================ */

.retida {
  display: grid; place-content: center; gap: .5rem; text-align: center;
  aspect-ratio: 16 / 10; padding: 1.5rem;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, color-mix(in srgb, var(--rosa) 7%, transparent) 12px 24px),
    var(--bg-inset);
  color: var(--fg-faint);
}
.retida b {
  font: 700 .7rem/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--rosa-texto);
}
.retida span { font-size: .9rem; color: var(--fg-soft); max-width: 34ch; margin-inline: auto; }
.retida em { font: 400 .74rem/1.4 var(--mono); font-style: normal; }

/* sem imagem não há o que ampliar */
.shot:has(.retida) { cursor: default; }
.shot:has(.retida):hover { transform: none; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.shot:has(.retida)::after { content: none; }