<!-- GPT | V.B Massoterapia | v14 | Auditoria estrutural e manual-mestre para futuras adaptações -->
<!-- v14: documentação técnica reorganizada; sem alterações intencionais de layout ou comportamento. -->
<!-- GPT | V.B Massoterapia | v9 | Nomes fictícios personalizados nos exemplos e instruções permanentes revisadas -->
<!-- GPT | V.B Massoterapia | v7 | Manual de adaptação e correção definitiva da miniatura Pix -->
<!-- GPT | V.B Massoterapia | v4 | Restauracao do pagamento original e quatro depoimentos ilustrativos -->
<!-- GPT | V.B Massoterapia | v3 | Correcao de categorias, formulario, avaliacoes e formas de pagamento -->
<!-- GPT -->
<!--
===============================================================================
GPT | MANUAL-MESTRE DE ADAPTAÇÃO — LEIA ANTES DE EDITAR
Projeto de referência: V.B Massoterapia | Vladia Brito | revisão v14
Objetivo: permitir que outra IA adapte este HTML para uma nova profissional em
um único ciclo, com segurança, sem perder o design, as interações ou recursos.

REGRA ZERO — NÃO RECONSTRUIR O SITE DO ZERO
Este documento é um guia de manutenção, não uma autorização para simplificar.
Preserve o DOM, IDs, classes, data-attributes, ordem dos scripts, listeners,
animações, modais, filtros, carrosséis, pagamento e responsividade. Faça a menor
mudança necessária. Não remova blocos por parecerem redundantes sem provar que
não são usados por CSS/JS.

1. ORDEM DE TRABALHO PARA UMA NOVA CLIENTE
1. Leia este manual inteiro; depois percorra o HTML, todos os estilos e scripts.
2. Monte um inventário dos dados recebidos. Registre como NÃO INFORMADO tudo que
   não foi fornecido: nome, profissão, WhatsApp, chave Pix, redes, localização,
   horários, experiência, formação, serviços, preços, duração, imagens e meios
   de pagamento. Nunca preencha lacunas por suposição.
3. Faça cópia da versão-base e incremente a versão no nome do arquivo. Nunca
   sobrescreva a versão anterior. Nome: GPT-NOME-vN-Descricao-curta.html.
4. Atualize primeiro os dados centrais descritos na seção 2; depois sincronize
   os textos e atributos estáticos do HTML conforme a seção 3.
5. Preserve a estrutura e os comportamentos. Não troque componentes complexos
   por links, cards ou formulários genéricos.
6. Faça buscas globais por nome, telefone, domínio, URLs, chave Pix e identidade
   visual da cliente anterior. Revise também title, description, OG, alt, aria,
   placeholders, mensagens, toasts, conteúdo dinâmico e comentários.
7. Valide com o checklist da seção 9 antes de entregar o arquivo completo.

2. MAPA REAL DOS DADOS — ONDE EDITAR
IMPORTANTE: SITE_CONFIG centraliza parte dos dados, não todo o conteúdo. Não
presuma que alterar SITE_CONFIG troca automaticamente todos os textos/imagens.

A) SITE_CONFIG — script principal (buscar `var SITE_CONFIG =`):
- brand.name: nome público.
- brand.whatsapp: número internacional, somente dígitos (DDI+DDD+número).
- brand.instagram / facebook / location: somente URLs fornecidas e confirmadas.
- brand.pixKey: chave efetiva copiada pelo botão Pix.
- brand.pixDisplay: forma legível exibida ao visitante.
- brand.experienceYears / description: experiência e descrição confirmadas.
- IMG.logo, banner, fundo01–fundo04, profissional e cat*: imagens centrais
  usadas em partes do site. A lista não contém necessariamente todas as imagens.
- categories: categorias do catálogo. IDs usados como chaves internas; name,
  kicker, icon, img, countLabel, chip e title formam a apresentação.

B) `var procedures = { ... }` — catálogo de serviços, logo após SITE_CONFIG:
- A chave de cada objeto (ex.: relaxante, tay, quick) é um identificador interno.
- cat precisa corresponder ao id de uma categoria existente.
- title, badge, category, img, short, overview, benefits e conducted alimentam
  cards, filtros, detalhes e conteúdo do modal.
- duration, price, packagePrice e pricing controlam duração e preço, quando
  existentes. Não inventar valores ou duração. Sem preço confirmado, usar
  ausência de preço / modalidade Sob consulta.
- Para incluir/remover serviço: editar procedures e revisar categorias, opções
  do formulário e textos estáticos relacionados. O script gera os cards e
  opções a partir de procedures; não duplicar manualmente esses elementos.

C) IMAGENS: há URLs em SITE_CONFIG.IMG, em `procedures[*].img`, no HTML estático
   (logo em header/formulário/footer, retrato, banner) e em regras CSS de fundos.
   Portanto, buscar `i.ibb.co`, `url(` e `src=` no arquivo inteiro. Não fazer
   substituição global cega: a mesma imagem pode ter usos com enquadramentos
   diferentes. Verifique desktop/mobile e object-fit/object-position.

D) CONTATOS E REDES: além de SITE_CONFIG.brand, existem âncoras estáticas no
   cabeçalho, bloco de reserva, rodapé e botões flutuantes. Atualize os hrefs e
   textos visíveis juntos. Links sociais ou localização ausentes devem ser
   ocultados ou apresentados como indisponíveis, nunca inventados.

3. MAPA DAS ÁREAS DO HTML
- `<head>`: title, description, viewport, favicon, fontes e metadados sociais.
- HEADER / menu mobile: marca, âncoras e abertura/fechamento do menu.
- HERO: nome, promessa, estatísticas e imagem principal. Estatísticas precisam
  ser verdadeiras; substituir números promocionais não confirmados por texto
  qualitativo ou remover os números sem quebrar o layout.
- RIBBON: faixa de diferenciais; conferir cada afirmação com a cliente.
- SOBRE / ESSÊNCIA: biografia, experiência, filosofia e imagem profissional.
- CATÁLOGO: `.cat-deck`, `#services-grid`, `procedures`, `categories`, filtros,
  detalhes e modal de agendamento. IDs e data-attributes são contratos do JS.
- DEPOIMENTOS: conteúdo e identificação de autenticidade. Exemplos fictícios
  devem ser identificados discretamente como ilustrativos; nunca publicar como
  avaliações reais, verificadas ou de clientes reais. Trocar por relatos reais
  apenas com autorização. Não inventar estrelas, datas ou resultados clínicos.
- CONTATO / RESERVA: `#custom-booking-form`, `#booking-name`, `#booking-service`,
  `#booking-notes`, `#booking-name-error`. É o formulário principal: nome e
  serviço obrigatórios; observações opcionais; envio monta mensagem e abre
  WhatsApp. Atualizar o seletor a partir de procedures e manter validação.
- PAGAMENTO: `#formas-pagamento`. Preservar seletor animado Dinheiro/Pix/Cartão,
  glider, cartões, animações, auto-alternância, carrossel mobile, status, cópia
  Pix e feedback. Não simplificar nem declarar condições não confirmadas.
- FAQ: perguntas e respostas devem refletir informações confirmadas.
- FOOTER / FLUTUANTES: revisar contatos, redes, âncoras e links de WhatsApp.
- MODAIS: detalhes e agendamento são componentes distintos; não misturar seus
  campos nem remover IDs utilizados pelos scripts.

4. WHATSAPP E FORMULÁRIOS — COMPORTAMENTO ESPERADO
- Botões gerais fora do catálogo: link direto `https://wa.me/NUMERO?text=...`,
  com texto pré-preenchido, sem formulário intermediário.
- Catálogo: o botão Agendar abre o modal do serviço escolhido; o envio inclui
  serviço, dados que a pessoa informou e preferências do fluxo existente.
- Reserva Exclusiva: manter formulário próprio com nome, serviço e observações;
  no submit, montar texto legível e abrir diretamente o WhatsApp.
- Mensagens devem ser cordiais, naturais, contextualizadas e sem prometer
  disponibilidade, preço ou resultado. Codificar o texto com encodeURIComponent.
- Sempre usar target=_blank e rel=noopener noreferrer em links externos quando
  aplicável. Não deixar href vazio, `#` enganoso ou link para número antigo.

5. PIX E PAGAMENTOS — REGRAS DE SEGURANÇA
- Sincronizar SITE_CONFIG.brand.pixKey, pixDisplay, data-pix-key, data-pix-name,
  número exibido, aria-label, instruções e lógica de cópia.
- data-pix-key contém o valor real que será copiado. Para telefone, somente
  dígitos com DDI+DDD. Não assumir que o WhatsApp é a chave Pix sem confirmação
  explícita da cliente; confirmar separadamente em cada novo projeto.
- QR ilustrativo não é QR de cobrança válido. Não afirmar que é pagável sem
  payload/QR bancário real fornecido e testado.
- Não inventar bandeiras, parcelamento, taxas, aproximação, juros ou condições.
  Se não houver confirmação, usar “consulte as condições”.
- Preservar o botão copiável, feedback, toast e fallback para navegadores sem
  Clipboard API. Testar cópia real em contexto seguro.

6. IDENTIDADE VISUAL E FUNDOS
- Extrair paleta da marca e imagens da nova cliente. Definir tokens semânticos
  para fundo, superfície, texto, texto secundário, primária, primária escura,
  destaque e borda. Revisar hover, focus, active, disabled, sombras, gradientes,
  pseudo-elementos, loader, SVG, menu, cards, modais e botões.
- Remover resíduos da marca anterior em CSS, inline styles, filtros, sombras,
  variáveis RGB e estados interativos. Não alterar apenas `:root` e considerar
  concluído: há overrides de versões anteriores no fim do documento.
- Os fundos desta versão V.B têm papéis específicos: fundo01 = filosofia do
  cuidado; fundo02 = catálogo; fundo03 = avaliações; fundo04 = painel esquerdo
  da Reserva Exclusiva (não aplicar como fundo dos campos); banner = FAQ.
  Ao adaptar nova cliente, substituir as referências semanticamente, sem trocar
  as funções entre seções. Conferir regras CSS posteriores que sobrescrevem as
  iniciais.
- Garantir contraste legível e foco visível. Não usar cor apenas para transmitir
  estado; manter texto/ícone e aria apropriados.

7. ACESSIBILIDADE, RESPONSIVIDADE E MANUTENÇÃO
- Não remover IDs, classes, `data-*`, roles, aria-controls, aria-selected,
  aria-pressed, labels, tabindex ou atributos usados por CSS/JS.
- Botões de ação devem ser `<button type="button">`; formulários devem ter
  labels associados e validação compreensível. Links externos devem ter rótulo.
- Verificar menu, modal, filtros, teclado, Escape, foco, scroll lock, leitores
  de tela, imagens com alt apropriado e estados de erro/sucesso.
- Conferir larguras 320–375px, tablet e desktop; evitar overflow horizontal,
  botões cortados, campos estreitos e imagens distorcidas.
- Respeitar `prefers-reduced-motion` quando possível; não remover animações
  existentes sem necessidade ou pedido explícito.

8. ARQUITETURA E CUIDADOS DE CÓDIGO
- O projeto é um HTML autocontido com CSS e scripts inline. Não há dependências
  JS externas carregadas por `<script src>` nesta revisão; fontes/ícones e imagens
  externas continuam dependentes de internet.
- Existem múltiplos blocos `<style>` e `<script>` e overrides versionados. A
  cascata e a ordem de execução importam. Adicionar correções no local adequado;
  evitar duplicar regras e funções sem necessidade.
- SITE_CONFIG e procedures são dados separados. Algumas imagens, textos, links
  e conteúdo SEO permanecem estáticos. Não documentar como centralizado algo
  que ainda não está centralizado.
- Antes de remover código aparentemente antigo, procurar referências de IDs,
  classes, funções, seletores e eventos em todo o documento.
- Não inserir segredos, tokens privados, credenciais ou dados pessoais sensíveis.

9. CHECKLIST OBRIGATÓRIO ANTES DA ENTREGA
[ ] Versão incrementada; arquivo anterior preservado.
[ ] HTML parseia sem erros graves; IDs únicos.
[ ] Cada bloco JS passa `node --check`; console sem erros em execução.
[ ] SITE_CONFIG e procedures coerentes; categorias cobrem todos os serviços.
[ ] Nenhum nome, telefone, chave Pix, URL ou logo da cliente anterior sobrou.
[ ] Todos os botões WhatsApp abrem o número correto e mensagem adequada.
[ ] Formulário principal valida nome/serviço e abre WhatsApp com os dados.
[ ] Fluxo do catálogo continua selecionando o serviço correto.
[ ] Pix copia exatamente a chave; QR não é apresentado como cobrança se decorativo.
[ ] Pagamentos, animações, carrossel e feedback continuam funcionando.
[ ] Links sociais/localização só aparecem quando confirmados.
[ ] Depoimentos fictícios estão identificados; alegações não comprovadas removidas.
[ ] Imagens carregam; logo, retrato e fundos aparecem nos locais corretos.
[ ] Responsividade, contraste, teclado e foco verificados.
[ ] Arquivo final é HTML único, completo e abre localmente.

10. ENTREGA
Entregar sempre o HTML completo e pronto para uso. Prefixar o nome com GPT,
incluir versão e descrição curta. Nunca sobrescrever versões anteriores. No
resumo, informar mudanças e testes que realmente foram executados; não afirmar
que testou visualmente, em dispositivos reais ou em WhatsApp se isso não ocorreu.
===============================================================================
-->


<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Vladia Brito | Massoterapia &amp; Bem-Estar</title>
<meta name="description" content="V.B Massoterapia — Vladia Brito. Massoterapia há 17 anos, com massagens e terapias corporais para saúde e bem-estar." />
<meta name="theme-color" content="#514237" />
<meta property="og:title" content="Vladia Brito | Massoterapia &amp; Bem-Estar" />
<meta property="og:description" content="Massoterapia há 17 anos com foco em saúde, bem-estar e cuidado individualizado." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.instagram.com/vladiabrittomassoterapia/" />
<meta property="og:image" content="imagens/logomarca2.png" />
<meta property="og:image:secure_url" content="imagens/logomarca2.png" />
<meta property="og:image:type" content="image/webp" />
<meta property="og:image:alt" content="Logomarca oficial Vladia Brito — Massoterapia e Bem-Estar" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Vladia Brito | Massoterapia &amp; Bem-Estar" />
<meta name="twitter:description" content="Massoterapia há 17 anos com foco em saúde, bem-estar e cuidado individualizado." />
<meta name="twitter:image" content="imagens/logomarca2.png" />
<link rel="icon" href="imagens/logomarca2.png" type="image/webp" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300..600,0..1,0&display=swap" rel="stylesheet" />
<link rel="preload" as="image" href="imagens/banner2.webp" />
<link rel="preload" as="image" href="imagens/logomarca2.png" fetchpriority="high" />
<script>document.documentElement.classList.add('js');</script>
<style>
/* =========================================================
   DESIGN SYSTEM — Vladia Brito
   ========================================================= */
/* =====================================================================
   TOKENS DE DESIGN — ÁREA DE ADAPTAÇÃO PARA NOVO CLIENTE
   Para trocar a identidade visual, altere principalmente:
   --violet (cor principal), --violet-deep (principal escura), --lilac (secundária),
   --gold (destaque), --ivory (fundo claro), --plum-900 (fundo escuro),
   --font-display (títulos) e --font-body (textos).
   O bloco de pagamento usa os mesmos tons em formato "R G B" (procure :root{--caramelo).
   ===================================================================== */
:root{
  --plum-950:#160919;
  --plum-900:#22102c;
  --plum-800:#341846;
  --plum-700:#806052;
  --violet:#927B68;           /* cor da marca */
  --violet-600:#927B68;
  --violet-deep:#806052;
  --lilac:#D6BDA5;
  --lilac-soft:#E8D5C8;
  --lavender-50:#FFFCF8;
  --lavender-100:#F3EAE0;
  --lavender-200:#E8D5C8;
  --ivory:#fbf8f4;
  --ivory-2:#f4eee7;
  --ink:#24172b;
  --ink-2:#3d3043;
  --muted:#6f6175;
  --line:rgba(146,123,104,.14);
  --line-strong:rgba(146,123,104,.28);
  --gold:#C6A783;
  --gold-soft:#E8D5C8;
  --cream:#f8f1e9;
  --nude:#ead8ca;
  --nude-deep:#d9bfae;
  --rose-gold:#c4907d;
  --rose-gold-soft:#e7c4b6;
  --white:#ffffff;

  --grad-brand:linear-gradient(135deg,#927B68 0%,#927B68 45%,#655347 100%);
  --grad-dark:linear-gradient(160deg,#514237 0%,#41352C 60%,#332720 100%);
  --grad-gold:linear-gradient(135deg,#e9d4ab 0%,#C6A783 50%,#a9824b 100%);

  --shadow-sm:0 2px 10px rgba(81,66,55,.06);
  --shadow-md:0 14px 34px -12px rgba(81,66,55,.22);
  --shadow-lg:0 30px 70px -24px rgba(81,66,55,.38);
  --shadow-glow:0 18px 40px -12px rgba(146,123,104,.55);

  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:'Outfit', system-ui, -apple-system, sans-serif;
  --header-h:84px;
}

/* Identidade visual V.B Massoterapia — Vladia Brito */
:root{
  --plum-950:#332720;--plum-900:#59483D;--plum-800:#6B5548;--plum-700:#80695B;
  --violet:#927B68;--violet-600:#B58E7E;--violet-deep:#806052;
  --lilac:#D6BDA5;--lilac-soft:#E8D5C8;--lavender-50:#FFFCF8;--lavender-100:#F7F0E9;--lavender-200:#E8D5C8;
  --ivory:#FFFCF8;--ivory-2:#F3EAE0;--ink:#49392F;--ink-2:#655348;--muted:#85766B;
  --line:rgba(89,72,61,.14);--line-strong:rgba(89,72,61,.27);--gold:#C6A783;--gold-soft:#E8D5C8;--cream:#F3EAE0;--nude:#E8D5C8;--nude-deep:#D6BDA5;--rose-gold:#B98E7E;--rose-gold-soft:#E5C9BC;--white:#fff;
  --grad-brand:linear-gradient(135deg,#C6A783 0%,#927B68 48%,#806052 100%);--grad-dark:linear-gradient(160deg,#59483D 0%,#403229 65%,#332720 100%);--grad-gold:linear-gradient(135deg,#E8D5C8 0%,#C6A783 55%,#927B68 100%);
  --shadow-sm:0 2px 10px rgba(89,72,61,.06);--shadow-md:0 14px 34px -12px rgba(89,72,61,.18);--shadow-lg:0 30px 70px -24px rgba(89,72,61,.28);--shadow-glow:0 18px 40px -12px rgba(167,127,112,.35);
}
.testimonials{background:linear-gradient(160deg,rgba(89,72,61,.88),rgba(64,50,41,.92)),url('imagens/banner2.webp') center/cover no-repeat}
.essence-bg{background-image:url('imagens/banner2.webp')}
.catalog-bg{background-image:url('imagens/banner2.webp')}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--ink);background:var(--ivory);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
::selection{background:var(--lilac-soft);color:var(--plum-900)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:8px}

.container{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}
.ms{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;user-select:none}
.ms.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* ---------- Tipografia ---------- */
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:1.12;margin:0;color:var(--ink)}
[class*="display"],.stat b,.price b,.pix-box strong,.mf-meta b,.bm-selected b,.cc-name,.cc-index,.stage-count strong,.sc-body h3,.pay-card h4,.name-card strong,.brand-name strong,.t-card blockquote,.quote{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.display em{font-style:italic;font-weight:500;color:var(--violet)}
.h1{font-size:clamp(44px,6vw,78px)}
.h2{font-size:clamp(36px,4.4vw,56px)}
.h3{font-size:clamp(28px,3vw,38px)}
.lead{font-size:clamp(16px,1.3vw,18px);color:var(--ink-2);line-height:1.75;margin:0}
.text{font-size:15.5px;color:var(--muted);line-height:1.8;margin:0}

.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 12px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--line-strong);color:var(--violet);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.eyebrow .ms{font-size:16px}
.eyebrow.on-dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:var(--gold-soft)}

.section-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;max-width:760px;margin:0 auto 56px}
.section-head .lead{max-width:600px}
.ornament{display:flex;align-items:center;gap:14px;color:var(--gold)}
.ornament::before,.ornament::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.ornament::after{transform:scaleX(-1)}
.ornament .ms{font-size:18px}

/* ---------- Botões ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;border-radius:999px;font-size:14.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s,border-color .3s;overflow:hidden;isolation:isolate}
.btn .ms{font-size:20px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad-brand);color:var(--white);box-shadow:var(--shadow-glow)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -12px rgba(146,123,104,.7)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-glass{background:rgba(255,255,255,.7);border:1px solid var(--line-strong);color:var(--ink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-glass:hover{background:var(--white);border-color:var(--violet);transform:translateY(-2px)}
.btn-outline{background:var(--lavender-50);border:1px solid var(--line-strong);color:var(--violet)}
.btn-outline:hover{background:var(--lavender-200);border-color:var(--violet)}
.btn-light{background:var(--white);color:var(--plum-900)}
.btn-light:hover{background:var(--gold-soft);transform:translateY(-2px)}
.btn-sm{height:44px;padding:0 20px;font-size:13px}
.btn-block{width:100%}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .cat-stage.reveal,.js .services-grid .service-card{opacity:1;transform:none}
html.is-loading .hero .reveal.is-visible{opacity:0;transform:translateY(28px)}
.js .reveal[data-delay="1"]{transition-delay:.1s}
.js .reveal[data-delay="2"]{transition-delay:.2s}
.js .reveal[data-delay="3"]{transition-delay:.3s}
.js .reveal[data-delay="4"]{transition-delay:.4s}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--header-h);display:flex;align-items:center;transition:height .4s var(--ease),background .4s,box-shadow .4s,border-color .4s;border-bottom:1px solid transparent}
.site-header.is-scrolled{height:72px;background:rgba(251,248,244,.86);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-color:var(--line);box-shadow:0 8px 30px -18px rgba(81,66,55,.35)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:1400px;margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:46px;width:auto;transition:transform .4s var(--ease)}
.brand:hover img{transform:rotate(-4deg) scale(1.05)}
.brand-name{display:flex;flex-direction:column;line-height:1.1}
.brand-name strong{font-family:var(--font-display);font-size:23px;font-weight:600;color:var(--ink);letter-spacing:.005em}
.brand-name span{font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--violet);margin-top:3px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{position:relative;padding:10px 14px;font-size:14px;font-weight:500;color:var(--ink-2);border-radius:999px;transition:color .3s}
.nav a::after{content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;border-radius:2px;background:var(--grad-gold);transform:translateX(-50%);transition:width .4s var(--ease)}
.nav a:hover,.nav a.is-active{color:var(--violet)}
.nav a:hover::after,.nav a.is-active::after{width:22px}
.header-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.75);border:1px solid var(--line);color:var(--violet);transition:all .3s var(--ease)}
.icon-btn:hover{background:var(--violet);color:var(--white);border-color:var(--violet);transform:translateY(-2px)}
.icon-btn svg{width:17px;height:17px;fill:currentColor}
.icon-btn .ms{font-size:20px}
.menu-toggle{display:none}

.mobile-menu{position:fixed;inset:0;z-index:70;background:rgba(22,9,25,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.mobile-menu.is-open{opacity:1;visibility:visible}
.mobile-panel{position:absolute;top:0;right:0;height:100%;width:min(360px,88vw);background:var(--ivory);padding:24px 26px 32px;display:flex;flex-direction:column;gap:8px;transform:translateX(100%);transition:transform .5s var(--ease);box-shadow:var(--shadow-lg)}
.mobile-menu.is-open .mobile-panel{transform:none}
.mobile-panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.mobile-panel-top img{height:44px}
.mobile-panel nav a{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.mobile-panel nav a .ms{color:var(--violet);font-size:18px}
.mobile-panel .btn{margin-top:auto}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:min(100vh,900px);display:flex;align-items:center;padding:calc(var(--header-h) + 40px) 0 90px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.14) translateX(-1.5%)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,248,244,.98) 0%,rgba(251,248,244,.92) 38%,rgba(251,248,244,.47) 66%,rgba(251,248,244,.16) 100%),linear-gradient(0deg,var(--ivory) 0%,rgba(251,248,244,0) 28%)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:26px;max-width:640px}
.hero-copy .eyebrow{align-self:flex-start}
.hero-grid > *,.about-grid > *,.essence-grid > *,.booking-shell > *,.faq-wrap > *,.footer-grid > *,.services-grid > *,.pay-grid > *,.t-grid > *{min-width:0}
.hero-copy .lead strong{color:var(--violet);font-weight:600}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;padding-top:4px}
.hero-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin-top:10px;padding-top:26px;border-top:1px solid var(--line-strong)}
.stat{padding:0 34px 0 0;margin-right:34px;border-right:1px solid var(--line)}
.stat:last-child{border:0;margin:0;padding:0}
.stat b{display:block;font-family:var(--font-display);font-size:40px;font-weight:600;line-height:1;color:var(--violet)}
.stat b small{font-size:24px;color:var(--gold)}
.stat span{display:block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}
.halo{position:absolute;border-radius:50%;border:1px solid rgba(146,123,104,.18)}
.halo.h1{width:520px;height:520px;animation:spin 40s linear infinite;border-style:dashed}
.halo.h2{width:420px;height:420px;border-color:rgba(201,164,108,.35)}
.halo.h3{width:620px;height:620px;border-color:rgba(146,123,104,.08)}
.hero-logo{position:relative;z-index:1;width:min(500px,86vw);display:flex;align-items:center;justify-content:center}
.hero-logo::before{content:"";position:absolute;inset:4% 8%;border-radius:50%;background:radial-gradient(circle,rgba(216,199,181,.46),rgba(243,234,224,.32) 45%,rgba(216,199,181,0) 72%);filter:blur(16px);z-index:-1;animation:glow-breathe 5.5s ease-in-out infinite}
.hero-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 34px rgba(81,66,55,.3));animation:logo-hero-in 1.7s var(--ease) .15s both}
.logo-tilt{position:relative;display:block;width:100%;transition:transform .7s var(--ease);will-change:transform}
.logo-float{position:relative;display:block;width:100%;animation:float 7s ease-in-out infinite}
.logo-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 62%) no-repeat;background-size:280% 100%;background-position:160% 0;-webkit-mask:url('imagens/logomarca2.png') center/100% 100% no-repeat;mask:url('imagens/logomarca2.png') center/100% 100% no-repeat;mix-blend-mode:soft-light;opacity:.95;animation:logo-sheen 6.5s ease-in-out 2.2s infinite}
.logo-sparkles{position:absolute;inset:0;pointer-events:none;z-index:2}
.logo-sparkles i{position:absolute;width:12px;height:12px;background:var(--gold);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;transform:scale(0);animation:twinkle 4.2s ease-in-out infinite}
.logo-sparkles i:nth-child(1){top:16%;left:20%;animation-delay:.4s}
.logo-sparkles i:nth-child(2){top:12%;right:24%;width:9px;height:9px;background:var(--lilac);animation-delay:1.3s}
.logo-sparkles i:nth-child(3){top:46%;right:8%;width:14px;height:14px;animation-delay:2.1s}
.logo-sparkles i:nth-child(4){bottom:16%;right:22%;width:8px;height:8px;background:var(--violet-600);animation-delay:2.9s}
.logo-sparkles i:nth-child(5){bottom:20%;left:14%;width:10px;height:10px;background:var(--lilac);animation-delay:3.5s}
.logo-sparkles i:nth-child(6){top:40%;left:6%;width:7px;height:7px;animation-delay:1.8s}
.halo.h1::after,.halo.h2::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 4px rgba(146,123,104,.12),0 0 16px rgba(146,123,104,.55)}
.halo.h2{animation:spin 34s linear infinite reverse}
.halo.h2::after{top:auto;bottom:-4px;width:8px;height:8px;margin-left:-4px;background:var(--gold);box-shadow:0 0 0 4px rgba(201,164,108,.15),0 0 14px rgba(201,164,108,.6)}
html.is-loading .hero-logo img,html.is-loading .logo-sheen{animation-play-state:paused}
@keyframes logo-hero-in{from{opacity:0;transform:scale(.8) translateY(18px) rotate(-4deg);filter:blur(12px) drop-shadow(0 24px 34px rgba(81,66,55,0))}to{opacity:1;transform:none;filter:blur(0) drop-shadow(0 24px 34px rgba(81,66,55,.3))}}
@keyframes logo-sheen{0%{background-position:160% 0}38%,100%{background-position:-60% 0}}
@keyframes glow-breathe{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.07);opacity:1}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(0) rotate(0)}18%{opacity:1;transform:scale(1) rotate(45deg)}36%{opacity:0;transform:scale(.2) rotate(90deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1deg)}}
.float-card{position:absolute;display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:20px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow-md);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:float 8s ease-in-out infinite}
.float-card .badge-ic{width:42px;height:42px;border-radius:14px;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center}
.float-card b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.2}
.float-card small{display:block;font-size:12px;color:var(--muted)}
.float-card .stars{color:var(--gold);display:flex;gap:1px}
.float-card .stars .ms{font-size:15px}
.float-card{z-index:2}
.fc-1{top:2%;left:-4%;animation-delay:-2s}
.fc-2{bottom:2%;right:-4%}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.scroll-cue i{width:1px;height:42px;background:linear-gradient(var(--violet),transparent);animation:cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* =========================================================
   MARQUEE
   ========================================================= */
