/* SentifySocial — folha unica.
 *
 * A versao anterior era roxo com gradiente. Saiu inteira, e o motivo esta escrito
 * em marca/gerar_imagens.py: gradiente violeta-magenta com brilho virou a
 * assinatura visual do que sai de gerador de imagem, e a pessoa classifica a
 * pagina como automatica antes de ler o nome.
 *
 * A direcao aqui e a oposta, e ela e feita de subtracao:
 *   - Cor CHAPADA. Nenhum gradiente, nenhuma sombra colorida, nenhum brilho.
 *   - Tres cores e um cinza. O vermelhao aparece pouco, e por isso e que ele
 *     funciona: acento que aparece em tudo deixa de ser acento.
 *   - Escala tipografica larga. O contraste entre 13px e 76px e o que organiza
 *     a pagina, nao caixa colorida em volta de cada coisa.
 *   - Espaco vazio generoso. E o item mais caro de um layout e o que mais
 *     separa desenho de preenchimento.
 *
 * ZERO recurso externo, de proposito: nenhuma fonte do Google, nenhum CDN,
 * nenhum script de medicao. Isso mantem verdadeira a frase "este site nao
 * coleta nada" da pagina de privacidade — um unico <link> para fonte de
 * terceiro entregaria o IP do visitante antes de ele clicar em qualquer coisa.
 * A elegancia vem de escala e espaco, que sao de graca, e nao de fonte exotica.
 */

:root{
  --tinta:#0e1116;         /* fundo */
  --superficie:#161a21;    /* cartao */
  --linha:#242a33;
  --papel:#f4f2ed;         /* texto principal, branco quente */
  --apagado:#9aa1aa;       /* texto secundario. 7,25:1 sobre a tinta; o cinza anterior (#8a9099) dava 5,88:1 */
  --acento:#c8452c;        /* vermelhao: so a regua e o ponto. Numero pequeno no acento falha AA. */
  --jogo-tinta:#16131a;    /* cartao do jogo: um passo mais quente que a superficie do estudio */
  --jogo-linha:#3a3344;
  --largura:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

body{
  margin:0;
  background:var(--tinta);
  color:var(--papel);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--largura);margin:0 auto;padding:0 24px}

a{color:var(--papel);text-decoration:none;border-bottom:1px solid var(--linha);transition:border-color .18s,color .18s}
a:hover{color:var(--papel);border-bottom-color:var(--acento)}
a:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:2px}

/* ---------- barra fixa ---------- */
.barra{
  position:sticky;top:0;z-index:20;
  background:rgba(14,17,22,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--linha);
}
.barra .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.logo{display:inline-flex;align-items:center;gap:11px;border:0;font-weight:700;letter-spacing:-.2px}
.logo img{width:30px;height:30px;border-radius:7px;display:block}
.menu{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15px}
.menu a{color:var(--apagado);border:0}
.menu a:hover{color:var(--papel)}
@media (max-width:600px){ .menu{gap:16px;font-size:13.5px} .logo span{font-size:15px} }

/* ---------- topo ---------- */
.hero{padding:clamp(64px,13vw,132px) 0 clamp(56px,10vw,104px)}
.hero h1{
  font-size:clamp(38px,7.4vw,76px);line-height:1.03;
  letter-spacing:-2px;font-weight:800;margin:0 0 26px;max-width:16ch;
}
.hero h1 .ponto{color:var(--acento)}
.hero p{
  font-size:clamp(17px,2.3vw,21px);color:var(--apagado);
  margin:0;max-width:56ch;line-height:1.6;
}
.regua{width:56px;height:3px;background:var(--acento);margin:0 0 30px;border-radius:2px}

/* ---------- secoes ---------- */
section{padding:clamp(48px,8vw,84px) 0;border-top:1px solid var(--linha)}
.rotulo{
  display:flex;align-items:baseline;gap:14px;margin:0 0 34px;
  font-size:13px;letter-spacing:2.4px;text-transform:uppercase;color:var(--apagado);
}
.rotulo b{color:var(--papel);font-weight:700;font-variant-numeric:tabular-nums}
h2{font-size:clamp(26px,4vw,38px);line-height:1.15;letter-spacing:-.9px;margin:0 0 18px;font-weight:750}

/* ---------- jogo ---------- */
.jogo{
  display:grid;grid-template-columns:148px 1fr;gap:32px;align-items:start;
  background:var(--jogo-tinta);border:1px solid var(--jogo-linha);
  border-radius:18px;padding:32px;
}
.jogo img{width:148px;height:148px;border-radius:32px;display:block}
.jogo h3{margin:8px 0 10px;font-size:clamp(22px,3vw,28px);letter-spacing:-.5px}
.jogo p{margin:0;color:var(--apagado);max-width:62ch}
.jogo .meta{
  margin:0;
  font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--apagado);
}
@media (max-width:640px){
  .jogo{grid-template-columns:1fr;gap:20px;padding:24px}
  .jogo img{width:112px;height:112px;border-radius:24px}
}

/* ---------- grade de itens ---------- */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:16px;overflow:hidden}
.item{background:var(--tinta);padding:28px 26px 30px}
.item .n{font-size:12.5px;letter-spacing:2px;color:var(--papel);font-weight:700;font-variant-numeric:tabular-nums}
.item h3{margin:12px 0 8px;font-size:19px;letter-spacing:-.3px}
.item p{margin:0;color:var(--apagado);font-size:16px}

/* ---------- texto corrido ---------- */
.texto{max-width:68ch}
.texto p{color:var(--apagado);margin:0 0 16px}
.texto p:last-child{margin:0}
.texto strong{color:var(--papel);font-weight:650}

/* ---------- contato ---------- */
.contato{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline}
.email{font-size:clamp(19px,3.2vw,28px);letter-spacing:-.5px;border-bottom:1px solid var(--acento);padding-bottom:2px}
.prazo{color:var(--apagado)}

/* ---------- rodape ---------- */
footer{border-top:1px solid var(--linha);padding:34px 0 56px;color:var(--apagado);font-size:14.5px}
footer .wrap{display:flex;gap:14px 28px;flex-wrap:wrap;justify-content:space-between;align-items:center}
footer ul{display:flex;gap:24px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
footer a{color:var(--apagado);border:0}
footer a:hover{color:var(--papel)}

/* ---------- paginas de texto ---------- */
.pagina{padding:clamp(48px,8vw,88px) 0 24px}
.pagina h1{font-size:clamp(30px,5.4vw,46px);letter-spacing:-1.2px;margin:0 0 10px;font-weight:800}
.pagina .data{color:var(--apagado);font-size:14.5px;margin:0 0 34px}
.pagina h2{font-size:15px;letter-spacing:1.8px;text-transform:uppercase;color:var(--apagado);margin:34px 0 10px;font-weight:700}
.pagina p{color:var(--apagado);max-width:68ch}
.pagina strong{color:var(--papel)}
.pagina code{background:var(--superficie);border:1px solid var(--linha);border-radius:5px;padding:1px 6px;font-size:14.5px}