/* Seção Exemplos */

.exemplos-lista { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px; }

.demo-card {
  display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; text-align: left; cursor: pointer;
  background: transparent; border: 0; color: inherit; font: inherit;
  transition: transform 200ms var(--ease-out);
}
.demo-card:active { transform: scale(0.985); }
.demo-shot {
  position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}
.demo-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 500ms var(--ease-out); }
.demo-etiqueta {
  position: absolute; left: 12px; top: 12px; font: 600 12px/1 var(--mono); color: var(--ink);
  background: var(--mint); padding: 7px 10px; border-radius: 6px;
}
.demo-info { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 2px 0; align-items: baseline; }
.demo-info b { font-size: 18px; font-weight: 700; color: #fff; }
.demo-info small { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; color: var(--text-soft); }
.demo-ver { font: 500 13px/1 var(--mono); color: var(--mint); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .demo-card:hover .demo-shot img { transform: scale(1.03); }
}

/* Navegador interno */
html.viewer-aberto { overflow: hidden; }
.viewer {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: clamp(16px, 3vw, 40px); border: 0; background: transparent; color: var(--text);
  display: none; place-items: center; overscroll-behavior: contain;
}
.viewer[open] { display: grid; }
.viewer::backdrop { background: rgba(5, 8, 14, 0.78); }
.viewer-frame {
  display: flex; flex-direction: column; width: min(1280px, 100%); height: min(860px, 100%);
  background: #111A2A; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  transform-origin: var(--origem-x, 50%) var(--origem-y, 50%);
  transition: transform 260ms var(--ease-out), opacity 200ms ease;
}
@starting-style { .viewer[open] .viewer-frame { opacity: 0; transform: scale(0.96); } }
.viewer.saindo .viewer-frame { opacity: 0; transform: scale(0.97); transition-duration: 180ms, 160ms; }

.viewer-barra { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.viewer-url { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); font: 500 13px/1 var(--mono); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-device { display: flex; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); }
.viewer-device button { height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text-soft); font: 600 13px/1 var(--sans); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.viewer-device button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.viewer-acao { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; font: 600 13px/1 var(--sans); color: #fff; text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.viewer-acao svg { width: 16px; height: 16px; }
.viewer-acao.wa { background: #fff; color: var(--ink); box-shadow: none; }
.viewer-fechar { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.viewer-fechar svg { width: 16px; height: 16px; }
.viewer-acao:active, .viewer-fechar:active, .viewer-device button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .viewer-acao:hover, .viewer-fechar:hover { background: rgba(255, 255, 255, 0.08); }
  .viewer-acao.wa:hover { background: #E6ECF5; }
}

.viewer-tela { flex: 1; min-height: 0; display: flex; justify-content: center; background: #0E1626; }
.viewer-tela iframe { width: 100%; height: 100%; border: 0; background: #fff; transition: width 300ms var(--ease-io); }
.viewer[data-device="mobile"] .viewer-tela { padding: 16px 0; }
.viewer[data-device="mobile"] .viewer-tela iframe { width: 390px; border-radius: 18px; box-shadow: 0 0 0 8px #05080E; }

/* Celular: tela cheia, sem seletor (a tela já é de celular) */
@media (max-width: 760px) {
  .viewer { padding: 0; }
  .viewer-frame { width: 100%; height: 100%; border-radius: 0; }
  .viewer-device, .viewer-url { display: none; }
  .viewer-barra { justify-content: flex-end; padding-top: max(10px, env(safe-area-inset-top)); }
  .viewer-acao.nova span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-frame, .viewer.saindo .viewer-frame { transform: none; }
  @starting-style { .viewer[open] .viewer-frame { transform: none; } }
  .demo-card, .demo-shot img { transition: none; }
}