.ribbon{background:var(--grad-dark);color:var(--ivory);padding:20px 0;overflow:hidden;position:relative}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.ribbon::before{left:0;background:linear-gradient(90deg,#22102c,transparent)}
.ribbon::after{right:0;background:linear-gradient(-90deg,#41352C,transparent)}
.marquee{display:flex;width:max-content;animation:marquee 42s linear infinite}
.ribbon:hover .marquee{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:40px;padding-right:40px}
.marquee-item{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:400;letter-spacing:.04em;white-space:nowrap}
.marquee-item .ms{color:var(--lilac);font-size:22px}
.marquee-sep{color:var(--gold);font-size:12px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =========================================================
   SOBRE
   ========================================================= */
.section{padding:120px 0;position:relative}
.about{background:var(--ivory);overflow:hidden}
.about::before{content:"";position:absolute;width:640px;height:640px;left:-220px;top:80px;border-radius:50%;background:radial-gradient(circle,rgba(216,199,181,.22),transparent 65%)}
.about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:80px;align-items:center;position:relative}
.portrait-wrap{position:relative;display:flex;justify-content:center;padding-bottom:40px}
/* Cartão 3D (foto <-> logomarca). Só .flip-inner gira; moldura, selo e halo ficam parados. */
.portrait-stage{position:relative;width:min(430px,100%);aspect-ratio:4/5}
.portrait-ring{position:absolute;inset:-14px;border-radius:999px 999px 46px 46px;border:1px solid rgba(146,123,104,.35);pointer-events:none}
.portrait-ring::after{content:"";position:absolute;inset:-9px;border-radius:999px 999px 54px 54px;border:1px dashed rgba(146,123,104,.35)}
.flip{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;border-radius:999px 999px 36px 36px;perspective:1600px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
.flip:focus{outline:none}
.flip:focus-visible{outline:2px solid var(--rose-gold);outline-offset:8px}
.flip-inner{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform 850ms cubic-bezier(.45,.05,.2,1);will-change:transform}
.flip[aria-pressed="true"] .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;border-radius:999px 999px 36px 36px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 60px -26px rgba(146,123,104,.55),0 0 0 1px rgba(146,123,104,.3);isolation:isolate}
.flip-face::before{content:"";position:absolute;inset:14px;border-radius:999px 999px 24px 24px;border:1px solid rgba(255,255,255,.75);z-index:2;pointer-events:none}
.flip-front{background:radial-gradient(120% 80% at 50% 20%,#FFFCF8 0%,#E8DCCE 38%,#B99A82 72%,#927B68 100%)}
.flip-front::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(0deg,rgba(81,66,55,.45),transparent);z-index:1}
.flip-front img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:96%;width:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(73,61,51,.25))}
.flip-back{transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 42%,#ffffff 0%,#F3EAE0 40%,#D8C7B5 100%)}
.flip-back::after{content:"";position:absolute;inset:30px;border-radius:999px 999px 18px 18px;border:1px solid rgba(146,123,104,.35);pointer-events:none}
.flip-back img{position:relative;z-index:1;width:68%;height:auto;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(81,66,55,.22))}
.flip-hint{position:absolute;top:22px;left:-6px;z-index:3;display:flex;align-items:center;gap:6px;padding:7px 12px 7px 9px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid var(--rose-gold-soft);box-shadow:var(--shadow-sm);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-gold);pointer-events:none}
.flip-hint .ms{font-size:17px}
.flip-hint .t-touch{display:none}
@media (hover:none){.flip-hint .t-desk{display:none}.flip-hint .t-touch{display:inline}}
@media (prefers-reduced-motion:reduce){
  .flip-inner,.flip[aria-pressed="true"] .flip-inner{transform:none!important}
  .flip-back{transform:none}
  .flip-face{transition:opacity .35s ease!important}
  .flip-back{opacity:0}
  .flip[aria-pressed="true"] .flip-front{opacity:0}
  .flip[aria-pressed="true"] .flip-back{opacity:1}
}
.portrait-deco{position:absolute;top:30px;right:calc(50% - 250px);width:110px;height:110px;border-radius:50%;border:1px dashed var(--gold);animation:spin 40s linear infinite}
.name-card{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(380px,92%);display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:22px;background:rgba(255,255,255,.95);box-shadow:var(--shadow-md);border:1px solid var(--line);z-index:2}
.name-card img{width:44px;height:44px;object-fit:contain}
.name-card strong{display:block;font-family:var(--font-display);font-size:22px;line-height:1.1;font-weight:600}
.name-card span{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);font-weight:600;margin-top:3px}
.name-card .ms{margin-left:auto;color:var(--gold);font-size:28px}
.about-copy{display:flex;flex-direction:column;gap:24px}
.quote{position:relative;margin:0;padding:6px 0 6px 26px;border-left:2px solid var(--gold);font-family:var(--font-display);font-style:italic;font-size:clamp(21px,2vw,25px);line-height:1.45;color:var(--violet-deep)}
.features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.feature{display:flex;gap:14px;padding:18px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.feature .ic{flex-shrink:0;width:44px;height:44px;border-radius:14px;background:var(--lavender-100);color:var(--violet);display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s}
.feature:hover .ic{background:var(--violet);color:#fff}
.feature h4{margin:0 0 2px;font-size:15px;font-weight:600;color:var(--ink)}
.feature p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* =========================================================
   ESSÊNCIA
   ========================================================= */
.essence{color:var(--ivory);overflow:hidden;isolation:isolate}
.essence-bg{position:absolute;inset:0;z-index:-1;background:url('imagens/003.webp') center/cover no-repeat}
.essence-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(52,22,68,.62) 0%,rgba(70,32,92,.55) 50%,rgba(81,66,55,.72) 100%)}
.essence-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mosaic-col{display:flex;flex-direction:column;gap:18px}
.mosaic-col:last-child{padding-top:64px}
.tile{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.08)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,9,25,.45),transparent 50%);pointer-events:none}
.tile.sq{aspect-ratio:1}
.tile.tall{aspect-ratio:3/4}
.essence-copy{position:relative;display:flex;flex-direction:column;gap:26px}
.essence-copy::before{content:"";position:absolute;inset:-36px -40px;z-index:-1;border-radius:48px;background:radial-gradient(ellipse at 50% 50%,rgba(56,45,36,.34) 0%,rgba(56,45,36,.2) 60%,rgba(56,45,36,0) 100%);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-mask:radial-gradient(ellipse 72% 68% at 50% 50%,#000 58%,transparent 100%);mask:radial-gradient(ellipse 72% 68% at 50% 50%,#000 58%,transparent 100%);pointer-events:none}
.essence-copy .display,.essence-copy .text{text-shadow:0 1px 16px rgba(26,9,34,.45)}
.essence-copy .display{color:var(--ivory)}
.essence-copy .display em{color:var(--lilac)}
.essence-copy .text{color:rgba(251,248,244,.94);font-size:16px}
.pillars{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.pillar{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:18px;background:rgba(81,66,55,.22);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--ivory);transition:background .3s,border-color .3s,transform .4s var(--ease)}
.pillar:hover{background:rgba(255,255,255,.08);border-color:rgba(201,164,108,.4);transform:translateX(6px)}
.pillar .ic{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:rgba(201,164,108,.12);border:1px solid rgba(201,164,108,.35);color:var(--gold-soft);display:flex;align-items:center;justify-content:center}
.pillar span{font-size:15px;font-weight:500}

/* =========================================================
   CATÁLOGO — fundo aplicado em toda a seção
   ========================================================= */
.catalog{isolation:isolate;overflow:hidden}
.catalog-bg{position:absolute;inset:0;z-index:-1;background:url('imagens/004.webp') center/cover no-repeat}
.catalog-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,248,244,.86) 0%,rgba(250,246,252,.62) 30%,rgba(243,235,248,.5) 70%,rgba(232,218,242,.66) 100%)}
.catalog .section-head{margin-bottom:44px}

/* ---------- V6 · Menu de categorias futurista + palco integrado ---------- */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes angSpin{to{--ang:360deg}}
@keyframes beamPulse{0%{top:-20%;opacity:0}20%{opacity:1}100%{top:100%;opacity:0}}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(234,217,184,.75)}100%{box-shadow:0 0 0 9px rgba(234,217,184,0)}}
@keyframes scanDown{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
@keyframes ringSpin{to{transform:rotate(360deg)}}

.cat-shell{position:relative;--bx:0px;--bw:0px}
.cat-deck{position:relative;display:flex;gap:16px;height:340px}
.cat-card{position:relative;flex:1 1 0;min-width:0;height:100%;border-radius:28px;overflow:hidden;isolation:isolate;text-align:left;color:#fff;background:var(--plum-700);box-shadow:0 18px 40px -22px rgba(81,66,55,.55);transition:flex-grow .8s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.cat-card.is-active{flex-grow:1.9;box-shadow:0 30px 60px -24px rgba(146,123,104,.75),0 0 0 1px rgba(255,255,255,.25)}
.cat-card:not(.is-active):hover{transform:translateY(-6px)}
.cc-media{position:absolute;inset:0;z-index:-2}
.cc-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.88);transform:scale(1.04);transition:transform 1.4s var(--ease),filter .6s var(--ease)}
.cat-card:hover .cc-media img{transform:scale(1.12);filter:saturate(1) brightness(.95)}
.cat-card.is-active .cc-media img{filter:saturate(1.05) brightness(1);transform:scale(1.06)}
.cc-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(36,13,48,.35) 0%,rgba(36,13,48,0) 30%,rgba(36,13,48,.35) 55%,rgba(30,10,40,.92) 100%);transition:background .6s}
.cat-card.is-active .cc-shade{background:linear-gradient(180deg,rgba(36,13,48,.25) 0%,rgba(36,13,48,0) 30%,rgba(74,29,96,.3) 55%,rgba(58,20,78,.94) 100%)}
.cc-grid{position:absolute;inset:0;z-index:-1;opacity:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;-webkit-mask:linear-gradient(180deg,transparent 0%,#000 60%);mask:linear-gradient(180deg,transparent 0%,#000 60%);transition:opacity .6s}
.cat-card.is-active .cc-grid{opacity:1}
.cc-spot{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(228,205,243,.32),transparent 60%);transition:opacity .4s}
.cat-card:hover .cc-spot{opacity:1}
.cc-ring{position:absolute;inset:0;z-index:3;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;background:conic-gradient(from var(--ang),rgba(234,217,184,.1),#E8D5C8,#D6BDA5,rgba(255,255,255,.95),#D6BDA5,rgba(234,217,184,.1) 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:angSpin 5s linear infinite;transition:opacity .5s}
.cat-card.is-active .cc-ring{opacity:1}
.cat-card:not(.is-active) .cc-ring{animation-play-state:paused}
.cc-hud{position:absolute;inset:14px;z-index:2;pointer-events:none;opacity:0;transform:scale(1.04);transition:opacity .5s,transform .6s var(--ease);--c:rgba(255,255,255,.85);background:
  linear-gradient(var(--c),var(--c)) top left/18px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top left/1.5px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) top right/18px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top right/1.5px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) bottom left/18px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1.5px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) bottom right/18px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1.5px 18px no-repeat}
.cat-card.is-active .cc-hud{opacity:1;transform:none}
.cc-top{position:absolute;top:24px;left:26px;right:24px;z-index:2;display:flex;align-items:flex-start;justify-content:space-between}
.cc-index{font-family:var(--font-display);font-size:34px;font-weight:500;line-height:1;letter-spacing:.02em;color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(20,8,26,.5)}
.cc-index small{font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.14em;color:rgba(255,255,255,.6);margin-left:4px;vertical-align:top}
.cc-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .5s,transform .6s var(--ease),border-color .5s}
.cc-icon .ms{font-size:22px;color:#fff}
.cat-card:hover .cc-icon{transform:rotate(-12deg) scale(1.06)}
.cat-card.is-active .cc-icon{background:var(--grad-gold);border-color:rgba(255,255,255,.7)}
.cat-card.is-active .cc-icon .ms{color:var(--plum-900,#514237)}
.cc-body{position:absolute;left:26px;right:24px;bottom:24px;z-index:2;display:flex;flex-direction:column;gap:4px}
.cc-kicker{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-name{font-family:var(--font-display);font-size:27px;transition:font-size .6s var(--ease);font-weight:600;line-height:1.05;color:#fff;text-shadow:0 2px 18px rgba(20,8,26,.45)}
.cc-count{font-size:12.5px;color:rgba(255,255,255,.82)}
.cc-count b{font-weight:600;color:#fff}
.cat-card.is-active .cc-name{font-size:33px}
.cc-cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;height:0;opacity:0;overflow:hidden;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;transition:height .5s var(--ease),opacity .4s,margin .5s var(--ease)}
.cc-cta .ms{font-size:16px}
.cc-cta .live{display:none;width:8px;height:8px;border-radius:50%;background:var(--gold-soft);animation:livePulse 1.6s ease-out infinite}
.cat-card:hover .cc-cta,.cat-card.is-active .cc-cta{height:30px;opacity:1}
.cat-card.is-active .cc-cta{padding:0 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-self:flex-start}
.cat-card.is-active .cc-cta .live{display:inline-block}
.cat-card.is-active .cc-cta .t-go,.cat-card:not(.is-active) .cc-cta .t-on{display:none}
.cat-card:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:28px}

/* ponte de luz: liga a categoria ativa ao palco */
.cat-link{position:relative;height:46px;pointer-events:none}
.cat-bridge{position:absolute;top:0;bottom:-1px;left:var(--lx,0px);width:var(--lw,0px);clip-path:polygon(var(--li,34px) 0,calc(100% - var(--ri,34px)) 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(146,123,104,.42) 0%,rgba(216,199,181,.28) 55%,rgba(255,255,255,.55) 100%)}
.cat-bridge::before{content:"";position:absolute;left:var(--mid,50%);top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(180deg,rgba(234,217,184,.9),rgba(146,123,104,.8));box-shadow:0 0 12px rgba(216,199,181,.9)}
.cat-bridge::after{content:"";position:absolute;left:var(--mid,50%);width:8px;height:16px;margin-left:-4px;border-radius:8px;background:#fff;box-shadow:0 0 14px 3px rgba(216,199,181,.95);animation:beamPulse 1.8s var(--ease) infinite}
.cat-node{position:absolute;bottom:-6px;left:calc(var(--bx) + var(--bw) / 2 - 6px);width:12px;height:12px;border-radius:50%;background:var(--violet);border:2px solid #fff;box-shadow:0 0 0 4px rgba(216,199,181,.35),0 0 18px rgba(146,123,104,.6);z-index:4}

/* palco: os serviços vivem dentro da categoria */
.cat-stage{position:relative;padding:34px 32px 36px;border-radius:34px;background:rgba(255,255,255,.55);box-shadow:0 40px 90px -40px rgba(81,66,55,.45);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}
.cat-stage::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--ang),rgba(146,123,104,.18),rgba(216,199,181,.85),rgba(201,164,108,.6),rgba(146,123,104,.18) 45%,rgba(216,199,181,.7) 75%,rgba(146,123,104,.18));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:angSpin 10s linear infinite}
.cat-stage::after{content:"";position:absolute;top:-1px;height:3px;left:var(--bx);width:var(--bw);border-radius:3px;background:linear-gradient(90deg,transparent,#D6BDA5 20%,#E8D5C8 50%,#D6BDA5 80%,transparent);box-shadow:0 0 18px 2px rgba(216,199,181,.8);pointer-events:none}
.stage-scan{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:5}
.stage-scan::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(180deg,transparent 0%,rgba(216,199,181,0) 70%,rgba(216,199,181,.22) 96%,rgba(255,255,255,.7) 100%);transform:translateY(-100%);opacity:0}
.cat-stage.is-scanning .stage-scan::before{opacity:1;animation:scanDown 1.1s var(--ease) both}

.stage-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;padding-bottom:26px;margin-bottom:30px;position:relative;transition:opacity .25s,transform .35s var(--ease)}
.stage-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(146,123,104,.05),rgba(146,123,104,.35) 30%,rgba(201,164,108,.5) 50%,rgba(146,123,104,.35) 70%,rgba(146,123,104,.05))}
.stage-head.is-switching{opacity:0;transform:translateY(10px)}
.stage-thumb{position:relative;width:78px;height:78px;flex-shrink:0}
.stage-thumb img{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 12px 26px -10px rgba(146,123,104,.6)}
.stage-thumb::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px dashed rgba(146,123,104,.4);animation:ringSpin 14s linear infinite}
.stage-thumb .ms{position:absolute;right:-6px;bottom:-4px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--grad-brand);color:#fff;font-size:16px;box-shadow:0 0 0 3px #fff}
.stage-kicker{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--violet)}
.stage-kicker i{font-style:normal;color:var(--gold)}
.stage-head h3{margin:4px 0 0;font-family:var(--font-display);font-size:36px;font-weight:600;line-height:1.05;color:var(--ink)}
.stage-head h3 em{color:var(--violet);font-weight:500}
.stage-meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.stage-count{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted)}
.stage-count strong{font-family:var(--font-display);font-size:44px;font-weight:600;line-height:.9;color:var(--violet-deep)}
.stage-count b{font-weight:600;color:var(--violet)}
.stage-steps{display:flex;gap:5px}
.stage-steps span{width:22px;height:4px;border-radius:4px;background:rgba(146,123,104,.16);transition:background .5s,width .5s var(--ease)}
.stage-steps span.on{width:40px;background:var(--grad-brand)}
.stage-hint{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.stage-hint .ms{font-size:16px;color:var(--gold)}
.cat-stage .services-grid{gap:22px}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid .service-card.is-visible{opacity:1}
.service-card{position:relative;display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(146,123,104,.1);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s,opacity .35s}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.service-card.is-hiding{opacity:0;transform:scale(.96)}
.service-card.is-hidden{display:none}
.service-card.is-entering{animation:cardIn .6s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.sc-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--lavender-100)}
.sc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.service-card:hover .sc-media img{transform:scale(1.08)}
.sc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,9,25,.55) 0%,rgba(22,9,25,0) 45%)}
.sc-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.sc-chip .ms{font-size:14px}
.sc-cat{top:14px;left:14px;background:rgba(255,255,255,.92);color:var(--violet);backdrop-filter:blur(8px)}
.sc-time{bottom:14px;left:14px;background:rgba(22,9,25,.5);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:.06em}
.sc-view{position:absolute;z-index:2;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--violet);display:flex;align-items:center;justify-content:center;transform:translateY(10px) scale(.8);opacity:0;transition:all .45s var(--ease)}
.service-card:hover .sc-view{opacity:1;transform:none}
.sc-body{display:flex;flex-direction:column;gap:16px;flex:1;padding:24px 24px 22px}
.sc-body h3{margin:0;font-family:var(--font-display);font-size:27px;font-weight:600;line-height:1.1;color:var(--ink);transition:color .3s}
.service-card:hover .sc-body h3{color:var(--violet)}
.sc-body p{margin:0;font-size:14px;line-height:1.65;color:var(--muted);flex:1}
.prices{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.price{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--lavender-50)}
.price + .price{border-left:1px solid var(--line);background:linear-gradient(135deg,#f6eefb,#efe3f7)}
.price small{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.price + .price small{color:var(--violet)}
.price b{font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.1;color:var(--violet-deep)}
.price b i{font-family:var(--font-body);font-style:normal;font-size:11px;font-weight:500;color:var(--muted)}
.sc-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc-actions .btn{height:46px;padding:0 14px;font-size:13px}
.sc-actions .btn .ms{font-size:18px}

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.testimonials{background:linear-gradient(160deg,rgba(89,72,61,.72),rgba(64,50,41,.8)),url('imagens/banner2.webp') center/cover no-repeat;color:var(--ivory);overflow:hidden;isolation:isolate}
.testimonials::before{content:"";position:absolute;z-index:-1;width:900px;height:900px;right:-300px;top:-400px;border-radius:50%;background:radial-gradient(circle,rgba(185,154,112,.45),transparent 60%)}
.testimonials::after{content:"";position:absolute;z-index:-1;width:700px;height:700px;left:-260px;bottom:-380px;border-radius:50%;background:radial-gradient(circle,rgba(201,164,108,.16),transparent 60%)}
.testimonials .display{color:var(--ivory)}
.testimonials .display em{color:var(--lilac)}
.testimonials .lead{color:rgba(251,248,244,.93)}
.testimonials .section-head{position:relative}
.testimonials .section-head::before{content:"";position:absolute;inset:-30px -60px;z-index:-1;background:radial-gradient(ellipse at 50% 50%,rgba(56,45,36,.32),rgba(56,45,36,0) 72%);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-mask:radial-gradient(ellipse 70% 66% at 50% 50%,#000 55%,transparent 100%);mask:radial-gradient(ellipse 70% 66% at 50% 50%,#000 55%,transparent 100%);pointer-events:none}
.testimonials .display,.testimonials .lead{text-shadow:0 1px 16px rgba(26,9,34,.45)}
.rating-pill{display:inline-flex;align-items:center;gap:12px;padding:10px 20px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);font-size:13px;color:#fff;background:rgba(81,66,55,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.rating-pill .stars{display:flex;color:var(--gold)}
.rating-pill .stars .ms{font-size:17px}
.t-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.t-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:30px 26px 26px;border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(81,66,55,.26));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .5s var(--ease),border-color .4s,background .4s}
.t-card:hover{transform:translateY(-6px);border-color:rgba(201,164,108,.45);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(81,66,55,.3))}
.t-quote-mark{position:absolute;top:10px;right:22px;font-family:var(--font-display);font-size:96px;line-height:1;color:rgba(201,164,108,.22)}
.t-stars{display:flex;color:var(--gold)}
.t-stars .ms{font-size:17px}
.t-card blockquote{margin:14px 0 0;font-family:var(--font-display);font-style:italic;font-size:20.5px;line-height:1.5;color:#fff;text-shadow:0 1px 10px rgba(26,9,34,.35)}
.t-author{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.t-author .t-avatar{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--grad-gold);color:var(--plum-900);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px}
.t-author strong{display:block;font-size:15px;font-weight:600}
.t-author span{display:block;font-size:12.5px;color:rgba(251,248,244,.82)}

/* =========================================================
   CONTATO / RESERVA
   ========================================================= */
.contact{background:linear-gradient(180deg,rgba(251,248,244,.94),rgba(251,248,244,.9)),url('imagens/banner2.webp') center/cover no-repeat}
.booking-shell{display:grid;grid-template-columns:5fr 7fr;border-radius:var(--r-xl);overflow:hidden;background:var(--white);box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.booking-aside{position:relative;padding:56px 48px;color:var(--ivory);background:linear-gradient(160deg,#74604F,#514237);display:flex;flex-direction:column;gap:24px;overflow:hidden;isolation:isolate}
.booking-aside::before{content:"";position:absolute;inset:0;z-index:-1;background:url('imagens/003.webp') center/cover;opacity:.35}
.booking-aside .display{color:var(--ivory)}
.booking-aside .display em{color:var(--lilac)}
.booking-aside .text{color:rgba(251,248,244,.93);font-size:16px}
.booking-aside .display,.booking-aside .text{text-shadow:0 1px 16px rgba(26,9,34,.5)}
.contact-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-tile{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:rgba(81,66,55,.3);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .3s,border-color .3s,transform .4s var(--ease)}
a.contact-tile:hover{background:rgba(255,255,255,.12);border-color:rgba(201,164,108,.5);transform:translateY(-3px)}
.contact-tile.wide{grid-column:1/-1}
.contact-tile .ic{flex-shrink:0;width:42px;height:42px;border-radius:13px;background:rgba(201,164,108,.15);border:1px solid rgba(201,164,108,.35);color:var(--gold-soft);display:flex;align-items:center;justify-content:center}
.contact-tile .ic svg{width:19px;height:19px;fill:currentColor}
.contact-tile b{display:block;font-size:14px;font-weight:600;line-height:1.2}
.contact-tile span{display:block;font-size:13px;color:rgba(251,248,244,.88)}
.aside-note{margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;color:rgba(251,248,244,.86);display:flex;gap:10px;text-shadow:0 1px 10px rgba(26,9,34,.4)}
.aside-note .ms{color:var(--gold);font-size:20px}
.booking-form{padding:56px 52px;display:flex;flex-direction:column;gap:20px}
.form-logo{display:flex;align-items:center;justify-content:center;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.form-logo img{height:64px}
.form-logo div strong{display:block;font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1}
.form-logo div span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet);font-weight:600}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field .label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.field label .ms,.field .label .ms{font-size:16px;color:var(--violet)}
.input{width:100%;min-width:0;max-width:100%;text-overflow:ellipsis;padding:15px 18px;border-radius:14px;background:var(--lavender-50);border:1px solid rgba(146,123,104,.16);font-size:15px;color:var(--ink);transition:border-color .3s,box-shadow .3s,background .3s;appearance:none;-webkit-appearance:none}
.input::placeholder{color:#a397a8}
.input:hover{border-color:var(--line-strong)}
.input:focus{outline:none;background:#fff;border-color:var(--violet);box-shadow:0 0 0 4px rgba(146,123,104,.12)}
.input.is-invalid{border-color:#c0392b;box-shadow:0 0 0 4px rgba(192,57,43,.1)}
textarea.input{resize:none;line-height:1.6}
.select-wrap{position:relative}
.select-wrap::after{content:"expand_more";font-family:'Material Symbols Outlined';position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--violet);font-size:22px}
.select-wrap .input{padding-right:48px;cursor:pointer}
.form-hint{text-align:center;font-size:12px;color:var(--muted);margin:0;display:flex;align-items:center;justify-content:center;gap:6px}
.form-hint .ms{font-size:16px;color:var(--gold)}

/* =========================================================
   PAGAMENTO
   ========================================================= */
.payments{background:linear-gradient(180deg,var(--ivory-2) 0%,var(--lavender-100) 100%);padding-top:40px}
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;max-width:1120px;margin:0 auto}
.pay-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 30px 30px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s,border-color .4s}
.pay-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.pay-card.featured{background:linear-gradient(180deg,#fff 0%,#faf5fd 100%);border:1.5px solid var(--violet);box-shadow:var(--shadow-lg);transform:translateY(-12px)}
.pay-card.featured:hover{transform:translateY(-18px)}
.pay-flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:var(--grad-brand);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;box-shadow:var(--shadow-glow)}
.pay-flag i{width:7px;height:7px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 0 0 rgba(234,217,184,.8);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(234,217,184,0)}100%{box-shadow:0 0 0 0 rgba(234,217,184,0)}}
.pay-ic{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--lavender-100);color:var(--violet);border:1px solid var(--line);margin-bottom:20px;transition:transform .5s var(--ease)}
.pay-card:hover .pay-ic{transform:scale(1.08) rotate(-6deg)}
.pay-card.featured .pay-ic{background:var(--grad-brand);color:#fff;border:3px solid var(--lilac-soft)}
.pay-ic .ms{font-size:34px}
.pay-ic svg{width:32px;height:32px;fill:currentColor}
.pay-mod{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pay-card h4{margin:4px 0 12px;font-family:var(--font-display);font-size:34px;font-weight:600;line-height:1}
.pay-card p{margin:0;font-size:14px;line-height:1.7;color:var(--muted);max-width:280px}
.pay-card .note{margin-top:12px;font-size:12px;font-style:italic;color:#8b7d90}
.brands{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:16px}
.brands span{padding:4px 10px;border-radius:8px;background:var(--lavender-50);border:1px solid var(--line);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}
.pix-box{width:100%;margin-top:18px;padding:18px;border-radius:18px;background:var(--lavender-100);border:1px dashed var(--line-strong);display:flex;flex-direction:column;align-items:center;gap:4px}
.pix-box small{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.pix-box strong{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:.02em;user-select:all}
.pix-box > span{font-size:11.5px;color:var(--muted)}
.pix-box .btn{margin-top:10px}
.pay-tag{margin-top:auto;padding-top:22px;width:100%;border-top:1px solid var(--line);display:flex;justify-content:center}
.pay-tag span{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:var(--lavender-50);border:1px solid var(--line);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.pay-tag span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet)}

/* =========================================================
   FAQ
   ========================================================= */
.faq{background:linear-gradient(180deg,rgba(243,234,224,.93),rgba(243,234,224,.86)),url('imagens/004.webp') center bottom/cover no-repeat;padding-top:40px;padding-bottom:110px}
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start;max-width:1120px;margin:0 auto}
.faq-intro{position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.faq-list{display:flex;flex-direction:column;gap:14px}
.faq-item{border-radius:20px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:border-color .3s,box-shadow .3s}
.faq-item.is-open{border-color:var(--line-strong);box-shadow:var(--shadow-md)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;text-align:left;font-size:16px;font-weight:600;color:var(--ink)}
.faq-q .ic{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--lavender-100);color:var(--violet);display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease),background .3s,color .3s}
.faq-item.is-open .faq-q .ic{transform:rotate(45deg);background:var(--violet);color:#fff}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{margin:0;padding:0 24px 24px;font-size:14.5px;line-height:1.8;color:var(--muted)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{position:relative;background:var(--plum-950);color:rgba(251,248,244,.75);padding:90px 0 30px;overflow:hidden;isolation:isolate}
.footer::before{content:"";position:absolute;z-index:-1;width:800px;height:800px;left:50%;top:-560px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(185,154,112,.35),transparent 60%)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand{display:flex;flex-direction:column;gap:20px}
.footer-brand .brand img{filter:brightness(0) invert(1);opacity:.95}
.footer-brand .brand-name strong{color:var(--ivory);letter-spacing:.04em}
.footer-brand .brand-name span{color:var(--gold-soft)}
.footer-brand p{margin:0;font-size:14px;line-height:1.8;max-width:360px}
.footer h5{margin:0 0 20px;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.hours{display:flex;flex-direction:column;gap:14px}
.hour{display:flex;gap:12px}
.hour .ms{color:var(--lilac);font-size:20px;margin-top:2px}
.hour b{display:block;color:var(--ivory);font-size:14px;font-weight:600}
.hour span{font-size:13.5px}
.footer-social{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.footer-social a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:background .3s,border-color .3s,transform .4s var(--ease)}
.footer-social a:hover{background:rgba(255,255,255,.09);border-color:rgba(201,164,108,.45);transform:translateX(4px)}
.footer-social .ic{width:34px;height:34px;border-radius:10px;background:rgba(216,199,181,.12);color:var(--lilac);display:flex;align-items:center;justify-content:center}
.footer-social svg{width:16px;height:16px;fill:currentColor}
.footer-social b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory)}
.footer-social span{font-size:13px;color:var(--lilac)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:28px;font-size:12.5px}
.footer-bottom nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.footer-bottom a:hover{color:var(--gold-soft)}

/* =========================================================
   FLUTUANTES
   ========================================================= */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:55;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#655347,#927B68);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -8px rgba(146,123,104,.65),0 0 0 1px rgba(201,164,108,.55);transition:transform .4s var(--ease)}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #C6A783;animation:ring 2.4s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:currentColor}
.wa-tip{position:absolute;right:72px;white-space:nowrap;padding:8px 14px;border-radius:12px;background:var(--plum-900);color:#fff;font-size:12.5px;font-weight:500;opacity:0;transform:translateX(8px);transition:all .3s;pointer-events:none}
.wa-float:hover .wa-tip{opacity:1;transform:none}
.to-top{position:fixed;right:30px;bottom:96px;z-index:55;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--violet);border:1px solid var(--line-strong);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .4s var(--ease)}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--violet);color:#fff}
.toast{position:fixed;left:50%;bottom:30px;z-index:200;transform:translate(-50%,30px);display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:var(--plum-900);color:#fff;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:all .45s var(--ease)}
.toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast .ms{color:var(--gold-soft)}

/* =========================================================
   MODAIS
   ========================================================= */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(22,9,25,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.modal.is-open{opacity:1;visibility:visible}
.modal-card{position:relative;width:100%;max-width:680px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:30px;box-shadow:0 40px 100px -20px rgba(0,0,0,.6);transform:translateY(30px) scale(.97);transition:transform .55s var(--ease);scrollbar-width:thin}
.modal.is-open .modal-card{transform:none}
.modal-hero{position:relative;height:280px;overflow:hidden;flex-shrink:0}
.modal-hero img{width:100%;height:100%;object-fit:cover}
.modal-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.55) 30%,rgba(22,9,25,0) 60%,rgba(22,9,25,.35) 100%)}
.modal-close{position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--violet);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);transition:transform .3s var(--ease),background .3s,color .3s}
.modal-close:hover{transform:rotate(90deg);background:var(--violet);color:#fff}
.modal-title{position:absolute;left:30px;right:30px;bottom:14px;z-index:2;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.modal-title .sc-chip{position:static;background:var(--violet);color:#fff}
.modal-title h2{margin:0;font-family:var(--font-display);font-size:clamp(32px,4vw,42px);font-weight:600;line-height:1.05;color:var(--ink)}
.modal-body{padding:18px 30px 30px;display:flex;flex-direction:column;gap:20px}
.kicker{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--violet)}
.modal-body .overview{margin:6px 0 0;font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.info-box{padding:20px;border-radius:20px;background:var(--lavender-50);border:1px solid var(--line)}
.info-box h4{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:15px;font-weight:600}
.info-box h4 .ms{color:var(--violet)}
.info-box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.info-box li{display:flex;gap:8px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.info-box li .ms{font-size:18px;color:var(--violet);margin-top:1px}
.info-box p{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 20px 18px 24px;border-radius:22px;background:linear-gradient(135deg,#f6eefb,#ede0f6);border:1px solid var(--line)}
.mf-meta{display:flex;gap:28px}
.mf-meta small{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.mf-meta b{display:block;font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.1}

.bm-selected{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,#faf5fd,#f1e6f8);border:1px solid var(--line-strong)}
.bm-selected .left{display:flex;align-items:center;gap:12px;min-width:0}
.bm-selected .ic{flex-shrink:0;width:42px;height:42px;border-radius:13px;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center}
.bm-selected b{display:block;font-family:var(--font-display);font-size:21px;font-weight:600;line-height:1.1}
.bm-selected small{display:block;font-size:12px;color:var(--violet)}
.bm-selected .right{text-align:right;flex-shrink:0}
.bm-selected .right b{color:var(--violet-deep);font-size:22px;font-weight:700}
.bm-selected .right small{color:var(--muted)}
.choice-grid{display:grid;gap:8px}
.choice-grid.days{grid-template-columns:repeat(6,1fr)}
.choice-grid.slots{grid-template-columns:repeat(3,1fr)}
.choice-grid.two{grid-template-columns:1fr 1fr}
.choice{padding:12px 8px;border-radius:14px;border:1px solid rgba(146,123,104,.18);background:#fff;font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:center;transition:all .3s var(--ease)}
.choice small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.choice:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-1px)}
.choice.is-active{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--shadow-glow)}
.choice.is-active small{color:rgba(255,255,255,.8)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-error{display:none;font-size:12px;color:#c0392b}
.field-error.show{display:block}
.bm-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:14px;background:var(--lavender-100);font-size:12.5px;color:var(--ink-2)}
.bm-strip span{display:flex;align-items:center;gap:8px}
.bm-strip .ms{color:var(--violet);font-size:18px}
.bm-strip b{color:var(--violet)}
.change-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--violet);text-decoration:underline;text-underline-offset:3px}
.modal-hero.sm{height:200px}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1180px){
  .nav{display:none}
  .menu-toggle{display:inline-flex}
  .hero-grid{grid-template-columns:1fr 1fr}
  .t-grid{grid-template-columns:repeat(2,1fr)}
  .cat-deck{height:300px;gap:12px}
  .cc-name{font-size:23px}
  .cat-card.is-active .cc-name{font-size:28px}
  .cc-body{left:20px;right:18px;bottom:20px}
  .cc-top{left:20px;right:18px;top:20px}
}
@media (max-width:1000px){
  .section{padding:96px 0}
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 30px)}
  .hero-grid,.about-grid,.essence-grid,.booking-shell,.faq-wrap{grid-template-columns:minmax(0,1fr)}
  .hero-grid{gap:20px}
  .hero-visual{min-height:420px}
  .halo.h1{width:420px;height:420px}.halo.h2{width:340px;height:340px}.halo.h3{width:500px;height:500px}
  .hero-visual{order:-1}
  .hero-logo{width:min(400px,78vw)}
  .hero-bg{bottom:auto;height:760px}
  .hero-bg img{object-position:46% 40%}
  .hero-bg::after{background:linear-gradient(180deg,rgba(251,248,244,.08) 0,rgba(251,248,244,.16) 470px,rgba(251,248,244,.86) 610px,rgba(251,248,244,.96) 690px,var(--ivory) 760px)}
  .hero-logo::before{inset:0 2%;background:radial-gradient(circle,rgba(251,248,244,.82),rgba(243,234,224,.55) 42%,rgba(243,234,224,0) 70%);filter:blur(14px)}
  .about-grid,.essence-grid{gap:56px}
  .portrait-wrap{order:-1}
  .portrait-stage{width:min(430px,calc(100% - 44px))}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pay-grid{grid-template-columns:minmax(0,1fr);max-width:480px}
  .pay-card.featured{transform:none}.pay-card.featured:hover{transform:translateY(-6px)}
  .faq-intro{position:static;text-align:center;align-items:center}
  .about-copy .eyebrow,.essence-copy .eyebrow{align-self:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .scroll-cue{display:none}
}
@media (max-width:640px){
  :root{--header-h:72px}
  .container{padding:0 18px}
  .section{padding:80px 0}
  .header-inner{padding:0 16px}
  .brand img{height:40px}
  .brand-name strong{font-size:20px}
  .brand-name span{font-size:8.5px;letter-spacing:.18em}
  .header-actions .hide-sm{display:none}
  .hero-ctas .btn{flex:1 1 100%}
  .hero-stats{grid-template-columns:repeat(3,1fr)}
  .stat{padding:0 10px 0 0;margin-right:10px}
  .stat b{font-size:32px}
  .stat span{font-size:9.5px;letter-spacing:.1em}
  .hero-visual{min-height:330px}
  .hero-logo{width:min(310px,80vw)}
  .hero-bg{height:640px}
  .hero-bg::after{background:linear-gradient(180deg,rgba(251,248,244,.06) 0,rgba(251,248,244,.14) 390px,rgba(251,248,244,.86) 500px,rgba(251,248,244,.96) 570px,var(--ivory) 640px)}
  .halo.h1{width:330px;height:330px}.halo.h2{width:280px;height:280px}.halo.h3{display:none}
  .fc-1{left:0;top:4%;padding:10px 12px}
  .fc-2{right:0;bottom:4%;padding:10px 12px}
  .float-card .badge-ic{width:34px;height:34px;border-radius:11px}
  .features{grid-template-columns:1fr}
  .portrait-deco{display:none}
  .mosaic{gap:12px}.mosaic-col{gap:12px}.mosaic-col:last-child{padding-top:40px}
  .cat-deck{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:8px 18px 4px;scrollbar-width:none;gap:12px}
  .cat-deck::-webkit-scrollbar{display:none}
  .cat-card,.cat-card.is-active{flex:0 0 min(60%,280px);height:250px;scroll-snap-align:center}
  .cat-card:not(.is-active):hover{transform:none}
  .cc-name{font-size:25px}
  .cc-index{font-size:28px}
  .cc-icon{width:40px;height:40px}
  .cc-cta{display:none}
  .t-below{display:none}
  .cat-card.is-active .cc-name{font-size:26px}
  .cat-card.is-active .cc-cta{display:inline-flex}
  .cat-link{height:34px}
  .cat-stage{padding:22px 16px 20px;border-radius:26px}
  .stage-head{grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding-bottom:20px;margin-bottom:20px}
  .stage-thumb{width:60px;height:60px}
  .stage-thumb .ms{width:26px;height:26px;font-size:14px}
  .stage-head h3{font-size:27px}
  .stage-kicker{font-size:10px;letter-spacing:.14em}
  .stage-meta{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;text-align:left}
  .stage-count strong{font-size:34px}
  .stage-hint{display:none}
  .services-grid{grid-template-columns:minmax(0,1fr)}
  .sc-actions{gap:8px}
  .sc-actions .btn{font-size:12.5px;padding:0 10px;gap:6px}
  .t-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -18px;padding:6px 18px 20px;scrollbar-width:none}
  .t-grid::-webkit-scrollbar{display:none}
  .t-card{flex:0 0 84%;scroll-snap-align:center}
  .booking-aside,.booking-form{padding:40px 24px}
  .contact-tiles{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .footer-bottom{flex-direction:column;text-align:center}
  .modal{padding:0;align-items:flex-end}
  .modal-card{max-height:94vh;max-height:94dvh;border-radius:28px 28px 0 0}
  .modal-hero{height:220px}
  .modal-title{left:22px;right:22px}
  .modal-body{padding:14px 20px 26px}
  .info-grid,.field-row{grid-template-columns:minmax(0,1fr)}
  .choice-grid.days{grid-template-columns:repeat(3,1fr)}
  .modal-footer{flex-direction:column;align-items:stretch}
  .modal-footer .btn{width:100%}
  .wa-float{right:16px;bottom:16px;width:56px;height:56px}
  .to-top{display:none}
  .footer-bottom{padding-bottom:64px}
  .hint-desk{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}
@media (max-height:940px){.scroll-cue{display:none}}

/* =========================================================
   TELA DE CARREGAMENTO (paleta extraída da logomarca)
   ========================================================= */
:root{
  --loader-bg:#FFFCF8;          /* lavanda clarinho do site */
  --loader-primary:#927B68;     /* roxo oficial da marca */
  --loader-secondary:#D6BDA5;   /* lilás da identidade */
  --loader-accent:#B99A70;      /* brilho ametista da logomarca */
  --loader-text:#514237;        /* sombra profunda da logomarca */
}
#site-preloader{display:none}
.js #site-preloader{position:fixed;inset:0;z-index:99999;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;
  background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--loader-bg) 70%,#fff) 0%,var(--loader-bg) 42%,color-mix(in srgb,var(--loader-secondary) 24%,var(--loader-bg)) 100%);
  transition:opacity .75s cubic-bezier(.65,0,.35,1),visibility .75s}
html.is-loading{overflow:hidden}
#site-preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
#site-preloader.is-hidden .pl-blob,#site-preloader.is-hidden .pl-ring,#site-preloader.is-hidden .pl-particles i,#site-preloader.is-hidden .pl-line,#site-preloader.is-hidden .pl-line::after,#site-preloader.is-hidden .pl-caption{animation-play-state:paused}
.pl-stage{position:relative;width:min(320px,74vw);aspect-ratio:1;display:grid;place-items:center}
.pl-blob{position:absolute;inset:0;border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
  background:radial-gradient(circle at 30% 28%,color-mix(in srgb,var(--loader-primary) 16%,transparent),transparent 62%),radial-gradient(circle at 72% 74%,color-mix(in srgb,var(--loader-secondary) 16%,transparent),transparent 60%),color-mix(in srgb,var(--loader-secondary) 8%,transparent);
  animation:pl-morph 3s ease-in-out infinite alternate}
.pl-blob--inner{inset:20px;background:radial-gradient(circle at 68% 30%,color-mix(in srgb,var(--loader-secondary) 14%,transparent),transparent 62%),radial-gradient(circle at 30% 72%,color-mix(in srgb,var(--loader-primary) 10%,transparent),transparent 60%),color-mix(in srgb,var(--loader-bg) 60%,transparent);animation:pl-morph 4s ease-in-out infinite alternate-reverse}
.pl-ring{position:absolute;inset:6%;border-radius:50%;border:2px solid transparent;border-top-color:var(--loader-primary);border-right-color:color-mix(in srgb,var(--loader-secondary) 85%,var(--loader-primary));opacity:0;animation:pl-ring 1.5s cubic-bezier(.16,1,.3,1) infinite;animation-delay:var(--d,0s)}
.pl-particles{position:absolute;inset:0}
.pl-particles i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--loader-accent);box-shadow:0 0 10px color-mix(in srgb,var(--loader-accent) 70%,transparent);opacity:0;animation:pl-float 2s ease-in-out infinite;animation-delay:var(--d,0s)}
.pl-logo{position:relative;z-index:2;width:58%;height:auto;filter:blur(0) drop-shadow(0 12px 22px color-mix(in srgb,var(--loader-primary) 42%,transparent));clip-path:ellipse(100% 100% at 50% 50%);
  animation:pl-logo-in 1.25s cubic-bezier(.16,1,.3,1) .1s both,pl-breathe 2.6s ease-in-out 1.4s infinite}
#site-preloader.is-hidden .pl-logo{animation:pl-logo-out .7s cubic-bezier(.65,0,.35,1) forwards}
.pl-line{position:relative;width:112px;height:2px;margin-top:14px;border-radius:2px;overflow:hidden;
  background:linear-gradient(90deg,transparent,var(--loader-primary),var(--loader-accent),var(--loader-primary),transparent);
  transform:scaleX(0);transform-origin:50% 50%;animation:pl-line-draw .9s cubic-bezier(.16,1,.3,1) .7s forwards}
.pl-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 85%,var(--loader-accent)),transparent);transform:translateX(-100%);animation:pl-line-flow 1.4s ease-in-out 1.5s infinite}
.pl-caption{margin-top:14px;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--loader-text);opacity:0;animation:pl-fade .9s ease .95s forwards}
.pl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes pl-morph{0%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;transform:rotate(0) scale(1)}50%{border-radius:63% 37% 38% 62% / 55% 61% 39% 45%;transform:rotate(12deg) scale(1.04)}100%{border-radius:36% 64% 52% 48% / 62% 38% 62% 38%;transform:rotate(-8deg) scale(.97)}}
@keyframes pl-ring{0%{opacity:0;transform:scale(.55) rotate(0)}30%{opacity:.9}100%{opacity:0;transform:scale(1.22) rotate(260deg)}}
@keyframes pl-float{0%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.5)}45%{opacity:1;transform:translate(calc(var(--tx) * 1.12),calc(var(--ty) * 1.12 - 10px)) scale(1)}100%{opacity:0;transform:translate(calc(var(--tx) * 1.28),calc(var(--ty) * 1.28 - 20px)) scale(.5)}}
@keyframes pl-logo-in{0%{opacity:0;transform:scale(.3) rotate(-20deg);filter:blur(20px) drop-shadow(0 12px 22px color-mix(in srgb,var(--loader-primary) 0%,transparent));clip-path:ellipse(0% 0% at 50% 50%)}100%{opacity:1;transform:scale(1) rotate(0);filter:blur(0) drop-shadow(0 12px 22px color-mix(in srgb,var(--loader-primary) 42%,transparent));clip-path:ellipse(100% 100% at 50% 50%)}}
@keyframes pl-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes pl-logo-out{0%{opacity:1;transform:scale(1) rotate(0);filter:blur(0) drop-shadow(0 12px 22px color-mix(in srgb,var(--loader-primary) 42%,transparent));clip-path:ellipse(100% 100% at 50% 50%)}100%{opacity:0;transform:scale(1.3) rotate(15deg);filter:blur(14px) drop-shadow(0 12px 22px color-mix(in srgb,var(--loader-primary) 0%,transparent));clip-path:ellipse(0% 0% at 50% 50%)}}
@keyframes pl-line-draw{to{transform:scaleX(1)}}
@keyframes pl-line-flow{to{transform:translateX(100%)}}
@keyframes pl-fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  #site-preloader,#site-preloader *,#site-preloader *::after{animation:none!important;transition:none!important}
  .pl-line{transform:none}.pl-caption{opacity:1}
}

