/* * TOKENS.CSS — Design Tokens Globais * Projeto: "O Novo Sistema" (Altis Lisboa / Ana Lisboa) — rebrand local a partir do * scaffold original de reconstrução pixel-perfect do site "Tradutor de Almas" * (andreavermontpsicanalise.com). Fonte da verdade estrutural: docs/recon-visual-tokens.md. * * ============================================================================ * MIGRAÇÃO DE PALETA (rebrand) — LER ANTES DE EDITAR * ============================================================================ * Os NOMES de todas as variáveis abaixo são os originais do scaffold (dourado/ * preto/branco do site de referência) e foram MANTIDOS de propósito — os 15 * arquivos styles/sections/NN-*.css dependem desses nomes. Apenas os VALORES * (cores hex) foram substituídos pelo sistema de 2 tons da marca real, extraído * de brand/paleta de cor.png: * * #0F221D — verde institucional escuro ("cor base escura") * #FBF7EE — creme ("cor base clara") * * Não existe uma 3ª cor de marca (nem dourado, nem azul, nem cinza neutro). Toda * variável que precisa de uma variação (hover, borda sutil, texto secundário, * nível extra de fundo escuro, etc.) foi derivada matematicamente a partir das * duas cores base, por dois métodos, conforme o caso: * * 1. `color-mix(in srgb, X%, Y%)` — quando a * variação precisa manter opacidade total (ex.: um 2º nível de fundo * escuro, um tom de cinza-claro para cards sobre fundo creme). * 2. `rgba(, , , alpha)` sobre o RGB de uma das duas bases — quando a * variável original representava um texto/overlay translúcido (ex.: cinza * de texto secundário, glass de botão outline). RGB usados: * #0F221D = rgb(15, 34, 29) · #FBF7EE = rgb(251, 247, 238). * * Mapeamento por categoria (ver bloco "1. CORES" abaixo para os valores exatos): * - Fundos escuros (`--cor-fundo-escuro-base`, `--cor-fundo-preto-puro`) → * #0F221D como base; `--cor-fundo-preto-puro` ganha um 2º nível levemente * mais escuro (color-mix com preto) para dar profundidade extra às seções * que no site original eram "pretas puras" (gatilhos, FAQ, jornada). * - Textos brancos/claros (`--cor-texto-branco` e variantes de destaque * dourado/champagne) → #FBF7EE. Como não há 3ª cor, o "accent dourado" do * site original passa a ser o próprio creme em alto contraste sobre o * fundo verde (ver nota no bloco de Accent abaixo). * - Fundos claros / branco puro (`--cor-fundo-claro`, `--cor-badge-fundo`) → * #FBF7EE. `--cor-fundo-cinza-claro` (card sobre fundo claro) ganha um tom * de creme levemente mais escuro via color-mix, só para diferenciar do * fundo ao redor. * - Textos secundários/cinza (`--cor-texto-cinza-*`, `--cor-preco-riscado`, * `--cor-branco-50`) → rgba() de uma das duas bases (nunca cinza neutro * desconectado da marca). * - `--cor-azul-marinho` (não existe azul na marca) → substituído por * #0F221D sólido (mesmo papel: heading escuro sobre fundo claro). * * NÃO redefina estes valores em outros arquivos. Todos os agentes de seção devem * consumir estas variáveis via var(--...) — ver docs/CONVENCOES.md. * * ============================================================================ * MIGRAÇÃO DE TIPOGRAFIA (rebrand) — ver também docs/CONVENCOES.md * ============================================================================ * A marca fornece uma única fonte própria: RizomaM (peso único, Regular/400, * arquivo brand/fonts/RizomaM-Regular.otf → copiado para * assets/fonts/RizomaM-Regular.otf, @font-face declarado em styles/base.css). * * Inspeção do arquivo (tabela OS/2.panose = bFamilyType 2 "Latin Text", * bSerifStyle 5 "Obtuse Square Cove" → é uma fonte SERIFADA, não sans-serif; * proporção x-height/cap-height = 444/712 ≈ 0.62, uma razão baixa/clássica — * fontes pensadas para leitura confortável de corpo em tela normalmente ficam * acima de ~0.68-0.70) confirma que a RizomaM é uma serifada de exibição: * elegante e marcante em títulos grandes, mas com proporções que cansam a * leitura em blocos de texto corrido pequenos. Peso único (sem bold/italic) * reforça isso — não há como construir hierarquia (regular/bold) só com ela. * * DECISÃO: RizomaM é usada SOMENTE em display/títulos (`--font-familia-display`, * aplicada a h1–h6 em base.css). Para corpo de texto foi escolhida a fonte * gratuita do Google Fonts "Instrument Sans" (`--font-familia-corpo`) — sans- * serif humanista, x-height alto (legível em blocos pequenos), tom editorial/ * discreto (não é Arial/Roboto/Inter genérica), com pesos 400/500/600 * disponíveis para reconstruir a hierarquia que a RizomaM (peso único) não * permite. `--font-familia-base` (nome original, consumido por várias seções * para texto de corpo/rodapé) passou a APONTAR para a fonte de apoio * (Instrument Sans), não para a RizomaM — ver uso em base.css. */ :root { /* ============================================================ * 1. CORES * ============================================================ */ /* --- Fundos --- Marca: só existem 2 cores. #0F221D (verde institucional) é a base de todo fundo escuro; --cor-fundo-preto-puro ganha um 2º nível (color-mix com preto) para preservar a hierarquia de profundidade que o site original tinha entre "escuro" e "preto puro". #FBF7EE (creme) é a base de todo fundo claro. */ --cor-fundo-escuro-base: #0F221D; /* body e maioria das seções escuras */ --cor-fundo-preto-puro: color-mix(in srgb, #0F221D 85%, black 15%); /* seções escuras "mais profundas" (gatilhos, jornada, FAQ) — mesmo verde, um nível mais escuro */ --cor-fundo-claro: #FBF7EE; /* seções de contraste (depoimentos, premiação, oferta, "oportunidade") */ --cor-fundo-cinza-claro: color-mix(in srgb, #FBF7EE 92%, #0F221D 8%); /* card "Premiação" sobre fundo claro — mesmo creme, tom levemente mais escuro para diferenciar do fundo */ /* --- Texto --- rgba() usa o RGB das 2 bases (#0F221D = 15,34,29 · #FBF7EE = 251,247,238) para criar os níveis de opacidade que substituem os cinzas neutros originais. */ --cor-texto-branco: #FBF7EE; /* headings em fundo escuro, botões secundários */ --cor-texto-cinza-medio: rgba(251, 247, 238, 0.65); /* subtítulo hero, parágrafos de apoio em fundo escuro */ --cor-texto-cinza-claro: rgba(251, 247, 238, 0.72); /* corpo dentro de cards de feature/depoimento (mais opaco que cinza-medio, como no original) */ --cor-texto-cinza-escuro: rgba(15, 34, 29, 0.65); /* parágrafos em seções claras */ --cor-texto-quase-preto: #0F221D; /* headings em fundo claro */ --cor-texto-preto-alt: #0F221D; /* variante quase-preta observada em headings de fundo claro — mesma base institucional (marca não tem 2 tons de "preto") */ --cor-texto-bio-corpo: rgba(15, 34, 29, 0.68); /* corpo da bio da especialista (fundo claro) */ --cor-texto-quote: rgba(251, 247, 238, 0.92); /* citação em destaque (quote box) e itens de cronograma — sobre fundo escuro */ --cor-texto-footer-copy: rgba(251, 247, 238, 0.55); /* copyright do rodapé */ --cor-heading-faq: #FBF7EE; /* H1 "Perguntas frequentes" (fundo escuro) */ --cor-heading-premiacao: #0F221D; /* H2 "Maior empresa de saúde mental..." */ /* --- Accent --- A marca não tem uma 3ª cor (nada de dourado). O papel de "accent" do dourado original passa a ser o próprio creme em alto contraste sobre o verde institucional — por isso os 2 tokens abaixo convergem para o mesmo valor de #FBF7EE (mantidos como variáveis separadas só porque outras seções dependem dos 2 nomes). */ --cor-dourado-primario: #FBF7EE; /* accent primário: destaques em itálico, labels, "PREMIAÇÃO" */ --cor-dourado-claro-champagne: #FBF7EE; /* nome/destaque de preço em fundo escuro */ /* --- Destaque dourado contextual (2026-08-11, pedido do cliente) --- Os 2 tokens acima resolvem para o creme (não há 3ª cor "oficial" na marca), mas na prática o site usa uma cor dourada/amarela (a mesma família de --cor-cta-dourado) para colorir texto/ícone/borda de destaque, e o tom precisa mudar conforme o fundo para manter contraste: mais claro sobre fundo verde/escuro, mais escuro (mais saturado) sobre fundo creme/claro. Ver docs/CONVENCOES.md — regra de uso por fundo. NÃO redefine os 2 tokens acima (aditivo); usar estes 2 novos em todo texto/ícone/borda dourado que hoje aponta para --cor-dourado-primario/--cor-dourado-claro-champagne ou --cor-cta-dourado fora de fundo de botão sólido. */ --cor-destaque-em-verde: #F8DBA9; /* destaque dourado sobre fundo verde/escuro institucional */ --cor-destaque-em-claro: #A4721D; /* destaque dourado sobre fundo claro/creme */ /* --- Botão CTA --- Alto contraste consistente com o uso do logo: fundo creme + texto verde institucional. */ --cor-botao-fundo: #FBF7EE; /* fundo pílula CTA (variante sólida) */ --cor-botao-texto: #0F221D; /* texto dentro do botão */ --cor-botao-outline-fundo: rgba(251, 247, 238, 0.08); /* variante secundária/outline (glass) sobre fundo escuro — creme translúcido em vez de branco translúcido */ /* --- Botão CTA (dourado, chamada de atenção) --- Pedido explícito do usuário: destacar os CTAs principais em dourado (fora das 2 cores de marca originais — ver nota de migração no topo do arquivo). Contraste --cor-cta-dourado-texto sobre --cor-cta-dourado ≈ 7.8:1 (AAA). */ --cor-cta-dourado: #D4AF37; /* fundo pílula CTA principal (dourado) */ --cor-cta-dourado-texto: #0F221D; /* texto dentro do CTA dourado */ /* Hover padronizado (2026-08-11, pedido do cliente): todo botão/pílula sólido dourado deve CLAREAR (não escurecer) no hover — ver docs/CONVENCOES.md e regra replicada em cada styles/sections/NN-*.css que tem um CTA dourado. */ --cor-cta-dourado-hover: color-mix(in srgb, var(--cor-cta-dourado) 78%, white 22%); /* --- Comparação "Velho Sistema" vs "Novo Sistema" (2026-08-11, pedido do cliente; paleta refinada 2026-08-13 para a versão "tabela premium") --- Cores semânticas vermelho/verde para a tabela de comparação da seção 02c-comparacao — fora das 2 cores de marca originais (mesmo raciocínio de --cor-cta-dourado acima: o contraste semântico "problema vs solução" que esta seção precisa comunicar não existe na paleta verde/creme da marca). Vermelho = velho sistema (problema); verde = novo sistema (solução) — um verde DIFERENTE do institucional (--cor-fundo-escuro-base é um verde-petróleo escuro; aqui é um verde musgo mais discreto, pedido explícito do cliente para a versão premium da tabela). */ --cor-comparacao-velho: #A33131; /* header do lado "velho sistema" (vermelho fechado) */ --cor-comparacao-velho-bg: #F6E4E4; /* fundo das células do lado "velho sistema" (rosa extremamente claro) */ --cor-comparacao-novo: #234E36; /* header do lado "novo sistema" (verde musgo institucional) */ --cor-comparacao-novo-bg: #EAF4E9; /* fundo das células do lado "novo sistema" (verde extremamente claro) */ --cor-comparacao-label-bg: #F8F5EE; /* fundo da 1ª coluna (identificação do tema) — creme */ --cor-comparacao-texto: #1F1F1F; /* texto grafite dentro da tabela comparativa */ /* --- Outras cores semânticas --- */ --cor-azul-marinho: #0F221D; /* não há azul na marca — heading escuro sobre fundo claro usa a base institucional */ --cor-preco-riscado: rgba(15, 34, 29, 0.45); /* preço antigo tachado, sobre fundo claro */ --cor-branco-50: rgba(251, 247, 238, 0.5); /* stats hero, link "Termos de uso" — sobre fundo escuro */ --cor-badge-fundo: #FBF7EE; /* badge flutuante fixo (widget de conversão) */ /* ============================================================ * 2. TIPOGRAFIA * ============================================================ */ /* --- Família --- Ver migração de tipografia no comentário do topo do arquivo. --font-familia-display = RizomaM (marca, serifada, peso único) — usar SÓ em títulos (h1–h6, ver base.css). --font-familia-base = fonte de apoio "Instrument Sans" (Google Fonts) — corpo de texto, rodapé, labels; nome da variável mantido do scaffold original para não quebrar as seções que já consomem var(--font-familia-base). --font-familia-corpo é um alias do mesmo valor, para uso explícito onde fizer sentido nomear a intenção. */ --font-familia-display: 'RizomaM', Georgia, 'Times New Roman', serif; --font-familia-base: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-familia-corpo: var(--font-familia-base); /* --- Pesos padrão --- ATENÇÃO: RizomaM (--font-familia-display, usada em h1–h6 por base.css) só existe no peso 400 — quando um --fw-* abaixo resolve para --peso-medio/ --peso-semibold e é aplicado a um heading, o navegador faz fake-bold (não há arquivo de fonte bold real). Isso é uma limitação da fonte de marca fornecida (peso único), não um bug destes tokens; --peso-medio/--peso-semibold continuam corretos para elementos que usam --font-familia-base (Instrument Sans, que tem os pesos 400/500/600 de verdade). */ --peso-regular: 400; /* corpo/parágrafo */ --peso-medio: 500; /* subheads, labels, botões, itens de lista */ --peso-semibold: 600; /* headings de destaque, números de preço, nome da especialista */ /* --- Escala tipográfica por elemento (font-size / font-weight / line-height / letter-spacing) --- */ /* Label "COMEÇA EM" (contador) */ --fs-countdown-label: 16px; --fw-countdown-label: var(--peso-regular); --lh-countdown-label: 16px; /* H1 Hero ("Cure seus traumas... tenha uma profissão rentável.") */ --fs-h1-hero: 52px; --fw-h1-hero: var(--peso-semibold); --lh-h1-hero: 62.4px; /* Subtítulo Hero */ --fs-hero-subtitulo: 18px; --fw-hero-subtitulo: var(--peso-regular); --lh-hero-subtitulo: 23.4px; /* Texto botão CTA pílula */ --fs-botao: 16px; --fw-botao: var(--peso-regular); --lh-botao: 19.2px; /* "POR APENAS R$ 37,00" (ao lado do CTA) */ --fs-preco-inline: 18px; --fw-preco-inline: var(--peso-medio); --lh-preco-inline: 18px; /* Stats do rodapé do hero ("+ de 16 países") */ --fs-stats-hero: 22px; --fw-stats-hero: var(--peso-medio); --lh-stats-hero: 26.4px; /* H2 "...simplesmente se repetem?" / "Tradutor de Almas" (destaque dourado) */ --fs-h2-destaque: 36px; --fw-h2-destaque: var(--peso-semibold); --lh-h2-destaque: 43.2px; /* Título de card de feature ("Padrões que se repetem") */ --fs-card-titulo: 20px; --fw-card-titulo: var(--peso-medio); --lh-card-titulo: 26px; /* Corpo de card de feature */ --fs-card-corpo: 16px; --fw-card-corpo: var(--peso-regular); --lh-card-corpo: 20.8px; /* H1 "Mas por que isso acontece comigo?" (fundo branco) */ --fs-h1-claro: 48px; --fw-h1-claro: var(--peso-regular); --lh-h1-claro: 57.6px; /* Legenda depoimento (nome do autor) / "Comentário do Youtube" (label) */ --fs-depoimento-legenda: 18px; --fw-depoimento-nome: var(--peso-regular); --fw-depoimento-label: var(--peso-medio); --lh-depoimento-legenda: 23.4px; /* Corpo do depoimento (card) */ --fs-depoimento-corpo: 14px; --fw-depoimento-corpo: var(--peso-medio); --lh-depoimento-corpo: 18.2px; /* Label "PREMIAÇÃO" */ --fs-label-premiacao: 16px; --fw-label-premiacao: var(--peso-semibold); --lh-label-premiacao: 20.8px; /* H2 seção premiação ("Maior empresa de saúde mental...") */ --fs-h2-premiacao: 36px; --fw-h2-premiacao: var(--peso-regular); --lh-h2-premiacao: 43.2px; /* Parágrafo destaque seção Premiação ("Premiada. Reconhecida...") — 18px/500 */ --fs-premiacao-destaque: 18px; --fw-premiacao-destaque: var(--peso-medio); --lh-premiacao-destaque: 23.4px; /* Parágrafo corpo seção Premiação ("Top of Mind Brazil 2025...") — 18px/400 */ --fs-premiacao-corpo: 18px; --fw-premiacao-corpo: var(--peso-regular); --lh-premiacao-corpo: 23.4px; /* H2 "O que você vai vivenciar..." (fundo escuro) / H2 "Como funciona" */ --fs-h2-escuro: 36px; --fw-h2-escuro: var(--peso-regular); --lh-h2-escuro: 43.2px; /* Corpo lista de benefícios */ --fs-lista-corpo: 16px; --fw-lista-corpo: var(--peso-regular); --lh-lista-corpo: 20.8px; /* Nome "Andréa Vermont" (heading bio) */ --fs-bio-nome: 36px; --fw-bio-nome: var(--peso-semibold); --lh-bio-nome: 43.2px; /* Corpo bio */ --fs-bio-corpo: 16px; --fw-bio-corpo: var(--peso-regular); --lh-bio-corpo: 20.8px; /* Citação em destaque (quote box dourado) */ --fs-quote: 16px; --fw-quote: var(--peso-medio); --lh-quote: 20.8px; /* "a sua jornada" (destaque no H2 da seção cronograma) */ --fs-h2-jornada-destaque: 36px; --fw-h2-jornada-destaque: var(--peso-medio); --lh-h2-jornada-destaque: 43.2px; /* "SÁBADO • 29/08" (heading do card de dia) */ --fs-card-dia-header: 22px; --fw-card-dia-header: var(--peso-medio); --lh-card-dia-header: 28.6px; /* Item de horário ("Manhã: Reprogramando...") */ --fs-item-horario-titulo: 20px; --fw-item-horario-titulo: var(--peso-medio); --lh-item-horario-titulo: 26px; /* Corpo do item de horário */ --fs-item-horario-corpo: 16px; --fw-item-horario-corpo: var(--peso-regular); --lh-item-horario-corpo: 20.8px; /* H2 "...garante ao entrar ainda hoje" (fundo branco) */ --fs-h2-garantia: 36px; --fw-h2-garantia: var(--peso-medio); --lh-h2-garantia: 43.2px; /* Preço atual "R$" (símbolo, card de preço) */ --fs-preco-simbolo: 24px; --fw-preco-simbolo: var(--peso-semibold); --lh-preco-simbolo: 28.8px; /* Preço atual "37" (número grande) */ --fs-preco-numero: 58px; --fw-preco-numero: var(--peso-semibold); --lh-preco-numero: 58px; --ls-preco-numero: -1.74px; /* Letter-spacing de labels/eyebrows em caps (rótulo pequeno de destaque) — unificado: badge do hero, tag de professor, badge de processo, label "PREMIAÇÃO" e label de etapa do cronograma usavam 5 valores diferentes (0.02/0.03/0.03/0.04/0.08em) para o mesmo papel visual, sem justificativa. */ --ls-label: 0.04em; /* Preço riscado "R$/97" (lotes futuros) */ --fs-preco-riscado-simbolo: 16px; --fs-preco-riscado-numero: 34px; --fw-preco-riscado: var(--peso-semibold); /* H1 "Perguntas frequentes" (fundo escuro) */ --fs-h1-faq: 48px; --fw-h1-faq: var(--peso-regular); --lh-h1-faq: 57.6px; /* Título de card dentro da seção "Uma oportunidade que só existe aqui" (ex.: "Formação em psicanálise contemporânea", "O que você vai aprender") — ver recon-visual-tokens.md, seção (b) item 11: "24px/500 branco" */ --fs-card-titulo-formacao: 24px; --fw-card-titulo-formacao: var(--peso-medio); --lh-card-titulo-formacao: 31.2px; /* estimado, confirmar em QA */ /* Número grande dos mini-stats ("12 Módulos", "+360h De conteúdo") — ver recon-visual-tokens.md, seção (b) item 11: "números 36px/500 branco" */ --fs-stat-numero: 36px; --fw-stat-numero: var(--peso-medio); --lh-stat-numero: 43.2px; /* estimado, confirmar em QA */ /* Badge/pill outline genérico (ex.: "Acesso Antecipado Exclusivo", "Conheça a especialista") — tamanho exato não extraído no recon, estimado por proporção visual com outros labels pequenos */ --fs-badge-outline: 14px; /* estimado, confirmar em QA */ --fw-badge-outline: var(--peso-medio); --lh-badge-outline: 20px; /* estimado, confirmar em QA */ /* Rodapé — "Termos de uso" / copyright */ --fs-footer: 12px; --fw-footer: var(--peso-medio); --lh-footer: 24px; /* Rodapé — logo vertical central (rebuild 3 colunas, padrão Altis Lisboa, 2026-08-11): logo trocou de horizontal (22px altura) para assets/logo/logo-vertical-claro.svg, um pouco maior para não sumir centralizado sozinho na coluna do meio. Token aditivo — não reaproveita nenhum tamanho de logo já usado em outra seção (header usa outro arquivo/ token implícito). [AJUSTE 2026-08-11, pedido do cliente] logo aumentada bem mais (de 48px para 144px) para que "O NOVO SISTEMA" fique legível no rodapé, não só um ícone decorativo pequeno. */ --footer-logo-vertical-altura: 144px; /* ============================================================ * 3. ESPAÇAMENTO / LAYOUT * ============================================================ */ /* Container: largura efetiva de conteúdo extraída = 1297px, dentro de um wrapper com max-width 1440px (cap para telas maiores) e padding 80px 64px sobre viewport de referência 1425px útil (1440px nominal). Ver base.css para a implementação responsiva com clamp(). */ --container-max-width: 1440px; --container-largura-conteudo: 1297px; /* 80px → 96px (2026-08-10, pedido do cliente "respiro entre seções"): a página empilha até 5 seções escuras seguidas (vivência → especialista → cronograma → como-funciona → garantias) com tons quase idênticos (--cor-fundo-escuro-base / --cor-fundo-preto-puro); 80px não dava pausa visual suficiente entre blocos de conteúdo denso. Ver .section em base.css para o novo clamp() (piso mobile também subiu de 40px para 56px) e o divisor dourado (.section::before). */ --space-secao-vertical: 96px; /* padding vertical padrão de seção */ --space-secao-horizontal: 64px; /* padding horizontal padrão de seção */ /* Altura da barra fixa (logo + badge) no topo da página — o ticker/marquee que existia acima dela foi removido (2026-08-10), então o header agora é só esta barra. Usado como offset de `top` para elementos com position: sticky que rolam por baixo do header (ex.: coluna esquerda da seção "O que você vai vivenciar") e como scroll-margin-top de âncoras (ver base.css). Valor = altura desktop de .header-bar__inner (01-header.css); em breakpoints menores a barra encolhe (64/56px), então este valor fica levemente folgado ali — nunca insuficiente. */ --header-fixo-altura-total: 72px; /* Cards de feature (ex. "Padrões que se repetem") */ --card-feature-width: 424px; /* em grid de 3 colunas */ --card-feature-padding: 24px; --card-feature-radius: 16px; --card-feature-gap-interno: 24px; /* entre ícone e texto */ --card-feature-gap-coluna: 12px; /* gap entre cards na mesma linha */ --card-feature-gap-linha: 12px; /* gap entre linhas de cards */ --card-feature-bg: var(--cor-fundo-escuro-base); /* Botão CTA pílula */ --botao-radius-sm: 24px; /* variante pequena, height 43px → pílula total */ --botao-radius-outline: 118px; /* estimado, confirmar em QA */ /* variante secundária/outline, mesma altura */ --botao-height-sm: 43px; --botao-padding: 12px 16px 12px 24px; --botao-height-lg: 54px; /* variante grande, seção de preço */ --botao-width-lg: 529px; /* Badge fixo flutuante (widget de conversão, canto inferior direito) */ --widget-width: 547px; --widget-height: 75px; --widget-radius: 28px; --widget-bg: var(--cor-badge-fundo); /* Seção "Premiação" (card cinza-claro sobre fundo branco) */ --premiacao-card-padding: 48px 64px; --premiacao-card-radius: 24px; /* estimado, confirmar em QA */ /* Card da seção "Uma oportunidade que só existe aqui" */ --oportunidade-card-radius: 24px; /* card branco/fundo da seção */ --oportunidade-foto-radius: 16px; /* card interno escuro com foto */ --oportunidade-card-padding: 40px; /* estimado, confirmar em QA — padding interno dos 3 cards escuros de bloco */ --oportunidade-card-gap: 48px; /* estimado, confirmar em QA — gap entre coluna de mídia e coluna de texto */ /* Accordion FAQ */ --faq-card-radius: 24px; /* estimado, confirmar em QA — recon aponta "~16-24px" */ --faq-item-padding-vertical: 28px; /* estimado, confirmar em QA */ /* Radius genéricos de fotos (ver docs/recon-visual-tokens.md item (c) Inventário de Assets) */ --foto-radius-sm: 12px; --foto-radius-md: 16px; --foto-radius-lg: 18px; --foto-radius-nenhum: 0px; /* ============================================================ * 4. BREAKPOINTS (referência — ver convenção completa em base.css) * ============================================================ */ --bp-desktop: 1440px; --bp-desktop-comprimido: 1024px; --bp-tablet: 768px; --bp-mobile-grande: 430px; --bp-mobile-pequeno: 375px; }