/* ═══════════════════════════════════════════════════════════
   V2 · STICKER-BOMB LAYER
   pastilhas, autocolantes mal colados, tazos, tamagotchi,
   game boy, mega drive, vhs · era 90s/2000s
   ═══════════════════════════════════════════════════════════ */

/* moldura CRT global (estilo pxpush) */
.crt-bezel {
  position: fixed; inset: 0; z-index: 9002; pointer-events: none;
  border-radius: 22px;
  box-shadow:
    inset 0 0 0 2px rgba(8,15,15,0.9),
    inset 0 0 60px rgba(8,15,15,0.55),
    0 0 0 30px var(--preto);
}
@media (max-width: 760px) {
  .crt-bezel { border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(8,15,15,0.9), inset 0 0 34px rgba(8,15,15,0.5), 0 0 0 14px var(--preto); }
}

/* ── stickers primitivos ── */
.hero-stickers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sticker {
  position: absolute; transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(4px 6px 0 rgba(8,15,15,0.4));
  user-select: none; -webkit-user-select: none;
}
.hero-stickers .sticker { pointer-events: auto; }
.sticker.drag { cursor: grab; touch-action: none; }
.sticker.drag:active { cursor: grabbing; }
.sticker.dragging { filter: drop-shadow(8px 12px 2px rgba(8,15,15,0.45)); z-index: 50; }
.sticker img { width: 100%; height: auto; display: block; pointer-events: none; }

