/* boyzueira.com -- site novo: tokens compartilhados por todos os artboards do canvas.
   Fonte: docs/2026-09-24-site-redesign-design.md (tabela de Identidade).
   Toda seção (Task 2, 3, 4) linka este arquivo depois da linha do support.js:
   <link rel="stylesheet" href="tokens.css">  (ou "../tokens.css" se o artboard
   estiver em uma subpasta de project/). */

:root {
  /* cor */
  --bg: #141313;          /* fundo */
  --surface-1: #241c20;   /* superfície */
  --surface-2: #31282c;   /* superfície (camada 2) */
  --action: #ff4474;      /* ação -- botões "Entrar no jogo" */
  --investor: #825dc9;    /* camada investidor (seções 6-10) */
  --gain: #4dd970;        /* ganho / seguidores */
  --boyz-token: #ffce47;  /* $BOYZ / prêmio */
  --detail: #16b9ff;      /* detalhe */

  /* texto sobre --bg / --surface-* */
  --text-primary: #ffffff;
  --text-secondary: #c9c1c5;
  --text-muted: #8c8288;
  --border: #3a3236;

  /* tipo */
  --font-display: 'boyz', sans-serif;   /* títulos -- nunca Archivo Black/Space Grotesk/mono */
  --font-body: 'Montserrat', sans-serif; /* texto */

  /* v3 (spec 2026-09-25) */
  --paper: #fff6f8;         /* seção clara (papel do guia) */
  --ink: #241c20;           /* texto e sombra dura sobre papel */
  --investor-deep: #1d1726; /* fundo da camada investidor */
  --sticker-shadow: 10px;   /* deslocamento da sombra do adesivo */
}

