/* Fase 2 do site: trecho em laço no topo (telas do GSG SISTEM). Só transform e opacidade animam. */
.hero-tela { min-width: 0; }
.laco { max-width: 100%; }
.laco-palco { position: relative; aspect-ratio: 1200 / 625; overflow: hidden; background: #0f2140; }
.laco-quadro { position: absolute; inset: 0; margin: 0; }
.laco-quadro img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.laco-quadro + .laco-quadro { opacity: 0; }
.laco-rodape { display: flex; align-items: center; gap: 12px; padding: 10px 14px 12px; }
.laco-chip { position: relative; flex: 1; min-width: 0; color: #fff; font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.laco-chip span { display: inline-block; }
.laco-trilho { position: relative; flex: 0 0 96px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.laco-progresso { position: absolute; inset: 0; background: var(--ciano-vivo); transform: scaleX(0); transform-origin: 0 50%; }
.laco-pausa { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: #fff; cursor: pointer; padding: 0; }
.laco-pausa svg { width: 12px; height: 12px; fill: currentColor; }
.laco-pausa .ic-play { display: none; }
.laco-pausa[aria-pressed="true"] .ic-play { display: block; }
.laco-pausa[aria-pressed="true"] .ic-pausa { display: none; }
.laco-pausa:focus-visible { outline: 2px solid var(--ciano-vivo); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .laco-pausa:hover { border-color: var(--ciano-vivo); } }
/* Sem JavaScript ou com movimento reduzido: fica a primeira tela, sem controles. */
.laco:not(.laco-ativo) .laco-trilho, .laco:not(.laco-ativo) .laco-pausa { display: none; }
@media (prefers-reduced-motion: reduce) { .laco-trilho, .laco-pausa { display: none; } }