/* Janela dos vídeos de exemplo da /servicos (botão "Ver exemplos" do card).
   Folha de baixo no celular, centralizada a partir de 768px. Cores pelos tokens do tema (claro e escuro). */

/* Botão do card: área de toque de 44px com o mesmo respiro visual dos itens acima. */
.sx-abrir { min-height: 44px; margin-top: 12px; }

.sx-janela {
  inset: auto 0 0 0;
  height: fit-content;
  width: 100%;
  max-width: 100%;
  max-height: 92dvh;
  margin: 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.sx-janela::backdrop { background: rgba(10, 10, 10, 0.55); }

.sx-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.sx-titulo:focus { outline: none; }

.sx-fechar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.sx-fechar:hover { border-color: var(--fg); }
.sx-fechar:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.sx-videos {
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.sx-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 72dvh;
  object-fit: contain;
  background: #0A0A0A;
  border-radius: 4px;
}
.sx-video:fullscreen { border-radius: 0; background: #000; }

.sx-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sx-lista a {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  text-wrap: balance;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.sx-lista a:hover { border-color: var(--border-strong); }
.sx-lista a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sx-lista a[aria-current='true'] { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.sx-lista svg { width: 10px; height: 10px; }

/* Página parada enquanto a janela está aberta; o espaço da barra de rolagem fica reservado para nada pular de lado. */
html.sx-travado { overflow: hidden; scrollbar-gutter: stable; }

@media (max-width: 359px) {
  .sx-videos { grid-template-columns: minmax(0, 48%) minmax(0, 1fr); }
  .sx-lista a { font-size: 13px; }
}

@media (min-width: 768px) {
  .sx-janela {
    inset: 0;
    margin: auto;
    width: min(640px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    padding: 28px;
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
  }
  .sx-cabeca { margin-bottom: 20px; }
  .sx-videos { grid-template-columns: 280px minmax(0, 1fr); gap: 20px; }
}

/* Entrada: sobe e aparece (curva power3.out do brand book). Sem animação para quem pede menos movimento. */
@media (prefers-reduced-motion: no-preference) {
  .sx-janela[open] { animation: sx-entra 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
  .sx-janela[open]::backdrop { animation: sx-cortina 0.34s ease-out; }
}
@keyframes sx-entra {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes sx-cortina {
  from { opacity: 0; }
  to { opacity: 1; }
}