/* V8: catálogo limpo — sem neon, sem quadriculado */
.cc-grid,.cc-ring{display:none!important}
/* V9: ponte categoria→serviços restaurada, versão orgânica (sem neon) */
.cat-bridge{background:linear-gradient(180deg,rgba(146,123,104,.22) 0%,rgba(228,205,243,.30) 55%,rgba(255,255,255,.62) 100%)!important;transition:left .5s var(--ease),width .5s var(--ease)}
.cat-bridge::before{width:1px!important;margin-left:0!important;background:linear-gradient(180deg,rgba(234,217,184,.85),rgba(146,123,104,.35))!important;box-shadow:none!important}
.cat-bridge::after{width:6px!important;height:12px!important;margin-left:-3px!important;background:linear-gradient(180deg,#fff,#E8D5C8)!important;box-shadow:0 2px 8px rgba(146,123,104,.25)!important}
.cat-node{background:#fff!important;border:2px solid var(--gold)!important;box-shadow:0 0 0 4px rgba(234,217,184,.35)!important}
.cat-stage::after{height:2px!important;background:linear-gradient(90deg,transparent,rgba(201,164,108,.8) 30%,rgba(255,255,255,.95) 50%,rgba(201,164,108,.8) 70%,transparent)!important;box-shadow:none!important;transition:left .5s var(--ease),width .5s var(--ease)}
.stage-scan::before{background:linear-gradient(180deg,transparent 0%,rgba(228,205,243,0) 75%,rgba(228,205,243,.18) 97%,rgba(255,255,255,.4) 100%)!important}
/* V9: preços flexíveis (sob consulta / único / pacotes) */
.prices.p-1{grid-template-columns:1fr}.prices.p-3{grid-template-columns:repeat(3,1fr)}
.prices.p-3 .price{padding:10px 10px}.prices.p-3 .price b{font-size:19px}
.price + .price + .price{background:linear-gradient(135deg,#efe3f7,#e6d5f2)}
.price.consult b{font-size:20px}
/* V9: pausa animações fora da tela (desempenho) */
.is-offscreen,.is-offscreen *{animation-play-state:paused!important}
.is-offscreen .service-card,.is-offscreen .service-card.is-entering{animation-play-state:running!important}
.service-card.is-entering{animation-fill-mode:backwards}
.cat-card.is-active{box-shadow:0 26px 50px -26px rgba(81,66,55,.6),0 0 0 2px rgba(234,217,184,.85)!important;transform:translateY(-4px)}
.cat-stage::before{animation:none!important;background:linear-gradient(135deg,rgba(201,164,108,.45),rgba(216,199,181,.35),rgba(201,164,108,.45))!important}
.cat-stage.is-scanning .services-grid{animation:v8fade .6s var(--ease) both}
@keyframes v8fade{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}

/* V8: mosaico da Filosofia animado */
.mosaic-col{animation:v8colFloat 9s ease-in-out infinite}
.mosaic-col:last-child{animation-duration:11s;animation-delay:-4s}
@keyframes v8colFloat{0%,100%{translate:0 0}50%{translate:0 -14px}}
.tile img{animation:v8kb 16s ease-in-out infinite alternate;transition:scale 1.2s var(--ease),filter .8s}
.mosaic-col:first-child .tile:first-child img{animation-duration:15s}
.mosaic-col:first-child .tile:last-child img{animation-duration:19s;animation-direction:alternate-reverse}
.mosaic-col:last-child .tile:first-child img{animation-duration:17s;animation-delay:-6s}
.mosaic-col:last-child .tile:last-child img{animation-duration:21s;animation-direction:alternate-reverse;animation-delay:-3s}
@keyframes v8kb{0%{transform:scale(1.04) translate(0,0)}50%{transform:scale(1.12) translate(-2%,1.5%)}100%{transform:scale(1.08) translate(2%,-1.5%)}}
.tile:hover img{transform:none;scale:1.07;filter:saturate(1.12) brightness(1.04)}
.tile::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:v8sheen 7s ease-in-out infinite}
.mosaic-col:last-child .tile::before{animation-delay:-3.5s}
.mosaic-col .tile:last-child::before{animation-delay:-1.8s}
@keyframes v8sheen{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.tile{transition:box-shadow .6s var(--ease),border-color .6s}
.tile:hover{box-shadow:0 34px 70px -22px rgba(0,0,0,.7),0 0 0 1px rgba(234,217,184,.55);border-color:rgba(234,217,184,.5)}
.tile::after{transition:opacity .6s}.tile:hover::after{opacity:.55}

/* V8: avaliações com cards variados + carrossel no celular */
.t-card{overflow:hidden;--tc:198,155,224;background:linear-gradient(165deg,rgba(var(--tc),.26) 0%,rgba(255,255,255,.08) 42%,rgba(81,66,55,.32) 100%)!important;border:1px solid rgba(var(--tc),.38)!important;box-shadow:0 30px 60px -34px rgba(16,5,22,.8),inset 0 1px 0 rgba(255,255,255,.22)}
.t-card:nth-child(2){--tc:234,217,184}
.t-card:nth-child(3){--tc:232,160,196}
.t-card:nth-child(4){--tc:150,170,235}
.t-card::before{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(var(--tc),1),transparent)}
.t-card::after{content:"";position:absolute;width:220px;height:220px;right:-90px;bottom:-110px;border-radius:50%;background:radial-gradient(circle,rgba(var(--tc),.35),transparent 65%);pointer-events:none;z-index:-1}
.t-card .t-quote-mark{color:rgba(var(--tc),.35)}
.t-card .t-avatar{box-shadow:0 0 0 3px rgba(var(--tc),.45)}
.t-card:nth-child(1) .t-avatar{background:linear-gradient(135deg,#e7d0f5,#a874c6);color:#514237}
.t-card:nth-child(3) .t-avatar{background:linear-gradient(135deg,#f7d6e6,#d58bb3);color:#514237}
.t-card:nth-child(4) .t-avatar{background:linear-gradient(135deg,#dfe5fb,#8f9fdc);color:#514237}
.t-card .t-author{border-top-color:rgba(var(--tc),.25)}
.t-ctrl{display:none}
@media (max-width:640px){
  .t-grid{gap:14px!important;padding:14px 18px 26px!important}
  .t-card{flex:0 0 82%!important;transition:transform .55s var(--ease),opacity .55s,filter .55s!important;transform:scale(.92);opacity:.6;filter:saturate(.8)}
  .t-card.is-current{transform:none;opacity:1;filter:none}
  .t-card.reveal.is-visible:not(.is-current){transform:scale(.92)}
  .t-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
  .t-ctrl button.t-arrow{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .t-ctrl button.t-arrow:active{transform:scale(.92)}
  .t-dots{display:flex;gap:8px}
  .t-dots button{width:8px;height:8px;padding:0;border-radius:99px;background:rgba(255,255,255,.35);transition:width .4s var(--ease),background .4s}
  .t-dots button.on{width:26px;background:var(--gold-soft,#E8D5C8)}
}
@media (prefers-reduced-motion:reduce){.mosaic-col,.tile img,.tile::before{animation:none!important}}

/* ===== V8 PAGAMENTO (base Lumine, paleta Vladia) ===== */
:root{--caramelo:146 123 104;--caramelo-hover:101 83 71;--dourado:185 154 112;--ouro-claro:233 220 203;--ouro-escuro:128 96 82;--pix:146 123 104;--pix-deep:89 72 61;--marrom:89 72 61;--marrom-escuro:51 39 32;--marrom-medio:101 83 71;--marrom-light:133 118 107;--creme:255 252 248;--creme-claro:243 234 224;--creme-quente:232 213 200;--creme-card:255 255 255;--bege-medio:214 189 165;--bege-claro:243 234 224;--bege-suave:232 213 200;--bege-rosado:229 201 188;--pessego:232 213 200;--areia:243 234 224;--sombra:89 72 61}
#formas-pagamento .section-head{position:relative;z-index:2}
#formas-pagamento .pg-help a{color:var(--violet);font-weight:600}
@property --pg-ang{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ===== SEÇÃO PAGAMENTO ===== */
.pg-section{isolation:isolate;overflow:hidden;background:radial-gradient(900px 560px at 50% -8%,rgb(var(--pessego) / .75),transparent 62%),radial-gradient(700px 480px at 100% 100%,rgb(var(--bege-suave) / .9),transparent 66%),linear-gradient(180deg,rgb(var(--creme)) 0%,rgb(var(--creme-claro)) 55%,rgb(var(--creme-quente)) 100%);border-top:1px solid rgb(var(--bege-medio) / .6)}
.pg-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pg-orb{position:absolute;border-radius:9999px;filter:blur(70px);opacity:.6;animation:pgDrift 22s ease-in-out infinite}
.pg-orb-1{width:440px;height:440px;left:-160px;top:-60px;background:rgb(var(--areia) / .75)}
.pg-orb-2{width:380px;height:380px;right:-140px;top:30%;background:rgb(var(--pix) / .2);animation-delay:-7s}
.pg-orb-3{width:340px;height:340px;left:38%;bottom:-180px;background:rgb(var(--dourado) / .3);animation-delay:-14s}
.pg-grid{position:absolute;inset:0;background-image:radial-gradient(rgb(var(--caramelo) / .13) 1px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 10%,transparent 75%)}
.pg-float-ico{position:absolute;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.6rem;color:rgb(var(--caramelo) / .28);animation:pgFloatIco 12s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes pgFloatIco{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(14deg)}}
@keyframes pgDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(30px,-34px,0) scale(1.08)}66%{transform:translate3d(-24px,22px,0) scale(.94)}}

/* Seletor com indicador deslizante */
.pg-switch{position:relative;display:flex;width:max-content;max-width:100%;margin:0 auto 3rem;padding:6px;gap:4px;border-radius:9999px;background:rgb(var(--creme-card) / .78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgb(var(--bege-medio) / .85);box-shadow:0 18px 40px -26px rgb(var(--marrom) / .45),inset 0 1px 0 rgb(255 255 255 / .7)}
.pg-tab{position:relative;z-index:1;overflow:hidden;display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.35rem;border-radius:9999px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgb(var(--marrom-light));transition:color .45s ease;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pg-tab svg{width:17px;height:17px;flex:none;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.pg-tab:hover{color:rgb(var(--marrom))}
.pg-tab:hover svg{transform:scale(1.18) rotate(-10deg)}
.pg-tab.is-active,.pg-tab.is-active:hover{color:#fff}
.pg-tab.is-active svg{animation:pgIcoPop .6s cubic-bezier(.34,1.56,.64,1)}
.pg-tab:focus-visible{outline:2px solid rgb(var(--caramelo));outline-offset:2px}
@keyframes pgIcoPop{0%{transform:scale(.4) rotate(-40deg)}100%{transform:none}}
.pg-switch-glider{position:absolute;z-index:0;top:6px;bottom:6px;left:0;width:0;border-radius:9999px;background:linear-gradient(120deg,rgb(var(--caramelo-hover)),rgb(var(--caramelo)) 55%,rgb(var(--dourado)));box-shadow:0 10px 24px -10px rgb(var(--caramelo) / .75),inset 0 1px 0 rgb(255 255 255 / .25);transition:transform .65s cubic-bezier(.65,0,.25,1.25),width .65s cubic-bezier(.65,0,.25,1.25),background .5s ease}
.pg-switch[data-active="dinheiro"] .pg-switch-glider{background:linear-gradient(120deg,rgb(var(--ouro-escuro)),rgb(var(--dourado)) 60%,rgb(var(--areia)))}
.pg-switch[data-active="pix"] .pg-switch-glider{background:linear-gradient(120deg,rgb(var(--pix-deep)),rgb(var(--pix)));box-shadow:0 10px 24px -10px rgb(var(--pix) / .8)}
@media (max-width:479.98px){.pg-tab{padding:.7rem .9rem;gap:.4rem;font-size:.6rem;letter-spacing:.12em}.pg-tab svg{width:15px;height:15px}}

/* Baralho de cartões */
.pg-deck{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem;align-items:stretch}
.pg-slot{position:relative;--acc:var(--caramelo)}
.pg-slot[data-pg="dinheiro"]{--acc:var(--dourado)}
.pg-slot[data-pg="pix"]{--acc:var(--pix)}
.pg-slot[data-pg="cartao"]{--acc:var(--caramelo)}
.fx .pg-slot.scroll-reveal.revealed{animation:pgSlotIn 1.1s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--d,0s)}
.pg-slot:nth-child(2){--d:.14s}.pg-slot:nth-child(3){--d:.28s}
@keyframes pgSlotIn{from{opacity:0;transform:translateY(60px) rotateX(18deg) scale(.94)}to{opacity:1;transform:none}}
.pg-card{position:relative;height:100%;min-height:540px;display:flex;flex-direction:column;border-radius:1.75rem;overflow:hidden;cursor:pointer;isolation:isolate;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .6s ease,filter .6s ease,opacity .6s ease;box-shadow:0 30px 60px -36px rgb(var(--marrom) / .55),0 0 0 1px rgb(var(--bege-medio) / .75);background:rgb(var(--creme-card));-webkit-tap-highlight-color:transparent}
.pg-card.is-tilting{transition:transform .14s linear,box-shadow .6s ease,filter .6s ease,opacity .6s ease}
.pg-slot:hover .pg-card{--ty:-8px}
.pg-deck.has-active .pg-slot:not(.is-active) .pg-card{--sc:.965;filter:saturate(.8);opacity:.86}
.pg-deck.has-active .pg-slot:not(.is-active):hover .pg-card{--sc:1;filter:none;opacity:1}
.pg-slot.is-active .pg-card{--ty:-14px;box-shadow:0 50px 80px -36px rgb(var(--marrom) / .6),0 0 0 1.5px rgb(var(--acc) / .7),0 0 70px -14px rgb(var(--acc) / .5)}
.pg-card::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgb(255 255 255 / .38),transparent 55%);opacity:var(--glow,0);transition:opacity .45s ease;mix-blend-mode:soft-light}
.pg-border{position:absolute;inset:0;z-index:7;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--pg-ang),transparent 0 55%,rgb(var(--acc)) 72%,rgb(255 255 255 / .9) 76%,rgb(var(--acc)) 80%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .6s ease;animation:pgSpin 4.5s linear infinite}
.pg-slot.is-active .pg-border{opacity:1}
@keyframes pgSpin{to{--pg-ang:360deg}}

.pg-visual{position:relative;height:240px;display:grid;place-items:center;overflow:hidden;flex:none}
.pg-visual [style*="--dp"]{translate:calc(var(--px,0) * var(--dp,0) * 1px) calc(var(--py,0) * var(--dp,0) * 1px);transition:translate .25s ease-out}

/* Dinheiro */
.pg-visual--cash{background:radial-gradient(circle at 50% 55%,rgb(var(--creme-card) / .9),transparent 60%),linear-gradient(150deg,rgb(var(--pessego)),rgb(var(--areia)) 60%,rgb(var(--dourado) / .55))}
.pg-halo{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgb(var(--ouro-claro) / .95),transparent 65%);animation:pgHalo 4s ease-in-out infinite}
@keyframes pgHalo{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.1);opacity:1}}
.pg-notes{position:relative;width:200px;height:108px}
.pg-note{position:absolute;inset:0;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,rgb(var(--creme-card)),rgb(var(--pessego)) 45%,rgb(var(--areia)));border:1px solid rgb(var(--dourado) / .6);box-shadow:0 18px 30px -16px rgb(var(--marrom) / .55)}
.pg-note::before{content:'';position:absolute;inset:7px;border:1px dashed rgb(var(--dourado) / .65);border-radius:8px}
.pg-note::after{content:'';position:absolute;inset:0;background:repeating-radial-gradient(circle at 82% 50%,transparent 0 6px,rgb(var(--dourado) / .2) 6px 7px),linear-gradient(105deg,transparent 40%,rgb(255 255 255 / .55) 50%,transparent 60%);background-size:auto,250% 100%;animation:pgNoteSheen 4.5s ease-in-out infinite}
@keyframes pgNoteSheen{0%,55%{background-position:0 0,130% 0}100%{background-position:0 0,-130% 0}}
.pg-note-1{animation:pgNote1 5s ease-in-out infinite}
.pg-note-2{filter:brightness(.97);animation:pgNote2 5s ease-in-out infinite}
.pg-note-3{filter:brightness(.93);animation:pgNote3 5s ease-in-out infinite}
@keyframes pgNote1{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(1deg) translateY(-7px)}}
@keyframes pgNote2{0%,100%{transform:rotate(-8deg) translate(-14px,6px)}50%{transform:rotate(-14deg) translate(-28px,2px)}}
@keyframes pgNote3{0%,100%{transform:rotate(9deg) translate(16px,8px)}50%{transform:rotate(15deg) translate(30px,2px)}}
.pg-slot.is-active .pg-note-2{animation-duration:2.6s}.pg-slot.is-active .pg-note-3{animation-duration:2.6s}
.pg-note-seal{position:absolute;z-index:1;left:16px;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font:600 18px 'Cormorant Garamond',Georgia,serif;color:rgb(var(--caramelo-hover));background:radial-gradient(circle,rgb(var(--creme-card)),rgb(var(--pessego)));border:1px solid rgb(var(--dourado) / .65)}
.pg-note-lines{position:absolute;z-index:1;right:18px;top:28px;width:78px;height:5px;border-radius:3px;background:rgb(var(--dourado) / .4);box-shadow:0 13px 0 rgb(var(--dourado) / .28),0 26px 0 rgb(var(--dourado) / .2)}
.pg-note-val{position:absolute;z-index:1;right:14px;bottom:10px;font:italic 600 15px 'Cormorant Garamond',Georgia,serif;color:rgb(var(--caramelo))}
.pg-coin{position:absolute;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,rgb(var(--ouro-claro)),rgb(var(--dourado)) 58%,rgb(var(--ouro-escuro)));box-shadow:inset 0 0 0 3px rgb(var(--ouro-claro) / .55),inset 0 -4px 6px rgb(var(--ouro-escuro) / .5),0 12px 18px -8px rgb(var(--marrom) / .6)}
.pg-coin b{font:700 12px/1 'Montserrat',sans-serif;color:rgb(var(--ouro-escuro));animation:inherit}
.pg-coin-a{left:12%;top:16%;animation:pgCoin 3.4s ease-in-out infinite}
.pg-coin-b{right:11%;top:24%;width:38px;height:38px;animation:pgCoin 4s ease-in-out -1.2s infinite}
.pg-coin-c{left:22%;bottom:12%;width:32px;height:32px;animation:pgCoin 3.7s ease-in-out -2.2s infinite}
.pg-coin-c b,.pg-coin-b b{font-size:10px}
@keyframes pgCoin{0%,100%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-14px) rotateY(180deg)}}
.pg-twinkle{position:absolute;width:12px;height:12px;background:rgb(255 255 255);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:pgTwinkle 2.4s ease-in-out infinite}
@keyframes pgTwinkle{0%,100%{transform:scale(.3) rotate(0);opacity:.2}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
.pg-fall-coin{position:absolute;top:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 9px/1 'Montserrat',sans-serif;color:rgb(var(--ouro-escuro));background:radial-gradient(circle at 35% 30%,rgb(var(--ouro-claro)),rgb(var(--dourado)) 58%,rgb(var(--ouro-escuro)));box-shadow:inset 0 0 0 2px rgb(var(--ouro-claro) / .55),0 8px 12px -6px rgb(var(--marrom) / .6);pointer-events:none;z-index:4}

/* Pix */
.pg-visual--pix{background:radial-gradient(circle at 50% 45%,rgb(var(--pix) / .38),transparent 60%),linear-gradient(160deg,rgb(var(--marrom-escuro)),rgb(var(--sombra)) 70%,rgb(var(--pix-deep) / .9))}
.pg-pix-ring{position:absolute;width:150px;height:150px;border-radius:30%;border:1.5px solid rgb(var(--pix) / .7);transform:rotate(45deg);animation:pgPixRing 3.6s ease-out infinite}
.pg-pix-ring:nth-child(2){animation-delay:1.2s}.pg-pix-ring:nth-child(3){animation-delay:2.4s}
@keyframes pgPixRing{0%{transform:rotate(45deg) scale(.7);opacity:.9}100%{transform:rotate(45deg) scale(1.9);opacity:0}}
.pg-qr{position:relative;width:146px;height:146px;padding:14px;border-radius:18px;background:rgb(var(--creme-card));box-shadow:0 22px 40px -18px rgb(0 0 0 / .7),0 0 0 6px rgb(var(--pix) / .14);animation:pgQrFloat 5s ease-in-out infinite}
@keyframes pgQrFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.pg-qr-svg{width:100%;height:100%;display:block;fill:rgb(var(--marrom-escuro))}
.pg-qr-svg rect{transform-box:fill-box;transform-origin:center;animation:pgQrCell 3s ease-in-out infinite;animation-delay:calc(var(--q,0) * 1ms)}
@keyframes pgQrCell{0%,86%,100%{opacity:1}92%{opacity:.25}}
.pg-qc{position:absolute;width:22px;height:22px;border:3px solid rgb(var(--pix));border-radius:4px}
.pg-qc.tl{left:-9px;top:-9px;border-right:0;border-bottom:0}.pg-qc.tr{right:-9px;top:-9px;border-left:0;border-bottom:0}
.pg-qc.bl{left:-9px;bottom:-9px;border-right:0;border-top:0}.pg-qc.br{right:-9px;bottom:-9px;border-left:0;border-top:0}
.pg-pix-logo{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:10px;display:grid;place-items:center;background:rgb(var(--creme-card));color:rgb(var(--pix-deep));box-shadow:0 0 0 3px rgb(var(--creme-card)),0 6px 14px -6px rgb(var(--pix-deep) / .8);animation:pgPixLogo 3.2s ease-in-out infinite}
.pg-pix-logo svg{width:26px;height:26px}
@keyframes pgPixLogo{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(8deg)}}
.pg-scan{position:absolute;left:6px;right:6px;top:10px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,rgb(var(--pix)),transparent);box-shadow:0 0 14px 3px rgb(var(--pix) / .6);animation:pgScan 2.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes pgScan{0%,100%{transform:translateY(0)}50%{transform:translateY(122px)}}
.pg-slot.pg-scanning .pg-scan{animation-duration:.7s}
.pg-pix-done{position:absolute;bottom:14px;white-space:nowrap;left:50%;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:9999px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,rgb(var(--pix-deep)),rgb(var(--pix)));box-shadow:0 10px 24px -8px rgb(var(--pix) / .8);transform:translate(-50%,24px) scale(.6);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s ease}
.pg-pix-done svg{width:14px;height:14px}
.pg-slot.pg-done .pg-pix-done{transform:translate(-50%,0) scale(1);opacity:1}

/* Cartão */
.pg-visual--card{perspective:900px;background:radial-gradient(circle at 70% 20%,rgb(var(--creme-card) / .8),transparent 55%),linear-gradient(150deg,rgb(var(--bege-claro)),rgb(var(--bege-suave)) 50%,rgb(var(--bege-rosado)))}
.pg-cc-wrap{position:relative;width:min(250px,78%);aspect-ratio:1.586;perspective:900px}
.pg-cc{position:absolute;inset:0;transform-style:preserve-3d;animation:pgCcFloat 6s ease-in-out infinite}
@keyframes pgCcFloat{0%,100%{transform:translateY(0) rotateX(8deg) rotateY(-10deg) rotateZ(-2deg)}50%{transform:translateY(-10px) rotateX(-4deg) rotateY(10deg) rotateZ(2deg)}}
.pg-cc-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.7,-.25,.3,1.3)}
.pg-slot.pg-flip .pg-cc-flip{transform:rotateY(180deg)}
.pg-cc-face{position:absolute;inset:0;border-radius:14px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;color:rgb(var(--creme-quente))}
.pg-cc-front{background:radial-gradient(120% 140% at 0% 0%,rgb(var(--caramelo)) 0%,transparent 55%),linear-gradient(135deg,rgb(var(--marrom-escuro)),rgb(var(--sombra)) 60%,rgb(var(--caramelo-hover)));box-shadow:0 26px 40px -18px rgb(var(--sombra) / .85),inset 0 1px 0 rgb(255 255 255 / .16)}
.pg-cc-back{transform:rotateY(180deg);background:linear-gradient(135deg,rgb(var(--sombra)),rgb(var(--marrom-escuro)) 50%,rgb(var(--caramelo-hover)));box-shadow:0 26px 40px -18px rgb(var(--sombra) / .85)}
.pg-cc-holo{position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 38%,rgb(255 255 255 / .22) 46%,rgb(var(--dourado) / .3) 50%,rgb(var(--pix) / .18) 54%,transparent 62%);transform:translateX(calc(var(--hx,0) * 1%));animation:pgHolo 5s ease-in-out infinite;mix-blend-mode:screen}
@keyframes pgHolo{0%,100%{translate:-18% 0}50%{translate:18% 0}}
.pg-cc-brand{position:absolute;left:16px;top:11px;font:italic 600 21px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.02em}
.pg-cc-star{position:absolute;right:16px;top:12px;font-size:16px;color:rgb(var(--dourado));animation:pgTwinkle 3s ease-in-out infinite}
.pg-cc-chip{position:absolute;left:16px;top:41%;width:36px;height:27px;border-radius:6px;background:linear-gradient(135deg,rgb(var(--ouro-claro)),rgb(var(--dourado)) 50%,rgb(var(--ouro-escuro)));box-shadow:inset 0 0 0 1px rgb(var(--ouro-escuro) / .5)}
.pg-cc-chip::before{content:'';position:absolute;inset:8px 0;border-top:1px solid rgb(var(--ouro-escuro) / .6);border-bottom:1px solid rgb(var(--ouro-escuro) / .6)}
.pg-cc-chip::after{content:'';position:absolute;inset:0 12px;border-left:1px solid rgb(var(--ouro-escuro) / .6);border-right:1px solid rgb(var(--ouro-escuro) / .6)}
.pg-cc-nfc{position:absolute;left:60px;top:42%;width:22px;height:22px;color:rgb(var(--creme-quente) / .85)}
.pg-cc-num{position:absolute;left:16px;bottom:34px;font:500 12.5px/1 'Montserrat',sans-serif;letter-spacing:.17em;white-space:nowrap}
.pg-cc-foot{position:absolute;left:16px;right:16px;bottom:13px;display:flex;justify-content:space-between;font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.82}
.pg-cc-stripe{position:absolute;left:0;right:0;top:20px;height:34px;background:linear-gradient(90deg,rgb(var(--sombra)),rgb(0 0 0 / .85),rgb(var(--sombra)))}
.pg-cc-sign{position:absolute;left:16px;right:16px;top:66px;height:26px;border-radius:4px;display:flex;align-items:center;padding:0 10px;background:repeating-linear-gradient(45deg,rgb(var(--creme-card)),rgb(var(--creme-card)) 4px,rgb(var(--bege-claro)) 4px,rgb(var(--bege-claro)) 8px)}
.pg-cc-sign em{font:italic 600 13px/1 'Cormorant Garamond',Georgia,serif;color:rgb(var(--caramelo-hover))}
.pg-cc-thanks{position:absolute;left:16px;right:16px;bottom:14px;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--dourado))}
.pg-cc-shadow{position:absolute;left:10%;right:10%;bottom:-22px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--sombra) / .45),transparent);filter:blur(4px);animation:pgCcShadow 6s ease-in-out infinite}
@keyframes pgCcShadow{0%,100%{transform:scaleX(1);opacity:.8}50%{transform:scaleX(.82);opacity:.5}}
.pg-wave{position:absolute;width:120px;height:120px;border-radius:50%;border:1.5px solid rgb(var(--caramelo) / .55);opacity:0;animation:pgWave 3.2s ease-out infinite}
.pg-wave:nth-child(2){animation-delay:1.05s}.pg-wave:nth-child(3){animation-delay:2.1s}
@keyframes pgWave{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.6);opacity:0}}
.pg-slot:not(.is-active) .pg-wave{animation-play-state:paused;opacity:0}

