/* Mindhub: CSS inicial para sites e landing pages.
   1) Instale as fontes (pasta 03-fontes) ou carregue pelo Google Fonts / Fontshare.
   2) Importe tokens.css antes deste arquivo.
   3) Copie as pastas 01-formas e 02-texturas para o projeto. */

@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;src:url("../03-fontes/Bricolage-Grotesque/BricolageGrotesque-Variable.ttf")}
@font-face{font-family:"Albert Sans";font-weight:100 900;src:url("../03-fontes/Albert-Sans-substituta/AlbertSans-Variable.ttf")}
@font-face{font-family:"Albert Sans";font-style:italic;font-weight:100 900;src:url("../03-fontes/Albert-Sans-substituta/AlbertSans-Italic-Variable.ttf")}
@font-face{font-family:"Gochi Hand";src:url("../03-fontes/Gochi-Hand-substituta/GochiHand-Regular.ttf")}
/* Fontes oficiais (adicionadas em 06/10/2026). Albert Sans e Gochi Hand ficam so como reserva. */
@font-face{font-family:"General Sans";font-weight:200 700;src:url("../03-fontes/General-Sans/web/GeneralSans-Variable.woff2") format("woff2")}
@font-face{font-family:"General Sans";font-style:italic;font-weight:200 700;src:url("../03-fontes/General-Sans/web/GeneralSans-VariableItalic.woff2") format("woff2")}
@font-face{font-family:"Bryndan Write";src:url("../03-fontes/Bryndan-Write/BryndanWrite-Regular.ttf") format("truetype")}

body{margin:0;background:var(--fundo);color:var(--texto);font-family:var(--fonte-sans);font-size:18px;line-height:28px}

/* fundo preto com grao */
.fundo-preto{background:#0a0a0a url("../02-texturas/fundo-preto-granulado.png") center/cover;color:#fff}
.fundo-branco{background:#fff;color:#000}
.fundo-vermelho{background:var(--vermelho);color:#fff}

/* tipografia */
.titulo-hero{font:700 250px/250px var(--fonte-display);letter-spacing:-.03em}
.web-h1{font:700 88px/88px var(--fonte-display);letter-spacing:-.02em}
.web-h2{font:700 48px/52px var(--fonte-display);letter-spacing:-.02em}
.web-lead{font:italic 400 24px/34px var(--fonte-sans);color:var(--texto-suave)}
.web-corpo{font:400 18px/28px var(--fonte-sans)}
.titulo-divertido{font:400 60px/60px var(--fonte-hand);color:var(--vermelho);text-transform:lowercase}
.destaque{color:var(--vermelho)}
@media(max-width:700px){.web-h1{font-size:44px;line-height:44px}.titulo-hero{font-size:120px;line-height:120px}}

/* wordmark: <span class="wordmark">Mind<b>Hub</b></span>. MIND na cor do texto, HUB em vermelho.
   Sobre vermelho: MIND branco e HUB preto (.fundo-vermelho .wordmark b). */
.wordmark{font:400 40px/1 var(--fonte-display);letter-spacing:-.02em;text-transform:uppercase}
.wordmark b{font-weight:400;color:var(--vermelho)}
.fundo-vermelho .wordmark b{color:#000}

/* botoes (pilula) */
.botao{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 32px;border-radius:var(--radius-pill);font:700 19px/24px var(--fonte-sans);text-decoration:none;border:3px solid var(--vermelho);background:var(--vermelho);color:#fff}
.botao:hover{background:#fff;border-color:#fff;color:#000}
.fundo-branco .botao:hover{background:#000;border-color:#000;color:#fff}
.botao.secundario{background:transparent;border-color:#fff;color:#fff}
.fundo-branco .botao.secundario{border-color:#000;color:#000}
.botao:focus-visible{outline:3px solid #fff;outline-offset:3px}
.fundo-branco .botao:focus-visible{outline-color:#000}

/* filete e marcador */
.filete{height:3px;background:var(--vermelho);border:0}
.marcador{width:26px;height:26px;flex:none}


/* forma grande de cenario: posicione cortada pela borda */
.forma-grande{position:absolute;display:block;pointer-events:none}