/* ========================================================================== Aleksandra Brito — Psicóloga styles.css — tokens, layout, componentes Ver specs/design.md para a origem de cada decisão visual. ========================================================================== */ /* ---------- Tokens ---------- */ :root { /* Paleta — specs/design.md, tokens reais do sistema (decisão 6-R2, corrigida em 19/08/2026 pela decisão 6-R3 — ver memoria.md). */ --paper: #F8FAFC; --paper-deep: #F1F5F9; /* Corrigido em 19/08/2026 (6-R3): era #EFF6FF, um azul claro que eu tinha estimado. Inspecionando o /agendar ao vivo (localhost:5173), o tom claro real usado em fundo de opção selecionada e selo de etapa é um teal-menta, não azul. */ --teal-soft: #CCFBF1; --teal: #0F766E; --teal-deep: #134E4A; /* AVISO (item 18 da auditoria, 02/09/2026): --paper sobre --blue-accent mede ~3,3:1 (specs/design.md) — AA só pra texto grande/UI (≥18pt ou ≥14pt bold), NUNCA pra corpo de texto normal. Hoje só é usado como cor de --outline em :focus-visible (não é texto, é indicador de UI — regra diferente, 3:1 já é suficiente). Antes de usar essa cor como fundo de qualquer texto de corpo, recalcule o contraste. */ --blue-accent: #3B82F6; --ink: #1E293B; /* Escurecido de #64748B em 16/08/2026. O valor antigo dava 4,34:1 sobre --paper-deep e sobre as três superfícies — abaixo dos 4,5:1 que o AA exige para texto normal. Pior: eu tinha usado esse 4,34 como "teto seguro" ao calibrar as superfícies, ou seja, ancorei a paleta inteira num valor que já reprovava. Era essa a razão real de as seções parecerem todas iguais: as cores não podiam escurecer sem piorar um contraste que já estava ruim. Com o texto mais escuro, tudo destrava. */ --ink-soft: #52617A; /* Corrigido em 19/08/2026 (6-R3): era #E2E8F0 (estimado). O valor real do /agendar, lido ao vivo, é #E4E9F0 — diferença mínima, mas exata agora. */ --hairline: #E4E9F0; /* Arquitetura de superfícies (decisão 20) — tons derivados da própria paleta 6-R2, nunca importados de fora dela: --surface-warm aquece --paper na mesma luminosidade; --surface-sage e --surface-blue são --teal e --blue-accent levados a quase-neutro. Cada um foi medido pra nunca ficar abaixo do contraste que --paper-deep já tem hoje com --ink/--ink-soft — ver memoria.md, decisão 20. --surface-deep é o único "momento escuro" do site — ver comentário logo abaixo pra histórico da cor (decisão 6-R3, revertida em 21/08/2026). */ /* Revertidas em 16/08/2026: a tentativa de reforçar até Δ12–29 deixou o bege e o verde pesados demais ("ficou horrível"). Voltaram aos tons discretos. A diferenciação entre seções precisa vir de outro recurso, não de mais tinta — aguardando definição de direção com o usuário. */ --surface-warm: #F8F4ED; --surface-sage: #ECF7F4; --surface-blue: #F1F5FA; /* Revertido em 21/08/2026: a decisão 6-R3 (19/08) tinha trocado o "momento escuro" (rodapé + chamada final) de --teal-deep pra azul-marinho (#0F2942), pra bater com o fundo escuro real do /agendar naquele momento. Só que depois disso o /agendar mudou de fundo escuro pra fundo claro, e o painel administrativo virou violeta — a âncora de fidelidade que justificava o azul deixou de existir. Resultado prático que o usuário notou sozinho: o site ficava verde em toda parte e virava azul/roxo só no rodapé/chamada final, sem motivo visível pra quem olha a página isolada. --surface-deep volta a apontar pro --teal-deep — o "momento escuro" do site é consistente com o resto da própria página, não com um sistema externo que pode mudar de novo. Token --navy-deep removido (ficaria órfão, sem nenhum outro uso no arquivo). */ --surface-deep: var(--teal-deep); /* Tipografia — trocada em 10/09/2026 (ver memoria.md e specs/design.md). Fraunces/Inter saíram por pedido direto do usuário: Inter em especial é a fonte-assinatura de site genérico feito com IA/SaaS template: a mais usada nesse tipo de projeto, e por isso a mais reconhecível como tal. Lora (serifada, calorosa) + Lato (sans humanista) é uma combinação comum em sites reais de psicólogos/terapeutas — transmite acolhimento sem parecer painel de produto. */ --font-display: 'Lora', Georgia, serif; --font-text: 'Lato', system-ui, -apple-system, sans-serif; /* Escala revista 16/08/2026: o display chegava a 60px e o corpo a 16px — tecnicamente dentro da spec, mas sem a presença que uma página editorial pede. Display vai a 72px, H2 a 52px e o corpo a 17px (o mínimo de 16px de specs/site.md continua respeitado com folga, e 17px lê melhor pro público idoso). */ --size-display: clamp(2.75rem, 5.6vw, 4.5rem); /* Teto reduzido de 3.25rem (52px) para 2.75rem (44px) ao adotar seções de uma tela: um H2 de 52px ocupa 2 linhas em coluna estreita, e o cabeçalho de seção passava de 230px. 44px continua dentro da faixa editorial e devolve ~20px por seção. */ --size-h2: clamp(1.875rem, 3.2vw, 2.75rem); --size-h3: clamp(1.3125rem, 2vw, 1.625rem); --size-lead: 1.1875rem; --size-body: 1.0625rem; --size-support: 0.9375rem; --size-label: 0.75rem; /* Dois degraus formalizados em 06/09/2026. Não são invenção: já existiam espalhados como valor solto no arquivo — medido, o site usava 13px e 14px em 8 regras e 16px nos botões, todos fora da escala documentada. Isso é o tipo de inconsistência que faz uma página "não parecer premium" sem que se saiba apontar o porquê. Em vez de forçar esses usos nos níveis vizinhos (o que mudaria composições já calibradas), os dois degraus viram token — os 13px foram unificados em 14px, então a escala ganha 2 níveis e perde 3 valores avulsos. --size-caption: legenda/etiqueta secundária, acima do piso de 12px. --size-ui: texto de controle (botão), onde 16px é padrão consolidado. */ --size-caption: 0.875rem; --size-ui: 1rem; /* Espaçamento — base 4px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --section-gap: clamp(72px, 8vw, 112px); --content-max: 1160px; --measure: 62ch; --pad-inline: 24px; /* Raios */ --radius-button: 999px; --radius-card: 20px; --radius-image: 16px; --radius-field: 12px; /* ---------- Sistema de movimento (briefing item 49) ---------- Três curvas e três velocidades, usadas em todo o site. Nenhum cubic-bezier solto espalhado pelo CSS. */ --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); /* entradas, decisivo */ --ease-soft: cubic-bezier(0.33, 0.9, 0.25, 1); /* respiração, orgânico */ --motion-fast: 200ms; /* microinteração: hover, foco */ --motion-normal: 320ms; /* elemento de interface: acordeão, header */ /* Aliases mantidos: o CSS antigo referencia estes nomes. */ --ease-out: var(--ease-emphasized); --dur-fast: var(--motion-fast); --dur-medium: 250ms; --dur-entrance: 500ms; /* Elevação — decisão 19 liberou sombra difusa em dose pequena. */ --ring-hairline: 0 1px 0 var(--hairline); --shadow-soft: 0 2px 8px rgba(30, 41, 59, 0.04), 0 12px 32px rgba(30, 41, 59, 0.06); --shadow-lift: 0 4px 12px rgba(30, 41, 59, 0.06), 0 20px 48px rgba(30, 41, 59, 0.10); /* Sombra pesada — decisão do usuário em 19/08/2026 derruba "sombra só em dose pequena" para os cartões que já existiam (location--online, o novo mapa incorporado, o botão de WhatsApp). Usar só nesses casos pontuais, não espalhar pela página — specs/design.md continua reservando sombra difusa para elevação discreta em todo o resto. */ --shadow-strong: 0 8px 24px rgba(30, 41, 59, 0.12), 0 32px 64px rgba(30, 41, 59, 0.18); /* Camadas */ --z-header: 50; --z-rail: 40; --z-progress: 60; --z-mobile-menu: 55; --z-sticky-cta: 45; } @media (min-width: 768px) { :root { --pad-inline: 48px; } } @media (min-width: 1024px) { :root { --pad-inline: 64px; } } /* ---------- Telas baixas: escala reduzida para caber ---------- Num notebook de 1366×768 sobram apenas ~696px de área visível depois do header. Cinco seções não fechavam nessa altura. Em vez de deixá-las transbordar, a escala inteira encolhe: tipografia, vãos e paddings. O corpo continua em 16px — o piso que specs/site.md fixa e que importa para o público idoso. Só se aplica no desktop; no celular a altura da tela é outro problema (ver comentário em .section). */ @media (min-width: 1024px) and (max-height: 850px) { :root { --size-h2: clamp(1.625rem, 2.4vw, 2.125rem); --size-h3: 1.1875rem; --size-lead: 1.0625rem; --size-body: 1rem; --section-gap: 72px; } } /* ---------- Fontes locais ---------- */ /* Fraunces/Inter substituídas por Lora/Lato em 10/09/2026 — ver memoria.md. Arquivos antigos (fraunces-variable.woff2, inter-variable.woff2) continuam na pasta fonts/, só sem uso aqui. */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/lora-variable.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('fonts/lora-italic-variable.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lato-regular.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/lato-medium.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/lato-semibold.woff2') format('woff2'); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* ---------- scroll-padding-top ---------- Reserva a altura do header (72px rolado) na hora de pular para uma âncora (clique na nav, na trilha lateral, no rodapé): a seção some LOGO ABAIXO do header em vez de por baixo dele. Continua valendo mesmo sem encaixe automático (ver comentário em `.section` sobre o `scroll-snap-type` removido). */ scroll-padding-top: 72px; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: var(--size-body); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Some o flash cinza padrão do navegador ao tocar num link/botão no celular — o site já tem seus próprios estados de hover/foco/toque. */ -webkit-tap-highlight-color: transparent; } /* Tira o atraso de ~300ms que o navegador espera antes de registrar um toque, pra checar se é o primeiro de um duplo-toque de zoom. Aplicado só nos elementos realmente interativos, não na página inteira — não queremos desativar o double-tap-to-zoom em texto de leitura. */ a, button, summary, .whatsapp-float, .to-top { touch-action: manipulation; } /* ---------- Grão ambiental (briefing item 23) ---------- Ruído SVG em opacidade baixíssima. Fixo e com pointer-events:none, então não repinta durante a rolagem. O visitante não deve notar que existe — só sentir que a superfície tem matéria, em vez de ser um branco chapado. */ body::after { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; height: auto; /* preserva a proporção real — nunca corta */ display: block; } /* Imagem decorativa que falhou ao carregar (classe posta pelo main.js). visibility, não display: o espaço reservado continua ocupado, então esconder o ícone de imagem quebrada não provoca salto de layout. */ img.is-broken { visibility: hidden; } a { color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } address { font-style: normal; } p { margin: 0; } /* Reforço defensivo: o navegador já esconde nativamente o conteúdo de um
fechado, mas isso depende de suporte correto ao elemento — aqui explícito em CSS pra não depender só do comportamento nativo, crítico no .mobile-menu__panel, que é tela cheia e position:fixed. */ details:not([open]) > *:not(summary) { display: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.18; margin: 0; color: var(--ink); letter-spacing: -0.015em; /* Evita "viúva" — uma palavra sozinha na última linha de um título serifado grande. Sem suporte, cai em quebra normal, sem efeito colateral. */ text-wrap: balance; } h1 { font-size: var(--size-display); /* Era 300 (peso mais fino do Fraunces). Lora, a fonte trocada em 10/09/2026, só cobre 400–700 como variável — 400 é o peso mais próximo disponível. */ font-weight: 400; line-height: 1.06; letter-spacing: -0.03em; } h2 { font-size: var(--size-h2); letter-spacing: -0.02em; } h3 { font-size: var(--size-h3); } .lead { font-size: var(--size-lead); line-height: 1.65; color: var(--ink-soft); } /* ===== Acabamento de composição (08/09/2026) ===== Os títulos já se protegiam de "viúva" com `text-wrap: balance` (regra em h1–h4, acima). O corpo de texto não tinha nada, e a medição ao vivo em 1419px achou 10 blocos terminando com uma palavra sozinha — em alguns, a última linha ocupava 9% da largura do bloco. Uma palavra solta fechando um parágrafo é o detalhe que faz um texto bem escrito parecer mal composto. Dois recursos diferentes, para dois problemas diferentes — não é o mesmo valor em todo lugar: - `balance` iguala o comprimento das linhas. Serve para texto CURTO e em destaque (2 a 4 linhas), onde o bloco é lido como uma unidade visual. Em texto longo o navegador ignora (o limite prático é ~6 linhas) e ainda custa caro para calcular; - `pretty` mantém a quebra normal e só evita que a ÚLTIMA linha fique órfã. É o certo para corpo de texto, que é a maioria da página. Sem suporte no navegador, os dois caem em quebra normal — o texto continua correto, só perde o refinamento. Zero risco de layout. */ p, li, dd, dt, figcaption, blockquote p, .about__bio p, .session-expect p { text-wrap: pretty; } /* Blocos curtos de destaque: a tagline do hero e os leads de seção são lidos como uma unidade, então compensa igualar as linhas em vez de só proteger a última. A tagline do hero era o caso mais visível do site — duas linhas com "começar." sozinho na segunda. */ .lead, .hero__tagline, .hero__subtitle, .about__quote p, .section-head p { text-wrap: balance; } .measure { max-width: var(--measure); } /* Etiqueta de seção, com filete de acento */ .label { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-text); font-size: var(--size-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); font-weight: 600; } .label::before { content: ''; width: 24px; height: 1px; background: var(--teal); opacity: 0.5; flex-shrink: 0; } /* Variação sutil só na seção judicial (06/09/2026, revisão de polimento): o rótulo de abertura era idêntico nas 9 seções, sem distinguir a única com público e registro diferentes (técnico/jurídico, não quem procura terapia). Troca só a cor, de --teal (quente, presente em toda seção "de acolhimento") para --ink-soft (neutro) — mesmo token já usado em texto de apoio no resto do site, nenhuma cor nova entra na paleta. */ .judicial .label { color: var(--ink-soft); } .judicial .label::before { background: var(--ink-soft); } /* ---------- Acessibilidade ---------- */ :focus-visible { outline: 2px solid var(--blue-accent); outline-offset: 3px; border-radius: 6px; } /* --blue-accent contra --surface-deep mede 2.58:1 — abaixo do mínimo de 3:1 que o WCAG 2.2 exige pra indicador não-textual (SC 1.4.11). Não dá pra ver isso rolando o mouse; só aparece navegando por teclado no bloco escuro (chamada final + rodapé). --paper contra o mesmo fundo mede 9+:1 — troca só nesses dois blocos, sem mexer no resto do site. */ .cta-band :focus-visible, .site-footer :focus-visible { outline-color: var(--paper); } .skip-link { position: absolute; left: var(--space-4); top: -80px; background: var(--teal); color: var(--paper); padding: var(--space-3) var(--space-6); border-radius: var(--radius-field); z-index: 100; text-decoration: none; transition: top var(--dur-fast) ease; } .skip-link:focus { top: var(--space-4); } /* ---------- Progresso de leitura ---------- */ .progress-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--teal); z-index: var(--z-progress); transition: width 80ms linear; } /* ---------- Navegação lateral por seção (desktop) ---------- */ .rail-nav { display: none; position: fixed; right: var(--space-6); top: 50%; transform: translateY(-50%); z-index: var(--z-rail); flex-direction: column; align-items: center; gap: var(--space-4); } @media (min-width: 1280px) { .rail-nav { display: flex; } } /* trilho apagado, sempre visível — mesmo par trilho/linha de .steps, agora medindo a página inteira em vez de uma seção só */ .rail-nav::before { content: ''; position: absolute; left: 50%; top: 22px; bottom: 22px; width: 1px; background: var(--hairline); transform: translateX(-50%); z-index: 0; } /* linha que cresce com a rolagem da página inteira — transform em vez de height para não custar layout a cada frame de scroll */ .rail-nav__progress { position: absolute; left: 50%; top: 22px; bottom: 22px; width: 1px; background: var(--teal); transform: translateX(-50%) scaleY(var(--rail-draw, 0)); transform-origin: top center; z-index: 0; will-change: transform; } @media (prefers-reduced-motion: reduce) { .rail-nav__progress { transform: translateX(-50%) scaleY(1); } } .rail-nav__dot { position: relative; z-index: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .rail-nav__dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--hairline); transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease; } .rail-nav__dot:hover::before { background: var(--teal-deep); } .rail-nav__dot.is-active::before { background: var(--teal); transform: scale(1.4); } .rail-nav__label { position: absolute; right: calc(100% + var(--space-3)); top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--paper); font-size: var(--size-label); font-weight: 500; padding: var(--space-2) var(--space-4); border-radius: var(--radius-field); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) ease; } .rail-nav__dot:hover .rail-nav__label { opacity: 1; } /* Teste de excesso: a barra de topo e a trilha lateral indicam a mesma coisa. A partir de 1280px a trilha assume (ela navega, não só informa), então a barra sai. Cada largura tem exatamente um indicador. */ @media (min-width: 1280px) { .progress-bar { display: none; } } @media (prefers-reduced-motion: reduce) { .progress-bar { display: none; } } /* ---------- Layout ---------- */ .container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--pad-inline); } .container--narrow { max-width: 860px; } /* ---------- Cada seção ocupa a tela inteira ---------- Decisão de 16/08/2026: o usuário queria "cada página separada". A decisão 2 (landing única, sem rotas) foi mantida — em vez de criar arquivos separados, cada seção passa a ocupar no mínimo a altura da tela, com o conteúdo centrado verticalmente. Dá a sensação de virar de página sem inserir um clique entre cada etapa do funil. min-height, nunca height: seções com muito conteúdo (Onde atendo tem mais de 3 telas) simplesmente crescem. E como o contêiner cresce junto, o justify-content: center deixa de ter espaço livre para distribuir — por isso não existe o risco clássico de o topo do conteúdo ficar inalcançável quando ele é mais alto que a tela. svh (small viewport height) em vez de vh: no celular, vh considera a tela sem a barra do navegador, o que faz a seção "vazar" para além do que se vê. Com vh como fallback para navegadores antigos. */ .section { /* 72px descontados = altura do header quando rolado. Assim a seção encaixada preenche exatamente a área VISÍVEL, e não a janela inteira (dos quais o header cobre os primeiros 72px). */ min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); /* `scroll-snap-align: start` removido em 06/09/2026 — o encaixe automático (`scroll-snap-type` no , ver comentário lá) puxava a rolagem de volta pro início da seção mesmo numa rolagem pequena, porque cada seção tem só uma tela de altura: qualquer scroll curto ainda ficava "perto o suficiente" do topo pro navegador escolher esse como ponto de encaixe. Sem o container ter scroll-snap-type, esta propriedade não faz mais nada — removida para não confundir. */ display: flex; flex-direction: column; justify-content: center; /* O topo nunca é menor que 88px: com o header rolado ocupando 72px, uma folga menor deixaria a etiqueta da seção passar por baixo dele quando o visitante para a rolagem fora do ponto de encaixe. Embaixo, a folga é menor de propósito — numa seção de tela cheia com conteúdo centrado, o espaço vazio já vem da própria altura, e cada pixel de padding aqui empurra conteúdo para fora da tela. */ padding-top: max(calc(var(--section-gap) / 2), 80px); padding-bottom: var(--space-8); /* O header condensado tem 72px. Com 80px de margem sobravam 8px entre ele e o topo da seção — funcionava, mas ficava apertado. 96px dá 24px de respiro, alinhado com a escala de espaçamento. */ scroll-margin-top: 96px; } .section--alt { background: var(--paper-deep); } /* Capítulos visuais (decisão 20) — cada superfície tem uma função narrativa, nunca decorativa: warm em "Sobre" (proximidade, casa bem com retrato), blue em "Como funciona" (o processo, tranquilidade), sage em "Onde atendo" (conecta com o verde das plantas nas fotos dos consultórios). A cor sozinha ficou sutil demais pra marcar a virada de capítulo (usuário reportou "as seções não se diferenciam" com print real do site). Em vez de arriscar mais saturação — perto do teto de contraste seguro pra --ink-soft nessas superfícies — reforcei a fronteira com um filete no topo: o mesmo recurso de "linha fina" que já é a assinatura visual do site inteiro (nav, listas, acordeão), não um elemento novo. */ /* Filete de topo = marcador de capítulo, em TODA seção clara. Medição que motivou isso: das 8 fronteiras entre seções, 4 tinham diferença de cor de no máximo 7 em 255 — imperceptível. Em três delas não havia filete nenhum, então nada separava uma seção da seguinte: "como funciona → atendimento", "atendimento → judicial" e "informações → dúvidas" simplesmente escorriam umas nas outras. A decisão 20-R já tinha criado esse filete para as três superfícies coloridas; o erro foi não aplicá-lo às demais. Agora é sistemático: toda seção clara abre com a mesma linha, então a fronteira nunca depende só da cor. A chamada final fica de fora — ela é o bloco escuro, e ali a virada é óbvia. */ .section:not(.cta-band) { position: relative; } .section:not(.cta-band)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--teal); opacity: 0.18; pointer-events: none; } /* Uma fronteira, um marcador. Três seções já terminam com o divisor curvo em SVG (.section--divided) — nessas, a seção seguinte não desenha o filete, senão a mesma virada teria curva E linha, que é o "excesso de divisores" que o próprio briefing pede pra evitar. */ .section--divided + .section::before { display: none; } .section--warm { background: var(--surface-warm); } .section--blue { background: var(--surface-blue); } .section--sage { background: var(--surface-sage); } /* Compressão para caber em uma tela: o cabeçalho de seção se repete em todas elas, então cada pixel economizado aqui vale 9 vezes. */ .section-head { margin-bottom: var(--space-6); } .section-head .label { margin-bottom: var(--space-3); } .section-head h2 { max-width: 22ch; } /* 18ch forçava quebra desnecessária */ .section-head p { margin-top: var(--space-3); max-width: var(--measure); } /* Split: texto + mídia */ .split { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; } @media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); } /* Assimetria controlada (itens 05 e 36 do briefing): colunas iguais em toda seção leem como tabela. Cada variante desloca o peso pro lado que o conteúdo pede — texto longo ganha largura, foto ganha presença. */ .split--media-lead { grid-template-columns: 1.12fr 0.88fr; } /* A mídia vai pra DIREITA mantendo a ordem do HTML (imagem antes do texto), que é a ordem certa no mobile. Antes existia um .split--media-first que não invertia nada — a mídia já era o primeiro filho, então `order: -1` a deixava exatamente onde já estava, e os dois consultórios apareciam com a foto do mesmo lado. */ .split--media-last .media-stack, .split--media-last .split__media { order: 1; } .split--media-last { grid-template-columns: 0.88fr 1.12fr; } } .split__media { position: relative; overflow: hidden; border-radius: var(--radius-image); } .split__media img { width: 100%; border-radius: var(--radius-image); transition: transform 700ms var(--ease-out); } /* Selo de transparência sobre a foto ilustrativa de Suzano — mesma necessidade do .hero__portrait-tag (rótulo pequeno, alto contraste), mas aqui por cima da imagem (fundo escuro translúcido), não abaixo dela, porque a foto é larga, não um retrato quadrado. */ .split__media-tag { position: absolute; z-index: 1; left: var(--space-4); bottom: var(--space-4); background: rgba(15, 23, 42, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--paper); border-radius: var(--radius-button); padding: var(--space-1) var(--space-4); font-size: var(--size-label); letter-spacing: 0.04em; font-weight: 500; } /* Hover discreto — só zoom suave na foto, nada de elevação/escala no card inteiro (isso specs/design.md reserva só pra botão, e nem lá é permitido escala). */ @media (hover: hover) { .split__media:hover img { transform: scale(1.035); } } /* Detalhe sobreposto — uma segunda fotografia real do mesmo consultório (ângulo diferente da imagem principal), não um recorte artificial da mesma foto. Fica num wrapper próprio (.media-stack), não dentro de .split__media, pra não herdar o hover de zoom da foto grande. */ .media-stack { position: relative; } /* Posicionado por dentro das bordas da foto grande (nunca negativo) — overlap visual sem nenhum risco de vazar a largura do container. */ .split__media-detail { position: absolute; z-index: 1; width: 38%; /* `aspect-ratio: 1` (removido em 06/09/2026) forçava um quadrado sobre fotos que não são quadradas (840×458 em Mogi/SP, 420×280 em Suzano — proporções diferentes entre si, então nem dava pra travar um único valor aqui). Cortava ~45% da largura do arquivo. Decisão do usuário: sem corte nenhum — a altura agora segue a proporção real de cada imagem (ver a regra do logo abaixo), então o retângulo sobreposto muda de formato de card pra card, mas mostra a foto inteira em todos. */ border: 3px solid var(--paper); border-radius: var(--radius-field); overflow: hidden; bottom: var(--space-4); right: var(--space-4); /* Sombra ambiental pequena — sem ela, o recorte sobreposto lia como um retângulo solto em cima da foto grande em vez de uma segunda foto "pousada" ali, como uma moldura de mesa. */ box-shadow: var(--shadow-soft); transition: transform var(--motion-normal) var(--ease-emphasized), box-shadow var(--motion-normal) var(--ease-emphasized); } .split__media-detail img { width: 100%; height: auto; display: block; border-radius: 0; } @media (hover: hover) and (pointer: fine) { .media-stack:hover .split__media-detail { transform: translateY(-4px); /* Sombra forte no hover, a pedido do usuário (19/08/2026) — antes ficava em --shadow-soft o tempo todo, sem variar no hover. */ box-shadow: var(--shadow-strong); } } /* ---------- Mapa incorporado (Onde atendo) ---------- Decisão do usuário em 19/08/2026, derrubando a postura anterior de "zero requisição a terceiro" (ver memoria.md). Cartão com sombra forte, no mesmo tratamento do bloco --online — os dois passaram a usar --shadow-strong juntos por decisão explícita, não à toa. */ .location__map { border-radius: var(--radius-image); overflow: hidden; box-shadow: var(--shadow-strong); margin-bottom: var(--space-4); aspect-ratio: 16 / 10; } .location__map iframe { width: 100%; height: 100%; border: 0; display: block; } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); font-family: var(--font-text); font-weight: 500; font-size: var(--size-ui); line-height: 1; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8); border-radius: var(--radius-button); border: 1px solid transparent; cursor: pointer; text-decoration: none; min-height: 52px; transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; white-space: nowrap; } /* Peso tátil no hover: um levantar de 1px, não escala (specs/design.md só libera elevação para botão, nunca escala). --shadow-lift já existe e já é usado no hover da foto do consultório — reaproveitado aqui, não é um novo nível de sombra na página. Excluído de .btn--magnetic: esses dois botões (hero e chamada final) já têm o próprio deslocamento dinâmico via --magnet-x/--magnet-y (decisão 19); somar um translateY fixo por cima brigaria com esse transform em vez de reforçá-lo. */ @media (hover: hover) and (pointer: fine) { .btn:hover:not(.btn--magnetic) { transform: translateY(-1px); } } .btn:active:not(.btn--magnetic) { transform: translateY(0); } .btn__circle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; font-size: 0.875rem; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--motion-normal) var(--ease-emphasized); } /* A seta avança 4px no hover — o gesto mínimo que diz "isso leva a algum lugar" (item 27 do briefing). Só transform, sem empurrar layout. */ @media (hover: hover) and (pointer: fine) { .btn:hover .btn__circle { transform: translateX(4px); } } .btn--primary { background: var(--teal); color: var(--paper); } .btn--primary:hover { background: var(--teal-deep); box-shadow: var(--shadow-lift); } .btn--primary .btn__circle { background: rgba(248, 250, 252, 0.18); color: var(--paper); } .btn--primary:hover .btn__circle { background: rgba(248, 250, 252, 0.28); } .btn--secondary { background: transparent; color: var(--teal-deep); border-color: var(--hairline); padding-inline: var(--space-6); } .btn--secondary:hover { background: var(--teal-soft); border-color: var(--teal-soft); box-shadow: var(--shadow-soft); } .btn--on-dark { background: var(--paper); color: var(--teal-deep); } .btn--on-dark:hover { background: #FFFFFF; box-shadow: var(--shadow-lift); } .btn--on-dark .btn__circle { background: rgba(19, 78, 74, 0.12); color: var(--teal-deep); } .btn--ghost-dark { background: transparent; color: var(--paper); border-color: rgba(248, 250, 252, 0.35); padding-inline: var(--space-6); } .btn--ghost-dark:hover { background: rgba(248, 250, 252, 0.1); border-color: rgba(248, 250, 252, 0.6); } .btn--tertiary { background: none; padding: var(--space-2) 0; color: var(--teal); font-weight: 500; min-height: 44px; gap: var(--space-2); border-bottom: 1px solid currentColor; border-radius: 0; align-self: flex-start; } .btn--tertiary:hover { color: var(--teal-deep); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); transition: box-shadow var(--dur-fast) ease; } /* O blur vive num pseudo-elemento, NÃO no próprio header. Motivo: backdrop-filter cria um bloco de contenção, e isso aprisiona qualquer descendente position:fixed dentro do header — foi exatamente o que fez o painel do menu mobile abrir com 81px em vez de tela cheia. */ .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(248, 250, 252, 0.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); transition: background-color var(--dur-fast) ease; } .site-header.is-scrolled { box-shadow: var(--ring-hairline); } .site-header.is-scrolled::before { background: rgba(248, 250, 252, 0.95); } .site-header__inner { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--pad-inline); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-3); transition: padding var(--dur-fast) ease; } .site-header.is-scrolled .site-header__inner { padding-block: var(--space-2); } .brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--ink); min-height: 44px; } .brand img { width: 42px; height: 42px; flex-shrink: 0; transition: width var(--dur-fast) ease, height var(--dur-fast) ease; } /* A marca acompanha o encolhimento do header ao rolar — hoje só o padding mudava, o logo ficava com o mesmo tamanho num header mais baixo. */ .site-header.is-scrolled .brand img { width: 34px; height: 34px; } .brand__name { display: block; font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; } .brand__crp { display: block; font-family: var(--font-text); /* Estava em 0.6875rem (11px) — abaixo do menor nível da escala (12px), que existe porque o público inclui idosos. E o texto aqui é o CRP dela, o dado que dá credibilidade profissional à marca no header. Corrigido em 06/09/2026; o mesmo defeito já tinha sido corrigido em outras duas etiquetas em 16/08 e reapareceu aqui. */ font-size: var(--size-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .site-nav { display: none; align-items: center; gap: var(--space-6); } @media (min-width: 1200px) { .site-nav { gap: var(--space-8); } } .site-nav a { position: relative; display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink-soft); font-size: var(--size-support); font-weight: 500; white-space: nowrap; /* sem isso os itens quebram em duas linhas */ transition: color var(--dur-fast) ease; } /* "Sobre" é o rótulo mais curto da nav e media 42,4px — abaixo do alvo de 44×44 de specs/site.md. Alargar a caixa não era opção: em 1024px o header já ocupa a largura inteira sem folga, e crescer o link reintroduziria o estouro horizontal registrado em memoria.md. Este ::before transparente estende só a ÁREA DE CLIQUE em 1px de cada lado. Como pseudo-elemento, o clique continua resolvendo para o próprio , e o layout não muda em nenhum pixel. */ .site-nav a::before { content: ''; position: absolute; inset: 0 -1px; } .site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: var(--teal); transform: scaleX(0); transition: transform var(--dur-fast) var(--ease-out); } .site-nav a:hover { color: var(--ink); } .site-nav a:hover::after { transform: scaleX(1); } /* Seção em leitura: o filete fica permanente e o texto ganha peso. É o mesmo sublinhado do hover, então não é uma linguagem visual nova — só o mesmo sinal, fixado. */ .site-nav a.is-active { color: var(--ink); } .site-nav a.is-active::after { transform: scaleX(1); opacity: 0.55; } @media (min-width: 1024px) { .site-nav { display: flex; } } /* ---------- Menu mobile ---------- Usa
/ nativo: abre e fecha sem JavaScript nenhum, respeitando a regra de specs/site.md ("o site deve funcionar sem JS"). O JS só acrescenta o fechar-ao-clicar-num-link. */ .mobile-menu { position: relative; } @media (min-width: 1024px) { .mobile-menu { display: none; } } .mobile-menu__toggle { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--paper); cursor: pointer; list-style: none; color: var(--ink); transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .mobile-menu__toggle::-webkit-details-marker { display: none; } .mobile-menu__toggle:hover { background: var(--teal-soft); border-color: var(--teal-soft); } /* Hambúrguer: 3 traços que viram X ao abrir */ .mobile-menu__bars { position: relative; width: 18px; height: 12px; display: block; } .mobile-menu__bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--dur-medium) var(--ease-out), opacity var(--dur-fast) ease; } .mobile-menu__bars span:nth-child(1) { top: 0; } .mobile-menu__bars span:nth-child(2) { top: 5px; } .mobile-menu__bars span:nth-child(3) { top: 10px; } .mobile-menu[open] .mobile-menu__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .mobile-menu[open] .mobile-menu__bars span:nth-child(2) { opacity: 0; } .mobile-menu[open] .mobile-menu__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .mobile-menu__panel { position: fixed; left: 0; right: 0; top: var(--header-height, 68px); bottom: 0; z-index: var(--z-mobile-menu); background: var(--paper); border-top: 1px solid var(--hairline); padding: var(--space-8) var(--pad-inline) var(--space-12); overflow-y: auto; overscroll-behavior: contain; } .mobile-menu__list { display: flex; flex-direction: column; } .mobile-menu__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 60px; padding-block: var(--space-3); border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: 1.375rem; transition: color var(--dur-fast) ease; } .mobile-menu__list a:hover, .mobile-menu__list a:focus-visible { color: var(--teal); } .mobile-menu__list a::after { content: '→'; color: var(--teal); font-size: 1rem; opacity: 0.5; } .mobile-menu__footer { margin-top: var(--space-10); display: flex; flex-direction: column; gap: var(--space-4); } .mobile-menu__footer .btn { width: 100%; } .mobile-menu__contact { font-size: var(--size-support); color: var(--ink-soft); text-align: center; } .header-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } .header-cta .btn { min-height: 46px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6); font-size: var(--size-support); } /* No mobile o CTA do header sai de cena: quem assume é o menu e a barra fixa inferior. Evita três botões competindo num header estreito. */ @media (max-width: 767px) { .header-cta { display: none; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; scroll-margin-top: 96px; /* mesma folga das demais seções */ /* Tela cheia como as demais, menos a altura do header: ele é sticky e ocupa lugar no fluxo, então 100svh cheios empurrariam o fim do hero para fora da primeira tela. */ min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-16) calc(var(--section-gap) / 2); /* Sem border-bottom: a seção "Sobre" já desenha o próprio filete no topo (decisão 20-R). Os dois juntos davam duas linhas empilhadas na mesma fronteira — 1px de ruído que só aparece olhando de perto. */ } .hero__bg { position: absolute; /* folga vertical extra pro parallax não expor borda ao deslocar */ inset: -70px 0; width: 100%; height: calc(100% + 140px); object-fit: cover; /* decorativo: corte aqui é intencional e imperceptível */ z-index: 0; } /* Cor sólida, não gradiente (specs/design.md proíbe gradiente) — a foto de fundo já é uma textura desfocada, então uma tinta plana por cima basta pra legibilidade. */ .hero__veil { position: absolute; inset: 0; z-index: 0; background: var(--paper); opacity: 0.86; } /* Luz radial atrás do retrato — profundidade, não "efeito de gradiente". specs/design.md proíbe gradiente como PREENCHIMENTO de superfície, mas libera como máscara/luz sutil (decisão 19, mesma regra que já autoriza a luz de cursor da chamada final). Aqui a superfície continua sendo cor sólida; isto é só um halo por cima, clareando o centro-direita e deixando as bordas assentarem. O visitante não deve enxergar a transição, só perceber que o canto do retrato tem ar. */ .hero__light { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(52% 48% at 74% 38%, rgba(248, 250, 252, 0.85), transparent 68%), radial-gradient(70% 60% at 12% 88%, rgba(239, 246, 255, 0.5), transparent 72%); } /* O véu é absoluto; sem posicionar o container ele pintaria por cima do conteúdo do hero (incluindo a faixa de fatos). */ .hero > .container { position: relative; z-index: 1; } /* Ψ — o símbolo do logo dela, como marca d'água. Identidade própria, não um ícone genérico de "psicologia" (specs/design.md proíbe clichês como cérebro/coração/lótus — isto é a marca dela, não um estoque). */ .hero__psi { position: absolute; z-index: 0; right: clamp(-60px, 4vw, 40px); top: 50%; transform: translateY(-50%); width: clamp(280px, 34vw, 480px); height: auto; color: var(--teal); opacity: 0.05; pointer-events: none; } .hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; } @media (min-width: 880px) { .hero__inner { grid-template-columns: 1.35fr 1fr; gap: var(--space-16); } } /* ---------- Sequência de entrada do hero (item 12 do briefing) ---------- O hero está sempre na primeira dobra, então não precisa de IntersectionObserver: uma animação CSS com delay escalonado basta e entra sem depender de JavaScript. Ordem: etiqueta → nome → frase → subtítulo → botões → nota → retrato. ~90ms entre cada, terminando antes de 1s. Nada de bounce — a curva é a mesma --ease-emphasized do resto do site. */ .hero-in { opacity: 0; transform: translateY(20px); animation: heroIn 820ms var(--ease-emphasized) forwards; animation-delay: calc(var(--seq, 0) * 120ms + 100ms); } /* A ordem da sequência vinha de style="--seq: N" no HTML. Atributo style inline exige `style-src 'unsafe-inline'` na CSP — e unsafe-inline em style-src enfraquece a política inteira. Como os valores são fixos (0 a 5), viram seletores de atributo aqui e o HTML fica com data-seq, que nenhuma CSP precisa liberar. */ .hero-in[data-seq="0"] { --seq: 0; } .hero-in[data-seq="1"] { --seq: 1; } .hero-in[data-seq="2"] { --seq: 2; } .hero-in[data-seq="3"] { --seq: 3; } .hero-in[data-seq="4"] { --seq: 4; } .hero-in[data-seq="5"] { --seq: 5; } /* 6 adicionado em 06/09/2026: a ordem descrita no comentário acima tem 7 passos (etiqueta → nome → frase → subtítulo → botões → nota → retrato), mas só existiam seletores de 0 a 5 — nota e retrato dividiam o mesmo data-seq="5" e entravam juntos, não em sequência. Achado numa revisão de polimento; corrigido dando ao retrato o próprio passo. */ .hero-in[data-seq="6"] { --seq: 6; } @keyframes heroIn { to { opacity: 1; transform: none; } } /* O nome entra como cortina, de baixo pra cima — o único elemento do hero com tratamento próprio, porque é o

e merece a diferença. */ .hero-in--mask { clip-path: inset(0 0 108% 0); animation: heroInMask 1050ms var(--ease-emphasized) forwards; } @keyframes heroInMask { to { opacity: 1; transform: none; clip-path: inset(0 0 -10% 0); } } /* A faixa de fatos fecha a sequência, depois do bloco de texto. */ .hero .reveal--stagger > * { transition-delay: calc(var(--i, 0) * 90ms + 760ms); } @media (prefers-reduced-motion: reduce) { .hero-in, .hero-in--mask { opacity: 1; transform: none; clip-path: none; animation: none; } } .hero__eyebrow { margin-bottom: var(--space-5); } .hero__title { margin-bottom: var(--space-5); } .hero__tagline { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.4; letter-spacing: -0.005em; color: var(--teal-deep); max-width: 26ch; margin-bottom: var(--space-5); } .hero__subtitle { max-width: 46ch; margin-bottom: var(--space-8); } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-6); } .hero__note { color: var(--ink-soft); font-size: var(--size-support); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .hero__portrait { display: flex; justify-content: center; position: relative; } /* Fonte agora é 520×520 (era 150×150) — ver nota em .about__portrait-frame. Exibe a 220px, dentro do limite de nitidez (520 ÷ 220 = 2,4×). Cantos suaves em vez de círculo — lê como fotografia emoldurada, não como avatar de perfil. Outline, não box-shadow (specs/design.md proíbe sombra, não contorno). */ .hero__portrait img { width: 100%; /* 300px desde 06/09/2026. O teto anterior (260px) não era escolha estética: vinha do arquivo, que estava em 440px depois de ter sido reduzido de 520 para caber no orçamento de peso. O retrato é o principal elemento de confiança do hero e era o item de menor presença ali. Arquivo regerado em 600px direto do original de 1472px — 600 ÷ 300 = 2× exatos, nitidez retina cheia. O `min()` com 72vw é por causa do celular: 300px fixos ocupavam 92% da largura de uma tela de 375px (medido), sufocando o retrato contra as bordas. Em 375px isso devolve 270px, com respiro; a partir de ~420px de tela o valor de 300px volta a mandar. Uma expressão em vez de uma media query nova — o teto acompanha a tela sozinho. */ max-width: min(300px, 72vw); height: auto; aspect-ratio: 1; border-radius: var(--radius-image); object-fit: cover; padding: 6px; background: var(--paper); outline: 1px solid var(--hairline); outline-offset: -1px; } .hero__portrait-tag { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-button); /* 12px = nível "Etiqueta" da escala tipográfica. Estava em 11px, abaixo do menor nível definido — e num dos casos o texto é o CRP dela, que precisa ser legível. */ padding: var(--space-1) var(--space-4); font-size: var(--size-label); letter-spacing: 0.08em; color: var(--teal-deep); font-weight: 600; } @media (min-width: 880px) { .hero__portrait { justify-content: flex-end; } } /* Faixa de fatos rápidos — filete, não caixa. Era uma grade emoldurada com fundo e raio de 20px: lia como um cartão de dashboard, o elemento mais "componente" do hero. Agora é uma régua de dados separada por filete fino e alinhada à esquerda, no mesmo vocabulário das outras listas do site. */ .facts { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); margin-top: var(--space-12); } @media (min-width: 720px) { .facts { grid-template-columns: repeat(4, 1fr); } } /* Faixa de credibilidade da seção "Sobre" (10/09/2026) — reaproveita .facts/.fact do hero, mas com 3 itens em vez de 4 (formação, tempo de atuação, CRP), então herda a grade de 4 colunas com uma vaga vazia no fim. Corrigido aqui, e com margem menor: no hero ela abre a seção inteira (--space-12 faz sentido); aqui ela fica entre duas linhas de texto, não no topo de nada. */ .about__trust { margin-top: var(--space-8); grid-template-columns: repeat(2, 1fr); } @media (min-width: 620px) { .about__trust { grid-template-columns: repeat(3, 1fr); } } .fact { padding-block: var(--space-5); border-top: 1px solid var(--hairline); } .fact__icon { /* é inline por padrão — inline ignora width/height. Sem isso, o SVG dentro perde a referência de tamanho e cai no padrão do navegador (300×150px). Foi exatamente o bug do "ícone gigante". */ display: flex; align-items: center; justify-content: flex-start; width: 24px; height: 24px; margin-bottom: var(--space-3); color: var(--teal); } .fact__icon svg { width: 100%; height: 100%; display: block; } .fact__value { display: block; font-family: var(--font-display); /* Era 1.125rem — um quarto tamanho "de valor em destaque" só ligeiramente diferente de --judicial__fact dd e --online-facts__row dd (ambos 1.0625rem = --size-body). Unificado em 06/09/2026 pra usar o mesmo token: os três representam o mesmo papel (rótulo pequeno em cima, valor em display embaixo), então merecem o mesmo tamanho. A ficha de "Informações práticas" (.spec-row dd, 1.375rem) fica de fora de propósito — é a tabela de referência completa da página, com ênfase maior já documentada e medida ali mesmo. */ font-size: var(--size-body); color: var(--teal-deep); margin-bottom: var(--space-1); } .fact__label { display: block; font-size: var(--size-caption); color: var(--ink-soft); line-height: 1.45; } /* ---------- Sobre — composição editorial: foto de um lado, texto do outro, bastante espaço negativo. Não centralizada em coluna única. ---------- */ .about-split { align-items: start; } /* Assimetria: coluna lateral estreita (painel de credenciais) contra uma coluna de texto larga. Antes eram 0.8fr/1fr, quase simétrico, e o retrato de 150px boiava num espaço grande demais pra ele. */ @media (min-width: 880px) { .about-split { grid-template-columns: minmax(210px, 0.46fr) 1fr; } /* A ordem do documento é texto → coluna lateral, que é a ordem de leitura correta quando a grade vira uma coluna no celular. No desktop a lateral volta para a esquerda por posicionamento explícito de grade — não por `order`, que mudaria só o visual e deixaria o leitor de tela numa sequência diferente da que se vê. */ .about-split .about__aside { grid-column: 1; grid-row: 1; } .about-split .about__content { grid-column: 2; grid-row: 1; } } /* Painel lateral: retrato + ficha de especializações, empilhados. */ .about__aside { display: flex; flex-direction: column; gap: var(--space-10); align-items: center; } @media (min-width: 880px) { .about__aside { align-items: stretch; } } /* A largura vive AQUI, não na imagem. Como o contêiner é inline-flex, ele se encolhe até o conteúdo — então, enquanto a foto não carregava, a moldura ficava com 16px (só o padding) e saltava para 260px ao carregar, provocando salto de layout. Com a largura definida no contêiner, a moldura já nasce do tamanho final, independente da imagem. */ .about__portrait-frame { position: relative; display: inline-flex; margin-inline: auto; width: min(100%, 260px); } @media (min-width: 880px) { .about__portrait-frame { margin-inline: 0; align-self: flex-start; } } .about__credentials { width: 100%; max-width: 320px; } @media (min-width: 880px) { .about__credentials { max-width: none; } } .about__credentials-title { font-family: var(--font-text); font-size: var(--size-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--space-4); } .about__credentials-list { border-top: 1px solid var(--hairline); } .about__credentials-list li { padding-block: var(--space-3); border-bottom: 1px solid var(--hairline); font-size: var(--size-support); color: var(--ink); line-height: 1.45; } .about__credentials-list small { display: block; color: var(--ink-soft); font-size: var(--size-caption); margin-top: 2px; } /* Itens que são link (painel "Perfis profissionais", 02/09/2026) — mesma lista/fio de "Especializações", só que clicável. Sublinhado que cresce no hover, igual à linguagem de link já usada no rodapé/header, pra não inventar uma terceira gramática de link na mesma página. */ .about__credentials-list a { position: relative; display: inline-block; text-decoration: none; color: var(--ink); transition: color var(--dur-fast) ease; } /* Alvo de toque real de só 22px (a altura do texto) — abaixo dos 44×44 que specs/site.md exige, crítico aqui porque o público inclui idosos. Um ::before invisível estende só a ÁREA DE CLIQUE pro espaço de padding que o
  • já reserva ao redor, sem esticar o texto nem mudar o layout visível — mesma técnica já usada em .site-nav a::before. */ .about__credentials-list a::before { content: ''; position: absolute; inset: -11px 0; } .about__credentials-list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; opacity: 0.6; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-fast) var(--ease-out); } .about__credentials-list a:hover, .about__credentials-list a:focus-visible { color: var(--teal-deep); } .about__credentials-list a:hover::after, .about__credentials-list a:focus-visible::after { transform: scaleX(1); } /* Seta de "link externo" só em LinkedIn/Doctoralia (06/09/2026) — diferencia visualmente de item de texto puro (Especializações) e de link interno (nenhum outro existe nesta lista). */ .about__ext-icon { width: 12px; height: 12px; margin-left: var(--space-1); opacity: 0.55; vertical-align: -1px; } .about__heading { margin-top: var(--space-4); margin-bottom: var(--space-3); } /* Primeiro parágrafo em corpo maior — entrada de leitura, padrão editorial de abrir um texto com peso e depois assentar no corpo normal. */ .about__lede { font-size: var(--size-lead); line-height: 1.6; } /* O retrato original tinha 150×150px e travou o design por várias rodadas: toda vez que a composição pedia uma foto maior, a resposta era "não dá, embaça". Em 16/08/2026 chegou o arquivo em 1472×1473 (mesma foto, versão grande), e a produção passou a 520px. Agora exibe a 260px com nitidez de retina (520 ÷ 260 = 2×) — quase o dobro do que era possível antes. */ .about__portrait-frame img { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--radius-image); object-fit: cover; padding: 8px; background: var(--paper); outline: 1px solid var(--hairline); outline-offset: -1px; } /* Informação "flutuante" sobre a moldura — brief pede CRP/localização posicionados de forma elegante em vez de só texto corrido. Mesmo tratamento do .hero__portrait-tag (tamanho, padding, tracking) — é o mesmo componente visual em dois lugares, tinha ficado maior aqui por inconsistência, não por intenção. */ .about__portrait-tag { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-button); padding: var(--space-1) var(--space-4); font-size: var(--size-label); letter-spacing: 0.08em; color: var(--teal-deep); font-weight: 600; } .about__name-line { font-family: var(--font-display); font-size: 1.375rem; color: var(--ink); margin-bottom: var(--space-6); } .about__bio > * + * { margin-top: var(--space-4); } /* Único dado de credibilidade sem destaque nenhum na página inteira: os "25 anos" viviam soltos no meio da frase, no mesmo peso do resto do parágrafo. Autoridade real (não inventada) que a hierarquia escondia — destacada aqui em vez de virar um card ou selo novo, pra manter a leitura editorial da seção. */ .about__bio strong { font-family: var(--font-display); font-weight: 600; color: var(--teal-deep); } /* Fechamento da seção "Sobre" com a frase dela (resposta de Textos-para-o-site-Aleksandra.docx, 31/08/2026) — fora do grid texto/retrato, largura cheia, medida de leitura curta. Mesmo ritmo de filete + espaçamento de .inline-cta, para soar como parte do mesmo sistema mesmo sendo um bloco de tom diferente (fechamento, não CTA). */ .about__closing { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--hairline); max-width: 62ch; } .about__closing > p { font-size: var(--size-lead); line-height: 1.6; color: var(--ink-soft); } /* Mesmo acento de .judicial__notice (filete teal à esquerda) — reaproveita um vocabulário que já existe no site em vez de inventar um novo tratamento de citação. Terceira foto dela — quarta tentativa nesta seção (06/09/2026, ver memoria.md pro histórico completo das três anteriores: avatar de 96px ao lado do texto → moldura de 240px sozinha na própria linha → assinatura circular de 44px junto do nome, todas rejeitadas). O usuário pediu explicitamente "do lado" — voltou a ser `display: flex` com a foto ao lado do texto (mesmo princípio do layout hero: texto/foto lado a lado), mas agora em tamanho "normal" de retrato (180px de exibição, não mais 96px nem 44px) e com o arquivo já corrigido a fundo (rotação -33° testada em 9 ângulos até nivelar os olhos, recorte 940×940 sem canto preto, nitidez reforçada). */ .about__quote { margin-top: var(--space-6); border-left: 2px solid var(--teal); padding-left: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); } .about__quote-content { flex: 1 1 280px; } .about__quote p { font-family: var(--font-display); font-style: italic; font-size: 1.1875rem; line-height: 1.5; color: var(--ink); } .about__quote cite { display: block; margin-top: var(--space-3); font-style: normal; font-size: var(--size-support); color: var(--teal-deep); font-weight: 600; } /* 180px é "tamanho normal" de retrato secundário: menor que o do hero (260px, é o protagonista da página), maior que um ícone. `flex-wrap` no .about__quote deixa a foto cair pra baixo do texto em telas estreitas. Círculo, não raio de cantos — pedido explícito do usuário em 06/09/2026, mandando print de como a mesma foto ficava numa prévia circular em outro app ("igual nessa bolinha"). Nota técnica: a imagem já mostrava o rosto inteiro antes disso (confirmado por medição: box 180×180 quadrado = proporção do arquivo 520×520, `object-fit: cover` não corta nada quando a caixa tem a mesma proporção da imagem) — o pedido era mesmo de forma, não de recorte. É a única foto do site em círculo; `specs/design.md` prefere cantos suaves pros retratos protagonistas (hero, "Sobre") pra não lerem como avatar de rede social — aqui é uma foto secundária/pessoal, papel diferente, e o usuário pediu explicitamente esse formato duas vezes (aqui e na tentativa da assinatura). */ .about__quote-photo { flex: 0 0 auto; width: 180px; } .about__quote-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; outline: 1px solid var(--hairline); outline-offset: -1px; } /* Vídeo de apresentação (31/08/2026). Quadrado (368×368, resolução original do arquivo) — largura contida pra não virar um bloco enorme de baixa resolução esticado; 320px é grande o bastante pra assistir confortavelmente sem esticar demais um vídeo comprimido pelo WhatsApp. */ .about__video { margin-top: var(--space-8); /* "Quadrado" na mensagem anterior do usuário não era sobre o formato (geometria) — era sobre "resolvido, no lugar". Voltou a pedir "pros lados" na mensagem seguinte, mais enfático. Formato final é mesmo paisagem (16:9, mais largo que o 4:3 testado antes — ver memoria.md), largura maior pra aproveitar o formato. */ max-width: 560px; position: relative; } /* Indicador de carregamento (06/09/2026, revisão de polimento): preload="none" é proposital — o vídeo só baixa quando a pessoa clica em play. Sem isto, numa conexão lenta, o intervalo entre o clique e o vídeo realmente começar não tinha nenhum feedback — parecia botão quebrado por um instante. A classe .is-loading só é adicionada pelo main.js em resposta ao evento "waiting" do próprio