/* ============================================================
BASE DOS MODELOS DE DEMONSTRAÇÃO — Vistonanet
============================================================
Uma folha para todas as demos. A paleta NÃO mora aqui:
cada modelo define as suas variáveis no próprio .
⛔ Não escrever cor fixa neste arquivo (fora dos neutros).
Cor fixa aqui = todo modelo com a mesma cara, que é
exatamente o que a vitrine existe para desmentir.
⚠️ A paleta da Vistonanet (bronze sobre preto) vale para as
páginas DA VISTONANET. Modelo de cliente usa a cor do
NEGÓCIO dele — dentista não é bronze, obra não é bronze.
O que vale para todo mundo é a regra de alinhamento do
identidade/design-guide.md: nada solto, nada no vazio.
============================================================ */
:root{
--p:#0B3D6B; /* primária — CTA, ícone, destaque */
--p-esc:#082B4C; /* primária escura — hover, profundidade */
--a:#F26522; /* acento — urgência, badge (usar pouco) */
--escuro:#10141A; /* fundo escuro / cabeçalho */
--txt:#171A1F; /* texto principal */
--txt-2:#5B646F; /* texto secundário */
--bg:#FFFFFF; /* fundo */
--bg-2:#F4F6F8; /* fundo alternado */
--linha:#E3E7EC; /* bordas */
--raio:12px;
--max:1160px;
--sombra:0 1px 2px rgba(16,20,26,.05), 0 8px 24px rgba(16,20,26,.06);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
color:var(--txt);background:var(--bg);
line-height:1.6;-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.container{max-width:var(--max);margin:0 auto;padding:0 20px;width:100%;}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;font-weight:800;}
h2{font-size:clamp(26px,3.6vw,40px);}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em;}
.olho{
display:block;font-size:11px;font-weight:700;text-transform:uppercase;
letter-spacing:.18em;color:var(--p);margin-bottom:12px;
}
.sub{color:var(--txt-2);font-size:clamp(16px,1.9vw,18px);max-width:62ch;}
section{padding:clamp(56px,7vw,88px) 0;}
.alt{background:var(--bg-2);}
.centro{text-align:center;}
.centro .sub{margin-left:auto;margin-right:auto;}
.cab{margin-bottom:clamp(32px,4vw,48px);}
/* ---------- Botões ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
background:var(--p);color:#fff;font-weight:700;font-size:16px;
padding:15px 26px;border-radius:var(--raio);border:0;cursor:pointer;
transition:transform .15s ease,background .15s ease;text-align:center;
}
.btn:hover{background:var(--p-esc);transform:translateY(-1px);}
.btn-2{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);}
.btn-2:hover{background:rgba(255,255,255,.1);}
.btn-zap{background:#25D366;color:#0A2E17;}
.btn-zap:hover{background:#1FBA57;}
.btn-linha{background:transparent;color:var(--p);border:1.5px solid var(--p);}
.btn-linha:hover{background:var(--p);color:#fff;}
.acoes{display:flex;gap:12px;flex-wrap:wrap;}
.centro .acoes{justify-content:center;}
/* ---------- Barra de urgência ---------- */
.urgencia{
background:var(--a);color:#fff;text-align:center;
padding:9px 16px;font-size:14px;font-weight:700;letter-spacing:.01em;
}
/* ---------- Cabeçalho ---------- */
header{
background:var(--escuro);color:#fff;position:sticky;top:0;z-index:90;
border-bottom:1px solid rgba(255,255,255,.08);
}
header .container{
display:flex;align-items:center;justify-content:space-between;
gap:18px;padding-top:14px;padding-bottom:14px;
}
.marca{font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.2;}
/* ⚠️ A linha da marca fica sobre o cabeçalho ESCURO. Usar --p puro aqui deixa
ela ilegível em toda paleta escura (azul sobre preto, grafite sobre preto).
Por isso ela é a primária CLAREADA, nunca a primária crua. */
.marca span{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:color-mix(in srgb,var(--p) 42%,#fff);opacity:.95;}
header nav ul{display:flex;gap:24px;align-items:center;}
header nav a{font-size:15px;color:rgba(255,255,255,.82);font-weight:500;}
header nav a:hover{color:#fff;}
.btn-topo{
background:var(--p);color:#fff;padding:11px 20px;border-radius:10px;
font-weight:700;font-size:15px;white-space:nowrap;
}
.btn-topo:hover{background:var(--p-esc);}
@media(max-width:900px){header nav{display:none;}}
/* ---------- Hero ---------- */
.hero{
background:var(--escuro);color:#fff;
padding:clamp(56px,8vw,96px) 0;position:relative;overflow:hidden;
}
.hero::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 80% at 82% 20%,rgba(255,255,255,.09),transparent 62%);
}
.hero .container{position:relative;z-index:1;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;}
.hero h1{font-size:clamp(31px,4.8vw,52px);margin-bottom:18px;}
/* Mesma armadilha da marca: o hero padrão é escuro, então o destaque do
título é a primária CLAREADA. Modelo de hero claro sobrescreve para --p. */
.hero h1 em{font-style:normal;color:color-mix(in srgb,var(--p) 50%,#fff);}
.hero .sub{color:rgba(255,255,255,.8);margin-bottom:28px;}
.selos{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;}
.selo{
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
padding:7px 14px;border-radius:100px;font-size:13px;font-weight:600;
display:inline-flex;align-items:center;gap:7px;
}
.selo b{color:color-mix(in srgb,var(--p) 40%,#fff);font-weight:700;}
@media(max-width:860px){
.hero-grid{grid-template-columns:1fr;}
/* Sem isso, o hero vira 1 coluna no celular e título/parágrafo/selos/botões
ficam colados na margem esquerda — regra de alinhamento do design-guide:
centralizado é o padrão, e aqui não havia exceção proposital nenhuma. */
.hero-grid > div{text-align:center;}
.hero-grid .selos{justify-content:center;}
.hero-grid .acoes{justify-content:center;}
.hero .acoes .btn{flex:1 1 100%;}
}
/* ---------- Cartão flutuante do hero ---------- */
.painel{
background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
border-radius:16px;padding:26px;backdrop-filter:blur(6px);
}
.painel h3{color:#fff;margin-bottom:6px;}
.painel p{color:rgba(255,255,255,.7);font-size:14px;margin-bottom:18px;}
.painel-item{
display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);
}
.painel-item:last-of-type{border-bottom:0;}
.painel-item .n{
width:26px;height:26px;border-radius:7px;background:var(--p);color:#fff;
font-size:13px;font-weight:800;display:grid;place-items:center;
}
.painel-item strong{display:block;font-size:15px;color:#fff;font-weight:650;}
.painel-item span{font-size:13.5px;color:rgba(255,255,255,.66);}
/* ---------- Herói CAPA: a foto no fundo inteiro ----------
Como o herói das demos passou a ser, decidido pelo dono em 30/07/2026: a foto
deixa de ser um retângulo emoldurado na coluna direita e vira o FUNDO da
seção; o texto mora sobre o scrim; e o painel de 3 passos CONTINUA onde
sempre esteve, na direita — só que agora como cartão sólido sobre a foto, e
não pousado em cima de uma moldura.
⚠️ A primeira versão (mesmo dia, mais cedo) tinha jogado o painel para uma
faixa na base e deixado a direita vazia. O dono viu renderizado e cortou:
*"mantenha o bloco da direita também, pois agora ficou vazio — a alteração é
no fundo"*. É o caso didático de layout que só se julga renderizado.
⛔ Só entra em foto LARGA (16:9 ou 3:2). Retrato 4:5 esticado na largura
cheia sobe borrado em tela retina e perde metade do assunto no recorte — por
isso as fotos de herói foram RE-RECORTADAS largas na fonte, e não esticadas. */
.hero-capa{padding:clamp(56px,8vw,92px) 0;}
.hero-capa .capa-foto{position:absolute;inset:0;z-index:0;}
.hero-capa .capa-foto img{width:100%;height:100%;object-fit:cover;}
/* ⭐ O SCRIM ESCURECE, NÃO TINGE (02/08/2026) — e isto foi MEDIDO, não achado.
Ele usava `var(--escuro)`, que é a cor de marca da demo. Onde essa cor é
saturada, 84% dela não escurece a foto: pinta um VÉU por cima dela. O croma
do `--escuro` ordena o estrago com precisão — piscinas `#04324e` (croma 74),
banheiros-quimicos 70, lavajato 63, eletrodomesticos 57, limpeza-comercial
52, lavanderia 46: nessas seis a foto vira campo de cor. No outro extremo,
chaveiro é `#000000` (croma 0) e é justamente a que sempre pareceu certa.
⚠️ Por muito tempo se atribuiu isso à FOTO, e duas medições provaram que não:
a petshop-vet tem luminância 125 contra 100 da chaveiro — a que "some" é a
mais clara das duas. Nem brilho da foto nem desvio-padrão explicavam; o que
explicou foi o croma do scrim.
⛔ Por isso o scrim tem variável PRÓPRIA, e ela nasce neutra. A paleta da
demo continua mandando em tudo o mais (cabeçalho, painel, selo, botões); só
o véu deixa de carregar cor. Uma demo que queira o véu na marca sobrescreve
`--scrim` — mas o padrão é não tingir, porque a função do scrim é
legibilidade, não identidade.
⚠️ A opacidade NÃO muda aqui de propósito: mexer nela altera o contraste do
texto nas 23 de uma vez, e é decisão separada. */
:root{ --scrim:#0c0e12; }
/* Substitui o brilho radial do herói padrão: sobre foto ele não faz nada, e
quem decide legibilidade aqui é o degradê lateral. Mesma especificidade do
`.hero::after`, então o que vale é a ordem — esta regra vem depois.
O lado do painel volta a escurecer (26% → 58%): o cartão é sólido, mas a
moldura dele encostava em foto clara e o contorno sumia. */
.hero-capa::after{
z-index:1;
background:linear-gradient(97deg,
color-mix(in srgb,var(--scrim) 94%,transparent) 0%,
color-mix(in srgb,var(--scrim) 82%,transparent) 30%,
color-mix(in srgb,var(--scrim) 46%,transparent) 58%,
color-mix(in srgb,var(--scrim) 58%,transparent) 100%);
}
.hero-capa .container{z-index:2;position:relative;}
/* ⛔ FAIXA DE PROTEÇÃO ATRÁS DO TEXTO — 03/08/2026, achado do dono: *"não dá pra
ler o texto direito com essa imagem de chaveiro... não dá pra ler nada"*.
⭐ A CAUSA, medida: o scrim acima é LATERAL (97deg), desenhado para texto à
esquerda com o painel à direita — forte na borda (94%) e FRACO no meio (46%
em 58%). As demos de herói CENTRALIZADO jogam o texto exatamente no ponto
mais fraco do véu. Na chaveiro isso cai sobre o reflexo dourado estourado da
fechadura: o parágrafo media 1,50:1 e o título 2,32:1 (WCAG pede 4,5 e 3).
⛔ Por isso NÃO se troca a foto: o buraco é do gradiente, não da imagem, e a
próxima foto clara cairia nele igual. E por isso a faixa é ADITIVA — ela não
toca no gradiente lateral, que já é decisão tomada e afeta as 23. Só
acrescenta escurecimento ONDE HÁ TEXTO, elíptico e sem borda dura, para não
virar uma caixa desenhada sobre a foto.
Régua: `node scripts/prova-legibilidade.js` mede o contraste real, servido por
HTTP, e reprova sozinha. ⚠️ Servido por HTTP de propósito: por `file://` as
fotos não carregam, o herói mede preto e a demo mais ilegível aparece como a
melhor do lote — foi o que aconteceu quatro vezes antes desta régua existir. */
.hero-capa .container::before{
content:"";
position:absolute;
inset:-8% -10%;
z-index:-1;
pointer-events:none;
background:radial-gradient(ellipse at center,
color-mix(in srgb,var(--scrim) 80%,transparent) 0%,
color-mix(in srgb,var(--scrim) 66%,transparent) 42%,
color-mix(in srgb,var(--scrim) 34%,transparent) 68%,
transparent 84%);
}
/* ⛔ A faixa ESCURA serve a texto CLARO, e PREJUDICA texto escuro — medido no
mesmo dia: a `clinica` escreve o herói em `rgb(18,33,31)` sobre foto clara
(é a única que inverte o padrão), e com a faixa ela foi de 2 para 4 trechos
reprovando. Aqui ela volta ao que era.
⚠️ Isto NÃO é conserto da clinica — é parar de piorá-la. Ela continua
reprovando (1,00:1) e precisa de tratamento próprio: faixa clara, ou texto
claro, ou outra foto. Decisão do dono, ainda em aberto.
⭐ Marcar por CLASSE e não por nome de pasta seria melhor; fica como está
porque hoje é uma exceção só, e inventar mecanismo para um caso é adiantar
estrutura que ainda não se paga. Aparecendo a segunda, vira classe. */
.hero-capa[data-texto="escuro"] .container::before{ content:none; }
/* O selo do herói padrão é quase transparente (branco a 9%) porque lá o fundo
é chapado. Sobre FOTO ele deixa o texto do selo cair em cima de área clara e
sumir — então na capa o chip carrega o próprio contraste. */
.hero-capa .selo{
background:color-mix(in srgb,var(--escuro) 66%,transparent);
border-color:rgba(255,255,255,.24);
}
/* O painel: sólido, pela mesma razão do .hero-midia — vidro em cima de foto é
ruído, e aqui a foto está atrás dele inteiro, não só na borda. */
.hero-capa .painel{
background:var(--escuro);
border-color:rgba(255,255,255,.16);
backdrop-filter:none;
box-shadow:0 16px 40px rgba(0,0,0,.38);
}
@media(max-width:860px){
/* Em coluna estreita o texto ocupa a largura toda, então o scrim deixa de
ser lateral e vira vertical — senão a última linha cai na parte clara da
foto e some.
⚠️ E ele é MAIS LEVE do que a intuição pede: a primeira versão usava
80–92% e o celular virava um herói escuro com fantasma de foto atrás —
ou seja, a capa deixava de existir justamente onde está quase todo o
tráfego. O escuro fica onde o texto está (topo e base); o meio abre. */
.hero-capa::after{
background:linear-gradient(178deg,
color-mix(in srgb,var(--scrim) 84%,transparent) 0%,
color-mix(in srgb,var(--scrim) 64%,transparent) 46%,
color-mix(in srgb,var(--scrim) 86%,transparent) 100%);
}
/* O herói padrão manda o botão ocupar a linha inteira abaixo de 860px, o que
no tablet (768) vira duas barras verdes do tamanho da tela. Na capa o botão
só estica quando a tela é estreita de verdade. */
.hero-capa .acoes .btn{flex:0 1 auto;}
}
@media(max-width:560px){
.hero-capa .acoes .btn{flex:1 1 100%;}
}
/* ---------- Faixa de números ---------- */
.numeros{background:var(--p);color:#fff;padding:26px 0;}
.numeros .container{
display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;
}
.numeros b{display:block;font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1.1;overflow-wrap:anywhere;}
.numeros span{font-size:13.5px;opacity:.86;}
/* ⛔ minmax(0,1fr), nunca 1fr: `1fr` e minmax(auto,1fr), e o min-content de uma palavra
* sem espaco vence a coluna. Medido em 02/09/2026 a 360px: "Acompanhamento" a 24px
* negrito = 219px numa coluna de 156px -> a grade estourava e a pagina inteira
* ganhava 22px de rolagem horizontal (so o petshop-vet, mas a classe e das 28).
* `hyphens:auto` foi medido e RECUSADO: o Chromium partiu "Acompa-nhamento", no meio
* do digrafo. A cura de verdade e de COPY (palavra que cabe em ~150px a 24px, ate 12
* letras); o `overflow-wrap:anywhere` e so a rede para a pagina nunca rolar de lado. */
@media(max-width:700px){.numeros .container{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;}}
/* ---------- Grade de cards ---------- */
.grade{display:grid;gap:20px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:920px){.g-3,.g-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr;}}
.card{
background:var(--bg);border:1px solid var(--linha);border-radius:var(--raio);
padding:26px 24px;box-shadow:var(--sombra);
display:flex;flex-direction:column;gap:10px;
}
.card .ico{
width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
background:color-mix(in srgb,var(--p) 12%,transparent);color:var(--p);
font-size:20px;font-weight:800;margin-bottom:4px;
}
/* O quadrado carrega ICONE, nunca a inicial do nome do icone. Flagrante de 18/09/2026:
as 4 paginas de chaveiro estampavam V T K D C A, B # C A K, S M R, T M S -- e o dono
viu antes de qualquer regua. Nao estoura, nao corta, o contraste passa. */
.card .ico svg{width:22px;height:22px;display:block}
.card p{color:var(--txt-2);font-size:15px;}
.card .liga{margin-top:auto;padding-top:12px;color:var(--p);font-weight:700;font-size:14.5px;}
/* ---------- Etapas ---------- */
.etapas{counter-reset:e;display:grid;gap:20px;grid-template-columns:repeat(3,1fr);}
@media(max-width:820px){.etapas{grid-template-columns:1fr;}}
.etapa{
background:var(--bg);border:1px solid var(--linha);border-radius:var(--raio);
padding:26px 24px;position:relative;
}
.etapa::before{
counter-increment:e;content:counter(e);
position:absolute;top:-15px;left:24px;
width:32px;height:32px;border-radius:9px;background:var(--p);color:#fff;
display:grid;place-items:center;font-weight:800;font-size:15px;
}
.etapa h3{margin:10px 0 8px;}
.etapa p{color:var(--txt-2);font-size:15px;}
/* ---------- Depoimentos ---------- */
.dep{
background:var(--bg);border:1px solid var(--linha);border-radius:var(--raio);
padding:26px 24px;display:flex;flex-direction:column;gap:14px;
}
.estrelas{color:#F5A623;font-size:15px;letter-spacing:2px;}
.dep p{font-size:15.5px;color:var(--txt);}
.dep footer{
display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;
padding-top:6px;margin-top:auto;
}
.dep .av{
width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:color-mix(in srgb,var(--p) 14%,transparent);color:var(--p);
font-weight:800;font-size:15px;
}
.dep .quem{font-size:14.5px;font-weight:700;line-height:1.3;}
.dep .quem span{display:block;font-weight:500;font-size:13px;color:var(--txt-2);}
/* ---------- Lista com check ---------- */
.checks{display:grid;gap:12px;}
.checks li{
display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
font-size:15.5px;
}
.checks li::before{
content:"✓";color:var(--p);font-weight:800;font-size:15px;
line-height:1.5;text-align:center;
}
/* ---------- Área de atendimento ---------- */
.bairros{display:flex;flex-wrap:wrap;gap:9px;}
.bairros span{
background:var(--bg);border:1px solid var(--linha);border-radius:100px;
padding:7px 15px;font-size:14px;color:var(--txt-2);
}
/* ---------- Formulário ---------- */
.form{
background:var(--bg);border:1px solid var(--linha);border-radius:16px;
padding:clamp(24px,3.5vw,34px);box-shadow:var(--sombra);
}
.campo{display:grid;gap:7px;margin-bottom:16px;}
.campo label{font-size:13.5px;font-weight:650;color:var(--txt);}
.campo input,.campo select,.campo textarea{
font-family:inherit;font-size:15.5px;color:var(--txt);
padding:13px 14px;border:1px solid var(--linha);border-radius:10px;
background:var(--bg);width:100%;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
outline:2px solid color-mix(in srgb,var(--p) 45%,transparent);
outline-offset:1px;border-color:var(--p);
}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
@media(max-width:560px){.dupla{grid-template-columns:1fr;}}
.form .btn{width:100%;}
.form .nota{font-size:13px;color:var(--txt-2);margin-top:12px;text-align:center;}
/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:820px;margin:0 auto;}
.faq details{
background:var(--bg);border:1px solid var(--linha);border-radius:var(--raio);
padding:18px 22px;
}
.faq summary{
font-weight:700;font-size:16.5px;cursor:pointer;list-style:none;
display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--p);font-size:22px;font-weight:700;line-height:1;}
.faq details[open] summary::after{content:"−";}
.faq details p{margin-top:12px;color:var(--txt-2);font-size:15.5px;}
/* ---------- CTA final ---------- */
.cta{background:var(--escuro);color:#fff;text-align:center;}
.cta h2{margin-bottom:14px;}
.cta .sub{color:rgba(255,255,255,.78);margin:0 auto 28px;}
/* ---------- Rodapé ---------- */
footer.pe{background:var(--escuro);color:rgba(255,255,255,.62);padding:44px 0 34px;
border-top:1px solid rgba(255,255,255,.09);font-size:14.5px;}
footer.pe .container{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;}
footer.pe h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px;
text-transform:uppercase;letter-spacing:.1em;}
footer.pe li{margin-bottom:9px;}
footer.pe a:hover{color:#fff;}
footer.pe .fim{
grid-column:1/-1;border-top:1px solid rgba(255,255,255,.09);
padding-top:20px;font-size:13px;color:rgba(255,255,255,.45);
}
@media(max-width:760px){footer.pe .container{grid-template-columns:1fr;gap:26px;}}
/* ---------- Barra de ação no celular ---------- */
.acao-mobile{display:none;}
@media(max-width:760px){
.acao-mobile{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
position:fixed;left:0;right:0;bottom:76px;z-index:80;
padding:10px 14px;background:rgba(255,255,255,.94);
backdrop-filter:blur(8px);border-top:1px solid var(--linha);
}
.acao-mobile .btn{padding:13px 10px;font-size:15px;}
body{padding-bottom:150px;}
}
/* ============================================================
PROVA SOCIAL DO GOOGLE
============================================================
Medido em 28/07/2026 nos dois melhores sites de chaveiro que o
dono achou: `maurochaveiro.com.br` (forte) e
`ederchaveiro24horasrj.com.br` (fraco). A diferença entre os
dois é este bloco — o forte estampa "★★★★★ 5.0 · 347 avaliações
no Google" com selo de verificada em cada uma; o fraco só cita
o @ do Instagram e não mostra nota nenhuma.
⛔ Sem logo do Google e sem widget de terceiro: "no Google" em
texto resolve, não pesa e não usa marca alheia.
============================================================ */
.google-nota{
display:flex;align-items:center;justify-content:center;gap:10px 16px;
flex-wrap:wrap;margin-top:18px;
background:var(--bg);border:1px solid var(--linha);border-radius:100px;
padding:11px 22px;box-shadow:var(--sombra);
}
.google-nota .n{font-size:22px;font-weight:800;line-height:1;letter-spacing:-.02em;}
.google-nota .estrelas{font-size:16px;}
.google-nota .qtd{font-size:14.5px;color:var(--txt-2);}
.google-nota .qtd b{color:var(--txt);font-weight:650;}
/* selo por avaliação — é ele que separa "depoimento no site" de
"avaliação que existe e dá para conferir" */
.dep .verificada{
display:inline-flex;align-items:center;gap:6px;
font-size:12px;font-weight:650;color:var(--p);
background:color-mix(in srgb,var(--p) 9%,transparent);
border-radius:100px;padding:4px 11px;align-self:flex-start;
}
.dep .verificada::before{content:"✓";font-weight:800;}
/* ---------- selo de disponibilidade ----------
Rótulo, não relógio: sem JS de horário. Site que anuncia 24h
está sempre disponível — e um script que erra o fuso diria
"fechado" para um negócio que atende de madrugada. */
.selo-online{
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
color:#fff;border-radius:100px;padding:6px 14px;
font-size:12.5px;font-weight:650;white-space:nowrap;
}
.selo-online .ponto{
width:8px;height:8px;border-radius:50%;background:#22C55E;
box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulsa 2.2s infinite;
}
@keyframes pulsa{
70%{box-shadow:0 0 0 9px rgba(34,197,94,0);}
100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}
}
@media(max-width:1040px){header .selo-online{display:none;}}
/* ---------- vídeos de atendimento ----------
O elemento que o melhor site do nicho tem e os outros não. Casa
com o pacote de vídeo que já está nos planos. */
/* Flex em vez de grid: fileira incompleta centraliza; fileira cheia fica igual. */
.videos{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;}
.videos .video{width:calc((100% - 54px)/4);}
@media(max-width:960px){.videos .video{width:calc((100% - 18px)/2);}}
@media(max-width:560px){.videos .video{width:100%;}}
.video{
background:var(--bg);border:1px solid var(--linha);border-radius:var(--raio);
overflow:hidden;box-shadow:var(--sombra);
}
.video .quadro{
position:relative;aspect-ratio:9/16;
background:linear-gradient(160deg,var(--escuro),color-mix(in srgb,var(--p) 55%,var(--escuro)));
display:grid;place-items:center;
}
.video .play{
width:52px;height:52px;border-radius:50%;
background:rgba(255,255,255,.92);color:var(--escuro);
display:grid;place-items:center;font-size:17px;padding-left:4px;
box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.video .dur{
position:absolute;right:9px;bottom:9px;
background:rgba(0,0,0,.66);color:#fff;border-radius:5px;
padding:2px 7px;font-size:11.5px;font-weight:650;
}
/* Rótulo do cartão reservado: no lugar de duração falsa, o quadro diz que
espera o vídeo do cliente — placeholder mudo parece defeito. */
.video .vaga{
position:absolute;left:50%;transform:translateX(-50%);bottom:12px;
background:rgba(0,0,0,.55);color:#fff;border-radius:6px;
padding:3px 11px;font-size:11px;font-weight:650;
letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.video p{padding:14px 16px;font-size:14px;color:var(--txt-2);}
/* ---------- feed de rede social ----------
⛔ Só em ramo de decisão pesquisada (reforma, clínica). Em
urgência, feed vaza o visitante no momento de maior intenção.
E aqui é HTML nosso: embed de terceiro pesa no celular e quebra
quando a API muda. Vira embed de verdade no site do cliente. */
.feed-topo{
display:flex;align-items:center;justify-content:space-between;
gap:16px;flex-wrap:wrap;margin-bottom:20px;
}
.feed-topo .quem{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;}
.feed-topo .av{
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:color-mix(in srgb,var(--p) 14%,transparent);color:var(--p);
font-weight:800;font-size:17px;
}
.feed-topo .arroba{font-weight:700;font-size:15.5px;}
.feed-topo .arroba span{display:block;font-weight:400;font-size:13.5px;color:var(--txt-2);}
.feed{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
@media(max-width:900px){.feed{grid-template-columns:repeat(3,1fr);}}
/* ⚠️ Bloco reservado DIZ que é de propósito: sem o rótulo dentro do quadro,
o dono leu a grade como imagem que não carregou (28/07/2026) — gradiente
bonito não conta a intenção. O rótulo é o que separa "espera conteúdo"
de "quebrou". */
.feed div{
aspect-ratio:1;border-radius:9px;
background:linear-gradient(145deg,
color-mix(in srgb,var(--p) 78%,#000) 0%,
color-mix(in srgb,var(--p) 42%,#fff) 100%);
position:relative;overflow:hidden;
}
.feed div::before{
content:"Sua foto aqui";
position:absolute;inset:0;z-index:1;
display:grid;place-items:center;text-align:center;
font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
color:rgba(255,255,255,.82);
}
.feed div::after{
content:"";position:absolute;inset:0;
background:radial-gradient(70% 60% at 30% 25%,rgba(255,255,255,.28),transparent 70%);
}
.feed div:nth-child(even){
background:linear-gradient(145deg,
color-mix(in srgb,var(--p) 52%,#fff) 0%,
color-mix(in srgb,var(--p) 85%,#000) 100%);
}
/* ---------- rodapé social ----------
No rodapé de propósito: no meio da página, ícone de rede rouba
clique de quem já estava decidindo. */
.redes{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.redes a{
display:inline-flex;align-items:center;gap:7px;
border:1px solid rgba(255,255,255,.16);border-radius:100px;
padding:7px 14px;font-size:13px;color:rgba(255,255,255,.8);
}
.redes a:hover{border-color:rgba(255,255,255,.4);color:#fff;}
@media(prefers-reduced-motion:reduce){
.selo-online .ponto{animation:none;}
}
/* ---------- fotografia ----------
⚠️ O que fazia a demo parecer crua NÃO era o CSS: era não ter
imagem nenhuma. As 11 páginas tinham ZERO ![]()
— e um site de
clínica sem nenhuma foto não tem como parecer real.
⛔ A régua de quais fotos podem entrar (e as que foram
rejeitadas, com o motivo) mora em fotos/FONTES.md. A que mais
importa: nada de rosto identificável numa demo, porque a demo
inventa gente com credencial.
Formato fixo por classe, não por foto. Assim a página nunca
"pula" ao carregar a imagem — o espaço já está reservado pelo
aspect-ratio, e o width/height no ![]()
confirma. */
.foto-bloco{
border-radius:var(--raio);overflow:hidden;
border:1px solid var(--linha);box-shadow:var(--sombra);
background:var(--bg-2);
}
.foto-bloco img{display:block;width:100%;height:100%;object-fit:cover;}
/* ⚠️ O teto de altura não é estética: sem ele, 16/9 na largura cheia
do container dá ~640px no desktop, e a foto de APOIO vira a dona da
tela — empurrando para baixo da dobra o texto que vende.
⚠️ E o teto tem efeito colateral: com aspect-ratio, max-height vira
max-width (~746px) e o bloco encolhe — sem margem automática ele
encostava na ESQUERDA do container, com vazio à direita. Por isso o
margin-inline:auto: bloco encolhido fica no CENTRO. */
.foto-larga{aspect-ratio:16/9;max-height:420px;margin-inline:auto;margin-bottom:36px;}
.foto-lado{aspect-ratio:4/3;}
.foto-dupla{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:36px;}
.foto-dupla .foto-bloco{aspect-ratio:4/3;}
@media(max-width:640px){
.foto-dupla{grid-template-columns:1fr;gap:14px;}
.foto-larga{aspect-ratio:3/2;margin-bottom:26px;}
}
/* ---------- vídeo em destaque ----------
Clipe único com controls e preload="none": o site do nicho local vive no
celular (92,6% do custo de Ads da conta de referência veio de smartphone),
então vídeo NUNCA baixa sozinho — só pesa se a pessoa der o play. O poster
em WebP é o que aparece; o clipe é ilustrativo de banco (Mixkit) e no site
do cliente entra o vídeo do próprio negócio. */
.video-destaque{
max-width:860px;margin:0 auto;border-radius:var(--raio);overflow:hidden;
box-shadow:var(--sombra);background:#000;
}
.video-destaque video{display:block;width:100%;aspect-ratio:16/9;}
.video-destaque figcaption{
background:var(--escuro);color:#fff;opacity:.92;
padding:13px 18px;font-size:13.5px;
}