/* ============================================================ RESET BÁSICO ============================================================ Cada navegador tem valores padrão diferentes para margens, paddings, etc. O reset zera tudo para começarmos do zero e termos um resultado consistente em todos os navegadores. */ * { margin: 0; padding: 0; box-sizing: border-box; /* box-sizing: border-box — fundamental. Por padrão, width: 100px + padding: 10px = elemento de 120px. Com border-box, padding entra DENTRO dos 100px. Mais previsível. */ } /* ============================================================ VARIÁVEIS CSS (custom properties) ============================================================ Definimos cores, espaçamentos e fontes uma única vez no :root (que é o elemento ). Para usar em qualquer lugar: color: var(--cor-texto); Vantagem: para trocar a paleta inteira, mudo só aqui. */ :root { /* Paleta — preto e branco com tons translúcidos (mesma do harmo) */ --cor-fundo: #000000; --cor-texto: #ffffff; --cor-texto-suave: rgba(255, 255, 255, 0.55); --cor-borda: rgba(255, 255, 255, 0.18); --cor-borda-hover: rgba(255, 255, 255, 0.5); /* Escala consistente de espaçamentos para todo o site */ --espaco-xs: 0.5rem; --espaco-sm: 1rem; --espaco-md: 2rem; --espaco-lg: 4rem; --espaco-xl: 6rem; /* Tipografia */ --fonte-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fonte-titulo: "henderson-sans-basic", 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; /* Transição padrão para hover/animações */ --transicao: 0.25s ease; } /* ============================================================ BASE ============================================================ */ html, body { height: 100%; } body { background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-base); font-weight: 400; line-height: 1.6; /* Flexbox em coluna no body: faz o footer ficar grudado embaixo e o main ocupar o espaço do meio. Layout clássico de "sticky footer". */ display: flex; flex-direction: column; min-height: 100vh; padding: var(--espaco-md); /* Suaviza renderização de fontes no macOS/iOS. Sem isso, em monitores Retina o texto pode parecer mais "encorpado". */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ HEADER — nome (esquerda) + toggle de idioma (direita) ============================================================ justify-content: space-between empurra os dois para os extremos. */ .header { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--espaco-lg); } /* .brand: o nome no canto superior esquerdo. Usa a fonte Henderson para ter "personalidade de marca" — diferencia do resto do texto, que usa Montserrat. */ .brand { color: var(--cor-texto); text-decoration: none; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; transition: opacity var(--transicao); } .brand:hover { /* Hover sutil: reduz opacidade para dar feedback de "é clicável" sem virar uma cor totalmente diferente. Mais elegante que mudar de cor. */ opacity: 0.7; } .lang-toggle { display: flex; gap: var(--espaco-xs); align-items: center; font-size: 0.8125rem; color: var(--cor-texto-suave); letter-spacing: 0.05em; } .lang-toggle button { /* Resetando o estilo padrão de