.sticker-txt {
  background: var(--branco); color: var(--preto);
  font-weight: 900; font-size: clamp(0.85rem, 1.4vw, 1.15rem); letter-spacing: 0.06em;
  padding: 0.5rem 1rem; border: 3px solid var(--preto);
  box-shadow: 4px 4px 0 var(--preto);
}
/* canto descolado */
.sticker-txt::after {
  content: ''; position: absolute; right: -3px; bottom: -3px;
  width: 16px; height: 16px;
  background: linear-gradient(135deg, transparent 48%, #b9b7a8 50%, #8f8d80 100%);
  border-left: 1px solid rgba(8,15,15,0.25);
}

.starburst {
  width: clamp(84px, 9vw, 120px); aspect-ratio: 1;
  background: var(--amarelo); color: var(--preto);
  display: grid; place-items: center; text-align: center;
  font-weight: 900; font-size: clamp(0.7rem, 1vw, 0.9rem); line-height: 1.15;
  clip-path: polygon(50% 0%, 59% 12%, 72% 5%, 75% 19%, 90% 18%, 86% 32%, 100% 38%, 89% 48%, 99% 60%, 85% 65%, 89% 80%, 74% 78%, 71% 93%, 59% 85%, 50% 100%, 41% 85%, 29% 93%, 26% 78%, 11% 80%, 15% 65%, 1% 60%, 11% 48%, 0% 38%, 14% 32%, 10% 18%, 25% 19%, 28% 5%, 41% 12%);
}
.starburst span { transform: rotate(-8deg); }

.memcard {
  background: #2a2a2e; color: var(--branco);
  border: 3px solid var(--preto); border-radius: 8px 8px 3px 3px;
  padding: 0.55rem 0.8rem 0.5rem; text-align: left;
  box-shadow: 4px 4px 0 rgba(8,15,15,0.5);
  min-width: 128px;
}
.memcard-slot { display: block; width: 46%; height: 7px; background: #17171a; border-radius: 2px; margin-bottom: 0.45rem; }
.memcard b { display: block; font-size: 0.62rem; letter-spacing: 0.14em; color: var(--amarelo); }
.memcard i { display: block; font-style: normal; font-size: 0.55rem; letter-spacing: 0.1em; color: rgba(220,219,205,0.65); }

.barcode-sticker {
  background: var(--branco); color: var(--preto);
  border: 2px solid var(--preto); padding: 0.45rem 0.7rem 0.4rem;
  text-align: center; box-shadow: 3px 3px 0 rgba(8,15,15,0.45);
}
.barcode { display: block; width: 110px; height: 26px; margin-bottom: 0.25rem;
  background: repeating-linear-gradient(90deg, var(--preto) 0 2px, transparent 2px 4px, var(--preto) 4px 7px, transparent 7px 8px, var(--preto) 8px 9px, transparent 9px 12px);
}
.barcode-sticker b { font-size: 0.58rem; letter-spacing: 0.22em; }

.tape-strip {
  position: absolute; z-index: 4;
  width: 92px; height: 26px;
  background: rgba(220, 219, 205, 0.5);
  border-left: 1px dashed rgba(8,15,15,0.2); border-right: 1px dashed rgba(8,15,15,0.2);
  transform: rotate(var(--rot, -45deg));
  box-shadow: 0 1px 3px rgba(8,15,15,0.18);
}

/* ── mega drive cartridge ── */
.tracklist-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cartridge {
  flex: 0 0 auto; width: 190px; background: #1c1c1f;
  border: 3px solid var(--preto); border-radius: 10px 10px 4px 4px;
  padding: 0.8rem 0.9rem 1rem; transform: rotate(3deg);
  box-shadow: 7px 7px 0 rgba(8,15,15,0.25);
}
.cartridge-grip { height: 12px; margin-bottom: 0.7rem;
  background: repeating-linear-gradient(90deg, #2e2e33 0 10px, #1c1c1f 10px 16px); border-radius: 3px; }
.cartridge-label {
  background: var(--vermelho); border: 2px solid var(--preto);
  padding: 0.6rem 0.6rem 0.55rem; text-align: center; color: var(--branco);
}
.cartridge-label img { margin: 0 auto 0.3rem; }
.cartridge-label b { display: block; font-size: 0.8rem; letter-spacing: 0.16em; font-weight: 900; }
.cartridge-label i { display: block; font-style: normal; font-size: 0.55rem; letter-spacing: 0.14em; opacity: 0.8; margin-top: 0.2rem; }
@media (max-width: 700px) { .cartridge { display: none; } }

/* ── layout da secção azul: foto+texto | tamagotchi ── */
.erros-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 460px) 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start; position: relative; z-index: 2;
}
.erros-foto-col .win95-photo { max-width: 440px; }
.erros-foto-col .erros-note { margin-top: 2.2rem; }
@media (max-width: 860px) {
  .erros-bottom { grid-template-columns: 1fr; }
  .erros-foto-col .win95-photo { margin-inline: auto; }
}

/* ── stickers a descolar / cair ── */
.sticker.peeling {
  filter: drop-shadow(10px 14px 3px rgba(8,15,15,0.5));
  z-index: 60;
}
.sticker.fallen { cursor: default; pointer-events: none; }

/* ── tamagotchi ── */
.tama-block {
  display: flex; flex-direction: column; gap: 1.8rem;
  align-items: flex-start; position: relative; z-index: 2;
}
.tama-block .tamagotchi { align-self: center; }
@media (max-width: 860px) { .tama-block { align-items: center; text-align: center; } }
.tamagotchi { filter: drop-shadow(8px 10px 0 rgba(8,15,15,0.35)); }
.tama-shell {
  width: 250px; padding: 2rem 1.6rem 1.6rem;
  background: var(--amarelo);
  border: 4px solid var(--preto);
  border-radius: 48% 48% 46% 46% / 40% 40% 44% 44%;
  text-align: center; transform: rotate(-2deg);
}
.tama-brand { display: block; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.3em; color: var(--preto); margin-bottom: 0.7rem; }
.tama-screen {
  background: #9aa87c; border: 4px solid var(--preto); border-radius: 10px;
  padding: 0.9rem 0.7rem 0.7rem; color: var(--preto);
  box-shadow: inset 0 0 0 3px rgba(8,15,15,0.12), inset 3px 3px 8px rgba(8,15,15,0.22);
}
.tama-pet {
  width: 8px; height: 8px; margin: 0.4rem auto 1.6rem;
  image-rendering: pixelated;
  position: relative; left: -24px;
}
.tama-pet.bounce { animation: tama-bounce 0.5s var(--ease-out); }
@keyframes tama-bounce {
  0% { transform: translateY(0); }
  35% { transform: translateY(-9px); }
  70% { transform: translateY(0); }
  85% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
.tama-meter { display: flex; gap: 4px; justify-content: center; margin-bottom: 0.5rem; }
.tama-meter span { width: 16px; height: 9px; border: 2px solid var(--preto); background: transparent; }
.tama-meter span.on { background: var(--preto); }
.tama-msg { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.16em; min-height: 1.6em; }
.tama-btns { display: flex; justify-content: center; gap: 1.1rem; margin-top: 1.1rem; }
.tama-btns button {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--vermelho); border: 3px solid var(--preto);
  cursor: pointer; box-shadow: 0 3px 0 var(--preto);
  transition: transform 0.09s var(--ease-out), box-shadow 0.09s var(--ease-out);
}
.tama-btns button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--preto); }
.tama-copy h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.3rem); margin-bottom: 0.9rem; text-shadow: 3px 3px 0 rgba(8,15,15,0.3); }
.tama-copy p { max-width: 46ch; font-weight: 500; }
.tama-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.9rem; font-size: 0.78rem; font-weight: 700; opacity: 0.85; }
@media (max-width: 760px) { .tama-legend { justify-content: center; } }

