/* Tokens: ajuste cores e tamanhos aqui, em um lugar só */
:root {
  --rodape: 120px;
  --papel: #f4efe6;
  --tinta: #2b2620;
  --cortica: #c9a57a;
  --destaque: #d8473a;
  --sombra: 0 6px 14px rgba(0, 0, 0, 0.25);
  --transicao: 350ms ease;
  --capa: #9fd6dc;   /* cor de fundo de capa de projeto */
  --bolso: #f7f7f4;  /* folha de bolsos */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: system-ui, sans-serif;
  min-height: 100vh;
  overflow: hidden;
}

/* Telas: só uma visível por vez, com transição */
.tela {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao);
  overflow-y: auto;
  padding: 16px;
}
.tela.ativa { opacity: 1; pointer-events: auto; }

.voltar button {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  padding: 8px 0;
}

/* Tela inicial: lousa de cortiça com peças móveis (exceto o papel central) */
#inicio { padding: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
#inicio::-webkit-scrollbar { display: none; }
.secao { position: relative; height: 100%; overflow: hidden; }
#lousa { background: #ffffff; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.destaques { background: var(--papel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px; }
.mesa-secao { background: radial-gradient(ellipse at 30% 20%, #c79a62, #a9753f 70%); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.titulo-secao { font-size: 28px; margin: 0; }
.peca {
  position: absolute;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transform: rotate(var(--giro, 0deg));
  transition: box-shadow var(--transicao), transform 250ms ease;
  box-shadow: 0 8px 14px rgba(0,0,0,0.3);
  z-index: 3;
}
.peca.arrastando { cursor: grabbing; box-shadow: 0 16px 26px rgba(0,0,0,0.4); }

/* Cortiça: retângulo marrom que pode ser arrastado */
.cortica-peca {
  position: absolute;
  left: 13.3%; top: 9.1%; width: 72.3%; height: 81.7%; transform: rotate(-0.8deg);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08) 0 2px, transparent 3px) 0 0 / 14px 14px, #b98457;
  box-shadow: 0 14px 30px rgba(0,0,0,0.25);
  z-index: 0;
}

/* Papel central: fixo (não arrasta) */
.papel-central {
  position: absolute;
  left: 28%; top: 29.6%; width: 43%; height: 44.6%;
  background: #fbfbf7 linear-gradient(#c9d6e6 1px, transparent 1px) 0 28px / 100% 28px;
  transform: rotate(0.6deg);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  z-index: 2;
  user-select: none;
}
.papel-central .assinatura { margin: 0; font-family: "Caveat", cursive, sans-serif; font-size: clamp(16px, 2vw, 26px); font-weight: 700; }
.papel-central .titulo { margin: 0; font-family: "Caveat", cursive, sans-serif; font-size: clamp(30px, 4.6vw, 78px); font-weight: 700; line-height: 1; letter-spacing: 2px; }
.fita { position: absolute; width: 90px; height: 26px; background: rgba(230, 220, 190, 0.75); }
.fita-1 { top: -12px; left: -18px; transform: rotate(-18deg); }
.fita-2 { top: -10px; right: -20px; transform: rotate(22deg); }

