:root {
  /* Cores do logo: preto, branco e o bege da placa da fachada. */
  --fundo: #0e0e10;
  --superficie: #17171a;
  --borda: #2c2c31;
  --texto: #f1efe9;
  --texto-suave: #a7a39a;
  --bege: #c9b48a;
  --dourado: var(--bege);
  --verde: #5fbf86;
  --verde-escuro: #1e4a31;
  --vermelho: #e0625e;
  --vermelho-escuro: #4f1f1e;
  --parede: #24485a;
  --parede-escura: #1a3644;
  --fonte-jogo: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-fita: var(--fonte-jogo);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.55 var(--fonte-jogo);
}

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

/* ---------- Rodapé e link de volta ---------- */

.rodape { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--borda); text-align: center; }
.rodape a {
  color: var(--texto-suave);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
}
.voltar { margin: 0 0 16px; }
.voltar a { color: var(--texto-suave); }
.aviso-3d { margin: 0 0 16px; padding: 10px 12px; border-radius: 6px; background: var(--superficie); color: var(--texto-suave); font-size: .85rem; }

.site {
  max-width: 680px;
  margin: 0 auto;
  padding: 36px 20px 48px;
}

/* Título de seção: letras espaçadas em bege, com um fio até a margem. */
h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 14px;
  color: var(--bege);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
h2::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

/* ---------- Topo ---------- */

.topo {
  display: grid;
  grid-template-columns: 18px 1fr 18px;
  gap: 12px;
  align-items: stretch;
  text-align: center;
}

/* Logo da barbearia em placa retangular (desenho da placa da fachada). */
.logo-topo { margin: 0 auto; width: clamp(200px, 62vw, 300px); }
.logo-topo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