/* ── vhs shelf ── */
.vhs-shelf { margin-top: clamp(2.5rem, 5vw, 4rem); }
.vhs-shelf-label { margin-bottom: 1.4rem; }
.vhs-pile { display: grid; gap: 10px; max-width: 760px; }
.vhs {
  display: flex; align-items: center; gap: 1rem;
  background: #131316; border: 3px solid var(--preto);
  padding: 0.7rem 1.1rem; transform: rotate(var(--rot, 0deg));
  box-shadow: 5px 5px 0 rgba(220,219,205,0.14);
}
.vhs-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dot, var(--vermelho)); flex: 0 0 auto; }
.vhs b {
  font-family: var(--display); font-weight: 800; font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--branco);
}
.vhs i { font-style: normal; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; color: var(--branco-dim); margin-left: auto; text-align: right; }
.vhs-tag {
  flex: 0 0 auto; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.2em;
  border: 2px solid var(--branco-dim); color: var(--branco-dim); padding: 0.15rem 0.4rem;
}
@media (max-width: 560px) { .vhs i { display: none; } }

/* ── game boy ── */
.gameboy-wrap { display: flex; justify-content: center; margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.gameboy {
  width: 240px; background: #cfccbd;
  border: 4px solid var(--preto); border-radius: 12px 12px 40px 12px;
  padding: 1rem 1.1rem 1.3rem; transform: rotate(2deg);
  box-shadow: 9px 9px 0 rgba(220,219,205,0.16);
  color: var(--preto); position: relative;
}
.gameboy-top { display: flex; gap: 6px; margin-bottom: 0.7rem; }
.gameboy-top span { flex: 1; height: 4px; background: rgba(8,15,15,0.25); border-radius: 2px; }
.gameboy-screen-frame {
  background: #55565c; border-radius: 8px 8px 22px 8px;
  padding: 0.8rem 1rem 1rem; text-align: center;
}
.gameboy-screen-label { font-size: 0.42rem; letter-spacing: 0.16em; color: #cfccbd; font-weight: 700; margin-bottom: 0.5rem; }
.gameboy-screen {
  background: #86934e; border: 3px solid #2c2d31; height: 96px;
  display: grid; place-items: center; padding: 0.5rem;
}
.gameboy-screen p {
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.14em; color: #1d2410;
  text-transform: uppercase; animation: gb-blink 1.4s steps(2) infinite;
}
@keyframes gb-blink { 50% { opacity: 0.35; } }
.gameboy-logo { margin: 0.8rem 0 0.6rem; font-weight: 900; font-style: italic; font-size: 0.78rem; letter-spacing: 0.06em; color: #34355c; }
.gameboy-logo span { color: var(--vermelho); margin-left: 3px; }
.gameboy-controls { display: flex; justify-content: space-between; align-items: center; }
.gameboy-dpad { position: relative; width: 62px; height: 62px; }
.dp-v, .dp-h { position: absolute; background: #2c2d31; border-radius: 4px; }
.dp-v { width: 20px; height: 62px; left: 21px; top: 0; }
.dp-h { width: 62px; height: 20px; left: 0; top: 21px; }
.gameboy-ab { display: flex; gap: 10px; transform: rotate(-22deg); }
.gameboy-ab button {
  width: 30px; height: 30px; border-radius: 50%;
  background: #99275f; color: rgba(220,219,205,0.7);
  border: 2px solid #2c2d31; font-size: 0.6rem; font-weight: 900;
  cursor: pointer; box-shadow: 0 2px 0 #2c2d31;
  font-family: var(--body);
}
.gameboy-ab button:active { transform: translateY(2px); box-shadow: none; }
.gameboy-startselect { display: flex; gap: 14px; justify-content: center; margin-top: 0.9rem; }
.gb-flat {
  font-family: var(--body); font-size: 0.5rem; font-weight: 900; letter-spacing: 0.12em; color: #34355c;
  padding-top: 14px; position: relative; background: none; border: none; cursor: pointer;
}
.gb-flat::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) rotate(-22deg);
  width: 26px; height: 9px; background: #55565c; border-radius: 5px; border: 1px solid #2c2d31;
  transition: transform 0.09s var(--ease-out);
}
.gb-flat:active::before { transform: translateX(-50%) rotate(-22deg) translateY(2px); }

/* d-pad clicável */
.dp-btn { position: absolute; background: transparent; border: none; cursor: pointer; padding: 0; }
.dp-up { left: 21px; top: 0; width: 20px; height: 22px; }
.dp-down { left: 21px; bottom: 0; width: 20px; height: 22px; }
.dp-left { left: 0; top: 21px; width: 22px; height: 20px; }
.dp-right { right: 0; top: 21px; width: 22px; height: 20px; }
.dp-btn:active ~ .dp-v, .dp-btn:active ~ .dp-h { filter: brightness(1.25); }
.gameboy-dpad:has(.dp-btn:active) .dp-v, .gameboy-dpad:has(.dp-btn:active) .dp-h { filter: brightness(1.3); }

/* ecrã em modo invertido (SELECT) */
.gameboy-screen.gb-invert { background: #1d2410; }
.gameboy-screen.gb-invert p { color: #86934e; }

/* botões da barra win95 */
.win95-btns button {
  font-family: var(--body); font-style: normal; width: 18px; height: 18px; font-size: 0.62rem;
  display: grid; place-items: center;
  background: #d8d5c8; color: var(--preto);
  border: 1px solid var(--preto);
  box-shadow: inset 1px 1px 0 #fdfcf5;
  cursor: pointer; padding: 0; line-height: 1;
}
.win95-btns button:active { box-shadow: inset 1px 1px 0 #8b897e; }
.win95.win-min .win95-body, .win95.win-min .win95-actions { display: none; }
.win95.win-max { transform: rotate(0deg) scale(1.04); }

/* reduzir stickers no mobile para não tapar conteúdo */
@media (max-width: 760px) {
  .hero-stickers .barcode-sticker, .hero-stickers .memcard { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gameboy-screen p, .tama-pet.bounce { animation: none !important; }
  .tazo-disc { transition: none !important; }
}

/* fotos da sessao (drive) */
.win95-photo {
  position: relative; transform: rotate(var(--rot, 0deg));
  border: 3px solid var(--preto);
  box-shadow: 8px 8px 0 rgba(8,15,15,0.45);
}
.win95-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.win95-photo figcaption { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%) rotate(-1.5deg); white-space: nowrap; font-size: 0.6rem; }

.tracklist-foto { margin-top: 3.5rem; display: flex; justify-content: center; }
.tracklist-foto figure { position: relative; width: min(720px, 100%); transform: rotate(var(--rot, 0deg)); }
.tracklist-foto img { border: 4px solid var(--preto); box-shadow: 10px 10px 0 var(--preto); display: block; }
.tracklist-foto figcaption { position: absolute; left: -0.9rem; bottom: 1.4rem; }
.tracklist-rule { margin-top: 3rem; }

.processo-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.processo-foto { position: relative; transform: rotate(var(--rot, 0deg)); }
.processo-foto img { border: 4px solid var(--preto); box-shadow: 10px 10px 0 var(--preto); display: block; }
.processo-foto figcaption { position: absolute; right: -0.8rem; top: 1.4rem; }
@media (max-width: 900px) {
  .processo-grid { grid-template-columns: 1fr; }
  .processo-foto { max-width: 560px; margin-inline: auto; }
}

/* ── transições de secção: cortes diagonais sobrepostos ── */
.slant { position: relative; }
.slant-a {
  clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -3vw;
  padding-top: calc(clamp(5rem, 11vw, 9rem) + 3vw) !important;
}
.slant-b {
  clip-path: polygon(0 0, 100% 3vw, 100% 100%, 0 100%);
  margin-top: -3vw;
  padding-top: calc(clamp(5rem, 11vw, 9rem) + 3vw) !important;
}
.arcade.slant-b { padding-top: calc(clamp(6rem, 13vw, 11rem) + 3vw) !important; }

/* ── animação a nível de píxeis ── */
.pxwrap { position: relative; }
.pxgrid {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr);
}
.pxgrid i { background: var(--preto); }

.px-float {
  position: absolute; z-index: 1; pointer-events: none;
  image-rendering: pixelated;
}

/* ── mega drive + tv com jogo 16-bit ── */
.megadrive-block {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
@media (max-width: 860px) { .megadrive-block { grid-template-columns: 1fr; } }
.md-tv {
  background: #1c1c1f; border: 4px solid var(--preto); border-radius: 16px;
  padding: clamp(1rem, 2vw, 1.6rem);
  box-shadow: 10px 10px 0 rgba(8,15,15,0.25);
  transform: rotate(-1deg);
}
.md-screen {
  border: 4px solid #0c0c0e; border-radius: 10px; overflow: hidden;
  background: var(--preto); position: relative;
}
.md-screen canvas {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated;
}
.md-tv-brand { display: block; margin-top: 0.7rem; text-align: center; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.3em; color: rgba(220,219,205,0.55); }
.md-console {
  position: relative; width: 210px; height: 64px;
  background: #17171a; border: 3px solid var(--preto); border-radius: 8px;
  margin-bottom: 1.4rem;
  box-shadow: 6px 6px 0 rgba(8,15,15,0.22);
}
.md-slot { position: absolute; top: 10px; left: 18px; right: 18px; height: 7px; background: #060607; border-radius: 2px; }
.md-16bit { position: absolute; bottom: 9px; left: 18px; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.2em; color: var(--amarelo); font-style: italic; }
.md-power { position: absolute; bottom: 11px; right: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 6px var(--vermelho); }
.md-side h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 0.8rem; }
.md-side p { color: var(--preto-dim); max-width: 44ch; margin-bottom: 1.4rem; }

/* ── spray graffiti ── */
@media (pointer: fine) {
  body.spray-on, body.spray-on .hero, body.spray-on section {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'><g transform='rotate(8 26 26)'><rect x='17' y='18' width='18' height='28' rx='3' fill='%23AF3431' stroke='%23080F0F' stroke-width='3'/><rect x='17' y='26' width='18' height='9' fill='%23DCDBCD'/><rect x='20' y='12' width='12' height='7' fill='%23555' stroke='%23080F0F' stroke-width='2'/><rect x='23' y='6' width='6' height='6' fill='%23080F0F'/><circle cx='41' cy='8' r='2.2' fill='%233189AF'/><circle cx='46' cy='14' r='1.7' fill='%23DDA61D'/><circle cx='44' cy='4' r='1.4' fill='%23AF3431'/></g></svg>") 26 6, auto;
  }
}
.spray-splat { position: absolute; z-index: 8600; pointer-events: none; }

/* ── v3 fixes ── */
/* duas linhas horizontais de marquee no fim do hero */
.hero-marquees { margin-top: auto; }
.hero-marquee-b { background: var(--amarelo); border-top: none; }
.hero-marquee-b .marquee-track > span { color: var(--preto); }
.hero-marquee-b .mq-bolt { color: var(--vermelho); }

/* logos de clientes em grande, cada um na sua caixa (sem sobreposição) */
.client-logos img {
  height: 170px;
  width: 300px;
  object-fit: contain;
  flex: 0 0 auto;
}
.clients-marquee { padding-block: 2.6rem; }

/* sonic a correr por cima do canvas */
.md-sprite {
  position: absolute; left: 26px; bottom: 24px;
  height: 88px; width: auto;
  image-rendering: pixelated; pointer-events: none;
}
.step-num { display: inline-block; }

/* posts do feed mais pequenos, sempre 3 na mesma linha */
.cases {
  max-width: 780px; margin-inline: auto;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
@media (max-width: 640px) {
  .cases { grid-template-columns: 1fr; max-width: 340px; }
}

/* ── mobile: espaço reservado para imagens (mata o layout shift dos lazy loads) ── */
.manifesto-img img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.win95-photo img { aspect-ratio: 900 / 1244; object-fit: cover; width: 100%; }
.processo-foto img, .tracklist-foto img, .equipa-photo img { aspect-ratio: 1400 / 1876; object-fit: cover; width: 100%; }
.socio img { width: 100%; }
.case img { width: 100%; }

/* mobile: menos peso visual, mesma identidade */
@media (max-width: 760px) {
  .grain { animation: none; }
  .px-float { display: none; }
  .cases { gap: 1.2rem; }
}