/* =========================================================================
   LUAR STUDIO — Sistema de design
   Derivado da identidade visual em /Identidade Visual/IDV
   Tudo que é "marca" mora nos tokens abaixo. Mude aqui, muda no site inteiro.
   ========================================================================= */

/* -------------------------------------------------- 0. FONTES ----------- */
/* Auto-hospedadas: zero requisição a terceiros, carregam mais rápido no Brasil
   e não vazam IP de visitante para o Google. Licença SIL OFL — livre inclusive
   para uso comercial. Figtree é variável (300–900) num arquivo só. */
@font-face{
  font-family:'Figtree'; font-style:normal; font-display:swap; font-weight:300 900;
  src:url('../fonts/figtree-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree'; font-style:normal; font-display:swap; font-weight:300 900;
  src:url('../fonts/figtree-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-display:swap; font-weight:400;
  src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-display:swap; font-weight:600;
  src:url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-display:swap; font-weight:400;
  src:url('../fonts/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-display:swap; font-weight:600;
  src:url('../fonts/jetbrains-mono-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* -------------------------------------------------- 1. TOKENS ----------- */
:root{
  /* Cores da marca — amostradas dos arquivos da IDV */
  --violeta:  #3B39FF;   /* azul-violeta do banner */
  --azul:     #0476D9;
  --verde:    #37C766;
  --amarelo:  #F2CB04;

  /* Neutros — o preto da IDV não é #000, é #0F0F11 */
  --breu:     #0F0F11;   /* fundo principal */
  --carvao:   #17171B;   /* superfície elevada */
  --grafite:  #212128;   /* superfície 2 / inputs */
  --linha:    rgba(255,255,255,.13);
  --linha-forte: rgba(255,255,255,.26);
  --papel:    #FFFFFF;
  --texto:    #ECECEF;
  --texto-fraco: #A0A0AC;   /* 6.1:1 sobre --breu */

  /* Gradiente-assinatura: amarelo → verde → azul → violeta */
  --gradiente: linear-gradient(115deg, var(--amarelo) 0%, var(--verde) 32%, var(--azul) 66%, var(--violeta) 100%);
  --gradiente-suave: linear-gradient(115deg, #F2CB04 0%, #37C766 40%, #0476D9 75%, #3B39FF 100%);

  /* Tipografia — 100% livre (SIL OFL), auto-hospedada em assets/fonts */
  --fonte-titulo: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-texto:  'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala tipográfica fluida */
  --t-mono:   .75rem;
  --t-mini:   .84rem;
  --t-corpo:  1.0625rem;
  --t-lead:   clamp(1.06rem, .95rem + .5vw, 1.3rem);
  --t-h3:     clamp(1.15rem, 1rem + .5vw, 1.4rem);
  --t-h2:     clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  --t-h1:     clamp(2.8rem, 1.4rem + 6.4vw, 6.6rem);

  /* Espaço */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --secao:  clamp(4rem, 9vw, 8rem);
  --raio:   18px;      /* eco das letras arredondadas do logo */
  --raio-g: 30px;
  --largura: 1180px;

  --transicao: 220ms cubic-bezier(.2,.7,.3,1);
}

/* -------------------------------------------------- 2. BASE ------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--breu);
  color:var(--texto);
  font-family:var(--fonte-texto);
  font-size:var(--t-corpo);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--fonte-titulo); font-weight:800; letter-spacing:-.03em; line-height:1.02; margin:0; text-wrap:balance}
h1{font-size:var(--t-h1); font-weight:900; letter-spacing:-.045em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3); font-weight:700; letter-spacing:-.02em; line-height:1.2}
p{margin:0}

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

.pular-para{
  position:absolute; left:.75rem; top:-100px; z-index:200;
  background:var(--verde); color:var(--breu); font-weight:700;
  padding:.7rem 1.1rem; border-radius:10px; transition:top var(--transicao);
}
.pular-para:focus{top:.75rem}

.visualmente-oculto{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* -------------------------------------------------- 3. LAYOUT ----------- */
.wrap{width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--largo{max-width:1400px}
section{padding-block:var(--secao); position:relative}

.rotulo{ /* etiqueta mono acima de cada bloco */
  font-family:var(--fonte-mono); font-size:var(--t-mono); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--texto-fraco);
  display:flex; align-items:center; gap:.6rem; margin:0 0 .9rem;
}
.rotulo::before{content:""; width:22px; height:2px; background:var(--verde); border-radius:2px; flex:none}

.cabeca-secao{max-width:34ch; margin-bottom:clamp(2rem,4vw,3.4rem)}
.cabeca-secao h2{font-size:var(--t-h2)}
.cabeca-secao p{color:var(--texto-fraco); font-size:var(--t-lead); margin-top:1rem; max-width:52ch}

/* -------------------------------------------------- 4. MARCA ------------ */
.gradiente-texto{
  background:var(--gradiente); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* Formas da marca via CSS mask: um <i> vazio pinta o SVG com `currentColor`,
   então a mesma forma serve em branco, em verde ou em cima do gradiente,
   sem duplicar arquivo nem inflar o HTML. */
.mrc{
  display:block; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.mrc--lockup { -webkit-mask-image:url(../img/luar-lockup.svg); mask-image:url(../img/luar-lockup.svg); aspect-ratio:574/352 }
.mrc--simbolo{ -webkit-mask-image:url(../img/luar-symbol.svg); mask-image:url(../img/luar-symbol.svg); aspect-ratio:250/322 }
.mrc--l{ -webkit-mask-image:url(../img/letra-l.svg); mask-image:url(../img/letra-l.svg); aspect-ratio:138/112 }
.mrc--u{ -webkit-mask-image:url(../img/letra-u.svg); mask-image:url(../img/letra-u.svg); aspect-ratio:139/109 }
.mrc--a{ -webkit-mask-image:url(../img/letra-a.svg); mask-image:url(../img/letra-a.svg); aspect-ratio:140/111 }
.mrc--r{ -webkit-mask-image:url(../img/letra-r.svg); mask-image:url(../img/letra-r.svg); aspect-ratio:137/111 }

/* Faixa de blobs — o padrão do pôster da IDV, virado em divisor de seção */
.faixa-blobs{
  display:flex; gap:clamp(.7rem,2vw,1.6rem); padding-block:1.6rem;
  border-block:1px solid var(--linha); overflow:hidden;
  justify-content:center; align-items:center;
}
.faixa-blobs .mrc{width:clamp(28px,4.2vw,48px); flex:none}
.faixa-blobs .mrc:nth-child(4n+1){color:var(--violeta)}
.faixa-blobs .mrc:nth-child(4n+2){color:var(--verde)}
.faixa-blobs .mrc:nth-child(4n+3){color:var(--amarelo)}
.faixa-blobs .mrc:nth-child(4n+4){color:var(--azul)}
@media (max-width:600px){ .faixa-blobs .mrc:nth-child(n+9){display:none} }

/* -------------------------------------------------- 5. BOTÕES ----------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:48px; padding:.8rem 1.4rem; border-radius:999px;
  font-weight:700; font-size:var(--t-mini); letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:transform var(--transicao), background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primario{background:var(--verde); color:var(--breu)}
.btn--primario:hover{background:#4BD97A}
.btn--gradiente{background:var(--gradiente) border-box; background-origin:border-box; color:var(--breu); font-weight:800}
.btn--fantasma{background:transparent; color:var(--texto); border-color:var(--linha-forte)}
.btn--fantasma:hover{border-color:var(--verde); color:var(--verde)}
.btn--claro{background:var(--papel); color:var(--breu)}
.btn .seta{transition:transform var(--transicao)}
.btn:hover .seta{transform:translateX(3px)}

/* -------------------------------------------------- 6. CABEÇALHO -------- */
.topo{
  position:sticky; top:0; z-index:100;
  background:rgba(15,15,17,.82); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--linha);
}
.topo__linha{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:74px}
.marca{display:flex; align-items:center; gap:.7rem; color:var(--papel)}
.marca .mrc{width:76px}
.marca__texto{font-family:var(--fonte-mono); font-size:var(--t-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--texto-fraco)}

.nav{display:flex; align-items:center; gap:.3rem}
.nav a{
  padding:.72rem .85rem; border-radius:999px; font-size:var(--t-mini); font-weight:600;
  color:var(--texto-fraco); transition:color var(--transicao), background var(--transicao);
}
.nav a:hover{color:var(--texto); background:rgba(255,255,255,.06)}
.nav a[aria-current="page"]{color:var(--papel)}
.nav a[aria-current="page"]::after{
  content:""; display:block; height:2px; border-radius:2px; margin-top:3px; background:var(--gradiente);
}
.topo .btn{margin-left:.5rem}

.menu-btn{display:none; background:none; border:1px solid var(--linha-forte); border-radius:12px; width:46px; height:46px; align-items:center; justify-content:center; cursor:pointer}
.menu-btn span{display:block; width:18px; height:2px; background:var(--texto); border-radius:2px; position:relative}
.menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--texto); border-radius:2px}
.menu-btn span::before{top:-6px} .menu-btn span::after{top:6px}

@media (max-width:860px){
  .menu-btn{display:flex}
  .nav{
    position:fixed; inset:74px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--breu); border-bottom:1px solid var(--linha); padding:1rem var(--gutter) 2rem;
    transform:translateY(-120%); transition:transform var(--transicao); z-index:99;
  }
  .nav[data-aberto="true"]{transform:translateY(0)}
  .nav a{padding:.95rem .2rem; font-size:1.1rem; border-radius:0; border-bottom:1px solid var(--linha)}
  .topo .btn{display:none}
}

/* -------------------------------------------------- 7. HERO ------------- */
.hero{padding-block:clamp(3.5rem,8vw,7rem) clamp(3rem,6vw,5rem); position:relative; overflow:hidden}
.hero__aura{ /* brilho de gradiente ao fundo */
  position:absolute; inset:-55% -15% auto -15%; height:135%;
  background:var(--gradiente); filter:blur(160px); opacity:.14; pointer-events:none; z-index:0;
}
.hero > .wrap{position:relative; z-index:1}
.hero__lead{color:var(--texto-fraco); font-size:var(--t-lead); max-width:48ch; margin-top:1.6rem}
.hero__acoes{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.2rem}
.hero__dados{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:clamp(1.2rem,3vw,2.5rem);
  margin-top:clamp(2.5rem,6vw,4rem); padding-top:2rem; border-top:1px solid var(--linha);
}
.dado__num{font-family:var(--fonte-titulo); font-weight:900; font-size:2rem; letter-spacing:-.03em; line-height:1}
.dado__rot{font-family:var(--fonte-mono); font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--texto-fraco); margin-top:.4rem}

/* Bloco de letras 2×2 flutuando ao lado do hero */
.hero__grade{display:grid; grid-template-columns:1fr 1fr; gap:clamp(.7rem,1.6vw,1.2rem); width:min(340px,80%); margin-inline:auto}
.hero__grade .mrc{width:100%}
.hero__grade .mrc:nth-child(1){color:var(--amarelo)}
.hero__grade .mrc:nth-child(2){color:var(--verde)}
.hero__grade .mrc:nth-child(3){color:var(--azul)}
.hero__grade .mrc:nth-child(4){color:var(--violeta)}
.hero__colunas{display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(2rem,5vw,4rem); align-items:center}
@media (max-width:900px){ .hero__colunas{grid-template-columns:1fr} .hero__grade{display:none} }

/* -------------------------------------------------- 8. CARTÕES DE JOGO -- */
.grade-jogos{display:grid; gap:clamp(1rem,2vw,1.5rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.jogo{
  background:var(--carvao); border:1px solid var(--linha); border-radius:var(--raio-g);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:border-color var(--transicao), transform var(--transicao);
}
.jogo:hover{border-color:var(--linha-forte); transform:translateY(-4px)}
/* Card inteiro clicável: o link do título se estica por cima de todo o card. */
.jogo h3 a{position:static}
.jogo h3 a::after{content:""; position:absolute; inset:0; z-index:1}
/* Os links internos (Steam, Meta, Jogar) ficam acima do link esticado e continuam clicáveis. */
.jogo__links{position:relative; z-index:2}
.jogo__arte{
  aspect-ratio:16/10; position:relative; display:grid; place-items:center;
  background:var(--grafite); background-size:cover; background-position:center; overflow:hidden;
}
.jogo__arte::after{ /* véu para o texto sempre ler por cima da arte */
  content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,15,17,.55), transparent 55%);
}
.jogo__arte .mrc{width:34%; opacity:.92; position:relative; z-index:1}
.jogo--violeta .jogo__arte{background-color:var(--violeta)}
.jogo--verde   .jogo__arte{background-color:var(--verde)}
.jogo--amarelo .jogo__arte{background-color:var(--amarelo)}
.jogo--azul    .jogo__arte{background-color:var(--azul)}
.jogo--violeta .jogo__arte .mrc,.jogo--azul .jogo__arte .mrc{color:#fff}
.jogo--verde   .jogo__arte .mrc,.jogo--amarelo .jogo__arte .mrc{color:var(--breu)}
/* Quando houver key art de verdade: .jogo__arte[style*="background-image"] esconde o símbolo */
.jogo__arte[data-arte] .mrc{display:none}

.jogo__corpo{padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; gap:.7rem}
.jogo__meta{display:flex; flex-wrap:wrap; gap:.4rem}
.selo{
  font-family:var(--fonte-mono); font-size:var(--t-mono); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:.28rem .6rem; border-radius:999px;
  border:1px solid var(--linha-forte); color:var(--texto-fraco);
}
.selo--vivo{border-color:var(--verde); color:var(--verde)}
.selo--breve{border-color:var(--amarelo); color:var(--amarelo)}
.jogo p{color:var(--texto-fraco); font-size:.98rem}
.jogo__links{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; padding-top:.6rem}
.link-seta{
  font-family:var(--fonte-mono); font-size:var(--t-mono); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--texto); display:inline-flex; gap:.35rem; align-items:center;
  padding:.5rem 0; min-height:44px;
}
.link-seta:hover{color:var(--verde)}
.link-seta + .link-seta{margin-left:1.2rem}

/* -------------------------------------------------- 9. SOBRE ------------ */
.sobre{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
@media (max-width:860px){ .sobre{grid-template-columns:1fr} }
.sobre__arte{
  border-radius:var(--raio-g); padding:clamp(2rem,5vw,3.5rem); display:grid; place-items:center;
  background:var(--gradiente); aspect-ratio:1/.85;
}
.sobre__arte img{width:min(220px,62%); filter:drop-shadow(0 20px 40px rgba(0,0,0,.28))}
.sobre p + p{margin-top:1.1rem}
.sobre p{color:var(--texto-fraco); font-size:var(--t-lead)}
.sobre strong{color:var(--texto); font-weight:700}

/* -------------------------------------------------- 10. DEVLOG ---------- */
.grade-posts{display:grid; gap:clamp(1rem,2vw,1.4rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.post{
  display:flex; flex-direction:column; gap:.7rem; padding:1.5rem;
  background:var(--carvao); border:1px solid var(--linha); border-radius:var(--raio);
  transition:border-color var(--transicao), transform var(--transicao);
}
.post:hover{border-color:var(--linha-forte); transform:translateY(-3px)}
.post__data{font-family:var(--fonte-mono); font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--texto-fraco)}
.post p{color:var(--texto-fraco); font-size:.98rem}
.post__tag{align-self:flex-start; margin-top:auto; padding-top:.6rem}

.filtros{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem}
.filtro{
  padding:.55rem 1rem; min-height:44px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid var(--linha-forte); color:var(--texto-fraco);
  font-family:var(--fonte-mono); font-size:var(--t-mono); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:all var(--transicao);
}
.filtro:hover{color:var(--texto); border-color:var(--texto-fraco)}
.filtro[aria-pressed="true"]{background:var(--verde); border-color:var(--verde); color:var(--breu)}

/* Artigo / prosa do post */
.artigo{max-width:70ch; margin-inline:auto}
.artigo__capa{border-radius:var(--raio-g); overflow:hidden; margin-bottom:clamp(2rem,5vw,3rem); background:var(--gradiente); aspect-ratio:16/7}
.prosa{font-size:1.09rem; line-height:1.75; color:#DCDCE2}
.prosa > * + *{margin-top:1.35rem}
.prosa h2{font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2rem); margin-top:2.8rem; letter-spacing:-.025em}
.prosa h3{margin-top:2rem}
.prosa a{color:var(--verde); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px}
.prosa ul,.prosa ol{padding-left:1.3rem; color:#DCDCE2}
.prosa li + li{margin-top:.5rem}
.prosa img{border-radius:var(--raio); border:1px solid var(--linha)}
.prosa blockquote{
  margin:2rem 0; padding:.2rem 0 .2rem 1.4rem; border-left:3px solid var(--verde);
  font-size:1.2rem; color:var(--texto); font-style:normal;
}
.prosa code{font-family:var(--fonte-mono); font-size:.9em; background:var(--grafite); padding:.15em .4em; border-radius:6px}
.prosa pre{background:var(--carvao); border:1px solid var(--linha); border-radius:var(--raio); padding:1.2rem; overflow-x:auto}
.prosa pre code{background:none; padding:0}
.prosa figcaption{font-family:var(--fonte-mono); font-size:var(--t-mono); color:var(--texto-fraco); margin-top:.6rem; letter-spacing:.06em}

/* -------------------------------------------------- 11. PÁGINA DE JOGO -- */
.jogo-hero{position:relative; overflow:hidden; padding-block:clamp(3rem,7vw,5.5rem)}
.jogo-hero__fundo{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.55; filter:saturate(1.05)}
/* Véu por fora do fundo, senão a opacidade do fundo enfraqueceria o próprio véu */
.jogo-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, var(--breu) 2%, rgba(15,15,17,.88) 42%, rgba(15,15,17,.55));
}
.jogo-hero > .wrap{position:relative; z-index:1}
.jogo-hero h1{font-size:clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem); font-weight:900; letter-spacing:-.04em; margin-top:.8rem}
.jogo-hero__lead{color:var(--texto-fraco); font-size:var(--t-lead); max-width:52ch; margin-top:1.2rem}

.ficha{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--linha); border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden;
}
.ficha div{background:var(--carvao); padding:1.1rem 1.2rem}
.ficha dt{font-family:var(--fonte-mono); font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--texto-fraco)}
.ficha dd{margin:.35rem 0 0; font-weight:600}

.player{
  aspect-ratio:16/9; border-radius:var(--raio-g); overflow:hidden;
  border:1px solid var(--linha); background:var(--grafite); display:grid; place-items:center;
}
.player iframe{width:100%; height:100%; border:0}

.galeria{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1rem}
.galeria figure{margin:0; border-radius:var(--raio); overflow:hidden; border:1px solid var(--linha); background:var(--grafite); aspect-ratio:16/10}
.galeria img{width:100%; height:100%; object-fit:cover}

/* -------------------------------------------------- 12. FAIXA CTA ------- */
/* Fundo sólido, não gradiente: um gradiente que vai do amarelo ao violeta não
   admite NENHUMA cor de texto legível em toda a sua extensão (preto falha no
   violeta, branco falha no amarelo). Então o gradiente vira moldura decorativa
   e o texto fica em branco sobre violeta — 6,6:1. */
.cta{
  border-radius:var(--raio-g); padding:clamp(2.2rem,5vw,3.6rem);
  background:var(--violeta); color:var(--papel); overflow:hidden; position:relative; isolation:isolate;
}
.cta::before{ /* fita de gradiente no topo do cartão */
  content:""; position:absolute; inset:0 0 auto; height:6px; background:var(--gradiente);
}
.cta::after{ /* letra gigante da marca como marca-d'água */
  content:""; position:absolute; right:-5%; bottom:-14%; width:min(360px,44%); aspect-ratio:139/109;
  background-color:#fff; opacity:.1; z-index:-1;
  -webkit-mask:url(../img/letra-u.svg) center/contain no-repeat;
  mask:url(../img/letra-u.svg) center/contain no-repeat;
}
.cta h2{max-width:20ch; color:var(--papel)}
.cta p{margin-top:1rem; max-width:46ch; color:var(--papel); font-size:var(--t-lead); font-weight:500}
.cta .rotulo{color:var(--papel)}
.cta .rotulo::before{background:var(--amarelo)}
.forma{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; max-width:560px}
.forma input{
  flex:1 1 240px; min-height:52px; padding:.85rem 1.2rem; border-radius:999px;
  border:1px solid rgba(15,15,17,.2); background:var(--papel); color:var(--breu);
  font:inherit; font-size:var(--t-mini);
}
.forma input::placeholder{color:#5A5A66}
.forma input:focus-visible{outline:3px solid var(--amarelo); outline-offset:2px}
/* Amarelo: 3,4:1 sobre o violeta, então o botão tem contorno perceptível;
   e texto escuro sobre amarelo dá 13:1. */
.forma .btn{background:var(--amarelo); color:var(--breu); border-color:var(--amarelo)}
.forma .btn:hover{background:#FFD827}
.cta__nota{font-family:var(--fonte-mono); font-size:var(--t-mono); letter-spacing:.08em; margin-top:1.1rem; color:var(--papel); opacity:.9}

/* -------------------------------------------------- 13. RODAPÉ ---------- */
.rodape{border-top:1px solid var(--linha); padding-block:clamp(3rem,6vw,4.5rem) 2.5rem; color:var(--texto-fraco)}
.rodape__grade{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2.5rem}
@media (max-width:760px){ .rodape__grade{grid-template-columns:1fr 1fr; gap:2rem} }
.rodape h4{font-family:var(--fonte-mono); font-size:var(--t-mono); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--texto); margin-bottom:1rem}
.rodape ul{list-style:none; padding:0; margin:0; display:grid; gap:.35rem}
.rodape a{font-size:.96rem; display:inline-block; padding-block:.3rem}
.rodape a:hover{color:var(--verde)}
.rodape__marca .mrc{width:120px; color:var(--papel); margin-bottom:1.1rem}
.rodape__fim{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.6rem; border-top:1px solid var(--linha);
  font-family:var(--fonte-mono); font-size:var(--t-mono); letter-spacing:.1em;
}

/* -------------------------------------------------- 14. UTILITÁRIOS ----- */
.pilha{display:grid; gap:1.2rem}
.centro{text-align:center; margin-inline:auto}
.fundo-carvao{background:var(--carvao)}
.borda-topo{border-top:1px solid var(--linha)}

/* Blocos empilhados na mesma "página": encostam no anterior e respiram pouco */
.secao--pilha{padding-block:0 clamp(1.8rem,3.5vw,3rem)}
.secao--fim{padding-bottom:clamp(3rem,6vw,5rem)}

/* Duas colunas com quebra automática no mobile */
.col-2{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(2rem,5vw,4rem); align-items:start}
@media (max-width:860px){ .col-2{grid-template-columns:1fr} }

/* Cabeçalho de seção com ação alinhada à direita */
.cabeca-linha{display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3rem)}
.cabeca-linha > div{flex:1 1 380px; max-width:46ch}
.cabeca-linha h2{font-size:var(--t-h2)}

/* Títulos grandes de página interna — menores que o h1 da home, senão
   uma frase de cinco palavras vira cinco linhas. */
.titulo-pagina{font-size:clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem); font-weight:900; letter-spacing:-.045em}
.titulo-artigo{font-size:clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem); font-weight:900; letter-spacing:-.04em}

