/* ============================================================
IDENTIDADE VISUAL — cores e fontes da cliente
Para adaptar o molde, mexa só neste bloco de variáveis:
1. "paleta bruta": as cores da marca (tema claro).
2. "tema escuro": aparece DUAS vezes logo abaixo
(@media prefers-color-scheme e [data-theme="dark"]) —
mantenha as duas cópias iguais.
3. Fontes: --font-display e --font-body. Se trocar a família,
troque também os arquivos de fonts/, os @font-face logo abaixo e os
preloads do do molde.html (e rode "npm run build").
O resto do arquivo usa só as variáveis; não há cor solta nele.
ATALHOS (ajustes manuais; procure o nome com Ctrl+F; todos ficam no 1º :root, logo abaixo):
Vermelho do alto do rodapé no celular (logo e frase) - --rodape-topo-cor
Cor dos títulos "Contato" e "Atendimento" do rodapé no celular - --rodape-titulo-cor
Altura da faixa vermelha do rodapé no computador - --rodape-faixa-altura
Perguntas frequentes: cards, largura e tempo de abrir e fechar - --faq-card, --faq-largura, --faq-acordeao
Velocidade dos carrosséis no celular (serviços, frota, depoimentos e blog) - --carrossel-duracao
Cor do cabeçalho (páginas internas e página inicial depois de rolar) - --topo-fundo
Espaço abaixo da faixa do rodapé e entre os itens das listas (computador) - --rodape-respiro, --rodape-lista-espaco
Topo com foto de ponta a ponta (altura no celular, enquadramento, degradês) - --hero-fundo-proporcao, --hero-foto-posicao-celular, --hero-foto-posicao-computador, --hero-foto-largura-computador, --hero-degrade-alto, --hero-degrade-base
Espaço do bloco dos pilares e entre os cards; traço dourado no celular; ícone - --pilares-respiro, --pilares-espaco, --pilares-traco, --pilares-icone
Enquadramento do retrato do Sobre - --sobre-foto-posicao
Luz prateada no contorno do "Reservar" do topo (intervalo, espera, cor, espessura) - --brilho-ciclo, --brilho-atraso, --brilho-cor, --brilho-espessura
Cards de serviço com foto (altura no computador e no celular, escurecimento ao abrir, duração) - --svc-altura, --svc-altura-celular, --svc-escurecer, --svc-duracao
Tamanho do ícone dos selos abaixo do topo - --selo-icone
Tamanho do ícone dos cards do Sobre - --cred-icone
Nome no rodapé com a marca empilhada - --rodape-nome
Tarja antes do formulário (espaço) - --tarja-respiro
Tamanho da assinatura acima do título do blog - --marca-altura-blog
Tamanho do logo na faixa do topo do blog e das dúvidas (computador) - --logo-faixa-escala
Movimento dos cards do blog ao passar o cursor (computador) - --blog-card-elevacao, --blog-card-zoom
Moldura da frase da faixa do formulário (fundo, letra, tamanho no celular, espaço interno) - --titulo-contorno-fundo, --titulo-contorno-texto, --titulo-contorno-celular, --titulo-contorno-respiro
Topo no celular: foto até o fim do "Reservar" (alongamento, respiro, escurecimento da base); linha de luz depois do topo - --hero-foto-alongamento, --hero-foto-sob-texto, --hero-botoes-respiro, --hero-degrade-base-celular, --hero-linha-transicao
Assinatura do nome (imagem) no cabeçalho e no rodapé - --marca-altura-topo, --marca-altura-rodape
Largura do título e do texto de introdução das seções - --largura-texto
Largura máxima dos títulos das seções no computador (sem limite = numa linha só) - --largura-titulo-computador
Largura do texto de "Onde atendemos" no computador - --largura-texto-atendimento
Traçado de rota no fundo do rodapé (intensidade e altura) - --rodape-rota-opacidade, --rodape-rota-altura
Proporção da foto do artigo do blog (faixa de ponta a ponta) - --artigo-foto-proporcao
Fundo prata do "Por que escolher" e espessura do filete dourado dos cards - --pilares-prata-claro, --pilares-prata-escuro, --pilares-filete
Quantos cartões do "Leia também" aparecem de uma vez no computador - --leia-cartoes
Cartões do blog (cantos, proporção da foto, largura da grade em /blog/) - --blog-card-raio, --blog-card-foto, --blog-grade-largura
Até onde o grafite do "Por que escolher" fica inteiro antes de clarear - --pilares-escuro-ate
Fundo dos cards do "Por que escolher" (degradê marfim) - --pilares-card-claro, --pilares-card-escuro
Faixa vinho da marca no topo do blog (cor e espaço interno) - --blog-topo-cor, --blog-topo-respiro
Recuo do texto do topo para a esquerda (computador) - --hero-texto-recuo
Largura do texto dos artigos do blog e das páginas de termos e privacidade - --largura-leitura
Velocidade de abrir e fechar as listas do menu do celular (Serviços, Frota, Blog) - --menu-acordeao
Tamanho dos rótulos do formulário - --rotulo-form-tamanho
Dourado no fundo do botão "Avalie no Google" - --google-preenchimento, --google-preenchimento-hover
Luz dourada atrás dos cartões da frota (showroom) - --frota-brilho
Cor do efeito dos cards do Quem somos ao passar o cursor - --sobre-prata
Espaço da faixa preta acima dos cards do Quem somos - --sobre-transicao
Depoimentos: cor da seção, estampa, passagens de cor, cards - --depo-fundo, --depo-estampa-opacidade, --depo-transicao, --depo-card, --depo-contorno
Espaço acima do título de cada seção - --respiro-titulo
Espaço entre as seções (em cima e embaixo) - --section-y
Altura do cabeçalho no celular (espaço acima e abaixo do logo) - --topo-respiro-celular
Folga entre o cabeçalho e a seção ao tocar num atalho - --respiro-ancora (sem JavaScript; com ele, RESPIRO no script.js)
Peso, tamanho e espaço entre letras do menu e dos botões - --peso-menu, --peso-botao, --tamanho-menu, --tamanho-botao
Revelação ao rolar (duração, distância, curva) - --revelar-duracao, --revelar-distancia, --revelar-curva
Entrada do topo (duração, atraso entre itens, distância) - --hero-entrada-duracao, --hero-entrada-passo, --hero-entrada-distancia
Entrada das páginas próprias (duração, distância) - --entrada-paginapropria-duracao, --entrada-paginapropria-distancia
Dissolução das bordas da foto do topo no computador - --foto-topo-dissolucao (12% suave, 28% forte, 0% bordas retas)
Amplitude da onda, curva ou diagonal entre seções - --divisor-altura (qual transição: divisores no config.js)
Títulos longos no celular (quando reduzem para caber numa linha) - --largura-letra-titulo
Tamanho do logo na faixa do formulário e no rodapé - --logo-faixa, --logo-rodape
(as próximas ficam no bloco "Ajustes do dono (24/10/2026)", no fim do arquivo)
Topo no computador: foto abaixo do cabeçalho, tamanho do slogan, largura dos botões - --hero-foto-recuo-computador, --hero-lead-computador, --hero-botao-largura
Cor do título e do ícone do "Por que escolher"; animação ao passar o mouse - --pilares-titulo-cor, --pilares-subir, --pilares-hover-duracao
Abertura lenta dos cards de serviço no computador - --svc-duracao-computador
Largura mínima dos cards de depoimento no computador (abaixo dela, setas) - --depo-largura-min
Fundo dos cards do Quem somos - --cred-fundo
Frase da faixa do formulário no celular - --faixa-titulo-celular
Topo no computador: enquadramento vertical da foto e largura da coluna do texto - --hero-foto-posicao-vertical, --hero-texto-largura
Frota: enquadramento de cada foto (no card de cada veículo); tamanho das fotos horizontais no card - --frota-posicao, --frota-afastamento
Tamanho das letras do seletor de idioma "PT | EN" (versão em inglês) - --idioma-tamanho
Botão de idioma no cabeçalho do celular (globo + EN/PT) - --idioma-celular-tamanho e --idioma-celular-folga
Largura do cabeçalho no computador - --maxw-topo
Arredondamento dos cards de depoimento - --depo-raio
Espaço abaixo da linha final do rodapé no celular - --rodape-respiro-final-celular
Duração da transição entre páginas - --transicao-pagina
Tom das seções alternadas (claro e escuro) - --fundo-secao-alt, --texto-dim-alt (nas listas de cores; onda antes do formulário: divisores.faq no config.js)
Largura do botão "Agendar" do topo e distância até o Instagram - --botao-topo-lateral, --botao-topo-insta-espaco
Destaque da galeria no computador (opacidade e saturação das demais fotos, elevação, duração) - --galeria-destaque-opacidade, --galeria-destaque-saturacao, --galeria-destaque-elevacao, --galeria-destaque-duracao
Velocidade do menu do celular (abrir e fechar) - --menu-fundo, --menu-item, --menu-passo, --menu-saida-* (no bloco .mobile-menu)
============================================================ */
/* ---------- Fontes (hospedadas no próprio site, pasta fonts/) ----------
Os mesmos arquivos WOFF2 que o Google Fonts servia (fontes variáveis: um
arquivo por estilo cobre todos os pesos), só "latin" e "latin-ext", com as
mesmas faixas de caracteres (unicode-range): o navegador só baixa o arquivo
de que precisa. Licença SIL Open Font License 1.1 (fonts/LICENCA.md).
Ao trocar a família, troque estes arquivos, os blocos abaixo, --font-display e
--font-body, e os do molde.html. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/fraunces-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("../fonts/fraunces-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("../fonts/fraunces-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Belleza (títulos da Faria, 21/10/2026): só peso 400, sem itálico (licença OFL, fonts/LICENCA.md) */
@font-face { font-family: "Belleza"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/belleza-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Belleza"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/belleza-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/mulish-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/mulish-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ---------- Tokens ---------- */
:root {
/* paleta bruta */
/* Faria (21/10/2026, proposta A aprovada): marfim, grafite e dourado */
--porcelain: #FFFFFF; /* fundo branco total (dono, 03/11/2026; antes #F7F4EE, marfim amarelado): os cards se destacam pela linha fina e pela sombra */
--cloud: #FFFFFF; /* cards */
--ink: #1E1C1A; /* grafite, texto (15,5:1 sobre o marfim) */
--ink-soft: #3D3934; /* texto secundário (10,4:1) */
--stone: #6A645B; /* texto discreto (5,3:1 sobre o marfim; 5,9:1 sobre os cards) */
--hairline: #E3E0DA; /* linhas finas, neutras (03/11/2026; antes #E2DCD1) */
--grafite: #1E1C1A; /* botões das seções claras, cabeçalho e topo */
--blush: #EFE6CF; /* dourado bem claro (fundos de destaque) */
--gold: #A88B4A; /* dourado dos filetes e pontos (linha decorativa, 3,0:1) */
--gold-texto: #7D6631; /* dourado para texto sobre o marfim (destaque de título) */
/* semânticos (usados pelos componentes) */
--bg: var(--porcelain);
--surface: var(--cloud);
--text: var(--ink);
--text-2: var(--ink-soft);
--text-dim: var(--stone);
--line: var(--hairline);
--fundo-secao-alt: #FFFFFF; /* seções alternadas também em branco (dono, 03/11/2026; antes #EEE9DF): o contraste vem das seções escuras; para voltar a alternar, use um tom 3% a 6% mais escuro que --bg */
--texto-dim-alt: #625C53; /* texto discreto nas seções alternadas (5,5:1 sobre --fundo-secao-alt) */
--accent: var(--grafite);
--accent-contrast: #EBD9A2; /* texto e ícone sobre os botões grafite (dourado claro, 12,1:1) */
--accent-tint: var(--blush);
--metal: var(--gold);
/* faixa de fechamento — cor assumida, igual nos dois temas */
--band-bg: var(--grafite); /* topo, cabeçalho e faixa do formulário (grafite) */
--band-text: #F3EEE4; /* texto sobre o grafite */
--band-metal:#CCB674; /* dourado sobre o grafite */
--band-btn-text: var(--band-bg); /* texto do botão claro da faixa */
--band-accent: #D9C48A; /* destaque dourado sobre o grafite, no lugar do itálico */
/* detalhes de componentes (iguais nos dois temas) */
--sombra-botao-escuro: rgba(0, 0, 0, 0.45); /* sombra ao passar o mouse nos botões do topo escuro */
--sombra-galeria: rgba(30, 28, 26, 0.28); /* sombra suave da foto destacada na galeria (computador) */
--cookies-btn-line: #CCB674; /* contorno dos botões da faixa de cookies (dourado) */
--nav-btn-text: #EBD9A2; /* texto do botão "Agendar" do topo */
--form-field-text: #1E1C1A; /* texto digitado nos campos do formulário */
--form-error-border: #E3A6A6; /* borda do campo com erro */
--form-error-text: #FFD6D6; /* mensagem de erro do formulário */
--shadow-btn: rgba(0,0,0,0.04);
--shadow-menu: rgba(0,0,0,0.28);
--lightbox-fundo: rgba(20,19,18,0.96); /* fundo da foto ampliada */
--lightbox-texto: #F3EEE4; /* X, setas, legenda e contador */
--lightbox-botao: rgba(255,255,255,0.10);/* fundo do X e das setas */
/* logo exibido no site: img/logo.webp (320 px, gerado do img/logo.png pelo
"npm run imagens"). O logo.png original continua como base da prévia de
links (og.jpg) e dos ícones ("npm run og"). Outro arquivo: imagens.logo no config. */
--logo-src: url("../img/logo.webp");
/* nome do negócio como imagem (imagens.marca no config): img/marca.webp, branca com
fundo transparente, desenhada na cor do texto (máscara). Proporção do arquivo em
--marca-proporcao (largura / altura). */
--marca-src: url("../img/marca.webp");
--marca-proporcao: 2.9; /* 1447 x 499 px do recorte da assinatura da Faria */
--marca-altura-topo: 2.3rem; /* altura da assinatura no cabeçalho (computador); recomendado 2rem a 2.6rem */
--marca-altura-rodape: 2.6rem; /* altura da assinatura no rodapé; recomendado 2.2rem a 2.9rem (dono, 29/10: maior, equilibrando com o logo) */
--maxw: 1140px; /* largura máxima do conteúdo no computador; recomendado 1080px a 1240px */
--maxw-topo: 1320px; /* largura máxima do cabeçalho no computador (mais larga que o conteúdo: logo e nome à esquerda, botões mais à direita; dono, 28/10); recomendado 1240px a 1440px */
--pad: clamp(1.55rem, 5vw, 1.75rem); /* margem lateral do conteúdo (no celular, a distância do texto até a borda); recomendado entre 1.25rem e 2rem */
--section-y: clamp(1.6rem, 3.4vw, 3rem); /* espaço em cima e embaixo de cada seção (celular → computador); recomendado de 1.5rem a 4rem no máximo */
--respiro-titulo: clamp(0.5rem, 1.5vw, 1rem); /* espaço extra acima do título de cada seção (sem rótulo acima dele); recomendado 0.5rem a 1.25rem */
--largura-letra-titulo: 0.49; /* largura média de uma letra dos títulos (em "em"), usada no celular para reduzir só o título que não cabe numa linha; recomendado 0.46 a 0.5 (maior = reduz mais cedo) */
--largura-texto: 80ch; /* largura máxima do título e do texto de introdução de cada seção (.section__head). Leitura confortável: 60 a 75 caracteres por linha (60ch a 75ch); para ampliar, aumente o número (ex.: 85ch). 1ch = largura de um "0" da fonte */
--font-display: "Belleza", "Optima", "Candara", sans-serif; /* Faria: Belleza (estilo Aesop); no molde: "Fraunces", "Iowan Old Style", Georgia, serif */
--italico-display: normal; /* itálico dos textos na fonte dos títulos (destaque do título do topo, assinatura, subtítulos): "italic" com fonte que tem itálico; "normal" com a Belleza, que não tem (o destaque vira cor dourada) */
--font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* ---------- Tipografia do menu, dos botões e do subtítulo do topo ----------
Ajuste aqui, num só lugar (vale para todo o site e qualquer cliente).
Pesos: use só os que existem nos arquivos de fonts/ (o build avisa se não existir). */
--peso-menu: 400; /* peso dos itens do menu (computador e celular); antes 700 */
--tamanho-menu: 0.9rem; /* tamanho dos itens do menu do computador (0.95rem até 29/10; menor com "Orçamento" no menu) */
--tamanho-menu-celular: 1rem; /* tamanho dos itens do menu do celular */
--espaco-letras-menu: 0.01em; /* espaço entre as letras do menu */
--peso-botao: 400; /* peso dos botões (inclusive os da faixa e do painel de cookies); antes 700 */
--peso-link-acao: 500; /* peso dos links de ação ("Ler artigo →", "Montar meu horário →"...); antes 700 */
--tamanho-botao: 0.95rem; /* tamanho dos botões e dos links de ação no computador */
--tamanho-botao-celular: clamp(14px, 13.5px + 0.15vw, 15px); /* no celular, em px (regra de uma linha) */
--espaco-letras-botao: 0.01em; /* espaço entre as letras dos botões e dos links de ação */
--tamanho-subtitulo-topo: 1.125rem; /* subtítulo do topo a partir de 1024 px (18 px; peso 400; no topo escuro, creme a 85%) */
--altura-linha-subtitulo-topo: 1.6; /* altura de linha do subtítulo do topo a partir de 1024 px */
/* ---------- Revelação ao rolar (script.js + fim do style.css) ---------- */
--revelar-duracao: 700ms; /* tempo do esmaecer e subir de cada bloco; recomendado 400ms a 800ms */
--revelar-distancia: 18px; /* quanto o bloco sobe ao aparecer; recomendado 8px a 24px (0 = só esmaece) */
--revelar-curva: cubic-bezier(0.22, 0.61, 0.36, 1); /* curva suave (desacelera no fim) */
/* ---------- Entrada do topo (hero), só CSS ---------- */
--hero-entrada-duracao: 450ms; /* duração de cada item (título, subtítulo, botões); recomendado 300ms a 600ms */
--hero-entrada-passo: 120ms; /* atraso entre um item e o próximo; recomendado 60ms a 150ms (total ~0,6 s) */
--hero-entrada-distancia: 10px; /* quanto o texto sobe ao entrar; recomendado 6px a 16px */
--hero-foto-opacidade: 0.85; /* opacidade inicial da foto do topo; nunca abaixo de 0.7 (não piorar o LCP) */
/* ---------- Foto do topo no computador (a partir de 1024 px) ---------- */
--foto-topo-dissolucao: 12%; /* quanto das bordas da foto se dissolve no fundo: 12% suave (escolhida); 28% forte; 0% = bordas retas, sem dissolver */
/* ---------- Galeria no computador: destaque ao passar o mouse ou com o foco do teclado ---------- */
--galeria-destaque-opacidade: 0.7; /* opacidade das demais fotos enquanto uma está destacada; recomendado 0.6 a 0.85 (1 = sem esmaecer) */
--galeria-destaque-saturacao: 0.85; /* saturação das demais fotos; recomendado 0.7 a 0.95 (1 = cor normal) */
--galeria-destaque-elevacao: 3px; /* quanto a foto destacada sobe; recomendado 2px a 6px (0 = não sobe); com "reduzir movimento", não sobe */
--galeria-destaque-duracao: 350ms; /* duração da transição; recomendado 250ms a 450ms */
--galeria-destaque-curva: cubic-bezier(0.22, 0.61, 0.36, 1); /* curva suave (desacelera no fim) */
/* ---------- Logo repetido na faixa do formulário e no rodapé ---------- */
--logo-faixa: 120px; /* tamanho do logo acima do título da faixa do formulário (antes 88px); recomendado 96px a 140px */
--logo-rodape: 4rem; /* tamanho do logo no rodapé (Faria: 4rem, um pouco maior, 21/10; antes 3.25rem); recomendado 2.5rem a 4.5rem */
--rodape-nome: 1.9rem; /* tamanho do nome no rodapé com a marca empilhada (rodape.marcaEmpilhada); recomendado 1.5rem a 2.4rem */
--rodape-respiro-final-celular: 1.25rem; /* espaço abaixo da linha final do rodapé no celular (antes 1.5rem + 60px); recomendado 1rem a 2rem */
/* ---------- Topo com foto de ponta a ponta (hero.fundo) ---------- */
--hero-fundo-proporcao: 1.55; /* (computador) referência de altura mínima; no celular, a foto aparece inteira (ver abaixo) */
--hero-foto-proporcao-arquivo: 1086 / 1448; /* proporção da foto do topo (largura / altura do arquivo); a foto aparece inteira, sem cortar os lados, no celular e no tablet */
--hero-foto-alongamento: 1.07; /* no celular e no tablet, a caixa da foto do topo fica 7% mais alta que a foto: ganha piso para os botões e um zoom leve só nas laterais, com o carro inteiro; recomendado 1 a 1.1 */
--hero-foto-sob-texto: calc(100vw * 1448 / 1086 * var(--hero-foto-alongamento) * 0.36); /* quanto do alto da foto fica atrás do título e do slogan no celular (36% da altura da foto: o teto); recomendado 30% a 40% */
--hero-botoes-respiro: 0.6rem; /* espaço entre o "Reservar" e o fim da foto no celular (a foto vai até o fim do botão); recomendado 0.5rem a 1.5rem */
--hero-degrade-base-celular: 0.35; /* escurecimento da base da foto no celular, atrás dos botões (a foto continua visível); recomendado 0.2 a 0.5 */
--selo-icone: 3rem; /* tamanho do quadrado do ícone dos selos abaixo do topo; recomendado 2.5rem a 3.5rem */
--brilho-ciclo: 4s; /* intervalo da luz prateada que contorna o botão "Reservar" do topo (hero.brilhoReservar); a volta ocupa 35% dele; recomendado 3s a 6s */
--brilho-atraso: 1.5s; /* espera antes da primeira passada do brilho; recomendado 1s a 3s */
--brilho-cor: #E8E8EA; /* cor da luz (prata) */
--brilho-espessura: 2px; /* espessura da luz que contorna o botão; recomendado 1.5px a 3px */
--hero-linha-transicao: 2px; /* espessura da linha de luz dourada entre o topo e a faixa seguinte; recomendado 1px a 3px (0 = sem linha) */
--hero-foto-posicao-celular: 50% 62%; /* enquadramento da foto no celular (horizontal vertical) */
--hero-foto-posicao-computador: 50% 72%; /* enquadramento da foto no computador */
--hero-foto-largura-computador: 58%; /* largura da foto no computador (à direita, dissolvida no grafite à esquerda); recomendado 50% a 65% */
--hero-degrade-alto: 0.88; /* opacidade do degradê escuro no alto (leitura do título); recomendado 0.7 a 0.95 */
--hero-degrade-base: 0.9; /* opacidade do degradê escuro na base (leitura do botão); recomendado 0.7 a 0.95 */
/* ---------- Pilares (secoes.pilares), logo depois do topo ---------- */
--pilares-respiro: clamp(1.5rem, 4vw, 3rem); /* espaço acima e abaixo do bloco dos pilares (celular → computador); recomendado 1.25rem a 3.5rem */
--pilares-espaco: clamp(1rem, 2vw, 1.5rem); /* distância entre os cards no computador; recomendado 0.75rem a 2rem */
--marca-altura-blog: clamp(2.6rem, 9vw, 3.4rem); /* altura da assinatura acima do título do blog (blog.marca); recomendado 2.4rem a 3.6rem */
--titulo-contorno-fundo: var(--band-text); /* fundo da frase emoldurada da faixa do formulário (marfim); recomendado um tom claro da marca */
--titulo-contorno-texto: var(--band-bg); /* letra da frase emoldurada (grafite); contraste mínimo 4,5:1 com o fundo acima */
--titulo-contorno-celular: 6.4vw; /* tamanho da frase emoldurada no celular (até 720 px); recomendado 5.5vw a 7vw */
--titulo-contorno-respiro: clamp(0.85rem, 2.5vw, 1.25rem); /* espaço entre a frase da faixa do formulário e a moldura dourada (agendar.tituloContorno); recomendado 0.75rem a 1.5rem */
--tarja-respiro: clamp(0.9rem, 2.5vw, 1.25rem); /* espaço acima e abaixo da frase da tarja antes do formulário (agendar.tarja); recomendado 0.75rem a 1.5rem */
--sobre-foto-posicao: 50% 8%; /* enquadramento do retrato do Sobre (horizontal vertical): 50% 50% = centro; valores menores no segundo número mostram mais o alto da foto */
--cred-icone: 2.6rem; /* tamanho do quadrado do ícone dos cards do Sobre (sobre.credenciais com ícone); recomendado 2.25rem a 3rem */
--svc-altura: 27rem; /* altura dos cards de serviço com foto no computador (servicos.cards); recomendado 24rem a 32rem */
--svc-altura-celular: 31rem; /* altura dos cards no celular (como no site atual, ~500 px); recomendado 28rem a 34rem */
--svc-escurecer: 58%; /* quanto a foto escurece com o card de serviço aberto (leitura da descrição); recomendado 45% a 70% */
--svc-duracao: 0.55s; /* duração da abertura do card de serviço; recomendado 0.4s a 0.8s */
--pilares-icone: 3.25rem; /* tamanho do círculo do ícone de cada pilar; recomendado 2.75rem a 4rem */
--pilares-traco: 2rem; /* largura do traço dourado acima do título no celular; recomendado 1.5rem a 3rem */
/* ---------- Botões do cabeçalho no computador ---------- */
--botao-topo-lateral: 1.55rem; /* espaço à esquerda e à direita do texto no botão "Agendar" do topo (antes 1.3rem); recomendado 1.2rem a 1.8rem */
--botao-topo-insta-espaco: 0.6rem; /* distância entre o "Agendar" e o botão do Instagram; recomendado 0.5rem a 1rem */
/* ---------- Cabeçalho no celular ---------- */
--topo-respiro-celular: 0.4rem; /* espaço acima e abaixo do logo no cabeçalho, até 720 px (antes 0.85rem); recomendado 0.3rem a 0.85rem */
/* ---------- Divisores de seção (divisores no config) ---------- */
--divisor-altura: clamp(18px, 3.2vw, 44px); /* amplitude da onda, curva ou diagonal; recomendado 16px a 60px (discreto: até ~44px) */
/* ---------- Transição entre páginas (View Transitions, fim do style.css) ---------- */
--transicao-pagina: 0.30s; /* esmaecimento ao trocar de página (inicial, blog, galeria...); recomendado 0.15s a 0.35s; soma esse tempo a cada troca */
/* ---------- Entrada das páginas próprias (fim do style.css) ---------- */
--entrada-paginapropria-duracao: 700ms; /* tempo do esmaecer e subir do conteúdo ao abrir uma página própria (e ao voltar para a inicial); recomendado 400ms a 800ms */
--entrada-paginapropria-distancia: 18px; /* quanto o conteúdo sobe ao entrar; recomendado 8px a 24px (0 = só esmaece) */
/* ---------- Rolagem dos atalhos (âncoras) ---------- */
--altura-topo: 86px; /* altura do cabeçalho; o script.js mede a real e atualiza */
--respiro-ancora: 16px; /* folga entre o cabeçalho e o começo da seção */
--recuo-ancora: calc(var(--altura-topo) + var(--respiro-ancora)); /* scroll-margin-top de todas as âncoras */
--step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
--step-0: 1.0625rem;
--step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
--step-2: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
--step-3: clamp(1.95rem, 1.6rem + 1.8vw, 2.75rem);
--step-4: clamp(2.3rem, 1.6rem + 3.2vw, 3.7rem);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #181716;
--surface: #211F1D;
--text: #EEE9E0;
--text-2: #D6CFC3;
--text-dim: #A9A296;
--line: #33302C;
--fundo-secao-alt: #141312; /* seções alternadas no tema escuro (um pouco mais escuro que --bg) */
--texto-dim-alt: #A9A296; /* 6,9:1 sobre o fundo alternado escuro */
--fundo-secao-alt: #141312; /* seções alternadas no tema escuro (um pouco mais escuro que --bg) */
--texto-dim-alt: #A9A296; /* 6,9:1 sobre o fundo alternado escuro */
--accent: #CCB674; /* botões dourados no tema escuro */
--accent-contrast: #181716; /* 9,0:1 sobre o dourado */
--nav-btn-text: #181716; /* botão do topo sobre o dourado */
--accent-tint: #4A4232;
--metal: #CCB674;
}
}
:root[data-theme="dark"] {
--fundo-secao-alt: #141312; /* seções alternadas no tema escuro */
--texto-dim-alt: #A9A296; /* texto discreto nas seções alternadas escuras */
--bg: #181716;
--surface: #211F1D;
--text: #EEE9E0;
--text-2: #D6CFC3;
--text-dim: #A9A296;
--line: #33302C;
--accent: #CCB674; /* botões dourados no tema escuro */
--accent-contrast: #181716; /* 9,0:1 sobre o dourado */
--nav-btn-text: #181716; /* botão do topo sobre o dourado */
--accent-tint: #4A4232;
--metal: #CCB674;
}
:root[data-theme="light"] {
--bg: var(--porcelain);
--surface: var(--cloud);
--text: var(--ink);
--text-2: var(--ink-soft);
--text-dim: var(--stone);
--line: var(--hairline);
--fundo-secao-alt: #FFFFFF; /* seções alternadas também em branco (dono, 03/11/2026; antes #EEE9DF): o contraste vem das seções escuras; para voltar a alternar, use um tom 3% a 6% mais escuro que --bg */
--texto-dim-alt: #625C53; /* texto discreto nas seções alternadas (5,5:1 sobre --fundo-secao-alt) */
--accent: var(--grafite);
--accent-contrast: #EBD9A2; /* texto e ícone sobre os botões grafite (dourado claro, 12,1:1) */
--accent-tint: var(--blush);
--metal: var(--gold);
}
/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400;
font-optical-sizing: auto;
line-height: 1.08;
text-wrap: balance;
margin: 0;
letter-spacing: -0.01em;
}
p { margin: 0; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-contrast); }
:focus-visible {
outline: 2px solid var(--metal);
outline-offset: 3px;
border-radius: 2px;
}
.skip {
position: absolute;
left: -999px;
top: 0;
background: var(--surface);
color: var(--text);
padding: 0.75rem 1rem;
z-index: 200;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }
.wrap {
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--pad);
}
.lead {
font-size: var(--step-1);
color: var(--text-2);
max-width: 46ch;
line-height: 1.55;
}
/* ---------- Buttons ---------- */
.btn {
--_bg: var(--accent);
--_fg: var(--accent-contrast);
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: var(--_bg);
color: var(--_fg);
font-family: var(--font-body);
font-weight: var(--peso-botao);
font-size: var(--tamanho-botao); /* só a primeira letra maiúscula (14/10/2026) */
letter-spacing: var(--espaco-letras-botao);
text-decoration: none;
padding: 1rem 1.6rem;
border: 1px solid transparent;
border-radius: 999px;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
box-shadow: 0 1px 0 var(--shadow-btn);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn:active { transform: translateY(0); }
.btn--ghost {
--_bg: transparent;
--_fg: var(--text);
border-color: color-mix(in srgb, var(--metal) 55%, transparent);
box-shadow: none;
}
.btn--ghost:hover {
background: color-mix(in srgb, var(--metal) 12%, transparent);
box-shadow: none;
}
.btn--light {
--_bg: var(--band-text);
--_fg: var(--band-btn-text);
padding: 1.05rem 1.95rem;
font-size: 0.9rem;
}
.btn--light svg { width: 1.7em; height: 1.7em; }
/* ---------- Promoção (promocao no config): faixa fina acima do menu ----------
Na cor da faixa do formulário (igual nos dois temas). O "X" fica à direita,
com 44 px de toque, e só aparece com JavaScript (script.js). */
.promo {
position: relative;
padding: 0.55rem calc(var(--pad) + 44px);
background: var(--band-bg);
color: var(--band-text);
text-align: center;
}
.promo__texto { font-size: 1rem; line-height: 1.45; }
.promo__link {
position: relative;
margin-left: 0.35rem;
font-weight: 700;
color: var(--band-text);
text-underline-offset: 3px;
white-space: nowrap;
}
.promo__link::before { content: ""; position: absolute; inset: -12px -6px; } /* toque de 44px */
.promo__fechar {
position: absolute;
top: 50%;
right: max(4px, calc(var(--pad) - 14px));
transform: translateY(-50%);
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
color: var(--band-text);
cursor: pointer;
}
.promo__fechar[hidden] { display: none; }
.promo__fechar svg { width: 18px; height: 18px; }
.promo__fechar:focus-visible { outline: 2px solid var(--band-metal); outline-offset: -4px; }
/* ---------- Top bar ---------- */
.topbar {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.topbar__inner {
max-width: var(--maxw-topo, var(--maxw));
margin-inline: auto;
padding: 0.85rem var(--pad);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.brand {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.8rem;
line-height: 1;
text-decoration: none;
color: var(--text);
}
.brand__mark {
/* Tamanho do logo no cabeçalho (desktop). Aumente/diminua livremente —
é uma imagem vetorial-like em PNG de 560x560px, então ainda fica nítida
bem maior que isto; o único limite real é não deixar o cabeçalho alto
demais / espremer o menu. Se aumentar muito, ajuste também o padding
vertical de .topbar__inner logo abaixo. */
width: 3.75rem;
height: 3.75rem;
flex: none;
background: var(--logo-src) center / contain no-repeat;
}
.brand__text { display: flex; flex-direction: column; }
.brand__name {
font-family: var(--font-body);
font-weight: 800;
letter-spacing: 0.2em;
font-size: 1.2rem;
text-transform: uppercase;
}
.brand__tag {
font-family: var(--font-display);
font-style: var(--italico-display);
font-size: 0.92rem;
color: var(--text-dim);
letter-spacing: 0.02em;
margin-top: 0.3rem;
}
.nav {
display: flex;
align-items: center;
gap: 2.1rem;
}
.nav a:not(.btn) {
position: relative;
font-size: var(--tamanho-menu);
font-weight: var(--peso-menu);
letter-spacing: var(--espaco-letras-menu);
text-decoration: none;
color: var(--text);
padding: 0.4rem 0;
transition: color 0.18s ease;
}
.nav a:not(.btn)::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 0;
height: 1.5px;
background: currentColor; /* a mesma cor do texto naquele momento */
transition: right 0.28s cubic-bezier(0.4, 0.6, 0.2, 1);
}
.nav a:not(.btn):hover,
.nav a[aria-current]:not(.btn) { color: var(--accent); }
.nav a:not(.btn):hover::after,
.nav a[aria-current]:not(.btn)::after { right: 0; }
.mobile-menu a[aria-current]:not(.btn) { color: var(--accent); }
/* Submenu de "Serviços" (render.js: menuServicos). Computador: abre ao passar
o mouse ou com o foco do teclado, sem mudar a largura do menu (sem seta). */
.nav__grupo { position: relative; display: flex; align-items: center; }
.nav__sub {
position: absolute;
top: 100%;
left: -1rem;
z-index: 5;
display: flex;
flex-direction: column;
min-width: 13.5rem;
padding: 0.4rem 0;
background: var(--surface);
border: 1px solid var(--line);
border-top: 2px solid var(--metal);
border-radius: 3px;
box-shadow: 0 18px 30px -18px var(--shadow-menu);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav__grupo:hover .nav__sub,
.nav__grupo:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav .nav__sub a:not(.btn) {
display: block;
padding: 0.6rem 1rem;
font-size: 0.95rem;
font-weight: var(--peso-menu);
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
}
.nav .nav__sub a::after,
.nav .nav__sub a::before { display: none; }
.nav .nav__sub a:hover,
.nav .nav__sub a:focus-visible { color: var(--accent); background: color-mix(in srgb, var(--accent-tint) 30%, transparent); }
@media (prefers-reduced-motion: reduce) {
.nav__sub { transition: none; transform: none; }
}
/* Cabeçalho escuro (cabecalhoEscuro no config, 21/10/2026, réplica da Faria): o cabeçalho e o
menu do celular usam o grafite do topo (--band-bg), com o nome e o menu em marfim e dourado;
a translucidez ao rolar continua, agora sobre o grafite. */
.topbar--escuro {
--bg: var(--band-bg);
--surface: color-mix(in srgb, var(--band-bg) 94%, #FFFFFF);
--text: var(--band-text);
--text-2: color-mix(in srgb, var(--band-text) 88%, var(--band-bg));
--text-dim: var(--band-metal);
--line: color-mix(in srgb, var(--band-text) 16%, var(--band-bg));
--accent: var(--band-metal);
--accent-contrast: var(--band-bg);
--nav-btn-text: var(--band-bg);
--accent-tint: color-mix(in srgb, var(--band-metal) 22%, var(--band-bg));
--shadow-menu: rgba(0, 0, 0, 0.5);
color: var(--text);
}
/* Topo some ao descer e volta ao subir (script.js: .is-oculto) */
.topbar { transition: transform 0.28s ease; }
.topbar.is-oculto { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
.topbar { transition: none; }
}
.nav .btn {
--_fg: var(--nav-btn-text);
padding: 0.72rem var(--botao-topo-lateral); /* lateral um pouco maior (20/10/2026); texto e ícone no tamanho normal */
letter-spacing: var(--espaco-letras-botao);
border-color: color-mix(in srgb, var(--nav-btn-text) 32%, transparent);
}
/* Instagram à direita do "Agendar" (computador, 20/10/2026): círculo de 44 px com contorno
fino e o ícone em traço, mais perto do "Agendar" que os links entre si */
.nav a.nav__insta {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 44px;
height: 44px;
margin-left: calc(var(--botao-topo-insta-espaco) - 2.1rem); /* o gap do menu é 2.1rem */
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text);
padding: 0;
transition: color 0.18s ease, border-color 0.18s ease;
}
.nav a.nav__insta svg { width: 20px; height: 20px; }
.nav a.nav__insta::after { display: none; } /* sem a linha dos links do menu */
.nav a.nav__insta:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.nav a.nav__insta:focus-visible { outline: 2px solid var(--metal); outline-offset: 2px; }
/* ---------- Botão hambúrguer (duas linhas -> X) + menu mobile ----------
Duas linhas finas na cor principal, a de baixo mais curta. Ao abrir o
menu, giram e formam um X. Área de toque de 44 px. */
.hamburger {
display: none;
flex: none;
position: relative;
width: 2.75rem;
height: 2.75rem;
margin-right: -0.55rem; /* alinha as linhas com a margem do texto */
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
}
.hamburger__linha {
position: absolute;
right: 0.55rem;
width: 1.4rem;
height: 1.5px;
border-radius: 1px;
background: var(--accent);
transform-origin: center;
transition: top 0.3s cubic-bezier(0.4, 0.6, 0.2, 1),
width 0.3s cubic-bezier(0.4, 0.6, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0.6, 0.2, 1);
}
.hamburger__linha:first-child { top: calc(50% - 4px); }
.hamburger__linha:last-child { top: calc(50% + 3px); width: 0.95rem; }
.hamburger[aria-expanded="true"] .hamburger__linha { top: calc(50% - 0.75px); width: 1.4rem; }
.hamburger[aria-expanded="true"] .hamburger__linha:first-child { transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__linha:last-child { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
.hamburger__linha { transition: none; }
}
.mobile-menu {
display: none;
position: absolute;
top: calc(100% + 1px); /* abaixo da linha do topo (a referência é o .topbar__inner, por causa da container query) */
left: 0;
right: 0;
flex-direction: column;
background: var(--surface);
border-bottom: 1px solid var(--line);
box-shadow: 0 18px 30px -18px var(--shadow-menu);
padding: 0.5rem var(--pad) 1.25rem;
height: calc(100dvh - 100% - 1px); /* cobre a tela abaixo do topo; com as categorias abertas ou o texto aumentado, rola dentro do menu */
overflow-y: auto;
overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
/* ---------- Abertura do menu Hambúrguer do celular (efeito Apple, só CSS) ----------
O script.js só tira e põe o atributo hidden. Ao abrir: o fundo desce cobrindo a
tela (clip-path, --menu-fundo) e, quando está quase no fim, os itens entram um a um,
de cima para baixo (--i = posição do item, --menu-passo entre eles). Ao fechar (14/10/2026):
o fundo e os itens recolhem juntos e, no meio do recolhimento, o fundo vai ficando
transparente, misturando-se com a página.
PARA VOLTAR AO FECHAMENTO ANTERIOR (itens saindo um a um, de baixo para cima, e só
depois o fundo subindo, sem esmaecer), troque as quatro variáveis --menu-saida-*:
--menu-saida-passo: var(--menu-passo);
--menu-saida-atraso-fundo: calc(var(--menu-item) + 6 * var(--menu-passo));
--menu-saida-esmaecer: 0;
--menu-saida-curva: var(--menu-curva);
O menu continua tocável durante a animação (nada bloqueia o toque).
"display" com allow-discrete mantém o menu na tela até a saída terminar
(navegador sem suporte: fecha na hora). Com "reduzir movimento", sem efeito. */
.mobile-menu {
--menu-curva: cubic-bezier(0.32, 0.72, 0, 1);
--menu-fundo: 250ms;
--menu-item: 160ms;
--menu-passo: 25ms;
/* fechar: 0ms = itens saem juntos (antes var(--menu-passo): um a um, de baixo para cima) */
--menu-saida-passo: 10ms;
/* fechar: atraso do fundo; 0ms = recolhe junto com os itens (antes: calc(var(--menu-item) + 6 * var(--menu-passo))) */
--menu-saida-atraso-fundo: 70ms;
/* fechar: 1 = o fundo fica transparente no meio do recolhimento; 0 = sem esmaecer (antes) */
--menu-saida-esmaecer: 1;
/* fechar: curva do recolhimento, mais uniforme que a da abertura, para o esmaecimento aparecer (antes: var(--menu-curva)) */
--menu-saida-curva: cubic-bezier(0.45, 0, 0.55, 1);
clip-path: inset(0 0 0 0);
opacity: 1;
transition:
clip-path var(--menu-fundo) var(--menu-curva),
opacity 120ms ease,
display var(--menu-fundo) allow-discrete;
}
.mobile-menu[hidden] {
clip-path: inset(0 0 100% 0);
opacity: calc(1 - var(--menu-saida-esmaecer));
transition:
clip-path var(--menu-fundo) var(--menu-saida-curva) var(--menu-saida-atraso-fundo),
opacity calc(var(--menu-fundo) * 0.7) ease calc(var(--menu-saida-atraso-fundo) + var(--menu-fundo) * 0.3),
display 0s allow-discrete calc(var(--menu-saida-atraso-fundo) + var(--menu-fundo));
}
@starting-style {
.mobile-menu:not([hidden]) { clip-path: inset(0 0 100% 0); opacity: 1; }
}
.mobile-menu > *,
.mobile-menu__sub > a {
opacity: 0;
transform: translateY(-8px);
/* saída: junto com o fundo (com --menu-saida-passo > 0, de baixo para cima) */
transition: opacity var(--menu-item) ease, transform var(--menu-item) var(--menu-curva);
transition-delay: calc(var(--r, 0) * var(--menu-saida-passo));
}
.mobile-menu:not([hidden]) > *,
.mobile-menu__sub:not([hidden]) > a {
opacity: 1;
transform: none;
/* entrada: quando o fundo está quase no fim, de cima para baixo */
transition-delay: calc(var(--menu-fundo) * 0.7 + var(--i, 0) * var(--menu-passo));
}
.mobile-menu__sub:not([hidden]) > a { transition-delay: calc(var(--i, 0) * var(--menu-passo)); } /* categorias: logo ao abrir */
@starting-style {
.mobile-menu:not([hidden]) > *,
.mobile-menu__sub:not([hidden]) > a { opacity: 0; transform: translateY(-8px); }
}
.mobile-menu > :nth-child(1), .mobile-menu__sub > a:nth-child(1) { --i: 0; }
.mobile-menu > :nth-child(2), .mobile-menu__sub > a:nth-child(2) { --i: 1; }
.mobile-menu > :nth-child(3), .mobile-menu__sub > a:nth-child(3) { --i: 2; }
.mobile-menu > :nth-child(4), .mobile-menu__sub > a:nth-child(4) { --i: 3; }
.mobile-menu > :nth-child(5), .mobile-menu__sub > a:nth-child(5) { --i: 4; }
.mobile-menu > :nth-child(6), .mobile-menu__sub > a:nth-child(6) { --i: 5; }
.mobile-menu > :nth-child(7), .mobile-menu__sub > a:nth-child(7) { --i: 6; }
.mobile-menu > :nth-child(8), .mobile-menu__sub > a:nth-child(8) { --i: 7; }
.mobile-menu > :nth-child(9), .mobile-menu__sub > a:nth-child(9) { --i: 8; }
.mobile-menu > :nth-child(n+10) { --i: 9; }
.mobile-menu > :nth-last-child(1) { --r: 0; }
.mobile-menu > :nth-last-child(2) { --r: 1; }
.mobile-menu > :nth-last-child(3) { --r: 2; }
.mobile-menu > :nth-last-child(4) { --r: 3; }
.mobile-menu > :nth-last-child(5) { --r: 4; }
.mobile-menu > :nth-last-child(6) { --r: 5; }
.mobile-menu > :nth-last-child(n+7) { --r: 6; }
@media (prefers-reduced-motion: reduce) {
.mobile-menu,
.mobile-menu[hidden],
.mobile-menu > *,
.mobile-menu__sub > a { transition: none !important; }
}
.mobile-menu a:not(.btn),
.mobile-menu .mobile-menu__linha {
padding: 0.9rem 0.1rem;
font-size: var(--tamanho-menu-celular);
font-weight: var(--peso-menu);
letter-spacing: var(--espaco-letras-menu);
text-decoration: none;
color: var(--text);
border-bottom: 1px solid var(--line);
}
.mobile-menu a:not(.btn):last-of-type { border-bottom: none; }
.mobile-menu .btn { margin-top: 1rem; justify-content: center; }
/* Instagram no fim do menu (20/10/2026): discreto, centralizado, na cor secundária, 44 px de toque */
.mobile-menu a.mobile-menu__insta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 44px;
margin-top: 0.6rem;
padding: 0.4rem 0;
border-bottom: 0;
font-size: 0.875rem;
color: var(--text-2);
}
.mobile-menu a.mobile-menu__insta:hover { color: var(--accent); }
.mobile-menu__insta svg { width: 18px; height: 18px; flex: none; }
/* Celular: "Serviços" com a seta ao lado, que abre as categorias (script.js) */
.mobile-menu .mobile-menu__linha { /* a linha inteira abre e fecha as categorias (acordeão); a seta só mostra o estado */
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 44px;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
color: var(--text);
font-family: inherit;
text-align: left;
cursor: pointer;
}
.mobile-menu__linha svg { flex: none; width: 20px; height: 20px; color: var(--accent); transition: transform 0.2s ease; }
.mobile-menu__linha[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-menu__grupo:has(a[aria-current]) .mobile-menu__linha { color: var(--accent); } /* seção Serviços na tela */
.mobile-menu__sub { display: flex; flex-direction: column; padding-left: 1rem; border-bottom: 1px solid var(--line); }
.mobile-menu__sub[hidden] { display: none; }
.mobile-menu .mobile-menu__sub a {
padding: 0.75rem 0.1rem;
font-size: 0.95rem;
font-weight: var(--peso-menu);
letter-spacing: 0;
text-transform: none;
border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.mobile-menu .mobile-menu__sub a:last-of-type { border-bottom: none; }
@media (prefers-reduced-motion: reduce) {
.mobile-menu__linha svg { transition: none; }
}
/* Menu hambúrguer até 75em (1200px com a fonte padrão): o menu completo do
computador (logo + 6 links + Agendar) precisa de ~1047px. Em "em", o limite
cresce junto com a fonte do navegador. O script.js usa o mesmo limite. */
@media (max-width: 75em) {
.nav a:not(.btn), .nav .nav__grupo { display: none; } /* inclui o Instagram (.nav__insta) */
.nav { gap: 0.75rem; }
.hamburger { display: inline-flex; }
.mobile-menu:not([hidden]) { display: flex; }
}
/* E também quando o menu completo não cabe no próprio topo (máx. 1140px):
a container query mede o espaço do topo em "em", que cresce com o texto
aumentado (inclusive no Android, onde a media query acima não percebe).
O topo usa a letra do corpo (17px). Com 6 links (com "Blog"), o menu
completo precisa de ~61,6em (1047px) e cabe com a fonte padrão (o topo
tem 63,8em). Antes do hambúrguer, a fonte e o espaço entre os links
diminuem um pouco (63,5em): assim o menu precisa de ~55,4em e continua
inteiro até ~110% de texto. Abaixo de 57,5em, hambúrguer. Ao acrescentar
um link, refaça as contas. Só acima de 75em (onde a media query acima
não vale), para não mudar o topo do tablet. */
.topbar__inner { container: topo / inline-size; }
@media (min-width: 75.0625em) {
@container topo (max-width: 74em) { /* 29/10/2026: com "Orçamento", o menu diminui mais cedo (antes 63.5em) */
.nav { gap: 1.5rem; }
.nav a.nav__insta { margin-left: calc(var(--botao-topo-insta-espaco) - 1.5rem); }
.nav a:not(.btn) { font-size: calc(var(--tamanho-menu) * 0.93); letter-spacing: 0; }
}
}
@container topo (max-width: 64em) { /* 29/10/2026: com "Orçamento", o hambúrguer entra abaixo de 64em (antes 57.5em) */
.nav a:not(.btn), .nav .nav__grupo { display: none; }
.nav { gap: 0.75rem; }
.hamburger { display: inline-flex; }
.mobile-menu:not([hidden]) { display: flex; }
}
/* ---------- Hero ---------- */
.hero {
padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem);
}
.hero__inner {
display: grid;
grid-template-columns: 1.12fr 0.88fr;
gap: clamp(1.75rem, 4.5vw, 3.25rem);
align-items: center;
}
.hero h1 {
font-size: var(--step-4);
margin-bottom: 1rem;
}
.hero h1 em {
font-style: var(--italico-display);
color: var(--accent);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
margin-top: 1.4rem;
}
.hero__trust {
grid-column: 1 / -1;
margin-top: clamp(1.4rem, 3vw, 2.1rem);
padding-top: 1.2rem;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap; /* com o texto aumentado, os selos descem para a linha de baixo */
align-items: center;
gap: 0.5rem 1.8rem;
font-size: 0.95rem;
color: var(--text-2);
letter-spacing: 0.02em;
}
.hero__trust span { display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap; }
.hero__trust span::before {
content: "";
flex: none;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--metal);
}
@media (max-width: 900px) {
.hero__trust { flex-wrap: wrap; gap: 0.5rem 1.3rem; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: no-preference) {
.hero__inner > * {
animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero__inner > *:nth-child(2) { animation-delay: 0.12s; }
.hero__inner > *:nth-child(3) { animation-delay: 0.22s; }
@keyframes rise {
from { opacity: 0.001; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* ---------- Photo placeholders ---------- */
.photo {
position: relative;
border-radius: 3px;
overflow: hidden;
background:
linear-gradient(150deg,
var(--wash1, var(--accent-tint)) 0%,
var(--wash2, var(--surface)) 62%,
color-mix(in srgb, var(--wash1, var(--accent-tint)) 40%, var(--surface)) 100%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal) 45%, transparent);
}
.photo::before {
/* granulado sutil de atelier */
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
mix-blend-mode: soft-light;
opacity: 0.55;
pointer-events: none;
}
.photo::after {
content: attr(data-note);
position: absolute;
left: 0;
bottom: 0;
margin: 0.85rem;
padding: 0.4rem 0.7rem;
background: color-mix(in srgb, var(--surface) 92%, transparent);
color: var(--text-2);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
backdrop-filter: blur(2px);
}
.photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.photo:has(img)::before,
.photo:has(img)::after { display: none; }
/* Prévia desfocada: a versão de 32 px da foto (embutida no HTML pelo build),
ampliada pelo navegador, aparece borrada até a foto chegar e cobri-la. */
.photo--previa { background: var(--surface); }
.photo.photo--previa::before { /* vence ".photo:has(img)::before" */
display: block;
content: "";
position: absolute;
inset: 0;
background: var(--previa) center / cover no-repeat;
filter: blur(14px);
transform: scale(1.15); /* esconde a borda clara que o blur cria */
mix-blend-mode: normal; /* desfaz o granulado do .photo::before */
opacity: 1;
}
.photo--previa img { position: relative; } /* a foto fica por cima da prévia */
.hero__figure {
margin: 0;
position: relative;
padding: 0.7rem;
width: 100%;
max-width: 360px;
justify-self: end;
align-self: center;
}
.hero__figure::before {
content: "";
position: absolute;
inset: 0;
border: 1px solid color-mix(in srgb, var(--metal) 50%, transparent);
/* faixa entre a foto e a moldura preenchida com o rosado da marca (passe-partout);
no tema escuro, o mesmo token vira um vinho apagado */
background: color-mix(in srgb, var(--accent-tint) 45%, transparent);
transform: translate(0.6rem, 0.6rem);
pointer-events: none;
}
.hero__figure .photo { aspect-ratio: 4/5; max-height: none;}
.hero__figure .photo img { width: 130%; height: 100%; object-fit: cover; object-position: center 65%; }
/* ---------- Topo escuro (heroEscuro no config) ----------
Fundo vinho da faixa do formulário (--band-bg, igual nos dois temas),
com texto e botões claros (contraste AA) e a moldura da foto em dourado
claro com passe-partout claro. render.js põe a classe .hero--escuro. */
.hero--escuro {
background: var(--band-bg);
color: var(--band-text);
padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
}
.hero--escuro h1 { color: var(--band-text); }
.hero--escuro h1 em { color: var(--band-accent); }
h2 em, h3 em { font-style: var(--italico-display); color: var(--gold-texto); } /* destaque de título nas seções claras (Faria: dourado, sem itálico) */
.hero--escuro .lead { color: color-mix(in srgb, var(--band-text) 85%, transparent); }
/* Subtítulo do topo no computador (versão A, escolhida em 14/10/2026): mais leve e nítido,
sobretudo no topo escuro. Só a partir de 1024 px; o celular não muda. */
@media (min-width: 1024px) {
.hero .lead {
font-family: var(--font-body);
font-size: var(--tamanho-subtitulo-topo);
font-weight: 400;
letter-spacing: 0;
line-height: var(--altura-linha-subtitulo-topo);
}
}
/* Foto do topo dissolvida no fundo (versão suave, escolhida pelo Igor em 20/10/2026):
a partir de 1024 px, a foto aparece inteira (sem corte), sem a moldura dourada nem o
passe-partout, e as bordas se dissolvem no fundo por uma máscara com degradê nas quatro
bordas. A máscara vale para a caixa da foto inteira (foto, prévia desfocada e o véu da
entrada), então nada aparece em retângulo. Intensidade em --foto-topo-dissolucao, no
topo. O celular não muda. Para voltar à foto com moldura, apague este bloco. */
@media (min-width: 1024px) {
.hero__figure { padding: 0; }
.hero__figure::before { display: none; } /* moldura dourada e passe-partout */
.hero__figure .photo {
aspect-ratio: auto;
background: none;
border-radius: 0;
-webkit-mask-image:
linear-gradient(to right, transparent, #000 var(--foto-topo-dissolucao), #000 calc(100% - var(--foto-topo-dissolucao)), transparent),
linear-gradient(to bottom, transparent, #000 var(--foto-topo-dissolucao), #000 calc(100% - var(--foto-topo-dissolucao)), transparent);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, transparent, #000 var(--foto-topo-dissolucao), #000 calc(100% - var(--foto-topo-dissolucao)), transparent),
linear-gradient(to bottom, transparent, #000 var(--foto-topo-dissolucao), #000 calc(100% - var(--foto-topo-dissolucao)), transparent);
mask-composite: intersect;
}
.hero__figure .photo img { width: 100%; height: auto; object-fit: contain; } /* foto inteira, na proporção dela */
}
.hero--escuro .btn:not(.btn--ghost) { /* botão principal claro, como o da faixa */
--_bg: var(--band-text);
--_fg: var(--band-btn-text);
}
/* Botão secundário (hero.mostrarBotaoServicos): contorno de 2 px, claro (mais de 3:1
sobre o vinho), sem preencher como o principal. O 2º pixel é uma sombra interna,
para o botão ficar com a mesma altura do "Agendar horário". */
.hero--escuro .btn--ghost {
--_fg: var(--band-text);
--_contorno: color-mix(in srgb, var(--band-text) 75%, transparent);
border-color: var(--_contorno);
box-shadow: inset 0 0 0 1px var(--_contorno);
}
.hero--escuro .btn:hover { box-shadow: 0 10px 24px -12px var(--sombra-botao-escuro); }
.hero--escuro .btn--ghost:hover {
background: color-mix(in srgb, var(--band-text) 10%, transparent);
box-shadow: inset 0 0 0 1px var(--_contorno);
}
.hero--escuro .hero__trust {
border-top-color: color-mix(in srgb, var(--band-text) 18%, transparent);
color: color-mix(in srgb, var(--band-text) 85%, transparent);
}
.hero--escuro .hero__trust span::before { background: var(--band-metal); }
.hero--escuro .hero__figure::before {
border-color: color-mix(in srgb, var(--band-metal) 70%, transparent);
background: color-mix(in srgb, var(--band-text) 12%, transparent);
}
/* ---------- Seções (largura do texto de introdução: --largura-texto, no topo) ---------- */
.section { padding-block: var(--section-y); }
.section--line { border-top: 1px solid var(--line); }
/* Fundos alternados (20/10/2026, proposta B escolhida pelo Igor): pela ordem das seções da
página, uma sim, uma não ganha --fundo-secao-alt (o topo e a faixa do formulário, em vinho,
ficam de fora e não contam). Vale para qualquer cliente e se refaz sozinho quando uma seção
é desligada ou vira página própria. Com a mudança de tom marcando a troca de seção, a linha
fina entre elas sai. Nas seções alternadas, o texto discreto usa --texto-dim-alt (contraste).
Para voltar ao fundo único, apague as duas regras abaixo. */
main > section:nth-child(even of .section:not(.band)) { background: var(--fundo-secao-alt); --text-dim: var(--texto-dim-alt); }
main > .section.section--line { border-top: 0; }
.section__head { max-width: var(--largura-texto); margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem); padding-top: var(--respiro-titulo); }
.section__head h2,
.section__head h1 { font-size: var(--step-3); max-width: 20ch; } /* h1: seção em página própria */
.section__head p { margin-top: 0.9rem; color: var(--text-2); }
/* Celular: o título que não cabe numa linha diminui só o necessário
(--caracteres vem do render.js; os curtos ficam em --step-3). */
@media (max-width: 720px) {
.section__head h2,
.section__head h1 { font-size: min(var(--step-3), calc((100vw - 2 * var(--pad)) / (var(--caracteres, 1) * var(--largura-letra-titulo)))); }
}
.section__head--row {
max-width: none;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem 2.5rem;
flex-wrap: wrap;
}
.section__head--row > div { max-width: 46ch; }
/* Recuo das âncoras: a seção começa logo abaixo do topo, com --respiro-ancora de folga.
--altura-topo é medida pelo script.js (os valores abaixo valem até ele medir). */
[id] { scroll-margin-top: var(--recuo-ancora); }
/* ---------- Carte de serviços ---------- */
/* Botões de categoria dos serviços: só até 880 px, quando os grupos ficam
em uma coluna e a lista fica longa (render.js: servicosCategorias). */
/* Atalhos em uma linha só (.categorias--linha, com servicos.cards; 22/10/2026): no celular, uma
linha deslizável, como abas, sincronizada com o carrossel (o atalho do card atual fica
preenchido); no computador, a mesma linha, centralizada. As bordas esmaecem para indicar
que a linha desliza. */
.categorias.categorias--linha {
display: flex;
flex-wrap: nowrap;
justify-content: safe center;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
margin: 0 0 clamp(1.25rem, 4vw, 1.75rem);
padding-block: 2px;
}
.categorias--linha::-webkit-scrollbar { display: none; }
.categorias--linha .categoria {
flex: none;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 14px;
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
border-radius: 999px;
font-size: 15px;
font-weight: 600;
color: var(--accent);
text-decoration: none;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.categorias--linha .categoria:hover,
.categorias--linha .categoria:focus-visible,
.categorias--linha .categoria.is-atual { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
@media (min-width: 721px) { /* computador e tablet: uma linha quando cabe; senão, duas, centralizadas (nenhum escondido) */
.categorias.categorias--linha { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 6px; }
.categorias--linha .categoria { font-size: 14px; padding: 0 12px; }
}
@media (max-width: 720px) {
.categorias.categorias--linha {
justify-content: flex-start;
margin-inline: calc(-1 * var(--pad));
padding-inline: var(--pad);
scroll-padding-inline: var(--pad);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pad), #000 calc(100% - 2.5rem), transparent);
mask-image: linear-gradient(to right, transparent 0, #000 var(--pad), #000 calc(100% - 2.5rem), transparent);
}
}
/* a linha de atalhos da frota e do blog (galeria.atalhos, blog.atalhos) usa o mesmo desenho */
.galeria__atalhos, .blog__atalhos { margin-top: 0; }
.categorias:not(.categorias--linha) { display: none; }
@media (max-width: 880px) {
.categorias:not(.categorias--linha) {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 clamp(1.25rem, 4vw, 1.75rem);
}
.categoria {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 14px;
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
border-radius: 999px;
font-size: 15px; /* em px, como os botões no celular (ver regra de uma linha) */
font-weight: 700;
color: var(--accent);
text-decoration: none;
white-space: nowrap;
transition: background 0.18s ease, color 0.18s ease;
}
.categoria:hover,
.categoria:focus-visible { background: var(--accent); color: var(--accent-contrast); }
}
/* ---------- Serviços em cards com foto (servicos.cards, 22/10/2026) ----------
Card com a foto e o título centralizado; aberto (toque, ou mouse e foco no computador): o
bloco sobe, o título vai para a esquerda e fica dourado, a linha dourada cresce, aparecem
a descrição e o "Solicitar ›" (com atraso). Celular: carrossel com indicadores (o atual,
comprido); computador: grade. Variáveis --svc-altura e --svc-duracao. */
.carte.carte--cards { display: block; }
.svc-trilho { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
/* Última linha centralizada (24/10/2026): com 3 colunas (ou 2), o card que sobra na última linha
fica no centro, em vez de encostado à esquerda (ex.: 10 serviços em 3 colunas). A grade passa a
ter o dobro de colunas, e cada card ocupa duas; a largura dos cards não muda. Mede a largura
da área dos cards (container "servicos"), então acompanha o texto aumentado. Só a partir de
721px (no celular, os cards são um carrossel). */
.carte.carte--cards { container: servicos / inline-size; }
@media (min-width: 721px) {
@container servicos (min-width: 53rem) and (max-width: 70.9375rem) {
.svc-trilho { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.svc-trilho > .svc { grid-column: span 2; }
.svc-trilho > .svc:last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
.svc-trilho > .svc:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
.svc-trilho > .svc:last-child:nth-child(3n+2) { grid-column: 4 / span 2; }
}
@container servicos (min-width: 35rem) and (max-width: 52.9375rem) {
.svc-trilho { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-trilho > .svc { grid-column: span 2; }
.svc-trilho > .svc:last-child:nth-child(2n+1) { grid-column: 2 / span 2; }
}
}
.svc {
position: relative;
height: var(--svc-altura);
border: 1px solid color-mix(in srgb, var(--metal) 35%, transparent);
border-radius: 8px;
overflow: hidden;
isolation: isolate;
background: var(--band-bg);
color: var(--band-text);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.svc:focus-visible { outline: 2px solid var(--metal); outline-offset: 3px; }
.svc > .photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; z-index: 0; }
.svc > .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(var(--svc-duracao) * 1.6) ease; }
.svc::before { /* ao abrir, a foto escurece por inteiro (leitura da descrição sobre fotos claras), como no site atual */
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: color-mix(in srgb, var(--band-bg) var(--svc-escurecer), transparent);
opacity: 0;
transition: opacity var(--svc-duracao) ease;
}
.svc.is-aberto::before, .svc:focus-within::before { opacity: 1; }
.svc__sem-foto { background: linear-gradient(160deg, var(--wash1), var(--wash2)); }
.svc__sem-foto::after { content: none; display: none; } /* sem a etiqueta do bloco de exemplo */
.svc__sem-foto::before { /* sem foto: o selo da marca em marca d'água, até a foto chegar */
content: "";
position: absolute;
inset: 0;
background: var(--logo-src) center 36% / 38% no-repeat;
opacity: 0.16;
filter: grayscale(0.3);
}
.svc::after { /* degradê escuro de baixo para cima, mais forte com o card aberto */
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to top, color-mix(in srgb, var(--band-bg) 96%, transparent) 0%, color-mix(in srgb, var(--band-bg) 55%, transparent) 38%, transparent 70%);
transition: opacity var(--svc-duracao) ease;
}
.svc__conteudo {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 1.25rem 1.25rem 4.25rem;
transform: translateY(2.75rem);
transition: transform var(--svc-duracao) cubic-bezier(0.22, 0.61, 0.36, 1);
}
.svc__titulo {
font-size: var(--step-3);
text-align: center;
color: var(--band-text);
text-shadow: 0 2px 14px color-mix(in srgb, var(--band-bg) 70%, transparent);
transition: color var(--svc-duracao) ease;
}
.svc__linha { display: block; width: 0; height: 2px; margin: 0.7rem 0 0.8rem; background: var(--band-metal); transition: width var(--svc-duracao) ease; }
.svc__desc { margin: 0; max-height: 0; overflow: hidden; opacity: 0; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.6; color: color-mix(in srgb, var(--band-text) 92%, transparent); transition: opacity var(--svc-duracao) ease, max-height var(--svc-duracao) ease; }
.svc__solicitar {
position: absolute;
left: 1.25rem;
bottom: 1rem;
z-index: 3;
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: 700;
font-size: var(--tamanho-botao);
letter-spacing: 0.04em;
color: var(--band-metal);
text-decoration: none;
opacity: 0;
visibility: hidden;
transform: translateY(0.75rem);
transition: opacity var(--svc-duracao) ease 0.15s, transform var(--svc-duracao) ease 0.15s, visibility 0s linear var(--svc-duracao);
}
/* aberto: toque (.is-aberto, script.js) ou foco; no computador, também ao passar o mouse */
.svc.is-aberto .svc__conteudo, .svc:focus-within .svc__conteudo { transform: none; }
.svc.is-aberto .svc__titulo, .svc:focus-within .svc__titulo { text-align: left; color: var(--band-accent); }
.svc.is-aberto .svc__linha, .svc:focus-within .svc__linha { width: 3rem; }
.svc.is-aberto .svc__desc, .svc:focus-within .svc__desc { max-height: 24rem; opacity: 1; }
.svc.is-aberto .svc__solicitar, .svc:focus-within .svc__solicitar { opacity: 1; visibility: visible; transform: none; transition-delay: 0.15s, 0.15s, 0s; }
.svc.is-aberto > .photo img, .svc:focus-within > .photo img { transform: scale(1.06); }
@media (hover: hover) and (pointer: fine) {
.svc:hover .svc__conteudo { transform: none; }
.svc:hover .svc__titulo { text-align: left; color: var(--band-accent); }
.svc:hover .svc__linha { width: 3rem; }
.svc:hover .svc__desc { max-height: 24rem; opacity: 1; }
.svc:hover .svc__solicitar { opacity: 1; visibility: visible; transform: none; transition-delay: 0.15s, 0.15s, 0s; }
.svc:hover > .photo img { transform: scale(1.06); }
.svc:hover::before { opacity: 1; }
}
.svc-indicadores { display: none; }
@media (max-width: 720px) {
.svc-trilho {
display: flex;
gap: 0.75rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
margin-inline: calc(-1 * var(--pad));
padding-inline: var(--pad);
scroll-padding-inline: var(--pad);
scrollbar-width: none;
}
.svc-trilho::-webkit-scrollbar { display: none; }
.svc { flex: 0 0 86%; scroll-snap-align: start; height: var(--svc-altura-celular); }
.svc-indicadores { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; }
.svc-indicador {
display: grid;
place-items: center;
width: 2.15rem;
height: 44px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.svc-indicador::before { /* o traço: curto; o do card atual, comprido */
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
background: color-mix(in srgb, var(--metal) 40%, transparent);
transition: width 0.3s ease, background 0.3s ease;
}
.svc-indicador.is-atual::before { width: 1.75rem; background: var(--metal); }
.svc-indicador:focus-visible { outline: 2px solid var(--metal); outline-offset: -6px; border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) {
.svc *, .svc::after { transition: none !important; }
.svc > .photo img { transform: none !important; }
}
.carte {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 4vw, 2.75rem);
}
.carte__group h3 {
font-size: var(--step-1);
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--metal);
display: flex;
align-items: baseline;
justify-content: space-between;
}
.carte__group h3 span {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
}
.item {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 1.25rem;
row-gap: 0.35rem;
padding-block: 1.15rem;
border-bottom: 1px solid var(--line);
}
.item__name { font-weight: 700; }
.item__price {
text-align: right;
font-weight: 700;
color: var(--accent);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.item__desc {
grid-column: 1 / -1;
color: var(--text-dim);
font-size: 1rem;
line-height: 1.5;
max-width: 46ch;
}
.item__meta {
grid-column: 1 / -1;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-dim);
}
/* "Agendar ›" de cada serviço (servicos.exibirPrecos: false), no lugar do preço:
discreto, em letras normais, na cor da marca. Só o link é tocável; a área
invisível (::before) completa os 44 px de toque sem mudar a altura da lista. */
.item__agendar {
position: relative;
justify-self: end;
font-size: 0.9375rem;
font-weight: 600;
color: var(--accent);
text-decoration: none;
white-space: nowrap;
}
.item__agendar::before { content: ""; position: absolute; inset: -11px -10px; }
.item__agendar:hover { text-decoration: underline; text-underline-offset: 3px; }
.item__agendar:focus-visible { outline-offset: 4px; }
/* Selo "Mais pedido" (maisPedido: true no serviço), ao lado do nome */
.selo-mais-pedido {
display: inline-block;
vertical-align: 0.12em;
margin-left: 0.15rem;
padding: 0.15em 0.65em;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-tint) 70%, transparent);
color: var(--text);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
/* Vale-presente (servicos.valePresente), depois dos grupos de serviços */
.carte__vale {
grid-column: 1 / -1;
display: grid;
gap: 0.5rem;
justify-items: start;
padding: 1.4rem clamp(1.25rem, 3vw, 1.75rem);
background: var(--surface);
border: 1px solid var(--line);
border-top: 2px solid var(--metal);
border-radius: 3px;
}
.carte__vale h3 { font-size: var(--step-1); }
.carte__vale p { color: var(--text-2); font-size: 1rem; max-width: 60ch; }
.carte__vale .inline-cta { margin-top: 0.4rem; }
.carte__note {
grid-column: 1 / -1;
margin-top: 0.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.5rem;
padding: 1.4rem 1.6rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 3px;
}
.carte__note p { color: var(--text-2); font-size: 1rem; }
.carte__note strong { color: var(--text); font-family: var(--font-display); font-style: var(--italico-display); font-weight: 400; }
/* Vale-presente e desconto juntos (20/10/2026): dois cards lado a lado, como os de
"Onde eu atendo" (a grade .carte tem duas colunas; abaixo de 880 px, uma, e eles
empilham). Mesma altura, filete dourado no topo e o link embaixo. Só um dos
dois: continua na largura inteira. */
.carte__vale:has(+ .carte__note),
.carte__vale + .carte__note {
grid-column: auto;
margin-top: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
padding: 1.4rem clamp(1.25rem, 3vw, 1.75rem);
border-top: 2px solid var(--metal);
}
.carte__vale:has(+ .carte__note) .inline-cta,
.carte__vale + .carte__note .inline-cta { margin-top: auto; padding-top: 0.4rem; }
.inline-cta {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-weight: var(--peso-link-acao);
font-size: var(--tamanho-botao);
letter-spacing: var(--espaco-letras-botao);
text-decoration: none;
color: var(--accent);
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
transition: opacity 0.15s ease;
}
.inline-cta:hover { opacity: 0.65; }
/* Área de toque de 44px nos links pequenos (chamadas, contatos do rodapé,
crédito), sem mudar o visual: uma área invisível em volta do texto. */
.nav a:not(.btn)::before { content: ""; position: absolute; inset: -5px -0.6rem; } /* menu do computador/tablet */
.inline-cta,
.foot ul a,
.foot__legal a { position: relative; }
.inline-cta::before,
.foot ul a::before,
.foot__legal a::before {
content: "";
position: absolute;
inset: -12px -4px;
}
/* Botões, chamadas e o @ do Instagram: sempre numa linha só, nunca quebram
(regra do molde, ver CLAUDE.md). Em tela estreita, o espaçamento e a
fonte diminuem para caber; se ainda assim não couber, encurte o texto
no config.
No celular (até 720 px), botões e chamadas têm tamanho em px (os mesmos
valores da fonte padrão de 16 px): com a fonte do sistema aumentada
(115%, 130%), eles continuam cabendo numa linha. O restante do texto
acompanha a fonte do sistema normalmente. */
.btn, .inline-cta { white-space: nowrap; }
@media (max-width: 720px) {
.btn, .inline-cta { font-size: var(--tamanho-botao-celular); }
.btn { gap: 9.6px; padding: 16px 25.6px; }
.btn--light { font-size: 15px; padding: 16.8px 31.2px; }
.inline-cta { gap: 7.2px; }
}
@media (max-width: 380px) {
.btn, .inline-cta { letter-spacing: 0; }
.btn { padding-inline: 17.6px; }
}
@media (max-width: 340px) {
.btn, .inline-cta { font-size: 13px; }
}
/* ---------- Galeria ---------- */
.gallery {
display: grid;
/* minmax(0, 1fr): a coluna não cresce com o conteúdo (sem isso a
galeria passava da tela) */
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.9rem;
}
.gallery figure { margin: 0; display: flex; flex-direction: column; }
.g-tall { grid-row: span 2; }
.g-tall .photo { flex: 1; } /* a vertical preenche as duas linhas */
.gallery figure:not(.g-tall) .photo { aspect-ratio: 1 / 1; }
.gallery figcaption {
margin-top: 0.55rem;
font-size: 1rem;
letter-spacing: 0.05em;
color: var(--text-dim);
}
.gallery__foot {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.gallery__foot small { color: var(--text-dim); }
/* Fim da galeria: o botão "Agendar horário" no centro. Com espaço (a largura da
seção medida na letra do texto, que cresce com a fonte do sistema aumentada,
inclusive no Android), o link do Instagram fica à direita, na mesma linha;
sem espaço (celular, tablet ou texto muito aumentado), os dois empilhados no centro. */
#galeria > .wrap { container: galeria / inline-size; }
.gallery__foot { flex-direction: column; justify-content: center; }
@container galeria (min-width: 46em) {
.gallery__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.gallery__foot > .btn { grid-column: 2; }
.gallery__foot > .inline-cta { grid-column: 3; justify-self: end; }
}
/* Link de ampliar dentro da foto (vai para a versão grande; com
JavaScript abre a foto ampliada). Ocupa a foto inteira. */
.photo__ampliar { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.photo__ampliar:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
/* Destaque no computador (a partir de 721 px): com o cursor sobre uma foto
(ou o foco do teclado no link dela), as demais esmaecem e perdem um pouco
de cor, e a destacada sobe com sombra suave. Ao sair, todas voltam ao
normal. O cursor de lupa com "+" (zoom-in) aparece só na foto destacada.
Ajustes: --galeria-destaque-* no 1º :root. No celular (carrossel), nada muda. */
@media (min-width: 721px) {
.gallery .photo {
transition:
opacity var(--galeria-destaque-duracao) var(--galeria-destaque-curva),
filter var(--galeria-destaque-duracao) var(--galeria-destaque-curva),
transform var(--galeria-destaque-duracao) var(--galeria-destaque-curva),
box-shadow var(--galeria-destaque-duracao) var(--galeria-destaque-curva);
}
.gallery:has(.photo__ampliar:focus-visible) .photo:not(:has(.photo__ampliar:focus-visible)) {
opacity: var(--galeria-destaque-opacidade);
filter: saturate(var(--galeria-destaque-saturacao));
}
.gallery .photo:has(.photo__ampliar:focus-visible) {
transform: translateY(calc(var(--galeria-destaque-elevacao) * -1));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal) 45%, transparent), 0 12px 24px -12px var(--sombra-galeria);
}
}
@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
.gallery:has(.photo:hover) .photo:not(:hover) {
opacity: var(--galeria-destaque-opacidade);
filter: saturate(var(--galeria-destaque-saturacao));
}
.gallery .photo:hover {
transform: translateY(calc(var(--galeria-destaque-elevacao) * -1));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal) 45%, transparent), 0 12px 24px -12px var(--sombra-galeria);
}
}
@media (prefers-reduced-motion: reduce) {
.gallery .photo:hover,
.gallery .photo:has(.photo__ampliar:focus-visible) { transform: none; } /* sem elevação; fica só o contraste */
}
/* Pontinhos do carrossel: criados pelo js/script.js, só aparecem no celular */
.gallery__dots { display: none; }
/* Celular: carrossel horizontal deslizável (scroll-snap). A próxima foto
aparece na borda; sem JavaScript, desliza do mesmo jeito (só sem os
pontinhos). */
@media (max-width: 720px) {
.gallery {
display: flex;
gap: 0.75rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
/* faixa de borda a borda da tela; a 1ª foto alinha com o texto */
margin-inline: calc(var(--pad) * -1);
padding-inline: var(--pad);
scroll-padding-inline: var(--pad);
scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery figure { flex: 0 0 78%; scroll-snap-align: start; }
.gallery .photo,
.gallery figure:not(.g-tall) .photo { flex: none; aspect-ratio: 4 / 5; }
.gallery__dots {
display: flex;
justify-content: center;
gap: 0.45rem;
margin-top: 0.9rem;
}
.gallery__dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: color-mix(in srgb, var(--metal) 45%, transparent);
transition: background 0.2s ease, transform 0.2s ease;
}
.gallery__dots span.is-atual { background: var(--accent); transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
.gallery__dots span { transition: none; }
}
/* ---------- Sobre ---------- */
.about__inner {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(2.5rem, 6vw, 5rem);
align-items: start;
}
.about__figure { margin: 0; padding: 0.7rem; position: relative; }
.about__figure::before {
content: "";
position: absolute;
inset: 0;
border: 1px solid color-mix(in srgb, var(--metal) 50%, transparent);
transform: translate(-0.7rem, 0.7rem);
}
.about__figure .photo { aspect-ratio: 4 / 5; }
.about__figure .photo img { object-position: var(--sobre-foto-posicao); } /* enquadramento do retrato (Faria: o alto da foto, para não cortar a cabeça) */
.about__titulo { font-size: var(--step-3); max-width: 20ch; margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem); } /* mesmo estilo dos títulos das seções (.section__head h2) */
.about__body p + p { margin-top: 1.15rem; color: var(--text-2); }
.about__body p:first-of-type { font-size: var(--step-1); color: var(--text); line-height: 1.5; }
.sign {
margin-top: 1.8rem;
font-family: var(--font-display);
font-style: var(--italico-display);
font-size: 1.6rem;
color: var(--accent);
}
.creds {
margin: 2rem 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.75rem;
}
.creds li {
display: flex;
gap: 0.8rem;
font-size: 1rem;
color: var(--text-2);
}
/* Credenciais em cards (sobre.credenciais com objetos, 21/10/2026): como no site original
da Faria, um card por atributo, com ícone, título em destaque e complemento; 2 colunas
(celular comum e computador), uma por linha só em tela muito estreita ou com o texto aumentado. */
.creds--cards { grid-template-columns: repeat(auto-fill, minmax(max(8.75em, calc(50% - 0.5rem)), 1fr)); gap: 0.75rem; } /* no máximo 2 colunas (2 + 2); uma por linha só quando cada coluna ficaria abaixo de 8.75em */
.creds--cards .cred {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.9rem 0.9rem 1rem;
background: var(--surface);
border: 1px solid var(--line);
border-top: 2px solid var(--metal);
border-radius: 3px;
}
.creds--cards .cred::before { content: none; display: none; }
.cred__icone {
display: grid;
place-items: center;
width: var(--cred-icone);
height: var(--cred-icone);
margin-bottom: 0.3rem;
border-radius: 10px;
background: color-mix(in srgb, var(--metal) 16%, transparent);
color: var(--gold-texto);
}
.cred__icone svg { width: 54%; height: 54%; }
.cred__titulo { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); line-height: 1.2; color: var(--text); }
.cred__texto { font-size: 1rem; line-height: 1.45; color: var(--text-2); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cred__icone { color: var(--metal); }
}
:root[data-theme="dark"] .cred__icone { color: var(--metal); }
.creds li::before {
content: "";
flex: none;
width: 1.1rem;
height: 1.1rem;
margin-top: 0.2rem;
background: var(--metal);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ---------- Prova social ---------- */
.quotes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.25rem, 3vw, 2rem);
}
.quote {
display: flex;
flex-direction: column;
gap: 1.2rem;
margin: 0; /* a tem 40px de margem padrão */
background: var(--surface);
border: 1px solid var(--line);
border-top: 2px solid var(--metal);
border-radius: 3px;
padding: clamp(1.5rem, 3vw, 2rem);
}
.quote blockquote {
margin: 0;
font-family: var(--font-display);
font-size: var(--step-1);
line-height: 1.4;
color: var(--text);
}
.quote blockquote::before {
content: "\201C";
display: block;
font-size: 2.6rem;
line-height: 0.6;
color: var(--accent);
margin-bottom: 0.4rem;
}
.quote figcaption {
font-size: 1rem;
letter-spacing: 0.06em;
color: var(--text-dim);
margin-top: auto;
}
.quote figcaption strong {
display: block;
color: var(--text);
font-family: var(--font-body);
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 1rem;
margin-bottom: 0.2rem;
}
.rating {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.6rem;
margin-top: clamp(1.25rem, 3vw, 2rem);
padding: 1.1rem clamp(1.25rem, 3vw, 1.75rem);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 3px;
font-size: var(--step-1);
color: var(--text-2);
}
.rating b { color: var(--text); font-weight: 700; }
.rating .stars { color: var(--metal); letter-spacing: 0.1em; }
.rating a { color: var(--accent); text-underline-offset: 3px; white-space: nowrap; }
/* Botão "Avalie no Google": discreto (contorno fino na cor da marca, fundo
transparente, "G" colorido), para não competir com o de agendar */
.avaliar { margin: clamp(1.25rem, 3vw, 1.75rem) 0 0; }
.sem-quebra { white-space: nowrap; } /* telefone: nunca em duas linhas */
/* Abertura dos depoimentos: "G" do Google, estrelas e nota (20/10/2026) */
.nota-google-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0 0 0.6rem; }
.nota-google {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 44px; /* toque de 44 px */
color: var(--text-2);
text-decoration: none;
font-size: 0.95rem;
}
.nota-google svg { width: 1.2em; height: 1.2em; flex: none; }
.nota-google__texto { color: var(--text); font-weight: 600; }
a.nota-google:hover .nota-google__texto { text-decoration: underline; text-underline-offset: 3px; }
a.nota-google:focus-visible { outline: 2px solid var(--metal); outline-offset: 4px; border-radius: 3px; }
/* estrelas proporcionais à nota: 5 de fundo, apagadas, e por cima as cheias, cortadas
em (nota / 5) da largura (ex.: 4,9 = 98%); decorativas (aria-hidden), a nota em número ao lado */
.estrelas { position: relative; display: inline-block; line-height: 1; letter-spacing: 0.08em; color: color-mix(in srgb, var(--metal) 32%, transparent); }
.estrelas::before { content: "★★★★★"; }
.estrelas::after {
content: "★★★★★";
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--nota) / 5 * 100%);
overflow: hidden;
white-space: nowrap;
color: var(--metal);
}
.btn--google {
--_bg: transparent;
--_fg: var(--text);
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
box-shadow: none;
min-height: 44px;
}
.btn--google svg { width: 1.25em; height: 1.25em; }
.btn--google:hover {
background: color-mix(in srgb, var(--accent) 8%, transparent);
box-shadow: none;
}
/* modo "demonstracao" sem link: tracejado e sem ação (pedido do Igor, 13/10/2026) */
.btn--provisorio {
border-style: dashed;
cursor: default;
opacity: 0.85;
}
.btn--provisorio:hover { transform: none; background: transparent; }
/* Modo "demonstracao": exemplos ilustrativos e espaços a preencher, com o
mesmo acabamento final dos dados reais (a prévia vende o site). Só a
etiqueta discreta "Exemplo ilustrativo" sinaliza o exemplo; nunca
aparecem no modo "cliente" (render.js). */
.etiqueta-exemplo {
align-self: flex-start;
display: inline-block;
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.2em 0.8em;
}
.rating--exemplo .etiqueta-exemplo { order: 9; margin-left: auto; } /* no fim da faixa */
.provisorio {
margin: clamp(1.25rem, 3vw, 2rem) 0 0;
padding: 1.4rem clamp(1.25rem, 3vw, 1.75rem);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 3px;
font-size: 1rem;
font-style: italic;
color: var(--text-dim);
text-align: center;
}
.provisorio--largo { grid-column: 1 / -1; margin-top: 0; }
/* Texto de exemplo do config ([Bairro]...) e foto ainda sem arquivo, só no modo "demonstracao" */
.a-preencher {
text-decoration: underline dotted color-mix(in srgb, var(--accent) 55%, transparent);
text-decoration-thickness: 1.5px;
text-underline-offset: 0.2em;
}
@media (max-width: 800px) {
.quotes { grid-template-columns: 1fr; }
}
/* Celular (até 720 px): depoimentos em carrossel deslizável, como a galeria.
O próximo card aparece na borda; os pontinhos vêm do script.js (sem
JavaScript, desliza igual). No computador e no tablet, nada muda. */
@media (max-width: 720px) {
.quotes {
display: flex;
gap: 0.9rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
margin-inline: calc(var(--pad) * -1);
padding-inline: var(--pad);
scroll-padding-inline: var(--pad);
scrollbar-width: none;
}
.quotes::-webkit-scrollbar { display: none; }
.quotes > .quote { flex: 0 0 85%; scroll-snap-align: start; margin: 0; }
.quotes > .provisorio { flex: 1 0 100%; }
}
/* ---------- Atendimento ---------- */
.attend {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
}
/* ---------- Pilares (secoes.pilares) ----------
Logo depois do topo, no fundo das seções alternadas (fora da alternância). Com pouco
espaço (celular, ou tablet com o texto aumentado): lista vertical compacta, sem card,
centralizada, com um traço curto dourado acima de cada título. Com espaço (container query em "em", que acompanha
o texto aumentado também no Android): três cards lado a lado, com o acabamento dos
cards de atendimento. Limite em --: 38em (~646 px de conteúdo com a fonte padrão). */
.pilares { background: var(--fundo-secao-alt); --text-dim: var(--texto-dim-alt); padding-block: var(--pilares-respiro); }
.pilares > .wrap { container: pilares / inline-size; }
.pilares__lista { display: grid; grid-template-columns: minmax(0, 1fr); }
/* lista (celular): título e texto centralizados, com um traço curto dourado acima do título
(Faria, 21/10/2026; antes, um ponto dourado à esquerda) */
.pilares__item { position: relative; border-bottom: 1px solid var(--line); padding: 1.1rem 0; text-align: center; }
.pilares__item:first-child { padding-top: 0; }
.pilares__item:last-child { border-bottom: 0; padding-bottom: 0; }
.pilares__item::before {
content: "";
display: block;
width: var(--pilares-traco);
height: 2px;
margin: 0 auto 0.7rem;
background: var(--metal);
}
.pilares__item p { max-width: 34ch; margin-inline: auto; }
.pilares__item h3 { font-size: var(--step-0); margin-bottom: 0.2rem; }
.pilares__item p { color: var(--text-2); }
/* Título visível e ícones (pilares.mostrarTitulo e icone, 21/10/2026): título centralizado;
com ícone, cada pilar fica centralizado (celular e computador), o ícone num círculo de
linha dourada fina acima do título, e o traço dourado do celular sai. */
.pilares__titulo { text-align: center; font-size: var(--step-3); margin: 0 0 clamp(1.25rem, 3.5vw, 2rem); }
.pilares__item--icone { text-align: center; }
.pilares__item--icone::before { content: none; }
.pilares__icone {
display: grid;
place-items: center;
width: var(--pilares-icone);
height: var(--pilares-icone);
margin: 0 auto 0.75rem;
border: 1px solid color-mix(in srgb, var(--metal) 70%, transparent);
border-radius: 50%;
color: var(--gold-texto);
}
.pilares__icone svg { width: 50%; height: 50%; }
.pilares__linhas { line-height: 1.6; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .pilares__icone { color: var(--metal); }
}
:root[data-theme="dark"] .pilares__icone { color: var(--metal); }
@container pilares (min-width: 38em) {
.pilares__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pilares-espaco); }
.pilares__item,
.pilares__item:first-child,
.pilares__item:last-child {
background: var(--surface);
border: 1px solid var(--line);
border-top: 2px solid var(--metal);
border-radius: 3px;
padding: clamp(1.3rem, 2.4vw, 1.9rem);
}
.pilares__item::before { content: none; }
.pilares__item { text-align: left; }
.pilares__item--icone { text-align: center; }
.pilares__item p { max-width: none; margin-inline: 0; }
.pilares__item h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
}
.attend__card {
background: var(--surface);
border: 1px solid var(--line);
border-top: 2px solid var(--metal);
border-radius: 3px;
padding: clamp(1.6rem, 3vw, 2.2rem);
}
.attend__card h3 {
font-size: var(--step-1);
margin-bottom: 0.9rem;
}
.attend__card p { color: var(--text-2); }
.attend__card p + p { margin-top: 0.75rem; }
.attend__card .muted { font-size: 1rem; color: var(--text-dim); }
/* "Como chegar" (negocio.comoChegar), abaixo dos cards de atendimento */
.como-chegar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.75rem; margin-top: 1.25rem; }
/* Centralizados em todas as larguras (20/10/2026): nota do Google com as estrelas
e "Avalie no Google" (depoimentos), "Como chegar" e a linha dos horários
(atendimento). A etiqueta "Exemplo ilustrativo" fica na linha de baixo. */
.nota-google-topo { flex-direction: column; justify-content: center; }
.section__head:has(.nota-google-topo) { max-width: none; } /* a nota fica no meio da seção, não do bloco do título; o título mantém o limite dele */
.avaliar { text-align: center; }
.como-chegar { flex-direction: column; gap: 0.5rem; }
.como-chegar .etiqueta-exemplo,
.nota-google-topo .etiqueta-exemplo { align-self: center; }
.hours { justify-content: center; text-align: center; }
/* Celular (até 720 px): também o botão do topo e o @perfil da galeria */
@media (max-width: 720px) {
.hero__actions { justify-content: center; }
.section__head--row > .inline-cta { margin-inline: auto; }
}
.hours {
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
display: flex;
flex-wrap: wrap;
gap: 0.6rem 2rem;
font-size: 1rem;
color: var(--text-2);
}
.hours b { color: var(--text); }
@media (max-width: 680px) { .attend { grid-template-columns: 1fr; } }
/* ---------- FAQ ---------- */
.faq { max-width: 760px; }
/* Acordeão: todas fechadas; ao abrir uma, a anterior fecha (details name="faq") */
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 0; }
.faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 44px;
padding: 1.1rem 0;
font-family: var(--font-display);
font-size: var(--step-1);
color: var(--text);
cursor: pointer;
list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { /* "+" que vira "−" ao abrir */
content: "+";
flex: none;
width: 1em;
text-align: center;
font-family: var(--font-body);
font-size: 1.4em;
line-height: 1;
color: var(--accent);
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item summary:hover { color: var(--accent); }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq__resposta { margin: -0.3rem 0 0; padding-bottom: 1.3rem; color: var(--text-2); }
/* ---------- Faixa CTA final ---------- */
.band {
background: var(--band-bg);
color: var(--band-text);
text-align: center;
}
.band .wrap { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band__mark {
display: block;
width: var(--logo-faixa);
height: var(--logo-faixa);
margin: 0 auto 1.4rem;
background: var(--logo-src) center / contain no-repeat;
}
.band h2 {
font-size: var(--step-3);
margin-inline: auto;
color: var(--band-text);
text-wrap: balance; /* se quebrar, duas linhas equilibradas */
}
/* Celular: o título em no máximo duas linhas (--caracteres = a maior das duas, do render.js) */
@media (max-width: 720px) {
.band h2 { font-size: min(var(--step-3), calc((100vw - 2 * var(--pad)) / (var(--caracteres, 1) * var(--largura-letra-titulo)))); }
}
.band p { margin: 1rem auto 1.8rem; max-width: 64ch; color: color-mix(in srgb, var(--band-text) 82%, transparent); }
/* Título da faixa com contorno (agendar.tituloContorno, 21/10/2026, réplica da Faria): moldura
dourada fina dupla em volta da frase, em vez de uma faixa de fundo (a tarja logo antes já é
uma faixa sólida). Espaço interno em --titulo-contorno-respiro. */
.band--titulo-contorno h2 {
width: fit-content;
max-width: min(calc(100% - 12px), 14.5em); /* a moldura abraça a frase em duas linhas, sem ocupar a largura toda no computador */
margin-block: 0.5rem;
padding: var(--titulo-contorno-respiro) calc(var(--titulo-contorno-respiro) * 1.4);
border: 1px solid color-mix(in srgb, var(--band-metal) 80%, transparent);
border-radius: 2px;
background: var(--titulo-contorno-fundo); /* fundo claro: a frase é o ponto de decisão da página e precisa saltar do fundo escuro (dono, 22/10) */
color: var(--titulo-contorno-texto);
outline: 1px solid color-mix(in srgb, var(--band-metal) 35%, transparent);
outline-offset: 5px;
}
@media (max-width: 720px) {
/* no celular, a frase em até três linhas, com letra de título (antes, duas linhas deixavam a letra pequena demais) */
.band--titulo-contorno h2 { max-width: calc(100% - 12px); font-size: min(var(--step-3), var(--titulo-contorno-celular)); }
}
/* ---------- Formulário de agendamento (CTA final) ---------- */
.booking-form {
margin: 0.5rem auto 0;
max-width: 700px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.1rem 1.25rem;
text-align: left;
}
.booking-form__row { display: flex; flex-direction: column; gap: 0.45rem; }
.booking-form__row--full { grid-column: 1 / -1; }
.booking-form label {
font-size: 0.76rem; /* rótulo decorativo (caixa alta); os campos ficam em 1rem */
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--band-text) 88%, transparent);
}
.booking-form__optional {
text-transform: none;
letter-spacing: 0;
font-weight: 400;
color: color-mix(in srgb, var(--band-text) 65%, transparent);
}
.booking-form input,
.booking-form select,
.booking-form textarea {
font-family: var(--font-body);
font-size: 1rem;
color: var(--form-field-text);
background: var(--band-text);
border: 1px solid transparent;
border-radius: 3px;
padding: 0.8rem 0.9rem;
width: 100%;
}
.booking-form textarea { resize: vertical; min-height: 3.4rem; }
.booking-form input:focus-visible,
.booking-form select:focus-visible,
.booking-form textarea:focus-visible {
outline: 2px solid var(--band-metal);
outline-offset: 2px;
}
.booking-form [aria-invalid="true"] { border-color: var(--form-error-border); }
.booking-form__error {
display: block;
min-height: 1.1em;
font-size: 0.78rem;
font-weight: 700;
color: var(--form-error-text);
}
.booking-form__submit {
grid-column: 1 / -1;
justify-self: center;
margin-top: 0.5rem;
border: none;
cursor: pointer;
}
@media (max-width: 640px) {
.booking-form { grid-template-columns: 1fr; }
}
/* ---------- Rodapé ---------- */
.foot {
background: var(--surface);
border-top: 1px solid var(--line);
}
.foot .wrap {
padding-block: clamp(2rem, 4vw, 3rem);
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 1rem;
}
.foot h2, /* páginas sem h2 no conteúdo (ex.: 404): o build troca h3 por h2, mesmo visual */
.foot h3 {
font-family: var(--font-body);
font-weight: 700; /* mesmo visual de quando era h4 */
line-height: inherit;
text-wrap: wrap;
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dim);
margin: 0 0 1rem;
}
.foot a { color: var(--text-2); text-decoration: none; }
.foot a:hover { color: var(--accent); }
/* Compartilhar o site / Salvar contato: discretos, com área de toque de 44px */
.foot__acoes {
display: flex;
flex-wrap: wrap;
column-gap: 1.4rem;
margin: 0.6rem 0 0;
}
.foot__acao {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 44px;
font-size: 0.875rem;
white-space: nowrap;
}
.foot__acao svg { width: 1.05em; height: 1.05em; flex: none; }
.foot__acao:hover,
.foot__acao:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* Página 404 (dist/404.html, gerada pelo build a partir do molde) */
.pagina-404 { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.pagina-404 h1 { font-size: var(--step-4); margin-bottom: 1rem; }
.pagina-404 p { max-width: 36rem; margin-inline: auto; color: var(--text-2); }
.foot__privacidade { white-space: nowrap; }
/* Página /avaliar (dist/avaliar.html): leve, centralizada, com o logo,
o título e o botão "Avaliar no Google" (ou o aviso, sem link) */
.pagina-avaliar {
min-height: 100vh;
min-height: 100svh;
display: grid;
place-content: center;
justify-items: center;
gap: 1.1rem;
padding: 2rem var(--pad);
text-align: center;
}
.pagina-avaliar__logo { width: 96px; height: 96px; }
.pagina-avaliar h1 { font-size: var(--step-3); max-width: 18ch; }
.pagina-avaliar p { color: var(--text-2); max-width: 36ch; }
.pagina-avaliar .provisorio { margin: 0; }
/* Redes sociais na coluna Contato, abaixo do telefone: ícone discreto + @,
na cor do texto do rodapé, com o mesmo espaçamento da lista. Se o @ não
couber numa linha da coluna, o script.js deixa só o ícone. */
.foot__redes {
display: grid;
justify-items: start;
gap: 0.6rem;
margin-top: 0.6rem;
font-size: 0.875rem;
}
.foot__rede {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
max-width: 100%;
overflow-wrap: anywhere;
}
.foot__rede::before { content: ""; position: absolute; inset: -12px -4px; } /* toque de 44px */
.foot__rede--medir { white-space: nowrap; overflow-wrap: normal; max-width: none; }
.foot__rede svg { width: 1.15em; height: 1.15em; flex: none; opacity: 0.85; }
.foot__rede:hover svg, .foot__rede:focus-visible svg { opacity: 1; }
/* E-mail na coluna Contato (contato.email): ícone de carta + endereço, como as redes */
.foot__email { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; overflow-wrap: anywhere; }
.foot__email svg { width: 1.15em; height: 1.15em; flex: none; opacity: 0.85; }
.foot__email:hover svg, .foot__email:focus-visible svg { opacity: 1; }
/* E-mail longo em texto corrido (ex.: contato dos Termos): quebra dentro do endereço, para o rótulo "E-mail:" não ficar sozinho na linha */
.email-quebra { overflow-wrap: anywhere; }
/* Texto só para leitor de tela (ex.: "Instagram:" antes do @) */
.sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* Página de texto (dist/privacidade.html, gerada pelo build a partir do molde) */
.pagina-texto .wrap { max-width: 46rem; }
.pagina-texto h1 { font-size: var(--step-4); margin: 0.4rem 0 0.6rem; }
.pagina-texto h2 { font-size: var(--step-2); margin: 2.2rem 0 0.7rem; }
.pagina-texto p { color: var(--text-2); }
.pagina-texto p + p { margin-top: 0.8rem; }
.pagina-texto__data { color: var(--text-dim); }
.pagina-texto ul { margin: 0; padding-left: 1.3rem; color: var(--text-2); } /* regras do atendimento (/termos) */
.pagina-texto li + li { margin-top: 0.5rem; }
.pagina-texto li::marker { color: var(--metal); }
.pagina-texto li strong { color: var(--text); }
.pagina-texto .pagina-404__acoes { justify-content: flex-start; }
.pagina-404__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 2rem; }
/* ---------- Blog (dist/blog/index.html e dist/blog/.html, gerados pelo build) ----------
Página /blog/: etiqueta com o nome do negócio, título, subtítulo e os
artigos em cartões (fundo --surface, linha fina e filete dourado, como
os depoimentos). Computador e tablet: cartões lado a lado, em colunas
de no mínimo 17em (empilham sozinhas com o texto aumentado). Celular
(até 720 px): carrossel deslizável, com pontinhos do script.js. */
.blog__head { max-width: 46rem; }
.blog__head h1 { font-size: var(--step-4); }
.blog__head p { font-family: var(--font-display); font-style: var(--italico-display); font-size: var(--step-1); color: var(--text-2); }
/* Marca acima do título do blog (blog.marca): a assinatura do negócio e o complemento na linha
de baixo, centralizados; blog.centralizado: título e subtítulo no centro (22/10/2026) */
.blog__marca { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 0 auto 1.5rem; text-align: center; color: var(--text); }
.blog__marca .brand__name--imagem { height: var(--marca-altura-blog); -webkit-mask-position: center; mask-position: center; }
.blog__marca-nome { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; }
.blog__head .blog__complemento { font-family: var(--font-body); font-style: normal; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--text-dim); }
.blog__head--centro { margin-inline: auto; text-align: center; }
.blog__head--centro h1, .blog__head--centro p { margin-inline: auto; }
.blog__cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17em), 1fr));
gap: clamp(1.25rem, 3vw, 2rem);
}
.blog-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-top: 2px solid var(--metal);
border-radius: 3px;
overflow: hidden;
container-type: inline-size; /* o título acompanha a largura do cartão (cqi) */
}
.blog-card__foto { display: block; }
.blog-card__foto .photo { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; }
.blog-card__corpo {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.7rem;
padding: clamp(1.25rem, 3vw, 1.6rem) 1.25rem;
}
.blog-card__meta,
.artigo__meta { font-size: var(--step--1); letter-spacing: 0.04em; color: var(--text-dim); }
/* título com no máximo 2 linhas e resumo sempre com 2 linhas (reticências no corte):
os cartões ficam alinhados, com o "Ler artigo" na mesma altura */
.blog-card__titulo {
font-size: clamp(1rem, 5.4cqi, 1.15rem); /* cartão estreito, letra um pouco menor: o título inteiro cabe em 2 linhas */
line-height: 1.25;
text-wrap: pretty;
min-height: 2.5em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.blog-card__titulo a { color: var(--text); text-decoration: none; }
.blog-card__titulo a:hover { color: var(--accent); }
.blog-card__resumo {
font-size: 1rem;
line-height: 1.6;
height: 3.2em;
color: var(--text-2);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.blog-card__ler { align-self: flex-start; margin-top: auto; }
@media (max-width: 720px) {
.blog__cards {
display: flex;
gap: 0.9rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
margin-inline: calc(var(--pad) * -1);
padding-inline: var(--pad);
scroll-padding-inline: var(--pad);
scrollbar-width: none;
}
.blog__cards::-webkit-scrollbar { display: none; }
.blog__cards > .blog-card { flex: 0 0 88%; scroll-snap-align: start; }
.blog-card__corpo { padding-inline: 1rem; } /* com 88% e 1rem, o título inteiro cabe em 2 linhas a partir de ~375 px */
}
/* Página do artigo: largura confortável de leitura (texto em 1.0625rem) */
.artigo .wrap { max-width: 46rem; }
.artigo__figura { margin: 1.5rem 0 1.4rem; }
.artigo__figura .photo { aspect-ratio: 3 / 2; }
.artigo h1 { font-size: var(--step-3); margin: 0.5rem 0 1.6rem; }
.artigo__texto { color: var(--text-2); }
.artigo__texto > * + * { margin-top: 1rem; }
.artigo__texto h2 { font-size: var(--step-2); color: var(--text); margin-top: 2.2rem; }
.artigo__texto h3 { font-size: var(--step-1); color: var(--text); margin-top: 1.8rem; }
.artigo__texto h2 + *,
.artigo__texto h3 + * { margin-top: 0.7rem; }
.artigo__texto ul,
.artigo__texto ol { margin-bottom: 0; padding-left: 1.3rem; }
.artigo__texto li + li { margin-top: 0.45rem; }
.artigo__texto li::marker { color: var(--metal); }
.artigo__texto strong { color: var(--text); }
.artigo__texto a { color: var(--accent); text-underline-offset: 3px; }
.artigo__agendar { margin-top: 2.4rem; }
.blog--leia .section__head h2 { font-size: var(--step-2); }
.foot__brand .brand-lockup { display: flex; align-items: center; gap: 0.7rem; }
.foot__brand .brand__mark--sm {
width: var(--logo-rodape);
height: var(--logo-rodape);
flex: none;
background: var(--logo-src) center / contain no-repeat;
}
.foot__brand .brand__name { font-size: 1.15rem; }
/* Nome como imagem (imagens.marca): máscara na cor do texto, sem caixa alta */
.brand__name--imagem {
display: block;
height: var(--marca-altura-topo);
aspect-ratio: var(--marca-proporcao);
background-color: currentColor;
-webkit-mask: var(--marca-src) left center / contain no-repeat;
mask: var(--marca-src) left center / contain no-repeat;
letter-spacing: 0;
}
.foot__brand .brand__name--imagem { height: var(--marca-altura-rodape); }
/* Marca empilhada no rodapé (rodape.marcaEmpilhada): logo, nome (a assinatura em imagem,
com imagens.marca), complemento menor e a descrição, centralizados na coluna. Do
"Compartilhar" em diante, tudo à esquerda, como o resto do rodapé. */
.foot__brand--empilhada { text-align: center; }
.foot__brand--empilhada .brand-lockup { flex-direction: column; gap: 0.55rem; }
.foot__brand--empilhada .brand__name,
.foot__brand--empilhada .brand__name:not(.brand__name--imagem) {
font-family: var(--font-display);
font-weight: 400;
text-transform: none;
letter-spacing: 0.02em;
font-size: var(--rodape-nome);
line-height: 1.1;
color: var(--text);
}
.foot__complemento { display: block; margin-top: -0.25rem; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--text-dim); }
.foot__brand--empilhada p { margin-inline: auto; }
.foot__brand--empilhada .brand__name--imagem { -webkit-mask-position: center; mask-position: center; }
.foot__brand--empilhada .foot__acoes { justify-content: flex-start; margin-inline: 0; max-width: none; } /* do "Compartilhar" em diante, à esquerda (sem a margem automática da frase) */
/* Rodapé: texto em 14px (0.875rem) e linha final em 13px (0.8125rem); a regra de
16px vale para o texto de leitura do corpo do site, não para o rodapé. */
.foot__brand p { margin-top: 0.9rem; color: var(--text-dim); font-size: 0.875rem; max-width: 32ch; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.875rem; }
.foot__legal {
border-top: 1px solid var(--line);
text-align: center;
font-size: 0.8125rem;
color: var(--text-dim);
padding: 1.5rem var(--pad);
}
/* Crédito do site: discreto, na cor da linha; destaca só no hover/foco.
Quebra como um bloco (vai inteiro para a linha de baixo, se precisar). */
.foot__credito { white-space: nowrap; }
.foot__legal a { color: inherit; text-decoration: none; }
.foot__legal a:hover,
.foot__legal a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* Até 60em (960 px com a fonte padrão): a marca ocupa a linha toda; "Contato" e "Atendimento" ficam
lado a lado só se cada coluna tiver ao menos 14em. Senão, empilham
sozinhas (no celular, sempre). Como o limite está no tamanho da coluna
em "em", ele acompanha a letra, inclusive com o texto aumentado no
Android, que não muda os limites em "em" das media queries. */
@media (max-width: 60em) {
.foot .wrap { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr)); }
.foot__brand { grid-column: 1 / -1; }
.foot ul a { overflow-wrap: anywhere; } /* o @ do Instagram só quebra se não houver outro jeito */
}
/* ---------- Botão flutuante do WhatsApp (só no celular) ----------
Sempre na cor principal da marca (--accent), nunca no verde do
WhatsApp. O ícone usa --accent-contrast, que já garante contraste nos
dois temas. Aparece depois do hero e some no topo, no formulário de
agendamento e no rodapé (classe is-visivel, controlada pelo script.js). */
.topo-voltar {
position: fixed;
right: calc(1.5rem + env(safe-area-inset-right, 0px));
bottom: calc(1.5rem + var(--aviso-cookies, 0px) + env(safe-area-inset-bottom, 0px));
z-index: 89;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--line);
color: var(--text-2);
box-shadow: 0 6px 16px -10px var(--shadow-menu);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, bottom 0.25s ease;
}
.topo-voltar::before { content: ""; position: absolute; inset: -2px; } /* toque de 44px */
.topo-voltar svg { width: 18px; height: 18px; }
.topo-voltar:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.topo-voltar.is-visivel { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 720px) {
/* centralizado sobre o botão do WhatsApp (52px): 6px a mais da borda, 12px acima dele */
.topo-voltar {
right: calc(1rem + 6px + env(safe-area-inset-right, 0px));
bottom: calc(1rem + 52px + 12px + var(--aviso-cookies, 0px) + env(safe-area-inset-bottom, 0px));
}
/* WhatsApp escondido (outro botão de WhatsApp na tela): desce para o lugar dele */
.topo-voltar.sem-wa { bottom: calc(1rem + 6px + var(--aviso-cookies, 0px) + env(safe-area-inset-bottom, 0px)); }
/* respiro no fim da página: os botões flutuantes não cobrem a linha final */
.foot__legal { padding-bottom: calc(var(--rodape-respiro-final-celular) + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
.topo-voltar { transition: none; }
}
/* ---------- Aviso de cookies (só com ferramenta em "cookies" no config) ----------
Faixa discreta na parte de baixo. Enquanto aberta, o script.js põe a altura dela
em --aviso-cookies: o botão do WhatsApp e o "voltar ao topo" sobem, e a página
ganha o mesmo espaço embaixo, para a faixa não cobrir o conteúdo.
Computador: texto, links e botões numa linha (~68 px). Celular: texto (até 2 linhas),
links pequenos e os dois botões lado a lado, com a mesma largura (~125 px).
"Somente o necessário" e "Aceitar todos" com o mesmo destaque: vinho da marca com
texto claro nos dois temas (--wine e --band-text, ~8,9:1). */
body { padding-bottom: var(--aviso-cookies, 0px); }
.cookies {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 95;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem 1.25rem;
padding: 0.75rem var(--pad) calc(0.75rem + env(safe-area-inset-bottom, 0px));
background: var(--surface);
border-top: 1px solid var(--line);
box-shadow: 0 -10px 24px -18px var(--shadow-menu);
}
.cookies[hidden] { display: none; }
.cookies__texto { font-size: 0.9375rem; line-height: 1.45; color: var(--text-2); }
.cookies__links { margin-left: 1.25rem; font-size: 0.875rem; } /* links na sequência do texto, no mesmo parágrafo */
.cookies__links .cookies__config { margin-left: 1.1rem; }
.cookies__sep { display: none; }
.cookies__etiqueta { /* modo demonstração: etiqueta no canto, sobre a linha do topo */
position: absolute;
top: 0;
right: var(--pad);
transform: translateY(-75%); /* mais acima da linha, para não encostar no texto */
background: var(--surface);
font-size: 0.625rem;
line-height: 1.5;
}
.cookies__links a,
.cookies__config {
position: relative;
padding: 0;
border: 0;
background: transparent;
color: var(--accent);
font: inherit;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
cursor: pointer;
}
.cookies__links a::before,
.cookies__config::before { content: ""; position: absolute; inset: -12px -6px; } /* toque de 44px */
.cookies__links a:hover,
.cookies__config:hover { color: var(--text); }
.cookies__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; }
.cookies__btn { /* os dois com o mesmo destaque: preenchidos com o vinho da marca */
--_bg: var(--band-bg); /* 20/10/2026: o vinho mais escuro, que antes só aparecia ao passar o cursor (texto mais nítido, ~10:1); antes var(--wine) */
--_fg: var(--band-text);
border-color: var(--cookies-btn-line); /* contorno rosado, levemente mais claro, nos dois temas */
box-shadow: none;
padding: 0.6rem 1.1rem;
min-height: 40px;
font-size: 14px;
letter-spacing: 0.02em;
text-transform: none;
cursor: pointer;
}
.cookies__btn:hover { box-shadow: none; } /* ao passar o cursor: só sobe 2 px (.btn:hover), sem trocar a cor */
@media (max-width: 720px) { /* celular: texto, links e botões em três linhas */
.cookies { /* bloco comum: num flex em coluna, o Chrome calcula a altura dos botões como se estivessem empilhados */
display: block;
padding: 0.5rem 16px calc(0.5rem + env(safe-area-inset-bottom, 0px));
}
.cookies__texto { font-size: 0.875rem; line-height: 1.4; }
.cookies__links { margin-left: 0; font-size: 0.8125rem; }
.cookies__links .cookies__config { margin-left: 0; }
.cookies__sep { display: inline; color: var(--text-dim); }
.cookies__links a::before,
.cookies__links .cookies__config::before { inset: -23px -4px -5px; } /* 44 px sem invadir os botões */
.cookies__etiqueta { right: 16px; }
.cookies__acoes { margin-top: 0.375rem; gap: 0.5rem; }
.cookies__acoes .cookies__btn { /* mesma base e mesmo crescimento: lado a lado com a mesma largura a partir de ~352 px; abaixo, empilhados */
flex: 1 1 156px;
justify-content: center;
padding-inline: 0.4rem;
font-size: 13px;
white-space: nowrap;
}
}
/* Painel "Sua privacidade": cabeçalho com "Voltar" e título, corpo com rolagem
interna e rodapé fixo com "Salvar". No celular, ocupa quase a tela toda. */
.cookies-prefs {
width: min(30rem, calc(100vw - 2rem));
max-height: calc(100dvh - 3rem);
padding: 0;
border: 1px solid var(--line);
border-top: 2px solid var(--metal);
border-radius: 3px;
background: var(--surface);
color: var(--text);
overflow: hidden;
}
.cookies-prefs[open] { display: flex; flex-direction: column; }
.cookies-prefs::backdrop { background: rgba(22, 15, 20, 0.55); } /* cor fixa: ::backdrop não herda variáveis do :root em navegadores mais antigos */
.cookies-prefs__cabeca {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px; /* a coluna vazia à direita centraliza o título */
align-items: center;
padding: 0.5rem 0.5rem;
border-bottom: 1px solid var(--line);
}
.cookies-prefs__cabeca h2 { grid-column: 2; text-align: center; font-size: var(--step-1); margin: 0; }
.cookies-prefs__voltar {
grid-column: 1;
grid-row: 1;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--text);
cursor: pointer;
}
.cookies-prefs__voltar svg { width: 22px; height: 22px; }
.cookies-prefs__voltar:hover { color: var(--accent); }
.cookies-prefs__voltar:focus-visible { outline: 2px solid var(--metal); outline-offset: 0; }
.cookies-prefs__corpo {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 1rem clamp(1rem, 4vw, 1.5rem) 0.25rem;
}
.cookies-prefs__info {
display: flex;
gap: 0.7rem;
align-items: flex-start;
margin-bottom: 0.5rem;
padding: 0.8rem 0.9rem;
border-radius: 8px;
background: color-mix(in srgb, var(--accent-tint) 35%, var(--surface));
font-size: 0.9375rem;
line-height: 1.5;
color: var(--text);
}
.cookies-prefs__info svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--accent); }
.cookies-prefs__info a { position: relative; color: var(--accent); text-underline-offset: 3px; }
.cookies-prefs__info a::before { content: ""; position: absolute; inset: -12px -4px; } /* toque de 44px */
.cookies-prefs__item {
display: block;
padding: 0.9rem 0;
border-top: 1px solid var(--line);
}
.cookies-prefs__info + .cookies-prefs__item { border-top: 0; }
.cookies-prefs__teste { /* só no teste real (?teste=cookies): o que foi gravado neste navegador */
margin: 0 0 0.75rem;
padding: 0.5rem 0.75rem;
border: 1px dashed var(--metal);
border-radius: 6px;
font-size: 0.875rem;
line-height: 1.45;
color: var(--text-2);
}
label.cookies-prefs__item { cursor: pointer; }
.cookies-prefs__item--fixo { cursor: default; }
.cookies-prefs__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 26px; }
.cookies-prefs__estado { flex: none; font-size: 0.875rem; font-weight: 700; color: var(--text-2); }
.cookies-prefs__desc { display: block; margin-top: 0.35rem; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
.cookies-prefs__rodape {
flex: none;
padding: 0.75rem clamp(1rem, 4vw, 1.5rem) calc(0.75rem + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line);
background: var(--surface);
}
.cookies-prefs__salvar { width: 100%; min-height: 44px; padding-block: 0.55rem; justify-content: center; }
@media (max-width: 720px) { /* celular: quase a tela toda, "Salvar" sempre visível */
.cookies-prefs { width: calc(100vw - 16px); max-width: none; height: calc(100dvh - 16px); max-height: none; }
}
/* Liga/desliga: o próprio checkbox, desenhado como chave (44x26 px) */
.cookies-prefs input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
flex: none;
position: relative;
width: 44px;
height: 26px;
margin: 0;
border-radius: 999px;
background: color-mix(in srgb, var(--text-dim) 45%, transparent);
cursor: pointer;
transition: background 0.2s ease;
}
.cookies-prefs input[type="checkbox"]::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--surface);
transition: transform 0.2s ease;
}
.cookies-prefs input[type="checkbox"]:checked { background: var(--accent); }
.cookies-prefs input[type="checkbox"]:checked::before { transform: translateX(18px); background: var(--accent-contrast); }
.cookies-prefs input[type="checkbox"]:focus-visible { outline: 2px solid var(--metal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.cookies-prefs input[type="checkbox"],
.cookies-prefs input[type="checkbox"]::before { transition: none; }
}
/* Link "Ver todos os depoimentos no Google" (28/10/2026): centralizado, entre os cards e o
"Avalie no Google" */
.ver-google { margin: clamp(1.25rem, 3vw, 1.75rem) 0 0; text-align: center; }
.ver-google + .avaliar { margin-top: 1rem; }
/* WhatsApp flutuante em todas as larguras (dono, 28/10/2026; antes só no celular): no
computador, mais um ponto de contato rápido, no canto inferior direito, com o "voltar ao
topo" logo acima; as regras de quando aparece e some são as mesmas (script.js) */
@media all {
.wa-float {
display: flex;
position: fixed;
right: calc(1rem + env(safe-area-inset-right, 0px));
bottom: calc(1rem + var(--aviso-cookies, 0px) + env(safe-area-inset-bottom, 0px));
z-index: 90;
width: 52px;
height: 52px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--accent);
color: var(--accent-contrast);
box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent) 70%, transparent),
0 2px 6px -2px var(--shadow-menu);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.wa-float svg { width: 26px; height: 26px; }
.wa-float.is-visivel {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
}
@media (min-width: 721px) {
.wa-float { right: calc(1.5rem + env(safe-area-inset-right, 0px)); bottom: calc(1.5rem + var(--aviso-cookies, 0px) + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; }
.wa-float svg { width: 28px; height: 28px; }
/* "voltar ao topo" centralizado sobre o WhatsApp (56px), 12px acima dele; com o WhatsApp
escondido, desce para o lugar dele */
.topo-voltar { right: calc(1.5rem + 8px + env(safe-area-inset-right, 0px)); bottom: calc(1.5rem + 56px + 12px + var(--aviso-cookies, 0px) + env(safe-area-inset-bottom, 0px)); }
.topo-voltar.sem-wa { bottom: calc(1.5rem + 8px + var(--aviso-cookies, 0px) + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
.wa-float { transform: none; }
}
/* ---------- Foto ampliada (lightbox da galeria) ----------
Criada pelo js/script.js num