* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  font-family: 'Geist Mono', ui-monospace, monospace;
  color: #333;
}

#cena {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- carregando / aviso ---------- */
#carregando {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}
/* enquanto carrega, o 3D fica "pixelado" (sem suavizar os pixels grandes) */
#cena.pixelado { image-rendering: pixelated; }

#aviso {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  background: #fff4c2;
  border: 1px solid #f0d97a;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  z-index: 5;
}

/* ---------- cursor perolado + glitter (ver cursor.js) ---------- */
.cursor-proprio, .cursor-proprio * { cursor: none !important; }
#cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  will-change: transform;
}
#cursor.visivel { opacity: 1; }
#cursor .cursor-seta,
#cursor .cursor-bolinha {
  position: absolute;
  transition: transform .18s cubic-bezier(.34, 1.6, .64, 1), opacity .15s;
  filter: drop-shadow(0 1px 1.5px rgba(40, 45, 60, .22)) drop-shadow(0 0 3px rgba(255, 255, 255, .9));
}
/* a ponta da seta fica exatamente onde o mouse está */
#cursor .cursor-seta { width: 28px; height: 28px; left: -3px; top: -3px; transform-origin: 3px 3px; }
#cursor .cursor-bolinha {
  width: 22px;
  height: 22px;
  left: -11px;
  top: -11px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fff 0 22%, transparent 42%),
    radial-gradient(circle at 50% 55%, #f6f7f9 0%, #e3e6ea 62%, #c9ced6 100%);
  box-shadow: inset 0 -2px 3px rgba(150, 158, 170, .35);
  opacity: 0;
  transform: scale(.3);
}
/* em cima de algo clicável: a seta vira bolinha */
#cursor.clicavel .cursor-seta { opacity: 0; transform: scale(.4); }
#cursor.clicavel .cursor-bolinha { opacity: 1; transform: scale(1); }
#cursor.apertado .cursor-seta { transform: scale(.85); }
#cursor.apertado .cursor-bolinha { transform: scale(.8); }
#glitter {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  pointer-events: none;
}

/* ---------- topo ---------- */
.topo {
  position: fixed;
  top: 18px;
  left: 24px;
  z-index: 5; /* o logo fica por cima da galeria (clicando nele volta pra home) */
}

/* ---------- logo modular ---------- */
/* Tamanho do logo: mude --escala (1 = 190px de largura) */
.logo {
  --escala: 1;
  position: relative;
  display: block;
  width: calc(190px * var(--escala));
  height: calc(150px * var(--escala));
  -webkit-tap-highlight-color: transparent;
}
.logo-cabeca,
.logo-letras {
  position: absolute;
  transition: left .55s cubic-bezier(.34, 1.4, .64, 1), top .55s cubic-bezier(.34, 1.4, .64, 1);
}
.logo-letras svg { display: block; width: 100%; height: auto; overflow: visible; }

/* cabeça em cima, no meio; as letras (em linha, embaixo) ficam no logo.js */
.logo-cabeca {
  width: calc(80px * var(--escala));
  height: calc(87.9px * var(--escala));
  left: calc(55px * var(--escala));
  top: calc(2px * var(--escala));
}
.logo-cabeca > * { position: absolute; inset: 0; width: 100%; height: 100%; }
/* as cabeças variáveis são "recortadas" no formato da cabeça */
.cabeca-variante {
  -webkit-mask: url(logo/cabeca-contorno.svg) center / 100% 100% no-repeat;
  mask: url(logo/cabeca-contorno.svg) center / 100% 100% no-repeat;
  overflow: hidden;
  display: none;
}
.logo-cabeca.variando .cabeca-base { display: none; }
.logo-cabeca.variando .cabeca-variante { display: block; }
.cabeca-rosto { overflow: visible; pointer-events: none; }
/* cabeça cheia de símbolos */
.cabeca-variante .simbolos {
  position: absolute;
  inset: -10%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  place-items: center;
  font-family: 'Noto Sans Symbols', 'Noto Sans Symbols 2', sans-serif;
  font-size: calc(13px * var(--escala));
  line-height: 1;
  color: #231f20;
}

/* cada letra anima sozinha, uma depois da outra */
.logo .letra {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(.2) rotate(-30deg) translateY(10px);
  transition: transform .45s cubic-bezier(.34, 1.6, .64, 1), opacity .25s ease;
  transition-delay: calc(var(--i) * 45ms);
}
.logo .logo-letras.ativa .letra { opacity: 1; transform: none; }

/* enquanto os SVGs carregam, não mostra nada pela metade */
.logo:not(.pronto) .logo-letras { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .logo .letra, .logo-cabeca, .logo-letras { transition-duration: .01s; transition-delay: 0s; }
}

