/* A página de apresentação do Syden (index.html).
 *
 * As cores são as MESMAS do app (ver web/src/styles.css) de propósito: quem vem daqui para dentro do
 * Syden não deve sentir que trocou de produto.
 *
 * Não há framework nem fonte de fora: as fontes da marca vêm do próprio Syden (fontes.css). A política de segurança do site permite `style-src 'self'` com
 * inline, mas não script de terceiro — e uma página de apresentação que depende de CDN é uma página que
 * abre quebrada quando o CDN cai. */

@import url('fontes.css');

/* A paleta D4 (rebrand de 05/10/2026), a mesma do app. */
:root {
  --bg: #1c212b;
  --bg-fundo: #11141a;
  --bg-cartao: #262c38;
  --text: #e8eaf0;
  --strong: #f5f6fa;
  --muted: #9aa1b1;
  --link: #f5b83d;
  --marca: #f5b83d;
  --marca-escura: #ffd27a;
  /* No âmbar, texto branco não se lê: o botão da marca escreve em azul-noite. */
  --marca-texto: #14161b;
  --borda: #2f3644;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Syden Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--link);
}

/* ---------- botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
}

.botao-marca {
  background: var(--marca);
  color: var(--marca-texto);
}

.botao-marca:hover {
  background: var(--marca-escura);
}

.botao-vazio {
  background: transparent;
  color: var(--strong);
  border-color: #3a4560;
}

.botao-vazio:hover {
  background: #262c38;
}

/* ---------- abertura ---------- */

/* O brilho âmbar atrás do quarto é a luz do abajur saindo da tela: o quarto é aconchegante, e o fundo
   cinza liso de antes o deixaria recortado e frio. */
.abertura {
  background:
    radial-gradient(ellipse 60% 70% at 72% 45%, rgba(245, 184, 61, 0.13), transparent 70%),
    linear-gradient(180deg, var(--bg-fundo), var(--bg) 85%);
  padding: 56px 16px 40px;
  overflow: hidden;
}

.abertura-dentro {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  align-items: center;
  gap: 40px;
}

.abertura h1 {
  color: var(--strong);
  font-size: clamp(32px, 5.2vw, 56px);
  line-height: 1.08;
  margin: 0 0 18px;
  max-width: 12em;
}

.abertura-sub {
  color: var(--text);
  font-size: clamp(17px, 2vw, 20px);
  margin: 0 0 28px;
  max-width: 30em;
}

.acoes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.miudo {
  color: var(--muted);
  font-size: 14px;
  margin: 18px 0 0;
  max-width: 34em;
}

/* ---------- o quarto (o mesmo da home do app, ver web/src/Quarto.tsx), e ele é o menu ---------- */

.quarto {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 313 / 314;
  justify-self: center;
  user-select: none;
  /* Um pixel do quarto em pixels de tela: o contorno e a respiração andam de um em um. */
  container-type: inline-size;
  --quarto-px: calc(100cqw / 313);
  --contorno: #ffd27a;
}

.quarto img {
  image-rendering: pixelated;
  -webkit-user-drag: none;
}

.quarto-cena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* O dia é a segunda pintura do mesmo quarto, por cima da noite. O abajur troca uma pela outra. */
.quarto-cena.dia,
.corte.dia {
  opacity: 0;
  transition: opacity 1.4s;
}

.quarto.de-dia .quarto-cena.dia,
.quarto.de-dia .corte.dia {
  opacity: 1;
}

.quarto.na-mira {
  cursor: pointer;
}

/* ---------- os objetos ----------
   Cada um é um link do tamanho da caixa dele. Aceso, mostra o contorno de UM pixel do quarto, por fora
   da forma, como nos jogos: a sombra de um recorte da própria pintura, cortado pela máscara do objeto. O
   filtro fica no elemento de fora, porque a máscara cortaria o que o próprio elemento desenha. */

