@charset "utf-8"; /* ============================================================================= DR. RAFAEL KENJI — SITE v2 · DESIGN SYSTEM (M0) Editorial impresso. Papel off-white quente, Fraunces de caráter no display, Instrument Sans neutra no corpo, bronze discreto. Mobile-first (base = 390px). ARQUIVO ÚNICO DO MÓDULO M0. Nenhum outro módulo edita este arquivo. Nenhum outro módulo escreve CSS: se faltar uma classe, peça ao M0. `style="..."` inline só para AJUSTE PONTUAL de espaçamento — e mesmo aí o valor sai da escala (`style="margin-top:var(--e-6)"`), NUNCA rem cru. ----------------------------------------------------------------------------- ⚠ OBRIGATÓRIO NO DE TODA PÁGINA (integrador, M4), ANTES deste arquivo ----------------------------------------------------------------------------- (no HTML, escrever `&` no lugar de `&` para o documento validar) Duas coisas dependem disso e NÃO são negociáveis: 1. o eixo `ital` da Fraunces. Sem ele o bronze dos títulos — o gesto editorial central do sistema — sai como oblíqua SINTÉTICA do romano, sem os glifos wonky que justificam a fonte. Conferência: no console, [...document.fonts].filter(f=>f.family=='Fraunces'&&f.style=='italic').length tem de ser > 0. 2. o no , nunca @import neste arquivo: a @import serializa o download (o CSS do Google só é pedido depois que estilo.css baixa e é parseado), atrasando a fonte de display no tráfego mobile do Instagram. ----------------------------------------------------------------------------- ⚠ OBRIGAÇÃO DO M5 (js/site.js) — PRIMEIRA LINHA DO SCRIPT, ANTES DE TUDO ----------------------------------------------------------------------------- document.documentElement.classList.add('js'); É essa classe que LIGA a animação de revelação (.rev). Sem ela o conteúdo nasce visível e fica visível. Consequência disso, e é intencional: se o script não rodar — bloqueador de anúncio derrubando o snippet do coletor, erro de rede, JS desligado — o site inteiro continua legível. NUNCA inverta essa lógica (esconder por padrão e mostrar via JS): num site de médico, um bloqueador não pode levar o conteúdo institucional junto. ----------------------------------------------------------------------------- CONTRATO — CLASSES DISPONÍVEIS ----------------------------------------------------------------------------- ESQUELETO body > .cabecalho > .env.topo cabeçalho fixo (69px de altura real) body > main > .secao uma seção de página body > .rodape rodapé LAYOUT .env container (respeita a goteira). Todo conteúdo mora dentro de um. .env--estreito container de leitura (~58rem) .env--largo container amplo (~86rem) .secao bloco de página com respiro vertical fluido .secao--abertura ⚠ OBRIGATÓRIA na PRIMEIRA .secao da página. O cabeçalho é fixo (69px) e o respiro normal da seção em 390px é 60px — sem esta classe a abertura nasce por baixo do topo. Soma --altura-topo ao padding de cima. .secao--curta respiro reduzido .fundo-2 superfície secundária (papel mais fechado) .escuro superfície escura — RE-MAPEIA todos os tokens; qualquer componente dentro dela já vem invertido, sem classe extra .grade grid (gap padrão). Some com: .grade--2 .grade--3 .grade--4 colunas a partir de 48em / 62em .grade--partida 1.15fr .85fr a partir de 62em .grade--partida-inversa .85fr 1.15fr a partir de 62em .grade--apertada .grade--solta gap menor / maior .medida limita a linha de texto (~62ch) .centro centraliza texto e bloco .rolagem wrapper de conteúdo largo (tabela, bloco de código). OBRIGATÓRIO em volta de toda : em 390px a tabela rola DENTRO dele em vez de estourar a página. Medido: tabela de 512px dentro de um .rolagem de 350px → scrollWidth do documento continua 390. Na auditoria de estouro, ignore quem está dentro de um .rolagem (ver COMO CONFERIR 390px, no fim do contrato). ESPAÇO — a escala. NÃO invente rem. --e-1 .25rem 4px --e-5 1.5rem 24px --e-2 .5rem 8px --e-6 2rem 32px --e-3 .75rem 12px --e-7 3rem 48px --e-4 1rem 16px --e-8 4rem 64px --goteira clamp(1.25rem, 5vw, 3rem) margem lateral do .env --secao-y clamp(3.75rem, 8.5vw, 8rem) respiro vertical da .secao --altura-topo 4.25rem cabeçalho (+1px hairline = 69px) --medida 76rem largura do .env --medida-texto 62ch linha de leitura Ajuste pontual usa var(--e-N) — `style="margin-top:var(--e-6)"`. Valor cru em rem/px é ESPAÇAMENTO INCONSISTENTE e o supervisor reprova por isso. (--e-9, --e-10 e --sombra-3 existiam e foram removidos: nenhum uso. Não recrie: respiro maior que --e-8 é trabalho da .secao, não de style inline.) TIPOGRAFIA h1 h2 h3 h4 já estilizados (Fraunces). Use as tags. .titulo-display h1 de abertura (maior de todos) .olho kicker: caixa alta, entreletras, bronze, com traço .olho--sem-traco idem, sem o traço .cabeca cabeçalho de seção:
olho + h2
+ .num-secao .num-secao marcador do lado direito da .cabeca ("01 — 06") .lead parágrafo de entrada .texto bloco de prosa. Já traz, sem classe extra:

com espaçamento entre parágrafos,

/

/

com margem de bloco,

(dentro de .rolagem),
,
, com sublinhado visível (ver LINKS). .miudo nota de rodapé / letra miúda (também sublinha ) em dentro de h1/h2 sai em itálico bronze (ênfase editorial) RITMO: .olho+h1, h1+.lead, .lead+.texto, .texto+.faixa-numeros, .texto+.faq, .texto+.dados já vêm com a margem certa. NÃO use style inline para isso. PISO DE CORPO: nenhum rótulo visível ao paciente abaixo de --t-rotulo (.7rem = 11.2px). O público vem do Instagram no celular e tem 35-60 anos. Única exceção do arquivo: a etiqueta de canto do .foto-slot (.56rem) — é sinalização de obra e some sozinha quando a foto real chega. ⚠ Dentro de .card, .etapa, .depo e .post o parágrafo JÁ vem estilizado. .lead e .miudo continuam funcionando lá dentro (foram blindados), mas o normal é não precisar deles. LINKS Link de navegação (menu, cartão, botão) herda a cor e NÃO sublinha. Link DENTRO de texto corrido sublinha e sai em bronze automaticamente em: .texto a · .miudo a · .lead a · .rodape-grade a · .card p a · .faq a · .post-data a (é aí que mora o "Ver no Instagram" do cartão de publicação — o cartão NÃO é o link; não envolva o .post inteiro num ) Não existe classe de link: escreva normal dentro desses blocos. BOTÕES .btn contorno .btn--cheio sólido (ação principal) .btn--min compacto (topo / linhas apertadas) .btn--largo 100% da largura (mobile / cartão) .btn--texto link com seta, sem caixa. AUTOSSUFICIENTE: funciona sozinho (`class="btn--texto"`) e junto (`class="btn btn--texto"`) — as duas formas rendem exatamente o mesmo. Prefira sozinho. .acoes agrupa botões (flex). Até 480px cada .btn de caixa ocupa a linha inteira; .btn--texto fica do tamanho do texto. TOQUE: .btn, .btn--cheio, .btn--largo e .btn--min têm min-height 2.75rem = 44px. .btn--texto mantém a altura da linha de texto e amplia a área clicável para ~45px com pseudo-elemento. Isso NÃO desloca nada no layout, mas OCUPA espaço no hit-test: dois .btn--texto vizinhos precisam de ≥24px de vão, senão a caixa invisível de um rouba o clique do outro. Dentro de .acoes o vão já sobe para --e-5 automaticamente. Fora de .acoes, use .acoes. Todo CTA carrega data-evento="" (M5 lê). NUNCA nome de procedimento. FORMULÁRIO (5b) — sim, este site tem formulário; não improvise CSS para ele
Preencha seu nome. ← opcional, M5 mostra
.formulario grid de campos (gap pronto) .campo rótulo + controle + erro .campo--marcar consentimento LGPD (checkbox 24px + label na mesma linha). O
passo numerado da conduta .depo > .aspas depoimento (espaço reservado; texto sem procedimento) a .aspas é ornamento tipográfico: marque aria-hidden="true" .post cartão de publicação do Instagram, com: .post-cab .post-av .post-user .post-tipo .post-corpo .post-metricas .post-legenda .post-data .dados > .dado linhas de dado (rótulo à esquerda, valor à direita) .pendente valor ainda não confirmado pelo cliente (itálico bronze) PERGUNTAS FREQUENTES (details/summary nativo — sem JS)
A pergunta

A resposta.

Regra 5 do nicho: pergunta GERAL sobre processo, preparo e recuperação. Nada de diagnóstico, conduta individual, prazo de resultado ou preço. FAIXA DE NÚMEROS .faixa-numeros > .numero > b + span mobile: linha (valor à esquerda, rótulo à direita) · ≥48em: 3 colunas ESPAÇO DE FOTO (o cliente ainda não mandou material)
espaço reservado Retrato do Dr. Rafael vertical · fundo neutro · alta resolução
data-slot é OBRIGATÓRIO e aparece SOZINHO, impresso, na etiqueta de canto — o que estiver escrito ali vai para a tela. LISTA FECHADA (briefing): retrato-principal · retrato-trabalho · consultorio · equipe · recepcao · estrutura · post-1 … post-6 (capa de cada publicação) Valor fora desta lista é ERRO DE MÓDULO. Em especial: nada que nomeie procedimento, parte do corpo ou resultado (`antes-depois` é reprovação automática do briefing, e o CSS estamparia isso na tela). Proporções: --retrato (4/5) --alto (3/4) --paisagem (3/2) --quadrado (1/1) --capa (1/1, capa de post) --banda (16/9) Trocar por foto real: manter o data-slot e pôr um dentro — a moldura de espaço reservado some sozinha e a imagem ocupa o slot inteiro. CABEÇALHO E MENU .cabecalho .topo .marca .menu .menu a .btn-menu hambúrguer (só < 62em) .menu-movel gaveta; M5 alterna .aberto nela e .travado no . A gaveta traz CORTINA própria (pseudo-elemento) cobrindo o resto da viewport: o conteúdo de baixo fica velado e não é clicado por engano. Clique na cortina chega como clique na própria .menu-movel — M5 fecha quando `e.target === menuMovel` (nos links o target é o ). .cabecalho.desceu M5 aplica ao rolar (aparece a hairline) ATENÇÃO: o .btn dentro de .topo só aparece a partir de 62em (no mobile ele quebraria o rótulo em duas linhas). Repita o CTA dentro da .menu-movel — lá ele já sai com a largura toda. RODAPÉ .rodape .rodape-grade .rodape-nota PÁGINAS DE APOIO (M4 — /whatsapp, /obrigado, /privacidade) .pagina-central centraliza o cartão na viewport inteira .selo marca circular .pontos três pontos de "aguarde" (respeita reduced-motion) .banner-lgpd barra de consentimento; .banner-lgpd.oculto some Página de privacidade:
…
A tabela de cookies do padrão adson-tracking-stack vai em
…
dentro desse .texto. UTILITÁRIOS .rev / .rev.vis revelação no scroll (M5 adiciona .vis). Só existe se o M5 tiver posto `js` no — ver OBRIGAÇÃO DO M5. .rev--2 .rev--3 escalona o atraso .sr-apenas só para leitor de tela .pular link "pular para o conteúdo" .sem-quebra impede quebra de linha no trecho COR — O QUE PODE SER TEXTO Contraste medido (WCAG) contra a superfície clara MAIS FECHADA do sistema, que é #ded3c1 — o --papel-3 de dentro de .fundo-2, e não o #e7dece do :root. Todo número abaixo é esse pior caso; em qualquer outra superfície sobra folga (no --papel de topo, #f7f3ec, some ~1,5 ponto): --tinta 12.3:1 · --tinta-2 6.2:1 · --tinta-3 4.7:1 · --bronze 4.7:1 → texto ok --bronze-vivo 3.65:1 → só texto grande (≥24px), traço, foco, área chapada --bronze-claro 1.7:1 → ORNAMENTO APENAS: hairline, gradiente, seleção. NUNCA texto, nunca número, nunca ícone informativo. --erro 5.5:1 → mensagem de erro de formulário. Dentro de .escuro os tokens são re-mapeados e o pior caso é o --papel-3 #2e2620: --tinta 13.2:1 · --tinta-2 7.9:1 · --tinta-3 4.9:1 · bronze 8.6:1. REGRAS DE NICHO QUE O CSS SUSTENTA - Nenhuma classe nomeia procedimento. Não crie nenhuma. - .foto-slot existe para NÃO haver foto de paciente nem antes/depois, e a lista fechada de data-slot é o que impede um módulo de burlar isso. - .pendente existe para credencial não ser inventada. - .depo é espaço reservado: sem autorização escrita, não vira depoimento. - .faq responde dúvida GERAL — nunca orientação clínica individual. - o formulário não coleta dado clínico (ver FORMULÁRIO). COMO CONFERIR 390px (o body NÃO usa overflow-x:hidden de propósito: esconder estouro faz scrollWidth mentir). Duas medidas, nesta ordem: 1) a página não rola de lado: document.documentElement.scrollWidth === innerWidth 2) elemento a elemento — ignorando o que mora dentro de um .rolagem, que é um scroller próprio: lá dentro a tabela larga PODE passar da viewport, é justamente o que impede a página de estourar. [...document.querySelectorAll('body *')].filter(e=>{const r=e.getBoundingClientRect(); return (r.right > innerWidth + .5 || r.left < -.5) && !e.closest('.rolagem')}) .map(e=>e.className) ========================================================================== */ /* ========================================================================= 1. TOKENS ========================================================================= */ :root{ /* --- cor: papel ------------------------------------------------------ */ --papel: #f7f3ec; /* fundo principal, off-white quente */ --papel-2: #f0e9de; /* superfície secundária */ --papel-3: #e7dece; /* superfície terciária / chapado leve */ --carta: #fffdf9; /* "papel branco" de cartão */ --carvao: #191512; /* superfície escura */ --carvao-2: #241d18; /* --- cor: tinta ------------------------------------------------------- Contraste medido contra a superfície clara MAIS FECHADA do sistema inteiro: #ded3c1, que é o --papel-3 de dentro de .fundo-2 (não o #e7dece do :root). Ver o bloco COR do contrato. */ --tinta: #191512; /* texto principal (12.3:1) */ --tinta-2: #4e4640; /* texto secundário ( 6.2:1) */ --tinta-3: #605850; /* meta / miúdo ( 4.7:1) */ /* --- cor: bronze ----------------------------------------------------- */ --bronze: #745429; /* bronze de TEXTO ( 4.7:1) */ --bronze-vivo: #866438; /* traço, foco, texto ≥24px ( 3.65:1) */ --bronze-claro: #c0a074; /* ORNAMENTO: hairline, gradiente ( 1.7:1) */ --bronze-luz: #dcc298; /* bronze sobre fundo escuro (10.6:1) */ /* --- cor: linha ------------------------------------------------------ */ --linha: #ddd3c5; --linha-suave: #eae2d6; --linha-bronze: #d3bd9d; /* --- cor: erro (formulário) ------------------------------------------ */ --erro: #8f2d1f; /* 5.5:1 no pior papel */ --erro-fundo: #f6e6e1; /* --- tipografia ------------------------------------------------------ */ --display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --corpo: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --t-display: clamp(2.85rem, 1.85rem + 4.8vw, 6.2rem); --t-1: clamp(2.45rem, 1.7rem + 3.6vw, 4.6rem); --t-2: clamp(1.95rem, 1.5rem + 2.2vw, 3.4rem); --t-3: clamp(1.22rem, 1.12rem + .5vw, 1.6rem); --t-4: clamp(1.05rem, 1rem + .28vw, 1.22rem); --t-lead: clamp(1.06rem, 1rem + .42vw, 1.28rem); --t-corpo: clamp(1rem, .975rem + .12vw, 1.075rem); --t-pequeno: .9rem; --t-micro: .8rem; --t-olho: .69rem; --t-rotulo: .7rem; /* PISO de rótulo visível ao paciente (11.2px). Nada de interface abaixo disso — ver contrato. */ --entre-olho: .26em; /* entreletras do kicker */ --entre-btn: .15em; /* --- espaço (escala; documentada no bloco ESPAÇO do contrato) --------- */ --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --goteira: clamp(1.25rem, 5vw, 3rem); /* margem lateral */ --secao-y: clamp(3.75rem, 8.5vw, 8rem); /* respiro vertical da seção */ --medida: 76rem; /* largura do container */ --medida-texto: 62ch; --altura-topo: 4.25rem; /* + 1px de hairline = 69px de cabeçalho real */ /* --- sombra (impresso: quase nada) ----------------------------------- */ --sombra-1: 0 1px 2px rgba(25,21,18,.05); --sombra-2: 0 14px 30px -22px rgba(25,21,18,.35); --curva: cubic-bezier(.2,.7,.3,1); } /* superfície secundária — só troca o papel (os três tons + o cartão). O --papel-3 daqui, #ded3c1, é a superfície clara mais fechada do sistema: é contra ELE que os contrastes do contrato foram medidos. */ .fundo-2{ --papel: #f0e9de; --papel-2: #e7dece; --papel-3: #ded3c1; --carta: #fbf7f0; background: var(--papel); color: var(--tinta); } /* superfície escura — re-mapeia os tokens: todo componente dentro já inverte */ .escuro{ --papel: var(--carvao); --papel-2: var(--carvao-2); --papel-3: #2e2620; --carta: var(--carvao-2); --tinta: #f6f1e9; --tinta-2: #c6bbae; --tinta-3: #9d9285; --bronze: var(--bronze-luz); --bronze-vivo: var(--bronze-luz); --bronze-claro: #a98d63; --linha: #3a322b; --linha-suave: #2c251f; --linha-bronze: #4d4034; --erro: #e79b86; --erro-fundo: #3a231d; background: var(--papel); color: var(--tinta); } /* ========================================================================= 2. RESET E BASE ========================================================================= */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--altura-topo) + 1rem); } body{ background:var(--papel); color:var(--tinta); font-family:var(--corpo); font-size:var(--t-corpo); font-weight:400; line-height:1.62; letter-spacing:.002em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background-image:radial-gradient(ellipse 95% 55% at 82% -12%, rgba(134,100,56,.10), transparent 62%); background-attachment:fixed; } /* sem overflow-x:hidden aqui de propósito: ele esconderia estouro em vez de impedir, e faria scrollWidth mentir. O estouro é impedido na estrutura (.env com width:min(), min-width:0 nos filhos de grid, mídia com max-width). */ /* grão de papel — o que separa "tela" de "impresso". Uma camada, sem custo. z-index:1 e NENHUM container de conteúdo acima disso: o grão tem de cair sobre .card, .post, .depo e .foto-slot, não só sobre a goteira. Só as camadas de chrome (cabeçalho 60, gaveta 55, banner 70, .pular 80) passam por cima — elas não são papel. */ body::before{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.038; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)'/%3E%3C/svg%3E"); } body.travado{ overflow:hidden } /* iframe entra aqui: sem ele um embed de 640px (mapa, reel) estoura os 390px. height:auto não serve para iframe (colapsaria para os 150px de default) — a altura dele é resolvida pela caixa .embed, seção 3. */ img,svg,video{ display:block; max-width:100%; height:auto } iframe{ display:block; max-width:100%; border:0 } /* link de navegação herda; link de PROSA sublinha (seção 4, "links de leitura") */ a{ color:inherit; text-decoration:none } button,input,select,textarea{ font:inherit; color:inherit } button{ background:none; border:0; cursor:pointer } ul,ol{ list-style:none } /* devolvido dentro de .texto */ :where(main,section,article,figure){ min-width:0 } ::selection{ background:var(--bronze-claro); color:var(--carvao) } :focus-visible{ outline:2px solid var(--bronze-vivo); outline-offset:3px; border-radius:1px; } /* ========================================================================= 3. LAYOUT ========================================================================= */ /* sem z-index aqui de propósito: o container não precisa de camada (o estouro é impedido por width:min() e por min-width:0 nos filhos de grid), e um z-index acima de 1 tiraria o grão de papel de todas as superfícies. */ .env{ width:min(100% - (var(--goteira) * 2), var(--medida)); margin-inline:auto; position:relative; } .env--estreito{ --medida:58rem } .env--largo{ --medida:86rem } .secao{ padding-block:var(--secao-y); scroll-margin-top:var(--altura-topo); position:relative; } .secao--curta{ padding-block:calc(var(--secao-y) * .62) } /* Primeira seção da página. O cabeçalho é fixo e sai do fluxo: em 390px o respiro da seção (60px) é MENOR que o cabeçalho (69px) e a abertura nasceria por baixo dele. Aqui o respiro soma a altura do topo. */ .secao--abertura{ padding-top:calc(var(--altura-topo) + var(--secao-y)) } .grade{ display:grid; gap:var(--e-6) } .grade--apertada{ gap:var(--e-4) } .grade--solta{ gap:var(--e-7) } @media (min-width:48em){ .grade--2{ grid-template-columns:repeat(2,minmax(0,1fr)) } .grade--3{ grid-template-columns:repeat(2,minmax(0,1fr)) } .grade--4{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (min-width:62em){ .grade--3{ grid-template-columns:repeat(3,minmax(0,1fr)) } .grade--4{ grid-template-columns:repeat(4,minmax(0,1fr)) } .grade--partida{ grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,5vw,5rem) } .grade--partida-inversa{ grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,5vw,5rem) } .grade--partida, .grade--partida-inversa{ align-items:center } } .medida{ max-width:var(--medida-texto) } .centro{ text-align:center; margin-inline:auto } /* conteúdo largo que não encolhe (tabela, bloco de código): rola dentro da própria caixa em vez de empurrar a página. */ .rolagem{ overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; max-width:100%; } /* embed: iframe não tem proporção intrínseca; a caixa dá a proporção e ele preenche. Sem isto um embed de 640px estoura 390px de viewport. */ .embed{ position:relative; aspect-ratio:16/9; background:var(--papel-3); border:1px solid var(--linha); overflow:hidden; } .embed--quadrado{ aspect-ratio:1/1 } .embed > iframe,.embed > video{ width:100%; height:100%; border:0 } /* ========================================================================= 4. TIPOGRAFIA ========================================================================= */ h1,h2,h3,h4,.titulo-display{ font-family:var(--display); font-optical-sizing:auto; font-variation-settings:'SOFT' 14, 'WONK' 1; font-weight:300; line-height:1.07; letter-spacing:-.02em; text-wrap:balance; overflow-wrap:break-word; } .titulo-display{ font-size:var(--t-display) } h1{ font-size:var(--t-1) } h2{ font-size:var(--t-2) } h3{ font-size:var(--t-3); line-height:1.22; letter-spacing:-.012em } h4{ font-size:var(--t-4); line-height:1.3; letter-spacing:-.008em } /* itálico REAL da Fraunces (eixo ital pedido no ), não oblíqua sintética */ h1 em,h2 em,.titulo-display em{ font-style:italic; color:var(--bronze); font-synthesis-style:none; font-variation-settings:'SOFT' 30, 'WONK' 1; } .olho{ display:flex; align-items:baseline; gap:.85rem; /* o traço senta na 1ª linha, inclusive quando o kicker quebra em duas em 390px */ font-family:var(--corpo); font-size:var(--t-olho); font-weight:600; letter-spacing:var(--entre-olho); text-transform:uppercase; color:var(--bronze); line-height:1.4; } .olho::before{ content:""; flex:0 0 auto; width:2rem; height:1px; background:var(--bronze-claro); } .olho--sem-traco::before{ display:none } .num-secao{ font-family:var(--display); font-size:var(--t-micro); letter-spacing:.12em; color:var(--tinta-3); font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; } .cabeca{ display:flex; flex-direction:column; gap:var(--e-3); padding-bottom:var(--e-5); margin-bottom:var(--e-7); border-bottom:1px solid var(--linha); } .cabeca > :first-child{ display:block } /* o ritmo vem das regras de irmão abaixo */ @media (min-width:48em){ .cabeca{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:var(--e-6); padding-bottom:var(--e-6); } } .lead{ font-size:var(--t-lead); line-height:1.55; color:var(--tinta-2); max-width:46ch; text-wrap:pretty; } /* RITMO VERTICAL DO BLOCO DE COPY — sai certo sem wrapper e sem style inline: o módulo escreve .olho + h1 + .lead + .acoes e o espaçamento já vem pronto. */ .olho + h1,.olho + h2,.olho + h3,.olho + .titulo-display{ margin-top:var(--e-4) } h1 + .lead,h2 + .lead,h3 + .lead,.titulo-display + .lead, h1 + .texto,h2 + .texto,h3 + .texto,.titulo-display + .texto{ margin-top:var(--e-5) } .lead + .texto,.texto + .lead{ margin-top:var(--e-5) } .lead + .dados,.texto + .dados, .lead + .faixa-numeros,.texto + .faixa-numeros, .lead + .faq,.texto + .faq{ margin-top:var(--e-6) } /* --- bloco de prosa: parágrafo, título, lista, tabela, citação, filete e link — tudo sem classe extra. É o container da página de privacidade. -- */ .texto{ color:var(--tinta-2); max-width:var(--medida-texto); text-wrap:pretty } .texto p + p{ margin-top:var(--e-4) } .texto strong{ font-weight:600; color:var(--tinta) } .texto h2{ margin:var(--e-7) 0 var(--e-3); color:var(--tinta) } .texto h3{ margin:var(--e-6) 0 var(--e-2); color:var(--tinta) } .texto h4{ margin:var(--e-5) 0 var(--e-2); color:var(--tinta) } /* o reset global tira marcador e recuo de toda lista; aqui eles voltam — é o que torna possível a página de privacidade que o .banner-lgpd linka */ .texto ul,.texto ol{ margin-block:var(--e-4); padding-left:1.5rem } .texto ul{ list-style:disc } .texto ol{ list-style:decimal } .texto li + li{ margin-top:var(--e-2) } .texto li::marker{ color:var(--bronze) } .texto ul ul,.texto ul ol,.texto ol ul,.texto ol ol{ margin-block:var(--e-2) } .texto ul ul{ list-style:circle } /* tabela — a de cookies da página de privacidade (padrão adson-tracking-stack) é o caso real. Vai SEMPRE dentro de
: é lá que ela ganha a largura mínima legível sem estourar 390px. */ .texto .rolagem{ margin-block:var(--e-5) } .texto table{ width:100%; border-collapse:collapse; font-size:var(--t-pequeno); line-height:1.5; text-align:left; } .texto .rolagem table{ min-width:32rem } .texto th,.texto td{ padding:var(--e-3) var(--e-4); border-bottom:1px solid var(--linha); vertical-align:top; } .texto th:first-child,.texto td:first-child{ padding-left:0 } .texto th{ font-family:var(--corpo); font-weight:600; font-size:var(--t-rotulo); letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-3); border-bottom-color:var(--tinta-3); white-space:nowrap; } .texto tbody tr:last-child td{ border-bottom:0 } .texto caption{ caption-side:bottom; padding-top:var(--e-3); font-size:var(--t-micro); color:var(--tinta-3); text-align:left; } .texto blockquote{ margin-block:var(--e-5); padding:var(--e-2) 0 var(--e-2) var(--e-5); border-left:2px solid var(--bronze-vivo); font-family:var(--display); font-optical-sizing:auto; font-variation-settings:'SOFT' 20, 'WONK' 1; font-weight:300; font-size:var(--t-3); line-height:1.32; letter-spacing:-.01em; color:var(--tinta); } .texto blockquote p + p{ margin-top:var(--e-3) } .texto blockquote cite{ display:block; margin-top:var(--e-3); font-family:var(--corpo); font-style:normal; font-size:var(--t-rotulo); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3); } /* o
nativo sai como filete inset #808080 — cinza que não existe nesta paleta. Aqui ele vira o mesmo filete de todo o resto do sistema. */ .texto hr{ border:0; height:1px; background:var(--linha); margin-block:var(--e-6); } .texto > :first-child{ margin-top:0 } .texto > :last-child{ margin-bottom:0 } .miudo{ font-size:var(--t-micro); line-height:1.55; color:var(--tinta-3); max-width:58ch; } /* links de leitura — dentro de texto corrido o link precisa se distinguir do parágrafo por mais do que hover (que não existe no toque): cor + sublinhado. :not(.btn) para um botão colocado dentro de prosa continuar sendo botão. .post-data a é o "Ver no Instagram" do cartão de publicação. */ .texto a:not(.btn),.miudo a:not(.btn),.lead a:not(.btn), .rodape-grade a:not(.btn),.card p a:not(.btn),.faq a:not(.btn), .post-data a:not(.btn){ color:var(--bronze); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; transition:color .25s var(--curva), text-decoration-thickness .2s; } .texto a:not(.btn):hover,.miudo a:not(.btn):hover,.lead a:not(.btn):hover, .rodape-grade a:not(.btn):hover,.card p a:not(.btn):hover,.faq a:not(.btn):hover, .post-data a:not(.btn):hover{ color:var(--tinta); text-decoration-thickness:2px; } .sem-quebra{ white-space:nowrap } /* ========================================================================= 5. BOTÕES ========================================================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:2.9rem; /* 46px */ padding:.85rem 1.85rem; font-family:var(--corpo); font-size:var(--t-micro); font-weight:500; letter-spacing:var(--entre-btn); text-transform:uppercase; color:var(--tinta); background:transparent; border:1px solid var(--tinta); cursor:pointer; text-align:center; transition:background .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva), transform .25s var(--curva); } .btn:hover{ background:var(--tinta); color:var(--papel) } .btn:active{ transform:translateY(1px) } .btn--cheio{ background:var(--tinta); color:var(--papel) } .btn--cheio:hover{ background:var(--bronze); border-color:var(--bronze); color:var(--papel) } /* compacto, mas ainda 44px de alvo de toque */ .btn--min{ min-height:2.75rem; padding:.6rem 1.25rem; font-size:.72rem } .btn--largo{ width:100% } /* AUTOSSUFICIENTE: declara tudo o que a .btn daria, para `class="btn--texto"` e `class="btn btn--texto"` renderem exatamente igual. Sem isto, sozinho ele saía block, 16px, caixa baixa e com a seta colada na palavra. */ .btn--texto{ position:relative; display:inline-flex; align-items:center; justify-content:flex-start; gap:.6rem; width:auto; min-height:auto; padding:0 0 .3rem; border:0; border-bottom:1px solid var(--linha-bronze); background:none; cursor:pointer; text-align:left; font-family:var(--corpo); font-size:var(--t-micro); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze); transition:color .3s var(--curva), border-color .3s var(--curva); } /* alvo de toque: a caixa visível tem ~25px; o pseudo leva a área clicável a ~45px sem deslocar nada (está fora do fluxo). ATENÇÃO: fora do fluxo do LAYOUT, mas dentro do hit-test — 10px acima e 10px abaixo. Dois .btn--texto vizinhos precisam de ≥24px de vão para as caixas não se sobreporem; é o que a regra de .acoes logo abaixo garante. */ .btn--texto::before{ content:""; position:absolute; inset:-10px -8px } .btn--texto::after{ content:"→"; transition:transform .3s var(--curva) } .btn--texto:hover{ background:none; color:var(--tinta); border-bottom-color:var(--tinta) } .btn--texto:hover::after{ transform:translateX(.3rem) } .acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-3); margin-top:var(--e-6) } /* vão maior quando há link-seta: a área de toque dele passa dos limites visíveis e a 12px as caixas invisíveis se sobreporiam (o elemento posterior no DOM roubaria o clique do anterior). 24px > 10px+10px. */ .acoes:has(.btn--texto){ gap:var(--e-5) } /* até 480px o CTA de caixa ocupa a linha inteira: alvo de toque grande e sem rótulo quebrado. O .btn--texto fica do tamanho do texto — esticado, a seta ficaria a meia tela da palavra. */ @media (max-width:29.99em){ .acoes .btn:not(.btn--texto){ flex:1 0 100% } } /* ========================================================================= 5b. FORMULÁRIO Sem isto input/select/textarea saem com o widget nativo do Chrome (borda inset #767676, branco puro, 24-30px de altura) — abaixo dos 44px que o próprio sistema exige nos botões, e estranho a tudo o mais. ⚠ NICHO: nenhum campo pergunta procedimento, queixa ou dado clínico. ========================================================================= */ .formulario{ display:grid; gap:var(--e-5) } .campo{ display:grid; gap:var(--e-2) } .campo > label,.rotulo{ font-family:var(--corpo); font-weight:600; font-size:var(--t-rotulo); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3); } input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=submit],[type=button],[type=reset]), textarea,select{ width:100%; min-height:2.75rem; /* 44px, igual aos botões */ padding:.7rem .9rem; font-family:var(--corpo); font-size:var(--t-corpo); line-height:1.5; color:var(--tinta); background:var(--carta); border:1px solid var(--linha); border-radius:0; /* iOS arredonda por conta própria */ appearance:none; -webkit-appearance:none; transition:border-color .25s var(--curva), background .25s var(--curva); } textarea{ min-height:8rem; resize:vertical } /* a seta do select, desenhada (o appearance:none tirou a nativa) */ select{ padding-right:2.4rem; background-image: linear-gradient(45deg,transparent 50%,var(--bronze) 50%), linear-gradient(135deg,var(--bronze) 50%,transparent 50%); background-position:calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%; background-size:.35rem .35rem, .35rem .35rem; background-repeat:no-repeat; } ::placeholder{ color:var(--tinta-3); opacity:1 } input:hover:not(:disabled),textarea:hover:not(:disabled),select:hover:not(:disabled){ border-color:var(--linha-bronze); } input:focus,textarea:focus,select:focus{ border-color:var(--bronze-vivo); outline:none } /* o foco visível é o mesmo bronze do resto do sistema (:focus-visible global) */ input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:2px solid var(--bronze-vivo); outline-offset:2px; } input:disabled,textarea:disabled,select:disabled{ background:var(--papel-2); color:var(--tinta-3); cursor:not-allowed; } /* consentimento LGPD e afins. O quadrado vai a 1.5rem = 24px (mínimo de alvo do WCAG 2.5.8); o