/* ============================================================
home: hero com foto de fundo e faixa de convenios
============================================================ */
/* ---------- hero com foto ----------
A foto entra como ![]()
, nao como background, por tres motivos:
ela conta como LCP para o Google, aceita alt, e quando o arquivo nao existe
o proprio navegador avisa (evento error) e a gente devolve a hero antiga,
sem ninguem ver icone de imagem quebrada. */
/* 🔴 Altura amarrada a largura por causa da foto: ela e 3:2, entao a sala so
aparece inteira quando a altura chega a dois tercos da largura. 64vw deixa
ela quase completa em tela de notebook. O teto de 860px existe porque em
monitor largo a hero completa passaria de 1200px e empurraria o site inteiro
para baixo da dobra. */
.hero-foto{min-height:clamp(540px,64vw,860px);display:flex;align-items:center;padding:3.4rem 0}
.hero-foto .col{position:relative;z-index:3;width:min(1120px,calc(100% - 3rem))}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center;z-index:1}
/* o veu: garante a leitura do texto por cima de qualquer foto.
Vai de papel solido na esquerda ate transparente na direita, que e onde
o assunto da foto deve estar. Sem isso, foto clara come o titulo.
🔴 Segura em .95 ate os 52%, que e ate onde o texto pode ir (ver a regra de
largura abaixo). Antes caia cedo demais e a segunda linha do titulo ficava
sobre a foto: passava numa foto clara e sumiria numa escura. */
.hero-foto::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(100deg,
rgba(252,253,254,.94) 0%,
rgba(252,253,254,.84) 32%,
rgba(252,253,254,.74) 48%,
rgba(252,253,254,.3) 66%,
rgba(252,253,254,0) 100%)}
/* 🔴 O texto nao pode passar da parte opaca do veu. Sem isto o h1 ia ate a
borda da coluna, onde o veu ja esta quase transparente. */
.hero-foto:not(.sem-foto) .col > *{max-width:min(660px,58%)}
@media(max-width:1000px){ .hero-foto:not(.sem-foto) .col > *{max-width:min(660px,72%)} }
/* sem foto (arquivo ausente): some tudo e a hero volta a ser a de antes */
.hero-foto.sem-foto{min-height:0;display:block;padding:4.4rem 0 3.5rem}
.hero-foto.sem-foto .hero-img,
.hero-foto.sem-foto::after{display:none}
/* com foto, a bolha em degrade nao e mais necessaria e so suja */
.hero-foto:not(.sem-foto)::before{display:none}
/* 🔄 ANTES AQUI EMPILHAVA (foto em cima, texto embaixo em fundo solido), com a
justificativa de que sobrepor reprovaria em contraste. Estava errado: o que
faltava era VIRAR A DIRECAO DO VEU.
No desktop o texto fica a esquerda, entao o degrade e horizontal. No celular
o texto ocupa a largura toda, entao ele precisa ser VERTICAL: transparente
em cima, onde a sala aparece, e solido embaixo, onde o texto le.
Assim o celular tem a MESMA composicao do desktop, que e o que ele pediu.
🔴 O contraste disto e medido em pixel de verdade por contraste-hero.js,
nas larguras de celular. Mexeu no veu ou trocou a foto: rodar de novo. */
@media(max-width:700px){
/* a altura cresce com a largura da tela, mas com teto: a hero nao pode
empurrar o resto da home toda para baixo da dobra */
/* 🔴 A altura precisa SOBRAR em relacao ao texto, senao o bloco de texto
ocupa tudo e a foto nao aparece: era o que acontecia com 700px de teto.
Com 88vh sobram uns 200px de foto acima do texto num aparelho comum, que
e o que faz a composicao ler igual a do desktop. */
.hero-foto:not(.sem-foto){display:flex;align-items:flex-start;
min-height:min(88vh,780px);padding:2rem 0 0}
/* a foto volta a ser fundo, como no desktop. object-position um pouco acima
do centro para o recorte vertical pegar as poltronas e a estante, nao o teto */
.hero-foto:not(.sem-foto) .hero-img{position:absolute;inset:0;
width:100%;height:100%;aspect-ratio:auto;max-height:none;
object-fit:cover;object-position:center}
/* 🔴 o veu VERTICAL, solido em cima e transparente embaixo. Numa caixa alta
e estreita a foto cabe inteira na vertical, entao o teto fica no alto e os
moveis entre 60% e 90% da altura. Por isso o texto vai EM CIMA, sobre o
teto e a parede, que sao lisos, e os moveis ficam livres embaixo.
Os valores saem da medicao de contraste em pixel, nao do olho. */
.hero-foto:not(.sem-foto)::after{display:block;
background:linear-gradient(to bottom,
rgba(252,253,254,.76) 0%,
rgba(252,253,254,.72) 42%,
rgba(252,253,254,.68) 58%,
rgba(252,253,254,.34) 76%,
rgba(252,253,254,.06) 90%,
rgba(252,253,254,0) 100%)}
/* na largura do celular o texto usa a coluna inteira */
.hero-foto:not(.sem-foto) .col{padding-top:0}
.hero-foto:not(.sem-foto) .col > *{max-width:none}
}
/* ---------- faixa de convenios ---------- */
/* 🔴 O espaco vertical e curto DE PROPOSITO: a faixa tinha 196px de altura para
44px de conteudo, ou seja, 152px de azul em volta do texto. E uma faixa de
apoio entre a hero e o resto da home, nao uma secao: nao pode pesar como uma. */
.faixa-conv{background:var(--nevoa);border-top:1px solid var(--linha);
border-bottom:1px solid var(--linha);padding:.45rem 0 .5rem;overflow:hidden}
.faixa-conv .rotulo{text-align:center;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--suave);font-weight:700;line-height:1.25;margin-bottom:.35rem}
/* As copias correm juntas. O passo e a largura de UMA copia, medida pelo js:
ao andar exatamente uma copia, a proxima cai no lugar da anterior e a volta
e invisivel. 🔴 Em px e nao em %: com -50% so funcionaria com exatamente duas
copias, e o js clona quantas forem precisas para cobrir a tela (com 6 nomes
curtos, duas copias deixavam um buraco na direita). */
.esteira{display:flex;width:max-content;
--passo:50%;
animation:correr 42s linear infinite}
/* da esquerda para a direita: comeca deslocada e volta para zero */
@keyframes correr{
from{transform:translate3d(calc(var(--passo) * -1),0,0)}
to{transform:translate3d(0,0,0)}
}
.faixa-conv:focus-within .esteira{animation-play-state:paused}
.metade{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem;flex:0 0 auto;position:relative}
/* a barra de volta: marca onde a lista de convenios termina e recomeca.
Precisa ser OBVIAMENTE diferente dos losangos que separam um nome do outro,
senao vira mais um ponto e a esteira parece uma lista infinita aleatoria.
Por isso: um FIO vertical alto, com muito ar dos dois lados. Era 3px e ficava
grossa demais para o peso do resto da faixa. Largura vai em px, nao em rem:
fio de divisao nao acompanha tamanho de fonte. */
.metade::before{content:"";flex:0 0 auto;width:1px;height:22px;
background:var(--turquesa);opacity:.5;margin:0 1.6rem 0 1rem}
/* 🔑 A faixa nao tem logo e nao vai ter: a clinica nao tem os arquivos e logo de
terceiro e marca registrada. Entao o nome precisa PARECER a peca, e nao uma
legenda esperando uma imagem. Por isso vai no serif da marca, do tamanho de um
nome proprio, com um losango turquesa separando um do outro. */
.marca-conv{display:flex;align-items:center;gap:2.6rem;height:34px;
flex:0 0 auto;text-decoration:none}
.marca-conv .nome{font-family:var(--display);font-size:1.16rem;font-weight:600;
letter-spacing:-.005em;white-space:nowrap;color:var(--tinta);opacity:.78;
transition:opacity .2s,color .2s}
.marca-conv:hover .nome{opacity:1;color:var(--turquesa)}
/* o separador: losango pequeno, no meio do vao entre um nome e o proximo */
.marca-conv::after{content:"";width:5px;height:5px;flex:0 0 auto;
background:var(--turquesa-claro);transform:rotate(45deg);border-radius:1px}
/* as pontas somem em vez de cortar no seco */
@media(min-width:700px){
.faixa-conv .esteira-caixa{
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
}
.faixa-conv .pe{text-align:center;font-size:.9rem;line-height:1.3;margin:.4rem 0 0}
.faixa-conv .pe a{font-size:.9rem;color:var(--turquesa);font-weight:700;text-decoration:none;
border-bottom:2px solid transparent;padding-bottom:.15rem;transition:border-color .18s}
.faixa-conv .pe a:hover{border-bottom-color:var(--turquesa)}
/* 🔴 Movimento continuo atrapalha quem tem sensibilidade a movimento, e este e
um site de saude mental: quem chega pode estar ansioso. Com a preferencia do
sistema ligada, a esteira para e vira uma lista centralizada. */
@media(prefers-reduced-motion:reduce){
.esteira{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
.metade{flex-wrap:wrap;justify-content:center;gap:1.4rem 2.2rem;padding-right:0}
.metade[aria-hidden="true"]{display:none}
.faixa-conv .esteira-caixa{-webkit-mask-image:none;mask-image:none}
}
/* ---------- faixa de provas ----------
A home afirmava qualidade e nao provava nenhuma. Estes quatro numeros sao o
que a clinica tem de concreto, e o primeiro deles (o prazo do laudo) e o
diferencial mais forte do briefing inteiro: vivia enterrado numa pagina de
especialidade. Sem borda e sem cartao de proposito: cartao aqui viraria a
sexta grade identica da pagina. */
.provas{padding:3.2rem 0 3.4rem}
.grade-provas{display:grid;gap:2.2rem 2.6rem;
grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.grade-provas > div{padding-top:1.1rem;border-top:2px solid var(--turquesa-claro)}
.grade-provas b{display:block;font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.5rem);
font-weight:700;line-height:1;letter-spacing:-.025em;color:var(--turquesa);margin-bottom:.55rem}
.grade-provas span{display:block;font-size:.94rem;line-height:1.6;color:var(--suave);max-width:24rem}
/* ---------- depoimentos com peso ----------
Eram tres citacoes do tamanho de uma legenda, em cinza. Sao paciente real
falando, de 2010 a 2025: e a prova social mais forte que existe num site de
clinica, e estava tratada como rodape. */
#depoimentos .deps{gap:2.4rem 2.6rem;margin-top:1.4rem}
#depoimentos .dep{border-left:0;padding-left:0;position:relative;padding-top:2.2rem}
/* a aspa como marca de agua, no lugar da barrinha lateral */
#depoimentos .dep::before{content:"\201C";position:absolute;top:-.55rem;left:-.3rem;
font-family:var(--display);font-size:4.6rem;line-height:1;color:var(--turquesa-claro);
opacity:.75;pointer-events:none}
#depoimentos .dep p{position:relative;font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.55;
color:var(--tinta);margin-bottom:.9rem}
#depoimentos .dep cite{display:block;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;
font-weight:700;color:var(--suave)}
/* assinaturas alinhadas embaixo: com citacoes de tamanhos diferentes elas
ficavam em tres alturas e a fileira parecia torta */
#depoimentos .dep{display:flex;flex-direction:column}
#depoimentos .dep cite{margin-top:auto;padding-top:.3rem}
/* 🔴 A linha de apoio da hero usa um cinza mais escuro que o do resto do site.
Motivo: o --suave (#5B7280) da so 4.95 de contraste ate em fundo branco puro,
entao sobre a foto ele virava o gargalo e obrigava o veu a ficar quase opaco.
Com este tom o veu pode clarear e a sala aparecer. Medido com contraste-hero.js. */
.hero-foto:not(.sem-foto) .lead{color:#3D5162}
/* ---------- as salas em mosaico ----------
Eram quatro cartoes iguais de 150px, a quinta grade identica da pagina. As
fotos das salas sao o segundo ativo visual mais forte do site, depois da hero.
Aqui uma ocupa quatro vezes a area das outras e a fileira deixa de ser uma
grade regular. O #espaco na frente e para vencer o