/* ============================================================ RESET BÁSICO ============================================================ Cada navegador (Chrome, Safari, Firefox) tem valores padrão diferentes para margem, padding, 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, se você define width: 100px e padding: 10px, o elemento fica com 120px (100 + 10 de cada lado). Com border-box, o padding entra DENTRO dos 100px. Muito mais previsível. */ } /* ============================================================ VARIÁVEIS CSS (custom properties) ============================================================ Definimos cores e espaçamentos uma única vez aqui no :root (o elemento ). Para usar em qualquer lugar do CSS: color: var(--cor-texto); Vantagem: para trocar a paleta inteira da página, mudo só aqui. */ :root { /* Paleta — preto e branco com tons de cinza translúcidos */ --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); /* Espaçamentos — escala consistente para o site inteiro */ --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; /* 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 a 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 ============================================================ Logo à 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); } .logo { /* line-height: 0 elimina o espaço vertical extra que o navegador adiciona em volta de elementos inline. Sem isso, o SVG fica com uns pixels invisíveis acima/abaixo que desalinham com o toggle. */ color: var(--cor-texto); line-height: 0; } .logo svg { /* height fixa + width: auto preserva a proporção original do SVG (302x201). display: block reforça a remoção do espaço extra de elemento inline. */ height: 26px; width: auto; display: block; } .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