.obj {
  position: absolute;
  z-index: 3;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.contorno {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.contorno,
.quarto-vivo.coelho.aceso .corpo,
.quarto-vivo.coelho:focus-visible .corpo {
  filter: drop-shadow(var(--quarto-px) 0 0 var(--contorno)) drop-shadow(calc(var(--quarto-px) * -1) 0 0 var(--contorno))
    drop-shadow(0 var(--quarto-px) 0 var(--contorno)) drop-shadow(0 calc(var(--quarto-px) * -1) 0 var(--contorno));
}

.corte {
  position: absolute;
  inset: 0;
  background-image: url('quarto/noite.png');
  background-repeat: no-repeat;
  image-rendering: pixelated;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.corte.dia {
  background-image: url('quarto/dia.png');
}

/* Aceso: sem JavaScript, pelo ponteiro sobre a caixa; com ele, pelo pixel sob o ponteiro (classe .aceso).
   Só UM objeto acende por vez: o que está debaixo do ponteiro (relato de 10/10/2026: acendiam dois). */
html:not(.com-js) .obj:hover .contorno,
.obj.aceso .contorno,
.obj:focus-visible .contorno {
  opacity: 1;
}

.obj.aceso,
.obj:focus-visible {
  z-index: 8;
}

/* O nome do objeto, num balão em cima dele. Vem do aria-label: o mesmo texto que o leitor de tela lê. */
.obj::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -6px);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 8px;
  background: #3a2d33;
  color: #efe3d3;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

html:not(.com-js) .obj:hover::after,
.obj.aceso::after,
.obj:focus-visible::after {
  opacity: 1;
}

/* Com JavaScript, os links deixam de receber o ponteiro: quem decide é o pixel sob ele, pela máscara.
   Eles continuam lá para o teclado. */
.com-js .obj,
.com-js .quarto-vivo {
  pointer-events: none;
}

/* Um brilho piscando em cada objeto, até a pessoa tocar no primeiro: é o "dá para clicar" sem escrever. */
.obj:not(.quarto-vivo)::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 30%;
  width: calc(var(--quarto-px) * 3);
  height: calc(var(--quarto-px) * 3);
  margin-left: calc(var(--quarto-px) * -1.5);
  background: var(--contorno);
  box-shadow: 0 0 calc(var(--quarto-px) * 4) var(--contorno);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: brilho 2.6s ease-in-out infinite;
}

.obj:nth-of-type(3n)::before {
  animation-delay: 0.9s;
}

.obj:nth-of-type(3n + 1)::before {
  animation-delay: 1.7s;
}

.quarto.explorado .obj::before {
  display: none;
}

@keyframes brilho {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
  50% {
    opacity: 0.85;
    transform: scale(1);
  }
}

/* As caixas de OBJETOS em Quarto.tsx, em porcentagem do quarto de 313 x 314. */
.obj-janela { left: 46.645%; top: 7.006%; width: 29.712%; height: 39.172%; }
.obj-janela .corte { background-size: 336.559% 255.285%; background-position: 66.364% 11.518%; mask-image: url("quarto/mascara-janela.png"); -webkit-mask-image: url("quarto/mascara-janela.png"); }
.obj-poster { left: 35.144%; top: 11.146%; width: 7.668%; height: 16.561%; }
.obj-poster .corte { background-size: 1304.167% 603.846%; background-position: 38.062% 13.359%; mask-image: url("quarto/mascara-poster.png"); -webkit-mask-image: url("quarto/mascara-poster.png"); }
.obj-computador { left: 67.412%; top: 36.624%; width: 18.211%; height: 23.885%; }
.obj-computador .corte { background-size: 549.123% 418.667%; background-position: 82.422% 48.117%; mask-image: url("quarto/mascara-computador.png"); -webkit-mask-image: url("quarto/mascara-computador.png"); }
.obj-vaso { left: 7.987%; top: 56.688%; width: 9.904%; height: 10.828%; }
.obj-vaso .corte { background-size: 1009.677% 923.529%; background-position: 8.865% 63.571%; mask-image: url("quarto/mascara-vaso.png"); -webkit-mask-image: url("quarto/mascara-vaso.png"); }
.obj-pufe { left: 52.077%; top: 67.516%; width: 17.572%; height: 14.013%; }
.obj-pufe .corte { background-size: 569.091% 713.636%; background-position: 63.178% 78.519%; mask-image: url("quarto/mascara-pufe.png"); -webkit-mask-image: url("quarto/mascara-pufe.png"); }
.obj-abajur { left: 14.696%; top: 40.446%; width: 7.029%; height: 10.828%; }
.obj-abajur .corte { background-size: 1422.727% 923.529%; background-position: 15.808% 45.357%; mask-image: url("quarto/mascara-abajur.png"); -webkit-mask-image: url("quarto/mascara-abajur.png"); }

/* ---------- o coelho (o Guarda-roupa) e o gato: respiram, e pulam quando cutucados ---------- */

.quarto-vivo {
  position: absolute;
  z-index: 6;
}

/* As caixas de VIVOS em Quarto.tsx. */
.quarto-vivo.coelho {
  left: 28.115%;
  top: 31.21%;
  width: 15.655%;
  height: 20.382%;
}

.quarto-vivo.gato {
  left: 43.131%;
  top: 39.809%;
  width: 8.626%;
  height: 5.414%;
}

.quarto-parte,
.quarto-vivo .corpo {
  position: absolute;
  inset: 0;
}

.quarto-parte img {
  display: block;
  width: 100%;
  height: 100%;
  transition: filter 1.4s;
}

/* O coelho e o gato foram recortados da pintura da noite: de dia, um pouco mais claros. */
.quarto.de-dia .quarto-parte img {
  filter: brightness(1.22) saturate(0.9);
}

/* Os mesmos cortes da home: o coelho respira pela cintura, o gato pelo meio. */
.quarto-vivo.coelho .quarto-parte.baixo {
  clip-path: inset(73.4375% 0 0 0);
}

.quarto-vivo.coelho .quarto-parte.cima {
  clip-path: inset(0 0 25% 0);
  animation: quarto-respirar 3.2s steps(1) infinite;
}

.quarto-vivo.gato .quarto-parte.baixo {
  clip-path: inset(52.9412% 0 0 0);
}

.quarto-vivo.gato .quarto-parte.cima {
  clip-path: inset(0 0 41.1765% 0);
  animation: quarto-respirar 4.4s steps(1) infinite;
}

@keyframes quarto-respirar {
  0%,
  55% {
    transform: translateY(0);
  }
  56%,
  100% {
    transform: translateY(var(--quarto-px));
  }
}

.quarto-vivo.cutucado {
  animation: quarto-pulo 0.45s steps(3) 1;
}

@keyframes quarto-pulo {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(var(--quarto-px) * -4));
  }
}

