@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;0,800;0,900;1,600&display=swap');

/* =====================================================================
   NUUB COLLECTION — identidade visual
   Amarelo e azul da marca, fundo escuro azulado, verde retro de apoio.
   ===================================================================== */
:root {
  --nuub-fundo:      #080D16;
  --nuub-superficie: #101827;
  --nuub-borda:      #1E2A3D;
  --nuub-amarelo:    #FCC015;
  --nuub-azul:       #0098FF;
  --nuub-verde:      #2FE0D0;
  --nuub-branco:     #FFFFFF;
  --nuub-texto:      #EAF1FA;
  --nuub-suave:      #7E90A8;
  --nuub-preto:      #0A0A0C;

  color-scheme: dark;

  --raio-carta: 16px;
  --raio-ui:    10px;
  --largura:    1200px;
}

/* ângulo registrado: sem isso o navegador não sabe animar um gradiente girando */
@property --angulo {
  syntax: '<angle>';
  inherits: false;
  initial-value: 140deg;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 10% -10%, rgba(0,152,255,.16), transparent 62%),
    radial-gradient(880px 520px at 94% 2%, rgba(252,192,21,.10), transparent 60%),
    var(--nuub-fundo);
  color: var(--nuub-texto);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 3px solid var(--nuub-verde); outline-offset: 3px; border-radius: 4px; }

.envelope { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }

/* ---------------- cabeçalho ---------------- */