/* Post-its amarelos */
.post-it { background: #f9e25b; aspect-ratio: 1; }
.post-it-1 { left: 16.8%; top: 16.4%; width: 15.1%; --giro: -3deg; }
.post-it-2 { left: 68.4%; top: 57.6%; width: 14.6%; --giro: 3deg; }
.post-it-1::before { content: ""; position: absolute; top: 6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #d8473a; box-shadow: 0 2px 3px rgba(0,0,0,0.4); }

/* Polaroid com legenda */
.polaroid-peca { left: 36.4%; top: 59.7%; width: 9%; aspect-ratio: 0.6; --giro: -1deg; background: #fff; padding: 6px 6px 0; display: flex; flex-direction: column; }
.polaroid-peca .foto-vazia { flex: 1; background: #fca230; }
.polaroid-peca .legenda { height: 22%; display: flex; align-items: center; justify-content: center; font-family: "Caveat", cursive, sans-serif; font-size: 18px; }

/* Adesivos: círculos pretos (placeholder) */
.adesivo { width: 7.4%; aspect-ratio: 1; border-radius: 50%; background: #000; }
.adesivo-1 { left: 56%; top: 12.7%; }
.adesivo-2 { left: 75.3%; top: 25.4%; }
.adesivo-3 { left: 18.9%; top: 69.5%; }

/* QR code preso ao post-it inferior: move junto; único link da lousa */
.qr-peca { position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; background: #fff; padding: 6px; }
.qr-peca a { display: block; width: 100%; height: 100%; cursor: pointer; }
.qr-peca img { width: 100%; height: 100%; display: block; }

/* Sobre mim: pasta laranja sobre fundo escuro; papéis e ficha como na referência */
#sobre { padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#sobre .voltar { position: absolute; top: 14px; left: 16px; z-index: 5; }
#sobre .voltar button { color: #fff; }
.sobre-cena { position: relative; width: min(calc(100vw - 32px), calc((100vh - 48px) * 1.7134)); aspect-ratio: 1088 / 635; }
.sobre-pasta { position: absolute; left: 0.7%; top: 1.3%; width: 93.7%; height: 96.2%; background: #dea64a; box-shadow: var(--sombra); }
.sobre-aba { position: absolute; left: 93.7%; top: 11%; width: 5.5%; height: 31%; background: #dea64a; clip-path: polygon(0 0, 100% 13%, 100% 87%, 0 100%); display: flex; align-items: center; justify-content: center; }
.sobre-aba span { writing-mode: vertical-rl; background: #fff; border: 1px solid #2b2620; padding: 8px 4px; font-size: 13px; }

.sobre-papel { position: absolute; background: #fdfcf8; box-shadow: var(--sombra); color: #000; }
.sobre-duas { left: 3%; top: 5.1%; width: 42.7%; height: 47.2%; transform: rotate(-2.5deg); display: flex; gap: 2.2%; background: none; box-shadow: none; }
.sobre-metade { flex: 1; min-width: 0; padding: 4%; overflow: hidden; color: var(--tinta); background: #fdfcf8; box-shadow: var(--sombra); }
.sobre-metade p, .sobre-metade li { margin: 0; font-size: clamp(11px, 1.05vw, 14px); line-height: 1.6; overflow-wrap: anywhere; }
.sobre-trabalhos h2 { margin: 0 0 8px; font-size: clamp(13px, 1.25vw, 17px); }
.sobre-trabalhos ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 12px; }
.sobre-trabalhos li { break-inside: avoid; }

.sobre-cartao { left: 8.5%; top: 58%; width: 32.8%; height: 34.6%; background: #fff; transform: rotate(2.3deg); padding: 4% 5%; color: var(--tinta); }
.sobre-cartao h2 { margin: 0 0 2px; font-size: clamp(12px, 1.2vw, 15px); }
.sobre-cartao p { margin: 0 0 8px; font-size: clamp(11px, 1.05vw, 13px); }
.sobre-chamado { position: absolute; left: 5%; bottom: 10%; width: 36%; margin: 0 !important; font-size: clamp(12px, 1.2vw, 15px) !important; font-weight: bold; line-height: 1.3; }
.sobre-cartao .apps { position: absolute; left: 6%; top: 8%; width: 56%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; }
.sobre-cartao .apps span { display: block; aspect-ratio: 1; border: 2px solid var(--tinta); border-radius: 18%; background: #f4efe6; }
.sobre-seta { position: absolute; left: 42%; bottom: 14%; width: 17%; height: auto; overflow: visible; }
.sobre-qr { position: absolute; right: 6%; bottom: 8%; width: 30%; aspect-ratio: 1; background: #fff; display: block; }
.sobre-qr img { display: block; width: 100%; height: 100%; }

/* Ficha: fundo branco, faixas pretas, divisórias finas */
.sobre-dossie { left: 49.1%; top: 5.9%; width: 43.2%; height: 89%; transform: rotate(1deg); font-family: "Courier New", monospace; }
.sobre-dossie .faixa { position: absolute; left: 8.1%; width: 83.8%; margin: 0; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-size: clamp(12px, 1.4vw, 18px); font-weight: bold; letter-spacing: 1px; }
.faixa-info { top: 3.7%; height: 7.4%; }
.faixa-aparencia { top: 47.6%; height: 5.5%; }
.faixa-digitais { top: 67.4%; height: 5.7%; }

.lista-info { position: absolute; left: 7.9%; top: 14.5%; width: 50%; height: 27%; margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(6, 1fr); }
.grade-aparencia { position: absolute; left: 7.2%; top: 54.5%; width: 74%; height: 11.5%; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 1fr 1fr; column-gap: 30.4%; }
.lista-info li, .grade-aparencia li { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; border-bottom: 1px solid #000; font-size: clamp(10px, 1vw, 13px); padding-bottom: 2px; }
.lista-info li em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade-aparencia li { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0; }
.grade-aparencia li em { font-style: normal; white-space: nowrap; }
.lista-info .tarja { position: absolute; right: 0; top: 8%; bottom: 14%; width: 42%; background: #000; }

.foto-campo { position: absolute; left: 58.9%; top: 13.8%; width: 32.3%; height: 32.2%; margin: 0; padding: 0; border: 0; background: var(--cor, #1c2fd1); cursor: pointer; display: block; }
.foto-campo:focus-visible { outline: 2px dashed #000; outline-offset: 4px; }

.digitais { position: absolute; left: 6.8%; top: 72.9%; width: 83.4%; height: 22.7%; display: grid; grid-template-rows: 1fr 1fr; border: 1px solid #000; }
.digitais .mao { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid #000; }
.digitais .mao:last-child { border-bottom: 0; }
.digitais .mao > * { border-right: 1px solid #000; }
.digitais .mao > *:last-child { border-right: 0; }
.digitais .mao b { display: block; padding: 3px 4px; font-size: clamp(10px, 1vw, 13px); }

/* Cartas */
.arquivo { display: block; }
.cartas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.carta { background: #fff; padding: 16px; box-shadow: var(--sombra); }

/* Carimbo */
.caderno { max-width: 720px; margin: 0 auto; }
/* Carimbo: caderneta à direita e carimbo com almofada à esquerda (tinta azul escura, provisória) */
.composicao-carimbo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(96vw, 1300px, calc((100vh - 130px) * 1.77)); }
.composicao-carimbo svg { width: 100%; height: auto; display: block; }

/* Polaroids: tira horizontal com duas fileiras, rolagem lateral */
.tira-polaroids { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 260px; gap: 34px 40px; align-content: center; overflow-x: auto; overflow-y: hidden; height: calc(100vh - 80px); padding: 24px 40px; scrollbar-width: none; cursor: grab; user-select: none; }
.tira-polaroids::-webkit-scrollbar { display: none; }
.tira-polaroids.arrastando { cursor: grabbing; }
.tira-polaroids .polaroid { width: 260px; }

.binder .espelho-postal { display: none; }
.binder .espelho-postal.atual { display: grid; }
.binder .espelho-postal > .postal { margin: 0 56px; }
.polaroid {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 8px 8px 30px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  cursor: zoom-in;
  min-height: 0;
  transform: rotate(var(--giro, 0deg));
  transition: transform var(--transicao);
}
.polaroid:hover, .polaroid:focus-visible { transform: rotate(0deg) scale(1.03); }
.polaroid img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Binder de postais: sempre na vertical, dois por folha */
.binder { display: flex; justify-content: center; position: relative; padding: 14px 40px; overflow: visible; }
.espelho-postal {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  justify-items: center;
  align-items: center;
  width: max-content;
  margin: 0 auto;
  padding: 48px 0;
  background: var(--bolso);
  border-radius: 10px;
  box-shadow: var(--sombra);
  position: relative;
}
.espelho-postal.atual { display: grid; }
.espelho-postal::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 14px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0,0,0,0.12), rgba(0,0,0,0.02), rgba(0,0,0,0.12));
  pointer-events: none;
}
.postal {
  background: #fff;
  padding: 10px;
  height: min(calc(100vh - 272px), calc(75vw - 330px));
  aspect-ratio: 2 / 3;
  width: auto;
  box-shadow: var(--sombra);
  cursor: zoom-in;
}
.moldura { position: relative; width: 100%; height: 100%; overflow: hidden; container-type: size; }
.moldura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Foto 3:2 girada 90° para preencher a página vertical (medida pela própria moldura) */
.postal.horizontal .moldura img {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100cqh;
  height: 100cqw;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Virar página */

@keyframes virar {
  from { opacity: 0; transform: perspective(1200px) rotateY(-14deg) translateX(12px); }
  to   { opacity: 1; transform: none; }
}

/* Controles do livro */
.controles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.controles button {
  font-size: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--tinta);
  background: #fff;
  cursor: pointer;
}
.controles button:disabled { opacity: 0.35; cursor: default; }
.controles span { font-family: monospace; min-width: 64px; text-align: center; }

/* Visualização ampliada */
.ampliada {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.ampliada[hidden] { display: none; }
.ampliada img { max-width: 92vw; max-height: 88vh; }
.ampliada .fechar { position: absolute; top: 12px; left: 16px; font-size: 32px; background: none; border: 0; color: #fff; cursor: pointer; }

/* Celular: adaptação futura. Por enquanto, só ajuste mínimo */
@media (max-width: 720px) {
  .arquivo { grid-template-columns: 1fr; }
  .objeto { position: static; margin: 8px 0; }
}


/* Destaques: 4 cartas clicáveis */
.cartas-destaque { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 40px 56px; width: min(98vw, 1440px); height: min(82vh, 800px); }
.carta-destaque {
  background: #fff;
  border: 2px solid var(--tinta);
  padding: 14px 16px 12px;
  min-height: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--transicao);
}
.carta-destaque .capa { flex: 1; min-height: 0; margin: 4px 6% 0 12%; background: #d6d0c4; }
.carta-destaque .rodape { display: flex; align-items: center; gap: 8px; }
.carta-destaque:nth-child(odd) { transform: rotate(-1.2deg); }
.carta-destaque:nth-child(even) { transform: rotate(1.2deg); }
.carta-destaque:hover, .carta-destaque:focus-visible { transform: translateY(-6px) rotate(0deg); }
.carta-destaque .selo { font-size: 24px; color: var(--destaque); }
.carta-destaque .nome { font-weight: bold; font-size: 16px; }

/* Mesa: 5 objetos nas posições da foto (placeholders em cor sólida até as imagens reais) */
.mesa-objetos { position: absolute; top: calc(var(--rodape) + 12px); left: 0; right: 0; height: calc(100vh - var(--rodape) - 12px); }
/* A mesa ocupa a tela inteira (a partir de 64 px); o rodapé fica logo abaixo e aparece ao rolar até o fim */
#mesa { position: relative; }
.objeto {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  border: 0;
  font: inherit; font-size: clamp(12px, 1.3vw, 17px); font-weight: bold; text-align: center;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
  z-index: 1;
  cursor: pointer;
  transition: transform var(--transicao);
}
.objeto:hover, .objeto:focus-visible { transform: translate(-50%, calc(-50% - 5px)) rotate(0deg); }
.objeto-sobre { left: 22.6%; top: 30%; width: 18%; aspect-ratio: 0.81; background: #d9bf8c; color: #3a2a14; text-shadow: none; transform: translate(-50%, -50%) rotate(-10deg); }
.objeto-projetos { left: 50.4%; top: 53.9%; width: 17.1%; aspect-ratio: 1.34; background: #7fc23b; isolation: isolate; transform: translate(-50%, -50%) rotate(22deg); }
.objeto-projetos::before, .objeto-projetos::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.objeto-projetos::before { background: #e0692b; transform: translate(-6%, -58%) rotate(-6deg); }
.objeto-projetos::after { background: #f1efe6; transform: translate(-2%, -30%) rotate(-12deg); }
.objeto-carimbo { left: 30.9%; top: 72%; width: 12%; aspect-ratio: 0.67; background: #1f1f1f; transform: translate(-50%, -50%) rotate(13deg); }
.objeto-postais { left: 77.7%; top: 71.8%; width: 15%; aspect-ratio: 0.83; background: #d4652a; transform: translate(-50%, -50%) rotate(-3.5deg); }
.objeto-polaroids { left: 73.8%; top: 22.9%; width: 11.4%; aspect-ratio: 1.43; background: #5a2b2b; transform: translate(-50%, -50%) rotate(15deg); }

/* Símbolo de cada tela: canto superior direito, mesmo desenho do objeto da mesa (placeholder) */
.simbolo-tela { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; z-index: 5; fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linejoin: round; pointer-events: none; }
#sobre .simbolo-tela, #cartas .simbolo-tela, #projeto .simbolo-tela { stroke: #fff; }

/* Botão de menu, "Ver todos" e aba lateral com os objetos da mesa */
.menu-botao { position: fixed; top: 20px; left: 20px; z-index: 3; background: none; border: 0; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 7px; opacity: 0; pointer-events: none; transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 300ms ease; }
body.menu-visivel .menu-botao { opacity: 1; pointer-events: auto; }
/* Aberto: o botão acompanha a barra (fica no canto superior direito dela) e as três barras viram um X */
.menu-botao.aberto { transform: translateX(calc(min(320px, 85vw) - 100px)) rotate(180deg); z-index: 31; }
.menu-botao span { transition: transform 500ms ease, opacity 200ms ease; }
.menu-botao.aberto span:nth-child(1) { transform: translateY(15px) rotate(45deg); }
.menu-botao.aberto span:nth-child(2) { transform: scaleX(0); transition-duration: 320ms; }
.menu-botao.aberto span:nth-child(3) { transform: translateY(-15px) rotate(-45deg); }
.menu-botao > span { display: block; width: 50px; height: 8px; background: var(--tinta); border-radius: 6px; }
.ver-todos { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); background: none; border: 0; font: inherit; font-size: 18px; cursor: pointer; padding: 8px 16px; }
.gaveta {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(320px, 85vw);
  background: #fbf7ee;
  box-shadow: var(--sombra);
  padding: 24px;
  overflow-y: auto;
  z-index: 30;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--transicao), visibility var(--transicao);
}
.gaveta.aberta { transform: none; visibility: visible; }
.gaveta { transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 650ms; }
.gaveta li { opacity: 0; transform: translateX(-24px); transition: opacity 200ms ease, transform 250ms ease; }
.gaveta.aberta li { opacity: 1; transform: none; transition: opacity 350ms ease, transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.gaveta.aberta li:nth-child(1) { transition-delay: 120ms; }
.gaveta.aberta li:nth-child(2) { transition-delay: 180ms; }
.gaveta.aberta li:nth-child(3) { transition-delay: 240ms; }
.gaveta.aberta li:nth-child(4) { transition-delay: 300ms; }
.gaveta.aberta li:nth-child(5) { transition-delay: 360ms; }
.gaveta-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 20px; }
.gaveta ul { list-style: none; margin: 0; padding: 0; }
.gaveta li button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--tinta); font: inherit; font-size: 18px; padding: 14px 4px; cursor: pointer; }
.gaveta li button:hover, .gaveta li button:focus-visible { background: #fff; }

/* Página de cada projeto (conteúdo em branco por enquanto) */
#projeto { background: #2d2d2d; color: #2b2620; padding: 0; overflow: hidden; }
#projeto .voltar { position: absolute; top: 14px; left: 16px; z-index: 5; }
#projeto .voltar button { color: #fff; }
.projeto-folhas { height: 100vh; overflow-y: auto; padding: 56px 16px 48px;  scrollbar-width: none; }
.projeto-folhas::-webkit-scrollbar { display: none; }
.papel-continuo { position: relative; width: min(1400px, 72vw); margin: 0 auto; background: #f7f4ec; box-shadow: var(--sombra); padding: 40px; overflow: hidden; }
.folha { position: relative; }
.folha + .folha { margin-top: 48px; }
.folha-capa { min-height: 90vh; }
.folha:not(.folha-capa) { min-height: 80vh; }
.folha h2 { margin: 0 0 16px; font-size: 26px; }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cabecalho h1 { margin: 0; font-size: clamp(26px, 4vw, 44px); }
.cabecalho time { font-size: 18px; white-space: nowrap; }
.titulo-bloco { display: flex; flex-direction: column; gap: 6px; }
.ficha-texto { margin: 0; font-size: 16px; }
[data-projeto-texto] p { margin: 0 0 14px; line-height: 1.6; }
.capa-foto { position: absolute; left: 8%; right: 8%; top: 24%; bottom: 14%; background: var(--capa, #3142ff); transform: rotate(-1.5deg); box-shadow: 0 10px 18px rgba(0,0,0,0.25); }
.link-projeto { background: none; border: 0; padding: 0; font: inherit; font-weight: bold; cursor: pointer; text-align: left; }
.link-projeto:hover, .link-projeto:focus-visible { text-decoration: underline; }

/* Página de projetos: nomes à esquerda, pilha de cartas à direita */
#cartas { color: #fff; overflow: hidden; }
#cartas .voltar button { color: #fff; }
.projetos-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; min-height: calc(100vh - 80px); padding: 0 4vw 0 8vw; }
.nomes h2 { font-size: 22px; margin: 0 0 24px; }
.nomes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nome-projeto {
  background: none; border: 0; padding: 4px 0; color: #fff; font: inherit; font-size: 20px;
  text-align: left; cursor: pointer; transform-origin: left center;
  transition: transform var(--transicao);
}
/* Só o nome sob o mouse cresce; a área que reage é o próprio texto */
.nomes li { position: relative; width: max-content; transform-origin: left center; transition: transform 350ms ease; }
.nomes li:hover, .nomes li:focus-within { transform: scale(1.25); }
.pilha { position: relative; width: min(860px, 60vw); aspect-ratio: 1.94; justify-self: end; margin-right: 3vw; }
.carta-projeto {
  position: absolute; inset: 0;
  padding: 0; border: 0; font: inherit; color: #2d2d2d;
  background: #fff; box-shadow: var(--sombra); cursor: pointer;
  transition: transform 450ms ease, opacity 450ms ease, background-color 450ms ease;
}
.carta-projeto:not(.ativa) { background: #d4d4d2; }
.carta-projeto .capa { position: absolute; left: 19%; right: 3%; top: -4%; bottom: 18%; background: var(--capa, #3142ff); transform: rotate(4deg); box-shadow: 0 6px 12px rgba(0,0,0,0.2); }
.carta-projeto .selos { position: absolute; left: 7%; top: 14%; display: flex; flex-direction: column; gap: 12px; }
.carta-projeto .selos i { display: block; width: 70px; height: 70px; }
.carta-projeto .selos i:first-child { background: #e60000; }
.carta-projeto .selos i:last-child { background: #ffdd33; }

/* Ícones dos objetos (menu e rodapé) */
.icone-item { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* Rodapé preto nas telas da página inicial: adesivo à esquerda, menu no meio, QR code à direita */
.rodape-site { position: absolute; left: 0; right: 0; bottom: 0; height: var(--rodape); z-index: 4; background: #000; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 56px; }
.adesivo-rodape { width: 64px; height: 64px; flex: none; border-radius: 50%; background: #f9e25b; }
.rodape-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.rodape-nav button { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 8px 6px; font: inherit; font-size: 17px; color: #fff; cursor: pointer; }
.rodape-nav .icone-item { width: 24px; height: 24px; }
.qr-rodape { flex: none; width: 88px; height: 88px; background: #fff; padding: 3px; display: block; }
.qr-rodape img { display: block; width: 100%; height: 100%; }

/* Fundo da mesa (ampliado) atrás das telas dos objetos: aparece com fade in; transparente à esquerda para suavizar a transição */
.fundo-objeto {
  position: fixed; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 500ms ease;
  background:
    linear-gradient(to right, rgba(169, 117, 63, 0) 0%, #a9753f 60%),
    radial-gradient(ellipse at 30% 20%, #c79a62, #a9753f 70%) center / 130% 130% no-repeat fixed,
    #a9753f;
}
.fundo-objeto.visivel { opacity: 1; }

/* Entrada e saída pela direita: a tela desliza da borda direita ao abrir e volta a ela ao fechar */
.tela.de-objeto {
  opacity: 1;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 520ms;
}
.tela.de-objeto.ativa {
  visibility: visible;
  transform: none;
  transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}

/* Adesivos da lousa: ao pressionar, o adesivo se levanta do fundo (sombra maior); ao soltar, volta */
.peca.descolado {
  transform: rotate(var(--giro, 0deg)) translateY(-4px) scale(1.02);
  box-shadow: 0 16px 22px rgba(0, 0, 0, 0.3);
}

/* Lista de projetos: aparece depois que a tela desliza, vindo da esquerda; some rápido ao sair */
#cartas .nomes {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 250ms ease, transform 250ms ease;
}
#cartas.ativa .nomes {
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease 540ms, transform 600ms ease 540ms;
}

/* Polaroids: entram e saem empilhadas à esquerda; a tela só aparece e some (sem deslizar) */
/* Sobre mim, carimbo e postais abrem um pouco mais devagar */
#sobre.de-objeto, #carimbo.de-objeto, #postais.de-objeto { transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 600ms; }
#sobre.de-objeto.ativa, #carimbo.de-objeto.ativa, #postais.de-objeto.ativa { transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s; }
#polaroids.de-objeto { transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1) 1000ms, visibility 0s linear 1550ms; }
#polaroids.de-objeto.ativa { transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s; }
#polaroids .polaroid { transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 400ms ease; }
.polaroid.sem-animacao { opacity: 0; }
.polaroid.em-pilha { transform: translate(var(--x1, 0), var(--y1, 0)) rotate(var(--pgiro, 0deg)) scale(0.55); }

/* Foto ampliada: inclina seguindo o mouse (sem brilho ou holografia) */
.ampliada img { transition: transform 200ms ease-out; will-change: transform; }

/* A mesa continua por baixo enquanto um objeto está aberto (a parte transparente do fundo deixa ela aparecer) */
#inicio.sob-objeto { opacity: 1; }

/* Botão de fechar (X) aparece com fade in depois da transição, em todas as telas */
.voltar { opacity: 0; transition: opacity 250ms ease; }
.tela.ativa .voltar { opacity: 1; transition: opacity 400ms ease 500ms; }

/* Bordas escurecidas (no lugar de blur): topo e fim da página de projeto, somem quando não há mais o que rolar */
.escurecer-bordas::before, .escurecer-bordas::after {
  content: ""; position: absolute; left: 0; right: 0; height: 96px; z-index: 4;
  pointer-events: none; transition: opacity 300ms ease;
}
.escurecer-bordas::before { top: 0; background: linear-gradient(rgba(18, 15, 23, 0.6), rgba(18, 15, 23, 0.3) 45%, rgba(18, 15, 23, 0)); }
.escurecer-bordas::after { bottom: 0; background: linear-gradient(to top, rgba(18, 15, 23, 0.6), rgba(18, 15, 23, 0.3) 45%, rgba(18, 15, 23, 0)); }
.escurecer-bordas.sem-topo::before, .escurecer-bordas.sem-fim::after { opacity: 0; }


/* Voltar de um projeto para o menu de cartas: lista e X aparecem direto, sem fade */
#cartas.sem-entrada .nomes, #cartas.sem-entrada .voltar { opacity: 1; transform: none; transition: none; }

/* Telas sob uma carta: ficam paradas por baixo enquanto a carta faz fade in */
.tela.sob-projeto, #polaroids.de-objeto.sob-projeto { opacity: 1; visibility: visible; transform: none; transition: none; }
/* Voltar de um projeto para o menu de cartas: sem deslizar, sem fade na lista e no X */
#cartas.sem-entrada { transform: none; transition: none; }

/* Ver todos e rodapé: mesma fonte e posição de antes; a linha sob o texto cresce no hover */
.ver-todos { text-decoration: underline; transition: color 400ms cubic-bezier(0.25, 0.8, 0.25, 1); }
.ver-todos:hover, .ver-todos:focus-visible { color: #000; }
.rodape-nav button { position: relative; transition: color 400ms cubic-bezier(0.25, 0.8, 0.25, 1); }
.rodape-nav button:hover, .rodape-nav button:focus-visible { color: #fff; }
.ver-todos::after, .rodape-nav button::after {
  content: ""; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px;
  background: currentColor; pointer-events: none;
  transition: width 400ms cubic-bezier(0.25, 0.8, 0.25, 1), left 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.ver-todos:hover::after, .ver-todos:focus-visible::after, .rodape-nav button:hover::after, .rodape-nav button:focus-visible::after { width: 100%; left: 0; }

/* Botões das telas de objetos: X com leve zoom e giro anti-horário */
.voltar button { transition: transform 250ms ease; }
.voltar button:hover, .voltar button:focus-visible { transform: scale(1.15) rotate(-10deg); }
.voltar button { font-size: 30px; line-height: 1; }

/* Aplicativos no sobre mim: círculos com tooltip com o nome ao passar o mouse */
.sobre-cartao .apps { justify-items: center; }
.sobre-cartao .apps span {
  width: 50px; height: auto; aspect-ratio: 1; justify-self: center;
  border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  position: relative; cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.sobre-cartao .apps span:hover { transform: translateY(-3px); }
.sobre-cartao .apps span::after {
  content: attr(title); position: absolute; left: 50%; top: -34px; transform: translateX(-50%);
  background: var(--tinta); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 5px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.sobre-cartao .apps span:hover::after { opacity: 1; top: -40px; }

/* Botão voltar ao topo: só a seta, sem círculo. Aparece quando o mouse chega perto da borda de baixo
   (área de revelação maior que a de clique); sobre a seta, o texto aparece no lugar da seta */
.voltar-topo {
  position: fixed; bottom: 24px; right: 24px;
  width: 46px; height: 46px; padding: 0; border: 0; background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity 400ms ease;
}
#mesa.revelar .voltar-topo, #mesa .voltar-topo:hover, #mesa .voltar-topo:focus-visible { opacity: 1; pointer-events: auto; }
.voltar-topo .svgIcon { width: 13px; height: 16px; fill: #e1e1e1; flex: none; transition: transform 300ms ease, opacity 250ms ease; }
.voltar-topo .texto { position: absolute; color: #e1e1e1; font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; opacity: 0; transition: opacity 250ms ease; }
.voltar-topo:hover .svgIcon, .voltar-topo:focus-visible .svgIcon { transform: translateY(-200%); opacity: 0; }
.voltar-topo:hover .texto, .voltar-topo:focus-visible .texto { opacity: 1; }
#mesa .voltar-topo { z-index: 2; }

/* Voltar de um projeto ao menu de cartas e abrir um projeto: a lista da esquerda fica parada */
#cartas.sob-projeto .nomes, #cartas.sob-projeto .voltar { opacity: 1; transform: none; transition: none; }


/* Virada rígida do binder: a folha gira em torno da lombada, como uma tampa de pasta */
.virada { position: absolute; z-index: 5; perspective: 3200px; pointer-events: none; }
.virada-caixa { position: absolute; top: 0; overflow: hidden; background: var(--bolso); }
.virada-caixa.esq { border-radius: 10px 0 0 10px; }
/* Mesma silhueta do álbum durante a virada: sombra, divisória do meio e cantos da folha no lado livre */
.virada-lombada { position: absolute; top: 0; bottom: 0; left: 50%; width: 14px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(0,0,0,0.12), rgba(0,0,0,0.02), rgba(0,0,0,0.12)); pointer-events: none; }
.folha-virada.folha-dir .face { border-radius: 0 10px 10px 0; }
.folha-virada.folha-esq .face { border-radius: 10px 0 0 10px; }
.virada-caixa.dir { border-radius: 0 10px 10px 0; }
.folha-virada { position: absolute; top: 0; transform-style: preserve-3d; }
.folha-virada .face { position: absolute; inset: 0; overflow: hidden; background: var(--bolso); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.folha-virada .face.verso { transform: rotateY(180deg); }
.pagina-virada { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bolso); }
.reflexo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.7) 50%, transparent 75%); opacity: var(--brilho, 0); }

/* Setas laterais: só a seta aparece quando o mouse passa pela faixa de cada lado */
.seta { position: absolute; top: 25%; height: 50%; width: 88px; z-index: 6; padding: 0; border: 0; background: none; color: var(--tinta); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 320ms ease; }
.seta svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms ease; }
.seta:hover, .seta:focus-visible { opacity: 1; }
.seta-ant { left: 0; }
.seta-prox { right: 0; }
.seta-ant:hover svg { transform: translateX(-4px); }
.seta-prox:hover svg { transform: translateX(4px); }
.seta.fim { opacity: 0 !important; pointer-events: none; }