/* ===================================================================
Conecta Terapias — sistema de design (v11, aprovado 14/09/2026) +
header/rodapé compartilhados.
O sistema abaixo foi extraído de conecta-home-v11.html (a referência
aprovada pelo Ramon) — cor, tipografia, espaçamento, raio, sombra,
easing/duração e o vocabulário de animação (traço, respiração, halo,
drift). home.html consome isso direto; pacientes/profissionais/termos/
privacidade adotam a mesma pele nas próximas etapas, cada uma com seu
próprio esqueleto de conteúdo — só a linguagem visual é compartilhada.
=================================================================== */
/* fontes hospedadas localmente (public/fonts/) — variáveis, cobrem os
pesos/eixos que a v11 usa (300-700 para Fraunces, 400-800 pra Inter),
inclusive os eixos nomeados 'SOFT'/'WONK' do Fraunces (font-variation-
settings em h1/h2/h3 abaixo) -- só existem em fonte VARIÁVEL, uma
instância estática do peso 300 não teria esses eixos pra controlar.
Sem requisição pro Google: nada de pra fonts.googleapis.com. */
@font-face{
font-family:'Fraunces';font-style:normal;font-weight:300 700;
font-display:swap;src:url('/fonts/fraunces-roman-var.woff2') format('woff2');
}
@font-face{
font-family:'Fraunces';font-style:italic;font-weight:300 700;
font-display:swap;src:url('/fonts/fraunces-italic-var.woff2') format('woff2');
}
@font-face{
font-family:'Inter';font-style:normal;font-weight:400 800;
font-display:swap;src:url('/fonts/inter-var.woff2') format('woff2');
}
:root{
/* ---- cor (v11) ---- */
--ct-navy:#0F2438; --ct-navy-2:#18354E;
--ct-azure:#1B93C9; --ct-azure-br:#35B4E8;
--ct-lime:#4E9C2C; --ct-lime-br:#7AC943;
--ct-ink:#15232F; --ct-body:#5B6873;
--ct-line:#E6E0D8; --ct-paper:#FCFAF6;
--ct-sand:#F4EBE1; --ct-sand-2:#EFE3D6;
/* ---- variantes de acessibilidade (contraste medido, não estimado) ----
REGRA: --ct-azure/--ct-lime/--ct-tan (acima e abaixo) NUNCA pintam
TEXTO -- só ícone, traço decorativo, barra, ponto. Pra qualquer texto
(grande ou pequeno) e pra fundo de botão com texto branco, usar
sempre as variantes abaixo.
Por que a regra é "nunca", sem exceção por tamanho: a primeira versão
desta auditoria tentou permitir --ct-azure em texto GRANDE (>=24px),
já que passa 3:1 contra branco (3.46). Mas achado real na auditoria
completa (14/09): esse mesmo texto grande (h2 em) aparece também
sobre --ct-sand, onde cai pra 2.94 -- reprova até o limiar de 3:1.
Manter duas regras (uma cor pra texto grande, outra pra pequeno,
cada uma só válida em ALGUNS fundos) é exatamente o tipo de exceção
frágil que quebra sozinha quando alguém troca o fundo de uma seção.
Um token só, que passa 4.5:1 (o limiar mais exigente) contra o pior
fundo já em uso, resolve os dois limiares em qualquer fundo, pra
sempre -- não precisa mais checar caso a caso.
--ct-azure-btn/--ct-lime-btn: fundo de botão com texto BRANCO em cima
-- 4,61:1 contra branco (mínimo real 4,5, com folga de segurança).
--ct-azure-text/--ct-lime-text: QUALQUER texto azul/verde, grande ou
pequeno -- 4,61:1 contra o fundo mais escuro realmente em uso
(--ct-sand pra azul, rgba(78,156,44,.08) sobre paper pra verde).
--ct-tan-text: mesma regra pro tom bege/dourado decorativo dos
números "01/03" em .step .n -- #B09B84 original dava 2.67 contra
branco (texto grande, precisa 3:1); esta variante dá 3.15. */
--ct-azure-btn:#177DAB; --ct-azure-btn-hover:#136990;
--ct-lime-btn:#428425; --ct-lime-btn-hover:#366C1E;
--ct-azure-text:#15719B; --ct-lime-text:#3D7A23;
--ct-tan-text:#A58D73;
/* ---- tipografia (v11) ---- */
--ct-font-serif:'Fraunces',Georgia,serif;
--ct-font-sans:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
/* escala fluida (clamp) dos títulos/corpo maiores -- textos pequenos
(eyebrow, kicker, legendas) ficam com valor fixo direto no elemento,
não precisam variar com a largura da tela */
--ct-fs-h1:clamp(38px,5.6vw,72px);
--ct-fs-h2:clamp(29px,4vw,48px);
--ct-fs-h3:clamp(26px,3vw,34px);
--ct-fs-lead:clamp(16.5px,1.8vw,20px);
--ct-fs-body:17px;
/* ---- espaçamento, raio, sombra (v11) ---- */
--ct-radius:20px;
--ct-pad-tight:clamp(56px,7vw,88px); /* padding vertical de seção padrão */
--ct-pad-air:clamp(88px,12vw,150px); /* seções que precisam de mais ar (quem somos, rodapé) */
--ct-shadow-card:0 18px 50px rgba(0,0,0,.22);
--ct-shadow-card-hover:0 28px 64px rgba(0,0,0,.3);
--ct-shadow-btn-azure:0 8px 22px rgba(27,147,201,.3);
--ct-shadow-btn-lime:0 8px 22px rgba(78,156,44,.28);
/* ---- easing e duração ----
--ct-ease é a curva única do site inteiro (cabeçalho, botões, cartões,
animações da v11) -- atualizada nesta etapa pra bater com a curva da
v11 (era cubic-bezier(.22,.61,.36,1), sutilmente diferente). Os 3
tempos "fast/base/slow" continuam pra micro-interação de UI (menu,
header condensando); --ct-dur-ui é o tempo da v11 (.4s) pra hover de
botão/cartão -- mais lento de propósito, lê como cuidado, não pressa. */
--ct-ease:cubic-bezier(.22,.8,.3,1);
--ct-dur-fast:150ms;
--ct-dur-base:300ms;
--ct-dur-slow:500ms;
--ct-dur-ui:.4s;
/* era --ct-azure-br (#35B4E8) -- 2.37:1 contra branco, abaixo até do
mínimo de contraste não-textual (3:1, WCAG 1.4.11) pro anel de foco
ser visível em qualquer fundo claro. --ct-azure-btn resolve os dois. */
--ct-focus:var(--ct-azure-btn);
/* escala única de botão — Etapa 1 de novo: só geometria (tamanho, peso,
padding, raio, transição, foco). Cor de ação é de cada página (Etapa 2),
nenhuma delas fica aqui. 3 papéis, mínimo de 44px de altura nos 3:
.btn — ação padrão, alinhado à v11 (~54px)
.btn--lg — CTA principal do hero (landings) (~62px)
.btn--sm — cabeçalho (.site-btn-app), = .btn-sm da v11 (~44px) */
--ct-btn-radius:999px;
--ct-btn-transition:transform var(--ct-dur-ui) var(--ct-ease),
box-shadow var(--ct-dur-ui) var(--ct-ease),
background var(--ct-dur-ui) var(--ct-ease);
}
/* ---- vocabulário de animação (v11) ----
Keyframes compartilhados; cada página aplica com seu próprio timing
(delay/duração variam por elemento -- ver comentário de cada uso), só
o GESTO é comum. Nomeados ct- pra não colidir com keyframes locais. */
@keyframes ct-draw{to{stroke-dashoffset:0}} /* desenho de traço (pathLength=1 + stroke-dashoffset) */
@keyframes ct-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes ct-halo-in{from{opacity:0;transform:scale(.82)}to{opacity:.55;transform:scale(1)}}
/* respiração: 3,5s abrindo + 3,5s fechando = 7s, ritmo de respiração calma */
@keyframes ct-breathe{0%,100%{transform:scale(1);opacity:.42}50%{transform:scale(1.13);opacity:.7}}
@keyframes ct-breathe-soft{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.07);opacity:.68}}
/* halos de canto do hero -- 16s/21s dessincronizados de propósito (delay
negativo em um dos dois), pra nunca pulsarem juntos */
@keyframes ct-drift{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.18);opacity:1}}
.ct-anim-origin-center{transform-origin:center;transform-box:fill-box} /* SVG: escala a partir do próprio centro, não do canto do viewBox */
/* reveal escalonado — seção aparece ao entrar na tela, itens dentro dela
em sequência (o escalonamento é o que separa "profissional" de
"capricho"). Já provado em produção (home.html antes desta etapa);
trazido pro sistema compartilhado porque #224/#226 já listavam isso
como vocabulário, não é novo. Progressive enhancement: some por padrão
só depois do JS confirmar suporte (classe .js no ) -- sem JS ou
com JS quebrado, o conteúdo já nasce visível. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity var(--ct-dur-slow) var(--ct-ease),transform var(--ct-dur-slow) var(--ct-ease)}
.js .reveal.in-view{opacity:1;transform:none}
/* escalonamento dos itens DENTRO de uma seção revelada é local a cada
página (o seletor do filho muda -- .steps>.step, .tgrid>.titem etc.):
.js .filho:nth-child(2){transition-delay:70ms} e assim por diante,
mesmo padrão de antes. */
@media (prefers-reduced-motion:reduce){
.js .reveal{opacity:1!important;transform:none!important}
}
/* barra de progresso de rolagem — vocabulário compartilhado da v11.
Vive na borda inferior do header (fronteira navy/claro = contraste
real; achado do #226, não repetir posição fixed;top:0 sobre navy). */
#scrollProgress{
position:absolute;left:0;bottom:0;height:4px;width:100%;
transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
background:linear-gradient(90deg,var(--ct-azure-br),var(--ct-lime-br));
box-shadow:0 0 12px rgba(53,180,232,.5);
}
@supports (animation-timeline:scroll()){
#scrollProgress.supports-scroll-timeline{
animation:ct-progress-grow linear;
animation-timeline:scroll(root);
}
}
@keyframes ct-progress-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* foco visível na cor da marca em qualquer coisa interativa que não
tenha definido o próprio — cada página que já cuida disso continua
valendo (regra mais específica vence), isso aqui só fecha os buracos */
:focus-visible{outline:2px solid var(--ct-focus);outline-offset:2px}
/* transição entre páginas — nativa onde o navegador suporta (crossfade
automático do próprio browser), fallback de fade curto onde não */
@view-transition{navigation:auto}
@supports not (view-transition-name:none){
body{animation:ct-page-fade-in var(--ct-dur-base) var(--ct-ease)}
}
@keyframes ct-page-fade-in{from{opacity:0}to{opacity:1}}
.site-header{
background:var(--ct-navy);position:sticky;top:0;z-index:1000;
transition:box-shadow var(--ct-dur-base) var(--ct-ease);
}
.site-header.is-condensed{box-shadow:0 4px 18px rgba(0,0,0,.28)}
.site-header-inner{
max-width:1100px;margin:0 auto;padding:0 24px;height:78px;
display:flex;align-items:center;justify-content:space-between;gap:20px;
position:relative;
transition:height var(--ct-dur-base) var(--ct-ease);
}
.site-header.is-condensed .site-header-inner{height:60px}
/* padding-block:2px só pra levar o alvo de toque de 40 pra 44px --
centralizado no cabeçalho (align-items:center), não desloca o logo
visível nem empurra nada; largura já passava de sobra (~128px, wordmark
incluído). */
.site-logo{display:flex;align-items:center;gap:12px;text-decoration:none;transition:opacity var(--ct-dur-fast) var(--ct-ease);padding-block:2px}
.site-logo:active{opacity:.7}
.site-logo svg{width:40px;height:40px;flex:none}
.site-logo-word{
line-height:1.05;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.site-logo-word b{display:block;font-size:19px;font-weight:800;letter-spacing:-.4px;color:#fff}
.site-logo-word small{display:block;font-size:15px;font-weight:700;color:#7AC943;letter-spacing:-.2px}
.site-logo:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.site-menu-toggle{
display:flex;align-items:center;justify-content:center;
width:36px;height:36px;padding:0;margin:0;
background:none;border:none;cursor:pointer;color:#fff;
}
.site-menu-toggle svg{width:24px;height:24px}
.site-menu-toggle .icon-close{display:none}
.site-menu-toggle[aria-expanded="true"] .icon-menu{display:none}
.site-menu-toggle[aria-expanded="true"] .icon-close{display:block}
.site-menu-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.site-nav{
display:none;
position:absolute;top:100%;left:0;right:0;
flex-direction:column;align-items:stretch;gap:4px;
background:var(--ct-navy);border-top:1px solid rgba(255,255,255,.12);
padding:10px 24px 18px;box-shadow:0 12px 24px rgba(0,0,0,.25);
}
.site-nav.open{display:flex}
/* :not(.btn) é o que impede este padding/font-weight/border-bottom de
pegar carona no .site-btn-app -- ele é um dentro de .site-nav, então
sem essa exclusão .site-nav a (0,1,1) sempre venceria .btn/.btn--sm
(0,1,0) por especificidade, não importa a ordem no arquivo. Foi assim
que o botão do cabeçalho ficou com padding:0 no desktop por meses. */
.site-nav a:not(.btn){
font-size:15.5px;font-weight:600;color:rgba(255,255,255,.82);
text-decoration:none;padding:12px 4px;
border-bottom:1px solid rgba(255,255,255,.12);
transition:color var(--ct-dur-fast) var(--ct-ease);
}
.site-nav a:hover{color:#fff}
.site-nav a:active{opacity:.7}
/* duas coisas diferentes, dois tratamentos diferentes -- de propósito.
[aria-current="page"] é a PÁGINA atual (cross-page, setado pelo site.js
nas 5 páginas): sinal forte, sublinhado + branco cheio. .active é a
SEÇÃO em que a pessoa está dentro da mesma página (scroll-spy, cada
página com a própria lógica local): sinal mais leve, só clareia a cor,
sem sublinhado -- não compete visualmente com o "você está nesta
página". Os dois nunca coincidem no mesmo link (scroll-spy só observa
href="#..."; aria-current pula qualquer href com "#"), mas precisavam
de tratamento bem distinto mesmo assim: antes cada página dava
sublinhado pros dois, e dava pra ver os dois "acesos" ao mesmo tempo
no menu (achado real comparando as páginas lado a lado, 14/09). */
.site-nav a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:4px}
.site-nav a.active{color:#fff}
.site-nav a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:2px}
/* geometria (tamanho/padding/raio/peso/transição) vem de .btn.btn--sm no
HTML -- aqui só cor de marca e posição, que não são escala de botão */
/* era #29ABE2 -- 2.62:1 contra branco, reprovado. --ct-azure-btn é o mesmo
matiz, escurecido até passar de 4.5:1 (medido: 4.61, margem incluída). */
.site-btn-app{
background:var(--ct-azure-btn)!important;color:#fff!important;
text-align:center;margin-top:8px;
}
.site-btn-app:hover{background:var(--ct-azure-btn-hover)!important}
.site-btn-app[aria-current="page"]{text-decoration:none!important}
/* Layout do cabeçalho é um número DIFERENTE do layout do conteúdo, de
propósito -- os cinco itens do menu (Início/Como funciona/Quem somos/
Para pacientes/Para profissionais) + o botão do app não têm permissão
de sumir nem de espremer fonte pra caber. Medido: a largura mínima
pra essa fileira caber sem quebrar linha, sem margem nenhuma, é
~960px (logo + 5 links + botão, gap de 28px). Abaixo disso o texto
de cada item quebra em 2 linhas dentro da própria fileira -- não é
estético e não cumpre "sem quebra". 1040px dá folga de verdade acima
do mínimo medido, sem cabeçalho sufocado. O corpo (hero 2 colunas,
sticky-cta) continua trocando em 900px -- são preocupações
diferentes: nada no hero depende de o cabeçalho estar em fileira ou
recolhido, e o hambúrguer nesse trecho (900-1039px) já é o mesmo
componente limpo usado no celular, não é degradação. */
@media (min-width:1040px){
.site-menu-toggle{display:none}
.site-nav{
display:flex!important;position:static;flex-direction:row;align-items:center;
gap:28px;background:none;border:none;box-shadow:none;padding:0;
}
/* padding-block:10px leva o alvo de toque de 25 pra ~45px -- a fileira
é align-items:center dentro de um cabeçalho de 78px (60px condensado),
então o texto continua centralizado no mesmo lugar; só cresce a área
clicável ao redor dele, sem empurrar nada (a folga sobra de sobra). */
.site-nav a:not(.btn){padding:10px 0;border-bottom:none;font-weight:500}
.site-btn-app{margin-top:0}
}
/* ===================================================================
Escala única de botão — 3 papéis, mesmas variáveis, sem cor (Etapa 2).
Base e --sm alinhados byte a byte com .btn/.btn-sm da v11 nesta etapa;
--lg não existe na v11 (ela só cobre a home) -- mantido como já estava,
um degrau acima da base, pro CTA principal das landings.
=================================================================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
border:none;cursor:pointer;text-decoration:none;
border-radius:var(--ct-btn-radius);min-height:54px;
transition:var(--ct-btn-transition);
font-size:16px;font-weight:700;padding:17px 30px; /* = .btn da v11, ~54px */
}
/* white-space:nowrap NÃO fica aqui de propósito: a v11 tem (seus textos de
botão são todos curtos), mas herdar isso pra TODO .btn faria o CTA de
pacientes/profissionais (que já quebra em 2 linhas em mobile -- achado
conhecido, ver #228) transbordar da pílula em vez de quebrar -- pior que
o problema original, com risco de rolagem horizontal. Cada uso decide:
home já declara nowrap localmente (cabe); pacientes/profissionais ainda
não -- fica pra quando o texto for resolvido (PR C/D). */
.btn--lg{font-size:17px;font-weight:800;padding:18px 36px;min-height:62px} /* ~62px, só CTA principal do hero */
.btn--sm{font-size:14.5px;font-weight:700;padding:12px 22px;min-height:44px} /* = .btn-sm da v11, ~44px, só cabeçalho */
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--ct-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
.btn{transition:none!important}
.btn:active{transform:none!important}
}
/* rodapé compartilhado */
.site-footer{background:var(--ct-navy);color:rgba(255,255,255,.7);padding:48px 24px 40px}
.site-footer-inner{
max-width:1100px;margin:0 auto;
display:flex;align-items:flex-start;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
/* padding-block:2px -- mesmo tratamento do .site-logo do cabeçalho,
40 pra 44px sem deslocar o ícone visível de forma perceptível. */
.site-footer-brand{display:flex;align-items:center;gap:12px;text-decoration:none;padding-block:2px}
.site-footer-brand svg{width:40px;height:40px;flex:none}
.site-footer-tagline{
font-family:var(--ct-font-serif);font-style:italic;
font-size:16.5px;margin-top:16px;color:rgba(255,255,255,.82);
}
/* redes sociais do rodapé -- vocabulário da v11, ainda não usado nas
páginas que não têm a marcação; sem efeito onde não existe .site-social.
42 pra 44px: alvo mínimo, gap de 12px entre ícones não muda. */
.site-social{display:flex;gap:12px;margin-top:10px}
.site-social a{
width:44px;height:44px;border-radius:12px;
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
display:grid;place-items:center;margin:0;
transition:background var(--ct-dur-ui) var(--ct-ease),transform var(--ct-dur-ui) var(--ct-ease);
}
.site-social a:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.site-social svg{width:19px;height:19px}
@media (prefers-reduced-motion:reduce){
.site-social a{transition:none!important}
.site-social a:hover{transform:none!important}
}
/* links do rodapé -- 22px de altura antes (medido: 24px reportado),
abaixo do mínimo de 44px. padding-block:11px leva pra ~44; margem de
cima do bloco e de baixo (antes do próximo elemento) reduzidas na
mesma medida pra o espaço visual entre tagline/nav/redes sociais ficar
quase idêntico ao de antes -- o alvo cresce pra dentro do espaço que
já existia, não pra fora dele. */
.site-footer-nav{display:flex;gap:22px;font-size:14px;flex-wrap:wrap;margin-top:12px}
.site-footer-nav a{color:rgba(255,255,255,.72);text-decoration:none;padding-block:11px}
.site-footer-nav a:hover{color:#fff}
.site-footer-nav a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:3px}
.site-footer-nav a:focus-visible,
.site-footer-links a:focus-visible,
.site-footer-mail a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.site-footer-legal{text-align:right}
.site-footer-links{display:flex;gap:22px;font-size:14px;justify-content:flex-end;flex-wrap:wrap}
.site-footer-links a{color:rgba(255,255,255,.72);text-decoration:none;padding-block:11px}
.site-footer-links a:hover{color:#fff}
.site-footer-mail{font-size:14px;margin-top:4px}
.site-footer-mail a{color:rgba(255,255,255,.72);text-decoration:none}
.site-footer-mail a:hover{color:#fff}
.site-footer-cnpj{font-size:13px;margin-top:16px;color:rgba(255,255,255,.72)}
.site-footer-copy{font-size:12.5px;margin-top:7px;color:rgba(255,255,255,.5)}
@media (max-width:520px){
.site-footer-inner{flex-direction:column}
.site-footer-legal{text-align:left}
.site-footer-links,.site-footer-nav{justify-content:flex-start}
}
/* obrigatório: sem exceção — desliga toda animação/transição do que é
compartilhado, incluindo a transição entre páginas */
@media (prefers-reduced-motion:reduce){
.site-header,.site-header-inner,.site-logo,.site-nav a,.site-btn-app{
transition:none!important;
}
.site-btn-app:active{transform:none!important}
body{animation:none!important}
#scrollProgress{display:none!important}
@view-transition{navigation:none}
}