/* A seção para onde o objeto levou pisca de leve: o olho acha onde chegou. */
.chegou.chegou {
  /* Dobrado de propósito: precisa vencer a animação de rolagem dos cartões (ver "movimento ao rolar"). */
  animation: chegou 1.4s ease-out 1;
  animation-timeline: auto;
  border-radius: 14px;
}

@keyframes chegou {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 184, 61, 0.55);
  }
  100% {
    box-shadow: 0 0 0 18px rgba(245, 184, 61, 0);
  }
}

/* ---------- seções ---------- */

section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 16px;
}

section h2 {
  color: var(--strong);
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.15;
  margin: 0 0 12px;
}

.sobretitulo {
  color: var(--marca);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

/* ---------- vitrine: texto de um lado, o app do outro ---------- */

.vitrine {
  display: grid;
  gap: 96px;
}

.vitrine-linha {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 48px;
}

.vitrine-linha.invertida .vitrine-texto {
  order: 2;
}

.vitrine-texto p {
  margin: 0 0 14px;
  max-width: 32em;
}

.lista {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.lista li {
  position: relative;
  padding-left: 26px;
  color: var(--text);
  font-size: 15px;
}

.lista li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--marca);
  border-bottom: 2px solid var(--marca);
  transform: rotate(-45deg);
}

.captura {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--borda);
  background: var(--bg-fundo);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 6px rgba(245, 184, 61, 0.05);
}

.captura picture,
.captura img {
  display: block;
  width: 100%;
  height: auto;
}

/* A cena do sem anúncios (#dados): pixel art solta, sem moldura de captura — ela não é uma tela do app. Cresce só
   em múltiplos do pixel dela (192 × 141, exportada a 3×) e sem suavizar, senão o pixel vira borrão. */
.sem-anuncio {
  margin: 0;
  justify-self: center;
  width: min(100%, 480px);
}

.sem-anuncio img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

/* ---------- idiomas ---------- */

.idiomas {
  text-align: center;
}

.idiomas > p:not(.saudacoes) {
  max-width: 38em;
  margin: 0 auto;
}

.saudacoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  max-width: 820px;
  margin: 0 auto 32px;
  font-size: clamp(18px, 2.6vw, 26px);
  color: var(--muted);
}

.saudacoes span:nth-child(3n + 1) {
  color: var(--strong);
}

.saudacoes span:nth-child(5n + 2) {
  color: var(--marca);
}

/* ---------- movimento ao rolar ----------
   Sem JavaScript: a animação é amarrada à rolagem pelo próprio navegador. Onde isso não existe, a
   seção simplesmente aparece pronta — nunca escondida esperando uma animação que não vem. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vitrine-linha,
    .idiomas {
      animation: subir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quarto-vivo .quarto-parte.cima {
    animation: none;
  }
}

/* ---------- celular ---------- */

@media (max-width: 860px) {
  .abertura {
    padding-top: 36px;
  }

  .abertura-dentro,
  .vitrine-linha {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .quarto {
    max-width: 420px;
  }

  .vitrine {
    gap: 64px;
  }

  .vitrine-linha.invertida .vitrine-texto {
    order: 0;
  }

}

/* ---------- pé ---------- */

footer {
  border-top: 1px solid var(--borda);
  background: var(--bg-fundo);
  padding: 32px 16px;
  color: var(--muted);
  font-size: 14px;
}

.pe-dentro {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

footer nav {
  margin-left: auto;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* Os títulos na letra da marca. */
h1,
h2,
h3,
.marca {
  font-family: 'Syden Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* ---------- página de endereço que não existe (404.html) ---------- */

.nao-encontrada {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px;
  box-sizing: border-box;
  text-align: center;
}

.nao-encontrada h1 {
  margin: 0;
  color: var(--strong);
}

.nao-encontrada p {
  margin: 0 0 12px;
  max-width: 34em;
  color: var(--muted);
}

.nao-encontrada .nao-encontrada-codigo {
  margin: 0;
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* ---------- a escolha de idioma, no pé (posta pela montagem: site-traduzido.mjs) ---------- */

.idioma-do-site {
  position: relative;
  flex-basis: 100%;
}

.idioma-do-site summary {
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--text);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 6px 12px;
  list-style: none;
}

.idioma-do-site summary::-webkit-details-marker {
  display: none;
}

.idioma-do-site summary:hover {
  background: var(--bg-cartao);
}

.idioma-do-site ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 16px;
}

.idioma-do-site a {
  color: var(--muted);
  text-decoration: none;
}

.idioma-do-site a:hover,
.idioma-do-site a[aria-current='page'] {
  color: var(--strong);
}

.idioma-do-site a[aria-current='page'] {
  font-weight: 700;
}

/* ---------- dzongkha: a letra tibetana do Windows é miúda ----------
   A "Microsoft Himalaya" desenha as letras com uns 60% do tamanho das outras escritas no mesmo corpo:
   ao lado do latim, o título em dzongkha parecia nota de rodapé (medido em 10/10/2026). O app busca a
   Noto no Google para essa escrita; o site não fala com terceiro (CLAUDE.md, "Fonte de terceiro"). A
   saída é a mesma fonte do sistema, ampliada, e só para as letras tibetanas (unicode-range): o "Syden" e
   o "Windows" no meio da frase continuam do tamanho certo. Onde a Himalaya não existe, o local() falha
   e o navegador usa a tibetana que tiver, sem ampliar. */
@font-face {
  font-family: 'Syden Tibetana';
  src: local('Microsoft Himalaya');
  size-adjust: 155%;
  unicode-range: U+0F00-0FFF;
}

html:lang(dz) body,
html:lang(dz) h1,
html:lang(dz) h2,
html:lang(dz) h3,
html:lang(dz) .marca {
  font-family: 'Syden Tibetana', 'Syden Instrument Sans', 'Segoe UI', system-ui, sans-serif;
}

/* A tibetana empilha sinais acima e abaixo da linha: com o espaçamento do latim, as linhas do título se
   encostavam. */
html:lang(dz) body {
  line-height: 1.95;
}

html:lang(dz) h1,
html:lang(dz) h2,
html:lang(dz) h3 {
  line-height: 1.45;
}

/* A luminária acesa é amarela: o contorno claro sumia na luz dela, e o escuro destoava dos outros
   (relato de 10/10/2026). Ela leva o mesmo contorno claro, com um fio escuro por dentro que o separa da luz. */
.obj-abajur .contorno {
  filter: drop-shadow(var(--quarto-px) 0 0 #241a1e) drop-shadow(calc(var(--quarto-px) * -1) 0 0 #241a1e)
    drop-shadow(0 var(--quarto-px) 0 #241a1e) drop-shadow(0 calc(var(--quarto-px) * -1) 0 #241a1e)
    drop-shadow(var(--quarto-px) 0 0 var(--contorno)) drop-shadow(calc(var(--quarto-px) * -1) 0 0 var(--contorno))
    drop-shadow(0 var(--quarto-px) 0 var(--contorno)) drop-shadow(0 calc(var(--quarto-px) * -1) 0 var(--contorno));
}

.idiomas {
  padding-bottom: 96px;
}

/* ---------- o lobby do fim da página (ver o comentário em index.html) ----------
   O salão e os coelhos medem em pixels do salão (384 × 192), em porcentagem: o lobby cresce até 960 px e
   encolhe no celular sem perder a proporção. Cada coelho é uma faixa de 18 quadros, tocada quadro a quadro
   (steps com jump-none: o número é de POSIÇÕES), e cada um tem a sua duração e o seu atraso. */
.lobby {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 384 / 192;
  margin: 0 auto 28px;
  background: url('lobby/sala.png') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  /* Um pixel do salão em pixels de tela: a respiração da gente anda de um em um. */
  container-type: inline-size;
  --px-do-salao: calc(100cqw / 384);
}

/* As peças da cena (e2e/pixel-art/lobby/montar.mjs): já na grade do salão, então o navegador só as amplia junto
   com ele. A gente respira um pixel; as faixas (a turma, as telas, a janela) tocam quadro a quadro, com steps
   jump-none: o número é de POSIÇÕES. Posição, tamanho, profundidade e tempo de cada uma estão no trecho gerado. */
.lobby-peca {
  position: absolute;
  background: no-repeat 0 0 / 100% 100%;
  image-rendering: pixelated;
}

.lobby-gente {
  animation: lobby-respira var(--duracao, 3.4s) steps(1) infinite;
  animation-delay: var(--atraso, 0s);
}

.lobby-faixa {
  animation: lobby-faixa var(--duracao, 3.6s) steps(var(--quadros), jump-none) infinite;
  animation-delay: var(--atraso, 0s);
}

@keyframes lobby-respira {
  0%,
  55% {
    transform: none;
  }
  56%,
  100% {
    transform: translateY(var(--px-do-salao));
  }
}

@keyframes lobby-faixa {
  to {
    background-position: 100% 0;
  }
}

/* O principal, o coelho do quarto: a luz âmbar no chão, embaixo dele. */
.lobby-faixa.principal::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -5%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 210, 122, 0.45), rgba(255, 210, 122, 0));
  z-index: -1;
}

/* lobby:cena — gerado por e2e/pixel-art/lobby/montar.mjs, não editar à mão */
.lobby-peca.sofa-1 { background-image: url('lobby/sofa-1.png'); left: 22.9167%; top: 42.1875%; width: 10.4167%; height: 20.8333%; z-index: 121; --duracao: 5.6s; --atraso: -1.1s; background-size: 1600% 100%; --quadros: 16; }
.lobby-peca.sofa-2 { background-image: url('lobby/sofa-2.png'); left: 28.9063%; top: 42.1875%; width: 10.4167%; height: 20.8333%; z-index: 121; --duracao: 6.4s; --atraso: -3.3s; background-size: 1600% 100%; --quadros: 16; }
.lobby-peca.tv-1 { background-image: url('lobby/tv-1.png'); left: 39.5833%; top: 56.7708%; width: 7.0313%; height: 14.0625%; z-index: 135; --duracao: 2.9s; --atraso: -2s; }
.lobby-peca.tv-2 { background-image: url('lobby/tv-2.png'); left: 53.3854%; top: 57.8125%; width: 6.7708%; height: 13.5417%; z-index: 136; --duracao: 3.3s; --atraso: -0.7s; }
.lobby-peca.fliperama { background-image: url('lobby/fliperama.png'); left: 66.6667%; top: 40.625%; width: 11.7188%; height: 34.8958%; z-index: 140; --duracao: 2.6s; --atraso: -1.5s; }
.lobby-peca.balcao { background-image: url('lobby/balcao.png'); left: 86.4583%; top: 36.9792%; width: 10.1563%; height: 30.2083%; z-index: 118; --duracao: 3.5s; --atraso: -2.4s; }
.lobby-peca.sueter { background-image: url('lobby/sueter.png'); left: 54.6875%; top: 55.7292%; width: 9.375%; height: 28.125%; z-index: 157; --duracao: 3.8s; --atraso: -2.8s; }
.lobby-peca.regata { background-image: url('lobby/regata.png'); left: 61.4583%; top: 56.25%; width: 9.1146%; height: 27.6042%; z-index: 158; --duracao: 4s; --atraso: -0.9s; }
.lobby-peca.tranca-roxa { background-image: url('lobby/tranca-roxa.png'); left: 10.9375%; top: 54.6875%; width: 9.6354%; height: 28.6458%; z-index: 150; --duracao: 3.2s; --atraso: -1.7s; }
.lobby-peca.laco-vermelho { background-image: url('lobby/laco-vermelho.png'); left: 17.4479%; top: 55.2083%; width: 9.375%; height: 28.125%; z-index: 150; --duracao: 3.6s; --atraso: -0.5s; }
.lobby-peca.turma-1 { background-image: url('lobby/turma-1.png'); left: 4.4271%; top: 62.5%; width: 10.4167%; height: 31.25%; z-index: 177; --duracao: 3.9s; --atraso: -0.4s; background-size: 1800% 100%; --quadros: 18; }
.lobby-peca.turma-4 { background-image: url('lobby/turma-4.png'); left: 86.1979%; top: 62.5%; width: 10.4167%; height: 31.25%; z-index: 177; --duracao: 4.4s; --atraso: -2.6s; background-size: 1800% 100%; --quadros: 18; }
.lobby-peca.turma-2 { background-image: url('lobby/turma-2.png'); left: 26.3021%; top: 65.1042%; width: 11.1979%; height: 33.8542%; z-index: 186; --duracao: 3.5s; --atraso: -1.3s; background-size: 1800% 100%; --quadros: 18; }
.lobby-peca.turma-3 { background-image: url('lobby/turma-3.png'); left: 68.4896%; top: 65.1042%; width: 11.1979%; height: 33.8542%; z-index: 186; --duracao: 4.1s; --atraso: -3.1s; background-size: 1800% 100%; --quadros: 18; }
.lobby-peca.coelho { background-image: url('lobby/coelho.png'); left: 38.5417%; top: 57.2917%; width: 21.3542%; height: 42.7083%; z-index: 190; --duracao: 3.6s; --atraso: 0s; background-size: 1800% 100%; --quadros: 18; }
.lobby-peca.frente-balcao { background-image: url('lobby/frente-balcao.png'); left: 87.5%; top: 46.875%; width: 12.5%; height: 25%; z-index: 119; }
.lobby-peca.tela-tv { background-image: url('lobby/tela-tv.png'); left: 41.9271%; top: 27.6042%; width: 16.6667%; height: 20.8333%; z-index: 0; background-size: 900% 100%; --quadros: 9; --duracao: 2.7s; }
.lobby-peca.tela-fliperama { background-image: url('lobby/tela-fliperama.png'); left: 67.1875%; top: 30.2083%; width: 10.4167%; height: 20.8333%; z-index: 0; background-size: 900% 100%; --quadros: 9; --duracao: 1.8s; }
.lobby-peca.janela { background-image: url('lobby/janela.png'); left: 6.25%; top: 15.625%; width: 11.4583%; height: 34.375%; z-index: 0; background-size: 1600% 100%; --quadros: 16; --duracao: 6.4s; }
/* lobby:fim */

@media (prefers-reduced-motion: reduce) {
  .lobby-gente,
  .lobby-faixa {
    animation: none;
  }
}

/* A customização mostrada vestida: a vitrine de cartões é larga, então a linha vira texto em cima e
   cartões embaixo, na largura toda. Sem moldura de janela: os cartões já têm a própria. */
.vitrine-larga {
  grid-template-columns: minmax(0, 1fr);
}

.vitrine-larga .vitrine-texto p {
  max-width: 46em;
}

.captura-vitrine {
  border: 0;
  box-shadow: none;
  background: none;
  border-radius: 18px;
}