/* Corpo do cartão */
.pg-body{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;gap:.65rem;padding:1.5rem 1.6rem 1.6rem;background:linear-gradient(180deg,rgb(var(--creme-card)),rgb(var(--creme)))}
.pg-kicker{font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:rgb(var(--caramelo))}
.pg-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:2.2rem;line-height:1.05;font-weight:500;color:rgb(var(--marrom));transition:letter-spacing .6s cubic-bezier(.22,1,.36,1),color .5s ease}
.pg-slot.is-active .pg-title{letter-spacing:.02em}
.pg-desc{font-size:.84rem;line-height:1.7;font-weight:300;color:rgb(var(--marrom-light))}
.pg-feats{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.15rem;padding:0;list-style:none}
.pg-feats li{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:.4rem .75rem;border-radius:9999px;background:rgb(var(--acc) / .12);color:rgb(var(--marrom-medio));border:1px solid rgb(var(--acc) / .3);transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .4s ease}
.pg-slot.is-active .pg-feats li{background:rgb(var(--acc) / .2)}
.pg-feats li:hover{transform:translateY(-2px) scale(1.04)}
.pg-foot{margin-top:auto;padding-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-top:1px solid rgb(var(--bege-medio) / .55)}
.pg-foot--col{align-items:stretch}
.pg-ok{display:inline-flex;align-items:center;gap:.5rem;font-size:11px;font-weight:600;letter-spacing:.04em;color:rgb(var(--marrom))}
.pg-ok i{position:relative;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--acc));color:#fff;font-style:normal;font-size:11px}
.pg-ok i::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgb(var(--acc));animation:pgOkPulse 2.4s ease-out infinite}
@keyframes pgOkPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(2);opacity:0}}
.pg-num{font:italic 600 1.7rem/1 'Cormorant Garamond',Georgia,serif;color:rgb(var(--acc) / .55)}
.pg-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.pg-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.45rem;padding:.65rem 1rem;border-radius:9999px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;background:linear-gradient(120deg,rgb(var(--pix-deep)),rgb(var(--pix)));box-shadow:0 10px 20px -12px rgb(var(--pix-deep) / .95);transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease,background .4s ease,color .4s ease}
.pg-btn svg{width:14px;height:14px;flex:none}
.pg-btn:hover{transform:translateY(-2px);box-shadow:0 16px 26px -12px rgb(var(--pix-deep) / .95)}
.pg-btn--ghost{background:transparent;color:rgb(var(--pix-deep));border:1px solid rgb(var(--pix) / .55);box-shadow:none}
.pg-btn--ghost:hover{background:rgb(var(--pix) / .12)}
.pg-btn::after{content:'';position:absolute;top:-50%;left:-80%;width:45%;height:200%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .35),transparent);transform:rotate(25deg);transition:left .75s ease}
.pg-btn:hover::after{left:130%}

