/* Carrossel de sites da home (bloco "Trabalho que já está no ar"). Saiu de trabalhos.css, onde era a
   área 01 de /trabalhos (2026-09-23). A janela em si (vídeo, convite, linha do tempo) é de
   public/palco-sites.css. `@scope` prende tudo ao carrossel: fora dele o site segue com o tema normal. */
@scope (.carrossel-sites) {

:scope {
  position: relative;
  /* cor-literal: início — cromo do navegador fictício. Não é cor do tema: só existe dentro do
     mockup e não vai para página nova (docs/design/tokens.md). */
  --tela-fundo:#0F1B24; --tela-barra:#16232E; --tela-ponto:#33485A;
  /* cor-literal: fim */
}

.trilho{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:10px;scrollbar-width:none;cursor:grab}
.trilho::-webkit-scrollbar{display:none}
.trilho.arrastando{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.slide{flex:0 0 min(560px,84vw);scroll-snap-align:center}
.browser{border-radius:14px 14px 12px 12px;overflow:hidden;background:var(--tela-fundo);
  box-shadow:0 34px 64px -34px color-mix(in srgb, var(--color-profundo) 60%, transparent);border:1px solid color-mix(in srgb, var(--color-profundo) 12%, transparent)}
.browser .barra{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--tela-barra)}
.browser .barra i{width:9px;height:9px;border-radius:50%;background:var(--tela-ponto)}
.browser .barra span{margin-left:10px;flex:1;height:22px;border-radius:6px;background:var(--tela-fundo);color:var(--color-cinza-frio);
  font-family:var(--font-small);font-size:10px;display:flex;align-items:center;padding:0 10px}
.legenda{margin-top:18px;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.legenda h3{font-size:18px;color:inherit}
.legenda .tipo{font-family:var(--font-small);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--color-dourado-texto)}
.legenda p{font-size:14px;color:var(--color-ardosia);margin-top:4px}
.seta{position:absolute;top:230px;z-index:5;width:48px;height:48px;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--color-profundo) 14%, transparent);background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  cursor:pointer;font-size:18px;color:var(--color-profundo);box-shadow:0 12px 26px -14px color-mix(in srgb, var(--color-profundo) 70%, transparent);
  transition:background .2s,border-color .2s,color .2s,transform .2s}
.seta:hover{background:var(--color-dourado);border-color:var(--color-dourado);color:var(--color-profundo);transform:scale(1.06)}
.seta.esq{left:-16px}
.seta.dir{right:-16px}
@media (max-width:900px){.seta{display:none}}

}