/* Link dentro de texto corrido */
.link-texto{color:var(--verde); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px}
.link-texto:hover{color:var(--amarelo)}

/* Migalhas de pão reaproveitam o rótulo, mas sem o tracinho verde */
.migalhas::before{display:none}
.migalhas{gap:.45rem}
.migalhas a:hover{color:var(--texto)}

/* Reveal suave ao rolar */
.revelar{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.revelar.visivel{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .revelar{opacity:1; transform:none}
}

/* -------------------------------------------------- 15. CONTRIBUIDORES --- */
.contribuidores{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
}
.contribuidores__avatares{
  display:flex; align-items:center; margin-left:.3rem;
}
.contribuidores__avatar{
  position:relative; width:38px; height:38px; border-radius:50%; overflow:hidden;
  border:2px solid var(--carvao); margin-left:-12px;
  transition:transform var(--transicao), z-index 0s var(--transicao);
}
.contribuidores__avatar:first-child{margin-left:0}
.contribuidores__avatar:hover{
  transform:translateY(-3px) scale(1.1); z-index:10;
  transition:transform var(--transicao), z-index 0s;
}
.contribuidores__avatar img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.contribuidores__avatar::after{
  content:attr(data-nome);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--grafite); color:var(--texto); font-size:var(--t-mini);
  padding:.4rem .7rem; border-radius:8px; white-space:nowrap;
  border:1px solid var(--linha-forte); pointer-events:none;
  opacity:0; transition:opacity var(--transicao);
}
.contribuidores__avatar:hover::after{opacity:1}
.contribuidores__label{
  font-family:var(--fonte-mono); font-size:var(--t-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--texto-fraco);
}

