/* Programa Start — sistema de design. Referência: tipografia grande e apertada, respiro vertical generoso, cor quase ausente com um acento só, movimento curto. */ /* Inter auto-hospedada (OFL), variável 400–800 — a fonte ÚNICA da interface e dos títulos (handoff Start Academy V3.2, decisão do dono em 26/09/2026). Substitui a Fraunces. Dois subsets: latin (todo o pt-BR acentuado) + latin-ext (o browser só baixa se a página usar esses caracteres). */ @font-face { font-family: "Inter"; src: url("fontes/inter-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; 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: "Inter"; src: url("fontes/inter-latin-ext.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; 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; } :root { --tinta: #1d1d1f; --tinta-2: #6e6e73; --tinta-3: #86868b; --fundo: #ffffff; --fundo-2: #f5f5f7; --fundo-3: #fafafc; --linha: rgba(0, 0, 0, .09); --acento: #2B5A33; /* verde da marca, do fluxo original — matiz 131° */ --acento-hover: #31683B; --ok: #12A150; /* mais claro e saturado que o acento, de propósito: acento = ação, ok = resultado. Se forem parecidos, "liberada" e "concluída" viram a mesma coisa. */ --alerta: #b25000; --bloqueio: #86868b; --raio: 18px; --raio-g: 28px; --sombra: 0 4px 24px rgba(0, 0, 0, .06); --sombra-f: 0 12px 48px rgba(0, 0, 0, .12); --largura: 1040px; --t: cubic-bezier(.28, .11, .32, 1); } /* TEMA (handoff V3.2, decisão do dono em 26/09/2026): claro por PADRÃO; o escuro é escolha explícita, pelo botão do cabeçalho, e fica gravado no navegador (`start.tema`). Não segue mais o modo do aparelho. */ :root { color-scheme: light; } :root[data-tema="escuro"] { color-scheme: dark; --tinta: #f5f5f7; --tinta-2: #a1a1a6; --tinta-3: #86868b; --fundo: #000000; --fundo-2: #101012; --fundo-3: #0a0a0c; --linha: rgba(255, 255, 255, .12); --acento: #67B775; --acento-hover: #75BD82; --ok: #3ECF8E; --alerta: #ff9f45; --sombra: 0 4px 24px rgba(0, 0, 0, .5); --sombra-f: 0 12px 48px rgba(0, 0, 0, .7); } /* Paleta nova (SKILL-PROGRAMA-START-EXPERIENCE-001 §30) — ADITIVA, não substitui --acento/--fundo/--tinta em lugar nenhum ainda (REGRA ZERO, §1: nunca trocar visual em silêncio). Fica disponível pra uso explícito em piloto, e só propaga pro resto do site depois de validado. */ :root { --deep-green: #0D3B2E; /* verde é autoridade */ --leaf: #1E5C43; --moss: #3D7A5C; --sage: #8FAE9D; --paper: #F3F1E9; /* papel/cream é conhecimento */ --cream: #FAF8F2; --gold: #B8925A; /* dourado é reconhecimento */ --assist-fundo: #0c120f; --assist-traco: #1d2822; /* painel do guia: verde-noite deliberado nos dois temas */ --mm: #b8492f; /* vermelho-tijolo do multimercado */ --gold-soft: #D6B981; --ink-editorial: #12261C; --fonte-editorial: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* V3.2: Inter em tudo */ --fonte-interface: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", system-ui, sans-serif; background: var(--fundo); color: var(--tinta); line-height: 1.47; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Achado real (varredura de 76 páginas, 29/09): hash/URL/protocolo sem espaço (uma só "palavra" de 64+ caracteres) empurra a página inteira pro lado no celular -- um screenshot não denuncia isso (o que passa da borda simplesmente não aparece no print, parece "ok"). Regra na raiz em vez de por classe: nenhum texto normal com espaço é afetado, só a palavra longa sem onde quebrar. */ overflow-wrap: break-word; } /* ---------- tipografia ---------- */ h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.028em; line-height: 1.06; } /* A voz editorial nos títulos de página (Onda 3): serif com autoridade nos h1/h2; serif não pede tracking negativo — volta ao natural. Cartões e UI interna seguem na fonte de interface. */ h1, h2 { font-family: var(--fonte-editorial); letter-spacing: -.035em; text-wrap: balance; } /* V3.2: Inter apertada, peso 600 */ h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); letter-spacing: -.045em; } h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); } h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -.022em; } h4 { font-size: 1.06rem; letter-spacing: -.015em; } p { color: var(--tinta-2); font-size: 1.06rem; } a { color: var(--acento); text-decoration: none; } a:hover { text-decoration: underline; } .leve { font-weight: 400; color: var(--tinta-2); } .olho { font-size: .82rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--acento); } .grande { font-size: clamp(1.15rem, 2vw, 1.42rem); line-height: 1.42; color: var(--tinta-2); font-weight: 400; } .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .84rem; letter-spacing: 0; font-variant-numeric: tabular-nums; } .centro { text-align: center; } .limite { max-width: 44ch; } .centro .limite { margin-inline: auto; } /* ---------- estrutura ---------- */ .env { max-width: var(--largura); margin-inline: auto; padding-inline: 24px; } .env-l { max-width: 1280px; margin-inline: auto; padding-inline: 24px; } section { padding-block: clamp(72px, 11vw, 132px); } section.cinza { background: var(--fundo-2); } section.fina { padding-block: clamp(48px, 6vw, 72px); } .cabeca { margin-bottom: clamp(40px, 5vw, 64px); } .cabeca .olho { display: block; margin-bottom: 14px; } .cabeca p { margin-top: 18px; } /* ---------- topo ---------- */ .topo { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--fundo) 82%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--linha); } .topo .env-l { display: flex; align-items: center; gap: 28px; height: 52px; } .marca { font-weight: 600; font-size: .96rem; letter-spacing: -.02em; color: var(--tinta); white-space: nowrap; } .marca:hover { text-decoration: none; opacity: .7; } .topo nav { display: flex; gap: 24px; margin-left: auto; overflow-x: auto; scrollbar-width: none; } .topo nav::-webkit-scrollbar { display: none; } .topo nav a { font-size: .82rem; color: var(--tinta-2); white-space: nowrap; } /* Entrar e Inscreva-se duplicados dentro da gaveta: só aparecem no telefone, onde os originais da barra estão escondidos. */ .topo nav .no-menu { display: none; } .topo nav a:hover, .topo nav a[aria-current] { color: var(--tinta); text-decoration: none; } /* No desktop o wrapper não deve existir pro flex do