/* ==========================================================================
MDP ODONTOLOGIA — style.css
Tipografia: Arboria (fallback Jost)
Cor 60·30·10 → 60% base clara | 30% #6D6D6D | 10% #4A7C85
========================================================================== */
/* --------------------------------------------------------------------------
1. FONTE
Arboria é comercial (Latinotype / Adobe Fonts) e os arquivos nunca entraram
no projeto — a pasta assets/fonts/ não existe. Os quatro @font-face que
apontavam para lá ficam desligados até que existam: um src que não resolve
não muda nada na tela, porque o font-display: swap já entrega o texto no
fallback, mas rende quatro 404 por carregamento e um console sujo.
O site roda em Jost, a geométrica gratuita mais próxima, carregada pelo
do Google Fonts no . É essa a tipografia no ar hoje.
PARA LIGAR ARBORIA: colocar os quatro .woff2 em assets/fonts/ com os nomes
que aparecem nos url() abaixo e tirar os dois delimitadores de comentário
que cercam o bloco. Nada mais precisa mudar: 'Arboria' continua na frente
da pilha em --font.
-------------------------------------------------------------------------- */
/*
@font-face {
font-family: 'Arboria';
src: url('assets/fonts/Arboria-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Arboria';
src: url('assets/fonts/Arboria-Book.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Arboria';
src: url('assets/fonts/Arboria-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Arboria';
src: url('assets/fonts/Arboria-Bold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
*/
/* --------------------------------------------------------------------------
2. TOKENS
-------------------------------------------------------------------------- */
:root {
/* Cor — 30% da marca */
--ink: #3D3D3D; /* texto principal (10.9:1 no branco) */
--ink-2: #6D6D6D; /* marca — texto secundário (5.2:1 no branco) */
/* Marca — 3.28:1 no branco. Só para texto grande (>=24px) e elementos
decorativos. Em texto pequeno usar --ink-2, que passa em AA. */
--ink-3: #8E8E8E;
/* Cor — 60% base clara */
--bg: #FFFFFF;
--bg-tone: #F4F4F2; /* seção alternada suave */
--bg-tone-2: #D8D8D6; /* marca — faixa tonal cheia */
--bg-deep: #6D6D6D; /* marca — blocos escuros (CTA e rodapé) */
--line: #D8D8D6; /* marca — bordas e divisores */
--line-soft: #E8E8E6;
/* Cor — 10% de acento */
--accent: #4A7C85;
--accent-2: #3A646C; /* hover */
--accent-3: #EDF3F4; /* lavagem de fundo do acento */
/* Tipografia */
--font: 'Arboria', 'Jost', 'Century Gothic', system-ui, -apple-system, sans-serif;
--fs-eyebrow: 0.75rem;
--fs-body: 1.0625rem;
--fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
--fs-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
--fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
--fs-h1: clamp(2.375rem, 1.7rem + 3.1vw, 3.75rem);
--fs-num: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
/* Espaço — escala de 4/8 */
--sp-1: 0.5rem;
--sp-2: 1rem;
--sp-3: 1.5rem;
--sp-4: 2rem;
--sp-5: 3rem;
--sp-6: 4rem;
--sp-7: 6rem;
--sp-section: clamp(4.5rem, 3rem + 6vw, 8rem);
/* Forma */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--r-pill: 999px;
/* Elevação — baixa e difusa, nunca dramática */
--sh-1: 0 1px 2px rgba(61, 61, 61, .04), 0 6px 18px rgba(61, 61, 61, .05);
--sh-2: 0 2px 6px rgba(61, 61, 61, .06), 0 18px 44px rgba(61, 61, 61, .08);
/* Movimento — um único ritmo para o site inteiro */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--t-fast: 180ms;
--t-base: 280ms;
/* Movimento dos botões. Um só tempo e uma só curva para tudo — círculo,
texto, ícone, cor, borda e raio partem e chegam no mesmo instante.
A curva é a sine-in-out: velocidade máxima de 1,59x a média, contra
5,26x da expo-out do componente original (medido nas duas béziers).
É daí que vinha o estouro do preenchimento; sem ele, o círculo vira um
fluxo de velocidade quase constante, sem partida seca nem freada. */
--flow-t: 900ms;
--flow-ease: cubic-bezier(0.37, 0, 0.63, 1);
--flow-raio: 12px;
/* Camadas empilhadas */
--layer-radius: clamp(20px, 2.2vw, 34px);
--layer-overlap: clamp(20px, 2.2vw, 34px);
--container: 1200px;
--gutter: clamp(1.25rem, 4vw, 3rem);
--header-h: 76px;
}
/* --------------------------------------------------------------------------
3. RESET
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
font-family: var(--font);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.65;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
b, strong { font-weight: 500; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
/* Visível só para leitor de tela */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: var(--sp-2);
top: -100px;
z-index: 200;
padding: 0.75rem 1.25rem;
background: var(--accent);
color: #fff;
border-radius: var(--r-sm);
transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-2); }
/* --------------------------------------------------------------------------
4. GRID / CONTAINERS
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: 880px; }
.section { padding-block: var(--sp-section); }
.section--tone { background: var(--bg-tone); }
/* --------------------------------------------------------------------------
4b. CAMADAS EMPILHADAS
Cada seção é uma superfície opaca que sobe por cima da anterior. Elementos
posicionados pintam na ordem do DOM, então position:relative já garante que
a de baixo no HTML fique por cima — sem z-index manual.
-------------------------------------------------------------------------- */
.layer {
position: relative;
margin-top: calc(var(--layer-overlap) * -1);
border-top-left-radius: var(--layer-radius);
border-top-right-radius: var(--layer-radius);
border-top: 1px solid var(--line);
/* Sombra para cima: é ela que desenha a separação mesmo entre duas
seções brancas, onde o contraste de fundo não existe. */
box-shadow: 0 -22px 54px rgba(61, 61, 61, .09);
}
/* Camada precisa ser opaca para cobrir a anterior. As tonais e as escuras
já trazem o próprio fundo, então ficam de fora desta regra. */
.layer:not(.section--tone):not(.layer--dark) { background: var(--bg); }
.layer--dark {
border-top-color: rgba(255, 255, 255, .16);
box-shadow: 0 -22px 54px rgba(61, 61, 61, .22);
}
/* --------------------------------------------------------------------------
4c. AJUSTES EXIGIDOS PELO SCROLLSMOOTHER
O plugin desloca #smooth-content por transform. Isso cria um bloco de
contenção novo, e position:sticky lá dentro passa a derivar em relação ao
conteúdo transformado em vez da viewport. Quando o smoother está ativo,
as colunas sticky viram estáticas e ganham movimento por data-speed.
-------------------------------------------------------------------------- */
html.has-smoother { scroll-behavior: auto; }
html.has-smoother .diferenciais__aside,
html.has-smoother .depoimentos__aside { position: static; top: auto; }
/* --------------------------------------------------------------------------
5. TIPOGRAFIA DE APOIO
-------------------------------------------------------------------------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
/* Laterais iguais, menos o rastro do letter-spacing: os 0.14em entram
depois da última letra também, ocupando caixa sem virar tinta. Descontá-los
à direita é o que põe o grupo ponto + texto no meio da pílula, em vez de
4px à esquerda como estava. */
padding: 0.4rem calc(0.875rem - 0.14em) 0.4rem 0.875rem;
border: 1px solid var(--line);
border-radius: var(--r-pill);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-2);
background: var(--bg);
}
.eyebrow--center { display: inline-flex; }
.eyebrow__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex: none;
}
.section-head {
text-align: center;
max-width: 680px;
margin-inline: auto;
margin-bottom: var(--sp-6);
}
.section-title {
font-size: var(--fs-h2);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
margin-top: var(--sp-3);
text-wrap: balance;
}
/* Nos splits assimétricos a coluna de texto é estreita — o título desce um degrau
para as duas linhas planejadas caberem sem quebra extra. */
.section-title--left {
text-align: left;
font-size: clamp(1.75rem, 1.25rem + 1.55vw, 2.375rem);
}
.section-title__soft { font-weight: 300; color: var(--ink-2); }
.section-sub {
margin-top: var(--sp-3);
font-size: var(--fs-lead);
color: var(--ink-2);
text-wrap: pretty;
}
.section-sub--left { text-align: left; }
/* Link dentro de um parágrafo. O reset zera cor e sublinhado de todo , e um
link corrido precisa dos dois de volta: o sublinhado é o que sobra para quem
não distingue a cor. Vai no --accent-2, e não no --accent, por contraste: o
accent sobre o #F4F4F2 da seção dá 4,23:1, abaixo dos 4,5:1 que o texto
normal exige (o --fs-lead vai de 17 a 20px, não chega a texto grande). */
.link-inline {
color: var(--accent-2);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
transition: text-decoration-thickness var(--t-base) var(--ease);
}
.link-inline:hover { text-decoration-thickness: 2px; }
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-weight: 500;
color: var(--accent);
padding-block: 0.35rem;
border-bottom: 1px solid transparent;
transition: border-color var(--t-base) var(--ease), gap var(--t-base) var(--ease);
}
.link-arrow svg {
width: 20px; height: 20px;
fill: none; stroke: currentColor; stroke-width: 1.4;
stroke-linecap: round; stroke-linejoin: round;
}
.link-arrow:hover { gap: 0.9rem; border-bottom-color: var(--accent); }
/* --------------------------------------------------------------------------
6. BOTÕES
-------------------------------------------------------------------------- */
.btn {
/* --flow-cor: o que o círculo pinta. --flow-texto: para onde o texto vai.
Cada variante troca esses dois; o resto do efeito é comum a todas. */
--flow-cor: var(--accent);
--flow-texto: #fff;
--flow-desl: 6px;
position: relative; /* referência do círculo */
overflow: hidden; /* recorta o círculo na forma do botão */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: 48px;
padding: 0.85rem 1.6rem;
border-radius: var(--r-pill);
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--flow-t) var(--flow-ease),
color var(--flow-t) var(--flow-ease),
border-color var(--flow-t) var(--flow-ease),
border-radius var(--flow-t) var(--flow-ease),
box-shadow var(--flow-t) var(--flow-ease),
transform var(--flow-t) var(--flow-ease);
}
/* O círculo do FlowButton. Pseudo-elemento absoluto: não entra na conta do
flex, então largura, altura, padding e o vão do ícone ficam intactos.
130% da largura garante que a borda alcance os cantos em todos os
tamanhos — o crescimento é scale, sem reflow. */
.btn::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 130%;
aspect-ratio: 1;
border-radius: 50%;
background: var(--flow-cor);
transform: translate(-50%, -50%) scale(0);
z-index: 0;
pointer-events: none;
/* Só transform. Em scale(0) o círculo tem área zero e não pinta, então o
opacity que havia aqui era um segundo tempo sem função — e um tempo a
menos é um desencontro a menos. */
transition: transform var(--flow-t) var(--flow-ease);
}
.btn:hover::before { transform: translate(-50%, -50%) scale(1); }
/* Texto e ícone viajam juntos e pela mesma distância: é o que mantém os
0.6rem entre eles intactos durante todo o percurso, não só no fim.
z-index os mantém acima do círculo. */
.btn__label { position: relative; z-index: 1; }
.btn__label,
.btn__icon { transition: transform var(--flow-t) var(--flow-ease); }
.btn:hover .btn__label,
.btn:hover .btn__icon { transform: translateX(var(--flow-desl)); }
.btn:hover { border-radius: var(--flow-raio); color: var(--flow-texto); }
.btn__icon {
position: relative; z-index: 1;
width: 20px; height: 20px;
fill: none; stroke: currentColor; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
}
.btn--sm { min-height: 44px; padding: 0.6rem 1.15rem; font-size: 0.875rem; }
.btn--lg { min-height: 56px; padding: 1rem 2rem; }
/* Em cada variante o preenchimento no hover passou a ser o círculo; por isso
as regras :hover não trocam mais background nem color — isso as anularia. */
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(74, 124, 133, .22); --flow-cor: var(--accent-2); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(74, 124, 133, .28); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { color: var(--ink); border: 1px solid var(--line); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { transform: translateY(-2px); }
/* Sobre o #6D6D6D do CTA: o círculo branco pede texto escuro. */
.btn--outline-light { color: #fff; border: 1px solid rgba(255, 255, 255, .5); --flow-cor: #fff; --flow-texto: var(--ink); }
.btn--outline-light:hover { border-color: #fff; }
/* Quem leva ao WhatsApp se preenche com o verde da marca deles. Pelo href e
não pela variante: qualquer botão novo com esse destino já nasce certo, e
nenhum outro botão claro herda o verde por engano.
Branco sobre o #25D366 dá 1,98:1 — reprova até para o traço do ícone, que
pede 3:1. Por isso o texto e o ícone ficam em --ink: 5,48:1. Como é a cor
que o botão já tem em repouso, aqui o hover é só o verde entrando. */
.btn[href*="wa.me"] { --flow-cor: #25D366; --flow-texto: var(--ink); }
/* O do Instagram se preenche com o degradê da marca deles, e aqui o texto
volta ao branco — sobre esta paleta ele lê muito melhor que o --ink.
Duas contas definem os stops:
1) o círculo é um quadrado de 1,3x a largura do botão, então só a faixa
central dele aparece: (largura + altura) / (2 x 1,3 x largura) = 52%
da linha do degradê, de 24% a 76%. Fora disso o CSS trava nas pontas.
2) centrada nessa faixa, a rampa deixava o laranja claro passando sob o
rótulo: 4,12:1, abaixo de AA. Adiantando-a 6 pontos, o laranja recua
para o canto inferior esquerdo — que fica fora do texto — e o rótulo
passa a assentar no vermelho/magenta: 4,76:1 medido pixel a pixel,
4,04:1 sob o ícone (o mínimo para grafismo é 3:1). */
.btn[href*="instagram.com"] {
--flow-cor: linear-gradient(45deg,
#F09433 18%, #E6683C 31%, #DC2743 44%, #CC2366 57%, #BC1888 70%);
--flow-texto: #fff;
}
/* --------------------------------------------------------------------------
7. MOLDURAS DE MÍDIA
Os placeholders .ph saíram junto com a última foto de exemplo: a marcação
não usa mais nenhum deles.
-------------------------------------------------------------------------- */
/* Mapa do rodapé — mesma moldura que o placeholder tinha. */
.mapa {
aspect-ratio: 21 / 6;
width: 100%;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: var(--r-md);
background: rgba(255, 255, 255, .06);
overflow: hidden;
}
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
/* --------------------------------------------------------------------------
8. CABEÇALHO
-------------------------------------------------------------------------- */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
height: var(--header-h);
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0);
border-bottom: 1px solid transparent;
transition: background-color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
backdrop-filter var(--t-base) var(--ease);
}
.site-header.is-stuck {
background: rgba(255, 255, 255, .88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom-color: var(--line);
}
/* --------------------------------------------------------------------------
8b. AURORA
Movimento extraído do componente "aurora hero" (21st.dev): dois círculos
de 384px, muito desfocados, derivando em laço de 20s com ease-in-out.
Os keyframes abaixo são os do original, sem uma vírgula alterada — deriva
de ±20% combinada com respiração de escala entre 0.8 e 1.2, voltando ao
ponto de partida em 100% para o laço não dar solavanco.
Quem usa: .apresentacao, no topo do hero (seção 9b).
-------------------------------------------------------------------------- */
@keyframes aurora-1 {
0% { transform: translate(0%, 0%) scale(1); }
25% { transform: translate(20%, -20%) scale(1.2); }
50% { transform: translate(-20%, 20%) scale(0.8); }
75% { transform: translate(10%, -10%) scale(1.1); }
100% { transform: translate(0%, 0%) scale(1); }
}
@keyframes aurora-2 {
0% { transform: translate(0%, 0%) scale(1); }
25% { transform: translate(-20%, 20%) scale(1.1); }
50% { transform: translate(20%, -20%) scale(0.9); }
75% { transform: translate(-10%, 10%) scale(1.2); }
100% { transform: translate(0%, 0%) scale(1); }
}
.header__inner {
display: flex;
align-items: center;
gap: var(--sp-4);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-right: auto; }
.brand__logo { height: 34px; width: auto; flex: none; display: block; }
.brand__text {
font-size: 1.125rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ink);
}
.brand__text-light { font-weight: 300; color: var(--ink-2); margin-left: 0.35em; }
.nav__list { display: flex; gap: var(--sp-3); }
.nav__list a {
position: relative;
display: block;
padding: 0.62rem 0; /* garante 44px de alvo */
font-size: 0.9375rem;
color: var(--ink-2);
transition: color var(--t-base) var(--ease);
}
.nav__list a::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1.5px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t-base) var(--ease);
}
.nav__list a:hover { color: var(--ink); }
.nav__list a:hover::after { transform: scaleX(1); }
.nav-toggle {
display: none;
width: 44px; height: 44px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
.nav-toggle__bar {
width: 22px; height: 1.5px;
background: var(--ink);
transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child { transform: translateY(-3.75px) rotate(-45deg); }
/* --------------------------------------------------------------------------
9b. APRESENTAÇÃO — assinatura da marca sobre a aurora
O fundo é o mesmo #D8D8D6 do arquivo original do logotipo, e a assinatura
entra recortada com canal alfa, preservando os dois cinzas da marca
(#8E8E8E e #6D6D6D). Nenhuma cor foi trocada.
Os borrões não introduzem matiz nova: um é branco (clareia) e o outro é
--ink-2 (escurece). O efeito é luz e sombra atravessando a pedra, não uma
aurora colorida — foi a leitura literal de "manter as mesmas cores".
-------------------------------------------------------------------------- */
/* Sangra de ponta a ponta: o painel é filho direto de .hero, sem .container.
O topo encosta no cabeçalho (ver o padding-top de .hero na seção 9), por
isso só os cantos de baixo têm raio. */
.apresentacao {
position: relative;
display: grid;
place-items: center;
/* Ocupa o que sobra da tela abaixo do cabeçalho. O topo não muda: o painel
continua encostado na borda de baixo do header, que é fixo e tem
var(--header-h) — o mesmo valor que .hero desconta em padding-top.
svh, e não vh nem dvh. O dvh encolhe e cresce junto com a barra de
endereço do celular, e o ScrollSmoother roda com ignoreMobileResize: true
de propósito — ele não recalcula nesse evento, então a página inteira
escorregaria por baixo das posições já medidas. O svh é o estado de barra
visível: fixo, e garante que o painel caiba inteiro ao abrir. A linha de
vh antes dele é o fallback de quem não conhece a unidade. */
min-height: calc(100vh - var(--header-h));
min-height: calc(100svh - var(--header-h));
padding: var(--sp-5) var(--gutter);
border-radius: 0 0 var(--layer-radius) var(--layer-radius);
overflow: hidden;
background: var(--bg-tone-2);
}
.apresentacao__aurora {
position: absolute;
inset: 0;
pointer-events: none;
}
.apresentacao__blob {
position: absolute;
width: 384px; height: 384px;
border-radius: 50%;
filter: blur(64px);
will-change: transform;
}
/* Posições do original: -top-1/4 left-1/4 e -bottom-1/4 right-1/4. */
/* Amplitude 1,5x. Sobre o #D8D8D6 (216) do painel, o núcleo de cada borrão
compõe em 216 + alfa x (cor - 216):
antes .75/.06 -> 245,3 e 209,6 = 35,7 tons de oscilação
agora .96/.15 -> 253,4 e 200,0 = 53,5 tons (1,50x)
O branco não podia carregar sozinho: de 216 até 255 são 39 tons, teto que
só dá 1,33x. O que faltava veio do lado cinza, por isso o borrão escuro
sobe mais que o claro. Continua desequilibrado — clarear ainda é barato e
escurecer ainda custa legibilidade sob a assinatura. */
/* O -25% do original media 25% da altura do painel, que era fixa em 435px:
-108,75px, com o borrão de 384px centrado a 83,25px do topo — 19,14% da
altura. Agora que o painel acompanha a tela, os mesmos -25% jogariam os dois
borrões quase inteiros para fora (o centro do de cima cairia acima da borda
superior) e o logotipo ficaria sobre cinza chapado. A conta abaixo fixa o
centro naquele 19,14%: em 435px devolve -108,74px, o valor de hoje, e em
painel alto mantém a mesma composição, só mais espaçada. */
.apresentacao__blob--1 {
top: calc(19.14% - 192px); left: 25%;
background: #fff;
opacity: .96;
animation: aurora-1 20s ease-in-out infinite;
}
.apresentacao__blob--2 {
bottom: calc(19.14% - 192px); right: 25%;
background: var(--ink-2);
opacity: .15;
animation: aurora-2 20s ease-in-out infinite;
}
/* Foco que segue o cursor. O centro é branco puro e a borda é branco com
alfa 0 — assim o degradê termina no próprio cinza do painel, sem precisar
repetir a cor aqui. `transparent` puro daria franja escura no meio do
caminho, porque interpola por rgba(0,0,0,0).
As coordenadas vêm de script.js, em pixels relativos ao painel. */
.apresentacao__brilho {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--t-base) var(--ease);
/* 110px = os 88px iniciais mais 0,25x. O raio não muda aqui.
O centro já é branco puro, então não há para onde subir em intensidade:
o ganho vem da área. Segurando o branco cheio até 36% do raio, o alfa
médio sobre o disco vai de 1/3 para 0,50 — 1,49x — e a queda para zero
continua contínua, sem anel visível. */
background: radial-gradient(110px circle at var(--brilho-x, 50%) var(--brilho-y, 50%),
#fff 0%, #fff 36%, rgba(255, 255, 255, 0) 100%);
}
/* Só onde existe cursor de verdade: no toque o brilho ficaria preso no
último ponto tocado. */
@media (hover: hover) {
.apresentacao:hover .apresentacao__brilho { opacity: 1; }
}
.apresentacao__marca {
position: relative; /* z-10 do original: conteúdo acima dos borrões */
z-index: 1;
width: min(100%, 520px);
}
/* display:block encosta uma parte na outra; como ![]()
é inline por padrão,
sem isso o espaço entre as tags viraria uma fresta entre os recortes. */
.apresentacao__marca img {
display: block;
width: 100%;
height: auto;
}
/* Sem movimento: os borrões ficam parados, como um degradê qualquer. */
@media (prefers-reduced-motion: reduce) {
.apresentacao__blob { animation: none; }
}
/* --------------------------------------------------------------------------
8b. RASTROS
Três linhas que descem do painel de apresentação até as fotos da equipe.
A ordem de pintura é o ponto delicado. As seções .layer são superfícies
opacas: se os rastros ficassem debaixo delas, sumiriam. Se ficassem por
cima de tudo, atravessariam texto e foto. Então eles entram numa camada
intermediária — z-index 1, acima dos fundos das seções (que são elementos
posicionados com z-index auto) — e o conteúdo de cada seção sobe para o 2.
Resultado: a linha corre sobre o fundo e passa por trás de tudo que se lê.
-------------------------------------------------------------------------- */
#conteudo { position: relative; } /* bloco de contenção dos rastros */
.rastros {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
color: var(--ink-2); /* o cinza dos 30% da paleta; os traços herdam */
opacity: 0;
transition: opacity 600ms var(--ease);
}
.rastros--pronto { opacity: 1; }
.rastros svg { display: block; overflow: visible; }
/* O conteúdo por cima da camada dos rastros. Só os fundos das seções ficam
por baixo — é isso que faz a linha passar atrás de texto, foto e botão. */
.hero__inner,
.section > .container,
.casos > .carrossel,
.metricas > .container,
.cta-final > .container {
position: relative;
z-index: 2;
}
/* Três traços sobrepostos no mesmo caminho, como no vídeo de referência:
um halo largo e quase transparente, a linha de cabelo que fica, e a cabeça
— um trecho curto e mais forte que anda na frente. Lá a cabeça era 3x mais
grossa que a linha e o brilho caía de ~235 para ~50 do começo ao fim; aqui
a mesma razão vira opacidade, porque o traço é escuro sobre fundo claro. */
.rastro__halo,
.rastro__linha,
.rastro__ponta,
.moldura__lado {
fill: none;
stroke: currentColor;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.rastro__halo { stroke-width: 3; opacity: .10; }
.rastro__linha { stroke-width: 1; opacity: .34; }
.rastro__ponta { stroke-width: 1.6; opacity: .62; }
.moldura__lado { stroke-width: 1.25; opacity: .42; }
/* --------------------------------------------------------------------------
9. HERO
-------------------------------------------------------------------------- */
.hero {
/* Exatamente a altura do cabeçalho: o painel de apresentação é o primeiro
filho e precisa encostar na borda de baixo dele. O respiro que existia
aqui foi para o margin-top de .hero__inner. */
padding-top: var(--header-h);
padding-bottom: var(--sp-section);
background:
radial-gradient(120% 90% at 88% 0%, var(--accent-3) 0%, transparent 55%),
var(--bg);
}
.hero__inner {
margin-top: clamp(2.5rem, 5vw, 4.5rem); /* respiro entre a apresentação e a copy */
display: grid;
grid-template-columns: 1.28fr 0.72fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.hero__title {
margin-top: var(--sp-3);
font-size: var(--fs-h1);
font-weight: 500;
line-height: 1.03;
letter-spacing: -0.03em;
color: var(--ink);
text-wrap: balance;
}
.hero__title-accent { font-weight: 300; color: var(--ink-2); }
.hero__lead {
margin-top: var(--sp-3);
max-width: 46ch;
font-size: var(--fs-lead);
color: var(--ink-2);
text-wrap: pretty;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-top: var(--sp-4);
}
.hero__trust {
display: flex;
flex-wrap: wrap;
gap: 0.5rem var(--sp-3);
margin-top: var(--sp-5);
padding-top: var(--sp-3);
border-top: 1px solid var(--line);
font-size: 0.875rem;
color: var(--ink-2);
}
.hero__trust li { display: flex; align-items: center; gap: 0.5rem; }
.hero__trust li::before {
content: '';
width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent);
flex: none;
}
/* Duas travas por causa da fita do carrossel, que é bem mais larga que a coluna:
min-width: 0 impede que o tamanho mínimo automático do item de grade vire o
conteúdo inteiro (media roubava a coluna do texto: 875px contra 432);
width: 100% dá largura definida, senão no responsivo — onde a figura tem
margin-inline: auto e deixa de esticar — ela cai em shrink-to-fit e adota o
max-width de 520px dentro de uma coluna de 335. */
.hero__media { position: relative; min-width: 0; width: 100%; }
/* --------------------------------------------------------------------------
9b. CARROSSEL DO HERO — fita contínua, entrando pela direita
Medido no vídeo de referência: cada foto ocupa 40% da largura visível,
o vão entre elas 3,8%, e a fita corre a velocidade constante. As bordas
ali eram corte seco; aqui elas desaparecem em degradê.
-------------------------------------------------------------------------- */
.carrossel {
/* 0,50. A referência usava 0,32, mas ali os slides eram blocos de cor chapada
— não havia o que perder no corte. Com foto, o cover a 0,32 deixava só a
faixa central de 42,7% da imagem, e o letreiro da fachada saía partido.
Em 1/2 sobrevivem 66,7% da largura, e ainda se vê mais de uma foto por vez. */
--slide-ar: 1 / 2;
--slide-vao: 14px;
--carrossel-passo: 4.6s; /* tempo para cada foto avançar uma posição */
--carrossel-fade: clamp(24px, 14%, 80px);
position: relative;
aspect-ratio: 4 / 5; /* a moldura que o placeholder do hero tinha */
width: 100%;
overflow: hidden;
/* A borda não corta, dissolve: a máscara leva a fita a alfa zero nos dois
lados, então a foto entra e sai no vazio — e funciona sobre qualquer
fundo, ao contrário de um degradê da cor da página por cima. */
-webkit-mask-image: linear-gradient(90deg, transparent 0,
#000 var(--carrossel-fade), #000 calc(100% - var(--carrossel-fade)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0,
#000 var(--carrossel-fade), #000 calc(100% - var(--carrossel-fade)), transparent 100%);
}
.carrossel__trilho {
display: flex;
width: max-content;
height: 100%;
will-change: transform;
}
.carrossel__slide {
flex: none;
height: 100%;
aspect-ratio: var(--slide-ar);
/* margin, não gap: com gap o trilho mede 2n larguras + (2n-1) vãos, e os
-50% do keyframe cairiam meio vão fora da emenda — a volta saltaria. */
margin-right: var(--slide-vao);
border-radius: var(--r-md);
overflow: hidden;
}
.carrossel__foto { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Só anima depois que o script duplicou a lista: sem a cópia, a emenda
abriria um buraco do tamanho da fita a cada volta. */
.carrossel--pronto .carrossel__trilho {
animation: carrossel-fita
calc(var(--carrossel-n, 5) * var(--carrossel-passo))
linear infinite;
}
/* Metade do trilho = exatamente a lista original, porque a cópia vem logo
atrás. No instante em que chega lá, o quadro é idêntico ao inicial. */
@keyframes carrossel-fita {
to { transform: translate3d(-50%, 0, 0); }
}
/* Mesma fita, andando para a direita: entra pela margem esquerda e sai pela
direita. Um keyframe só para as duas direções — reverse com timing linear é
o espelho exato, e o -50% continua caindo na emenda. A regra vem depois da
de cima de propósito: o atalho `animation` de lá zera o direction, e é a
ordem da cascata que devolve o reverse. */
.carrossel--destro .carrossel__trilho { animation-direction: reverse; }
.hero__badge {
position: absolute;
left: clamp(-1.5rem, -2vw, -1rem);
bottom: clamp(1.5rem, 4vw, 2.5rem);
display: flex;
align-items: center;
gap: 0.85rem;
padding: 1rem 1.4rem;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--sh-2);
font-size: 0.8125rem;
line-height: 1.35;
color: var(--ink-2);
}
.hero__badge-num {
font-size: 2.125rem;
font-weight: 300;
line-height: 1;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------------------
10. SOBRE + MÉTRICAS
-------------------------------------------------------------------------- */
/* padding-bottom zerado porque a faixa de casos encosta no fim desta seção:
quem dá a folga entre as duas é o margin-top dela, senão o espaço viria
dobrado. Mesmo arranjo de .tratamentos com .metricas, logo abaixo. */
.sobre { text-align: center; padding-bottom: 0; }
/* --------------------------------------------------------------------------
10b. FAIXA DE CASOS CLÍNICOS
A mesma fita do hero, sangrando de ponta a ponta entre duas camadas — e a
seção seguinte sobe por cima da borda de baixo, como na faixa de métricas.
Medido no vídeo de referência (848x480, 11,65s): a faixa ocupa 458px de
altura, cada cartão 459,5x458 (quadrado), o vão entre eles 55,5px = 12,1%
do cartão, e a fita corre a 205 px/s constantes — a velocidade saiu de dez
intervalos de ~1s, entre 197 e 212 px/s, sem dwell nem snap. Normalizando
pela altura da faixa dá 0,448 altura por segundo, que é o número que
sobrevive a qualquer tamanho de tela.
-------------------------------------------------------------------------- */
.casos {
margin-top: var(--sp-section);
/* A camada seguinte come --layer-overlap desta borda; o que sobra é o
respiro real embaixo das fotos. */
padding-bottom: calc(var(--sp-5) + var(--layer-overlap));
}
.carrossel--casos {
--faixa-h: clamp(240px, 30vw, 400px);
/* 4:5, não o 1:1 do vídeo. Lá os cartões eram quadrados porque as fotos
eram; aqui metade do conjunto é 4:5 e metade 1:1, e cada foto é um par
antes/depois empilhado. Cortar na vertical decepa um dos dois estados —
no 4:5 o corte é horizontal e tira 10% de cada lado das quadradas, que
ali é bochecha e fundo. */
--slide-ar: 4 / 5;
--slide-vao: clamp(16px, 2.2vw, 34px);
/* 3,75s por foto, 30s de volta com as oito. Mais lento que o vídeo de
propósito: a velocidade de lá, normalizada, dava 0,448 altura/s — 2s por
foto — e ficou apressada para fotos que pedem leitura. Isto aqui são
0,234 altura/s, 52% da referência. O passo é o mesmo nas duas pontas da
faixa (351,7px em 1440, 208px em 375), então um valor só serve para
todas as larguras: 94 px/s no desktop, 55 px/s no celular. */
--carrossel-passo: 3.75s;
/* O vídeo dissolvia 90px de 848 — 10,6% do quadro, mas 19,6% de um cartão.
O que a vista lê é a segunda proporção: quanto de uma foto está sob o
véu. Como aqui o slide é 0,8 da altura, 19,6% dele dá 0,157 da faixa. */
--carrossel-fade: max(40px, calc(0.157 * var(--faixa-h)));
/* A moldura do hero é 4/5; esta é uma faixa, definida pela altura. */
aspect-ratio: auto;
height: var(--faixa-h);
}
/* A faixa de métricas encosta no fim desta seção: quem dá a folga entre as duas
é o margin-top dela, não o padding daqui — senão o espaço viria dobrado. */
.tratamentos { padding-bottom: 0; }
/* Manifesto: cinza baixo com as palavras-chave em contraste — padrão da referência */
.manifesto {
max-width: 22ch;
margin: var(--sp-4) auto 0;
font-size: clamp(1.75rem, 1.05rem + 3.1vw, 3.375rem);
font-weight: 300;
line-height: 1.22;
letter-spacing: -0.02em;
color: var(--ink-3);
/* Centralizado de propósito. Justificar aqui foi testado e descartado:
com ~24 caracteres por linha a 54px, uma das linhas abria 92px entre
palavras (5,7x o espaço natural da fonte). */
text-wrap: balance;
}
.manifesto b { font-weight: 500; color: var(--ink); }
.sobre__aside {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
max-width: 62ch;
margin: var(--sp-5) auto 0;
color: var(--ink-2);
}
/* Justificado: com ~64 caracteres por linha a medida comporta, e o pior vão
fica em 2,3x o espaço natural. */
.sobre__aside p {
align-self: stretch; /* o flex com align-items:center encolhia o
parágrafo até o conteúdo; justificar exige
que ele ocupe a largura toda da coluna */
text-align: justify;
text-wrap: pretty; /* evita a última linha com uma palavra sozinha */
hyphens: auto; /* usa o lang="pt-BR" do para separar sílabas */
}
.metricas {
margin-top: var(--sp-section);
padding-block: clamp(2.5rem, 4vw, 3.5rem);
background: var(--bg-tone-2);
}
.metricas__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
text-align: center;
align-items: center; /* centra na vertical: números alinhados mesmo se um label quebrar em duas linhas */
justify-items: center; /* centra na horizontal dentro de cada coluna */
}
.metrica {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
}
.metrica__num {
font-size: var(--fs-num);
font-weight: 300;
line-height: 1;
letter-spacing: -0.03em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.metrica__label { font-size: 0.875rem; color: #5A5A5A; }
/* --------------------------------------------------------------------------
11. TRATAMENTOS — cards
-------------------------------------------------------------------------- */
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-3);
}
/* Contagem que deixa um card sozinho na última linha (7, 10, 13...) fica
centralizada em vez de encostada à esquerda. */
@media (min-width: 1025px) {
.cards > :last-child:nth-child(3n + 1) { grid-column: 2; }
}
.card {
padding: var(--sp-4);
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-lg);
transition: border-color var(--t-base) var(--ease),
box-shadow var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
.card:hover {
border-color: transparent;
box-shadow: var(--sh-2);
transform: translateY(-4px);
}
.card__icon {
display: grid;
place-items: center;
width: 52px; height: 52px;
margin-bottom: var(--sp-3);
border-radius: var(--r-md);
background: var(--accent-3);
transition: background-color var(--t-base) var(--ease);
}
.card__icon svg {
width: 26px; height: 26px;
fill: none; stroke: var(--accent); stroke-width: 1.35;
stroke-linecap: round; stroke-linejoin: round;
transition: stroke var(--t-base) var(--ease);
}
.card:hover .card__icon { background: var(--accent); }
.card:hover .card__icon svg { stroke: #fff; }
.card__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; }
.card__text { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--ink-2); text-wrap: pretty; }
/* --------------------------------------------------------------------------
12. DIFERENCIAIS — split assimétrico
-------------------------------------------------------------------------- */
.diferenciais__inner {
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: clamp(2rem, 6vw, 5rem);
align-items: start;
}
.diferenciais__aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
/* Mesma caixa do botão de .depoimentos__aside: lá ele é item de um flex com
align-items: flex-start, então o inline-flex vira flex e encolhe. Aqui o
aside é bloco, e os 32px de folga repetem o gap (--sp-3) mais a margem
(--sp-1) que ele tem lá. */
.diferenciais__aside .btn {
display: flex;
width: fit-content;
margin-top: calc(var(--sp-3) + var(--sp-1));
}
.beneficios { display: grid; gap: 0; }
.beneficio {
padding-block: var(--sp-4);
border-top: 1px solid var(--line);
}
.beneficio:last-child { border-bottom: 1px solid var(--line); }
.beneficio__icon {
display: grid;
place-items: center;
width: 44px; height: 44px;
margin-bottom: var(--sp-2);
border-radius: var(--r-sm);
background: var(--bg);
border: 1px solid var(--line);
}
.beneficio__icon svg {
width: 22px; height: 22px;
fill: none; stroke: var(--accent); stroke-width: 1.35;
stroke-linecap: round; stroke-linejoin: round;
}
.beneficio__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; }
.beneficio__text { margin-top: 0.5rem; max-width: 58ch; color: var(--ink-2); text-wrap: pretty; }
/* --------------------------------------------------------------------------
13. EQUIPE
-------------------------------------------------------------------------- */
.equipe__grid {
/* Guardado numa variável porque a linha órfã do responsivo precisa do mesmo
valor para reconstruir a largura de uma coluna. */
--equipe-vao: calc(var(--sp-3) + 20px);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--equipe-vao);
}
.doutor__foto {
display: block;
width: 100%;
/* Sem isso o atributo height="" do HTML entra como dica de apresentação e
anula o aspect-ratio — a moldura sairia com a altura original da foto. */
height: auto;
aspect-ratio: 3 / 4; /* o mesmo enquadramento do placeholder que saiu */
object-fit: cover;
border-radius: var(--r-md);
background: var(--bg-tone); /* segura o espaço enquanto carrega */
transition: transform var(--t-base) var(--ease);
}
/* As três fotos são mais altas que 3/4, então o corte é vertical. O ponto de
ancoragem é por arquivo porque cada rosto está numa altura diferente do
original: alinhados, os três ficam na mesma faixa do card. */
.doutor__foto { object-position: center top; }
.doutor__foto[src*="equipe-01"] { object-position: center 10%; }
.doutor__foto[src*="equipe-03"] { object-position: center bottom; }
.doutor:hover .doutor__foto { transform: translateY(-4px); }
.doutor__nome { margin-top: var(--sp-2); font-size: 1.0625rem; font-weight: 500; }
.doutor__esp { font-size: 0.9375rem; color: var(--ink-2); text-wrap: pretty; }
/* O registro é continuação da linha da especialidade, não um rodapé do card:
entra logo abaixo dela, com a folga de uma entrelinha. */
.doutor__cro { margin-top: 0.15rem; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--ink-2); }
/* --------------------------------------------------------------------------
14. DEPOIMENTOS — 1/3 texto + 2/3 malha de cards
-------------------------------------------------------------------------- */
.depoimentos__inner {
display: grid;
grid-template-columns: 1.1fr 2fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.depoimentos__aside {
position: sticky;
top: calc(var(--header-h) + var(--sp-4));
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-3);
}
.depoimentos__aside .btn { margin-top: var(--sp-1); }
/* columns dá as alturas desiguais do print de referência */
.depoimentos__grid { columns: 2; column-gap: var(--sp-3); }
.depo {
break-inside: avoid;
margin-bottom: var(--sp-3);
padding: var(--sp-3);
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-md);
transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.depo:hover { box-shadow: var(--sh-1); transform: translateY(-3px); }
.depo__estrelas { display: flex; gap: 2px; margin-bottom: 0.75rem; }
.depo__estrelas svg { width: 15px; height: 15px; fill: var(--accent); }
.depo__texto { font-size: 0.9375rem; color: var(--ink-2); text-wrap: pretty; }
.depo__autor {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: var(--sp-2);
padding-top: var(--sp-2);
border-top: 1px solid var(--line-soft);
font-size: 0.875rem;
font-weight: 500;
}
/* Nome em cima, tempo de acompanhamento embaixo — evita a linha quebrar
dentro de cards estreitos. */
.depo__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.depo__nome { font-weight: 500; color: var(--ink); }
.depo__desde { font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); }
.depo__inicial {
display: grid;
place-items: center;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--accent-3);
color: var(--accent-2);
font-size: 0.8125rem;
flex: none;
}
/* --------------------------------------------------------------------------
15. FAQ — acordeão
-------------------------------------------------------------------------- */
.acordeao { border-top: 1px solid var(--line); }
.acordeao__item { border-bottom: 1px solid var(--line); }
.acordeao__botao {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
width: 100%;
min-height: 64px;
padding-block: var(--sp-2);
text-align: left;
font-size: var(--fs-h3);
font-weight: 400;
color: var(--ink);
transition: color var(--t-base) var(--ease);
}
.acordeao__botao:hover { color: var(--accent); }
.acordeao__botao[aria-expanded="true"] { color: var(--accent); font-weight: 500; }
.acordeao__sinal {
position: relative;
width: 34px; height: 34px;
flex: none;
border: 1px solid var(--line);
border-radius: 50%;
transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.acordeao__sinal::before,
.acordeao__sinal::after {
content: '';
position: absolute;
inset: 50% auto auto 50%;
width: 12px; height: 1.5px;
background: currentColor;
transform: translate(-50%, -50%);
transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.acordeao__sinal::after { transform: translate(-50%, -50%) rotate(90deg); }
.acordeao__botao[aria-expanded="true"] .acordeao__sinal { border-color: var(--accent); background: var(--accent-3); }
.acordeao__botao[aria-expanded="true"] .acordeao__sinal::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.acordeao__painel {
overflow: hidden;
height: 0;
color: var(--ink-2);
}
.acordeao__painel > p {
padding-bottom: var(--sp-3);
max-width: 68ch;
text-wrap: pretty;
/* Inerte em navegador sem dicionário pt-BR; quando existe, ajuda a justificar. */
hyphens: auto;
}
/* Justificado só quando a medida comporta. De 561px para cima a linha fica com
60 a 81 caracteres e o pior vão entre palavras para em 2,6x o espaço natural
da fonte. A 375px a linha cai para ~39 caracteres e esse vão vai a 6,2x —
rio visível no meio do parágrafo. Por isso o mobile fica alinhado à esquerda. */
@media (min-width: 561px) {
.acordeao__painel > p { text-align: justify; }
}
/* Estado sem JS: tudo aberto e legível */
html:not(.has-js) .acordeao__painel { height: auto; }
/* --------------------------------------------------------------------------
16. CTA FINAL — bloco escuro (os 30%)
-------------------------------------------------------------------------- */
.cta-final {
padding-block: var(--sp-section);
background: var(--bg-deep);
color: #fff;
}
.cta-final__inner {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.cta-final__titulo {
font-size: var(--fs-h2);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
text-wrap: balance;
}
.cta-final__titulo-soft { font-weight: 300; color: rgba(255, 255, 255, .72); }
.cta-final__texto {
margin-top: var(--sp-3);
max-width: 48ch;
font-size: var(--fs-lead);
color: rgba(255, 255, 255, .85);
text-wrap: pretty;
}
.cta-final__acoes {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
justify-content: flex-end;
}
/* --------------------------------------------------------------------------
17. RODAPÉ
-------------------------------------------------------------------------- */
.site-footer {
padding-top: var(--sp-6);
padding-bottom: var(--sp-4);
background: #4F4F4F;
color: rgba(255, 255, 255, .78);
font-size: 0.9375rem;
}
.site-footer__top {
display: grid;
grid-template-columns: 1.6fr repeat(3, 1fr);
gap: var(--sp-4);
padding-bottom: var(--sp-5);
}
.site-footer .brand__text { color: #fff; }
.site-footer .brand__text-light { color: rgba(255, 255, 255, .7); }
.site-footer__sobre { margin-top: var(--sp-2); max-width: 34ch; text-align: justify; }
.site-footer__titulo {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
margin-bottom: var(--sp-2);
}
.site-footer__col ul { display: grid; gap: 0.6rem; }
.site-footer__col a {
transition: color var(--t-base) var(--ease);
border-bottom: 1px solid transparent;
padding-bottom: 1px;
}
.site-footer__col a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.site-footer__contato { font-style: normal; }
.site-footer__base {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--sp-2);
margin-top: var(--sp-4);
padding-top: var(--sp-3);
border-top: 1px solid rgba(255, 255, 255, .18);
font-size: 0.8125rem;
color: rgba(255, 255, 255, .65);
}
/* --------------------------------------------------------------------------
18. ESTADOS DE ANIMAÇÃO
Só escondem quando há JS — sem JS a página nasce inteira e visível.
-------------------------------------------------------------------------- */
html.has-js [data-reveal],
html.has-js [data-stagger] > *,
html.has-js [data-sequencia] > *,
html.has-js [data-abertura] > * {
opacity: 0;
will-change: opacity, transform;
}
/* Rede de segurança: se o GSAP não carregar (offline/CDN fora), tudo reaparece */
html.has-js.motion-off [data-reveal],
html.has-js.motion-off [data-stagger] > *,
html.has-js.motion-off [data-sequencia] > *,
html.has-js.motion-off [data-abertura] > * {
opacity: 1;
transform: none;
will-change: auto;
}
/* --------------------------------------------------------------------------
19. RESPONSIVO
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.hero__inner { grid-template-columns: 1fr; }
.hero__media { max-width: 520px; margin-inline: auto; }
.cards { grid-template-columns: repeat(2, 1fr); }
.equipe__grid { grid-template-columns: repeat(2, 1fr); }
/* Em duas colunas o terceiro card sobra sozinho na segunda linha e ficaria
encostado à esquerda. Ele passa a ocupar a linha inteira e se centra com
a largura exata de uma coluna. */
.equipe__grid .doutor:last-child {
grid-column: 1 / -1;
justify-self: center;
width: calc((100% - var(--equipe-vao)) / 2);
}
.diferenciais__inner,
.depoimentos__inner { grid-template-columns: 1fr; }
.diferenciais__aside,
.depoimentos__aside { position: static; }
.cta-final__inner { grid-template-columns: 1fr; }
.cta-final__acoes { justify-content: flex-start; }
.site-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
.nav {
position: fixed;
inset: var(--header-h) 0 auto 0;
background: rgba(255, 255, 255, .97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
padding: var(--sp-2) var(--gutter) var(--sp-4);
clip-path: inset(0 0 100% 0);
opacity: 0;
pointer-events: none;
transition: clip-path 360ms var(--ease), opacity var(--t-base) var(--ease);
}
.nav.is-open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
.nav__list { flex-direction: column; gap: 0; }
.nav__list a { padding: 0.9rem 0; font-size: 1.0625rem; border-bottom: 1px solid var(--line-soft); }
.nav__list a::after { display: none; }
.nav-toggle { display: flex; }
.header__cta { display: none; }
/* Em três colunas os rótulos longos ("Atendimentos realizados") quebrariam
em coluna de 95px. Duas colunas, e a terceira métrica ocupa a linha
inteira — o justify-items: center da grade já a centra ali. */
.metricas__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.metricas__grid .metrica:last-child { grid-column: 1 / -1; }
.depoimentos__grid { columns: 1; }
}
@media (max-width: 560px) {
:root { --header-h: 68px; }
.cards { grid-template-columns: 1fr; }
.equipe__grid { grid-template-columns: 1fr 1fr; }
.site-footer__top { grid-template-columns: 1fr; }
.hero__badge { left: 0; padding: 0.85rem 1.1rem; }
.hero__actions .btn { flex: 1 1 100%; }
.manifesto { max-width: none; }
.mapa { aspect-ratio: 4 / 3; }
}
/* --------------------------------------------------------------------------
20. MOVIMENTO REDUZIDO
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
html.has-js [data-reveal],
html.has-js [data-stagger] > *,
html.has-js [data-sequencia] > *,
html.has-js [data-abertura] > * { opacity: 1; transform: none; }
/* O círculo e a cor viram troca instantânea (a regra acima já zera a
duração). O deslocamento de 12px, não: sem tempo para percorrer, ele
seria só um salto. */
.btn:hover .btn__label,
.btn:hover .btn__icon { transform: none; }
/* A fita é movimento autônomo e contínuo — o caso mais direto do que a
preferência pede. Fica parada, mostrando as primeiras fotos. */
.carrossel--pronto .carrossel__trilho { animation: none; }
}
/* --------------------------------------------------------------------------
21. IMPRESSÃO
-------------------------------------------------------------------------- */
@media print {
.site-header, .nav-toggle { display: none; }
html.has-js [data-reveal],
html.has-js [data-stagger] > *,
html.has-js [data-sequencia] > *,
html.has-js [data-abertura] > * { opacity: 1 !important; transform: none !important; }
.acordeao__painel { height: auto !important; }
body { color: #000; }
}