/* Chaves Pix copiáveis */
.pg-keys{display:flex;flex-direction:column;gap:.55rem}
.pg-key{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:.7rem;width:100%;padding:.55rem .6rem .55rem .55rem;border-radius:16px;text-align:left;cursor:pointer;background:linear-gradient(135deg,rgb(var(--creme-card)),rgb(var(--pix) / .08));border:1px solid rgb(var(--pix) / .35);box-shadow:0 10px 22px -18px rgb(var(--pix-deep) / .9);transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease,border-color .4s ease;font:inherit;color:rgb(var(--marrom-escuro))}
.pg-key::after{content:'';position:absolute;top:-50%;left:-70%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .55),transparent);transform:rotate(22deg);transition:left .8s ease;z-index:1;pointer-events:none}
.pg-key:hover{transform:translateY(-2px);border-color:rgb(var(--pix) / .75);box-shadow:0 18px 30px -18px rgb(var(--pix-deep) / .95)}
.pg-key:hover::after{left:135%}
.pg-key:active{transform:scale(.98)}
.pg-key:focus-visible{outline:2px solid rgb(var(--pix-deep));outline-offset:3px}
.pg-key-av{position:relative;z-index:2;flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font:italic 600 1.15rem/1 'Cormorant Garamond',Georgia,serif;color:#fff;background:linear-gradient(140deg,rgb(var(--pix-deep)),rgb(var(--pix)));box-shadow:0 8px 16px -10px rgb(var(--pix-deep));transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.pg-key-av{background:linear-gradient(120deg,rgb(var(--pix-deep)),rgb(var(--pix)))!important;padding:2px;overflow:hidden}.pg-key-av img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:inherit;display:block;transform:scale(1.9);transform-origin:50% 10%}
.pg-key:hover .pg-key-av{transform:rotate(-8deg) scale(1.08)}
.pg-key-info{position:relative;z-index:2;display:flex;flex-direction:column;min-width:0;flex:1}
.pg-key-name{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgb(var(--pix-deep));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-key-num{font-size:.95rem;font-weight:600;letter-spacing:.02em;color:rgb(var(--marrom-escuro));font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-key-act{position:relative;z-index:2;flex:none;display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .75rem;border-radius:9999px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;background:linear-gradient(120deg,rgb(var(--pix-deep)),rgb(var(--pix)));box-shadow:0 8px 16px -10px rgb(var(--pix-deep) / .95);transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .4s ease}
.pg-key:hover .pg-key-act{transform:scale(1.05)}
.pg-key-ico{width:14px;height:14px;flex:none}
.pg-key-ico--ok{display:none}
.pg-key-fill{position:absolute;inset:0;z-index:0;background:linear-gradient(120deg,rgb(var(--pix) / .22),rgb(var(--pix) / .08));transform:scaleX(0);transform-origin:left;pointer-events:none}
.pg-key.is-copied{border-color:rgb(var(--pix-deep))}
.pg-key.is-copied .pg-key-fill{animation:pgKeyFill 2.2s cubic-bezier(.2,.8,.2,1) forwards}
.pg-key.is-copied .pg-key-act{background:rgb(var(--pix-deep));animation:pgKeyPop .55s cubic-bezier(.34,1.56,.64,1)}
.pg-key.is-copied .pg-key-ico--copy{display:none}
.pg-key.is-copied .pg-key-ico--ok{display:block}
.pg-key.is-copied .pg-key-ico--ok path{stroke-dasharray:24;stroke-dashoffset:24;animation:pgKeyCheck .45s .1s ease forwards}
.pg-key.is-copied .pg-key-av{animation:pgKeyAv .7s cubic-bezier(.34,1.56,.64,1)}
.pg-key.is-failed .pg-key-num{-webkit-user-select:all;user-select:all;background:rgb(var(--pix) / .18);border-radius:4px}
@keyframes pgKeyFill{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes pgKeyPop{0%{transform:scale(.8)}100%{transform:scale(1)}}
@keyframes pgKeyCheck{to{stroke-dashoffset:0}}
@keyframes pgKeyAv{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
.pg-keys{container-type:inline-size;width:100%;min-width:0}
.pg-key{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.6rem;max-width:100%;box-sizing:border-box;padding:.6rem}
.pg-key-info{gap:.15rem}
.pg-key-name{font-size:8.5px;letter-spacing:.1em;line-height:1.3}
@container (max-width:260px){.pg-key-role{display:none}}
.pg-foot--col{flex-direction:column}
.pg-key-num{font-size:clamp(.82rem,4.2cqi,.98rem);overflow:hidden;text-overflow:ellipsis}
.pg-key-act{padding:.5rem .7rem}
@container (max-width:300px){.pg-key-act{padding:0;width:34px;height:34px;justify-content:center;font-size:0;letter-spacing:0;gap:0}.pg-key-av{width:32px;height:32px;border-radius:10px}.pg-key{gap:.5rem;padding:.5rem}}
.pg-key-hint{margin:.15rem 0 0;font-size:10px;letter-spacing:.08em;color:rgb(var(--marrom-light));text-align:center}
@media (prefers-reduced-motion: reduce){.pg-key,.pg-key-av,.pg-key-act{transition:none}.pg-key::after{display:none}.pg-key.is-copied .pg-key-fill,.pg-key.is-copied .pg-key-act,.pg-key.is-copied .pg-key-av,.pg-key.is-copied .pg-key-ico--ok path{animation:none;stroke-dashoffset:0}.pg-key.is-copied .pg-key-fill{transform:scaleX(1)}}

/* Barra de status */
.pg-live{position:relative;overflow:hidden;display:flex;align-items:center;gap:.9rem;max-width:640px;margin:3rem auto 0;padding:.9rem 1.4rem .9rem .9rem;border-radius:9999px;background:rgb(var(--creme-card) / .8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgb(var(--bege-medio) / .85);box-shadow:0 22px 44px -30px rgb(var(--marrom) / .5)}
.pg-live-ico{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgb(var(--dourado));transition:background .5s ease}
.pg-live-ico svg{width:18px;height:18px}
.pg-live[data-pg="pix"] .pg-live-ico{background:rgb(var(--pix-deep))}
.pg-live[data-pg="cartao"] .pg-live-ico{background:rgb(var(--caramelo))}
.pg-live-text{font-size:.8rem;line-height:1.5;color:rgb(var(--marrom));font-weight:400}
.pg-live.swap .pg-live-text{animation:pgSwap .6s cubic-bezier(.2,.8,.2,1)}
.pg-live.swap .pg-live-ico{animation:pgIcoPop .6s cubic-bezier(.34,1.56,.64,1)}
.pg-live.swap .pg-live-ico svg path{stroke-dasharray:24;animation:pgDraw .7s ease .15s backwards}
@keyframes pgSwap{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes pgDraw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.pg-live-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,rgb(var(--caramelo)),rgb(var(--dourado)))}
.pg-live.is-auto .pg-live-bar{animation:pgBar var(--pg-cycle,4800ms) linear forwards}
@keyframes pgBar{to{transform:scaleX(1)}}
.pg-help{margin-top:1.25rem;text-align:center;font-size:.78rem;color:rgb(var(--marrom-light))}
.pg-help a{color:rgb(var(--caramelo));font-weight:600;background:linear-gradient(currentColor,currentColor) left bottom / 0 1px no-repeat;transition:background-size .45s cubic-bezier(.22,1,.36,1)}
.pg-help a:hover{background-size:100% 1px}
.pg-dots,.pg-swipe{display:none}
.pg-confetti{position:fixed;width:0;height:0;pointer-events:none;z-index:99990}
.pg-confetti i{position:absolute;left:0;top:0;border-radius:2px}

/* Celular e tablet: carrossel deslizante */
@media (max-width:899.98px){
  .pg-deck{display:flex;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;gap:1rem;padding:1.25rem 9vw 2rem;margin:0 -1.5rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pg-deck::-webkit-scrollbar{display:none}
  .pg-deck{padding:1rem calc((100vw - min(74vw,320px)) / 2) 1.25rem;gap:.85rem}
  .pg-slot{flex:0 0 min(74vw,320px);scroll-snap-align:center}
  .pg-card{min-height:0}
  .pg-visual{height:180px}
  .pg-deck.has-active .pg-slot:not(.is-active) .pg-card{--sc:.92;opacity:.6}
  .pg-dots{display:flex;justify-content:center;align-items:center;gap:.45rem;margin-top:.25rem}
  .pg-dots button{width:8px;height:8px;padding:0;border:0;border-radius:9999px;background:rgb(var(--bege-medio));cursor:pointer;transition:width .4s cubic-bezier(.22,1,.36,1),background .4s ease}
  .pg-dots button.is-on{width:24px;background:rgb(var(--caramelo))}
  .pg-swipe{display:block;margin-top:.6rem;text-align:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--marrom-light))}
  .pg-live{border-radius:1.25rem;margin-top:1.5rem}
  /* Cards compactos no celular: ~30% mais estreitos e ~40% mais baixos */
  .pg-deck{padding:.75rem calc((100vw - min(82vw,320px)) / 2) 1rem;gap:.7rem}
  .pg-slot{flex:0 0 min(82vw,320px)}
  .pg-card{border-radius:1.15rem}
  .pg-visual{height:190px}
  .pg-visual>*{scale:.88}
  .pg-body{gap:.35rem;padding:.75rem .8rem .85rem}
  .pg-title{font-size:1.35rem}
  .pg-desc{font-size:.68rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .pg-feats{gap:.25rem}
  .pg-feats li{font-size:7.5px;padding:.25rem .5rem;letter-spacing:.1em}
  .pg-foot{padding-top:.55rem;gap:.4rem}
  .pg-keys{gap:.35rem}
  .pg-key{padding:.4rem;gap:.4rem;border-radius:.8rem}
  .pg-key-av{width:26px;height:26px;border-radius:8px;font-size:.9rem}
  .pg-key-name{font-size:7.5px}
  .pg-key-act{padding:.3rem}
  .pg-key-act .pg-key-ico{width:11px;height:11px}
  .pg-key-num{font-size:.74rem;letter-spacing:0;overflow:visible;text-overflow:clip}
  .pg-key{padding:.35rem;gap:.35rem}
  .pg-key-hint{font-size:8.5px}
  /* Card inteiro visível no celular: sem subir o card selecionado (antes cortava o topo) */
  .pg-deck{padding-top:1.25rem;padding-bottom:1.5rem}
  .pg-slot.is-active .pg-card,.pg-slot:hover .pg-card{--ty:0px}
}
@media (min-width:1440px){
  .pg-card{min-height:600px}
  .pg-visual{height:280px}
}

@media (prefers-reduced-motion:reduce){
  .pg-orb,.pg-float-ico,.pg-halo,.pg-note,.pg-note::after,.pg-coin,.pg-twinkle,.pg-pix-ring,.pg-qr,.pg-qr-svg rect,.pg-pix-logo,.pg-scan,.pg-cc,.pg-cc-holo,.pg-cc-star,.pg-cc-shadow,.pg-wave,.pg-border,.pg-ok i::after,.lx-shimmer,.lx-line,#statsSection::after,.footer-logo{animation:none!important}
  .pg-card{transition:none}
}

/* ===== V12 · Cards de pagamento: textos maiores, espaçamento enxuto e novo cartão do Pix ===== */
.pg-section .pg-title,.pg-section .pg-desc,.pg-section .pg-feats,.pg-section .pg-key-hint{margin:0}
.pg-section .pg-card{min-height:0}
.pg-section .pg-visual{height:220px}
.pg-section .pg-body{gap:.75rem;padding:1.5rem 1.6rem 1.6rem}
.pg-section .pg-kicker{font-size:11.5px;letter-spacing:.22em;font-weight:700}
.pg-section .pg-title{font-size:2.35rem;line-height:1}
.pg-section .pg-desc{font-size:1rem;line-height:1.6;font-weight:400;color:rgb(var(--marrom-medio))}
.pg-section .pg-feats{gap:.45rem;margin-top:.1rem}
.pg-section .pg-feats li{font-size:11px;letter-spacing:.1em;padding:.45rem .85rem}
.pg-section .pg-foot{padding-top:1rem;margin-top:auto}
.pg-section .pg-ok{font-size:13.5px;gap:.6rem}
.pg-section .pg-ok i{width:26px;height:26px;font-size:12px}
.pg-section .pg-num{font-size:2rem}

/* Cartão do Pix (estilo comprovante premium) */
.pg-section .pg-keys{container-type:normal;gap:.7rem}
.pg-section .pg-key{display:flex;flex-direction:column;align-items:stretch;gap:.85rem;padding:1rem;border-radius:20px;background:radial-gradient(120% 90% at 100% 0%,rgb(var(--pix) / .16),transparent 60%),linear-gradient(160deg,rgb(var(--creme-card)),rgb(var(--creme-claro)));border:1px solid rgb(var(--pix) / .38);box-shadow:0 18px 34px -24px rgb(var(--pix-deep) / .85),inset 0 1px 0 rgb(255 255 255 / .9)}
.pg-section .pg-key:hover{transform:translateY(-3px);border-color:rgb(var(--pix) / .7)}
.pg-key-head{position:relative;z-index:2;display:flex;align-items:center;gap:.85rem;min-width:0}
.pg-section .pg-key-av{width:58px;height:58px;border-radius:18px;padding:2px;flex:none;background:conic-gradient(from var(--pg-ang),rgb(var(--pix)),rgb(var(--dourado)),rgb(var(--pix-deep)),rgb(var(--pix)))!important;animation:pgSpin 7s linear infinite;box-shadow:0 10px 20px -12px rgb(var(--pix-deep) / .9)}
.pg-section .pg-key-av img{width:100%;height:100%;object-fit:contain;object-position:center;padding:7px;border-radius:16px;background:rgb(var(--creme-card));transform:none;box-sizing:border-box}
.pg-section .pg-key-info{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.pg-section .pg-key-name{font:600 1.35rem/1.05 'Cormorant Garamond',Georgia,serif;letter-spacing:.01em;text-transform:none;color:rgb(var(--marrom));white-space:normal}
.pg-key-type{display:inline-flex;align-items:center;gap:.4rem;width:max-content;max-width:100%;padding:.28rem .6rem;border-radius:9999px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--pix-deep));background:rgb(var(--pix) / .13);border:1px solid rgb(var(--pix) / .28)}
.pg-key-type svg{width:12px;height:12px;flex:none}
.pg-key-mid{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.85rem .5rem .8rem;border-radius:14px;background:rgb(var(--creme-card) / .85);border:1.5px dashed rgb(var(--pix) / .45);text-align:center}
.pg-key-cap{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--marrom-light))}
.pg-section .pg-key-num{font-size:1.6rem;font-weight:700;line-height:1.1;letter-spacing:.02em;color:rgb(var(--marrom-escuro));font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;overflow:visible;text-overflow:clip}
.pg-section .pg-key-act{width:100%;justify-content:center;gap:.55rem;padding:.9rem 1rem;font-size:12.5px;letter-spacing:.14em;height:auto;box-shadow:0 14px 24px -14px rgb(var(--pix-deep) / .95)}
.pg-section .pg-key-act .pg-key-ico{width:18px;height:18px}
.pg-section .pg-key:hover .pg-key-act{transform:translateY(-1px)}
.pg-section .pg-key.is-copied .pg-key-mid{border-style:solid;border-color:rgb(var(--pix-deep) / .6);background:rgb(var(--pix) / .1)}
.pg-section .pg-key.is-copied .pg-key-act{background:linear-gradient(120deg,rgb(var(--pix-deep)),rgb(var(--caramelo)))}
.pg-section .pg-key-hint{font-size:12.5px;line-height:1.55;letter-spacing:.01em;color:rgb(var(--marrom-light));text-align:center}
.pg-section .pg-key-hint b{font-weight:600;color:rgb(var(--marrom))}

@media (max-width:899.98px){
  .pg-section .pg-visual{height:190px}
  .pg-section .pg-deck{align-items:flex-start}
  .pg-section .pg-card{height:auto}
  .pg-section .pg-foot{margin-top:.35rem}
  .pg-section .pg-body{gap:.6rem;padding:1.1rem 1.15rem 1.2rem}
  .pg-section .pg-kicker{font-size:10.5px;letter-spacing:.18em}
  .pg-section .pg-title{font-size:1.9rem}
  .pg-section .pg-desc{font-size:.95rem;line-height:1.55;display:block;-webkit-line-clamp:unset;overflow:visible}
  .pg-section .pg-feats li{font-size:10px;padding:.38rem .7rem;letter-spacing:.08em}
  .pg-section .pg-foot{padding-top:.8rem;gap:.6rem}
  .pg-section .pg-ok{font-size:12.5px}
  .pg-section .pg-num{font-size:1.7rem}
  .pg-section .pg-keys{gap:.55rem}
  .pg-section .pg-key{padding:.85rem;gap:.7rem;border-radius:18px}
  .pg-section .pg-key-av{width:50px;height:50px;border-radius:15px}
  .pg-section .pg-key-av img{border-radius:13px;padding:6px}
  .pg-section .pg-key-name{font-size:1.2rem}
  .pg-key-type{font-size:9.5px;padding:.25rem .5rem}
  .pg-key-mid{padding:.7rem .4rem}
  .pg-key-cap{font-size:10px}
  .pg-section .pg-key-num{font-size:1.4rem}
  .pg-section .pg-key-act{padding:.8rem;font-size:11.5px}
  .pg-section .pg-key-hint{font-size:11.5px}
}
@media (min-width:1440px){.pg-section .pg-visual{height:250px}}
@media (prefers-reduced-motion:reduce){.pg-section .pg-key-av{animation:none!important}}

/* V4 — depoimentos demonstrativos e identidade neutra quente */
.review-disclosure{display:inline-flex;align-items:center;justify-content:center;gap:9px;max-width:760px;margin:18px auto 0;padding:10px 16px;border:1px solid rgba(232,213,200,.45);border-radius:999px;background:rgba(64,50,41,.28);color:#fff;font-size:12px;line-height:1.5;text-align:center}
.review-disclosure .ms{font-size:17px;color:#E8D5C8}
.t-card{--tc:185,154,128!important}
.t-card:nth-child(2){--tc:214,189,165!important}
.t-card:nth-child(3){--tc:158,157,126!important}
.t-card:nth-child(4){--tc:198,167,139!important}
.t-card:nth-child(1) .t-avatar,.t-card:nth-child(3) .t-avatar,.t-card:nth-child(4) .t-avatar{background:linear-gradient(135deg,#F3EAE0,#BFA58E)!important;color:#49392F!important}
.t-card:nth-child(2) .t-avatar{background:linear-gradient(135deg,#E8D5C8,#B58E7E)!important;color:#49392F!important}
@media(max-width:640px){.review-disclosure{border-radius:16px;margin-left:12px;margin-right:12px;padding:10px 12px}}

</style>

<style id="gpt-v2-brand-and-background-system">
/* ================================================================
   GPT v2 — SISTEMA REUTILIZÁVEL DE IDENTIDADE E FUNDOS
   Para futuras adaptações, substitua apenas os quatro endereços abaixo
   (e os endereços correspondentes em SITE_CONFIG.IMG, no script).
   fundo01 = Filosofia | fundo02 = Catálogo | fundo03 = Avaliações
   fundo04 = imagem dentro do formulário | banner = FAQ
   ================================================================ */
:root{
  --brand-espresso:#514237;
  --brand-brown:#6B5849;
  --brand-taupe:#927D6B;
  --brand-sand:#D8C7B5;
  --brand-cream:#F3EAE0;
  --brand-ivory:#FFFCF8;
  --brand-sage:#89917A;
  --violet:#927B68;
  --violet-600:#A58D78;
  --violet-deep:#655347;
  --lilac:#E8DCCE;
  --lilac-soft:#F0E7DE;
  --lavender-50:#FFFCF8;
  --lavender-100:#F3EAE0;
  --lavender-200:#E8DCCE;
  --ivory:#FFFCF8;
  --ivory-2:#F3EAE0;
  --ink:#493D33;
  --ink-2:#65564A;
  --muted:#83766B;
  --line:rgba(81,66,55,.14);
  --line-strong:rgba(81,66,55,.27);
  --gold:#B99A70;
  --gold-soft:#E9DCCB;
  --cream:#F3EAE0;
  --nude:#E8DCCE;
  --nude-deep:#D8C7B5;
  --rose-gold:#B99A82;
  --rose-gold-soft:#E8D8C9;
  --grad-brand:linear-gradient(135deg,#B99A78 0%,#927B68 52%,#655347 100%);
  --grad-dark:linear-gradient(160deg,#655347 0%,#514237 58%,#382D25 100%);
  --grad-gold:linear-gradient(135deg,#E9DCCB 0%,#B99A70 55%,#927B58 100%);
  --shadow-sm:0 2px 12px rgba(81,66,55,.07);
  --shadow-md:0 14px 34px -12px rgba(81,66,55,.20);
  --shadow-lg:0 30px 70px -24px rgba(81,66,55,.28);
  --shadow-glow:0 18px 40px -12px rgba(146,123,104,.30);
  --gpt-bg-fundo01:url('imagens/fundo01.webp');
  --gpt-bg-fundo02:url('imagens/fundo02.webp');
  --gpt-bg-fundo03:url('imagens/fundo03.webp');
  --gpt-bg-fundo04:url('imagens/fundo04.webp');
  --gpt-bg-banner:url('imagens/banner2.webp');
}

/* Filosofia do cuidado — fundo01 */
.essence-bg{background-image:var(--gpt-bg-fundo01)!important;background-position:center!important;background-size:cover!important}
.essence-bg::after{background:linear-gradient(100deg,rgba(56,45,36,.66) 0%,rgba(75,61,49,.48) 52%,rgba(56,45,36,.64) 100%)!important}
.essence .display,.essence .lead,.essence .text,.essence .pillar span{color:#FFFCF8}
.essence .display em{color:#E9DCCB}
.essence .eyebrow.on-dark{color:#E9DCCB}

/* Catálogo de serviços — fundo02 */
.catalog-bg{background-image:var(--gpt-bg-fundo02)!important;background-position:center 42%!important;background-size:cover!important}
.catalog-bg::after{background:linear-gradient(180deg,rgba(255,252,248,.76),rgba(255,252,248,.60) 48%,rgba(243,234,224,.72))!important}

/* Área de experiências/avaliações — fundo03 */
.testimonials{background:linear-gradient(160deg,rgba(62,49,39,.56),rgba(62,49,39,.48)),var(--gpt-bg-fundo03) center/cover no-repeat!important}
.testimonials::before{background:radial-gradient(circle,rgba(185,154,112,.18),transparent 65%)!important}
.testimonials::after{background:radial-gradient(circle,rgba(255,252,248,.15),transparent 65%)!important}
.testimonials .display{color:#FFFCF8!important}
.testimonials .display em{color:#E9DCCB!important}
.testimonials .lead{color:rgba(255,252,248,.96)!important}
.testimonials .section-head::before{background:radial-gradient(ellipse at 50% 50%,rgba(56,45,36,.24),transparent 72%)!important}

/* Formulário: fundo04 pertence ao próprio formulário, não ao painel de chamada */
.contact{background:linear-gradient(180deg,rgba(255,252,248,.94),rgba(243,234,224,.92))!important}
.booking-aside{background:linear-gradient(155deg,#74604F,#514237)!important}
.booking-aside::before{background:none!important;opacity:0!important}
.booking-aside .display,.booking-aside .display em{color:#FFFCF8!important}
.booking-aside .text{color:rgba(255,252,248,.94)!important}
.booking-aside .display,.booking-aside .text{text-shadow:0 1px 12px rgba(45,35,28,.24)!important}
.contact-tile{background:rgba(255,252,248,.12)!important;border-color:rgba(255,252,248,.28)!important}
.contact-tile .ic{background:rgba(255,252,248,.16)!important}
.booking-form{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,rgba(255,252,248,.93),rgba(255,252,248,.88)),var(--gpt-bg-fundo04) center/cover no-repeat!important;border-left:1px solid rgba(81,66,55,.10)}
.booking-form>*{position:relative;z-index:1}
.booking-form .input{background:rgba(255,252,248,.94)!important;border-color:rgba(81,66,55,.20)!important}

/* FAQ — banner da marca */
.faq{background:linear-gradient(180deg,rgba(255,252,248,.91),rgba(243,234,224,.88)),var(--gpt-bg-banner) center/cover no-repeat!important}

/* Logo no hero: halo champagne/bege, sem brilho lilás */
.hero-logo::before{background:radial-gradient(circle,rgba(185,154,112,.30),rgba(232,220,206,.38) 46%,rgba(232,220,206,0) 74%)!important}
.hero-logo img{filter:drop-shadow(0 20px 30px rgba(81,66,55,.20))!important}
.halo{border-color:rgba(146,123,104,.20)!important}
.halo.h2{border-color:rgba(185,154,112,.34)!important}
.halo.h3{border-color:rgba(146,123,104,.12)!important}

/* Retrato da profissional: base neutra atrás da foto e no verso do cartão */
.portrait-deco{border-color:rgba(185,154,112,.72)!important}
.portrait-ring{border-color:rgba(146,123,104,.42)!important}
.portrait-ring::after{border-color:rgba(146,123,104,.34)!important}
.flip-face{box-shadow:0 30px 60px -26px rgba(81,66,55,.28),0 0 0 1px rgba(146,123,104,.25)!important}
.flip-front{background:radial-gradient(120% 80% at 50% 20%,#FFFCF8 0%,#E9DCCB 48%,#BDA58F 100%)!important}
.flip-front::after{background:linear-gradient(0deg,rgba(65,51,40,.22),transparent)!important}
.flip-back{background:radial-gradient(circle at 50% 42%,#FFFCF8 0%,#F3EAE0 55%,#D8C7B5 100%)!important}
.flip-back::after{border-color:rgba(146,123,104,.36)!important}

/* Preloader: paleta exclusiva da marca, sem ametista/lilás */
:root{--loader-bg:#FFFCF8;--loader-primary:#927B68;--loader-secondary:#D8C7B5;--loader-accent:#B99A70;--loader-text:#514237}
#site-preloader{background:radial-gradient(circle at 50% 44%,#fff 0%,#FFFCF8 42%,#EDE2D6 100%)!important}
.pl-ring{border-top-color:#927B68!important;border-right-color:#B99A70!important}
.pl-particles i{background:#B99A70!important;box-shadow:0 0 10px rgba(185,154,112,.48)!important}
.pl-caption,.pl-line{color:#655347!important}
.pl-line,.pl-line::after{background-color:#B99A70!important}

/* Botões, ícones e detalhes — sistema unificado de tons terrosos */
.btn-primary{background:var(--grad-brand)!important;box-shadow:0 12px 28px rgba(81,66,55,.22)!important}
.btn-primary:hover{box-shadow:0 18px 34px rgba(81,66,55,.28)!important}
.btn-outline{color:#655347!important;border-color:rgba(101,83,71,.34)!important}
.btn-outline:hover,.btn-glass:hover{border-color:#927B68!important;color:#514237!important}
.wa-float{background:linear-gradient(135deg,#927B68,#655347)!important;box-shadow:0 14px 30px -8px rgba(81,66,55,.38),0 0 0 1px rgba(185,154,112,.55)!important}
.wa-float::before{border-color:#D8C7B5!important}
.wa-tip,.toast{background:#514237!important}
.to-top{color:#655347!important;border-color:rgba(81,66,55,.22)!important}
.to-top:hover{background:#927B68!important;color:#fff!important}
.eyebrow{color:#806B59!important;border-color:rgba(101,83,71,.24)!important}
.eyebrow.on-dark{color:#E9DCCB!important}
.stat b,.hero-copy .lead strong,.form-logo div span,.field label .ms,.field label{color:#806B59!important}
.pillar .ic,.contact-tile .ic{color:#E9DCCB!important}
.footer{background:#514237!important}
.footer::before{background:radial-gradient(circle,rgba(185,154,112,.18),transparent 60%)!important}
.name-card .ms{color:#B99A70!important}
::selection{background:#E8DCCE!important;color:#514237!important}
:focus-visible{outline-color:#927B68!important}

/* Redução de movimento respeitada e sem perda das animações originais */
@media(prefers-reduced-motion:reduce){.pl-ring,.pl-blob,.pl-particles i{animation:none!important}}
@media(max-width:760px){
 .booking-form{border-left:0;border-top:1px solid rgba(81,66,55,.10)}
 .testimonials{background-position:center!important}
}

/* =========================================================
   GPT v3 — correções de identidade, responsividade e seções
   ========================================================= */
:root{
 --plum-950:#332720;--plum-900:#59483D;--plum-800:#6B5548;--plum-700:#80695B;
 --violet:#927B68;--violet-600:#A58D79;--violet-deep:#655347;
 --lilac:#D6BDA5;--lilac-soft:#E8D5C8;--lavender-50:#FFFCF8;--lavender-100:#F3EAE0;--lavender-200:#E8D5C8;
 --ivory:#FFFCF8;--ivory-2:#F3EAE0;--ink:#49392F;--ink-2:#655348;--muted:#85766B;
 --line:rgba(89,72,61,.14);--line-strong:rgba(89,72,61,.27);
 --grad-brand:linear-gradient(135deg,#B99A70 0%,#927B68 48%,#655347 100%);
 --shadow-glow:0 18px 40px -12px rgba(146,123,104,.28);
}
/* Categoria: elimina brilho e halo lilás remanescentes. */
.cc-spot{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(185,154,112,.26),transparent 62%)!important}
.cat-bridge{background:linear-gradient(180deg,rgba(185,154,112,.32),rgba(216,199,181,.22),rgba(255,255,255,.48))!important}
.cat-bridge::before{background:linear-gradient(180deg,rgba(185,154,112,.82),rgba(146,123,104,.72))!important;box-shadow:0 0 10px rgba(185,154,112,.42)!important}
.cat-bridge::after{box-shadow:0 0 12px 2px rgba(185,154,112,.55)!important}
.cat-deck .cat-card.is-active{box-shadow:0 18px 38px -24px rgba(81,66,55,.5),0 0 0 2px rgba(185,154,112,.72)!important}
.cat-stage,.cat-stage::before,.cat-stage::after,.cat-link,.cat-node,.cat-bridge{--cat-accent:#B99A70}
.cat-stage::before{background:linear-gradient(135deg,rgba(185,154,112,.24),rgba(216,199,181,.20),rgba(185,154,112,.24))!important}
.cat-stage::after{background:linear-gradient(90deg,transparent,#B99A70 20%,#E8D5C8 50%,#B99A70 80%,transparent)!important;box-shadow:0 0 12px rgba(185,154,112,.32)!important}
.cat-node{border-color:#B99A70!important;box-shadow:0 0 0 4px rgba(185,154,112,.18)!important}
.stage-scan::before{background:linear-gradient(180deg,transparent 0%,rgba(216,199,181,0) 70%,rgba(216,199,181,.16) 96%,rgba(255,255,255,.45) 100%)!important}
.stage-steps span.on{background:linear-gradient(90deg,#927B68,#B99A70)!important}
/* Cards de serviço, preços, botões e popups */
.price + .price,.price + .price + .price{background:linear-gradient(135deg,#F3EAE0,#E8D5C8)!important}
.price + .price small,.price b,.modal-close,.info-box h4 .ms,.info-box li .ms,.change-link{color:#806052!important}
.modal-footer{background:linear-gradient(135deg,#FFFCF8,#F3EAE0)!important;border-color:rgba(89,72,61,.18)!important}
.bm-selected{background:linear-gradient(135deg,#FFFCF8,#F3EAE0)!important;border-color:rgba(89,72,61,.2)!important}
.bm-selected .ic{background:linear-gradient(135deg,#927B68,#655347)!important}
.choice{border-color:rgba(146,123,104,.22)!important}
.choice.is-active{background:linear-gradient(135deg,#927B68,#655347)!important;box-shadow:0 12px 26px rgba(81,66,55,.2)!important}
.modal{background:rgba(51,39,32,.68)!important}
.modal-hero::after{background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.55) 30%,rgba(51,39,32,0) 60%,rgba(51,39,32,.22) 100%)!important}
.sc-media::after{background:linear-gradient(0deg,rgba(51,39,32,.46),transparent 48%)!important}
.sc-time{background:rgba(51,39,32,.52)!important}
/* Corrige painéis de contato: fundo04 aplicado no formulário, nunca atrás do título/contatos. */
.contact{padding-block:clamp(56px,7vw,100px)!important;background:linear-gradient(180deg,#FFFCF8,#F3EAE0)!important}
.booking-shell{display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;align-items:stretch!important;width:100%;max-width:1120px;margin:0 auto;border-radius:28px;overflow:hidden;box-shadow:0 24px 70px -34px rgba(51,39,32,.32)}
.booking-aside{min-width:0;padding:clamp(26px,4vw,52px)!important;gap:20px!important;background:linear-gradient(155deg,#74604F,#514237)!important}
.booking-aside .display{font-size:clamp(30px,3.2vw,44px)!important;line-height:1.08!important;overflow-wrap:anywhere}
.booking-aside .text{font-size:clamp(14px,1.25vw,16px)!important;line-height:1.7!important}
.contact-tiles{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
.contact-tile{min-width:0;width:100%;padding:13px!important}
.contact-tile>div{min-width:0;overflow-wrap:anywhere}
.booking-form{min-width:0;width:100%;padding:clamp(24px,4vw,48px)!important;display:flex;flex-direction:column;gap:18px;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,rgba(255,252,248,.90),rgba(255,252,248,.82)),url('imagens/fundo04.webp') center/cover no-repeat!important;border:0!important}
.booking-form>*{position:relative;z-index:1}
.booking-form .input{width:100%;min-width:0;background:rgba(255,252,248,.96)!important;border-color:rgba(89,72,61,.22)!important}
.booking-form .field{min-width:0;width:100%}
.booking-form textarea{resize:vertical;min-height:100px}
.booking-form .form-logo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.booking-form .form-logo img{width:66px;height:58px;object-fit:contain;flex:none}
.booking-form .btn{width:100%;max-width:100%;white-space:normal;line-height:1.3;padding-inline:16px}
/* Avaliações: conserva o fundo03 e não exibe depoimentos herdados de outra cliente. */
.testimonials{background:linear-gradient(160deg,rgba(62,49,39,.56),rgba(62,49,39,.48)),url('imagens/fundo03.webp') center/cover no-repeat!important}
.testimonials .display em{color:#E9DCCB!important}
.reviews-empty{display:flex;align-items:center;gap:20px;max-width:850px;margin:38px auto 0;padding:24px 28px;border:1px solid rgba(255,255,255,.22);border-radius:22px;background:rgba(255,252,248,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#FFFCF8}
.reviews-empty-icon{width:54px;height:54px;flex:none;border-radius:16px;display:grid;place-items:center;background:rgba(233,220,203,.2);color:#E9DCCB}
.reviews-empty-icon .ms{font-size:28px}
.reviews-empty>div{flex:1;min-width:0}
.reviews-empty strong{font:600 23px/1.15 var(--font-display)}
.reviews-empty p{margin:6px 0 0;color:rgba(255,252,248,.88);font-size:14px;line-height:1.55}
.reviews-empty .btn{flex:none}
/* Formas de pagamento: conteúdo neutro e reaproveitável. */
.payments-vb{background:linear-gradient(180deg,#FFFCF8,#F3EAE0)!important;padding-block:clamp(56px,7vw,96px)!important}
.payments-vb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}
.payment-vb-card{min-width:0;overflow:hidden;border:1px solid rgba(89,72,61,.14);border-radius:24px;background:#fff;box-shadow:0 14px 36px -24px rgba(51,39,32,.3);transition:transform .35s ease,box-shadow .35s ease}
.payment-vb-card:hover{transform:translateY(-5px);box-shadow:0 24px 48px -28px rgba(51,39,32,.35)}
.payment-vb-visual{height:150px;display:grid;place-items:center;color:#FFFCF8;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,#927B68,#655347)}
.payment-vb-visual.pix{background:linear-gradient(135deg,#9B8B72,#6D5B4D)}
.payment-vb-visual.card{background:linear-gradient(135deg,#B99A70,#806052)}
.payment-vb-visual .ms{font-size:66px;filter:drop-shadow(0 8px 14px rgba(51,39,32,.2))}
.payment-vb-content{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px}
.payment-vb-kicker{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#927B68}
.payment-vb-content h3{margin:0;font:600 30px/1.05 var(--font-display);color:#49392F}
.payment-vb-content p{margin:0;color:#655348;font-size:14px;line-height:1.65}
.payment-vb-note,.payment-vb-action{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:9px 12px;border-radius:999px;background:#F3EAE0;color:#655347;font-size:11px;font-weight:600;line-height:1.35}
.payment-vb-action{background:#927B68;color:#fff;transition:background .2s,transform .2s}
.payment-vb-action:hover{background:#655347;transform:translateY(-1px)}
.payments-vb-help{text-align:center;margin:26px auto 0;color:#655348;font-size:14px}
.payments-vb-help a{color:#806052;font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* Corrige links de navegação e estados ativos para não herdar o roxo anterior. */
.nav a:hover,.nav a.is-active,.brand-name span,.mobile-panel nav a .ms,.icon-btn,.faq-q .ic,.faq-item.is-open .faq-q .ic{color:#806052!important}
.faq-item.is-open .faq-q .ic{background:#927B68!important;color:#fff!important}
.btn-outline{background:#FFFCF8!important;color:#655347!important;border-color:rgba(101,83,71,.34)!important}
.btn-outline:hover{background:#F3EAE0!important;border-color:#927B68!important}
.wa-float{background:linear-gradient(135deg,#927B68,#655347)!important;box-shadow:0 12px 28px rgba(81,66,55,.3)!important}
@media(max-width:900px){
 .booking-shell{grid-template-columns:minmax(0,1fr)!important;max-width:720px}
 .booking-aside,.booking-form{padding:clamp(24px,5vw,38px)!important}
 .payments-vb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .payment-vb-card:last-child{grid-column:1/-1;max-width:calc(50% - 11px);width:100%;justify-self:center}
}
@media(max-width:620px){
 .booking-shell{border-radius:22px}
 .booking-aside,.booking-form{padding:24px 20px!important}
 .booking-aside .display{font-size:clamp(29px,8vw,36px)!important}
 .contact-tile{gap:10px!important}
 .contact-tile span:not(.ic){overflow-wrap:anywhere}
 .reviews-empty{align-items:flex-start;flex-wrap:wrap;padding:20px;margin-top:26px}
 .reviews-empty>div{flex:1 1 calc(100% - 76px)}
 .reviews-empty .btn{width:100%;justify-content:center}
 .payments-vb-grid{grid-template-columns:minmax(0,1fr);gap:16px}
 .payment-vb-card:last-child{grid-column:auto;max-width:none}
 .payment-vb-visual{height:120px}
 .payment-vb-content{padding:20px}
 .booking-form .form-logo{gap:10px}
}


/* ==========================================================
   GPT v5 — ACABAMENTO DA PALETA E POSIÇÃO DO FUNDO 04
   Padrão reutilizável: menu de categorias usa somente tons
   creme/champagne/taupe/marrom; nunca usar violeta/lilás.
   fundo04 pertence ao painel lateral esquerdo .booking-aside,
   e não ao formulário .booking-form.
   ========================================================== */
.cat-card{background:#59483D!important;box-shadow:0 18px 40px -22px rgba(81,66,55,.42)!important}
.cat-card.is-active{box-shadow:0 24px 52px -24px rgba(89,72,61,.52),0 0 0 1px rgba(255,255,255,.35)!important}
.cc-shade{background:linear-gradient(180deg,rgba(52,40,32,.22) 0%,rgba(52,40,32,.02) 30%,rgba(52,40,32,.30) 55%,rgba(43,31,25,.88) 100%)!important}
.cat-card.is-active .cc-shade{background:linear-gradient(180deg,rgba(52,40,32,.16) 0%,rgba(52,40,32,0) 30%,rgba(89,72,61,.22) 55%,rgba(57,43,34,.91) 100%)!important}
.cc-spot{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(232,213,200,.30),transparent 62%)!important}
.cat-card.is-active .cc-ring{background:conic-gradient(from var(--ang),rgba(232,213,200,.12),#E8D5C8,#D6BDA5,rgba(255,252,248,.95),#D6BDA5,rgba(232,213,200,.12) 70%)!important}
.cat-card:focus-visible{outline-color:#D6BDA5!important}
.cc-icon{background:rgba(255,252,248,.16)!important;border-color:rgba(255,252,248,.42)!important}
.cat-card.is-active .cc-icon{background:linear-gradient(135deg,#E8D5C8,#D6BDA5)!important;border-color:rgba(255,252,248,.85)!important}
.cat-card.is-active .cc-icon .ms{color:#59483D!important}
.cc-kicker{color:#F3EAE0!important}
.cat-node{background:#D6BDA5!important;box-shadow:0 0 0 4px rgba(214,189,165,.35),0 0 14px rgba(146,123,104,.36)!important}
.cat-bridge{background:linear-gradient(180deg,rgba(214,189,165,.42),rgba(243,234,224,.38) 55%,rgba(255,252,248,.58))!important}
.cat-bridge::before{background:linear-gradient(180deg,rgba(232,213,200,.95),rgba(146,123,104,.72))!important;box-shadow:0 0 10px rgba(214,189,165,.55)!important}
.cat-bridge::after{box-shadow:0 0 12px 2px rgba(214,189,165,.72)!important}
.stage-kicker,.stage-head h3 em,.stage-count strong,.stage-count b{color:#927B68!important}
.stage-thumb .ms{background:linear-gradient(135deg,#927B68,#59483D)!important}
.cc-cta .live{background:#E8D5C8!important}
.cat-stage::after{background:linear-gradient(90deg,transparent,#D6BDA5 20%,#E8D5C8 50%,#D6BDA5 80%,transparent)!important;box-shadow:0 0 14px 1px rgba(214,189,165,.52)!important}

/* A imagem 04 é a arte de fundo do painel de apresentação à esquerda.
   O formulário de campos permanece limpo, claro e legível à direita. */
.booking-aside{position:relative;isolation:isolate;background:linear-gradient(145deg,#59483D,#76604F)!important}
.booking-aside::before{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;
 background-image:linear-gradient(180deg,rgba(55,42,34,.48),rgba(55,42,34,.68)),url('imagens/fundo04.webp')!important;
 background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;opacity:1!important}
.booking-form{background:#FFFCF8!important;background-image:none!important}
.booking-aside .display em{color:#E8D5C8!important}
.booking-aside .contact-tile{background:rgba(255,252,248,.14)!important;border-color:rgba(255,252,248,.28)!important}
.booking-aside .contact-tile .ic{background:rgba(232,213,200,.22)!important;border-color:rgba(232,213,200,.45)!important;color:#F3EAE0!important}
.booking-aside .aside-note .ms{color:#E8D5C8!important}
@media(max-width:760px){
 .booking-aside{padding:36px 26px!important;min-height:440px}
 .booking-form{padding:34px 24px!important}
}

</style>


<!-- GPT | V.B Massoterapia | v8 | Ajuste equilibrado de contraste da miniatura Pix -->
<style id="vb-v6-faixa-e-pix">
/* V6 — remover qualquer resíduo roxo da faixa animada abaixo do banner. */
.ribbon{
  background:linear-gradient(105deg,#49392F 0%,#655347 48%,#806052 100%) !important;
  color:#FFFCF8 !important;
}
.ribbon::before{background:linear-gradient(90deg,#49392F,rgba(73,57,47,0)) !important}
.ribbon::after{background:linear-gradient(-90deg,#806052,rgba(128,96,82,0)) !important}
.marquee-item,.marquee-item span{color:#FFFCF8}
.marquee-item .ms{color:#E9DCCB !important}
.marquee-sep{color:#D6BDA5 !important}
/* V7 — correção definitiva da miniatura Pix.
   IMPORTANTE: #formas-pagamento já é a própria seção .pg-section; portanto,
   o seletor correto é #formas-pagamento .pg-key-av (sem .pg-section intermediário).
   isolation cria o contexto de composição; multiply funde o branco da imagem
   com o marrom do suporte em vez de exibir um retângulo branco. */
#formas-pagamento .pg-key-av{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:#49392F !important;
  background-image:linear-gradient(145deg,#806052 0%,#49392F 100%) !important;
  border:1px solid rgba(255,252,248,.38) !important;
  box-shadow:0 10px 22px -10px rgba(51,39,32,.88),0 0 0 3px rgba(89,72,61,.20) !important;
}
#formas-pagamento .pg-key-av img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:#59483D !important;
  mix-blend-mode:multiply !important;
  filter:contrast(1.12) brightness(.92) !important;
  padding:7px !important;
  border-radius:14px !important;
}
#formas-pagamento .pg-key-av::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,252,248,.18),inset 0 0 0 1px rgba(73,57,47,.22);
}
@media (prefers-reduced-motion:reduce){.ribbon .marquee{animation:none!important}}
</style>


<style id="vb-v7-pix-logo-final">
/* V7 — acabamento específico desta cliente: miniatura da logomarca no Pix.
   Fundo marrom escuro real no suporte; blend mode remove visualmente o branco
   da arte rasterizada. Este ajuste não altera a logomarca usada em outras áreas. */
#formas-pagamento .pg-key-av{isolation:isolate!important;background:#49392F!important;background-image:linear-gradient(145deg,#806052,#49392F)!important;border-color:rgba(255,252,248,.38)!important}
#formas-pagamento .pg-key-av img{mix-blend-mode:multiply!important;background:#59483D!important;filter:contrast(1.12) brightness(.92)!important}
</style>


<style id="vb-v8-pix-logo-contraste-equilibrado">
/* V8 — ajuste exclusivo da miniatura Pix da Vladia.
   O marrom escuro anterior reduzia a leitura da marca. Este suporte em
   champagne/taupe médio oferece contraste sem pesar visualmente.
   O modo multiply integra os pixels brancos da imagem ao fundo quente,
   preservando a arte escura da logomarca. Não alterar outras aplicações. */
#formas-pagamento .pg-key-av{
  isolation:isolate !important;
  overflow:hidden !important;
  background:#DCC6B0 !important;
  background-image:linear-gradient(145deg,#EADBCB 0%,#DCC6B0 58%,#C9AD94 100%) !important;
  border:1px solid rgba(89,72,61,.30) !important;
  box-shadow:0 7px 16px -10px rgba(73,57,47,.48),0 0 0 3px rgba(214,189,165,.24) !important;
}
#formas-pagamento .pg-key-av img{
  background:#DCC6B0 !important;
  mix-blend-mode:multiply !important;
  filter:contrast(1.04) brightness(1.03) !important;
  padding:5px !important;
  border-radius:14px !important;
}
#formas-pagamento .pg-key-av::after{
  box-shadow:inset 0 1px 0 rgba(255,252,248,.55),inset 0 0 0 1px rgba(89,72,61,.10) !important;
}
</style>


<style id="vb-v10-pix-professional-photo">
/* V10 — miniatura Pix: usar a foto da profissional, não a logomarca.
   O retrato deve preencher o quadro sem blend/multiplicação nem fundo embutido.
   Regra específica da miniatura dentro do cartão Pix. */
#formas-pagamento .pg-key-av{
  background:#59483D !important;
  background-image:linear-gradient(145deg,#806052 0%,#49392F 100%) !important;
  border:1px solid rgba(255,252,248,.42) !important;
  box-shadow:0 7px 16px -9px rgba(73,57,47,.55),0 0 0 3px rgba(214,189,165,.22) !important;
}
#formas-pagamento .pg-key-av img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:50% 18% !important;
  padding:0 !important; border-radius:inherit !important;
  background:transparent !important; mix-blend-mode:normal !important;
  filter:none !important; transform:none !important;
}
</style>


<style id="vb-v12-direct-whatsapp-contact">
.booking-direct-contact{display:flex;flex-direction:column;justify-content:center;gap:22px}.booking-direct-contact .direct-contact-copy{padding:18px 0 8px;color:var(--text,#4b4037)}.booking-direct-contact .direct-contact-copy>.ms{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:50%;background:rgba(174,145,111,.16);color:#8a6b4e;font-size:24px}.booking-direct-contact .direct-contact-copy h4{margin:14px 0 8px;font-family:inherit;font-size:clamp(22px,2.5vw,30px);color:inherit}.booking-direct-contact .direct-contact-copy p{margin:0;line-height:1.75;color:inherit;opacity:.82}.booking-direct-contact .form-hint{margin:0}
</style>
</head>
<body>

<!-- ================= TELA DE CARREGAMENTO ================= -->
<div id="site-preloader" role="status" aria-live="polite" aria-busy="true">
  <span class="pl-sr">Carregando V.B Massoterapia…</span>
  <div class="pl-stage">
    <span class="pl-blob" aria-hidden="true"></span>
    <span class="pl-blob pl-blob--inner" aria-hidden="true"></span>
    <span class="pl-ring" style="--d:0s" aria-hidden="true"></span>
    <span class="pl-ring" style="--d:.5s" aria-hidden="true"></span>
    <span class="pl-ring" style="--d:1s" aria-hidden="true"></span>
    <span class="pl-particles" aria-hidden="true"><i style="--tx:-118px;--ty:-46px;--d:0.00s"></i><i style="--tx:112px;--ty:-72px;--d:0.25s"></i><i style="--tx:-84px;--ty:104px;--d:0.50s"></i><i style="--tx:98px;--ty:92px;--d:0.75s"></i><i style="--tx:4px;--ty:-132px;--d:1.00s"></i><i style="--tx:-142px;--ty:30px;--d:1.25s"></i><i style="--tx:138px;--ty:18px;--d:1.50s"></i><i style="--tx:28px;--ty:128px;--d:1.75s"></i></span>
    <img class="pl-logo" src="imagens/logomarca2.png" alt="V.B Massoterapia | Vladia Brito" width="668" height="531" fetchpriority="high" decoding="async" />
  </div>
  <span class="pl-line" aria-hidden="true"></span>
  <span class="pl-caption" aria-hidden="true">Massoterapia &amp; Bem-Estar</span>
</div>
<script>
(function(){
  var pl=document.getElementById('site-preloader'); if(!pl) return;
  var root=document.documentElement, MIN=1900, FALLBACK=4000, finished=false;
  root.classList.add('is-loading');
  function now(){ return (window.performance&&performance.now)?performance.now():Date.now(); }
  var start=now();
  function finish(){
    if(finished) return; finished=true;
    pl.classList.add('is-hidden'); pl.setAttribute('aria-busy','false');
    root.classList.remove('is-loading'); root.classList.add('is-loaded');
    setTimeout(function(){ pl.style.display='none'; }, 900);
  }
  function onLoaded(){ setTimeout(finish, Math.max(0, MIN-(now()-start))); }
  if(document.readyState==='complete') onLoaded(); else window.addEventListener('load', onLoaded, {once:true});
  setTimeout(finish, FALLBACK);
  window.__preloader={ get finished(){ return finished; } };
})();
</script>

<!-- ================= HEADER ================= -->
<header class="site-header" id="site-header">
  <div class="header-inner">
    <a class="brand" href="#inicio" aria-label="Vladia Brito — início">
      <img decoding="async" src="imagens/logomarca2.png" alt="Vladia Brito Massoterapia" width="58" height="46" />
      <span class="brand-name"><strong>Vladia Brito</strong><span>Massoterapia &amp; Bem-Estar</span></span>
    </a>
    <nav class="nav" aria-label="Navegação principal">
      <a href="#inicio" data-nav="inicio">Início</a>
      <a href="#sobre-vladia" data-nav="sobre-vladia">Sobre Vladia</a>
      <a href="#nossa-essencia" data-nav="nossa-essencia">Nossa Essência</a>
      <a href="#catalogo" data-nav="catalogo">Catálogo de Serviços</a>
      <a href="#depoimentos" data-nav="depoimentos">Depoimentos</a>
      <a href="#contato" data-nav="contato">Contato</a>
    </nav>
    <div class="header-actions">
      <a class="btn btn-primary btn-sm hide-sm" href="https://wa.me/5585992090392?text=Ol%C3%A1%2C%20Vladia%21%20Vim%20pelo%20site%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20atendimentos%20e%20os%20hor%C3%A1rios%20dispon%C3%ADveis.%20Pode%20me%20ajudar%3F" target="_blank" rel="noopener noreferrer"><span class="ms">chat</span>Conversar no WhatsApp</a>
      <a class="icon-btn hide-sm" href="https://www.instagram.com/vladiabrittomassoterapia/" target="_blank" rel="noopener noreferrer" title="Instagram @vladiabrittomassoterapia" aria-label="Instagram">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
      </a>
      <a class="icon-btn hide-sm" href="https://wa.me/5585992090392?text=Ol%C3%A1%2C%20Vladia%21%20Vim%20pelo%20site%20da%20V.B%20Massoterapia%20e%20gostaria%20de%20conversar%20sobre%20os%20atendimentos.%20Pode%20me%20passar%20mais%20informa%C3%A7%C3%B5es%20e%20os%20hor%C3%A1rios%20dispon%C3%ADveis%3F" target="_blank" rel="noopener noreferrer" title="WhatsApp (85) 99209-0392" aria-label="WhatsApp"><span class="ms">chat</span></a>
      <button class="icon-btn menu-toggle" type="button" aria-label="Abrir menu" aria-controls="mobile-menu" aria-expanded="false" id="menu-open"><span class="ms">menu</span></button>
    </div>
  </div>
</header>

<!-- Menu mobile -->
<div class="mobile-menu" id="mobile-menu" aria-hidden="true">
  <div class="mobile-panel" role="dialog" aria-label="Menu">
    <div class="mobile-panel-top">
      <img loading="lazy" decoding="async" src="imagens/logomarca2.png" alt="Vladia Brito" />
      <button class="icon-btn" type="button" aria-label="Fechar menu" id="menu-close"><span class="ms">close</span></button>
    </div>
    <nav>
      <a href="#inicio">Início <span class="ms">arrow_outward</span></a>
      <a href="#sobre-vladia">Sobre Vladia <span class="ms">arrow_outward</span></a>
      <a href="#nossa-essencia">Nossa Essência <span class="ms">arrow_outward</span></a>
      <a href="#catalogo">Catálogo de Serviços <span class="ms">arrow_outward</span></a>
      <a href="#depoimentos">Depoimentos <span class="ms">arrow_outward</span></a>
      <a href="#contato">Contato <span class="ms">arrow_outward</span></a>
    </nav>
    <a class="btn btn-primary btn-block" href="https://wa.me/5585992090392?text=Ol%C3%A1%2C%20Vladia%21%20Vim%20pelo%20site%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20atendimentos%20e%20os%20hor%C3%A1rios%20dispon%C3%ADveis.%20Pode%20me%20ajudar%3F" target="_blank" rel="noopener noreferrer"><span class="ms">chat</span>Conversar no WhatsApp</a>
  </div>
</div>

<main>
<!-- ================= HERO ================= -->
<section class="hero" id="inicio">
  <div class="hero-bg"><img decoding="async" src="imagens/banner2.webp" alt="" aria-hidden="true" /></div>
  <div class="container hero-grid">
    <div class="hero-copy">
      <span class="eyebrow reveal"><span class="ms fill">spa</span>Massoterapia &amp; Bem-Estar</span>
      <h1 class="display h1 reveal" data-delay="1">17 Anos de Cuidado com a Sua <em>Saúde e Bem-Estar</em></h1>
      <p class="lead reveal" data-delay="2">Com <strong>Vladia Brito</strong>, são 17 anos de dedicação à massoterapia, promovendo saúde e bem-estar por meio de cuidados corporais e terapias complementares.</p>
      <div class="hero-ctas reveal" data-delay="3">
        <a class="btn btn-primary" href="https://wa.me/5585992090392?text=Ol%C3%A1%2C%20Vladia%21%20Vim%20pelo%20site%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20atendimentos%20e%20os%20hor%C3%A1rios%20dispon%C3%ADveis.%20Pode%20me%20ajudar%3F" target="_blank" rel="noopener noreferrer"><span class="ms">chat</span>Conversar no WhatsApp</a>
        <a class="btn btn-glass" href="#catalogo">Ver Catálogo Completo<span class="ms">arrow_downward</span></a>
      </div>
      <div class="hero-stats reveal" data-delay="4">
        <div class="stat"><b>17<small>+</small></b><span>Anos de atuação</span></div>
        <div class="stat"><b>100<small>%</small></b><span>Bem-estar</span></div>
        <div class="stat"><b>12<small>+</small></b><span>Terapias e cuidados</span></div>
      </div>
    </div>
    <div class="hero-visual reveal" data-delay="2">
      <span class="halo h3"></span><span class="halo h1"></span><span class="halo h2"></span>
      <div class="hero-logo"><span class="logo-tilt"><span class="logo-float"><img decoding="async" src="imagens/logomarca2.png" alt="Vladia Brito - Logomarca Oficial" /><span class="logo-sheen" aria-hidden="true"></span></span></span></div>
      <span class="logo-sparkles" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span>
    </div>
  </div>
  <div class="scroll-cue" aria-hidden="true">Role<i></i></div>
</section>

<!-- ================= FAIXA ================= -->
<section class="ribbon" aria-label="Diferenciais">
  <div class="marquee">
    <div class="marquee-group">
      <span class="marquee-item"><span class="ms">self_improvement</span>Dissolução de Contraturas &amp; Fadiga</span><span class="marquee-sep">✦</span>
      <span class="marquee-item"><span class="ms">clean_hands</span>Toque Consciente &amp; Terapêutico</span><span class="marquee-sep">✦</span>
      <span class="marquee-item"><span class="ms">spa</span>Insumos Botânicos &amp; Óleos Nobres</span><span class="marquee-sep">✦</span>
      <span class="marquee-item"><span class="ms">lock</span>Privacidade &amp; Silêncio Absoluto</span><span class="marquee-sep">✦</span>
      <span class="marquee-item"><span class="ms">person_heart</span>17 anos de atuação em massoterapia</span><span class="marquee-sep">✦</span>
    </div>
    <div class="marquee-group" aria-hidden="true">
      <span class="marquee-item"><span class="ms">self_improvement</span>Dissolução de Contraturas &amp; Fadiga</span><span class="marquee-sep">✦</span>
      <span class="marquee-item"><span class="ms">clean_hands</span>Toque Consciente &amp; Terapêutico</span><span class="marquee-sep">✦</span>
      <span class="marquee-item"><span class="ms">spa</span>Insumos Botânicos &amp; Óleos Nobres</span><span class="marquee-sep">✦</span>
      <span class="marquee-item"><span class="ms">lock</span>Privacidade &amp; Silêncio Absoluto</span><span class="marquee-sep">✦</span>
      <span class="marquee-item"><span class="ms">person_heart</span>17 anos de atuação em massoterapia</span><span class="marquee-sep">✦</span>
    </div>
  </div>
</section>

<!-- ================= SOBRE ================= -->
<section class="section about" id="sobre-vladia">
  <div class="container about-grid">
    <div class="portrait-wrap reveal">
      <span class="portrait-deco" aria-hidden="true"></span>
      <div class="portrait-stage">
        <span class="portrait-ring" aria-hidden="true"></span>
        <span class="flip-hint" aria-hidden="true"><span class="ms">360</span><span class="t-desk">Passe o mouse</span><span class="t-touch">Toque para virar</span></span>
        <button class="flip" id="portrait-flip" type="button" aria-pressed="false" aria-label="Virar cartão: mostrar a logomarca de Vladia Brito">
          <span class="flip-inner">
            <span class="flip-face flip-front"><img decoding="async" src="imagens/profissional.webp" alt="Vladia Brito - Massoterapia &amp; Bem-Estar" loading="lazy" /></span>
            <span class="flip-face flip-back"><img decoding="async" src="imagens/logomarca2.png" alt="Logomarca Vladia Brito" loading="lazy" /></span>
          </span>
        </button>
      </div>
      <div class="name-card">
        <img loading="lazy" decoding="async" src="imagens/logomarca2.png" alt="" aria-hidden="true" />
        <div><strong>Vladia Brito</strong><span>Massoterapia &amp; Bem-Estar</span></div>
        <span class="ms fill">workspace_premium</span>
      </div>
    </div>
    <div class="about-copy">
      <span class="eyebrow reveal" style="align-self:flex-start"><span class="ms">filter_vintage</span>Experiência e Cuidado em Massoterapia</span>
      <h2 class="display h2 reveal" data-delay="1">Vladia Brito — <em>Massoterapeuta</em></h2>
      <blockquote class="quote reveal" data-delay="2">“Cuidar do corpo é também reservar um momento para si.”</blockquote>
      <p class="text reveal" data-delay="2">Há 17 anos, Vladia Brito atua com massoterapia com a finalidade de promover saúde e bem-estar. Seu trabalho reúne diferentes técnicas de cuidado corporal, respeitando as necessidades e os objetivos de cada pessoa.</p>
      <div class="features">
        <div class="feature reveal" data-delay="1"><div class="ic"><span class="ms">health_and_safety</span></div><div><h4>Alívio de Tensões &amp; Dores</h4><p>Técnicas de massoterapia para cuidado e bem-estar corporal.</p></div></div>
        <div class="feature reveal" data-delay="2"><div class="ic"><span class="ms">face_retouching_natural</span></div><div><h4>Terapias Corporais</h4><p>Técnicas manuais voltadas ao cuidado e conforto corporal.</p></div></div>
        <div class="feature reveal" data-delay="3"><div class="ic"><span class="ms">waves</span></div><div><h4>Drenagem Linfática</h4><p>Cuidado corporal com movimentos suaves e ritmados.</p></div></div>
        <div class="feature reveal" data-delay="4"><div class="ic"><span class="ms">spa</span></div><div><h4>Técnicas Complementares</h4><p>Opções complementares de acordo com cada atendimento.</p></div></div>
      </div>
    </div>
  </div>
</section>

<!-- ================= ESSÊNCIA ================= -->
<section class="section essence" id="nossa-essencia">
  <div class="essence-bg" aria-hidden="true"></div>
  <div class="container essence-grid">
    <div class="mosaic">
      <div class="mosaic-col">
        <div class="tile sq reveal"><img decoding="async" src="imagens/001.webp" alt="Pedras basálticas e óleos botânicos" loading="lazy" /></div>
        <div class="tile tall reveal" data-delay="2"><img decoding="async" src="imagens/003.webp" alt="Sais de lavanda, vela e óleos essenciais" loading="lazy" /></div>
      </div>
      <div class="mosaic-col">
        <div class="tile tall reveal" data-delay="1"><img decoding="async" src="imagens/004.webp" alt="Toque terapêutico de massoterapia" loading="lazy" /></div>
        <div class="tile sq reveal" data-delay="3"><img decoding="async" src="imagens/002.webp" alt="Pedras quentes e vela — toque consciente" loading="lazy" /></div>
      </div>
    </div>
    <div class="essence-copy">
      <span class="eyebrow on-dark reveal" style="align-self:flex-start"><span class="ms">spa</span>Nossa Essência</span>
      <h2 class="display h2 reveal" data-delay="1">Cuidado que promove <em>saúde e bem-estar</em></h2>
      <p class="text reveal" data-delay="2">O cuidado começa com atenção às necessidades de cada pessoa. Com 17 anos de atuação, Vladia dedica seu trabalho a promover saúde e bem-estar por meio da massoterapia e de técnicas complementares.</p>
      <div class="pillars">
        <div class="pillar reveal" data-delay="1"><div class="ic"><span class="ms">spa</span></div><span>17 anos de atuação em massoterapia &amp; Rituais Sob Medida</span></div>
        <div class="pillar reveal" data-delay="2"><div class="ic"><span class="ms">verified</span></div><span>Dedicação Clínica &amp; Respeito aos Limites do Corpo</span></div>
        <div class="pillar reveal" data-delay="3"><div class="ic"><span class="ms">opacity</span></div><span>Óleos Vegetais Nobres, Fitocosméticos Puros e Hipoalergênicos</span></div>
      </div>
    </div>
  </div>
</section>

<!-- ================= CATÁLOGO ================= -->
<section class="section catalog" id="catalogo">
  <div class="catalog-bg" aria-hidden="true"></div>
  <div class="container">
    <div class="section-head">
      <span class="eyebrow reveal"><span class="ms fill">local_florist</span>Menu Terapêutico Completo</span>
      <h2 class="display h2 reveal" data-delay="1">Conheça as <em>Terapias</em> e Serviços</h2>
      <p class="lead reveal" data-delay="2">Conheça as opções de atendimento da V.B Massoterapia e encontre o cuidado que combina com seu momento.</p>
      <div class="ornament reveal" data-delay="3"><span class="ms">filter_vintage</span></div>
    </div>

    <div class="cat-shell" id="cat-shell">
    <div class="cat-deck reveal" role="tablist" aria-label="Categorias de serviços">
      <button class="cat-card is-active" role="tab" id="tab-all" aria-selected="true" aria-controls="cat-stage" tabindex="0" data-filter="all" data-kicker="Menu Completo" data-icon="spa" data-img="imagens/001.webp">
        <span class="cc-media"><img loading="lazy" decoding="async" src="imagens/001.webp" alt="" /></span>
        <span class="cc-shade"></span><span class="cc-grid"></span><span class="cc-spot"></span><span class="cc-hud"></span><span class="cc-ring"></span>
        <span class="cc-top"><span class="cc-index">01<small>/04</small></span><span class="cc-icon"><span class="ms">spa</span></span></span>
        <span class="cc-body"><span class="cc-kicker">Menu Completo</span><span class="cc-name">Todos os serviços</span><span class="cc-count"><b>11</b> Serviços Disponíveis</span>
          <span class="cc-cta"><span class="live"></span><span class="t-on">Em exibição<span class="t-below"> abaixo</span></span><span class="t-go">Explorar</span><span class="ms">south</span></span></span>
      </button>
      <button class="cat-card" role="tab" id="tab-corporal" aria-selected="false" aria-controls="cat-stage" tabindex="-1" data-filter="corporal" data-kicker="Alívio &amp; Tensão" data-icon="self_improvement" data-img="imagens/Massagem Relaxante (1).webp">
        <span class="cc-media"><img loading="lazy" decoding="async" src="imagens/Massagem Relaxante (1).webp" alt="" /></span>
        <span class="cc-shade"></span><span class="cc-grid"></span><span class="cc-spot"></span><span class="cc-hud"></span><span class="cc-ring"></span>
        <span class="cc-top"><span class="cc-index">02<small>/04</small></span><span class="cc-icon"><span class="ms">self_improvement</span></span></span>
        <span class="cc-body"><span class="cc-kicker">Alívio &amp; Tensão</span><span class="cc-name">Massagens e Relaxamento</span><span class="cc-count"><b>4</b> Opções de Massagem</span>
          <span class="cc-cta"><span class="live"></span><span class="t-on">Em exibição<span class="t-below"> abaixo</span></span><span class="t-go">Explorar</span><span class="ms">south</span></span></span>
      </button>
      <button class="cat-card" role="tab" id="tab-drenagem" aria-selected="false" aria-controls="cat-stage" tabindex="-1" data-filter="drenagem" data-kicker="Drenagem &amp; Equilíbrio" data-icon="spa" data-img="imagens/Reflexologia Podal.webp">
        <span class="cc-media"><img loading="lazy" decoding="async" src="imagens/Reflexologia Podal.webp" alt="" /></span>
        <span class="cc-shade"></span><span class="cc-grid"></span><span class="cc-spot"></span><span class="cc-hud"></span><span class="cc-ring"></span>
        <span class="cc-top"><span class="cc-index">03<small>/04</small></span><span class="cc-icon"><span class="ms">face_retouching_natural</span></span></span>
        <span class="cc-body"><span class="cc-kicker">Drenagem &amp; Equilíbrio</span><span class="cc-name">Drenagem e Reflexologia</span><span class="cc-count"><b>2</b> Terapias</span>
          <span class="cc-cta"><span class="live"></span><span class="t-on">Em exibição<span class="t-below"> abaixo</span></span><span class="t-go">Explorar</span><span class="ms">south</span></span></span>
      </button>
      <button class="cat-card" role="tab" id="tab-corporal-complementar" aria-selected="false" aria-controls="cat-stage" tabindex="-1" data-filter="complementar" data-kicker="Terapias Complementares" data-icon="healing" data-img="imagens/Acupuntura sem Agulhas.webp">
        <span class="cc-media"><img loading="lazy" decoding="async" src="imagens/Acupuntura sem Agulhas.webp" alt="" /></span>
        <span class="cc-shade"></span><span class="cc-grid"></span><span class="cc-spot"></span><span class="cc-hud"></span><span class="cc-ring"></span>
        <span class="cc-top"><span class="cc-index">04<small>/04</small></span><span class="cc-icon"><span class="ms">healing</span></span></span>
        <span class="cc-body"><span class="cc-kicker">Terapias Complementares</span><span class="cc-name">Terapias Corporais</span><span class="cc-count"><b>5</b> Terapias Corporais</span>
          <span class="cc-cta"><span class="live"></span><span class="t-on">Em exibição<span class="t-below"> abaixo</span></span><span class="t-go">Explorar</span><span class="ms">south</span></span></span>
      </button>
    </div>

    <div class="cat-link" aria-hidden="true"><span class="cat-bridge"></span><span class="cat-node"></span></div>

    <div class="cat-stage reveal" id="cat-stage" role="tabpanel" aria-labelledby="tab-all">
      <span class="stage-scan" aria-hidden="true"></span>
      <div class="stage-head" id="stage-head">
        <div class="stage-thumb"><img loading="lazy" decoding="async" id="stage-img" src="imagens/001.webp" alt="" /><span class="ms" id="stage-icon">spa</span></div>
        <div>
          <span class="stage-kicker"><span id="stage-index">01</span><i>/</i><span id="stage-kicker">Menu Completo</span></span>
          <h3 id="catalog-title">Cuidado Integral <em>para a sua Jornada.</em></h3>
        </div>
        <div class="stage-meta">
          <span class="stage-count"><strong id="stage-num">9</strong><b id="catalog-count">9 rituais disponíveis</b></span>
          <span class="stage-steps" aria-hidden="true"><span class="on"></span><span></span><span></span><span></span></span>
          <span class="stage-hint"><span class="ms">touch_app</span>Toque em um card para ver os detalhes</span>
        </div>
      </div>
    <div class="services-grid" id="services-grid"><!-- cards gerados pelo script --></div>
    </div>
    </div>
  </div>
</section>

<!-- ================= EXPERIÊNCIA ================= -->
<section class="section testimonials" id="depoimentos" aria-labelledby="reviews-title">
 <div class="container">
  <div class="section-head">
   <span class="eyebrow on-dark reveal"><span class="ms fill">auto_awesome</span>Experiências de cuidado</span>
   <h2 class="display h2 reveal" data-delay="1" id="reviews-title">Histórias de Alívio, Cura e <em>Transformação</em></h2>
   <p class="lead reveal" data-delay="2">Uma apresentação de como as terapias e o cuidado individualizado podem fazer parte de uma rotina de bem-estar.</p>
   <div class="review-disclosure reveal" data-delay="3"><span class="ms">info</span> Relatos ilustrativos com nomes fictícios; substituir por avaliações reais autorizadas antes da publicação.</div>
  </div>
  <div class="t-grid">
   <article class="t-card reveal" data-delay="1"><span aria-hidden="true" class="t-quote-mark">”</span><div><div class="t-stars" aria-label="Exemplo ilustrativo"><span class="ms">spa</span></div><blockquote>“A massagem relaxante foi uma pausa muito bem-vinda na minha rotina. O atendimento acolhedor e o cuidado em respeitar meu ritmo fizeram toda a diferença para eu sair mais leve.”</blockquote></div><div class="t-author"><span class="t-avatar">M</span><div><strong>Mariana L.</strong><span>Massagem relaxante</span></div></div></article>
   <article class="t-card reveal" data-delay="2"><span aria-hidden="true" class="t-quote-mark">”</span><div><div class="t-stars" aria-label="Exemplo ilustrativo"><span class="ms">spa</span></div><blockquote>“Gostei da atenção durante a sessão e das explicações sobre cada etapa. A drenagem linfática foi realizada com delicadeza e me senti bem acolhida.”</blockquote></div><div class="t-author"><span class="t-avatar">R</span><div><strong>Renata S.</strong><span>Drenagem linfática</span></div></div></article>
   <article class="t-card reveal" data-delay="3"><span aria-hidden="true" class="t-quote-mark">”</span><div><div class="t-stars" aria-label="Exemplo ilustrativo"><span class="ms">spa</span></div><blockquote>“A reflexologia podal proporcionou um momento de relaxamento e atenção ao meu bem-estar. O ambiente tranquilo e o atendimento cuidadoso me deixaram confortável.”</blockquote></div><div class="t-author"><span class="t-avatar">C</span><div><strong>Camila A.</strong><span>Reflexologia podal</span></div></div></article>
   <article class="t-card reveal" data-delay="4"><span aria-hidden="true" class="t-quote-mark">”</span><div><div class="t-stars" aria-label="Exemplo ilustrativo"><span class="ms">spa</span></div><blockquote>“Na sessão de massagem terapêutica, senti atenção às minhas necessidades e orientações claras durante o atendimento. Uma experiência cuidadosa e personalizada.”</blockquote></div><div class="t-author"><span class="t-avatar">P</span><div><strong>Patrícia M.</strong><span>Massagem terapêutica</span></div></div></article>
  </div>
 </div>
</section>

<!-- ================= CONTATO / RESERVA ================= -->
<section class="section contact" id="contato">
  <div class="container">
    <div class="booking-shell reveal">
      <aside class="booking-aside">
        <span class="eyebrow on-dark" style="align-self:flex-start"><span class="ms fill">spa</span>Reserva Exclusiva</span>
        <h3 class="display h3">Permita-se Sentir a Leveza de um Corpo <em>Sem Dores.</em></h3>
        <p class="text">Entre em contato para consultar os horários disponíveis e receber informações sobre as terapias da V.B Massoterapia.</p>
        <div class="contact-tiles">
          <a class="contact-tile" href="https://wa.me/5585992090392?text=Ol%C3%A1%2C%20Vladia%21%20Encontrei%20seu%20contato%20no%20site%20da%20V.B%20Massoterapia%20e%20gostaria%20de%20consultar%20a%20disponibilidade%20para%20um%20atendimento.%20Pode%20me%20orientar%3F" target="_blank" rel="noopener noreferrer"><span class="ic"><span class="ms">chat</span></span><div><b>WhatsApp</b><span>(85) 99209-0392</span></div></a>
          <a class="contact-tile" href="https://www.instagram.com/vladiabrittomassoterapia/" target="_blank" rel="noopener noreferrer"><span class="ic"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></span><div><b>Instagram</b><span>@vladiabrittomassoterapia</span></div></a>
        </div>
        <p class="aside-note"><span class="ms">verified_user</span>Atendimento mediante consulta de disponibilidade.</p>
      </aside>

      <form class="booking-form" id="custom-booking-form" novalidate>
        <div class="form-logo">
          <img loading="lazy" decoding="async" src="imagens/logomarca2.png" alt="Vladia Brito - Massoterapia" />
          <div><strong>Vladia Brito</strong><span>Massoterapia</span></div>
        </div>
        <div class="field">
          <label for="booking-name"><span class="ms">person</span>Seu Nome Completo</label>
          <input class="input" id="booking-name" type="text" placeholder="Como prefere ser chamado(a)?" autocomplete="name" required />
          <span class="field-error" id="booking-name-error">Por favor, informe seu nome.</span>
        </div>
        <div class="field">
          <label for="booking-service"><span class="ms">spa</span>Procedimento ou Ritual</label>
          <div class="select-wrap"><select class="input" id="booking-service" required></select></div>
        </div>
        <div class="field">
          <label for="booking-notes"><span class="ms">edit_note</span>Observações ou Região de Tensão (Opcional)</label>
          <textarea class="input" id="booking-notes" rows="3" placeholder="Ex: dor lombar, tensão no pescoço, retenção líquida..."></textarea>
        </div>
        <button class="btn btn-primary btn-block" type="submit" style="height:58px;letter-spacing:.1em;text-transform:uppercase;font-size:13px"><span class="ms">calendar_month</span>Solicitar Reserva de Horário</button>
        <p class="form-hint"><span class="ms">lock</span>A solicitação será enviada pelo WhatsApp para consulta de disponibilidade e valores.</p>
      </form>
    </div>
  </div>
</section>

<!-- ================= FORMAS DE PAGAMENTO ================= -->
<section class="section pg-section fx" id="formas-pagamento" aria-label="Formas de pagamento">
<div class="pg-bg" aria-hidden="true">
<span class="pg-orb pg-orb-1"></span><span class="pg-orb pg-orb-2"></span><span class="pg-orb pg-orb-3"></span>
<span class="pg-grid"></span>
<span class="pg-float-ico" style="left:7%;top:18%;--fd:0s">✦</span>
<span class="pg-float-ico" style="right:9%;top:12%;--fd:-3s">R$</span>
<span class="pg-float-ico" style="left:12%;bottom:14%;--fd:-6s">✦</span>
<span class="pg-float-ico" style="right:6%;bottom:22%;--fd:-9s">◆</span>
</div>
<div class="container" style="position:relative;z-index:10">
<div class="section-head">
      <span class="eyebrow reveal"><span class="ms">payments</span>Praticidade &amp; Conforto</span>
      <h2 class="display h2 reveal" data-delay="1">Formas de <em>Pagamento</em></h2>
      <p class="lead reveal" data-delay="2">Escolha a opção que for mais confortável para você. Cuidado, transparência e acolhimento em cada etapa.</p>
    </div>

<div class="pg-switch scroll-reveal" id="pgSwitch" role="group" aria-label="Escolha a forma de pagamento" data-active="dinheiro">
<span class="pg-switch-glider" aria-hidden="true"></span>
<button class="pg-tab is-active" type="button" data-pg="dinheiro" aria-pressed="true" aria-controls="pgCardDinheiro">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="6" width="19" height="12" rx="2.2"/><circle cx="12" cy="12" r="2.6"/><path d="M6 9.5v5M18 9.5v5"/></svg>
<span>Dinheiro</span>
</button>
<button class="pg-tab" type="button" data-pg="pix" aria-pressed="false" aria-controls="pgCardPix">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="3" transform="rotate(45 12 12)"/><rect x="10" y="10" width="4" height="4" rx="1" transform="rotate(45 12 12)" fill="currentColor" stroke="none"/></svg>
<span>Pix</span>
</button>
<button class="pg-tab" type="button" data-pg="cartao" aria-pressed="false" aria-controls="pgCardCartao">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5" width="19" height="14" rx="2.4"/><path d="M2.5 9.5h19M6 15h4"/></svg>
<span>Cartão</span>
</button>
</div>

<div class="pg-deck" id="pgDeck">
<!-- Cartão 1: Dinheiro -->
<article class="pg-slot scroll-reveal" data-pg="dinheiro" id="pgCardDinheiro" aria-label="Pagamento em dinheiro">
<div class="pg-card">
<span class="pg-border" aria-hidden="true"></span>
<div class="pg-visual pg-visual--cash" aria-hidden="true">
<span class="pg-halo"></span>
<div class="pg-notes" style="--dp:10">
<div class="pg-note pg-note-3"></div>
<div class="pg-note pg-note-2"></div>
<div class="pg-note pg-note-1"><span class="pg-note-seal">R$</span><span class="pg-note-lines"></span><span class="pg-note-val">Vladia</span></div>
</div>
<span class="pg-coin pg-coin-a" style="--dp:22"><b>R$</b></span>
<span class="pg-coin pg-coin-b" style="--dp:-16"><b>R$</b></span>
<span class="pg-coin pg-coin-c" style="--dp:28"><b>R$</b></span>
<span class="pg-twinkle" style="top:18%;left:42%"></span>
<span class="pg-twinkle" style="top:70%;right:16%;animation-delay:-1.2s"></span>
<span class="pg-twinkle" style="top:30%;right:30%;animation-delay:-2.1s"></span>
</div>
<div class="pg-body">
<span class="pg-kicker">01 · Em espécie</span>
<h3 class="pg-title">Dinheiro</h3>
<p class="pg-desc">Pagamento em espécie. Consulte a Vladia sobre as condições disponíveis para o seu atendimento.</p>
<ul class="pg-feats"><li>Pagamento presencial</li><li>Condições sob consulta</li></ul>
<div class="pg-foot">
<span class="pg-ok"><i>✓</i>Consulte disponibilidade</span>
<span class="pg-num" aria-hidden="true">01</span>
</div>
</div>
</div>
</article>

<!-- Cartão 2: Pix -->
<article class="pg-slot scroll-reveal" data-pg="pix" id="pgCardPix" aria-label="Pagamento por Pix">
<div class="pg-card">
<span class="pg-border" aria-hidden="true"></span>
<div class="pg-visual pg-visual--pix" aria-hidden="true">
<span class="pg-pix-ring"></span><span class="pg-pix-ring"></span><span class="pg-pix-ring"></span>
<div class="pg-qr" style="--dp:12">
<i class="pg-qc tl"></i><i class="pg-qc tr"></i><i class="pg-qc bl"></i><i class="pg-qc br"></i>
<svg class="pg-qr-svg" id="pgQr" viewBox="0 0 21 21" shape-rendering="geometricPrecision"></svg>
<span class="pg-pix-logo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="3" transform="rotate(45 12 12)"/><rect x="10" y="10" width="4" height="4" rx="1" transform="rotate(45 12 12)" fill="currentColor" stroke="none"/></svg></span>
<span class="pg-scan"></span>
</div>
<span class="pg-pix-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Rápido e prático</span>
</div>
<div class="pg-body">
<span class="pg-kicker">02 · Instantâneo</span>
<h3 class="pg-title">Pix</h3>
<p class="pg-desc">Transferência instantânea. Use o número de telefone da Vladia como chave Pix.</p>
<ul class="pg-feats"><li>Instantâneo</li><li>Sem taxas</li></ul>
<div class="pg-foot pg-foot--col">
<!-- [CLIENTE] Chaves Pix (celular). data-pix-key = valor copiado; .pg-key-num = número exibido. -->
<div class="pg-keys" role="group" aria-label="Chaves Pix por celular">
<button class="pg-key" type="button" data-pix-key="5585992090392" data-pix-name="Vladia Brito" aria-label="Copiar chave Pix de Vladia Brito: telefone (85) 99209-0392"><span class="pg-key-head"><span class="pg-key-av" aria-hidden="true"><img src="imagens/profissional.webp" alt="" width="668" height="531" loading="lazy" decoding="async"></span><span class="pg-key-info"><span class="pg-key-name">Vladia Brito</span><span class="pg-key-type"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="3" transform="rotate(45 12 12)"/></svg>Recebedora Pix · sem taxas</span></span></span><span class="pg-key-mid"><span class="pg-key-cap">Chave Pix · Celular (WhatsApp)</span><span class="pg-key-num">(85) 99209-0392</span></span><span class="pg-key-act" aria-hidden="true"><svg class="pg-key-ico pg-key-ico--copy" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2.5"/><path d="M15 9V6.5A2.5 2.5 0 0012.5 4h-6A2.5 2.5 0 004 6.5v6A2.5 2.5 0 006.5 15H9"/></svg><svg class="pg-key-ico pg-key-ico--ok" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span class="pg-key-lbl">Copiar chave Pix</span></span><span class="pg-key-fill" aria-hidden="true"></span></button>
<p class="pg-key-hint"><b>Como pagar:</b> toque em copiar, abra o app do seu banco e cole na área <b>Pix › Celular</b>.</p>
</div>
</div>
</div>
</div>
</article>

<!-- Cartão 3: Cartão -->
<article class="pg-slot scroll-reveal" data-pg="cartao" id="pgCardCartao" aria-label="Pagamento com cartão">
<div class="pg-card">
<span class="pg-border" aria-hidden="true"></span>
<div class="pg-visual pg-visual--card" aria-hidden="true">
<span class="pg-wave"></span><span class="pg-wave"></span><span class="pg-wave"></span>
<div class="pg-cc-wrap" style="--dp:14">
<div class="pg-cc">
<div class="pg-cc-flip">
<div class="pg-cc-face pg-cc-front">
<span class="pg-cc-holo"></span>
<span class="pg-cc-brand">Vladia</span>
<span class="pg-cc-star">✦</span>
<span class="pg-cc-chip"></span>
<svg class="pg-cc-nfc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M8 8.5a5 5 0 010 7M11.5 6a8.5 8.5 0 010 12M15 3.5a12 12 0 010 17"/></svg>
<span class="pg-cc-num">•••• •••• •••• V.B</span>
<span class="pg-cc-foot"><span>Seu momento</span><span>Crédito · Débito</span></span>
</div>
<div class="pg-cc-face pg-cc-back">
<span class="pg-cc-stripe"></span>
<span class="pg-cc-sign"><em>Vladia Brito</em></span>
<span class="pg-cc-thanks">Obrigada pela preferência ✦</span>
</div>
</div>
</div>
<span class="pg-cc-shadow"></span>
</div>
</div>
<div class="pg-body">
<span class="pg-kicker">03 · Crédito e débito</span>
<h3 class="pg-title">Cartão</h3>
<p class="pg-desc">Consulte a Vladia sobre a disponibilidade de pagamento no crédito ou débito e as condições aplicáveis.</p>
<ul class="pg-feats"><li>Crédito e débito</li><li>Condições sob consulta</li></ul>
<div class="pg-foot">
<span class="pg-ok"><i>✓</i>Consulte disponibilidade</span>
<span class="pg-num" aria-hidden="true">03</span>
</div>
</div>
</div>
</article>
</div>

<div class="pg-live scroll-reveal" id="pgLive" data-pg="dinheiro">
<span class="pg-live-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
<p class="pg-live-text" id="pgLiveText" aria-live="polite">Dinheiro: pague em espécie, de forma simples e direta.</p>
<span class="pg-live-bar" aria-hidden="true"></span>
</div>
<p class="pg-help scroll-reveal">Dúvidas sobre pagamento? Fale com a <a href="https://wa.me/5585992090392?text=Ol%C3%A1%2C%20Vladia%21%20Vim%20pelo%20site%20e%20gostaria%20de%20tirar%20uma%20d%C3%BAvida%20sobre%20as%20formas%20de%20pagamento%20aceitas.%20Pode%20me%20orientar%3F" rel="noopener noreferrer" target="_blank">Vladia</a> no WhatsApp.</p>
</div>
</section>

<!-- ================= FAQ ================= -->
<section class="section faq" id="duvidas">
  <div class="container faq-wrap">
    <div class="faq-intro reveal">
      <span class="eyebrow"><span class="ms">help</span>Esclarecimentos</span>
      <h2 class="display h2">Dúvidas <em>Frequentes</em></h2>
      <p class="text">Ficou com alguma dúvida? Fale diretamente com Vladia pelo WhatsApp.</p>
      <a class="btn btn-outline btn-sm" href="https://wa.me/5585992090392?text=Ol%C3%A1%2C%20Vladia%21%20Vim%20pelo%20site%20da%20V.B%20Massoterapia%20e%20gostaria%20de%20conversar%20sobre%20os%20atendimentos.%20Pode%20me%20passar%20mais%20informa%C3%A7%C3%B5es%20e%20os%20hor%C3%A1rios%20dispon%C3%ADveis%3F" target="_blank" rel="noopener noreferrer"><span class="ms">chat</span>Conversar no WhatsApp</a>
    </div>
    <div class="faq-list">
      <div class="faq-item reveal" data-delay="1">
        <button class="faq-q" type="button" aria-expanded="false">Qual a duração recomendada para a primeira sessão?<span class="ic"><span class="ms">add</span></span></button>
        <div class="faq-a"><div><p>A duração varia conforme a terapia escolhida. Consulte Vladia para obter os detalhes e o tempo previsto para o atendimento.</p></div></div>
      </div>
      <div class="faq-item reveal" data-delay="2">
        <button class="faq-q" type="button" aria-expanded="false">Como funciona a combinação de técnicas corporais?<span class="ic"><span class="ms">add</span></span></button>
        <div class="faq-a"><div><p>As técnicas e a abordagem são conversadas diretamente com Vladia, considerando as necessidades e os objetivos de cada pessoa.</p></div></div>
      </div>
      <div class="faq-item reveal" data-delay="3">
        <button class="faq-q" type="button" aria-expanded="false">O que vestir e como me preparar para a sessão?<span class="ic"><span class="ms">add</span></span></button>
        <div class="faq-a"><div><p>As orientações de preparação dependem da terapia escolhida. Entre em contato antes da sessão para receber as informações necessárias.</p></div></div>
      </div>
    </div>
  </div>
</section>
</main>

<!-- ================= FOOTER ================= -->
<footer class="footer">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <a class="brand" href="#inicio">
          <img loading="lazy" decoding="async" src="imagens/logomarca2.png" alt="Vladia Brito - Logomarca" />
          <span class="brand-name"><strong>V.B MASSOTERAPIA</strong><span>Massoterapia &amp; Bem-Estar</span></span>
        </a>
        <p>Espaço dedicado ao autocuidado, estética facial e restauração corporal com técnicas manuais precisas, acolhimento individualizado e produtos botânicos de alta qualidade.</p>
        <a class="btn btn-light btn-sm" style="align-self:flex-start" href="https://wa.me/5585992090392?text=Ol%C3%A1%2C%20Vladia%21%20Vim%20pelo%20site%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20atendimentos%20e%20os%20hor%C3%A1rios%20dispon%C3%ADveis.%20Pode%20me%20ajudar%3F" target="_blank" rel="noopener noreferrer"><span class="ms">chat</span>Conversar no WhatsApp</a>
      </div>
      <div>
        <h5>Atendimento &amp; Contato</h5>
        <div class="hours">
          <div class="hour"><span class="ms">schedule</span><div><b>Atendimento</b><span>Consulte os horários disponíveis</span></div></div>
          
        </div>
        <div class="footer-social">
          <a href="https://wa.me/5585992090392?text=Ol%C3%A1%2C%20Vladia%21%20Vim%20pelo%20site%20da%20V.B%20Massoterapia%20e%20gostaria%20de%20conversar%20sobre%20os%20atendimentos.%20Pode%20me%20passar%20mais%20informa%C3%A7%C3%B5es%20e%20os%20hor%C3%A1rios%20dispon%C3%ADveis%3F" target="_blank" rel="noopener noreferrer" title="WhatsApp Oficial"><span class="ic"><span class="ms" style="font-size:18px">chat</span></span><div><b>WhatsApp</b><span>(85) 99209-0392</span></div></a>
          <a href="https://www.instagram.com/vladiabrittomassoterapia/" target="_blank" rel="noopener noreferrer" title="Instagram Oficial"><span class="ic"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></span><div><b>Instagram</b><span>@vladiabrittomassoterapia</span></div></a>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <p style="margin:0">© 2026 Vladia Brito • Massoterapia &amp; Bem-Estar. Todos os direitos reservados.</p>
      <nav><a href="#">Privacidade</a><a href="#">Ética &amp; Cuidado</a><a href="#">Termos de Agendamento</a></nav>
    </div>
  </div>
</footer>

<!-- Flutuantes -->
<a class="wa-float" href="https://wa.me/5585992090392?text=Ol%C3%A1%2C%20Vladia%21%20Vim%20pelo%20site%20da%20V.B%20Massoterapia%20e%20gostaria%20de%20conversar%20sobre%20os%20atendimentos.%20Pode%20me%20passar%20mais%20informa%C3%A7%C3%B5es%20e%20os%20hor%C3%A1rios%20dispon%C3%ADveis%3F" target="_blank" rel="noopener noreferrer" aria-label="Falar no WhatsApp" title="Conversar diretamente com Vladia">
  <span class="wa-tip">Fale com a Vladia</span>
  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
</a>
<button class="to-top" id="to-top" type="button" aria-label="Voltar ao topo"><span class="ms">arrow_upward</span></button>
<div class="toast" id="toast" role="status" aria-live="polite"><span class="ms">check_circle</span><span id="toast-text"></span></div>

<!-- ================= MODAL 1: DETALHES ================= -->
<div class="modal" id="procedure-details-modal" role="dialog" aria-modal="true" aria-labelledby="pdm-title" aria-hidden="true">
  <div class="modal-card">
    <div class="modal-hero">
      <img loading="lazy" decoding="async" id="pdm-img" src="" alt="Foto do Procedimento" />
      <button class="modal-close" type="button" aria-label="Fechar detalhes" data-close><span class="ms">close</span></button>
      <div class="modal-title">
        <span class="sc-chip"><span class="ms">spa</span><span id="pdm-badge">RITUAL SENSORIAL</span></span>
        <h2 id="pdm-title">Massagem Relaxante</h2>
      </div>
    </div>
    <div class="modal-body">
      <div>
        <span class="kicker">Visão Geral</span>
        <p class="overview" id="pdm-overview"></p>
      </div>
      <div class="info-grid">
        <div class="info-box"><h4><span class="ms">verified</span>Benefícios Comprovados</h4><ul id="pdm-benefits"></ul></div>
        <div class="info-box"><h4><span class="ms">tune</span>Como é Conduzida</h4><p id="pdm-conducted"></p></div>
      </div>
      <div class="modal-footer">
        <div class="mf-meta">
          <div><small>Duração Recomendada</small><b id="pdm-duration">60 min</b></div>
          <div><small>A partir de</small><b id="pdm-price" style="color:var(--violet-deep)">Sob consulta</b></div>
        </div>
        <button class="btn btn-primary" type="button" id="pdm-book"><span class="ms">calendar_month</span>Agendar Horário</button>
      </div>
    </div>
  </div>
</div>

<!-- ================= MODAL 2: AGENDAMENTO ================= -->
<div class="modal" id="booking-modal" role="dialog" aria-modal="true" aria-labelledby="bm-title" aria-hidden="true">
  <div class="modal-card" style="max-width:600px">
    <div class="modal-hero sm">
      <img loading="lazy" decoding="async" id="bm-hero-img" src="" alt="Foto do Procedimento" />
      <button class="modal-close" type="button" aria-label="Fechar agendamento" data-close><span class="ms">close</span></button>
      <div class="modal-title">
        <span class="sc-chip"><span class="ms">event</span><span id="bm-badge">Massagens e Terapias Corporais</span></span>
        <h2 id="bm-title">Massagem Relaxante</h2>
      </div>
    </div>
    <div class="modal-body">
      <div class="field">
        <div style="display:flex;justify-content:space-between;align-items:center;gap:10px">
          <span class="label"><span class="ms">spa</span>Procedimento Selecionado</span>
          <button class="change-link" type="button" id="bm-change"><span class="ms" style="font-size:15px">swap_horiz</span>Trocar</button>
        </div>
        <div class="bm-selected">
          <div class="left"><span class="ic"><span class="ms">verified</span></span><div><b id="bm-display-title">Massagem Relaxante</b><small id="bm-display-category">Massagens e Terapias Corporais</small></div></div>
          <div class="right"><b id="bm-display-price">Sob consulta</b><small id="bm-display-package">Pacote: Sob consulta</small></div>
        </div>
        <div class="select-wrap" id="bm-change-wrap" hidden><select class="input" id="bm-service-select" aria-label="Escolher outro procedimento"></select></div>
      </div>
      <div class="field">
        <div style="display:flex;justify-content:space-between;align-items:center">
          <span class="label"><span class="ms">today</span>Dia de Preferência</span>
          <span style="font-size:12px;color:var(--violet);font-weight:500">Segunda a Sábado</span>
        </div>
        <div class="choice-grid days" id="bm-days">
          <button class="choice" type="button" data-day="Segunda-feira">SEG</button>
          <button class="choice" type="button" data-day="Terça-feira">TER</button>
          <button class="choice is-active" type="button" data-day="Quarta-feira">QUA</button>
          <button class="choice" type="button" data-day="Quinta-feira">QUI</button>
          <button class="choice" type="button" data-day="Sexta-feira">SEX</button>
          <button class="choice" type="button" data-day="Sábado">SÁB</button>
        </div>
      </div>
      <div class="field">
        <span class="label"><span class="ms">schedule</span>Turno de Atendimento</span>
        <div class="choice-grid slots" id="bm-slots">
          <button class="choice" type="button" data-slot="Manhã (08h às 12h)">Manhã<small>08h–12h</small></button>
          <button class="choice is-active" type="button" data-slot="Tarde (13h às 19h)">Tarde<small>13h–19h</small></button>
          <button class="choice" type="button" data-slot="Horário a Combinar">A Combinar<small>flexível</small></button>
        </div>
      </div>
      <div class="field-row">
        <div class="field">
          <label for="bm-input-name">Seu Nome Completo *</label>
          <input class="input" id="bm-input-name" type="text" placeholder="Como podemos te chamar?" autocomplete="name" />
          <span class="field-error" id="bm-name-error">Por favor, informe seu nome.</span>
        </div>
        <div class="field">
          <label for="bm-input-phone">WhatsApp / Celular *</label>
          <input class="input" id="bm-input-phone" type="tel" inputmode="tel" placeholder="(DDD) 9 0000-0000" autocomplete="tel" />
          <span class="field-error" id="bm-phone-error">Por favor, informe seu WhatsApp de contato.</span>
        </div>
      </div>
      <div class="field">
        <span class="label">Modalidade</span>
        <div class="choice-grid two" id="bm-plan">
          <button class="choice is-active" type="button" data-plan="Sessão Avulsa Individual">Sessão Individual<small id="bm-plan-ind">Sob consulta</small></button>
          <button class="choice" type="button" data-plan="Consultar opções de atendimento">Consultar opções<small id="bm-plan-pack">Sob consulta</small></button>
        </div>
      </div>
      <div class="field">
        <label for="bm-input-notes">Observações ou Região de Dor (Opcional)</label>
        <textarea class="input" id="bm-input-notes" rows="2" placeholder="Ex: dor nas costas, cansaço muscular, foco em relaxamento..."></textarea>
      </div>
      <div class="bm-strip"><span><span class="ms">verified_user</span>Atendimento mediante agendamento</span><b>Valores sob consulta</b></div>
      <button class="btn btn-primary btn-block" type="button" id="bm-submit" style="height:58px;text-transform:uppercase;letter-spacing:.08em;font-size:13px"><span class="ms">chat</span>Confirmar e Enviar via WhatsApp</button>
      <p class="form-hint" style="margin-top:-6px">A mensagem será formatada com os dados para Vladia Brito via WhatsApp.</p>
    </div>
  </div>
</div>

<script>
(function(){
  'use strict';
  /* =====================================================================
     SITE_CONFIG — ÁREA DE ADAPTAÇÃO PARA IA / NOVO CLIENTE
     Tudo que muda de cliente para cliente fica aqui:
       • brand       → nome, WhatsApp e Pix
       • IMG         → mapa central de imagens (trocar por "imagens/arquivo.webp")
       • categories  → cards de categoria (quantidade livre: 2, 4, 6...)
       • procedures  → serviços. Campo "pricing" aceita 3 formatos:
           { type:'consult' }                                   → "Sob consulta"
           { type:'single', value:'R$ 80,00', note:'Sessão' }   → valor único
           { type:'tiers', tiers:[ {label:'Individual', value:'R$ 80,00'},
                                   {label:'4 sessões', value:'R$ 70,00', per:'/sessão'},
                                   {label:'8 sessões', value:'R$ 60,00', per:'/sessão'} ] }
         Sem "pricing", o site usa price + packagePrice (formato atual).
     ===================================================================== */
  var SITE_CONFIG = {
    brand:{ name:'Vladia Brito', whatsapp:'5585992090392', instagram:'https://www.instagram.com/vladiabrittomassoterapia/', facebook:'', location:'', pixKey:'5585992090392', pixDisplay:'(85) 99209-0392', experienceYears:17, description:'Massoterapia há 17 anos, com foco em saúde e bem-estar.' },
    IMG:{ logo:'imagens/logomarca2.png', banner:'imagens/banner2.webp', fundo01:'imagens/fundo01.webp', fundo02:'imagens/fundo02.webp', fundo03:'imagens/fundo03.webp', fundo04:'imagens/fundo04.webp', profissional:'imagens/profissional.webp', catTodos:'imagens/001.webp', catCorporal:'imagens/Massagem Relaxante (1).webp', catDrenagem:'imagens/Drenagem Linfática.webp', catComplementar:'imagens/Acupuntura sem Agulhas.webp' },
    categories:[
      { id:'all', name:'Todos os serviços', kicker:'Menu Completo', icon:'spa', img:'catTodos', countLabel:'serviços disponíveis', title:'Cuidado Integral <em>para o seu Bem-Estar.</em>' },
      { id:'corporal', name:'Massagens e Relaxamento', kicker:'Relaxamento &amp; Conforto', icon:'self_improvement', img:'catCorporal', countLabel:'opções de massagem', chip:'Massagens e Relaxamento', title:'Massagens <em>e Relaxamento</em>' },
      { id:'drenagem', name:'Drenagem e Terapias', kicker:'Leveza &amp; Equilíbrio', icon:'spa', img:'catDrenagem', countLabel:'terapias complementares', chip:'Drenagem e Terapias Complementares', title:'Drenagem <em>e Terapias</em>' },
      { id:'complementar', name:'Terapias Corporais e Complementares', kicker:'Cuidado Corporal', icon:'healing', img:'catComplementar', countLabel:'técnicas corporais', chip:'Terapias Corporais e Complementares', title:'Terapias <em>Corporais</em>' }
    ]
  };;
  var WHATSAPP = SITE_CONFIG.brand.whatsapp;
  function imgOf(k){ return SITE_CONFIG.IMG[k] || k; }
  var CATS = {}, CAT_TITLES = {};
  SITE_CONFIG.categories.forEach(function(c){ CAT_TITLES[c.id]=c.title; if(c.id!=='all') CATS[c.id]={ label:c.chip||c.name, icon:c.icon }; });
  var procedures = {
    relaxante:{cat:'corporal',title:'Massagem Relaxante',badge:'MASSAGENS E RELAXAMENTO',category:'Massagens e Relaxamento',img:'imagens/Massagem Relaxante (1).webp',short:'Uma opção de massagem voltada ao relaxamento e ao bem-estar.',overview:'Atendimento de massagem relaxante para proporcionar uma pausa de cuidado e conforto.',benefits:['Momento dedicado ao autocuidado','Experiência de relaxamento corporal','Atendimento individualizado'],conducted:'Consulte Vladia para conhecer os detalhes e a disponibilidade desta terapia.'},
    tay:{cat:'corporal',title:'Tay Massagem',badge:'MASSAGENS E RELAXAMENTO',category:'Massagens e Relaxamento',img:'imagens/Tay Massagem.webp',short:'Técnica de massagem oferecida pela V.B Massoterapia.',overview:'Uma das opções de atendimento da V.B Massoterapia.',benefits:['Cuidado corporal','Atendimento individualizado','Informações sob consulta'],conducted:'Entre em contato para saber mais sobre a técnica e o atendimento.'},
    quick:{cat:'corporal',title:'Quick Massage na Cadeira',badge:'MASSAGENS E RELAXAMENTO',category:'Massagens e Relaxamento',img:'imagens/Quick Massage.webp',short:'Massagem realizada em cadeira, conforme disponibilidade de atendimento.',overview:'Opção de massagem na cadeira oferecida pela V.B Massoterapia.',benefits:['Praticidade','Cuidado em sessões específicas','Informações sob consulta'],conducted:'Consulte a profissional sobre formatos e disponibilidade.'},
    escalda:{cat:'corporal',title:'Escalda-Pés',badge:'MASSAGENS E RELAXAMENTO',category:'Massagens e Relaxamento',img:'imagens/Escalda-Pés Ritual.webp',short:'Um ritual de cuidado e conforto para os pés.',overview:'Escalda-pés oferecido como opção de cuidado e relaxamento.',benefits:['Momento de pausa','Cuidado com os pés','Bem-estar'],conducted:'Consulte Vladia para saber como o ritual é realizado.'},
    terapeutica:{cat:'complementar',title:'Massagem Terapêutica',badge:'TERAPIAS CORPORAIS',category:'Terapias Corporais',img:'imagens/Massagem Terapêutica.webp',short:'Massagem terapêutica voltada ao cuidado corporal.',overview:'Técnica de massagem disponível entre os serviços da profissional.',benefits:['Cuidado individualizado','Atenção às necessidades do corpo','Informações sob consulta'],conducted:'A abordagem é conversada com a profissional antes do atendimento.'},
    ventosas:{cat:'complementar',title:'Ventosaterapia',badge:'TERAPIAS CORPORAIS',category:'Terapias Corporais',img:'imagens/Ventosaterapia.webp',short:'Técnica complementar com ventosas.',overview:'Ventosaterapia oferecida pela V.B Massoterapia.',benefits:['Técnica complementar','Atendimento individualizado','Informações sob consulta'],conducted:'Consulte a profissional para entender a indicação e os cuidados necessários.'},
    coluna:{cat:'complementar',title:'Alinhamento de Coluna',badge:'TERAPIAS CORPORAIS',category:'Terapias Corporais',img:'imagens/Alinhamento de Coluna.webp',short:'Atendimento listado entre as terapias corporais da profissional.',overview:'Técnica de cuidado corporal disponível mediante consulta.',benefits:['Cuidado corporal','Avaliação individualizada','Informações sob consulta'],conducted:'Converse com Vladia para conhecer a abordagem e verificar se é adequada ao seu caso.'},
    miofascial:{cat:'complementar',title:'Liberação Miofascial',badge:'TERAPIAS CORPORAIS',category:'Terapias Corporais',img:'imagens/Liberação Miofascial.webp',short:'Técnica manual complementar voltada ao cuidado das fáscias.',overview:'Liberação miofascial disponível no catálogo da V.B Massoterapia.',benefits:['Técnica manual','Cuidado individualizado','Informações sob consulta'],conducted:'Consulte a profissional sobre a técnica, avaliação e cuidados.'},
    acupuntura:{cat:'complementar',title:'Acupuntura sem Agulhas',badge:'TERAPIAS COMPLEMENTARES',category:'Terapias Complementares',img:'imagens/Acupuntura sem Agulhas.webp',short:'Terapia complementar sem utilização de agulhas.',overview:'Opção de terapia complementar oferecida pela profissional.',benefits:['Técnica sem agulhas','Atendimento individualizado','Informações sob consulta'],conducted:'Converse com Vladia para saber mais sobre a técnica e suas indicações.'},
    drenagem:{cat:'drenagem',title:'Drenagem Linfática',badge:'DRENAGEM E TERAPIAS',category:'Drenagem e Terapias Complementares',img:'imagens/Drenagem Linfática.webp',short:'Técnica de drenagem linfática disponível na V.B Massoterapia.',overview:'Atendimento de drenagem linfática oferecido pela profissional.',benefits:['Cuidado corporal','Atendimento individualizado','Informações sob consulta'],conducted:'Consulte a profissional para conhecer a abordagem e as condições do atendimento.'},
    reflexologia:{cat:'drenagem',title:'Reflexologia Podal',badge:'DRENAGEM E TERAPIAS',category:'Drenagem e Terapias Complementares',img:'imagens/Reflexologia Podal.webp',short:'Técnica de cuidado que trabalha pontos reflexos nos pés.',overview:'Reflexologia podal oferecida entre as terapias complementares.',benefits:['Cuidado dedicado aos pés','Momento de relaxamento','Informações sob consulta'],conducted:'Entre em contato para saber mais sobre a sessão.'}
  };;
  var KEYS = Object.keys(procedures);
  /* ===== Motor de preços flexível ===== */
  function getPricing(p){
    if(p.pricing) return p.pricing;
    if(p.price && p.packagePrice) return { type:'tiers', tiers:[ {label:'Individual', value:p.price}, {label:'Consultar opções', value:p.packagePrice.replace('/sessão',''), per:'/sessão'} ] };
    if(p.price) return { type:'single', value:p.price, note:'Individual' };
    return { type:'consult' };
  }
  KEYS.forEach(function(k){
    var p = procedures[k], pr = getPricing(p);
    if(pr.type==='consult'){ p.price = p.price || 'Sob consulta'; p.packagePrice = p.packagePrice || 'Sob consulta'; }
    else if(pr.type==='single'){ p.price = p.price || pr.value; p.packagePrice = p.packagePrice || pr.value; }
    else { p.price = p.price || pr.tiers[0].value; var t2 = pr.tiers[1] || pr.tiers[0]; p.packagePrice = p.packagePrice || (t2.value+(t2.per||'')); }
  });
  function pricesHTML(p){
    var pr = getPricing(p);
    if(pr.type==='consult') return '<div class="prices p-1"><div class="price consult"><small>Investimento</small><b>Sob consulta</b></div></div>';
    if(pr.type==='single') return '<div class="prices p-1"><div class="price"><small>'+(pr.note||'Valor')+'</small><b>'+pr.value+'</b></div></div>';
    var t = pr.tiers;
    return '<div class="prices p-'+Math.min(t.length,3)+'">'+t.map(function(x){ return '<div class="price"><small>'+x.label+'</small><b>'+x.value+(x.per?' <i>'+x.per+'</i>':'')+'</b></div>'; }).join('')+'</div>';
  }

  /* ===== Render dinâmico das categorias (lê SITE_CONFIG.categories) ===== */
  (function(){
    var dk = document.querySelector('.cat-deck'); if(!dk) return;
    var cs = SITE_CONFIG.categories, tot = cs.length, pad = function(n){ return (n<10?'0':'')+n; };
    dk.innerHTML = cs.map(function(c,i){
      var n = c.id==='all' ? KEYS.length : KEYS.filter(function(k){ return procedures[k].cat===c.id; }).length;
      var im = imgOf(c.img);
      return '<button class="cat-card'+(i===0?' is-active':'')+'" role="tab" id="tab-'+c.id+'" aria-selected="'+(i===0)+'" aria-controls="cat-stage" tabindex="'+(i===0?0:-1)+'" data-filter="'+c.id+'" data-kicker="'+c.kicker+'" data-icon="'+c.icon+'" data-img="'+im+'">'+
        '<span class="cc-media"><img decoding="async" src="'+im+'" alt="" /></span>'+
        '<span class="cc-shade"></span><span class="cc-spot"></span><span class="cc-hud"></span>'+
        '<span class="cc-top"><span class="cc-index">'+pad(i+1)+'<small>/'+pad(tot)+'</small></span><span class="cc-icon"><span class="ms">'+c.icon+'</span></span></span>'+
        '<span class="cc-body"><span class="cc-kicker">'+c.kicker+'</span><span class="cc-name">'+c.name+'</span><span class="cc-count"><b>'+n+'</b> '+c.countLabel.replace(/(^|\s)\S/g,function(s){return s.toUpperCase();})+'</span>'+
        '<span class="cc-cta"><span class="live"></span><span class="t-on">Em exibição<span class="t-below"> abaixo</span></span><span class="t-go">Explorar</span><span class="ms">south</span></span></span></button>';
    }).join('');
    var st = document.querySelector('.stage-steps'); if(st) st.innerHTML = cs.map(function(c,i){ return '<span'+(i===0?' class="on"':'')+'></span>'; }).join('');
  })();

  function $(s,c){return (c||document).querySelector(s)}
  function $$(s,c){return Array.prototype.slice.call((c||document).querySelectorAll(s))}
  function num(p){return p.replace('R$ ','R$ ').replace(',00','')}

  /* ===== Render dos cards ===== */
  var grid = $('#services-grid');
  grid.innerHTML = KEYS.map(function(k,i){
    var p = procedures[k], c = CATS[p.cat];
    var pack = p.packagePrice.replace('/sessão','');
    return '<article class="service-card is-visible" data-cat="'+p.cat+'" data-service="'+k+'" data-delay="'+((i%3)+1)+'" tabindex="0" aria-label="'+p.title+' — ver detalhes">'+
      '<div class="sc-media"><img decoding="async" src="'+p.img+'" alt="'+p.title+'" loading="lazy" />'+
        '<span class="sc-chip sc-cat"><span class="ms">'+c.icon+'</span>'+c.label+'</span>'+
        '<span class="sc-chip sc-time"><span class="ms">schedule</span>'+(p.duration||'Duração sob consulta')+'</span>'+
        '<span class="sc-view" aria-hidden="true"><span class="ms">open_in_full</span></span></div>'+
      '<div class="sc-body"><h3>'+p.title+'</h3><p>'+p.short+'</p>'+
        pricesHTML(p)+
        '<div class="sc-actions"><button class="btn btn-outline" type="button" data-details="'+k+'"><span class="ms">visibility</span>Ver Detalhes</button>'+
        '<button class="btn btn-primary" type="button" data-book="'+k+'"><span class="ms">calendar_month</span>Agendar</button></div>'+
      '</div></article>';
  }).join('');

  /* ===== Selects de procedimento ===== */
  var mainSelect = $('#booking-service'), bmSelect = $('#bm-service-select');
  KEYS.forEach(function(k){
    var p = procedures[k];
    var ind = num(p.price), pack = num(p.packagePrice.replace('/sessão',''));
    var o = document.createElement('option');
    o.value = p.title+' — valores sob consulta';
    o.textContent = p.title+' — valores sob consulta';
    mainSelect.appendChild(o);
    var o2 = document.createElement('option'); o2.value = k; o2.textContent = p.title+' — '+p.price; bmSelect.appendChild(o2);
  });

  /* ===== Filtro de categorias (V6: deck + palco integrado) ===== */
  var tabs = $$('.cat-card');
  var shell = $('#cat-shell'), deck = $('.cat-deck'), stage = $('#cat-stage'), head = $('#stage-head');
  var countNums = {}, countLabels = {};
  SITE_CONFIG.categories.forEach(function(c){ countNums[c.id] = c.id==='all' ? KEYS.length : KEYS.filter(function(k){ return procedures[k].cat===c.id; }).length; countLabels[c.id] = c.countLabel; });
  var current = 'all', linkRaf = 0, linkUntil = 0;
  function placeLink(){
    var a = $('.cat-card.is-active'); if(!a || !shell) return;
    var sr = shell.getBoundingClientRect(), r = a.getBoundingClientRect();
    var w = r.width, x = r.left - sr.left;
    x = Math.max(0, Math.min(x, sr.width - w));
    shell.style.setProperty('--bx', x.toFixed(1)+'px');
    shell.style.setProperty('--bw', w.toFixed(1)+'px');
    var F = 34, lx = Math.max(0, x - F), rx = Math.min(sr.width, x + w + F);
    shell.style.setProperty('--lx', lx.toFixed(1)+'px');
    shell.style.setProperty('--lw', (rx - lx).toFixed(1)+'px');
    shell.style.setProperty('--li', (x - lx).toFixed(1)+'px');
    shell.style.setProperty('--ri', (rx - x - w).toFixed(1)+'px');
    shell.style.setProperty('--mid', (x - lx + w/2).toFixed(1)+'px');
  }
  function trackLink(ms){
    linkUntil = performance.now() + (ms||900);
    if(linkRaf) return;
    (function loop(){ placeLink(); if(performance.now() < linkUntil){ linkRaf = requestAnimationFrame(loop); } else { linkRaf = 0; } })();
  }
  function filterCategory(cat){
    var idx = 0, active = null;
    tabs.forEach(function(t,i){ var on = t.dataset.filter===cat; if(on){ idx=i; active=t; } t.classList.toggle('is-active',on); t.setAttribute('aria-selected',on); t.setAttribute('tabindex', on?'0':'-1'); });
    if(!active) return;
    stage.setAttribute('aria-labelledby', active.id);
    $$('.stage-steps span').forEach(function(s,i){ s.classList.toggle('on', i===idx); });
    if(window.matchMedia('(max-width:1000px)').matches && deck.scrollWidth > deck.clientWidth){
      deck.scrollTo({ left: active.offsetLeft - (deck.clientWidth - active.offsetWidth)/2, behavior:'smooth' });
    }
    trackLink(1000);
    var changed = cat !== current; current = cat;
    function fillHead(){
      $('#stage-img').src = active.dataset.img;
      $('#stage-icon').textContent = active.dataset.icon;
      $('#stage-index').textContent = (idx<9?'0':'')+(idx+1);
      $('#stage-kicker').innerHTML = active.dataset.kicker;
      $('#catalog-title').innerHTML = CAT_TITLES[cat];
      $('#stage-num').textContent = countNums[cat];
      $('#catalog-count').textContent = countLabels[cat];
    }
    if(changed){
      head.classList.add('is-switching');
      setTimeout(function(){ fillHead(); head.classList.remove('is-switching'); }, 240);
      stage.classList.remove('is-scanning'); void stage.offsetWidth; stage.classList.add('is-scanning');
    } else { fillHead(); }
    var cards = $$('.service-card', grid);
    cards.forEach(function(card){ if(!card.classList.contains('is-hidden')) card.classList.add('is-hiding'); });
    setTimeout(function(){
      var n = 0;
      cards.forEach(function(card){
        var show = cat==='all' || card.dataset.cat===cat;
        card.classList.remove('is-hiding','is-entering');
        card.classList.toggle('is-hidden',!show);
        if(show){ card.classList.add('is-visible'); card.style.animationDelay=(n*70)+'ms'; void card.offsetWidth; card.classList.add('is-entering'); n++; }
      });
    },260);
  }
  window.filterCategory = filterCategory;
  if('IntersectionObserver' in window){
    var offIO = new IntersectionObserver(function(es){ es.forEach(function(e){ e.target.classList.toggle('is-offscreen', !e.isIntersecting); }); }, { rootMargin:'200px 0px' });
    $$('main section, body > section, footer').forEach(function(s){ offIO.observe(s); });
  }
  tabs.forEach(function(t,i){
    t.addEventListener('click',function(){ filterCategory(t.dataset.filter); });
    t.addEventListener('pointermove',function(e){ var r=t.getBoundingClientRect(); t.style.setProperty('--mx',(e.clientX-r.left)+'px'); t.style.setProperty('--my',(e.clientY-r.top)+'px'); });
    t.addEventListener('keydown',function(e){
      var k = e.key, j = -1;
      if(k==='ArrowRight'||k==='ArrowDown') j = (i+1)%tabs.length;
      else if(k==='ArrowLeft'||k==='ArrowUp') j = (i-1+tabs.length)%tabs.length;
      else if(k==='Home') j = 0; else if(k==='End') j = tabs.length-1;
      if(j<0) return; e.preventDefault(); tabs[j].focus(); filterCategory(tabs[j].dataset.filter);
    });
  });
  if(deck) deck.addEventListener('scroll', placeLink, { passive:true });
  window.addEventListener('resize', function(){ trackLink(300); });
  window.addEventListener('load', function(){ trackLink(600); });
  if(window.ResizeObserver && shell){ new ResizeObserver(function(){ placeLink(); }).observe(shell); }
  placeLink();
  filterCategory('all');
  window.addEventListener('load',function(){ filterCategory(current||'all'); });

  /* ===== Modais ===== */
  var activeKey = 'relaxante', lastFocus = null;
  var booking = { day:'Quarta-feira', slot:'Tarde (13h às 19h)', plan:'Sessão Avulsa Individual' };
  function openModal(id){
    var m = document.getElementById(id); lastFocus = document.activeElement;
    m.classList.add('is-open'); m.setAttribute('aria-hidden','false'); document.body.classList.add('no-scroll');
    m.querySelector('.modal-card').scrollTop = 0;
    setTimeout(function(){ var c = m.querySelector('[data-close]'); if(c) c.focus({preventScroll:true}); },60);
  }
  function closeModal(id){
    var m = document.getElementById(id); if(!m.classList.contains('is-open')) return;
    m.classList.remove('is-open'); m.setAttribute('aria-hidden','true');
    if(!$('.modal.is-open')) document.body.classList.remove('no-scroll');
    if(lastFocus && lastFocus.focus) lastFocus.focus({preventScroll:true});
  }
  function openProcedureDetails(key){
    var d = procedures[key] || procedures.relaxante; activeKey = procedures[key] ? key : 'relaxante';
    $('#pdm-img').src = d.img; $('#pdm-img').alt = d.title;
    $('#pdm-title').textContent = d.title; $('#pdm-badge').textContent = d.badge;
    $('#pdm-overview').textContent = d.overview; $('#pdm-conducted').textContent = d.conducted;
    $('#pdm-duration').textContent = d.duration || 'Sob consulta'; $('#pdm-price').textContent = d.price;
    $('#pdm-benefits').innerHTML = d.benefits.map(function(b){ return '<li><span class="ms">check_circle</span><span>'+b+'</span></li>'; }).join('');
    openModal('procedure-details-modal');
  }
  function fillBooking(key){
    var d = procedures[key] || procedures.relaxante; activeKey = procedures[key] ? key : 'relaxante';
    $('#bm-hero-img').src = d.img; $('#bm-hero-img').alt = d.title;
    $('#bm-title').textContent = d.title; $('#bm-badge').textContent = d.category;
    $('#bm-display-title').textContent = d.title; $('#bm-display-category').textContent = d.category;
    $('#bm-display-price').textContent = d.price; $('#bm-display-package').textContent = 'Valores e opções sob consulta';
    $('#bm-plan-ind').textContent = 'Sob consulta'; $('#bm-plan-pack').textContent = 'Consulte opções';
    bmSelect.value = activeKey;
  }
  function openDirectBooking(key){
    fillBooking(key);
    $('#bm-change-wrap').hidden = true;
    $$('.field-error').forEach(function(e){e.classList.remove('show')}); $$('.input.is-invalid').forEach(function(e){e.classList.remove('is-invalid')});
    openModal('booking-modal');
  }
  window.openProcedureDetails = openProcedureDetails;
  window.openDirectBooking = openDirectBooking;
  window.openBookingModal = function(name){
    var found = 'relaxante';
    if(name){ var l = String(name).toLowerCase(); KEYS.forEach(function(k){ if(l.indexOf(k)>-1 || l.indexOf(procedures[k].title.toLowerCase())>-1) found = k; }); }
    openDirectBooking(found);
  };

  document.addEventListener('click',function(e){
    var t = e.target;
    var book = t.closest('[data-book]');
    if(book){ e.stopPropagation(); closeMenu(); closeModal('procedure-details-modal'); openDirectBooking(book.dataset.book); return; }
    var det = t.closest('[data-details]');
    if(det){ e.stopPropagation(); openProcedureDetails(det.dataset.details); return; }
    var card = t.closest('.service-card');
    if(card){ openProcedureDetails(card.dataset.service); return; }
    if(t.closest('[data-close]')){ closeModal(t.closest('.modal').id); return; }
    if(t.classList && t.classList.contains('modal')){ closeModal(t.id); }
  });
  grid.addEventListener('keydown',function(e){
    if((e.key==='Enter'||e.key===' ') && e.target.classList.contains('service-card')){ e.preventDefault(); openProcedureDetails(e.target.dataset.service); }
  });
  document.addEventListener('keydown',function(e){ if(e.key==='Escape'){ closeModal('booking-modal'); closeModal('procedure-details-modal'); closeMenu(); } });
  $('#pdm-book').addEventListener('click',function(){ var k = activeKey; closeModal('procedure-details-modal'); setTimeout(function(){ openDirectBooking(k); },180); });
  $('#bm-change').addEventListener('click',function(){ var w = $('#bm-change-wrap'); w.hidden = !w.hidden; if(!w.hidden) bmSelect.focus(); });
  bmSelect.addEventListener('change',function(){ fillBooking(bmSelect.value); });

  function choiceGroup(sel, attr, keyName){
    $$(sel+' .choice').forEach(function(btn){
      btn.addEventListener('click',function(){
        $$(sel+' .choice').forEach(function(b){ b.classList.remove('is-active'); });
        btn.classList.add('is-active'); booking[keyName] = btn.getAttribute(attr);
      });
    });
  }
  choiceGroup('#bm-days','data-day','day');
  choiceGroup('#bm-slots','data-slot','slot');
  choiceGroup('#bm-plan','data-plan','plan');

  // Máscara de telefone
  var phone = $('#bm-input-phone');
  phone.addEventListener('input',function(){
    var v = phone.value.replace(/\D/g,'').slice(0,11);
    if(v.length>10) v = v.replace(/^(\d{2})(\d{5})(\d{0,4}).*/,'($1) $2-$3');
    else if(v.length>6) v = v.replace(/^(\d{2})(\d{4})(\d{0,4}).*/,'($1) $2-$3');
    else if(v.length>2) v = v.replace(/^(\d{2})(\d{0,5})/,'($1) $2');
    else if(v.length>0) v = v.replace(/^(\d*)/,'($1');
    phone.value = v;
  });
  function invalid(input, errId, bad){ input.classList.toggle('is-invalid',bad); $('#'+errId).classList.toggle('show',bad); return bad; }

  $('#bm-submit').addEventListener('click',function(){
    var nameI = $('#bm-input-name'), notes = $('#bm-input-notes').value.trim();
    var name = nameI.value.trim(), ph = phone.value.trim();
    var badName = invalid(nameI,'bm-name-error',!name);
    var badPhone = invalid(phone,'bm-phone-error',!ph);
    if(badName){ nameI.focus(); return; }
    if(badPhone){ phone.focus(); return; }
    var p = procedures[activeKey];
    var msg = 'Olá, Vladia Brito! Gostaria de agendar um horário:\n\n';
    msg += '*Nome:* '+name+'\n';
    msg += '*WhatsApp:* '+ph+'\n';
    msg += '*Procedimento:* '+p.title+' ('+p.category+')\n';
    msg += '*Valor:* '+(booking.plan.indexOf('Pacote')>-1 ? p.packagePrice : p.price)+' | '+booking.plan+'\n';
    msg += '*Dia preferido:* '+booking.day+'\n';
    msg += '*Turno de preferência:* '+booking.slot+'\n';
    if(notes) msg += '*Observações/Queixa:* '+notes+'\n';
    msg += '\nAguardando a confirmação da agenda!';
    window.open('https://wa.me/'+WHATSAPP+'?text='+encodeURIComponent(msg),'_blank');
    closeModal('booking-modal');
    showToast('Abrindo o WhatsApp com sua solicitação…');
  });

  // Formulário principal da seção Reserva Exclusiva: personalizado e enviado diretamente ao WhatsApp.
  $('#custom-booking-form').addEventListener('submit',function(e){
    e.preventDefault();
    var nameI = $('#booking-name'), name = nameI.value.trim();
    if(invalid(nameI,'booking-name-error',!name)){ nameI.focus(); return; }
    var notes = $('#booking-notes').value.trim();
    var msg = 'Olá, Vladia Brito! Gostaria de solicitar uma reserva de horário:\n\n';
    msg += '*Nome:* '+name+'\n';
    msg += '*Procedimento:* '+mainSelect.value+'\n';
    if(notes) msg += '*Observações:* '+notes+'\n';
    msg += '\nPoderia me informar os horários disponíveis e os valores para esse atendimento?';
    window.open('https://wa.me/'+WHATSAPP+'?text='+encodeURIComponent(msg),'_blank');
    showToast('Abrindo o WhatsApp com sua solicitação…');
  });
  $('#booking-name').addEventListener('input',function(){ if(this.value.trim()) invalid(this,'booking-name-error',false); });

  /* ===== Pix ===== */
  var toastTimer;
  function showToast(text){
    var t = $('#toast'); $('#toast-text').textContent = text; t.classList.add('is-visible');
    clearTimeout(toastTimer); toastTimer = setTimeout(function(){ t.classList.remove('is-visible'); },2600);
  }
  var _bcp=$('#btn-copy-pix'); _bcp && _bcp.addEventListener('click',function(){
    var btn = this, key = '85992090392';
    function done(){
      btn.innerHTML = '<span class="ms">check</span><span>Copiado!</span>';
      showToast('Chave Pix copiada: (85) 99209-0392');
      setTimeout(function(){ btn.innerHTML = '<span class="ms">content_copy</span><span>Copiar chave</span>'; },2500);
    }
    if(navigator.clipboard && window.isSecureContext){ navigator.clipboard.writeText(key).then(done,fallback); } else fallback();
    function fallback(){ var ta=document.createElement('textarea'); ta.value=key; ta.style.position='fixed'; ta.style.opacity='0'; document.body.appendChild(ta); ta.select(); try{document.execCommand('copy');}catch(err){} document.body.removeChild(ta); done(); }
  });

  /* ===== FAQ ===== */
  $$('.faq-q').forEach(function(q){
    q.addEventListener('click',function(){
      var item = q.parentElement, open = !item.classList.contains('is-open');
      $$('.faq-item').forEach(function(i){ i.classList.remove('is-open'); i.querySelector('.faq-q').setAttribute('aria-expanded','false'); });
      if(open){ item.classList.add('is-open'); q.setAttribute('aria-expanded','true'); }
    });
  });

  /* ===== Menu mobile ===== */
  var menu = $('#mobile-menu');
  function openMenu(){ menu.classList.add('is-open'); menu.setAttribute('aria-hidden','false'); $('#menu-open').setAttribute('aria-expanded','true'); document.body.classList.add('no-scroll'); }
  function closeMenu(){ if(!menu.classList.contains('is-open')) return; menu.classList.remove('is-open'); menu.setAttribute('aria-hidden','true'); $('#menu-open').setAttribute('aria-expanded','false'); if(!$('.modal.is-open')) document.body.classList.remove('no-scroll'); }
  $('#menu-open').addEventListener('click',openMenu);
  $('#menu-close').addEventListener('click',closeMenu);
  menu.addEventListener('click',function(e){ if(e.target===menu || e.target.closest('nav a')) closeMenu(); });

  /* ===== Header, topo, navegação ativa ===== */
  var header = $('#site-header'), toTop = $('#to-top');
  function onScroll(){ var y = window.scrollY; header.classList.toggle('is-scrolled', y>20); toTop.classList.toggle('is-visible', y>900); }
  window.addEventListener('scroll',onScroll,{passive:true}); onScroll();
  toTop.addEventListener('click',function(){ window.scrollTo({top:0,behavior:'smooth'}); });

  if('IntersectionObserver' in window){
    var navLinks = $$('.nav a');
    var secObs = new IntersectionObserver(function(entries){
      entries.forEach(function(en){
        if(en.isIntersecting){ var id = en.target.id; if(id==='formas-pagamento'||id==='duvidas') id='contato';
          navLinks.forEach(function(a){ a.classList.toggle('is-active', a.dataset.nav===id); }); }
      });
    },{rootMargin:'-45% 0px -50% 0px'});
    $$('main section[id]').forEach(function(s){ secObs.observe(s); });

    var revObs = new IntersectionObserver(function(entries){
      entries.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add('is-visible'); revObs.unobserve(en.target); } });
    },{threshold:0, rootMargin:'0px 0px -40px 0px'});
    $$('.reveal').forEach(function(el){ revObs.observe(el); });
    function revealPassed(){ $$('.reveal:not(.is-visible)').forEach(function(el){ if(el.getBoundingClientRect().top < window.innerHeight){ el.classList.add('is-visible'); revObs.unobserve(el); } }); }
    window.addEventListener('scroll', revealPassed, { passive:true });
    window.addEventListener('load', function(){ setTimeout(revealPassed, 300); });
  } else {
    $$('.reveal').forEach(function(el){ el.classList.add('is-visible'); });
  }
})();

/* ---------- Cartão 3D da profissional ---------- */
(function(){
  var flip=document.getElementById('portrait-flip'); if(!flip) return;
  var canHover=window.matchMedia('(hover:hover) and (pointer:fine)');
  var lastPointer='';
  function set(on){
    flip.setAttribute('aria-pressed',on?'true':'false');
    flip.setAttribute('aria-label',on?'Virar cartão: mostrar a foto de Vladia Brito':'Virar cartão: mostrar a logomarca de Vladia Brito');
  }
  flip.addEventListener('pointerdown',function(e){lastPointer=e.pointerType;});
  flip.addEventListener('pointerenter',function(e){if(e.pointerType==='mouse'&&canHover.matches) set(true);});
  flip.addEventListener('pointerleave',function(e){if(e.pointerType==='mouse'&&canHover.matches) set(false);});
  flip.addEventListener('click',function(e){
    /* No desktop com mouse o hover já controla; toque e teclado alternam. */
    if(e.detail>0&&lastPointer==='mouse'&&canHover.matches) return;
    set(flip.getAttribute('aria-pressed')!=='true');
  });
})();
</script>

<script>
(function(){
  var hv=document.querySelector('.hero-visual'), tilt=document.querySelector('.logo-tilt');
  if(!hv||!tilt||!window.matchMedia) return;
  if(!matchMedia('(hover:hover) and (pointer:fine)').matches||matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  hv.addEventListener('pointermove',function(e){
    var r=hv.getBoundingClientRect(), x=(e.clientX-r.left)/r.width-.5, y=(e.clientY-r.top)/r.height-.5;
    tilt.style.transform='perspective(900px) rotateY('+(x*16).toFixed(2)+'deg) rotateX('+(-y*12).toFixed(2)+'deg) scale(1.03)';
  });
  hv.addEventListener('pointerleave',function(){ tilt.style.transform=''; });
})();
</script>

<script>
(function(){var sec=document.getElementById('formas-pagamento');if(!sec)return;var els=sec.querySelectorAll('.scroll-reveal');
if(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('revealed')});return;}
var o=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('revealed');o.unobserve(e.target)}})},{threshold:.15});els.forEach(function(e){o.observe(e)});})();
(function(){var g=document.querySelector('.t-grid');if(!g)return;var cards=[].slice.call(g.querySelectorAll('.t-card'));
var c=document.createElement('div');c.className='t-ctrl';c.innerHTML='<button class="t-arrow" type="button" aria-label="Depoimento anterior"><span class="ms">chevron_left</span></button><div class="t-dots"></div><button class="t-arrow" type="button" aria-label="Próximo depoimento"><span class="ms">chevron_right</span></button>';
g.insertAdjacentElement('afterend',c);var dots=c.querySelector('.t-dots'),cur=0,timer,user=false;
cards.forEach(function(card,i){var b=document.createElement('button');b.type='button';b.setAttribute('aria-label','Ver depoimento '+(i+1));b.onclick=function(){user=true;go(i)};dots.appendChild(b)});
function go(i){i=(i+cards.length)%cards.length;var el=cards[i];g.scrollTo({left:el.offsetLeft-(g.clientWidth-el.offsetWidth)/2,behavior:'smooth'})}
function mark(i){cur=i;cards.forEach(function(el,k){el.classList.toggle('is-current',k===i)});[].forEach.call(dots.children,function(d,k){d.classList.toggle('on',k===i)})}
var arrows=c.querySelectorAll('.t-arrow');arrows[0].onclick=function(){user=true;go(cur-1)};arrows[1].onclick=function(){user=true;go(cur+1)};
var raf;g.addEventListener('scroll',function(){cancelAnimationFrame(raf);raf=requestAnimationFrame(function(){var mid=g.scrollLeft+g.clientWidth/2,best=0,bd=1e9;cards.forEach(function(el,k){var d=Math.abs(el.offsetLeft+el.offsetWidth/2-mid);if(d<bd){bd=d;best=k}});mark(best)})},{passive:true});
g.addEventListener('touchstart',function(){user=true},{passive:true});
mark(0);var red=window.matchMedia('(prefers-reduced-motion: reduce)').matches;
timer=setInterval(function(){if(user||red||window.innerWidth>640)return;var r=g.getBoundingClientRect();if(r.top<innerHeight&&r.bottom>0)go(cur+1)},5200);})();
</script>

<script>

(function(){
  var sec = document.getElementById('formas-pagamento');
  if (!sec) return;
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var fine = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
  var deck = document.getElementById('pgDeck');
  var sw = document.getElementById('pgSwitch');
  var glider = sw.querySelector('.pg-switch-glider');
  var tabs = Array.prototype.slice.call(sw.querySelectorAll('.pg-tab'));
  var slots = Array.prototype.slice.call(deck.querySelectorAll('.pg-slot'));
  var liveBox = document.getElementById('pgLive');
  var liveText = document.getElementById('pgLiveText');
  var ORDER = ['dinheiro', 'pix', 'cartao'];
  var CYCLE_MS = 4800;
  /* [CLIENTE] Mensagens da barra de status de cada forma de pagamento. */
  var PG_MSG = {
    dinheiro: 'Dinheiro: consulte a Vladia sobre as condições para pagamento em espécie.',
    pix: 'Pix: pagamento instantâneo e sem taxas. Copie a chave (telefone) da Vladia no cartão do Pix.',
    cartao: 'Cartão: consulte a Vladia sobre disponibilidade, bandeiras e condições de crédito ou débito.'
  };
  var current = null, timers = {}, autoTimer = null, userTook = false, inView = false;

  function rgbVar(name){ var v = getComputedStyle(document.documentElement).getPropertyValue(name).trim().split(/\s+/); return v.length === 3 ? 'rgb(' + v.join(',') + ')' : '#c08'; }
  var COLORS = {
    dinheiro: [rgbVar('--dourado'), rgbVar('--ouro-claro'), rgbVar('--areia'), rgbVar('--caramelo')],
    pix: [rgbVar('--pix'), rgbVar('--pix-deep'), rgbVar('--creme-card'), rgbVar('--dourado')],
    cartao: [rgbVar('--caramelo'), rgbVar('--dourado'), rgbVar('--bege-rosado'), rgbVar('--marrom-escuro')]
  };

  /* QR decorativo (não escaneável) gerado de forma determinística. */
  var qr = document.getElementById('pgQr');
  if (qr){
    var n = 21, html = '', seed = 11;
    var rnd = function(){ seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };
    for (var y = 0; y < n; y++) for (var x = 0; x < n; x++){
      var on, fx, fy, finder = (x < 7 && y < 7) || (x >= n - 7 && y < 7) || (x < 7 && y >= n - 7);
      if (finder){ fx = x < 7 ? x : x - (n - 7); fy = y < 7 ? y : y - (n - 7); on = fx === 0 || fx === 6 || fy === 0 || fy === 6 || (fx >= 2 && fx <= 4 && fy >= 2 && fy <= 4); }
      else if (x >= 7 && x <= 13 && y >= 7 && y <= 13) on = false;
      else on = rnd() > .5;
      if (on) html += '<rect x="' + x + '.06" y="' + y + '.06" width=".88" height=".88" rx=".2" style="--q:' + Math.round(((x + y) * 60) % 3000) + '"/>';
    }
    qr.innerHTML = html;
  }

  var dots = document.createElement('div');
  dots.className = 'pg-dots'; dots.setAttribute('role', 'group'); dots.setAttribute('aria-label', 'Cartões de pagamento');
  ORDER.forEach(function(k){
    var b = document.createElement('button'); b.type = 'button'; b.dataset.pg = k;
    b.setAttribute('aria-label', 'Ver ' + ({dinheiro:'Dinheiro',pix:'Pix',cartao:'Cartão'})[k]);
    b.addEventListener('click', function(){ takeOver(); activate(k, 'user'); });
    dots.appendChild(b);
  });
  deck.insertAdjacentElement('afterend', dots);
  var swipe = document.createElement('span'); swipe.className = 'pg-swipe'; swipe.setAttribute('aria-hidden', 'true'); swipe.textContent = '← Deslize para ver as opções →';
  dots.insertAdjacentElement('afterend', swipe);
  function isCarousel(){ return window.matchMedia('(max-width: 899.98px)').matches; }
  function slotOf(key){ for (var i = 0; i < slots.length; i++) if (slots[i].dataset.pg === key) return slots[i]; return null; }
  function moveGlider(){
    var t = sw.querySelector('.pg-tab.is-active'); if (!t) return;
    glider.style.width = t.offsetWidth + 'px';
    glider.style.transform = 'translateX(' + t.offsetLeft + 'px)';
  }
  function scrollDeckTo(slot){
    if (!isCarousel() || !slot) return;
    var left = slot.offsetLeft - (deck.clientWidth - slot.offsetWidth) / 2;
    deck.scrollTo({ left: left, behavior: reduce ? 'auto' : 'smooth' });
  }

  function confetti(el, colors){
    if (reduce) return;
    var r = el.getBoundingClientRect();
    var wrap = document.createElement('div');
    wrap.className = 'pg-confetti';
    wrap.style.left = (r.left + r.width / 2) + 'px';
    wrap.style.top = (r.top + Math.min(r.height * .3, 140)) + 'px';
    document.body.appendChild(wrap);
    for (var i = 0; i < 38; i++){
      (function(i){
        var p = document.createElement('i');
        var a = Math.random() * Math.PI * 2, v = 70 + Math.random() * 170;
        var dx = Math.cos(a) * v, dy = Math.sin(a) * v - 70;
        p.style.background = colors[i % colors.length];
        p.style.width = (5 + Math.random() * 5) + 'px';
        p.style.height = (7 + Math.random() * 9) + 'px';
        if (i % 3 === 0) p.style.borderRadius = '50%';
        wrap.appendChild(p);
        p.animate([
          { transform: 'translate(-50%,-50%) rotate(0deg) scale(1)', opacity: 1 },
          { transform: 'translate(' + dx + 'px,' + (dy + 160) + 'px) rotate(' + (Math.random() * 900 - 450) + 'deg) scale(.6)', opacity: 0 }
        ], { duration: 1100 + Math.random() * 800, easing: 'cubic-bezier(.12,.7,.3,1)', fill: 'forwards' });
      })(i);
    }
    setTimeout(function(){ wrap.remove(); }, 2100);
  }

  function coinRain(host){
    if (reduce || !host) return;
    var h = host.clientHeight;
    for (var i = 0; i < 16; i++){
      (function(i){
        var c = document.createElement('span');
        c.className = 'pg-fall-coin'; c.textContent = 'R$';
        c.style.left = (6 + Math.random() * 84) + '%';
        host.appendChild(c);
        var anim = c.animate([
          { transform: 'translate(-50%,-40px) rotate(0deg) rotateY(0deg)', opacity: 0 },
          { opacity: 1, offset: .12 },
          { transform: 'translate(-50%,' + (h + 30) + 'px) rotate(' + (Math.random() * 540 - 270) + 'deg) rotateY(900deg)', opacity: .95 }
        ], { duration: 900 + Math.random() * 700, delay: i * 60, easing: 'cubic-bezier(.5,0,.75,1)', fill: 'backwards' });
        anim.onfinish = function(){ c.remove(); };
      })(i);
    }
  }

  function clearT(key){ (timers[key] || []).forEach(clearTimeout); timers[key] = []; }
  function later(key, fn, ms){ (timers[key] = timers[key] || []).push(setTimeout(fn, ms)); }

  function play(key, burst){
    var slot = slotOf(key); if (!slot) return;
    clearT(key);
    if (key === 'dinheiro'){
      coinRain(slot.querySelector('.pg-visual'));
    } else if (key === 'pix'){
      slot.classList.remove('pg-done'); slot.classList.add('pg-scanning');
      later(key, function(){ slot.classList.remove('pg-scanning'); slot.classList.add('pg-done'); }, reduce ? 0 : 1200);
      later(key, function(){ slot.classList.remove('pg-done'); }, 4200);
    } else if (key === 'cartao'){
      slot.classList.add('pg-flip');
      later(key, function(){ slot.classList.remove('pg-flip'); }, 2300);
    }
    if (burst) confetti(slot.querySelector('.pg-card'), COLORS[key]);
  }

  function activate(key, mode){
    /* mode: 'user' (clique/toque), 'auto' (rotação automática) ou 'sync' (rolagem do carrossel). */
    current = key;
    sw.setAttribute('data-active', key);
    tabs.forEach(function(t){
      var on = t.dataset.pg === key;
      t.classList.toggle('is-active', on);
      t.setAttribute('aria-pressed', on ? 'true' : 'false');
    });
    moveGlider();
    deck.classList.add('has-active');
    slots.forEach(function(s){ s.classList.toggle('is-active', s.dataset.pg === key); });
    liveBox.dataset.pg = key;
    liveText.setAttribute('aria-live', mode === 'user' ? 'polite' : 'off');
    liveText.textContent = PG_MSG[key];
    liveBox.classList.remove('swap'); void liveBox.offsetWidth; liveBox.classList.add('swap');
    if (dots) Array.prototype.forEach.call(dots.children, function(d){ var on = d.dataset.pg === key; d.classList.toggle('is-on', on); d.setAttribute('aria-current', on ? 'true' : 'false'); });
    if (mode === 'user' || mode === 'auto'){
      scrollDeckTo(slotOf(key));
      play(key, mode === 'user');
    }
  }

  /* Rotação automática enquanto a seção está visível e até a primeira interação. */
  function stopAuto(){ clearTimeout(autoTimer); autoTimer = null; liveBox.classList.remove('is-auto'); }
  function scheduleAuto(){
    stopAuto();
    if (userTook || !inView || reduce) return;
    liveBox.style.setProperty('--pg-cycle', CYCLE_MS + 'ms');
    liveBox.classList.remove('is-auto'); void liveBox.offsetWidth; liveBox.classList.add('is-auto');
    autoTimer = setTimeout(function(){
      var next = ORDER[(ORDER.indexOf(current) + 1) % ORDER.length];
      activate(next, 'auto');
      scheduleAuto();
    }, CYCLE_MS);
  }
  function takeOver(){ if (!userTook){ userTook = true; stopAuto(); } }

  tabs.forEach(function(t){
    t.addEventListener('click', function(){ takeOver(); activate(t.dataset.pg, 'user'); });
  });
  sw.addEventListener('keydown', function(e){
    if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
    e.preventDefault(); takeOver();
    var i = ORDER.indexOf(current) + (e.key === 'ArrowRight' ? 1 : -1);
    var k = ORDER[(i + ORDER.length) % ORDER.length];
    activate(k, 'user'); sw.querySelector('[data-pg="' + k + '"]').focus();
  });
  slots.forEach(function(s){
    s.addEventListener('click', function(e){
      if (e.target.closest('a, .pg-key')) { takeOver(); return; }
      takeOver(); activate(s.dataset.pg, 'user');
    });
  });
  /* Copiar chave Pix (celular) de cada profissional. */
  function copyText(text){
    if (navigator.clipboard && window.isSecureContext){
      return navigator.clipboard.writeText(text).catch(function(){ return legacyCopy(text); });
    }
    return legacyCopy(text);
  }
  function legacyCopy(text){
    return new Promise(function(resolve, reject){
      var ta = document.createElement('textarea');
      ta.value = text; ta.setAttribute('readonly', '');
      ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none';
      document.body.appendChild(ta); ta.select(); ta.setSelectionRange(0, text.length);
      var ok = false; try { ok = document.execCommand('copy'); } catch (err) {}
      ta.remove(); ok ? resolve() : reject();
    });
  }
  Array.prototype.slice.call(document.querySelectorAll('.pg-key')).forEach(function(btn){
    var lbl = btn.querySelector('.pg-key-lbl'), t1 = 0;
    btn.addEventListener('click', function(){
      var key = btn.getAttribute('data-pix-key'), name = btn.getAttribute('data-pix-name');
      var shown = btn.querySelector('.pg-key-num').textContent;
      if (current !== 'pix') activate('pix', 'sync');
      clearTimeout(t1);
      btn.classList.remove('is-copied', 'is-failed'); void btn.offsetWidth;
      copyText(key).then(function(){
        btn.classList.add('is-copied');
        lbl.textContent = 'Chave copiada!';
        liveText.setAttribute('aria-live', 'polite');
        liveText.textContent = 'Chave Pix da ' + name + ' copiada: ' + shown + '. Agora é só colar no app do seu banco.';
        liveBox.classList.remove('swap'); void liveBox.offsetWidth; liveBox.classList.add('swap');
        confetti(btn, COLORS.pix);
        if (navigator.vibrate) { try { navigator.vibrate(30); } catch (err) {} }
        t1 = setTimeout(function(){ btn.classList.remove('is-copied'); lbl.textContent = 'Copiar chave Pix'; }, 2600);
      }, function(){
        btn.classList.add('is-failed');
        lbl.textContent = 'Selecione o número';
        liveText.setAttribute('aria-live', 'polite');
        liveText.textContent = 'Não foi possível copiar automaticamente. Chave Pix da ' + name + ': ' + shown + '.';
        var r = document.createRange(); r.selectNodeContents(btn.querySelector('.pg-key-num'));
        var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(r);
        t1 = setTimeout(function(){ btn.classList.remove('is-failed'); lbl.textContent = 'Copiar chave Pix'; }, 5000);
      });
    });
  });
  deck.addEventListener('pointerdown', takeOver, { passive: true });
  deck.addEventListener('touchstart', takeOver, { passive: true });

  /* Carrossel no celular: o cartão centralizado vira o ativo. */
  var syncRaf = null;
  deck.addEventListener('scroll', function(){
    if (!isCarousel() || syncRaf) return;
    syncRaf = requestAnimationFrame(function(){
      syncRaf = null;
      var mid = deck.scrollLeft + deck.clientWidth / 2, best = null, bd = Infinity;
      slots.forEach(function(s){ var c = s.offsetLeft + s.offsetWidth / 2, d = Math.abs(c - mid); if (d < bd){ bd = d; best = s; } });
      if (best && best.dataset.pg !== current && userTook) activate(best.dataset.pg, 'sync');
    });
  }, { passive: true });

  /* Inclinação 3D, brilho e parallax interno no computador. */
  if (fine && !reduce){
    slots.forEach(function(s){
      var card = s.querySelector('.pg-card');
      s.addEventListener('mousemove', function(e){
        var r = card.getBoundingClientRect();
        var px = (e.clientX - r.left) / r.width, py = (e.clientY - r.top) / r.height;
        card.classList.add('is-tilting');
        card.style.setProperty('--ry', ((px - .5) * 14).toFixed(2) + 'deg');
        card.style.setProperty('--rx', ((.5 - py) * 10).toFixed(2) + 'deg');
        card.style.setProperty('--mx', (px * 100).toFixed(1) + '%');
        card.style.setProperty('--my', (py * 100).toFixed(1) + '%');
        card.style.setProperty('--px', ((px - .5) * 2).toFixed(3));
        card.style.setProperty('--py', ((py - .5) * 2).toFixed(3));
        card.style.setProperty('--hx', ((px - .5) * 60).toFixed(1));
        card.style.setProperty('--glow', 1);
      });
      s.addEventListener('mouseleave', function(){
        card.classList.remove('is-tilting');
        ['--ry','--rx'].forEach(function(p){ card.style.setProperty(p, '0deg'); });
        ['--px','--py','--hx','--glow'].forEach(function(p){ card.style.setProperty(p, 0); });
      });
    });
  }

  var io = new IntersectionObserver(function(es){
    es.forEach(function(e){ inView = e.isIntersecting; if (inView) scheduleAuto(); else stopAuto(); });
  }, { threshold: .35 });
  io.observe(deck);

  /* Celular: pontinhos indicadores e início centralizado no cartão Pix. */
  window.addEventListener('resize', moveGlider);
  if (document.fonts && document.fonts.ready) document.fonts.ready.then(moveGlider);
  window.addEventListener('load', moveGlider);
  var startPix = isCarousel() && slotOf('pix');
  activate(startPix ? 'pix' : 'dinheiro', 'init');
  if (startPix){
    slots.forEach(function(s){ s.classList.add('revealed'); });
    requestAnimationFrame(function(){ deck.scrollLeft = startPix.offsetLeft - (deck.clientWidth - startPix.offsetWidth) / 2; });
  }
  requestAnimationFrame(moveGlider);
})();

</script>
</body>
</html>