.topo {
  padding: 2.2rem 0 1.2rem;
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  align-items: center; justify-content: space-between;
}
.marca {
  display: flex; align-items: center; gap: .9rem;
  text-decoration: none;
}
.marca img { height: 92px; width: auto; }
/* "COLLECTION" no peso da marca, com brilho holográfico correndo pelas letras */
.marca__sub {
  margin: 0;
  padding-left: 1rem;
  border-left: 1px solid var(--nuub-borda);
  font-size: clamp(1.4rem, 3.2vw, 2.15rem);
  font-weight: 900; font-style: italic;
  letter-spacing: .04em; line-height: 1;
  text-transform: uppercase;
  background: linear-gradient(100deg,
    #FFFFFF 0%, var(--nuub-amarelo) 16%, #FFF3C4 26%, var(--nuub-verde) 42%,
    var(--nuub-azul) 58%, #FFFFFF 72%, var(--nuub-amarelo) 88%, #FFFFFF 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holoTexto 7s linear infinite;
  /* o brilho só vale se o degradê estiver visível: sem suporte, fica amarelo */
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .marca__sub { color: var(--nuub-amarelo); -webkit-text-fill-color: currentColor; }
}
@keyframes holoTexto {
  from { background-position: 0% 0; }
  to   { background-position: -300% 0; }
}

.placar { display: flex; gap: 1.6rem; }
.placar__item { text-align: right; }
.placar__valor { font-size: 1.45rem; font-weight: 800; line-height: 1; display: block; color: var(--nuub-amarelo); }
.placar__rotulo { font-size: .74rem; color: var(--nuub-suave); font-weight: 600; }

/* ---------------- manifesto ---------------- */

.manifesto {
  width: 100%;
  margin: .6rem 0 2rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--nuub-borda);
}
.manifesto__titulo {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 800; letter-spacing: -.03em;
  margin: 0 0 .7rem;
  color: var(--nuub-amarelo);
}
.manifesto p {
  color: #AFC0D4; margin: 0 0 .8rem; font-size: .97rem; line-height: 1.65;
}
.manifesto__abertura { color: #C8D6E6; }
.manifesto__resto { border: 0; padding: 0; }
.manifesto__resto summary {
  cursor: pointer; color: var(--nuub-azul); font-weight: 700;
  font-size: .88rem; margin-bottom: .8rem; list-style: none;
}
.manifesto__resto summary::-webkit-details-marker { display: none; }
.manifesto__resto[open] summary { display: none; }

/* O bloco ocupa a largura toda (título e divisória), mas a linha de texto fica
   limitada: linha muito longa cansa a leitura e faz o olho perder o retorno. */
.manifesto__abertura,
.manifesto__resto p { max-width: 74ch; }
.manifesto__abertura { font-size: 1.03rem; }

/* ---------------- filtros ---------------- */

.filtros {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: 1rem 0 .8rem;
  border-top: 1px solid var(--nuub-borda);
  margin-top: .6rem;
}
.filtros + .filtros { border-top: 0; padding-top: 0; margin-top: 0; }

.filtro {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem;
  border: 1px solid var(--nuub-borda);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  color: var(--nuub-suave);
  font: inherit; font-size: .85rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.filtro:hover { color: var(--nuub-texto); border-color: var(--nuub-azul); }
.filtro[aria-current="true"] {
  color: var(--nuub-preto);
  border-color: transparent;
  background: var(--nuub-amarelo);
}
.filtro--marca[aria-current="true"] { background: var(--nuub-azul); color: #fff; }
.filtro__contagem { opacity: .65; font-weight: 800; }

.busca { margin-left: auto; display: flex; gap: .4rem; }
.busca input {
  background: var(--nuub-superficie);
  border: 1px solid var(--nuub-borda);
  color: var(--nuub-texto);
  border-radius: 999px;
  padding: .48rem 1rem;
  font: inherit; font-size: .85rem;
  min-width: 215px;
}

.marcas-seletor { display: none; margin: 0 0 1.2rem; }
.marcas-seletor select {
  width: 100%;
  background: var(--nuub-amarelo);
  color: var(--nuub-preto);
  border: 0; border-radius: 999px;
  padding: .7rem 1.1rem;
  font: inherit; font-weight: 800; font-size: .92rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--nuub-preto) 50%),
                    linear-gradient(135deg, var(--nuub-preto) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* ---------------- grade de cartas ---------------- */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.6rem 1.35rem;
  padding: 1.4rem 0 4rem;
}

/* as cartas da mesma linha esticam até a altura da mais alta, então o rodapé
   fica alinhado mesmo quando um título ocupa duas linhas e o outro só uma */
/* min-width: 0 é obrigatório em item flexível: sem isso a carta se recusa a
   encolher abaixo do conteúdo e transborda a coluna onde está */
.carta { perspective: 1200px; display: flex; min-width: 0; }
.carta__link { text-decoration: none; display: block; width: 100%; min-width: 0; }

.carta__moldura {
  position: relative;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: var(--raio-carta);
  padding: 10px;
  display: flex; flex-direction: column; gap: .5rem;
  background:
    linear-gradient(var(--nuub-superficie), #0B1120) padding-box,
    linear-gradient(150deg, var(--nuub-borda), #2C3B54 45%, var(--nuub-borda)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.9);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease, box-shadow .25s ease;
  transform-style: preserve-3d;
  overflow: hidden;
}
.carta__link:hover .carta__moldura,
.carta__link:focus-visible .carta__moldura { box-shadow: 0 22px 42px -20px rgba(0,152,255,.65); }

.carta__topo {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nuub-suave); min-height: 1.3rem;
}
.carta__marca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.carta__marcas { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }

/* bônus exclusivo: selo azul da marca */
.carta__bonus {
  color: #fff;
  background: var(--nuub-azul);
  border-radius: 5px;
  padding: .12rem .38rem;
  font-weight: 600; font-size: .68rem; letter-spacing: .04em;
  line-height: 1;
  box-shadow: 0 0 12px rgba(0,152,255,.45);
}
.carta--fora .carta__bonus { box-shadow: none; opacity: .85; }
/* selo do número de catálogo: leve, com contorno, em vez de peso pesado */
.carta__numero {
  color: var(--nuub-amarelo);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: .18rem .4rem;
  border: 1px solid rgba(252,192,21,.45);
  border-radius: 5px;
  background: rgba(252,192,21,.10);
  white-space: nowrap;
}
.carta__numero span { opacity: .55; margin-right: .05em; font-weight: 500; }
.carta--fora .carta__numero { border-color: rgba(252,192,21,.3); background: rgba(252,192,21,.06); }

/* número que já carrega o DX: mesmo dourado do selo, em formato de etiqueta */
.carta__selo--numero {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  padding: .18rem .45rem;
}
.carta__selo--numero span { opacity: .5; margin-right: .04em; }

.carta__selo {
  color: var(--nuub-preto);
  background: linear-gradient(100deg, #FFE9A8, var(--nuub-amarelo) 45%, #C88A16);
  border-radius: 5px; padding: .12rem .4rem;
  font-weight: 600; letter-spacing: .06em;
  box-shadow: 0 0 12px rgba(252,192,21,.5);
}

/* bootleg: o oposto do dourado. Aço riscado, para não parecer premium. */
.carta__selo--bootleg {
  color: #fff;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 4px, rgba(255,255,255,0) 4px 8px),
    linear-gradient(100deg, #56657B, #2A3447);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: none;
  letter-spacing: .08em;
  font-size: .68rem;
}
.carta--fora .carta__selo--bootleg { opacity: .82; border-color: rgba(255,255,255,.28); }

/* a foto é que tem proporção fixa; a altura da carta vem dela mais o texto */
.carta__arte {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 4 / 5;
  border-radius: 9px; overflow: hidden;
  background: #060A12; isolation: isolate;
}
.carta__arte img {
  width: 100%; height: 100%; object-fit: cover;
  transition: filter .35s ease, transform .5s ease;
}
.carta__link:hover .carta__arte img { transform: scale(1.04); }

.carta__texto { padding: 0 .15rem; flex: 1 1 auto; }
.carta__titulo {
  margin: 0; font-size: .8rem; font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.carta__linha {
  margin: .15rem 0 0; font-size: .67rem; color: var(--nuub-suave); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.carta__base {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .62rem; font-weight: 800;
  border-top: 1px solid var(--nuub-borda);
  padding-top: .4rem;
}
.carta__ano { color: var(--nuub-suave); font-weight: 700; }

/* estados */
.carta--colecao  .carta__base { color: var(--nuub-verde); }
.carta--caminho  .carta__base { color: var(--nuub-azul); }
.carta--desejada .carta__base { color: var(--nuub-suave); }
.carta--arquivada .carta__base { color: var(--nuub-amarelo); }

/* fora da coleção: dessaturada */
.carta--fora .carta__arte img { filter: grayscale(1) brightness(.72) contrast(1.05); }
.carta--fora .carta__moldura { opacity: .9; }
.carta--fora .carta__arte::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8,13,22,.72));
}
.carta--fora .carta__link:hover .carta__arte img { filter: grayscale(.5) brightness(.92); }

/* DX: carta shine holográfica */
.carta__holo, .carta__brilho { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.carta--dx .carta__moldura {
  --angulo: 140deg;
  background:
    linear-gradient(var(--nuub-superficie), #0B1120) padding-box,
    linear-gradient(var(--angulo), #FFE9A8, var(--nuub-amarelo) 26%, var(--nuub-azul) 52%,
                    var(--nuub-verde) 74%, #FFE9A8) border-box;
  border-width: 2px;
  transition: transform .25s ease, box-shadow .4s ease, filter .4s ease, --angulo 1.1s ease;
}

/* aura: a borda gira e a carta acende em amarelo e azul */
.carta--dx .carta__link:hover .carta__moldura,
.carta--dx .carta__link:focus-visible .carta__moldura {
  --angulo: 500deg;
  box-shadow:
    0 0 0 1px rgba(252,192,21,.55),
    0 0 22px -2px rgba(252,192,21,.5),
    0 0 50px 2px rgba(0,152,255,.34),
    0 22px 42px -20px rgba(0,0,0,.9);
  filter: saturate(1.08);
}
/* Em repouso a foto aparece limpa: a holografia só entra ao passar o mouse. */
.carta--dx .carta__holo {
  opacity: 0;
  background: repeating-linear-gradient(115deg,
    rgba(252,192,21,.55) 0%, rgba(47,224,208,.5) 9%, rgba(0,152,255,.55) 18%,
    rgba(255,255,255,.35) 26%, rgba(252,192,21,.55) 34%);
  background-size: 320% 320%;
  background-position: calc(var(--px, .5) * 100%) calc(var(--py, .5) * 100%);
  mix-blend-mode: color-dodge;
  filter: blur(2px) saturate(1.35);
  transition: opacity .3s;
}
.carta--dx .carta__brilho {
  opacity: 0;
  background: radial-gradient(380px circle at calc(var(--px, .5) * 100%) calc(var(--py, .5) * 100%),
    rgba(255,255,255,.5), rgba(255,255,255,.05) 42%, transparent 68%);
  mix-blend-mode: overlay;
  transition: opacity .3s;
}

.carta--dx .carta__link:hover .carta__holo,
.carta--dx .carta__link:focus-visible .carta__holo { opacity: .85; }
.carta--dx .carta__link:hover .carta__brilho,
.carta--dx .carta__link:focus-visible .carta__brilho { opacity: .7; }

/* peça fora da coleção: mesmo no hover, o brilho fica contido */
.carta--dx.carta--fora .carta__link:hover .carta__holo { opacity: .16; filter: blur(3px) saturate(.4); }
.carta--dx.carta--fora .carta__link:hover .carta__brilho { opacity: .28; }

/* o movimento acompanha o cursor, então só faz sentido enquanto ele está lá */
.carta--dx .carta__link:hover .carta__holo { animation: holo 9s ease-in-out infinite alternate; }
@keyframes holo { from { background-position: 12% 30%; } to { background-position: 88% 70%; } }

/* Bootleg: sem holografia. A moldura ganha hachura de aço — leitura imediata
   de "cópia" sem roubar o lugar da carta shine. */
.carta--bootleg .carta__moldura {
  background:
    linear-gradient(var(--nuub-superficie), #0B1120) padding-box,
    repeating-linear-gradient(135deg,
      rgba(214,226,242,.62) 0 5px,
      rgba(214,226,242,.14) 5px 10px) border-box;
  border-width: 2px;
}
.carta--bootleg .carta__link:hover .carta__moldura,
.carta--bootleg .carta__link:focus-visible .carta__moldura {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.3),
    0 0 20px -4px rgba(214,226,242,.35),
    0 22px 42px -20px rgba(0,0,0,.9);
}
.carta--bootleg.carta--fora .carta__moldura { opacity: .85; }
/* a carta bootleg não acende: as camadas de brilho ficam desligadas */
.carta--bootleg .carta__holo,
.carta--bootleg .carta__brilho { opacity: 0 !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .marca__sub { animation: none; background-position: 20% 0; }
  .carta--dx .carta__holo { animation: none; }
  .carta--dx .carta__moldura { transition: box-shadow .3s ease; }
  .carta--dx .carta__link:hover .carta__moldura { --angulo: 140deg; }
  .carta__moldura, .carta__arte img { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------- vídeo vertical (YouTube Shorts) ----------------
   Só o player, em 9:16. O modo sem cookie do YouTube não desenha perfil
   nem barra de curtidas em volta: o quadro é o vídeo. */
.reels { margin-top: 1.5rem; }
.reels__titulo {
  margin: 0 0 .7rem; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--nuub-suave);
  text-align: center;
}
/* centralizado na mesma linha do deck de fotos e dos controles dele */
.reels__lista {
  display: flex; flex-direction: column; gap: .9rem;
  max-width: 300px; margin-inline: auto;
}

.reel {
  border: 1px solid var(--nuub-borda);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 14px 30px -20px rgba(0,0,0,.9);
}
.reel__moldura { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; }

@media (max-width: 760px) {
  .reels__lista { max-width: 320px; }
}

/* ---------------- página do item ---------------- */

.peca {
  display: grid; grid-template-columns: minmax(280px, 430px) 1fr;
  gap: 3rem; align-items: start; padding-bottom: 3rem;
}

.voltar {
  display: inline-block; margin-bottom: 1.2rem;
  color: var(--nuub-suave); text-decoration: none; font-weight: 700; font-size: .88rem;
}
.voltar:hover { color: var(--nuub-amarelo); }

.deck { position: relative; overflow: hidden; padding: 0 3px 14px; }
/* Sem proporção calculada: a foto da frente fica no fluxo normal e é ela que
   define a altura do palco. Assim a moldura bate exata na imagem, seja qual for
   o formato, sem sobra em cima nem embaixo. As demais ficam absolutas atrás. */
.deck__palco {
  position: relative;
  perspective: 1400px;
  min-height: 220px;
}
.deck__carta {
  position: absolute; inset: 0;
  border-radius: var(--raio-carta); overflow: hidden;
  background: #060A12; border: 1.5px solid var(--nuub-borda);
  display: block; line-height: 0;
  box-shadow: 0 26px 50px -26px rgba(0,0,0,.95);
  transform-origin: 50% 100%;
  transform: translate3d(calc(var(--i) * 14px), calc(var(--i) * -10px), calc(var(--i) * -60px))
             rotate(calc(var(--i) * 2.6deg)) scale(calc(1 - var(--i) * .045));
  filter: brightness(calc(1 - var(--i) * .16));
  transition: transform .45s cubic-bezier(.2,.7,.3,1), filter .45s, opacity .45s;
  cursor: pointer;
}
.deck__carta[data-oculta="1"] { opacity: 0; pointer-events: none; }
/* A foto aparece inteira; o vazio ao redor é preenchido por uma versão
   ampliada e borrada dela mesma, então nada é cortado e nada fica morto.
   Vale só aqui — na galeria o recorte uniforme é o que dá liga à coleção. */
/* cartas do fundo: só as bordas aparecem, então preenchem o espaço */
.deck__carta img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  position: relative; z-index: 1;
}

/* carta da frente: sai do posicionamento absoluto e dita a altura do palco */
.deck__carta--frente {
  position: relative;
  inset: auto;
  transform: none;
  filter: none;
}
.deck__carta--frente img {
  height: auto;          /* a altura vem da própria proporção da foto */
  object-fit: fill;
}
.deck__carta--frente::before { display: none; }
.deck__carta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--fundo);
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.15) brightness(.5);
  transform: scale(1.25);
}
/* Crédito discreto: quase some na contemplação da foto e ganha nitidez para
   quem quiser ler. Sem degradê, para não escurecer a base da imagem — o
   contorno do texto é o que garante leitura mesmo sobre foto clara. */
.deck__creditos {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: .5rem .85rem .55rem;
  background: none;
  color: rgba(255,255,255,.92);
  font-size: .56rem; font-weight: 400; line-height: 1.4;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.55);
  opacity: .35;
  transition: opacity .25s ease;
  pointer-events: none;
}
.deck__carta:hover .deck__creditos,
.deck__carta:focus-within .deck__creditos { opacity: .92; }

/* no celular não existe passar o mouse: fica num meio-termo legível */
@media (hover: none) {
  .deck__creditos { opacity: .5; }
}

.deck__controles { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.1rem; }
.deck__contador { color: var(--nuub-suave); font-size: .85rem; font-weight: 700; }
.deck__seta {
  background: var(--nuub-superficie); border: 1px solid var(--nuub-borda);
  color: var(--nuub-texto); border-radius: 50%;
  width: 2.5rem; height: 2.5rem; font-size: 1.1rem; cursor: pointer;
}
.deck__seta:hover { border-color: var(--nuub-azul); color: var(--nuub-azul); }

.ficha__marca { color: var(--nuub-suave); font-weight: 800; font-size: .84rem; letter-spacing: .1em;
                text-transform: uppercase; margin: 0 0 .4rem; }
.ficha__titulo {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.08; margin: 0 0 .9rem;
}
.ficha__numero { color: var(--nuub-amarelo); }

.ficha__selos { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.ficha__estado {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border-radius: 999px;
  font-size: .78rem; font-weight: 800;
  border: 1px solid var(--nuub-borda); color: var(--nuub-suave);
}
.ficha__estado--colecao   { color: var(--nuub-verde); border-color: rgba(47,224,208,.45); }
.ficha__estado--caminho   { color: var(--nuub-azul);  border-color: rgba(0,152,255,.45); }
.ficha__estado--arquivada { color: var(--nuub-amarelo); border-color: rgba(252,192,21,.45); }
.ficha__estado--bonus { color: #fff; background: var(--nuub-azul); border-color: transparent; }
.ficha__estado--dx {
  color: var(--nuub-preto); border-color: transparent;
  background: linear-gradient(100deg, #FFE9A8, var(--nuub-amarelo) 50%, #C88A16);
}
.ficha__estado--bootleg {
  color: #EAF1FA; border-color: rgba(255,255,255,.4);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 4px, rgba(255,255,255,0) 4px 8px),
    linear-gradient(100deg, rgba(86,101,123,.5), rgba(42,52,71,.5));
}

.ficha__descricao { color: #C3D0E0; max-width: 64ch; }
.ficha__original {
  margin-top: .8rem; color: var(--nuub-suave); font-size: .88rem;
}
.ficha__original summary { cursor: pointer; font-weight: 700; }

.ficha__tabela { width: 100%; border-collapse: collapse; margin: 1.6rem 0; }
.ficha__tabela th, .ficha__tabela td {
  text-align: left; padding: .58rem 0;
  border-bottom: 1px solid var(--nuub-borda); font-size: .92rem;
}
.ficha__tabela th { color: var(--nuub-suave); font-weight: 600; width: 38%; }
.ficha__tabela td { font-weight: 600; }

/* vídeos */
.videos { margin: 2.4rem 0 1rem; }
.videos h2 { font-size: 1.05rem; margin: 0 0 .9rem; letter-spacing: -.02em; }
.videos__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.video {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--raio-ui); overflow: hidden;
  border: 1px solid var(--nuub-borda); background: #060A12;
}
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video video { object-fit: contain; background: #060A12; }

/* ---------------- documento ---------------- */

.documento { max-width: 74ch; padding-bottom: 3rem; }
.documento h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -.03em; margin-bottom: .3rem; }
.documento__data { color: var(--nuub-suave); font-size: .85rem; margin-top: 0; }
.documento h2 {
  font-size: 1.05rem; margin: 2.2rem 0 .6rem;
  letter-spacing: -.02em; color: var(--nuub-amarelo);
}
.documento p, .documento li { color: #BCCADA; font-size: .95rem; line-height: 1.7; }
.documento ul { padding-left: 1.1rem; }
.documento li { margin-bottom: .5rem; }
.documento a { color: var(--nuub-azul); }
.documento__nota {
  border: 1px solid var(--nuub-borda); border-radius: var(--raio-ui);
  padding: 1rem 1.2rem; margin-top: 2.4rem;
  font-size: .88rem !important; color: var(--nuub-suave) !important;
}

/* ---------------- aviso de cookies ---------------- */

.cookies {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  width: min(100% - 2rem, 720px); z-index: 90;
  display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; justify-content: space-between;
  background: var(--nuub-superficie);
  border: 1px solid var(--nuub-borda);
  border-radius: var(--raio-carta);
  padding: 1rem 1.2rem;
  box-shadow: 0 20px 44px -22px rgba(0,0,0,.95);
}
.cookies p { margin: 0; font-size: .86rem; color: var(--nuub-suave); flex: 1 1 300px; }
.cookies a { color: var(--nuub-azul); }
.cookies__acoes { display: flex; gap: .5rem; flex-wrap: wrap; }

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

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: var(--raio-ui);
  border: 1px solid var(--nuub-borda); background: var(--nuub-superficie);
  color: var(--nuub-texto); font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, border-color .2s;
}
.botao:hover { transform: translateY(-1px); border-color: var(--nuub-azul); }
/* display:inline-flex vencia o hidden do navegador: o botão aparecia sempre */
.botao[hidden] { display: none; }

.botao--nuub {
  border: 0; color: var(--nuub-preto); background: var(--nuub-amarelo);
  box-shadow: 0 10px 24px -14px rgba(252,192,21,.9);
}
.botao--nuub:hover { filter: brightness(1.06); }

.botao--azul { border: 0; color: #fff; background: var(--nuub-azul);
               box-shadow: 0 10px 24px -14px rgba(0,152,255,.9); }
.botao--azul:hover { filter: brightness(1.08); }

.botao--oferta {
  border: 0; color: var(--nuub-preto); font-weight: 800;
  background: linear-gradient(100deg, var(--nuub-verde), #17C7B4);
  box-shadow: 0 10px 26px -14px rgba(47,224,208,.9);
}
.botao--contorno { background: transparent; border-color: var(--nuub-azul); }
.botao--perigo { background: transparent; border-color: rgba(255,90,110,.5); color: #FF6B7F; }
.botao--largo { width: 100%; }
.botao--pequeno { padding: .45rem .85rem; font-size: .82rem; }

.acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

/* ---------------- vazio ---------------- */

.vazio {
  border: 1px dashed var(--nuub-borda); border-radius: var(--raio-carta);
  padding: 3.2rem 2rem; text-align: center; color: var(--nuub-suave); margin-bottom: 4rem;
}
.vazio h2 { color: var(--nuub-texto); margin-top: 0; }

/* ---------------- rodapé ---------------- */

.rodape {
  border-top: 1px solid var(--nuub-borda);
  margin-top: 2rem; padding: 2.4rem 0 3rem;
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.6rem 2.4rem;
  align-items: center;
}
.rodape__logo img { height: 54px; width: auto; opacity: .92; }
.rodape__slogan { color: var(--nuub-suave); font-size: .9rem; font-weight: 600; margin: .5rem 0 0; }
.rodape__redes { display: flex; flex-wrap: wrap; gap: .5rem; }
.rodape__redes a {
  display: inline-flex; align-items: center;
  padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--nuub-borda);
  color: var(--nuub-suave); text-decoration: none;
  font-size: .8rem; font-weight: 700;
  transition: color .15s, border-color .15s;
}
.rodape__redes a:hover { color: var(--nuub-amarelo); border-color: var(--nuub-amarelo); }
.rodape__legal { grid-column: 1 / -1; border-top: 1px solid var(--nuub-borda); padding-top: 1.2rem;
                 display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
                 color: var(--nuub-suave); font-size: .8rem; }
.rodape__som {
  background: none; border: 0; padding: 0;
  color: var(--nuub-suave); font: inherit; font-size: .8rem; font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.rodape__som[aria-pressed="true"] { color: var(--nuub-verde); }
.rodape__legal a { text-decoration: none; font-weight: 700; }
.rodape__legal a:hover { color: var(--nuub-texto); }

/* ---------------- painel / formulários ---------------- */

.pagina-simples { display: grid; place-items: center; min-height: 100vh; padding: 2rem; }
.caixa {
  width: min(100%, 560px); background: var(--nuub-superficie);
  border: 1px solid var(--nuub-borda); border-radius: var(--raio-carta); padding: 2.2rem;
}
.caixa h1 { margin-top: 0; letter-spacing: -.03em; }
.caixa code { background: rgba(255,255,255,.06); padding: .1rem .35rem; border-radius: 4px; }
.caixa__logo { height: 84px; width: auto; margin: 0 auto 1.6rem; display: block; }

.campo { display: block; margin-bottom: 1rem; }
.campo > span { display: block; font-size: .8rem; font-weight: 700; color: var(--nuub-suave); margin-bottom: .3rem; }
.campo input, .campo select, .campo textarea, .campo__texto {
  width: 100%; background: rgba(255,255,255,.035);
  border: 1px solid var(--nuub-borda); border-radius: var(--raio-ui);
  color: var(--nuub-texto); padding: .68rem .9rem; font: inherit; font-size: .94rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--nuub-azul); }
/* campo devolvido do rascunho: fica marcado até você salvar */
.campo--restaurado { border-color: var(--nuub-verde) !important; box-shadow: 0 0 0 1px rgba(47,224,208,.25); }
.campo textarea { min-height: 110px; resize: vertical; }

/* a lista aberta do select não herda a cor do campo: precisa ser dita */
select option,
.campo select option {
  background: var(--nuub-superficie);
  color: var(--nuub-texto);
  padding: .4rem;
}
select option:checked,
select option:hover,
select option:focus {
  background: var(--nuub-amarelo);
  color: var(--nuub-preto);
  font-weight: 700;
}
select {
  cursor: pointer;
  accent-color: var(--nuub-amarelo);
}
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }

.aviso { border-radius: var(--raio-ui); padding: .8rem 1rem; font-size: .9rem;
         border: 1px solid var(--nuub-borda); margin: .8rem 0; }
.aviso--ok   { border-color: rgba(47,224,208,.45); color: var(--nuub-verde); }
.aviso--erro { border-color: rgba(255,90,110,.5); color: #FF8A9B; }

.painel { padding-bottom: 4rem; }
.painel__barra {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.4rem 0; border-bottom: 1px solid var(--nuub-borda); margin-bottom: 2rem;
}
.painel__titulo { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.painel__logo { height: 52px; width: auto; }

/* resumo de valores no painel */
.resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.resumo__bloco {
  background: var(--nuub-superficie);
  border: 1px solid var(--nuub-borda);
  border-radius: var(--raio-carta);
  padding: 1.1rem 1.3rem;
}
.resumo__rotulo { display: block; font-size: .76rem; font-weight: 700; color: var(--nuub-suave);
                  text-transform: uppercase; letter-spacing: .08em; }
.resumo__valor { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em;
                 color: var(--nuub-amarelo); margin: .3rem 0 .2rem; }
.resumo__valor--moedas { font-size: 1.1rem; display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.resumo__nota { color: var(--nuub-suave); font-size: .78rem; }

.cartao-form {
  background: var(--nuub-superficie); border: 1px solid var(--nuub-borda);
  border-radius: var(--raio-carta); padding: 1.6rem; margin-bottom: 2.2rem;
}
.cartao-form h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.cartao-form p.dica { margin: 0 0 1.1rem; color: var(--nuub-suave); font-size: .87rem; }
.linha-link { display: flex; gap: .7rem; flex-wrap: wrap; }
.linha-link input { flex: 1 1 320px; }

.lista { width: 100%; border-collapse: collapse; }
.lista th { text-align: left; font-size: .76rem; color: var(--nuub-suave);
            padding: .6rem .7rem; border-bottom: 1px solid var(--nuub-borda); }
.lista td { padding: .7rem; border-bottom: 1px solid var(--nuub-borda); vertical-align: middle; font-size: .89rem; }
.lista tr:hover td { background: rgba(255,255,255,.02); }
.lista__miniatura { width: 52px; height: 68px; object-fit: cover; border-radius: 6px; border: 1px solid var(--nuub-borda); }
.lista__miniatura--fora { filter: grayscale(1) brightness(.75); }
.lista__acoes { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

.etiqueta { display: inline-block; padding: .18rem .5rem; border-radius: 5px; font-size: .7rem; font-weight: 800; }
.etiqueta--desejada  { background: rgba(126,144,168,.18); color: var(--nuub-suave); }
.etiqueta--caminho   { background: rgba(0,152,255,.16); color: var(--nuub-azul); }
.etiqueta--colecao   { background: rgba(47,224,208,.15); color: var(--nuub-verde); }
.etiqueta--arquivada { background: rgba(252,192,21,.16); color: var(--nuub-amarelo); }
.etiqueta--dx { background: linear-gradient(100deg, #FFE9A8, var(--nuub-amarelo)); color: var(--nuub-preto); }
.etiqueta--bootleg {
  background: repeating-linear-gradient(135deg, rgba(234,241,250,.22) 0 4px, rgba(234,241,250,.08) 4px 8px);
  color: #EAF1FA; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}

.galeria-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .9rem; }
.galeria-admin figure {
  margin: 0; position: relative;
  border-radius: 10px;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  cursor: grab;
}
.galeria-admin figure:active { cursor: grabbing; }
.galeria-admin figure.arrastando { opacity: .35; transform: scale(.96); }
.galeria-admin figure.alvo { box-shadow: 0 0 0 2px var(--nuub-azul); }
.galeria-admin figure.e-destaque img { outline: 2px solid var(--nuub-amarelo); outline-offset: 2px; }

/* caixa de seleção para apagar em lote */
.galeria-admin__marcar {
  position: absolute; top: .3rem; left: .3rem; z-index: 3;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  background: rgba(8,13,22,.8);
  border: 1px solid var(--nuub-borda);
  border-radius: 6px;
  cursor: pointer;
}
.galeria-admin__marcar input { width: .95rem; height: .95rem; accent-color: var(--nuub-amarelo); cursor: pointer; }
.galeria-admin figure:has(input:checked) { outline: 2px solid var(--nuub-amarelo); outline-offset: 2px; }
.galeria-admin figure:has(input:checked) img { opacity: .75; }

.galeria-admin__setas {
  position: absolute; top: .3rem; right: .3rem; z-index: 2;
  display: flex; gap: .2rem; opacity: 0; transition: opacity .15s;
}
.galeria-admin figure:hover /* caixa de seleção para apagar em lote */
.galeria-admin__marcar {
  position: absolute; top: .3rem; left: .3rem; z-index: 3;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  background: rgba(8,13,22,.8);
  border: 1px solid var(--nuub-borda);
  border-radius: 6px;
  cursor: pointer;
}
.galeria-admin__marcar input { width: .95rem; height: .95rem; accent-color: var(--nuub-amarelo); cursor: pointer; }
.galeria-admin figure:has(input:checked) { outline: 2px solid var(--nuub-amarelo); outline-offset: 2px; }
.galeria-admin figure:has(input:checked) img { opacity: .75; }

.galeria-admin__setas { opacity: 1; }
.galeria-admin__setas .botao { padding: .1rem .4rem; line-height: 1.2; }
.galeria-admin__setas .botao[disabled] { opacity: .35; cursor: default; }
@media (hover: none) {
  /* caixa de seleção para apagar em lote */
.galeria-admin__marcar {
  position: absolute; top: .3rem; left: .3rem; z-index: 3;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  background: rgba(8,13,22,.8);
  border: 1px solid var(--nuub-borda);
  border-radius: 6px;
  cursor: pointer;
}
.galeria-admin__marcar input { width: .95rem; height: .95rem; accent-color: var(--nuub-amarelo); cursor: pointer; }
.galeria-admin figure:has(input:checked) { outline: 2px solid var(--nuub-amarelo); outline-offset: 2px; }
.galeria-admin figure:has(input:checked) img { opacity: .75; }

.galeria-admin__setas { opacity: 1; }   /* no celular não existe passar o mouse */
}
.galeria-admin img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--nuub-borda); }
.galeria-admin figcaption { display: flex; gap: .35rem; margin-top: .35rem; }

.marcas-lista { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.marca-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--nuub-borda); border-radius: 999px;
  padding: .35rem .5rem .35rem .9rem; font-size: .84rem; font-weight: 700;
}
.marca-chip button {
  background: none; border: 0; color: var(--nuub-suave); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 .2rem;
}
.marca-chip button:hover { color: #FF6B7F; }

/* ---------------- progresso ---------------- */

.barra {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,.07); border: 1px solid var(--nuub-borda);
}
.barra span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--nuub-azul), var(--nuub-amarelo));
  transition: width .4s ease;
}

/* ---------------- segurança / 2FA ---------------- */

.qr { display: grid; place-items: center; background: #fff; border-radius: var(--raio-ui);
      padding: 1rem; margin: 1.4rem auto; width: max-content; min-width: 200px; }
.recuperacao { border: 1px solid var(--nuub-amarelo); border-radius: var(--raio-carta);
               padding: 1.4rem; margin-bottom: 1.8rem; background: rgba(252,192,21,.06); }
.codigos { list-style: none; padding: 0; display: grid;
           grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin: 1rem 0 1.2rem; }
.codigos li {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 1rem; letter-spacing: .06em;
  background: rgba(255,255,255,.05); border: 1px solid var(--nuub-borda);
  border-radius: 6px; padding: .5rem; text-align: center;
}
details summary::-webkit-details-marker { color: var(--nuub-amarelo); }
details { border-top: 1px solid var(--nuub-borda); padding-top: 1rem; }

@media print {
  body { background: #fff; color: #000; }
  .caixa { border: 0; background: #fff; }
  .botao, form, details, .aviso { display: none !important; }
  .codigos li { border-color: #999; background: #fff; color: #000; }
}

/* ---------------- responsivo ---------------- */

@media (max-width: 860px) {
  .peca { grid-template-columns: 1fr; gap: 2rem; }
  .busca { margin-left: 0; width: 100%; }
  .busca input { flex: 1; min-width: 0; }

  /* topo centralizado */
  .topo { flex-direction: column; text-align: center; gap: .8rem; padding-top: 1.6rem; }
  .marca { justify-content: center; gap: .7rem; }
  .marca img { height: 74px; }
  .marca__sub { font-size: clamp(1.15rem, 5.4vw, 1.6rem); padding-left: .8rem; }
  .placar { gap: 1.8rem; justify-content: center; width: 100%; }
  .placar__item { text-align: center; }

  .manifesto { text-align: center; }
  .manifesto p { text-align: left; }

  /* marcas viram seletor */
  .filtros--marcas { display: none; }
  .marcas-seletor { display: block; }

  .acoes { justify-content: center; }
  .acoes .botao { flex: 1 1 100%; }

  /* rodapé centralizado */
  .rodape { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 1.2rem; }
  .rodape__logo img { margin-inline: auto; }
  .rodape__redes { justify-content: center; }
  .rodape__legal { flex-direction: column; align-items: center; gap: .5rem; text-align: center; }

  /* em coluna, o flex-basis do texto virava altura e esticava a caixa */
  .cookies {
    flex-direction: column; text-align: center;
    gap: .7rem; padding: .85rem 1rem; bottom: .6rem;
    width: min(100% - 1.2rem, 520px);
  }
  .cookies p { flex: 0 1 auto; font-size: .8rem; line-height: 1.45; }
  .cookies__acoes { width: 100%; justify-content: center; }
  .cookies__acoes .botao { flex: 1 1 auto; }
}
@media (max-width: 520px) {
  .grade { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1.1rem .9rem; }
  .marca img { height: 64px; }
  .lista th:nth-child(3), .lista td:nth-child(3) { display: none; }
}