/* Variação para jogos (avatares menores sobrepostos) */
.jogo .contribuidores__avatar{width:32px; height:32px; margin-left:-10px}
.jogo .contribuidores{margin-top:.6rem}
.jogo .contribuidores[hidden]{display:none !important}

/* Variação para posts (avatar 52px + nome legível abaixo) */
.artigo .contribuidores{display:flex; margin-top:1.4rem; flex-direction:column; align-items:flex-start; gap:.6rem}
.artigo .contribuidores__label{font-family:var(--fonte-mono); font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--texto-fraco)}
.artigo .contribuidores__avatares{display:flex; align-items:flex-start; margin-left:0; gap:1.2rem; flex-wrap:wrap}
.artigo .contribuidores__avatar{width:52px; height:52px; margin-left:0; border-color:var(--breu)}
.artigo .contribuidores__avatar:first-child{margin-left:0}
.artigo .contribuidores__avatar::after{display:none !important}

/* Item de contribuidor no post: avatar + nome */
.post-contrib__item{
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  text-decoration:none; color:inherit;
}
.post-contrib__item:hover .contribuidores__avatar{transform:translateY(-3px) scale(1.05)}
.post-contrib__nome{
  font-size:.82rem; color:var(--texto); text-align:center;
  max-width:110px; line-height:1.25; word-break:break-word;
  font-weight:600;
}

/* -------------------------------------------------- 16. EQUIPE ----------- */
.equipe{
  padding-block:clamp(3rem,6vw,5rem); margin-top:clamp(3rem,6vw,5rem);
  border-top:1px solid var(--linha);
}
.grade-equipe{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));
  gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(2rem,4vw,3rem);
}
.membro{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem;
}
.membro__foto{
  width:min(160px,80%); aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:3px solid var(--linha); background:var(--grafite);
  transition:border-color var(--transicao), transform var(--transicao);
}
.membro:hover .membro__foto{
  border-color:var(--linha-forte); transform:scale(1.05);
}
.membro__foto img{width:100%; height:100%; object-fit:cover; display:block}
.membro__nome{font-weight:700; font-size:1.1rem; color:var(--texto)}
.membro__cargo{
  font-family:var(--fonte-mono); font-size:var(--t-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--texto-fraco);
}