/* ----------------------------------------------------------------------------- Bianca Ramiro — camada de marca do site. Este arquivo e a fonte atual dos estilos do site. O pacote em `handoff/` preserva a entrega historica de design; reconcatena-lo apagaria os ajustes posteriores de acessibilidade, formularios e layout. Ver `handoff/README.md`. A fonte declara o @font-face, os primitivos definem a rampa, a camada semantica escolhe as cores e os componentes consomem esses tokens. Regras do mesmo seletor ficam juntas dentro de cada contexto de media. A cascata que serve este arquivo esta em templates/base.html e continua: app.css -> movimento.css -> /brand.css -> {% block brand_css %} `/brand.css` vem do painel do Django e vence pela cascata: e por isso que `--marca` le `var(--brand-primary, ...)` e nao um valor fixo. ----------------------------------------------------------------------------- */ /* Archivo Variable — auto-hospedada, subconjunto latin. ============================================================================= Um arquivo de ~90 KB, dois eixos: `wght` 100–900 e `wdth` 62–125%. É por isso que a família é uma só — o display não precisa de outro arquivo, precisa de outra LARGURA. Nada sai do domínio: sem CDN, sem Google Fonts. `font-display: swap` de propósito, para o texto aparecer imediatamente na fonte do sistema e trocar quando o arquivo chegar. Nenhuma tela depende de a fonte ter carregado. Licença OFL ao lado, em OFL-Archivo.txt. ========================================================================== */ @font-face { font-family: "Archivo Variable"; src: url("../fonts/archivo-variable-latin.de2f1fe81758.woff2") format("woff2-variations"), url("../fonts/archivo-variable-latin.de2f1fe81758.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } /* Bianca Ramiro — CAMADA 1: PRIMITIVOS ============================================================================= A rampa. Nenhum componente consome esta camada diretamente: ela existe para que a camada semântica tenha de onde escolher. Duas famílias de neutro, e a divisão é o coração do sistema: CARVÃO neutros FRIOS → a sombra, as superfícies AREIA neutros QUENTES → a luz, o texto Isso não é capricho. As duas cores que a Bianca entregou como escuros (#0B0B0D e #1F1F23) são frias — puxam para o azul. O claro que ela entregou (#F4EFE6) é quente — puxa para o bege. É exatamente a montagem fotográfica das imagens dela: ambiente escuro e frio, luz de tungstênio quente. Manter as duas temperaturas separadas é o que faz o site parecer as fotos. ========================================================================== */ :root { /* ---- Carvão — neutros frios, as superfícies ---------------------------- */ --carvao-950: #0b0b0d; /* dado pela marca — o fundo */ --carvao-900: #131318; --carvao-800: #1f1f23; /* dado pela marca — cartão e superfície elevada */ --carvao-700: #2b2b31; --carvao-600: #3a3a42; --carvao-500: #55555f; /* ---- Areia — neutros quentes, a luz e o texto -------------------------- */ --areia-50: #fbf9f5; --areia-100: #f4efe6; /* dado pela marca — texto sobre escuro, seção clara */ --areia-200: #e7e0d2; --areia-300: #d2c9b7; --areia-400: #b0a693; --areia-500: #877e6d; /* ---- Terracota — a cor da marca ---------------------------------------- O 500 é o hexadecimal que ela mandou. Ela foi específica: usa o laranja "um pouco mais escuro, tipo um terracota" — então esta é a cor de marca, e a família Luz abaixo é o acento, não o contrário. */ --terracota-50: #fdf1ed; --terracota-100: #faddd4; --terracota-200: #f5baa9; --terracota-300: #ee8e76; --terracota-400: #e96c50; --terracota-500: #e35336; /* dado pela marca */ --terracota-600: #c43f24; --terracota-700: #9e301a; /* o único terracota que carrega texto em claro */ --terracota-800: #7a2515; --terracota-900: #591c11; /* ---- Luz — laranja e âmbar, a família do tungstênio -------------------- Os dois valores da marca (#ff6a00 e #ffb000) são vizinhos na mesma rampa, então são uma família só e não duas cores soltas. É a luz das fotos: usada em fio, brilho, sobrancelha e o facho. Nunca em área grande. */ --luz-100: #ffefc7; --luz-200: #ffdd8f; --luz-300: #ffc94d; --luz-400: #ffb000; /* dado pela marca — âmbar */ --luz-500: #ff9500; --luz-600: #ff6a00; /* dado pela marca — laranja */ --luz-700: #d14e00; --luz-800: #a03c00; /* ---- Funcionais -------------------------------------------------------- Calibrados para superfície ESCURA, que é o padrão deste sistema. O problema que estes tokens resolvem: a marca é laranja e âmbar, que é exatamente a cor universal de "atenção". Se o aviso fosse âmbar, ninguém distinguiria alerta de marca. Por isso "atenção" saiu para o verde-limão ácido (#d6e04a): outra família de matiz, alta luminância no escuro, e impossível de confundir com o âmbar da marca. O erro é o caso delicado: #f2555a e o terracota #e35336 são vizinhos. A regra que decorre disso está na camada semântica — erro nunca aparece como preenchimento colorido sozinho, sempre com ícone e texto. */ --sucesso-400: #2fbf71; --sucesso-fundo: #0f2a1d; --sucesso-borda: #1f5c3e; --sucesso-700: #14663f; /* texto de sucesso em superfície clara */ --info-400: #58a6ff; --info-fundo: #0d1f33; --info-borda: #1e4a78; --info-700: #1155a8; --atencao-400: #d6e04a; --atencao-fundo: #22260c; --atencao-borda: #4c5411; --atencao-700: #5c6410; --erro-400: #f2555a; --erro-fundo: #2b0f12; --erro-borda: #6b1d22; --erro-700: #b3242a; /* ---- Tipografia ------------------------------------------------------- Uma família: Archivo Variable, dois eixos no mesmo arquivo de 90 KB. Já está auto-hospedada no projeto — nenhuma requisição sai do domínio. O eixo de LARGURA é a identidade tipográfica. Este sistema o usa mais agressivamente que o anterior: display a 125% e peso 900, sobrancelha a 86%. A tensão entre os dois extremos é o que dá o caráter industrial. */ --fonte: "Archivo Variable", system-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --largura-display: 125%; --largura-titulo: 112%; --largura-sobrancelha: 86%; --peso-regular: 400; --peso-medio: 500; --peso-semi: 600; --peso-forte: 700; --peso-display: 900; --fs-48: 3rem; --fs-36: 2.25rem; --fs-30: 1.875rem; --fs-24: 1.5rem; --fs-20: 1.25rem; --fs-18: 1.125rem; --fs-16: 1rem; --fs-15: .9375rem; --fs-14: .875rem; --fs-12: .75rem; --lh-16: 1rem; --lh-20: 1.25rem; --lh-24: 1.5rem; --lh-28: 1.75rem; --lh-32: 2rem; --lh-40: 2.5rem; /* ---- Espaçamento — base 4, escala ordinal ----------------------------- Escala fechada. Não existem os degraus 7, 9, 11, 13–15, 17–19 e 21–23: não inventar. Degrau sem consumidor hoje continua declarado, porque tirá-lo abriria um buraco e o próximo a precisar do valor inventaria um número solto. */ --espaco-1: .25rem; --espaco-2: .5rem; --espaco-3: .75rem; --espaco-4: 1rem; --espaco-5: 1.25rem; --espaco-6: 1.5rem; --espaco-8: 2rem; --espaco-10: 2.5rem; --espaco-12: 3rem; --espaco-16: 4rem; --espaco-20: 5rem; --espaco-24: 6rem; --espaco-32: 8rem; /* ---- Raio ------------------------------------------------------------- Deliberadamente APERTADO. A tipografia é pesada e larga; raio generoso amoleceria o conjunto. Botão é 4px, não pílula — é a diferença mais visível entre esta marca e qualquer template de academia. */ --raio-sm: 2px; --raio-md: 4px; --raio-lg: 8px; --raio-xl: 14px; --raio-pill: 999px; /* só etiqueta e chip */ --raio: var(--raio-md); /* ---- Elevação --------------------------------------------------------- Um sistema escuro não se separa por sombra: sombra sobre preto não aparece. Separa-se por LUMINÂNCIA e por fio de contorno. Por isso existem --brilho-* (halo quente de luz) e as sombras ficam reservadas para a seção clara, onde funcionam. */ --fio: 1px solid rgba(244, 239, 230, .10); --fio-forte: 1px solid rgba(244, 239, 230, .20); /* Sai de --marca, e nao de um rgba() de terracota escrito a mao: assim o halo acompanha a cor que vem do PAINEL, como o resto do sistema ja faz. Mesmo motivo do fio das atividades mais abaixo - `color-mix` e nao `rgba` para o valor continuar saindo do token. As porcentagens sao as alfas antigas. Isto NAO resolve escopo: o valor computa aqui, no `:root`, e desce ja substituido. Quem redefinir --marca dentro de um escopo precisa redeclarar o halo junto - foi o que `.in-move .botao--principal` fazia, ate a decisao 28. Nao ha escopo assim na folha hoje; a armadilha continua real para o proximo que criar um. */ --brilho-marca: 0 0 0 1px color-mix(in srgb, var(--marca) 38%, transparent), 0 8px 40px -12px color-mix(in srgb, var(--marca) 45%, transparent); --brilho-luz: 0 0 24px -4px rgba(255, 176, 0, .55); --sombra-sm: 0 1px 2px rgba(11, 11, 13, .10); --sombra-md: 0 10px 30px -8px rgba(11, 11, 13, .18); --sombra-lg: 0 24px 60px -12px rgba(11, 11, 13, .28); /* ---- Movimento -------------------------------------------------------- Mais rápido e mais mecânico que o sistema anterior. Nada quica. */ --mov-rapido: 100ms; --mov-base: 160ms; --mov-entrada: 500ms; --ease-padrao: cubic-bezier(.2, 0, 0, 1); --ease-saida: cubic-bezier(.16, 1, .3, 1); /* ---- Layout ------------------------------------------------------------ */ --largura-max: 64rem; --largura-larga: 76rem; --largura-prosa: 40rem; --altura-controle: 3rem; /* 48px */ --alvo-toque: 2.75rem; /* 44px, mínimo do SC 2.5.8 */ /* Ângulo do facho — o elemento-assinatura. Ver a camada de componentes. */ --facho-angulo: 22deg; /* Bianca Ramiro — CAMADAS 2 e 3: CONFIGURÁVEIS e SEMÂNTICOS ============================================================================= Camada 2 são as três variáveis que podem ser trocadas em tempo de execução. Camada 3 é o vocabulário que os componentes consomem: cada token diz um PAPEL, nunca uma cor. Regra: componente consome a camada 3. Hexadecimal literal em regra de componente é erro, e usar um primitivo (--terracota-500) onde existe um semântico (--marca) também é. ========================================================================== */ /* ---- 2. CONFIGURÁVEIS ------------------------------------------------- Estas três são a ponte com o painel do Django. `website/models.py` escreve `--brand-primary`, `--brand-secondary` e `--brand-accent` em /brand.css a partir das cores que a Bianca escolhe no admin — e /brand.css é servido DEPOIS desta folha, então vence pela cascata. O `var(--brand-*, fallback)` é o que faz as duas coisas funcionarem ao mesmo tempo: sem painel configurado, valem os padrões da marca; com painel, vale o painel. Trocar isto por um valor fixo desliga o controle do admin em silêncio. ATENÇÃO ao trocar pelo painel: --marca precisa carregar TEXTO PRETO com 4,5:1. O terracota faz 5,21:1. Uma cor de marca mais clara quebra isso sem avisar — ver a nota de validação no README. */ --marca: var(--brand-primary, var(--terracota-500)); /* a cor da marca */ --marca-luz: var(--brand-secondary, var(--luz-400)); /* o âmbar: fio, brilho, sobrancelha */ --marca-luz-quente: var(--brand-accent, var(--luz-600)); /* o laranja: o facho e degradês */ /* ---- 3. SEMÂNTICOS — superfícies -------------------------------------- ESTE SISTEMA É ESCURO POR PADRÃO. É a inversão em relação a qualquer template de personal trainer, e vem das fotos: elas são escuras, com luz quente pontual. Um site claro brigaria com todas elas. --cor-superficie-clara existe para UMA coisa: a seção de leitura longa (serviços, valores, regras), onde texto claro sobre escuro cansa. Uma ou duas por página, nunca a página inteira. */ --cor-fundo: var(--carvao-950); --cor-superficie: var(--carvao-800); --cor-superficie-alta: var(--carvao-700); --cor-superficie-clara: var(--areia-100); /* ---- Texto ------------------------------------------------------------- Contrastes medidos com a fórmula da WCAG 2.2, sobre --cor-fundo. */ --cor-texto: var(--areia-100); /* 17,20:1 */ --cor-texto-suave: var(--areia-400); /* 8,17:1 */ --cor-texto-luz: var(--marca-luz); /* 10,74:1 — âmbar em escuro */ /* O acento quente: o laranja entre o terracota da marca e o ambar. ========================================================================= Este valor ja estava no sistema em DOIS lugares com nomes locais - como `--rodape-contato-acento` aqui, da referencia aprovada em 15/09, e como `--servicos-acento` em `servicos.css`, que desenha o cartao de servico. Eram a mesma cor duas vezes, cada uma se chamando pelo lugar onde mora. Ganhou nome de PAPEL em 21/09/2026, quando o acordeao de perguntas virou o terceiro a precisar dele. `--rodape-contato-acento` passou a apontar para aqui em vez de repetir o literal; o de `servicos.css` continua separado por enquanto, e essa duplicacao e divida conhecida. Por que um literal e nao uma mistura de `--marca` com `--marca-luz`: a cor e uma escolha aprovada, nao uma derivacao. A mistura mais proxima da #f58f13, que e outra cor. Um literal na CAMADA DE TOKEN e o conteudo do arquivo; o que a regra de arquitetura proibe e literal em regra de componente. Contrastes sobre as superficies onde ele e usado hoje: poco do sinal (--cor-fundo) 9,07:1 cartao fechado do acordeao 6,98:1 cartao aberto do acordeao 5,87:1 */ --cor-acento-quente: #ff963f; --cor-titulo-trajetoria: var(--terracota-500); /* tom dos pontos na paleta Bianca */ /* Sobre a seção clara, tudo inverte. */ --cor-texto-em-claro: var(--carvao-950); /* 17,20:1 */ --cor-texto-suave-em-claro: var(--carvao-600); /* 9,85:1 */ --cor-texto-marca-em-claro: var(--terracota-700); /* 6,35:1 */ /* Texto SOBRE as cores de marca. Os três valores que mais quebram sistema. */ --cor-sobre-marca: var(--carvao-950); /* preto no terracota: 5,21:1 */ --cor-sobre-luz: var(--carvao-950); /* preto no âmbar: 10,74:1 */ --cor-sobre-luz-quente: var(--carvao-950); /* preto no laranja: 6,85:1 */ /* Os dois estados do botao primario. Derivam de --marca com `color-mix`, e nao de um degrau da rampa, pelo mesmo motivo ja escrito para --cor-texto-marca: um degrau fixo desliga a ponte com o painel. Com a mistura, trocar a cor no admin move os tres estados juntos. O que a mistura NAO faz, e a armadilha que custou a primeira versao desta correcao: ela nao acompanha ESCOPO. Uma propriedade customizada herda o valor ja substituido, entao `var(--marca)` vira terracota aqui, no `:root`, e desce assim para todo mundo. Um escopo que redefinisse --marca nao mudaria nada disto - por isso um botao que troca o proprio fundo dentro de um escopo precisa redeclarar os proprios estados. Foi o caso do botao do In Move ate a decisao 28. O limite do pressionado e o contraste. Sob o texto preto de --cor-sobre-marca o --terracota-600 que estava aqui fazia 3,82:1 e reprovava o AA; 94% da 4,71:1. O hover clareia, entao ele so melhora: 86% da 6,05:1. Os parceiros da mistura sao TOKENS, e nao #fff/#000: hexadecimal literal em regra de componente e erro registrado, e ha teste que o pega. Misturar com --carvao-950 em vez de preto puro ainda devolve um pouco de contraste. Consequencia para o painel, que a nota do README nao cobre: parada, a cor precisa de 4,5:1; pressionada, a mistura tira cerca de 12% da luminancia. Uma cor escolhida no admin precisa de ~5,0:1 em repouso para o pressionado ainda fazer 4,5:1. */ --marca-hover: color-mix(in srgb, var(--marca) 86%, var(--areia-100)); --marca-ativa: color-mix(in srgb, var(--marca) 94%, var(--carvao-950)); /* ---- Bordas ------------------------------------------------------------ A distinção é a mesma de qualquer sistema honesto, e continua sendo o erro mais comum: borda DECORATIVA e borda de CONTROLE não são a mesma coisa. --cor-borda faz 1,46:1 sobre o cartão. Serve para dividir, nunca para delimitar um campo. --cor-borda-forte faz 4,10:1 e é a única que pode contornar controle de formulário. */ --cor-borda: var(--carvao-600); --cor-borda-forte: var(--areia-500); --cor-borda-em-claro: var(--areia-200); --cor-borda-forte-em-claro: var(--areia-500); /* ---- Foco -------------------------------------------------------------- Âmbar no escuro (10,74:1) e tinta no claro (17,20:1). O terracota NÃO é anel de foco: sobre a seção clara ele faz 3,30:1, raspando o mínimo de 3:1 do SC 1.4.11 sem margem nenhuma. */ --cor-foco: var(--marca-luz); --cor-foco-em-claro: var(--carvao-950); /* ---- Estado ------------------------------------------------------------ Cor nunca é o único indicador: todo estado carrega ícone E texto. No caso do erro isso é obrigatório e não recomendado — o vermelho de erro e o terracota da marca são vizinhos de matiz, então um preenchimento vermelho sem rótulo é indistinguível de um destaque de marca. */ --cor-sucesso: var(--sucesso-400); --cor-sucesso-fundo: var(--sucesso-fundo); --cor-sucesso-borda: var(--sucesso-borda); --cor-info: var(--info-400); --cor-info-fundo: var(--info-fundo); --cor-info-borda: var(--info-borda); --cor-atencao: var(--atencao-400); --cor-atencao-fundo: var(--atencao-fundo); --cor-atencao-borda: var(--atencao-borda); --cor-erro: var(--erro-400); --cor-erro-fundo: var(--erro-fundo); --cor-erro-borda: var(--erro-borda); /* A sub-marca In Move tinha cinco tokens aqui - roxo, lima, roxo profundo, branco e tinta -, e eles saíram na decisão 28. O programa deixou de ter identidade visual própria no site; a separação dele passou a ser textual. A paleta continua entregue e versionada em `identidade/in-move-brand-system/tokens.css`, que é de onde ela voltaria se a decisão for revista. */ /* ---- 1. Link de marca reprovava o contraste dentro de cartao --------------- A tabela do pacote mede o terracota contra o FUNDO (#0b0b0d) e da 5,20:1. Ela nunca mede contra o CARTAO - e cartao e onde quase todo link do site vive. terracota #e35336 sobre o fundo #0b0b0d 5,20:1 passa terracota #e35336 sobre o cartao #1f1f23 4,35:1 REPROVA (piso 4,5) terracota #e35336 sobre o hover #2b2b31 3,72:1 REPROVA Reprovava em quatro paginas: "Continuar lendo" na home e em /resultados/, e "Ler o aviso" em /contato/ e /agendar/. A correcao clareia o TOM DO TEXTO, e nao a cor da marca: o preenchimento de botao e etiqueta continua no terracota cheio. Isso e o que a maioria dos sistemas faz - texto de marca e um degrau mais claro que o preenchimento, justamente por causa do contraste. mistura 80/20 -> #e67259 cartao 5,41 hover 4,63 fundo 6,48 `color-mix` sobre `var(--marca)`, e nao um degrau fixo da rampa, por dois motivos. O primeiro: `--terracota-400` passaria no hover por 0,01 - margem nenhuma. O segundo, e o que decide: a mistura opera sobre a cor que VEIO DO PAINEL, entao o controle de cor do admin continua valendo. Um degrau fixo desligaria a ponte para todo link do site. Referencia `--marca`, e nao `--cor-texto-marca`: um token nao pode se definir em termos de si mesmo, e a referencia ciclica invalidaria a declaracao inteira em silencio. `.faixa-clara` nao e afetada: ela ja redefine `--cor-texto-marca` para `--terracota-700`, e a definicao mais proxima do elemento vence. */ --cor-texto-marca: color-mix(in srgb, var(--marca) 80%, var(--areia-100)); /* ---- Acordeao de perguntas --------------------------------------------- O acordeao era um retangulo chapado em `--cor-superficie`: a mesma cor do cartao, sem estado, sem fio de acento e sem transicao de abertura. Os tokens abaixo dao a ele a familia visual dos cartoes de servico - superficie morna, fio que acende, halo - sem copiar os hexadecimais locais de `servicos.css`, que sao valores fixos e NAO atravessam a ponte com o painel. Tudo sai de `color-mix` sobre `--cor-superficie` e `--marca`, e nao de um degrau da rampa, pelo mesmo motivo ja escrito para `--cor-texto-marca`: a mistura opera sobre a cor que VEIO DO PAINEL, entao trocar a cor no admin move o acordeao junto. Um degrau fixo desligaria a ponte em silencio. Contraste medido sobre a superficie REAL, nao sobre o fundo da pagina - #2f2325 fechado, #3d2f32 aberto: pergunta (--cor-texto) 13,21:1 fechada 11,11:1 aberta resposta (--cor-texto-suave) 6,28:1 5,28:1 sinal (--cor-texto-luz) 8,26:1 6,94:1 `--faq-halo` existe em vez de `--brilho-marca` porque aquele e o halo do BOTAO primario: 1px de anel a 38% mais 40px de brilho a 45%. Num acordeao de oito itens isso vira oito lampadas. Este e a mesma forma, com metade da forca. */ --faq-fundo: color-mix(in srgb, var(--cor-superficie) 92%, var(--marca)); --faq-fundo-aberto: color-mix(in srgb, var(--cor-superficie-alta) 90%, var(--marca)); --faq-borda: color-mix(in srgb, var(--cor-texto) 10%, transparent); --faq-borda-viva: color-mix(in srgb, var(--cor-acento-quente) 48%, transparent); /* Chapado, e nao o degrade terracota -> ambar que o facho usa. Com o sinal em `--cor-acento-quente`, que fica ENTRE os dois, o degrade colocava tres laranjas diferentes num componente de 2px de largura. Um acento so. */ --faq-trilho: var(--cor-acento-quente); /* O sinal era ambar; virou terracota em 21/09/2026, a pedido de Lucas. A troca de cor arrastou o POCO junto, e nao por gosto - por medicao. O poco antigo era 16% de terracota POR CIMA do cartao, o que o deixava mais claro que ele: #4c2b28 fechado, #583533 aberto. Uma barra terracota ali faz 3,30:1 e 2,82:1 - a segunda reprova ate o piso de 3:1 que a 1.4.11 pede para elemento grafico, quanto mais os 4,5:1 desta casa. Nao era o terracota que estava errado: era o fundo, que subia junto com ele. Clarear a barra ate passar custaria a cor (62% de marca ja vira salmao e ainda faz 4,37:1 no aberto). Escurecer o poco resolve sem negociar tom, e o poco escuro ficou mesmo depois de o acento mudar: sobre `--cor-fundo` opaco o valor nao depende mais do estado do cartao, porque o poco deixou de compor com ele. O terracota puro durou algumas horas: Lucas nao gostou, e a medicao dava razao a ele por um motivo que a cor sozinha nao mostra - o cartao do acordeao JA e terracota diluido, entao o sinal tinha pouca separacao do proprio fundo. O acento ficou `--cor-acento-quente`, que e o mesmo laranja dos cartoes de servico e dos contatos do rodape: 9,07:1 no poco, 6,98:1 no cartao fechado, 5,87:1 no aberto. A borda passa a carregar a forma do disco, ja que o contraste entre poco e cartao e de 1,30:1 fechado e 1,55:1 aberto - de proposito: o disco e embalagem, quem diz o estado sao as barras. */ --faq-sinal-fundo: var(--cor-fundo); --faq-sinal-borda: color-mix(in srgb, var(--cor-acento-quente) 40%, transparent); --faq-sinal-borda-viva: var(--cor-acento-quente); --faq-halo: 0 14px 34px -22px color-mix(in srgb, var(--marca) 50%, transparent); } /* Bianca Ramiro — CAMADA DE COMPONENTES ============================================================================= Os nomes de classe abaixo são OS MESMOS que os templates Django já usam (`.botao--principal`, `.cartao__preco`, `.etiqueta--confirmada`, `.campo__erro`, `.aviso--sucesso`, `.topo`, `.rodape`, `.fatos`, `.dados`, `.faq`, `.depoimento`, `.opcoes`). Isto é intencional e é o ponto do arquivo: trocar a marca não deve exigir reescrever `templates/`. Três exceções, todas deliberadas: `.faixa-escura` → `.faixa-clara` a página agora é escura por padrão, então o que se destaca é a faixa CLARA `.pista` → `.facho` a assinatura mudou de marca `.marca` novo o logotipo/monograma, que não existia Nada aqui usa hexadecimal literal: todo valor sai da camada semântica. ========================================================================== */ /* ============================================================================= 1. MARCA — monograma e logotipo ============================================================================= */ /* A logo é um monograma BR inscrito num triângulo, em linha fina — desenho dela, não tipografia. Isso cria a tensão que dá caráter ao conjunto: marca delicada e geométrica contra tipografia pesada e larga. A logo é a assinatura; o tipo é a voz. Por ser linha fina, ela tem duas exigências que uma logo sólida não tem: tamanho mínimo maior (abaixo de 40px o traço fecha) e nunca sobre foto sem uma chapada atrás. */ .marca { display: inline-flex; align-items: center; gap: var(--espaco-4); color: inherit; text-decoration: none; } .marca__simbolo { display: block; flex: none; width: 2.75rem; height: 2.75rem; object-fit: contain; } .marca__texto { display: grid; gap: 1px; line-height: 1; } .marca__nome { font-size: var(--fs-16); font-stretch: var(--largura-titulo); font-weight: var(--peso-forte); letter-spacing: -.01em; } .marca__descritor { font-size: var(--fs-12); font-stretch: var(--largura-sobrancelha); font-weight: var(--peso-semi); letter-spacing: .16em; text-transform: uppercase; color: var(--cor-texto-suave); } /* Só o símbolo: favicon, avatar, selo. O nome continua no HTML, para leitor de tela — esconder visualmente não é remover. */ .marca--so-simbolo .marca__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .marca--grande .marca__simbolo { width: 5.5rem; height: 5.5rem; } /* Sobre foto: chapada de carvão atrás, nunca a linha direto na imagem. */ .marca--sobre-foto { padding: var(--espaco-3) var(--espaco-4); border-radius: var(--raio-md); background: rgba(11, 11, 13, .72); backdrop-filter: blur(8px); } /* ============================================================================= 2. O FACHO — elemento-assinatura ============================================================================= Duas ou três barras diagonais de luz cruzando a composição em 22°. Não é enfeite: é o que as fotos dela têm. Nas imagens do ensaio há tubos de LED diagonais atrás dela, e é essa diagonal que dá a todas as fotos o mesmo ar. Trazer a mesma diagonal para o layout faz o site e as fotos parecerem a mesma peça — e é o que substitui a pista do sistema anterior. `aria-hidden` e sem texto dentro: composição, não conteúdo. ========================================================================== */ .facho { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .facho__barra { position: absolute; top: -30%; height: 160%; width: clamp(2px, .35vw, 5px); background: linear-gradient( to bottom, transparent, var(--marca-luz) 22%, var(--marca-luz-quente) 55%, transparent ); transform: rotate(var(--facho-angulo)); opacity: .85; } .facho__barra:nth-child(1) { left: 62%; } .facho__barra:nth-child(2) { left: 71%; width: clamp(1px, .18vw, 3px); opacity: .5; } .facho__barra:nth-child(3) { left: 84%; } /* O halo: mancha terracota que sangra por um canto. Sempre atrás do texto. */ .facho__halo { position: absolute; right: -12%; bottom: -34%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--marca); opacity: .20; filter: blur(60px); } /* Um único facho animado por página, e só no herói. O deslocamento é lateral e lento: a luz "passa", não pisca. */ .facho--vivo .facho__barra { animation: facho-desliza var(--mov-ambiente, 26s) linear infinite alternate; } .facho--vivo .facho__barra:nth-child(2) { animation-duration: 34s; } .facho--vivo .facho__barra:nth-child(3) { animation-duration: 30s; } @keyframes facho-desliza { to { transform: rotate(var(--facho-angulo)) translateX(3.5rem); } } /* Discreto: cabeçalho de página interna. Nasce parado — repetido em treze páginas o movimento deixaria de ser assinatura e viraria fundo animado. */ .facho--discreto .facho__barra { opacity: .38; } .facho--discreto .facho__halo { opacity: .12; } /* A variante compacta leva a assinatura para o fluxo, fora do retrato e da leitura. Mantem os tres fachos, as cores e o movimento lento do sistema. */ .facho--compacto { position: relative; inset: auto; width: var(--espaco-32); height: var(--espaco-12); margin-top: var(--espaco-8); } .facho--compacto .facho__barra { top: -20%; height: 140%; } .facho--compacto .facho__barra:nth-child(1) { left: 12%; } .facho--compacto .facho__barra:nth-child(2) { left: 28%; } .facho--compacto .facho__barra:nth-child(3) { left: 44%; } .facho--compacto .facho__halo { display: none; } @media (prefers-reduced-motion: reduce) { .facho__barra { animation: none !important; } } /* ============================================================================= 3. SUPERFÍCIES E LAYOUT ============================================================================= */ .container { width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: 0 var(--espaco-6); } .container--larga { max-width: var(--largura-larga); } /* `.container--prosa` saiu em 24/09: /faq/, a ultima pagina que a usava, ficou larga. */ .container--leitura { max-width: var(--largura-prosa); } .container--formulario { max-width: 34rem; } .secao { padding: clamp(var(--espaco-16), 9vw, var(--espaco-32)) 0; } .secao__titulo { margin: 0 0 var(--espaco-8); /* --fs-30, e não --fs-36: a 390px o `clamp` do herói devolve o PISO de 2.25rem, que é exatamente o valor de --fs-36. Abaixo de 459px de janela o h1 e o h2 da home saíam com o MESMO CORPO — o desenho difere (o h1 tem largura-display 125% contra 112% do h2, e outra entrelinha), mas a altura de caixa era idêntica, e uma escada com dois degraus na mesma altura não é escada. A razão h1/h2 passa a ser 1,20 no celular, 1,63 a 1440px e 1,87 quando o herói bate o teto. Em event_list, contra o `.cabecalho__titulo` de 48px, vai de 1,33 para 1,60. O preço está do outro lado da escada, e é real: na home o título de seção dividia a página com `.fatos__valor` e `.cartao__preco`, que são 24px em peso-display. A folga sobre eles cai de 1,50 para 1,25 — são esses os vizinhos de display mais próximos, e não o `.cartao__titulo` de 20px. Risco estético, reversível numa linha. */ font-size: var(--fs-30); font-stretch: var(--largura-titulo); font-weight: var(--peso-display); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; } /* A faixa clara. UMA ou duas por página, para leitura longa: serviços, valores, regras de pagamento. Todo token de cor inverte dentro dela — é por isso que os semânticos `-em-claro` existem. */ .faixa-clara { --cor-texto: var(--cor-texto-em-claro); --cor-texto-suave: var(--cor-texto-suave-em-claro); --cor-texto-marca: var(--cor-texto-marca-em-claro); --cor-superficie: var(--areia-50); --cor-borda: var(--cor-borda-em-claro); --cor-borda-forte: var(--cor-borda-forte-em-claro); --cor-foco: var(--cor-foco-em-claro); background: var(--cor-superficie-clara); color: var(--cor-texto); } /* ============================================================================= 4. SOBRANCELHA ============================================================================= A segunda voz da tipografia e o contrário exato do display: estreita, espaçada, pequena, em caixa alta. Aqui ela é um FIO, não uma pílula — o fio de luz âmbar à esquerda repete a diagonal do facho em miniatura. ========================================================================== */ .sobrancelha { display: inline-flex; align-items: center; gap: var(--espaco-3); margin: 0 0 var(--espaco-5); font-size: var(--fs-12); font-stretch: var(--largura-sobrancelha); font-weight: var(--peso-forte); letter-spacing: .18em; text-transform: uppercase; color: var(--cor-texto-luz); } .sobrancelha::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; flex: none; } .faixa-clara .sobrancelha { color: var(--cor-texto-marca-em-claro); } /* ============================================================================= 5. BOTÃO ============================================================================= Raio de 4px, não pílula. Uma ação principal por seção. ========================================================================== */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2); min-height: var(--altura-controle); min-width: var(--alvo-toque); padding: 0 var(--espaco-6); border: 1px solid transparent; border-radius: var(--raio-md); font-family: var(--fonte); font-size: var(--fs-14); font-stretch: var(--largura-sobrancelha); font-weight: var(--peso-forte); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--mov-rapido) var(--ease-padrao), border-color var(--mov-rapido) var(--ease-padrao), color var(--mov-rapido) var(--ease-padrao), box-shadow var(--mov-base) var(--ease-padrao); } .botao:disabled, .botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; } .botao--principal { background: var(--marca); color: var(--cor-sobre-marca); } .botao--principal:hover:not(:disabled) { background: var(--marca-hover); box-shadow: var(--brilho-marca); } .botao--principal:active:not(:disabled) { background: var(--marca-ativa); box-shadow: none; } /* Âmbar. Reservado para o preço e para a conversão final — a cor mais luminosa do sistema, e por isso a que não pode aparecer duas vezes na mesma tela. */ .botao--acento { background: var(--marca-luz); color: var(--cor-sobre-luz); } .botao--acento:hover:not(:disabled) { background: var(--luz-300); box-shadow: var(--brilho-luz); } .botao--secundario { background: transparent; color: var(--cor-texto); border-color: var(--cor-borda-forte); } .botao--secundario:hover:not(:disabled) { border-color: var(--cor-texto); background: rgba(244, 239, 230, .06); } .botao--fantasma { background: transparent; color: var(--cor-texto-marca); padding: 0 var(--espaco-2); border-color: transparent; } .botao--fantasma:hover:not(:disabled) { color: var(--cor-texto); text-decoration: underline; text-underline-offset: 4px; } .botao--largo { width: 100%; } /* O `opacity: .45` de `:disabled` logo acima compõe TEXTO E FUNDO juntos contra a página escura, e os dois colapsam um no outro: medido, o rótulo cai de 5,20:1 para **1,55:1** (#47231e sobre #77362c). Para um controle inerte a WCAG isenta — mas este não está inerte por decisão do desenho, e sim durante o segundo seguinte ao clique, e o rótulo que ele acabou de receber é "Enviando…", escrito por `enviando.js:34`. Ou seja: o único retorno que a pessoa tem de que o envio começou é exatamente a palavra que o esmaecimento apaga. Devolver a opacidade não deixa o botão parecer clicável de novo: ele continua `disabled`, o cursor vira `progress`, e o rótulo mudou. O esmaecimento não estava comunicando nada que os outros três já não comunicassem — só custava a leitura. `:disabled` no seletor não é enfeite: `enviando.js` aplica a classe E o atributo, e `.botao:disabled` é (0,2,0) contra (0,1,0) de uma classe sozinha. Sem o pseudo aqui, esta regra perde e o esmaecimento fica. */ .botao--enviando, .botao--enviando:disabled { cursor: progress; opacity: 1; } .faixa-clara .botao--secundario { color: var(--cor-texto-em-claro); } /* ============================================================================= 6. CAMPO DE FORMULÁRIO ============================================================================= Label sempre visível; placeholder é exemplo, nunca rótulo. Borda --cor-borda-forte (4,10:1) — nunca a decorativa. Os ids de ajuda e erro são `_helptext` e `_error` porque é o que o Django 5.2 referencia no `aria-describedby` que ele mesmo emite. ========================================================================== */ .campo { display: grid; gap: var(--espaco-2); margin-bottom: var(--espaco-5); } .campo > label { font-size: var(--fs-14); font-weight: var(--peso-semi); color: var(--cor-texto); } .campo__legenda { font-size: var(--fs-14); font-weight: var(--peso-semi); padding: 0; margin-bottom: var(--espaco-2); } .campo input, .campo select, .campo textarea { width: 100%; min-height: var(--altura-controle); padding: 0 var(--espaco-4); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-md); background: var(--cor-superficie); color: var(--cor-texto); font-family: var(--fonte); font-size: var(--fs-16); /* piso: abaixo de 16px o iOS dá zoom ao focar */ transition: border-color var(--mov-rapido) var(--ease-padrao), box-shadow var(--mov-rapido) var(--ease-padrao); } .campo textarea { min-height: 7rem; padding: var(--espaco-3) var(--espaco-4); line-height: var(--lh-24); resize: vertical; } .campo input::placeholder, .campo textarea::placeholder { color: var(--areia-500); } .campo input:hover, .campo textarea:hover { border-color: var(--cor-texto-suave); } .campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--marca-luz); box-shadow: 0 0 0 3px rgba(255, 176, 0, .22); } .campo input:disabled { opacity: .5; cursor: not-allowed; } /* Campo autopreenchido pelo navegador. ------------------------------------------------------------------------ O navegador pinta o campo com fundo próprio — amarelo claro no Chrome, azul claro no Firefox — para dizer "isto veio do seu gerenciador". Num formulário escuro isso entrega texto areia sobre fundo claro, e o campo fica ilegível exatamente onde a pessoa não digitou nada e por isso não percebe. O formulário de inscrição tem `autocomplete` em nome, e-mail e telefone, que são os três campos que o navegador mais preenche sozinho. `-webkit-text-fill-color` e a sombra interna de 100px existem porque o Chrome IGNORA `background-color` em campo autopreenchido — é a única forma de recuperar a superfície. O Firefox honra `:autofill` direto, e recebe as duas declarações sem prejuízo. HONESTIDADE SOBRE A VERIFICAÇÃO: não consegui disparar autofill de verdade no Playwright, então o que está medido é que a regra existe e é aplicada na folha carregada — não que o campo fique bonito com o gerenciador de senhas real. É defesa conhecida, não medição de ponta a ponta. */ .campo input:autofill, .campo input:-webkit-autofill, .campo textarea:-webkit-autofill, .campo select:-webkit-autofill { -webkit-text-fill-color: var(--cor-texto); -webkit-box-shadow: 0 0 0 100px var(--cor-superficie-alta) inset; box-shadow: 0 0 0 100px var(--cor-superficie-alta) inset; caret-color: var(--cor-texto); } /* Em alto contraste do Windows, `box-shadow` e removido pelo sistema. A regra acima troca o `outline` por um anel de sombra - bonito, e invisivel em `forced-colors`, onde a pessoa fica sem NENHUM sinal de foco no unico caminho que ela tem para preencher o formulario. Aqui o `outline` volta, com `Highlight`, que e a cor que o proprio sistema reserva para isso. */ @media (forced-colors: active) { .campo input:focus, .campo textarea:focus, .campo select:focus, .opcao:has(input:focus-visible) { outline: 3px solid Highlight; outline-offset: 2px; } .opcao:has(input:checked) { border: 2px solid Highlight; } .menu__link[aria-current="page"] { border-bottom: 2px solid Highlight; } } .campo__ajuda { font-size: var(--fs-14); line-height: var(--lh-20); color: var(--cor-texto-suave); } .campo__erro { display: flex; align-items: center; gap: var(--espaco-2); margin: 0; font-size: var(--fs-14); font-weight: var(--peso-medio); color: var(--cor-erro); } .campo--invalido input, .campo--invalido textarea, .campo--invalido select { border-color: var(--cor-erro); } .campo--invalido input:focus { box-shadow: 0 0 0 3px rgba(242, 85, 90, .24); } /* Chip de escolha: modalidade, plano, horário. */ .opcoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); } /* ---- Chip de escolha: o radio escondido ----------------------------------- Correcao de um defeito do pacote de design, medido no navegador a 320px. O pacote esconde o radio com `.opcao input { position: absolute; opacity: 0 }` e nao declara `position` no chip. Sem ancora posicionada, o bloco que contem o absoluto sobe na arvore ate o formulario - e o radio, que herda `width: 100%` da regra `.campo input` logo acima, resolve esses 100% contra o FORMULARIO. Medido em /contato/ num visor de 320px: o radio saia com 271px e empurrava o documento para 347px. A pagina inteira ganhava rolagem horizontal por causa de um elemento que ninguem ve. `position: relative` no chip resolve, e `width: auto` diz o que sempre foi verdade: a largura de um radio invisivel nao tem por que acompanhar a de um campo de texto. */ .opcao { display: inline-flex; align-items: center; justify-content: center; min-height: var(--alvo-toque); min-width: var(--alvo-toque); padding: 0 var(--espaco-4); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-md); background: transparent; color: var(--cor-texto); font-size: var(--fs-14); font-weight: var(--peso-semi); cursor: pointer; transition: all var(--mov-rapido) var(--ease-padrao); position: relative; } .opcao:hover { border-color: var(--cor-texto); } .opcao input { position: absolute; opacity: 0; pointer-events: none; width: auto; } .opcao:has(input:checked) { background: var(--marca); border-color: var(--marca); color: var(--cor-sobre-marca); } /* O foco precisa ser desenhado no chip, porque o input real esta escondido. `:focus-visible` casa com o elemento focado - o input -, e `.campo input:focus { outline: none }` (0,2,1) ganha de `:focus-visible` (0,1,0) por especificidade: o anel nao chegava a existir. Todos os `.opcao` do projeto vivem dentro de um `.campo`, entao o caminho sem `.campo` nao ocorre. Sem esta regra, quem navega por teclado atravessa os tamanhos de camiseta e a caixa de consentimento de privacidade sem sinal nenhum de onde esta - o chip preenchido indica ESTADO, e e identico focado ou nao. Reprova o SC 2.4.7. */ .opcao:has(input:focus-visible) { outline: 3px solid var(--cor-foco); outline-offset: 2px; } /* ---- Ingresso: inteira ou meia-entrada (26/09) ------------------------------ Dois cartoes de escolha com o valor de cada um; a categoria da meia so aparece quando a meia esta marcada. O estado marcado e contorno e um ponto na cor da marca, sem preencher o cartao: o valor continua sendo o que se le primeiro. Lado a lado quando cabem dois de 16rem; empilhados no celular. */ .ingresso__opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--espaco-3); } .ingresso__opcao { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--espaco-3); row-gap: var(--espaco-1); min-height: var(--alvo-toque); padding: var(--espaco-4) var(--espaco-5); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-lg); cursor: pointer; transition: border-color var(--mov-base) var(--ease-padrao), background-color var(--mov-base) var(--ease-padrao); } /* O radio de verdade fica invisivel, como no `.opcao`; quem mostra o estado e o anel desenhado no `::before`. */ .ingresso__opcao input { position: absolute; opacity: 0; pointer-events: none; width: auto; } .ingresso__opcao::before { content: ""; grid-row: 1; width: var(--espaco-5); height: var(--espaco-5); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pill); transition: border-width var(--mov-base) var(--ease-padrao); } .ingresso__nome { grid-column: 2; font-size: var(--fs-15); font-weight: var(--peso-semi); line-height: var(--lh-20); color: var(--cor-texto); } .ingresso__valor { grid-column: 3; grid-row: 1; font-size: var(--fs-18); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cor-texto); } /* A nota ocupa a linha de baixo inteira, sob o nome e o valor: a 360 px, presa entre o anel e o valor, "Com comprovação" quebrava em duas linhas. */ .ingresso__nota { grid-column: 2 / -1; font-size: var(--fs-14); line-height: var(--lh-20); color: var(--cor-texto-suave); } .ingresso__opcao:hover { border-color: var(--cor-texto); } .ingresso__opcao:has(input:checked) { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); background: color-mix(in srgb, var(--marca) 8%, transparent); } .ingresso__opcao:has(input:checked)::before { border: calc(var(--espaco-1) * 1.5) solid var(--marca); } .ingresso__opcao:has(input:focus-visible) { outline: 3px solid var(--cor-foco); outline-offset: 2px; } .ingresso__categoria { margin-top: var(--espaco-4); } .ingresso__categoria .campo { margin-bottom: 0; } /* Sem `:has()` a categoria fica sempre a vista, e o `clean` do formulario ignora o que ela disser quando o ingresso e inteira. Com erro ela aparece de qualquer jeito: esconder a mensagem seria esconder o motivo da recusa. */ @supports selector(:has(*)) { .ingresso:not(:has(input[value="meia"]:checked)) .ingresso__categoria:not(:has(.campo--invalido)) { display: none; } } @media (forced-colors: active) { .ingresso__opcao:has(input:checked) { border: 2px solid Highlight; } .ingresso__opcao:has(input:checked)::before { border-color: Highlight; background: Highlight; } .ingresso__opcao:has(input:focus-visible) { outline: 3px solid Highlight; } } /* ============================================================================= 7. CARTÃO ============================================================================= Num sistema escuro o cartão não se separa por sombra — separa-se subindo a luminância um degrau e por um fio de contorno. ========================================================================== */ .cartao { position: relative; display: flex; flex-direction: column; gap: var(--espaco-3); padding: var(--espaco-6); border: var(--fio); border-radius: var(--raio-lg); background: var(--cor-superficie); transition: border-color var(--mov-base) var(--ease-padrao), background var(--mov-base) var(--ease-padrao), transform var(--mov-base) var(--ease-padrao); } .cartao--clicavel:hover { border-color: rgba(227, 83, 54, .5); background: var(--cor-superficie-alta); transform: translateY(-3px); } .cartao__titulo { margin: 0; font-size: var(--fs-20); font-stretch: var(--largura-titulo); font-weight: var(--peso-forte); line-height: var(--lh-28); } /* O alvo de toque cheio fica no título, não numa seta de 24px no canto. */ .cartao__titulo a { color: inherit; text-decoration: none; display: block; } .cartao--clicavel .cartao__titulo a::after { content: ""; position: absolute; inset: 0; } .cartao__meta { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-4); margin: 0; font-size: var(--fs-14); color: var(--cor-texto-suave); } .cartao__separador { opacity: .5; } .cartao__resumo { margin: 0; color: var(--cor-texto-suave); line-height: var(--lh-24); } .cartao__preco { font-size: var(--fs-24); font-stretch: var(--largura-titulo); font-weight: var(--peso-display); color: var(--cor-texto-luz); font-variant-numeric: tabular-nums; /* Preco nao quebra no meio do valor. Medido na listagem a 1440px: `R$ 100,00` ocupava DUAS caixas de linha, com o `R$` na linha da etiqueta e o numero na de baixo - que chega a ler como dois valores diferentes. */ white-space: nowrap; } /* O preco que e FRASE, e nao valor. A classe acima serve duas coisas diferentes: no cartao de evento recebe `price_display`, curto e calculado; no de servico recebe `price_description`, texto livre de ate 120 caracteres que a profissional digita no painel. E la ela escreve frase, porque preco de verdade tem condicao - "R$ 100 individual - R$ 140 em dupla". Com `nowrap` uma frase dessas nao quebra em lugar nenhum e VAZA do cartao. Medido no site em 2026-08-29, janela de 940px: 485px de texto num cartao de 438px. Quebrar entre PALAVRAS e o certo. O que nao pode e quebrar DENTRO do valor, e disso cuida o filtro `valor_colado`, que cola o `R$` no numero com espaco insecavel. As duas garantias ao mesmo tempo, em vez de escolher um defeito. */ .cartao__preco--frase { white-space: normal; text-wrap: balance; } /* A faixa de situacao: etiqueta a esquerda, preco ao lado. Eram os dois em fluxo inline dentro de um `

` sem layout, e era isso que deixava a linha quebrar no meio do preco. `wrap` aqui e `nowrap` no valor, e nao o contrario: a 320px etiqueta e preco nao cabem lado a lado e dobrar e o comportamento certo - o que nunca pode e partir o numero. */ .cartao__situacao { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espaco-2) var(--espaco-3); margin: 0; } .cartao__acao { margin-top: auto; padding-top: var(--espaco-3); } .grade { display: grid; gap: var(--espaco-4); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); } .faixa-clara .cartao { border-color: var(--cor-borda-em-claro); background: var(--cor-superficie); } .faixa-clara .cartao__preco { color: var(--cor-texto-marca-em-claro); } /* ============================================================================= 8. ETIQUETA ============================================================================= */ .etiqueta { display: inline-flex; align-items: center; gap: var(--espaco-1); padding: var(--espaco-1) var(--espaco-3); border: 1px solid currentColor; border-radius: var(--raio-pill); font-size: var(--fs-12); font-stretch: var(--largura-sobrancelha); font-weight: var(--peso-forte); letter-spacing: .08em; text-transform: uppercase; line-height: var(--lh-16); } .etiqueta--marca { color: var(--cor-sobre-marca); background: var(--marca); border-color: var(--marca); } .etiqueta--confirmada { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); } .etiqueta--pendente { color: var(--cor-atencao); background: var(--cor-atencao-fundo); } .etiqueta--cancelada { color: var(--cor-erro); background: var(--cor-erro-fundo); } .etiqueta--neutra { color: var(--cor-texto-suave); background: transparent; } /* ============================================================================= 9. AVISO ============================================================================= Ícone + título + mensagem. Cor nunca é o único indicador — e no erro isso é obrigatório, porque o vermelho de erro e o terracota da marca são vizinhos. ========================================================================== */ .aviso { display: grid; grid-template-columns: auto 1fr; gap: var(--espaco-3); padding: var(--espaco-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: var(--cor-superficie); column-gap: var(--espaco-3); border-left-width: 4px; margin: var(--espaco-4) 0; } .aviso__icone { flex: none; width: 20px; height: 20px; margin-top: 2px; } .aviso__titulo { margin: 0 0 var(--espaco-1); font-size: var(--fs-15); font-weight: var(--peso-forte); } .aviso__texto { margin: 0; font-size: var(--fs-15); line-height: var(--lh-24); } .aviso--sucesso { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso-borda); border-left-color: var(--cor-sucesso); } .aviso--erro { color: var(--cor-erro); background: var(--cor-erro-fundo); border-color: var(--cor-erro-borda); border-left-color: var(--cor-erro); } .aviso--atencao { color: var(--cor-atencao); background: var(--cor-atencao-fundo); border-color: var(--cor-atencao-borda); border-left-color: var(--cor-atencao); } .aviso--info { color: var(--cor-info); background: var(--cor-info-fundo); border-color: var(--cor-info-borda); border-left-color: var(--cor-info); } /* ============================================================================= 10. TOPO ============================================================================= */ .topo { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--cor-fundo) 88%, transparent); backdrop-filter: blur(12px); border-bottom: var(--fio); } .topo__interno { display: flex; align-items: center; gap: var(--espaco-6); max-width: var(--largura-larga); margin: 0 auto; padding: var(--espaco-4) var(--espaco-6); } .menu__lista { display: flex; align-items: center; gap: var(--espaco-1); margin: 0 0 0 auto; padding: 0; list-style: none; } /* A voz do menu é a mesma do botão ao lado: caixa alta, 12px, com tracking. Antes era 14px em sentence-case com peso médio — corpo de texto comum ao lado de um botão desenhado, e por isso a barra parecia ter um elemento pensado e cinco esquecidos. Agora a diferença entre link e botão é só o preenchimento, que é a hierarquia real: uma ação principal por seção. O fio nasce TRANSPARENTE para poder crescer. Transicionar a cor de um fio que já existe não reflui nada, ao contrário de animar altura ou borda — e é por isso que ele é `box-shadow` e não `border-bottom`. */ .menu__link { position: relative; display: inline-flex; align-items: center; min-height: var(--alvo-toque); /* Fluido, e não um ponto de quebra. Uma versão anterior deste comentário dizia que a folha não tinha nenhuma media query de largura — ela tem duas, em `rem`, e a busca que eu fiz procurava `px`. A razão continua de pé sem a afirmação falsa: as duas existentes tratam de LAYOUT (o herói vira uma coluna, o véu muda de eixo), e espaçamento de item de menu não precisa de um ponto de quebra próprio — `clamp` cobre o intervalo inteiro. Medido: com `--espaco-3` fixo, os seis itens em caixa alta quebram em TRÊS linhas a 360px — a barra come 92px de altura antes de a página começar. O `clamp` devolve `--espaco-2` no estreito e mantém a folga no largo. O que não encolhe é o tamanho da fonte: é ele que carrega a voz. */ padding: 0 clamp(var(--espaco-2), 1.6vw, var(--espaco-3)); color: var(--cor-texto-suave); font-size: var(--fs-12); font-stretch: var(--largura-sobrancelha); font-weight: var(--peso-forte); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: color var(--mov-rapido) var(--ease-padrao), box-shadow var(--mov-base) var(--ease-padrao); } .menu__link:hover { color: var(--cor-texto); box-shadow: inset 0 -2px 0 var(--marca-luz); } /* Item atual: fio âmbar embaixo, não preenchimento — o preenchimento roubaria a atenção do único botão da barra. */ .menu__link[aria-current="page"] { color: var(--cor-texto); box-shadow: inset 0 -2px 0 var(--marca-luz); } /* ============================================================================= 11. HERÓI ============================================================================= */ .hero { position: relative; overflow: hidden; padding: clamp(var(--espaco-12), 6vw, var(--espaco-20)) 0; } .hero__interno { position: relative; z-index: 1; max-width: var(--largura-larga); margin: 0 auto; padding: 0 var(--espaco-6); } .hero__titulo { max-width: 18ch; margin: 0 0 var(--espaco-6); /* O tamanho usa a largura de `.hero__texto`, seu container, para o titulo acompanhar a coluna sem transbordar em telas estreitas. */ font-stretch: var(--largura-display); font-weight: var(--peso-display); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; /* O gradiente tem 260% da largura de proposito: a faixa clara entra por fora e sai por fora, entao so `background-position` se move - e ela nao reflui nada. O ciclo de 8s tambem e de proposito. Abaixo de 5s a varredura vira letreiro de promocao, que e o oposto do que `docs/content-guide.md` diz sobre urgencia artificial. `background-clip: text` exige `color: transparent`, e no Safari ele recorta `text-shadow` junto: nao empilhar extrusao neste titulo. Se um dia precisar das duas, a sombra tem de ir para um pseudo-elemento. O ponto quente e `color-mix` sobre `--marca-luz`, e nao um hexadecimal fixo: assim ele segue a cor secundaria escolhida no painel, em vez de continuar ambar quando a marca mudar. Com o ambar padrao a mistura da exatamente o creme do design aprovado. */ background: linear-gradient( 112deg, var(--areia-100) 0%, var(--areia-100) 38%, color-mix(in srgb, var(--marca-luz) 10%, white) 47%, var(--marca-luz) 50%, color-mix(in srgb, var(--marca-luz) 10%, white) 53%, var(--areia-100) 62%, var(--areia-100) 100% ); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: br-heroi-varredura 8s cubic-bezier(.4, 0, .2, 1) infinite; /* Uma unica escala acompanha a coluna. O piso cabe em 320px sem estreitar a Archivo; o teto preserva a presenca do retrato ao lado. */ font-size: clamp(1.875rem, 9.5cqi, 3.5rem); } .hero__apoio { max-width: 52ch; margin: 0 0 var(--espaco-10); font-size: var(--fs-18); line-height: var(--lh-28); color: var(--cor-texto-suave); } .hero__acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); } .hero__imagem { position: relative; grid-row: 2; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--raio-lg); background: var(--cor-fundo); } .hero__imagem img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } /* A foto ocupa uma caixa propria em todas as larguras. O elemento antigo permanece compativel com o espelho, mas nenhum texto depende do veu. */ .hero__veu { display: none; } .hero--com-foto .hero__interno { grid-row: 1; min-width: 0; width: 100%; padding: 0; } /* Faixa de fatos: duração, valor, formato, avaliação. */ .fatos { display: grid; gap: var(--espaco-6); grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); margin-top: var(--espaco-12); padding-top: var(--espaco-8); border-top: var(--fio); } .fatos__rotulo { margin: 0 0 var(--espaco-1); font-size: var(--fs-12); font-stretch: var(--largura-sobrancelha); font-weight: var(--peso-forte); letter-spacing: .14em; text-transform: uppercase; color: var(--cor-texto-luz); } .fatos__valor { margin: 0; font-size: var(--fs-24); font-stretch: var(--largura-titulo); font-weight: var(--peso-display); font-variant-numeric: tabular-nums; } /* ============================================================================= 12. TABELA DE VALORES ============================================================================= */ .valores { width: 100%; border-collapse: collapse; font-size: var(--fs-15); } .valores caption { padding-bottom: var(--espaco-3); font-size: var(--fs-12); font-stretch: var(--largura-sobrancelha); font-weight: var(--peso-forte); letter-spacing: .14em; text-transform: uppercase; text-align: left; color: var(--cor-texto-suave); } .valores th, .valores td { padding: var(--espaco-4) var(--espaco-3); text-align: left; border-bottom: 1px solid var(--cor-borda); } .valores th { font-weight: var(--peso-semi); } .valores tbody tr:last-child th, .valores tbody tr:last-child td { border-bottom: 0; } .valores__preco { text-align: right; white-space: nowrap; font-size: var(--fs-18); font-stretch: var(--largura-titulo); font-weight: var(--peso-display); font-variant-numeric: tabular-nums; color: var(--cor-texto-luz); } .valores__unidade { display: block; font-size: var(--fs-12); font-weight: var(--peso-regular); font-stretch: normal; letter-spacing: 0; text-transform: none; color: var(--cor-texto-suave); } .faixa-clara .valores__preco { color: var(--cor-texto-marca-em-claro); } /* ============================================================================= 13. DADOS, FAQ, DEPOIMENTO ============================================================================= */ .dados { display: grid; gap: var(--espaco-4); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); margin: 0; } .dados__rotulo { font-size: var(--fs-12); font-stretch: var(--largura-sobrancelha); font-weight: var(--peso-forte); letter-spacing: .14em; text-transform: uppercase; color: var(--cor-texto-suave); } .dados__valor { margin: var(--espaco-1) 0 0; font-size: var(--fs-18); font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; } /* O acordeao. Continua sendo `

`: abre e fecha sem JavaScript, e o conteudo fechado fica mesmo escondido em toda largura - o comportamento nativo e o certo aqui. O que mudou em 21/09/2026: ele era um retangulo chapado, sem hover, sem fio de acento e sem transicao de abertura. Tres decisoes desta versao: `::details-content` com `grid-template-rows: 0fr -> 1fr` `
` nao anima altura sozinho. O caminho oficial seria `interpolate-size: allow-keywords` com `block-size: auto`, e ele NAO serve aqui: medido no Firefox 151, que e o navegador da suite, `CSS.supports` devolve `false` para `interpolate-size`. Para `::details-content` e para `grid-template-rows: 0fr` devolve `true`. Dai a grade de uma linha: e a unica forma que anima altura desconhecida nos tres motores. `content-visibility` entra com `allow-discrete` (tambem `true`) para o conteudo nao sumir antes de a linha fechar. Motor sem `::details-content` (Safari anterior ao 18.4) abre instantaneo. Isso e degradacao, nao defeito: o `[open]` continua mandando. o sinal e um ``, nao um `content: "+"` Precisa de tres caixas - o poco redondo e as duas barras -, e um `summary` so tem dois pseudo-elementos. Com o span, `::before` e `::after` sao as barras e o proprio span e o poco. A barra vertical gira ate a horizontal e some: vira o menos sem trocar glifo, que e o que permite animar. `data-revelar` em cada item, no template O escalonamento sai de graca: `movimento.js` ja numera irmaos em `--i` e `movimento.css` ja respeita `prefers-reduced-motion`. */ .faq { display: grid; gap: var(--espaco-3); } .faq__item { position: relative; border: 1px solid var(--faq-borda); border-radius: var(--raio-xl); background: var(--faq-fundo); transition: border-color var(--mov-base) var(--ease-padrao), background-color var(--mov-base) var(--ease-padrao), box-shadow var(--mov-base) var(--ease-padrao); } /* O trilho de acento. Duas escolhas com motivo: `inset-block` de um espaco inteiro para ele morrer na parte RETA da borda. Encostado no canto, um fio de 2px atravessaria o raio de 14px e apareceria por fora. invisivel enquanto o item esta fechado, e nao apenas mais fraco a primeira versao deixava 28% de opacidade e 35% de altura o tempo todo. Numa lista de oito, isso nao lia como acento: lia como um risco solto na margem esquerda de cada cartao, oito vezes. O trilho e SINAL DE ESTADO - aparece quando o item esta sob o ponteiro, com foco, ou aberto. */ .faq__item::before { content: ""; position: absolute; inset-block: var(--espaco-4); inset-inline-start: 0; width: 2px; border-radius: var(--raio-sm); background: var(--faq-trilho); opacity: 0; scale: 1 .35; transition: opacity var(--mov-base) var(--ease-padrao), scale var(--mov-base) var(--ease-saida); } /* O halo e `box-shadow`, e nao um `::after` com `overflow: hidden` no pai como nos cartoes de servico. Recortar o pai recortaria junto o anel de foco do `summary`, que o `:focus-visible` global desenha com `outline-offset: 2px` - some justo para quem navega por teclado. Sombra nao precisa de recorte. */ .faq__item:is([open], :hover) { border-color: var(--faq-borda-viva); box-shadow: var(--faq-halo); } .faq__item:is([open], :hover)::before { opacity: 1; scale: 1 1; } .faq__item[open] { background: var(--faq-fundo-aberto); } .faq__item:has(.faq__pergunta:focus-visible) { border-color: var(--faq-borda-viva); } .faq__item:has(.faq__pergunta:focus-visible)::before { opacity: 1; scale: 1 1; } .faq__pergunta { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4); min-height: var(--altura-controle); padding: var(--espaco-4) var(--espaco-5); border-radius: var(--raio-xl); font-size: var(--fs-16); font-weight: var(--peso-semi); line-height: var(--lh-24); color: var(--cor-texto); cursor: pointer; list-style: none; transition: color var(--mov-base) var(--ease-padrao); } .faq__pergunta::-webkit-details-marker { display: none; } .faq__texto { min-width: 0; text-wrap: pretty; } .faq__sinal { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border: 1px solid var(--faq-sinal-borda); border-radius: 50%; background: var(--faq-sinal-fundo); /* `--cor-acento-quente`, o mesmo laranja do cartao de servico e dos contatos do rodape: 9,07:1 sobre o poco escuro. E a unica cor do acento nesta folha, entao trocar a linha de cima troca o componente inteiro. */ color: var(--cor-acento-quente); transition: background-color var(--mov-base) var(--ease-padrao), border-color var(--mov-base) var(--ease-padrao), scale var(--mov-base) var(--ease-saida); } .faq__sinal::before, .faq__sinal::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: .625rem; height: 2px; border-radius: var(--raio-sm); background: currentColor; translate: -50% -50%; transition: rotate var(--mov-base) var(--ease-padrao), opacity var(--mov-base) var(--ease-padrao); } .faq__sinal::after { rotate: 90deg; } .faq__item[open] .faq__sinal { scale: 1.08; border-color: var(--faq-sinal-borda-viva); } .faq__item[open] .faq__sinal::after { rotate: 0deg; opacity: 0; } .faq__item::details-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mov-base) var(--ease-saida), content-visibility var(--mov-base) allow-discrete; } .faq__item[open]::details-content { grid-template-rows: 1fr; } .faq__resposta { min-height: 0; overflow: hidden; margin: 0; padding: 0 var(--espaco-5) var(--espaco-5); color: var(--cor-texto-suave); line-height: var(--lh-24); opacity: 0; transition: opacity var(--mov-base) var(--ease-padrao); } .faq__item[open] .faq__resposta { opacity: 1; } /* O fecho de /faq/. Margem propria, e nao `.secao`, porque ele mora DENTRO da coluna de prosa e nao e uma secao nova: e o ultimo degrau da mesma lista. */ .faq__fecho { margin-block: var(--espaco-8) var(--espaco-12); } .faq__fecho p { margin: 0; } .faq__fecho p + p { margin-top: var(--espaco-2); } .faq__mais { display: inline-flex; align-items: center; gap: var(--espaco-2); min-height: var(--alvo-toque); font-weight: var(--peso-semi); } .faq__mais > span[aria-hidden] { transition: translate var(--mov-base) var(--ease-padrao); } @media (hover: hover) { /* A pergunta sob o ponteiro usa o MESMO acento do sinal - o componente tem um acento so, e nao dois brigando como quando o sinal era terracota e o hover continuava ambar. Sem `:not([open])`, que a versao terracota precisava ter: `--cor-texto-marca` caia a 4,19:1 no cartao aberto, abaixo do piso. `--cor-acento-quente` faz 5,87:1 la, entao a regra volta a ser uma so. */ .faq__item:hover .faq__pergunta { color: var(--cor-acento-quente); } .faq__mais:hover > span[aria-hidden] { translate: .25rem 0; } } @media (prefers-reduced-motion: reduce) { .faq__item, .faq__item::before, .faq__item::details-content, .faq__pergunta, .faq__sinal, .faq__sinal::before, .faq__sinal::after, .faq__resposta, .faq__mais > span[aria-hidden] { transition: none; } } .depoimento { display: flex; flex-direction: column; gap: var(--espaco-4); padding: var(--espaco-6); border: var(--fio); border-radius: var(--raio-lg); background: var(--cor-superficie); } .depoimento__texto { margin: 0; font-size: var(--fs-18); line-height: var(--lh-28); text-wrap: pretty; } /* `margin-top: auto` saiu junto com a inversão de 03/09. Ele existia para colar a autoria no fundo do cartão enquanto ela era o último elemento; com ela em PRIMEIRO, a mesma regra empurraria o bloco inteiro para baixo e deixaria um vão no topo de todo cartão. Quem se estica agora é a citação. */ .depoimento__autoria { display: flex; align-items: center; gap: var(--espaco-3); } .depoimento__foto, .depoimento__inicial { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; } .depoimento__inicial { display: grid; place-items: center; background: var(--marca); color: var(--cor-sobre-marca); font-weight: var(--peso-forte); } .depoimento__nome { font-size: var(--fs-15); font-weight: var(--peso-forte); } .depoimento__contexto { font-size: var(--fs-14); color: var(--cor-texto-suave); } /* ============================================================================= 14. FOTOGRAFIA ============================================================================= As fotos são escuras e com luz quente pontual. O sistema não as corrige: ele se constrói em volta delas. ========================================================================== */ .retrato { width: 100%; border-radius: var(--raio-lg); object-fit: cover; aspect-ratio: 4 / 5; } .capa { width: 100%; border-radius: var(--raio-lg); object-fit: cover; aspect-ratio: 16 / 9; } /* Recorte alto e estreito, para a coluna de "sobre". */ .retrato--alto { aspect-ratio: 3 / 4; } /* Fio âmbar num canto: repete a diagonal do facho na moldura da foto. */ .moldura { position: relative; } .moldura::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 2px; background: linear-gradient(90deg, var(--marca-luz), transparent); } /* ============================================================================= 16. IN MOVE — sub-marca, escopo isolado ============================================================================= "In Move é um programa isolado. A Bianca personal não entra." A seção existe para divulgar o programa, e dentro dela a identidade do In Move é preservada. Todo o roxo e o lima vivem AQUI DENTRO e em nenhum outro lugar — é por isso que este bloco é um escopo e não um conjunto de variantes soltas. ========================================================================== */ /* O escopo `.in-move` morava aqui e redefinia `--marca` e `--marca-luz` para o roxo e o lima do programa. Removido na decisão 28. A decisão 25, que decidiu quais tokens entravam neste bloco e quais não, fica valendo como registro do raciocínio - e como o lugar de onde recomeçar, se o programa voltar a ter identidade própria. */ /* ============================================================================= 17. UTILITÁRIOS ============================================================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---- 3. O salto para o conteudo era texto solto --------------------------- Ele funcionava - saia de -250% e o alvo existia -, mas aparecia como texto terracota SEM FUNDO por cima do cabecalho, atravessando a logo, com o anel de foco colado nas letras. E o primeiro alvo de quem navega por teclado, e lia-se como falha de renderizacao. O pacote declara so `position`, `top`, `left`, `z-index` e `transform`. Sem superficie propria, ele herda o que estiver embaixo - que no topo de toda pagina e a barra fixa, e na pagina do evento e a foto. Agora e uma peca opaca: superficie de cartao, fio forte, e o texto em areia (14,39:1) em vez da cor da marca - o salto nao tem por que depender da cor que alguem escolher no painel. A sombra o descola do que estiver atras. */ .skip-link { position: absolute; left: var(--espaco-4); top: var(--espaco-4); z-index: 100; transform: translateY(-250%); padding: var(--espaco-3) var(--espaco-4); border: var(--fio-forte); border-radius: var(--raio-md); background: var(--cor-superficie); color: var(--cor-texto); box-shadow: var(--sombra-lg); } .skip-link:focus { transform: none; } .texto-suave { color: var(--cor-texto-suave); } .numeros { font-variant-numeric: tabular-nums; } *, *::before, *::after { box-sizing: border-box; } /* O atributo `hidden` precisa vencer o `display` do componente. ------------------------------------------------------------------------ `[hidden] { display: none }` mora na folha do NAVEGADOR, e regra de autor ganha dela. Entao `.botao { display: inline-flex }` anulava o `hidden`, e o unico elemento do projeto que usa o atributo e justamente o botao "Copiar codigo Pix" - que nasce escondido e so deve aparecer quando `copiar.js` roda. O efeito estava no ar: quem abrisse a pagina do Pix sem JavaScript via um botao de aparencia normal que nao fazia NADA ao ser clicado, porque o ouvinte nunca tinha sido ligado. O comentario do proprio template ja dizia a intencao - "O botao exige JavaScript; o codigo acima e selecionavel sem ele". Achado pelo primeiro teste de jornada em navegador deste projeto, com o JavaScript desligado. Nenhum dos 3077 testes de servidor podia ve-lo: eles leem o HTML, onde o atributo esta corretamente presente. `!important` e necessario e nao e preguica: sem ele, qualquer componente que declare o proprio `display` volta a ganhar do atributo. */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--fonte); font-size: var(--fs-16); line-height: var(--lh-24); color: var(--cor-texto); background: var(--cor-fundo); -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } /* Companheira obrigatoria dos atributos `width`/`height` que `{% foto %}` emite. Eles servem para o navegador reservar o espaco certo antes de a imagem chegar - mas em HTML eles TAMBEM viram dica de apresentacao para as propriedades `width` e `height`. Sem esta linha, `.retrato` (que define `width: 100%` e `aspect-ratio: 4/5`, e nenhuma altura) passava a medir os 1537px do atributo em vez dos 740 do recorte: medido em 2026-08-28, a foto da pagina sobre ficou com o dobro da altura no primeiro render. Uma dica de apresentacao perde para QUALQUER regra de autor, entao `img` - a menor especificidade que existe - basta para neutraliza-la. E por ser a menor, `.hero__imagem img { height: 100% }` continua ganhando, que e o que mantem o heroi funcionando. */ img { height: auto; } /* `` some do layout. A etiqueta `{% foto %}` envolve a imagem para oferecer AVIF e WebP, e sem isto ela viraria uma caixa `inline` entre o pai e o `` - quebrando toda regra escrita como `.hero__imagem img` ou `.metodo__foto img`, que sao a forma como esta folha sempre dimensionou imagem. Com `display: contents` o `` continua sendo filho para efeito de layout, e nenhuma dessas regras precisou mudar. */ picture { display: contents; } h1, h2, h3, h4 { font-stretch: var(--largura-titulo); font-weight: var(--peso-display); letter-spacing: -.02em; text-wrap: balance; } p { text-wrap: pretty; } /* ---- Link: o sublinhado e explicito -------------------------------------- O pacote define espessura e deslocamento do sublinhado, mas nao o sublinhado em si: ele conta com o padrao do navegador. Isso funciona ate alguem servir a pagina com um `reset` mais agressivo ou um navegador mudar de ideia. A garantia nao pode depender disso. Cor sozinha nao pode ser o unico sinal de que algo e link (SC 1.4.1), e num site cujo `--brand-primary` vem do banco a cor pode chegar a qualquer valor. O sublinhado e o que sobrevive. */ a { color: var(--cor-texto-marca); text-underline-offset: 3px; text-decoration: underline; } /* `:not(.botao)` porque um botão desenhado como `` perdia a própria cor de texto aqui. `a:hover` é (0,1,1) e `.botao--principal` é (0,1,0): a regra genérica vencia, e o CTA principal do site — "Agendar avaliação", que é `` na home, no como-funciona, no sobre e no contato — trocava carvão por areia ao passar o mouse. Medido a 1440px: 5,20:1 parado, **2,83:1 no hover** e 3,65:1 no pressionado, os dois abaixo do piso de 4,5:1. O `