@font-face {
  font-family: 'boyz';
  src: url('../../assets/fonts/boyz.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* v3.css: os 5 elementos da gramática do Guia do Jogador. Usar só tokens (tokens.css). */
.v3{position:relative;overflow:hidden;font-family:var(--font-body);color:var(--text-primary);box-sizing:border-box}
.v3 *{box-sizing:border-box}
.v3 p{margin:0}
.v3.escura{background:var(--bg)}
.v3.papel{background:var(--paper);color:var(--ink)}
.v3.rosa{background:var(--action);color:var(--ink)} /* branco sobre o rosa dá 3,3:1 (reprova AA) */
.v3.roxa{background:linear-gradient(180deg,var(--investor-deep) 0%,var(--bg) 100%)}

/* 1. Adesivo */
.adesivos{display:flex;flex-direction:column;align-items:flex-start}
.adesivo{font-family:var(--font-display);font-weight:400;display:inline-block;white-space:nowrap;line-height:1.02;letter-spacing:.5px;
  padding:.22em .36em .18em;transform:rotate(-2.2deg);box-shadow:var(--sticker-shadow) var(--sticker-shadow) 0 var(--ink)}
.adesivo + .adesivo{margin-top:.14em;transform:rotate(1.4deg)} /* respiro entre linhas de título (antes encostavam) */
.adesivo.r{background:var(--action);color:#fff}
.adesivo.a{background:var(--boyz-token);color:var(--ink)}
.adesivo.b{background:#fff;color:var(--ink)}
.adesivo.p{background:var(--ink);color:var(--boyz-token);box-shadow:var(--sticker-shadow) var(--sticker-shadow) 0 var(--action)}
.adesivo.l{background:var(--investor);color:#fff}
.d .adesivo{font-size:92px}
.d .adesivo.menor{font-size:68px}
.m .adesivo{font-size:40px;--sticker-shadow:7px}
.m .adesivo.menor{font-size:32px}

/* etapa: pílula com número, igual ao guia */
.etapa{display:inline-flex;align-self:flex-start;align-items:center;gap:12px;font-weight:800;border-radius:60px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);padding:6px 22px 6px 6px}
.escura .etapa,.roxa .etapa{background:var(--ink);color:#fff;border-color:var(--boyz-token)}
.etapa b{display:inline-grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--boyz-token)}
.escura .etapa b,.rosa .etapa b,.roxa .etapa b{background:var(--boyz-token);color:var(--ink)}
.d .etapa{font-size:20px}.d .etapa b{width:44px;height:44px;font-size:20px}
.m .etapa{font-size:15px}.m .etapa b{width:34px;height:34px;font-size:15px}

/* texto */
.txt{font-weight:500;line-height:1.45}
.txt strong{font-weight:800}
.escura .txt strong,.roxa .txt strong{color:var(--boyz-token)}
.d .txt{font-size:22px;max-width:560px}
.m .txt{font-size:17px}

/* 2. Cena */
.d .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:820px}
.d .split.inv .cena{order:2}
.cena{position:relative;overflow:hidden}
.cena > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.d .miolo{display:flex;flex-direction:column;justify-content:center;gap:30px;padding:80px 96px}
/* só o adesivo cruza a borda da cena (como no guia); o texto fica no fundo liso */
.d .split .miolo{position:relative;z-index:2}
.d .split:not(.inv) .miolo .adesivos{margin-left:-200px}
.m .cena{height:430px}
.m .cena::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px}
.m.escura .cena::after{background:linear-gradient(to bottom,rgba(20,19,19,0),var(--bg))}
.m.papel .cena::after{background:linear-gradient(to bottom,rgba(255,246,248,0),var(--paper))}
.m.rosa .cena::after{background:linear-gradient(to bottom,rgba(255,68,116,0),var(--action))}
.m .miolo{display:flex;flex-direction:column;gap:22px;padding:0 20px 40px;margin-top:-70px;position:relative;z-index:2}

/* recorte (personagem com fundo transparente) */
.recorte{display:block;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}

/* 3. Fala (comentário de Instagram) */
.fala{display:flex;gap:14px;align-items:flex-start;background:#fff;color:var(--ink);border-radius:20px;border:3px solid var(--ink);padding:14px 16px}
.escura .fala,.roxa .fala{border-color:var(--boyz-token)}
/* avatar com o círculo de stories do Instagram (gradiente + respiro branco), padrão de todo personagem — 2026-09-27 */
.fala > img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;padding:2px;border:2.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf) border-box}
.fala .comenta{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.fala .quem{display:flex;align-items:center;gap:5px;font-weight:800;font-size:14px}
.fala .verif{width:15px;height:15px;flex:none}
.fala .quem span{font-weight:600;color:#6b5f65;margin-left:3px}
.fala .dito{font-weight:600;font-size:16px;line-height:1.38}
.fala .responder{font-weight:700;font-size:12.5px;color:#6b5f65;margin-top:2px}
.fala .curtida{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;padding-top:2px}
.fala .coracao{width:24px;height:24px;fill:#e0245e}
.fala .curtida span{font-weight:700;font-size:12px;color:#6b5f65}
.d .fala{max-width:520px}

/* 4. Trilha das medalhas */
.trilha{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);padding:14px 16px}
.trilha img{filter:grayscale(1) brightness(.55);opacity:.55}
.trilha img.on{filter:none;opacity:1}
.trilha img.aqui{filter:none;opacity:1;transform:translateY(-5px)}
.d .trilha img{width:56px;height:56px}.d .trilha img.aqui{width:74px;height:74px}
.m .trilha{gap:4px;padding:10px 8px}
.m .trilha img{width:26px;height:26px}.m .trilha img.aqui{width:36px;height:36px}

/* botões, selos, assinatura */
.btn{display:inline-flex;align-self:flex-start;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:999px;background:var(--action);color:var(--ink);font-weight:800;text-decoration:none;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.rosa .btn{background:var(--ink);color:#fff;box-shadow:5px 5px 0 #fff}
.d .btn{font-size:18px}.m .btn{font-size:16px;align-self:stretch}
.embreve{display:inline-block;align-self:flex-start;border:2px solid var(--boyz-token);font-weight:900;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--ink);color:var(--boyz-token)}
.flag{display:inline-block;align-self:flex-start;font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px;background:rgba(255,206,71,.16);color:var(--boyz-token)}
.papel .flag{background:var(--boyz-token);color:var(--ink)}
.rosa .flag{background:var(--ink);color:var(--boyz-token)}
.assina{font-weight:800;letter-spacing:.22em;font-size:12px;color:#a39aa0} /* --text-muted dá 4,49:1 no rodapé escuro */

/* bloco com vários itens: um domina (seções 3, 6, 7, 11) */
.itens{display:grid;gap:16px}
.d .itens{grid-template-columns:1.4fr 1fr 1fr}
.item{border:3px solid var(--ink);border-radius:24px;overflow:hidden;background:var(--surface-1);display:flex;flex-direction:column}
.papel .item{background:#fff}
.item.domina{grid-row:span 2}
.item > img{width:100%;height:190px;object-fit:cover;display:block}
.item.domina > img{height:420px}
.item .corpo{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.item h3{font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1.2;margin:0}
.m .item h3{font-size:28px}
.item p{font-size:15px;line-height:1.4;font-weight:500}

@media (prefers-reduced-motion:reduce){.v3 *{animation:none!important;transition:none!important}}

/* Fundo de cenário (seções sem cena): faixa de cenários do app sob um véu da cor da seção.
   No desktop, 3 ou 4 cenários retrato lado a lado (ampliam ~1,3x); no celular, um só, nítido. */
.fundo-img{position:absolute;inset:0;display:flex;z-index:0;pointer-events:none}
.fundo-img img{flex:1;min-width:0;height:100%;object-fit:cover;display:block}
.fundo-img::after{content:"";position:absolute;inset:0}
.escura > .fundo-img::after{background:linear-gradient(180deg,rgba(20,19,19,.8) 0%,rgba(20,19,19,.9) 100%)}
.roxa > .fundo-img::after{background:linear-gradient(180deg,rgba(29,23,38,.84) 0%,rgba(20,19,19,.92) 100%)}
.papel > .fundo-img::after{background:rgba(255,246,248,.9)}
.v3 > :not(.fundo-img){position:relative;z-index:1}

/* Print do app numa moldura de celular: "é isso aqui que tu vai jogar". Fica ao lado da arte 3D, nunca no lugar dela. */
.celular{position:relative;flex:none;border:9px solid #0d0b0c;border-radius:40px;overflow:hidden;background:#000;box-shadow:0 0 0 2px rgba(255,255,255,.12),12px 14px 0 var(--ink)}
.papel .celular,.rosa .celular{box-shadow:0 0 0 2px var(--ink),12px 14px 0 var(--ink)}
.celular::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:32%;height:16px;border-radius:10px;background:#0d0b0c;z-index:2}
.celular img{display:block;width:100%;height:auto}
.celulares{display:flex;gap:18px;align-items:flex-start}
.celulares .celular:nth-child(2){margin-top:40px}

/* site.css: o que o site precisa além das artboards (montagem da página, troca desktop/celular, menu). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);overflow-x:hidden}
a{text-decoration:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Cada seção traz as duas artboards; a largura escolhe uma. */
.var-m{display:none}
@media (max-width:1023.98px){.var-d{display:none}.var-m{display:block}}
.var-d > .v3,.var-m > .v3{width:100%}
/* Abaixo da largura do desenho, a artboard encolhe inteira (zoom) em vez de reorganizar. */
@media (max-width:1439.98px){.var-d{zoom:var(--zd,1)}.var-d > .v3{width:1440px}}
@media (max-width:389.98px){.var-m{zoom:var(--zm,1)}.var-m > .v3{width:390px}}

/* Blocos condicionais (antigo <sc-if> do canvas) */
x-se{display:contents}
x-se[hidden]{display:none}

/* Cabeçalho fixo no topo */
.topo-fixo{position:sticky;top:0;z-index:100}
.sec{scroll-margin-top:calc(88px * var(--zd,1))}
@media (max-width:1023.98px){.sec{scroll-margin-top:68px}}
.s-00m .v3{overflow:visible}
.topo-fixo .s-00m .gaveta{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 68px);overflow-y:auto}
.topo-fixo .s-00m.menu-aberto .gaveta{display:flex}
.s-00m:not(.menu-aberto) .ic-fechar,.s-00m.menu-aberto .ic-abrir{display:none}

/* Post do BZ aberto: no canvas o modal cobre a artboard; no site, a tela inteira. */
main .sec .v3 .modal-post{position:fixed !important}
.sec:has(x-se[data-if="aberto"]:not([hidden])){position:relative;z-index:200}
body:has(.sec x-se[data-if="aberto"]:not([hidden])){overflow:hidden}