/* ---------- botões laterais (estilo bolha) ---------- */
.botoes-laterais {
  position: fixed;
  left: 24px;
  top: max(50%, 310px); /* em telas baixas, desce pra não encostar no logo */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bola {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 20px;
  color: #555;
  background:
    radial-gradient(circle at 30% 28%, #fff 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, #ffffff 0%, #eef1f5 70%, #d8dde4 100%);
  /* contorno sutil estilo menu do Wii: aro branco + linha cinza clarinha (pra não sumir no fundo branco) */
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #c9cfd8, 0 6px 14px rgba(0,0,0,.08), inset 0 -3px 6px rgba(0,0,0,.06);
  transition: transform .2s;
}
.bola:hover { transform: scale(1.12); }

/* ---------- categorias (embaixo, na home) ---------- */
.categorias {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 32px));
  display: flex;
  justify-content: center;
  gap: 16px;
  transition: opacity .45s, transform .7s cubic-bezier(.5, 0, .2, 1);
}
.categorias .card-categoria { flex: 1 1 0; min-width: 0; max-width: 220px; }
.card-categoria h3 { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.card-categoria .seta-dir {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: #6b7280;
  background: radial-gradient(circle at 35% 30%, #fff 0 25%, #e8ebf0 70%, #d3d8df);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  transition: transform .3s;
}
.card-categoria.vai-esquerda { order: 1; }
.card-categoria.vai-cima { order: 2; }
.card-categoria.vai-direita { order: 3; }
.card-categoria.vai-esquerda:hover .seta-dir { transform: translateX(-3px); }
.card-categoria.vai-direita:hover .seta-dir { transform: translateX(3px); }
.card-categoria.vai-cima:hover .seta-dir { transform: translateY(-3px); }
.card-categoria .thumb { height: 84px; }

/* quando a câmera vira, a interface da home "fica pra trás" junto com a cena */
body.em-galeria .categorias,
body.em-galeria .botoes-laterais { opacity: 0; pointer-events: none; }
body.em-galeria[data-direcao="direita"] .categorias { transform: translateX(-120%); }
body.em-galeria[data-direcao="esquerda"] .categorias { transform: translateX(20%); }
body.em-galeria[data-direcao="cima"] .categorias { transform: translate(-50%, 140%); }

/* abrindo o site direto numa galeria (refresh / link com #): tudo já no lugar, sem animar */
body.sem-transicao *, body.sem-transicao *::before, body.sem-transicao *::after { transition: none !important; }

/* ---------- galeria: a "parede" de cada categoria ---------- */
.galeria {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 178px 24px 24px;
  pointer-events: none;
  perspective: 1400px;
}
.galeria .painel {
  position: relative;
  width: min(1040px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 30px;
  /* vidro perolado, estilo menu de console Y2K */
  background:
    radial-gradient(ellipse 70% 30% at 20% 0%, rgba(255,255,255,.95), transparent 70%),
    linear-gradient(170deg, rgba(255,255,255,.82), rgba(236,240,246,.72));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    0 30px 60px rgba(60, 70, 90, .14),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -20px 40px color-mix(in srgb, var(--c1) 14%, transparent);
  opacity: 0;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .5s;
}
/* quem rola é o miolo: assim a borda brilhante fica parada e não vira uma linha no meio do conteúdo */
.painel-rolagem {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  padding: 22px 26px 30px;
}
.galeria .painel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--c1), #fff 35%, #94d3ec 70%, #fff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* de onde a parede vem (acompanha a câmera virando) */
.galeria.vem-direita .painel { transform: translateX(55vw) rotateY(-38deg); }
.galeria.vem-esquerda .painel { transform: translateX(-55vw) rotateY(38deg); }
.galeria.vem-cima .painel { transform: translateY(-65vh) rotateX(-32deg); }
.galeria.aberta { pointer-events: auto; }
.galeria.aberta .painel { transform: none; opacity: 1; }

.painel-topo { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.painel-titulo h2 { margin: 0; font-size: clamp(26px, 4vw, 40px); font-weight: 700; letter-spacing: -.05em; }
.painel-titulo p { margin: 0; color: #9aa0a8; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }

/* botões em pílula brilhante */
.pilula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  font: 700 13px 'Geist Mono', monospace;
  color: #4b5563;
  text-decoration: none;
  background:
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,0) 55%),
    linear-gradient(#f4f6f9, #dfe4ea);
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #cdd3db, 0 3px 8px rgba(60,70,90,.12), inset 0 -2px 3px rgba(150,158,170,.25);
  transition: transform .25s cubic-bezier(.34, 1.6, .64, 1);
  white-space: nowrap;
}
.pilula:hover { transform: scale(1.06); }
/* botão de voltar pra home: só a casinha, redondo */
.pilula.casa { width: 42px; height: 42px; padding: 0; justify-content: center; flex: none; }
.pilula.ver-projeto {
  color: #fff;
  background:
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(var(--c1), color-mix(in srgb, var(--c1) 70%, #000));
}

/* os quadradinhos dos projetos */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px 18px;
  padding: 8px 4px 30px;
}
.grade[hidden] { display: none; }
/* entram um depois do outro (só uma vez; o hover continua "inflando" normal) */
.quadradinho {
  flex: none;
  opacity: 0;
  transform: translateY(14px) scale(.9);
  transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s;
  transition-delay: calc(var(--i) * 60ms + .3s);
}
.quadradinho.visivel { opacity: 1; transform: none; }
.quadradinho.visivel:hover { transition-delay: 0s; transform: translateY(-6px) scale(1.05); }
.quadradinho .thumb { height: auto; aspect-ratio: 1; }
/* reflexo embaixo, como no menu do PSP */
.quadradinho .thumb { -webkit-box-reflect: below 6px linear-gradient(transparent 72%, rgba(255,255,255,.28)); }
@keyframes aparece { from { opacity: 0; transform: translateY(14px) scale(.9); } }
.vazio { color: #9aa0a8; }

/* projeto em destaque (os "grandes"): card duplo, com a miniatura mais larga */
.quadradinho.destaque { grid-column: span 2; }
.quadradinho.destaque .thumb { aspect-ratio: 2 / 1; } /* 2 colunas de largura → mesma altura dos quadrados */

/* ---------- MURAL da Ilustração: colunas, cada desenho no seu formato ---------- */
.grade.mural { display: block; columns: 4 200px; column-gap: 18px; }
.grade.mural[hidden] { display: none; }
.grade.mural > .card { width: 100%; margin: 0 0 20px; break-inside: avoid; }
.grade.mural .thumb { -webkit-box-reflect: none; }
.quadradinho.desenho { border: 0; font: inherit; text-align: left; cursor: pointer; }
.quadradinho.desenho .thumb { height: auto; aspect-ratio: 1; }
.quadradinho.desenho .thumb img { position: static; display: block; height: auto; }
.quadradinho.desenho .thumb:has(img) { aspect-ratio: auto !important; }
.desenho-exemplo {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 15px 'Geist Mono', monospace; letter-spacing: -.03em; color: rgba(255,255,255,.95);
}
/* os projetos que entram no mural (ex.: Emoji Lab) ganham uma etiqueta "projeto" */
.quadradinho.no-mural::after {
  content: 'projeto ›';
  position: absolute; top: 16px; left: 16px;
  padding: 3px 9px; border-radius: 999px;
  font: 700 10px 'Geist Mono', monospace; letter-spacing: .06em; color: #1f2937;
  background: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1px var(--c1, #f7a8cf);
}

/* desenho aberto em tamanho grande */
.mural-zoom {
  position: fixed; inset: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 60px 24px 30px;
  background: rgba(246, 247, 250, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: zoom-entra .25s ease-out;
}
.mural-zoom[hidden] { display: none; }
@keyframes zoom-entra { from { opacity: 0; } }
.zoom-quadro { margin: 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.zoom-midia { display: flex; justify-content: center; max-width: 100%; max-height: calc(100% - 30px); }
.zoom-midia img {
  max-width: 100%; max-height: calc(100vh - 130px); object-fit: contain;
  border-radius: 18px; box-shadow: 0 20px 50px rgba(60,70,90,.18);
}
.zoom-midia .midia-vazia { width: min(60vw, 520px); height: auto; max-height: calc(100vh - 130px); border-radius: 18px; }
.zoom-quadro figcaption { margin-top: 10px; font-size: 12px; color: #6b7280; min-height: 1em; }
.zoom-seta { width: 46px; height: 46px; padding: 0; justify-content: center; font-size: 22px; }
.zoom-fechar { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; padding: 0; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .mural-zoom { animation: none; } }

/* ---------- detalhe do projeto ---------- */
.detalhe[hidden] { display: none; }
.detalhe { animation: aparece .45s cubic-bezier(.34, 1.4, .64, 1); }
.voltar-grade { margin-bottom: 16px; }
.detalhe-corpo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: start; }
.detalhe-midia {
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(#fff, #f3f5f8);
  box-shadow: 0 12px 30px rgba(60,70,90,.12), 0 0 0 1px rgba(255,255,255,.9);
}
/* a mídia de destaque aparece inteira, no formato dela */
.detalhe-midia img, .detalhe-midia video { width: 100%; height: auto; display: block; }
.detalhe-midia .midia-vazia { aspect-ratio: 4 / 3; }
.midia-vazia {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  font: 700 clamp(22px, 3vw, 34px) 'Geist Mono', monospace; letter-spacing: -.04em;
  color: rgba(255,255,255,.95);
  text-align: center;
  padding: 20px;
}
.detalhe-info h2 { margin: 0 0 10px; font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; line-height: 1.05; letter-spacing: -.05em; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.etiqueta {
  padding: 3px 10px;
  border-radius: 999px;
  font: 500 10px 'Geist Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7280;
  background: rgba(255,255,255,.8);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.etiqueta.forte { color: #1f2937; background: var(--c2); box-shadow: inset 0 0 0 1px var(--c1); }
.detalhe-texto { color: #4b5563; line-height: 1.65; font-size: 14px; font-weight: 300; margin: 0 0 18px; }
.pilula.rolar { margin-top: 10px; animation: quica 1.6s ease-in-out infinite; }
@keyframes quica { 50% { transform: translateY(3px); } }

/* as imagens do projeto, rolando pra baixo (as "meia" ficam de duas em duas) */
.detalhe-imagens {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}
.detalhe-imagem { grid-column: 1 / -1; margin: 0; }
.detalhe-imagem.meia { grid-column: span 3; }
.detalhe-imagem.terco { grid-column: span 2; }   /* três lado a lado */
.detalhe-imagem.centro { grid-column: 1 / -1; width: min(100%, 440px); justify-self: center; }   /* sozinho no meio (vídeo em pé) */
.detalhe-imagem > img,
.detalhe-imagem > video,
.detalhe-imagem > .midia-vazia {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  /* fundinho claro pros renders com fundo transparente */
  background: linear-gradient(#fff, #f3f5f8);
  box-shadow: 0 12px 30px rgba(60,70,90,.12), 0 0 0 1px rgba(255,255,255,.9);
}
.detalhe-imagem > .midia-vazia { aspect-ratio: 16 / 9; font-size: clamp(16px, 2vw, 22px); }
.detalhe-imagem.meia > .midia-vazia { aspect-ratio: 1; }
.detalhe-imagem figcaption { margin: 8px 6px 0; font-size: 11px; color: #9aa0a8; letter-spacing: .02em; }
.detalhe-fim { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.detalhe-fim[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .pilula.rolar { animation: none; } }

@media (max-width: 720px) {
  .galeria { padding: 110px 10px 10px; }
  .galeria .painel { border-radius: 22px; }
  .painel-rolagem { padding: 16px 14px 22px; }
  .painel-topo { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .grade.mural { columns: 2; column-gap: 12px; }
  .grade.mural > .card { margin-bottom: 14px; }
  .mural-zoom { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 70px 12px 20px; gap: 10px; }
  .zoom-quadro { grid-column: 1 / -1; grid-row: 1; }
  .zoom-midia .midia-vazia { width: 80vw; }
  .zoom-seta { grid-row: 2; justify-self: center; }
  .quadradinho h3 { font-size: 13px; }
  .detalhe-corpo { grid-template-columns: 1fr; }
  .detalhe-imagens { gap: 12px; margin-top: 22px; }
  .detalhe-imagem.terco { grid-column: span 3; }
}

/* ---------- cards "bolha" (conteúdo no projetos.js) ---------- */
.card {
  position: relative;
  flex: 0 0 170px;
  scroll-snap-align: start;
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 22px;
  padding: 8px;
  /* corpo perolado, igual às bolhas e ao cursor */
  background:
    radial-gradient(ellipse 60% 35% at 28% 10%, rgba(255,255,255,.95), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.88), rgba(241,243,247,.78));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 8px 20px rgba(60, 70, 90, .08),
    inset 0 -10px 18px rgba(148, 211, 236, .12),
    inset 0 8px 14px rgba(247, 168, 207, .10);
  transition: transform .35s cubic-bezier(.34, 1.6, .64, 1), box-shadow .3s;
  -webkit-user-drag: none;
}
/* borda arco-íris suave (rosa → branco → azul) */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #f7a8cf, #fff 38%, #94d3ec 70%, #fff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* mouse em cima: a bolha "infla" */
.card:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow:
    0 14px 28px rgba(60, 70, 90, .12),
    inset 0 -10px 18px rgba(148, 211, 236, .2),
    inset 0 8px 14px rgba(247, 168, 207, .16);
  animation: bolha-infla .9s ease-in-out .35s infinite alternate;
}
@keyframes bolha-infla {
  from { transform: translateY(-6px) scale(1.05); }
  to   { transform: translateY(-7px) scale(1.065, 1.04); }
}
/* clique: a bolha estoura e depois volta */
.card.estourando { animation: bolha-estoura .38s ease-out forwards; }
@keyframes bolha-estoura {
  0%   { transform: scale(1.05); opacity: 1; }
  45%  { transform: scale(1.18); opacity: .9; }
  100% { transform: scale(.2); opacity: 0; }
}
.card h3 { margin: 8px 4px 0; font-size: 14px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card p  { margin: 2px 4px 4px; font-size: 11px; color: #999; }

.thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 92px;
  border-radius: 15px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c1, #ddd), var(--c2, #fff));
  pointer-events: none;
}
.thumb img,
.thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, opacity .3s;
}
.thumb video { opacity: 0; }
.card:hover .thumb video { opacity: 1; }
.card:hover .thumb img { transform: scale(1.08); }
/* prévia sem vídeo: um brilho passa pela imagem */
.thumb-brilho {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.7) 48%, transparent 66%);
  transform: translateX(-120%);
}
.card:hover .thumb-brilho { animation: brilho-passa 1.1s ease-in-out infinite; }
@keyframes brilho-passa { to { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .card:hover .thumb-brilho { animation: none; }
}


/* ---------- celular ---------- */
@media (max-width: 600px) {
  .botoes-laterais {
    left: auto;
    right: 16px;
    top: 20px;
    transform: none;
    flex-direction: row;
    gap: 8px;
  }
  .bola { width: 38px; height: 38px; font-size: 15px; }
  .topo { left: 12px; top: 12px; }
  .logo { --escala: .62; }
  .categorias { gap: 8px; bottom: 12px; }
  .card-categoria { padding: 6px; border-radius: 18px; }
  .card-categoria .thumb { height: 52px; border-radius: 12px; }
  /* no celular o nome pode quebrar em 2 linhas ("Design / gráfico") em vez de ser cortado com "…" */
  .card-categoria h3 { font-size: clamp(11px, 3.4vw, 13px); letter-spacing: -.05em; gap: 3px; align-items: flex-start; white-space: normal; line-height: 1.15; overflow: visible; }
  .card-categoria h3 [data-texto] { min-width: 0; }   /* quebra só entre palavras */
  .card-categoria h3 { margin-left: 1px; margin-right: 1px; }
  .card-categoria .seta-dir { flex: none; width: 14px; height: 14px; font-size: 11px; }
  .card-categoria p { display: none; }
}

/* ---------- vitrine 3D dos personagens (vitrine.js) ---------- */
.vitrine-palco {
  position: relative;
  height: clamp(380px, 52vw, 540px);
  border-radius: 20px;
  overflow: hidden;
  touch-action: pan-y;             /* no celular: arrastar pro lado gira, pra cima/baixo rola a página */
  background:
    radial-gradient(ellipse 60% 45% at 50% 38%, #fff, transparent 70%),
    linear-gradient(180deg, var(--c2, #e0f4fb), #fff 85%);
  box-shadow: 0 12px 30px rgba(60,70,90,.12), 0 0 0 1px rgba(255,255,255,.9);
}
.vitrine-cena { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; display: block; }
.vitrine-palco.arrastando .vitrine-cena { cursor: grabbing; }
.vitrine-carregando {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 500 10px 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #9aa0a8; pointer-events: none;
}
.vitrine-carregando[hidden] { display: none; }
.vitrine-info { position: absolute; left: 22px; top: 18px; pointer-events: none; max-width: 46%; }
.vitrine-info h3 { margin: 0; font: 700 clamp(20px, 2.6vw, 28px) 'Geist Mono', monospace; color: #1f2937; letter-spacing: -.05em; }
.vitrine-info p { margin: 4px 0 0; font-size: 12px; font-weight: 300; color: #7b8190; line-height: 1.4; }
.vitrine-dica {
  position: absolute; right: 18px; top: 20px; pointer-events: none;
  font: 500 10px 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #9aa0a8; transition: opacity .6s;
}
.vitrine-dica.sumir { opacity: 0; }
.vitrine-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: none; border-radius: 50%;
  font: 700 26px/1 'Geist Mono', monospace; color: #4b5563;
  background: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.55));
  box-shadow: 0 6px 16px rgba(60,70,90,.14), inset 0 0 0 1px rgba(255,255,255,.9);
  transition: transform .2s cubic-bezier(.34,1.6,.64,1);
}
.vitrine-seta:hover { transform: translateY(-50%) scale(1.1); }
.vitrine-seta.esq { left: 14px; }
.vitrine-seta.dir { right: 14px; }
.vitrine-expressoes {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; gap: 8px; padding: 4px 6px 8px;
  max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none;
}
.vitrine-expressoes[hidden] { display: none; }
/* bolhas de sabão com carinha de texto (cores das bolhas do site) */
.vitrine-expr {
  --cor: #94d3ec;
  position: relative; flex: 0 0 auto;
  width: 50px; height: 50px; padding: 0; border: none; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 12px/1 'Geist Mono', 'Noto Sans Math', 'Noto Sans Symbols', sans-serif;
  letter-spacing: -.02em; color: #1f2937; white-space: nowrap;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,0) 26%),
    radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--cor) 55%, #fff) 0%, transparent 60%),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--cor) 45%, #fff) 0%, var(--cor) 78%, color-mix(in srgb, var(--cor) 80%, #000) 100%);
  box-shadow:
    inset 0 -4px 8px color-mix(in srgb, var(--cor) 60%, #000 0%),
    inset 0 2px 3px rgba(255,255,255,.8),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 6px 12px color-mix(in srgb, var(--cor) 35%, transparent);
  animation: bolhaFlutua 3s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
  transition: transform .25s cubic-bezier(.34,1.6,.64,1), filter .2s;
}
.vitrine-expr[hidden] { display: none; }
/* brilho em cima, tipo reflexo de janela na bolha */
.vitrine-expr::before {
  content: ''; position: absolute; left: 22%; top: 9%; width: 42%; height: 24%;
  border-radius: 50%; background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,0));
  pointer-events: none;
}
.vitrine-expr span { position: relative; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.vitrine-expr:hover { transform: translateY(-4px) scale(1.12); filter: saturate(1.15); }
.vitrine-expr.ativo { outline: 3px solid #fff; outline-offset: 2px; filter: saturate(1.2); }
.vitrine-expr.estalo { animation: bolhaEstalo .45s cubic-bezier(.34,1.6,.64,1), bolhaFlutua 3s ease-in-out .45s infinite; }
@keyframes bolhaFlutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes bolhaEstalo { 0% { scale: 1; } 30% { scale: .78; } 65% { scale: 1.18; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .vitrine-expr, .vitrine-expr.estalo { animation: none; } }
.vitrine-elenco { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.vitrine-icone {
  width: 56px; height: 56px; padding: 0; border: none; border-radius: 50%; overflow: hidden;
  background: linear-gradient(#fff, var(--c2, #e0f4fb));
  box-shadow: 0 4px 12px rgba(60,70,90,.12), inset 0 0 0 2px rgba(255,255,255,.9);
  transition: transform .2s cubic-bezier(.34,1.6,.64,1), box-shadow .2s;
}
.vitrine-icone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrine-icone:hover { transform: translateY(-3px) scale(1.06); }
.vitrine-icone.ativo { box-shadow: 0 6px 16px rgba(60,70,90,.18), inset 0 0 0 3px var(--c1, #94d3ec); transform: translateY(-3px); }
@media (max-width: 720px) {
  .vitrine-seta { width: 36px; height: 36px; font-size: 22px; }
  .vitrine-info { left: 14px; top: 12px; max-width: 70%; }
  .vitrine-dica { display: none; }
  /* no celular: 2 fileiras de 4 bolhas (8 numa linha só não cabem) e o palco um pouco mais alto */
  .vitrine-palco { height: 470px; }
  .vitrine-cena { height: calc(100% - 112px); }   /* o 3D fica em cima; as bolhas ganham o espaço de baixo */
  .vitrine-seta { top: calc(50% - 56px); }
  .vitrine-expressoes { gap: 8px; flex-wrap: wrap; justify-content: center; width: 220px; overflow: visible; bottom: 10px; padding: 0; }
  .vitrine-expr { width: 42px; height: 42px; font-size: 10px; }
  .vitrine-elenco { gap: 5px; flex-wrap: nowrap; }
  .vitrine-icone { width: 34px; height: 34px; flex: 0 0 auto; }
}

/* ---------- cenário 3D do jogo (cenario.js) ---------- */
.cenario-palco {
  position: relative;
  height: clamp(360px, 48vw, 560px);
  border-radius: 20px;
  overflow: hidden;
  background: #cfe9f6;
  box-shadow: 0 12px 30px rgba(60,70,90,.12), 0 0 0 1px rgba(255,255,255,.9);
  touch-action: pan-y;
}
.cenario-palco.ativo { touch-action: none; box-shadow: 0 12px 30px rgba(60,70,90,.18), 0 0 0 3px var(--c1, #94d3ec); }
.cenario-cena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cenario-palco.ativo .cenario-cena { cursor: grab; }
.cenario-palco.ativo .cenario-cena:active { cursor: grabbing; }
.cenario-carregando {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font: 500 10px 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #6b8190;
}
.cenario-carregando[hidden] { display: none; }
.cenario-ativar, .cenario-sair {
  position: absolute; border: none; border-radius: 999px; cursor: pointer;
  font: 700 12px 'Geist Mono', monospace; color: #374151;
  background: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.6));
  box-shadow: 0 8px 20px rgba(60,70,90,.18), inset 0 0 0 1px #fff;
  transition: transform .2s cubic-bezier(.34,1.6,.64,1);
}
.cenario-ativar { left: 50%; bottom: 18px; transform: translateX(-50%); padding: 12px 22px; }
.cenario-ativar:hover { transform: translateX(-50%) scale(1.06); }
.cenario-ativar[hidden], .cenario-sair[hidden] { display: none; }
.cenario-sair { right: 14px; top: 14px; padding: 8px 14px; }
.cenario-dica {
  position: absolute; left: 14px; bottom: 12px; right: 90px; pointer-events: none;
  font: 500 10px 'Geist Mono', monospace; letter-spacing: .06em; color: #4b5d6b;
  opacity: 0; transition: opacity .4s;
}
.cenario-palco.ativo .cenario-dica { opacity: .85; }
@media (max-width: 720px) {
  .cenario-palco { height: 420px; }
  .cenario-dica { display: none; }
}

/* ---------- visualizador de um modelo + barra material ↕ topologia (modelo3d.js) ---------- */
.modelo-palco {
  position: relative;
  height: clamp(440px, 60vw, 640px);
  border-radius: 20px;
  overflow: hidden;
  touch-action: pan-y;
  background:
    radial-gradient(ellipse 55% 45% at 45% 42%, #fff, transparent 70%),
    linear-gradient(180deg, var(--c2, #e0f4fb), #fff 90%);
  box-shadow: 0 12px 30px rgba(60,70,90,.12), 0 0 0 1px rgba(255,255,255,.9);
}
.modelo-cena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.modelo-cena:active { cursor: grabbing; }
.modelo-carregando {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font: 500 10px 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #9aa0a8;
}
.modelo-carregando[hidden] { display: none; }
.modelo-dica {
  position: absolute; left: 18px; top: 18px; pointer-events: none; transition: opacity .6s;
  font: 500 10px 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #9aa0a8;
}
.modelo-dica.sumir { opacity: 0; }
.modelo-zoom { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.modelo-zoom button {
  width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer;
  font: 700 18px/1 'Geist Mono', monospace; color: #4b5563;
  background: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.6));
  box-shadow: 0 5px 12px rgba(60,70,90,.14), inset 0 0 0 1px #fff;
}
/* a barra vertical: arrastar pra baixo mostra a topologia */
.modelo-barra {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  height: min(70%, 380px); width: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: ns-resize; touch-action: none; user-select: none; outline: none;
}
.modelo-barra-rotulo { font: 500 9px 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; }
.modelo-trilho {
  position: relative; flex: 1; width: 10px; border-radius: 999px;
  background: linear-gradient(rgba(255,255,255,.95), rgba(236,240,246,.9));
  box-shadow: inset 0 1px 3px rgba(60,70,90,.18), 0 0 0 1px rgba(255,255,255,.9);
}
.modelo-preenchido {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  border-radius: 999px; background: linear-gradient(var(--c1, #94d3ec), color-mix(in srgb, var(--c1, #94d3ec) 60%, #2b3645));
}
.modelo-pegador {
  position: absolute; left: 50%; top: 0; width: 30px; height: 30px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff 0 12%, transparent 32%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c1, #94d3ec) 35%, #fff), var(--c1, #94d3ec));
  box-shadow: 0 6px 14px rgba(60,70,90,.22), inset 0 -3px 6px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.7);
  transition: transform .2s cubic-bezier(.34,1.6,.64,1);
}
.modelo-barra:hover .modelo-pegador, .modelo-barra:focus-visible .modelo-pegador { transform: translate(-50%, -50%) scale(1.12); }
@media (max-width: 720px) {
  .modelo-palco { height: 500px; }
  .modelo-barra { right: 8px; width: 54px; height: 60%; }
}

/* camadas do shader (completo · luz e sombra · só textura · contorno) e o disco da luz */
.modelo-camadas {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(60,70,90,.12), inset 0 0 0 1px rgba(255,255,255,.9);
  max-width: calc(100% - 28px); overflow-x: auto; scrollbar-width: none;
}
.modelo-camadas button {
  flex: 0 0 auto; border: none; border-radius: 999px; padding: 7px 12px; cursor: pointer;
  font: 500 10px 'Geist Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #6b7280;
  background: transparent; transition: background .2s, color .2s;
}
.modelo-camadas button:hover { color: #1f2937; }
.modelo-camadas button.ativo { background: #fff; color: #1f2937; box-shadow: 0 2px 6px rgba(60,70,90,.12), inset 0 0 0 1.5px var(--c1, #94d3ec); }
.modelo-camadas [data-contorno] { margin-left: 6px; }
.modelo-camadas [data-contorno]::before { content: '○ '; }
.modelo-camadas [data-contorno].ativo::before { content: '● '; }
.modelo-luz {
  position: absolute; left: 62px; bottom: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.modelo-luz span { font: 500 9px 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; }
.modelo-luz-disco {
  position: relative; width: 78px; height: 78px; border-radius: 50%; cursor: grab; touch-action: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 30%, rgba(255,255,255,.55) 70%),
    linear-gradient(#fff, var(--c2, #e0f4fb));
  box-shadow: 0 6px 16px rgba(60,70,90,.14), inset 0 0 0 1px rgba(255,255,255,.9), inset 0 0 0 20px rgba(148,211,236,.08);
}
.modelo-luz-disco:active { cursor: grabbing; }
.modelo-luz-disco::after {       /* cruzinha: o centro é "luz de frente" */
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(107,114,128,.35); pointer-events: none;
}
.modelo-sol {
  position: absolute; width: 26px; height: 26px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; pointer-events: none;
  font-size: 15px; line-height: 1; color: #b7791f;
  background: radial-gradient(circle at 35% 30%, #fffbe6, #ffd76a 60%, #f6b73c);
  box-shadow: 0 0 12px rgba(255,200,80,.8), 0 2px 6px rgba(60,70,90,.2);
}
.modelo-sol.atras { opacity: .5; }
@media (max-width: 720px) {
  .modelo-camadas { top: 10px; flex-wrap: wrap; justify-content: center; border-radius: 18px; width: calc(100% - 28px); }
  .modelo-camadas button { padding: 6px 9px; font-size: 9px; }
  .modelo-camadas [data-contorno] { margin-left: 0; }
  .modelo-luz { left: 56px; bottom: 10px; }
  .modelo-luz-disco { width: 64px; height: 64px; }
  .modelo-dica { top: 92px; }
}

/* ---------- mosaico de fotos ao vivo (Shader GLSL do TouchDesigner — mosaico.js) ---------- */
.mosaico-palco {
  position: relative;
  height: clamp(420px, 58vw, 620px);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(60,70,90,.12), 0 0 0 1px rgba(255,255,255,.9);
}
.mosaico-tela, .mosaico-mao { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mosaico-mao { pointer-events: none; }
.mosaico-conjuntos { z-index: 2; }
.mosaico-camera {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(92%, 380px); text-align: center;
}
.mosaico-camera[hidden] { display: none; }
.mosaico-camera .pilula { font-size: 14px; padding: 11px 22px; }
.mosaico-camera span, .mosaico-aviso {
  padding: 5px 12px; border-radius: 999px;
  font: 500 10px/1.5 'Geist Mono', monospace; letter-spacing: .06em; color: #4b5563;
  background: rgba(255,255,255,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(60,70,90,.12);
}
.mosaico-camera span { border-radius: 14px; }
.mosaico-aviso { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); z-index: 2; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.mosaico-aviso[hidden] { display: none; }
.mosaico-tamanho {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px;
  font: 500 10px 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #6b7280;
  background: rgba(255,255,255,.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(60,70,90,.12), inset 0 0 0 1px rgba(255,255,255,.9);
}
.mosaico-tamanho input { width: min(40vw, 200px); accent-color: var(--c1, #94d3ec); }
/* botão de tirar foto do mosaico + o "flash" */
.mosaico-redondo.mosaico-foto { position: absolute; right: 18px; bottom: 16px; z-index: 2; }
.mosaico-foto svg { width: 26px; height: 26px; color: #7d848d; }
.mosaico-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.mosaico-flash.piscando { animation: mosaico-flash .45s ease-out; }
@keyframes mosaico-flash { from { opacity: .9; } to { opacity: 0; } }
@media (max-width: 720px) {
  /* no celular a barrinha vai da esquerda até antes do botão da foto */
  .mosaico-tamanho { left: 14px; right: 80px; transform: none; }
  .mosaico-tamanho input { width: auto; flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .mosaico-flash.piscando { animation: none; } }
/* botões redondos estilo menu do Wii: esfera branca perolada, brilho em cima, anel azul-céu; ícones cinza */
.mosaico-bolhas { position: absolute; left: 20px; top: 20px; z-index: 2; display: flex; gap: 14px; }
.mosaico-redondo {
  position: relative; width: 56px; height: 56px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 32%, #ffffff 0%, #f6f8fa 42%, #e3e7ec 78%, #cfd5dc 100%);
  box-shadow:
    0 0 0 2.5px #fff, 0 0 0 5px #9fdcf6,              /* aro branco + anel azul-céu */
    0 6px 14px rgba(40, 90, 130, .22),
    inset 0 -6px 10px rgba(90, 100, 115, .14), inset 0 2px 3px #fff;
  transition: transform .25s cubic-bezier(.34,1.6,.64,1), box-shadow .2s;
}
/* reflexo de vidro em cima (meia-lua branca) */
.mosaico-redondo::before {
  content: ''; position: absolute; left: 18%; right: 18%; top: 5%; height: 32%;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,0));
  pointer-events: none; z-index: 1;
}
.mosaico-redondo img, .mosaico-redondo svg { width: 40px; height: 40px; pointer-events: none; color: #8a9099; }
.mosaico-redondo:hover, .mosaico-redondo:focus-visible { transform: scale(1.08); }
.mosaico-redondo:active { transform: scale(.95); }
.mosaico-bolha { opacity: .8; }
.mosaico-bolha.ativo, .mosaico-bolha:hover { opacity: 1; }
.mosaico-bolha.ativo {
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 5.5px #34b6ee, 0 0 16px rgba(52, 182, 238, .55),
    0 6px 14px rgba(40, 90, 130, .22), inset 0 -6px 10px rgba(90, 100, 115, .14), inset 0 2px 3px #fff;
}
/* o nome ("anime shader" / "emoji shader") aparece embaixo ao passar o mouse */
.mosaico-bolha::after {
  content: attr(data-nome);
  position: absolute; top: calc(100% + 12px); left: 0; transform: translateY(-4px);   /* alinhado à esquerda: não corta na borda */
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 700 10px 'Geist Mono', monospace; letter-spacing: .06em; color: #1f2937;
  background: rgba(255,255,255,.94); box-shadow: 0 4px 12px rgba(60,70,90,.14), inset 0 0 0 1.5px #9fdcf6;
  opacity: 0; transition: opacity .2s, transform .2s;
}
.mosaico-bolha:hover::after, .mosaico-bolha:focus-visible::after { opacity: 1; transform: none; }
@media (max-width: 720px) {
  .mosaico-redondo { width: 48px; height: 48px; }
  .mosaico-redondo img, .mosaico-redondo svg { width: 30px; height: 30px; }
}


/* ---------- MODO CÂMERA: mosaico em tela cheia (mosaico.js move o palco pro <body>) ---------- */
.mosaico-palco.tela-cheia {
  position: fixed; inset: 0; z-index: 50;
  height: auto; border-radius: 0; box-shadow: none;
  animation: mosaico-abre .35s cubic-bezier(.2, .8, .2, 1);
}
@keyframes mosaico-abre { from { opacity: 0; transform: scale(.94); } }
body.mosaico-tela-cheia { overflow: hidden; }
.mosaico-redondo[hidden], .mosaico-sair[hidden] { display: none; }
.mosaico-sair { position: absolute; right: 18px; top: 20px; z-index: 3; }
/* na tela cheia o botão da foto vira o "disparador" grande, embaixo no meio (como no app de câmera) */
.tela-cheia .mosaico-redondo.mosaico-foto { width: 76px; height: 76px; left: 50%; right: auto; bottom: 26px; margin-left: -38px; }
.tela-cheia .mosaico-foto svg { width: 34px; height: 34px; }
.tela-cheia .mosaico-tamanho { bottom: 118px; }
.tela-cheia .mosaico-bolhas { top: 20px; left: 20px; }
@media (max-width: 720px) {
  .tela-cheia .mosaico-tamanho { left: 50%; right: auto; transform: translateX(-50%); width: min(80vw, 300px); }
}
@media (prefers-reduced-motion: reduce) { .mosaico-palco.tela-cheia { animation: none; } }
/* os pixels do carregamento cobrindo o quadro da câmera (o "sair da câmera" fica por cima) */
.mosaico-carregando { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* o aviso ("✋ mostre a mão e faça pinça"…) bem mais visível; no modo câmera, maior ainda */
.mosaico-aviso { font-size: 13px; padding: 8px 16px; letter-spacing: .03em; }
.tela-cheia .mosaico-aviso { top: 110px; font-size: 17px; padding: 12px 24px; box-shadow: 0 8px 24px rgba(60,70,90,.2); }
@media (max-width: 720px) {
  .mosaico-aviso, .tela-cheia .mosaico-aviso {
    white-space: normal; text-align: center; width: max-content; max-width: 86%; border-radius: 16px;
  }
  .tela-cheia .mosaico-aviso { font-size: 15px; top: 96px; }
}
/* botão de trocar câmera (frontal ↔ traseira): à direita do disparador, como no app de câmera do celular */
.tela-cheia .mosaico-redondo.mosaico-virar { position: absolute; z-index: 2; left: calc(50% + 62px); bottom: 36px; }
.mosaico-virar svg { width: 26px; height: 26px; color: #7d848d; }
/* vídeos sem nenhum controle por cima (nem o botão de play grande do iPhone quando o vídeo carrega) */
video::-webkit-media-controls, video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

/* ---------- TROCA DE VISUAL COM FOTO (transformacao.js) ---------- */
/* botão de customizar (ícone da Ana, redondo como os do lado): logo acima dos cards, no meio;
   o nome "customize persocom" só aparece passando o mouse */
.botao-foto {
  position: fixed; left: 50%; z-index: 3;
  width: 62px; height: 62px;               /* um pouco maior que as bolas do lado (pedido da Ana) */
  margin-left: -31px;                      /* metade da bola (centraliza sem usar transform, que fica pro hover) */
  border: none; padding: 0; cursor: pointer;
  color: #4b5563;
  transition: transform .25s cubic-bezier(.34, 1.6, .64, 1), opacity .4s;
}
.botao-foto svg { width: auto; height: 42px; display: block; }
.botao-foto:disabled { opacity: .5; cursor: default; transform: none; }
.botao-foto::after {
  content: attr(data-dica);
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 700 11px 'Geist Mono', monospace; letter-spacing: .04em; color: #1f2937;
  background: rgba(255,255,255,.95); box-shadow: 0 4px 12px rgba(60,70,90,.14);
  opacity: 0; transition: opacity .2s, transform .2s;
}
.botao-foto:hover::after, .botao-foto:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 600px) { .botao-foto { width: 50px; height: 50px; margin-left: -25px; } .botao-foto svg { height: 34px; } }
body.em-galeria .botao-foto { opacity: 0; pointer-events: none; }

/* balão de fala cinza clarinho, preso na cabeça dela */
.balao-fala {
  position: fixed; left: 0; top: 0; z-index: 6;
  width: min(270px, calc(100vw - 24px));
  padding: 14px 16px 12px;
  border-radius: 20px;
  background: #eef0f3;
  color: #374151;
  box-shadow: 0 10px 28px rgba(60, 70, 90, .16), inset 0 1px 0 rgba(255,255,255,.9);
  font: 500 13px/1.45 'Geist Mono', monospace;
  animation: balao-entra .28s cubic-bezier(.34, 1.5, .64, 1);
  --c1: #62b8e0;            /* cor do botão "confirmar" (na home não tem a cor da categoria) */
}
.balao-fala[hidden] { display: none; }
@keyframes balao-entra { from { opacity: 0; scale: .85; } }
.balao-texto { margin: 0 22px 10px 0; }
.balao-fechar {
  position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.7); color: #6b7280; cursor: pointer; font: 700 11px 'Geist Mono', monospace;
}
.balao-fechar[hidden] { display: none; }
.balao-escolher, .balao-botoes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.balao-escolher[hidden], .balao-previa[hidden], .balao-nota[hidden], .balao-link[hidden] { display: none; }
.balao-pilula { font-size: 12px; padding: 7px 14px; cursor: pointer; }
.balao-link { border: none; background: none; padding: 0; cursor: pointer; font: 500 11px 'Geist Mono', monospace; color: #6b7280; text-decoration: underline; text-underline-offset: 3px; }
.balao-previa { display: flex; align-items: center; gap: 12px; }
.balao-previa img { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; box-shadow: 0 4px 10px rgba(60,70,90,.15); flex: none; }
.balao-botoes { flex-direction: column; align-items: flex-start; }
.balao-nota { margin: 10px 0 0; font-size: 10px; color: #9aa0a8; letter-spacing: .02em; }
/* o "rabinho" do balão apontando pra ela */
.balao-rabinho { position: absolute; width: 16px; height: 16px; background: #eef0f3; border-radius: 3px; transform: rotate(45deg); }
.balao-fala[data-lado="esquerda"] .balao-rabinho { left: -6px; margin-top: -8px; }
.balao-fala[data-lado="baixo"] .balao-rabinho { bottom: -6px; margin-left: -8px; }
@media (prefers-reduced-motion: reduce) { .balao-fala { animation: none; } }