.titulo {
  margin: 0;
  color: var(--texto);
  font-size: clamp(20px, 6vw, 26px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.titulo.pequeno { text-align: center; }

.info {
  margin: 12px 0 0;
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Poste de barbearia girando */
.poste {
  border-radius: 9px;
  border: 2px solid #ddd;
  background: repeating-linear-gradient(45deg, #d33 0 8px, #fff 8px 16px, #2a5bd7 16px 24px, #fff 24px 32px);
  background-size: 100% 45px;
  animation: girar 1.2s linear infinite;
}
@keyframes girar { to { background-position: 0 45px; } }
.fechada .poste { animation-play-state: paused; filter: grayscale(1) brightness(.6); }

/* Status: discreto, com um ponto verde (aberta) ou vermelho (fechada). */
.placa {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 18px auto;
  padding: 7px 18px;
  border: 1px solid rgba(241, 239, 233, .75);
  border-radius: 999px;
  background: rgba(14, 14, 16, .72);
  color: var(--texto);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.placa::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 8px var(--verde);
}
.fechada .placa::before { background: var(--vermelho); box-shadow: 0 0 8px var(--vermelho); }

/* ---------- Cena ---------- */

.cena {
  position: relative;
  overflow: hidden;
  border: 4px solid #000;
  border-radius: 12px;
  box-shadow: 0 0 0 3px var(--borda), 0 12px 30px rgba(0, 0, 0, .5);
}

.parede {
  padding: 16px 10px 0;
  background:
    linear-gradient(var(--parede), var(--parede-escura));
}

.estacoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.estacao { display: flex; flex-direction: column; align-items: center; }

.espelho {
  width: 78%;
  aspect-ratio: 3 / 4;
  max-height: 120px;
  border: 4px solid #c9a227;
  border-radius: 40px 40px 6px 6px;
  background: linear-gradient(135deg, #b9d6e3 0%, #e9f4f8 45%, #a8c7d5 55%, #cfe3ec 100%);
  opacity: .85;
}

.posto {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 100%;
  margin-top: -18px;
}

.personagem {
  width: 42%;
  max-width: 64px;
  opacity: 0;
  transform: translateY(14px) scale(.85);
  transition: opacity .35s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.estacao.on .personagem { opacity: 1; transform: none; }

.cadeira { width: 50%; max-width: 72px; }

.personagem svg, .cadeira svg, .cliente svg { display: block; width: 100%; height: auto; }

.nome-estacao {
  margin: 4px 0 8px;
  font: 600 13px/1.2 var(--fonte-jogo);
  color: var(--texto-suave);
  text-align: center;
}
.estacao.on .nome-estacao { color: var(--dourado); }

.chao {
  padding: 14px 10px 12px;
  background-color: #e8e2d6;
  background-image: conic-gradient(#1b1b1b 25%, transparent 0 50%, #1b1b1b 0 75%, transparent 0);
  background-size: 32px 32px;
}

.espera {
  position: relative;
  padding: 0 8px 4px;
  border-radius: 10px;
  background: rgba(20, 17, 28, .78);
}

.clientes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  min-height: 64px;
  padding-top: 8px;
}

.cliente {
  width: 36px;
  animation: sentar .3s ease both;
}
@keyframes sentar { from { opacity: 0; transform: translateY(8px); } }

.mais {
  align-self: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--dourado);
  color: #000;
  font: 700 14px/1 var(--fonte-jogo);
}

.banco {
  height: 10px;
  margin-top: -6px;
  border-radius: 4px;
  background: linear-gradient(#8b5a2b, #5e3b1a);
  box-shadow: 0 4px 0 #3b2410;
}

.espera-rotulo {
  margin: 8px 0 0;
  font: 600 12px/1 var(--fonte-jogo);
  color: var(--texto-suave);
  text-transform: uppercase;
}

/* Porta fechada cobre a cena quando nenhum barbeiro está on. */
.porta-fechada {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .55) 0 14px, rgba(40, 40, 48, .92) 14px 18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.fechada .porta-fechada { opacity: 1; visibility: visible; }
.porta-fechada strong {
  padding: 12px 16px;
  border: 3px solid var(--vermelho);
  border-radius: 8px;
  background: #000;
  color: var(--vermelho);
  font: 700 22px/1 var(--fonte-jogo);
  text-transform: uppercase;
}
.porta-fechada span { color: var(--texto); font-weight: 600; text-shadow: 0 2px 4px #000; }

/* ---------- Resumo ---------- */

/* Barbeiros: lista simples, nome à esquerda e situação à direita. */
.lista-barbeiros { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borda); }
.lista-barbeiros li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--borda);
}
.lista-barbeiros .nome { font-size: 16px; font-weight: 600; }
.lista-barbeiros li:not(.on) .nome { color: var(--texto-suave); }
.selo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #55555c; }
.lista-barbeiros li.on .selo { color: var(--texto); }
.lista-barbeiros li.on .selo::before { background: var(--verde); }

.esperando {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--bege);
  border-radius: 4px;
  background: var(--superficie);
  font-size: 18px;
  font-weight: 600;
}

.aviso-demo {
  margin: 32px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--bege);
  border-radius: 4px;
  color: var(--texto-suave);
  font-size: .85rem;
}

/* ---------- Painel de teste ---------- */

.explicacao { color: var(--texto-suave); text-align: center; }
.painel p:has(.botao-link) { text-align: center; }

.botao-link {
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid var(--dourado);
  border-radius: 999px;
  background: transparent;
  color: var(--dourado);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.bancadas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bancada {
  padding: 14px 6px;
  border: 2px solid var(--borda);
  border-radius: 12px;
  background: linear-gradient(#5e3b1a, #3b2410);
  text-align: center;
}
.bancada .nome { margin: 10px 0 2px; font-size: .85rem; font-weight: 600; }
.bancada .estado { margin: 0; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.bancada.on .estado { color: var(--verde); }

/* Botão arcade com anel de LED, igual ao que vai na bancada. */
.arcade {
  position: relative;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: #1a1a1a;
  box-shadow: 0 6px 0 #000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.arcade:active { transform: translateY(4px); box-shadow: 0 2px 0 #000; }
.arcade:focus-visible { outline: 3px solid var(--dourado); outline-offset: 4px; }
.arcade .led {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b6f78, #33363d);
  border: 3px solid #555a63;
  transition: background .2s, box-shadow .2s, border-color .2s;
}
.bancada.on .led {
  background: radial-gradient(circle at 35% 30%, #c9ffd9, var(--verde));
  border-color: #a8ffc6;
  box-shadow: 0 0 18px var(--verde), 0 0 36px rgba(61, 220, 132, .6);
}

.contador { display: flex; align-items: center; justify-content: center; gap: 14px; }
.botao-contador {
  width: 60px;
  height: 60px;
  border: 2px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto);
  font: 28px/1 system-ui, sans-serif;
  cursor: pointer;
}
.numero { min-width: 2ch; font: 700 30px/1 var(--fonte-jogo); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .poste { animation: none; }
  .personagem, .porta-fechada { transition: none; }
  .cliente { animation: none; }
}

/* ---------- Barbearia em 3D ---------- */

/* A seção é alta para dar espaço à rolagem; o palco fica preso na tela. */
.experiencia { position: relative; height: 500vh; }
.experiencia.fechada { height: 170vh; }

.palco {
  position: sticky;
  top: 0;
  /* dvh acompanha a barra do navegador do celular sumindo ao rolar. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--fundo);
}

/* A cena aparece de uma vez, com tudo carregado (sem a tela azul vazia e
   sem bonecos provisórios). */
#canvas3d { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; }
.pronto-3d #canvas3d { opacity: 1; }

.sobre-cena {
  position: absolute;
  inset: 0 0 auto;
  padding: 24px 16px 48px;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(rgba(14, 14, 16, .78), rgba(14, 14, 16, .4) 70%, transparent);
}
.sobre-cena .info { color: var(--texto); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.sobre-cena .placa { margin: 14px auto 0; }

/* Legenda em cima da cena: faixa escura e discreta. */
.legenda {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 10px 18px;
  border: 1px solid rgba(241, 239, 233, .3);
  border-radius: 6px;
  background: rgba(14, 14, 16, .82);
  color: var(--texto);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
}
.fechada .legenda { border-color: rgba(224, 98, 94, .6); }
.legenda:empty { display: none; }

.carregando {
  position: absolute;
  inset: auto 0 38%;
  margin: 0;
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
}

.versao-2d { display: none; }
.pronto-3d .carregando { display: none; }
.sem-3d .experiencia { display: none; }
.sem-3d .versao-2d { display: block; }

/* ---------- Painel do dev: entrada e horários ---------- */

.explicacao.esquerda { text-align: left; }
.entrada p { text-align: center; }

.botao-cheio {
  display: inline-block;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--dourado);
  color: #14111c;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.link-simples {
  padding: 0;
  border: 0;
  background: none;
  color: var(--dourado);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.formulario {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 2px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie);
}
.formulario label { display: grid; gap: 4px; font-weight: 600; }
.formulario input[type="text"],
.formulario input[type="time"],
.formulario input[type="date"] {
  min-height: 44px;
  padding: 6px 10px;
  border: 2px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--texto);
  font: inherit;
}
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcoes { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.opcoes label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.opcoes input { width: 20px; height: 20px; accent-color: var(--dourado); }
.retorno { margin: 0; min-height: 1.5em; color: var(--verde); font-weight: 600; }
.retorno.erro { color: var(--vermelho); }

.lista-especiais { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.lista-especiais li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 2px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie);
}
.lista-especiais li.vazio { color: var(--texto-suave); }

.campos-nomes { display: grid; gap: 10px; }