/* VP Dental Studio · busify.com.br/vp-dental-studio

   A direção sai do consultório dele, não de referência de internet:
   - o preto é o mármore das paredes e o fundo do quadro do leão (fotos do
     espaço); o branco é o porcelanato do chão e o jaleco;
   - o prata é o do dente da logo (amostrado no JPG: ~#c0c0c2, mais claro no
     alto);
   - a "moldura de luz" é a fita de LED que contorna o quadro do leão e o
     mármore da recepção: aqui ela contorna o doutor, o vídeo e a Midas;
   - o dourado é o do zíper da jaqueta dele (amostrado: ~#a38268, o reflexo
     ~#dcbba3), puxado um pouco para o quente para ler no preto; vai nos
     botões, nos destaques e nas faixas de luz (pedido do dono, 03/11:
     "um dourado casual com preto"). O cinza-grafite alterna com o preto;
   - a serifa (Bodoni Moda) é da família do DENTAL da logo; a sans
     (Instrument Sans) é estreita e espaçada como o STUDIO.

   Ordem: tokens, base, componentes (vidro, botões, moldura, logo), seções
   na ordem da página, página de serviços, movimento. Celular primeiro. */

@font-face { font-family: 'Bodoni Moda'; src: url('../fontes/bodoni-moda-var.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../fontes/bodoni-moda-italico-var.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fontes/instrument-sans-var.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }

:root {
  --preto: #000;            /* o fundo do quadro do leão */
  --marmore: #0b0b0c;       /* o mármore preto das paredes */
  --marmore-2: #141416;
  --branco: #f4f3f1;        /* o porcelanato do chão */
  --branco-2: #e9e8e5;
  --prata: #c4c4c8;         /* o dente da logo */
  --prata-escura: #8d8d93;
  --tinta: #f4f3f1;         /* texto no escuro */
  --tinta-2: #b9b9be;       /* 10:1 no preto */
  --tinta-3: #8e8e94;       /* 6,2:1 no preto, só rótulo e nota */
  --tinta-clara: #121214;   /* texto no branco */
  --tinta-clara-2: #45454b; /* 9:1 no branco */
  --tinta-clara-3: #67676e; /* 5,4:1 no branco */
  --ouro: #c4a165;          /* o zíper dourado da jaqueta dele */
  --ouro-claro: #e3cb98;    /* o reflexo do zíper: destaque no preto */
  --ouro-escuro: #7a5c26;   /* 5,6:1 no branco, para texto */
  --grafite: #141416;       /* o cinza que alterna com o preto */
  --grafite-2: #1c1c1f;
  --linha: rgba(255, 255, 255, 0.12);
  --linha-forte: rgba(255, 255, 255, 0.24);
  --luz: 0 0 6px rgba(255, 255, 255, 0.75), 0 0 22px rgba(255, 255, 255, 0.3);

  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --margem: clamp(1rem, 5vw, 4rem);
  --miolo: max(var(--margem), calc((100% - 1240px) / 2));
  --raio: 28px;
  --saida: cubic-bezier(0.16, 1, 0.3, 1);
  --mola: cubic-bezier(0.2, 0.75, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; background: var(--preto); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--preto); color: var(--tinta);
  font-family: var(--sans); font-size: clamp(1rem, 0.97rem + 0.18vw, 1.08rem); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, fieldset, address { margin: 0; padding: 0; }
address { font-style: normal; }
fieldset { border: 0; min-width: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--ouro); color: #000; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pular { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: #fff; color: #000; padding: 0.7rem 1rem; border-radius: 10px; text-decoration: none; }
.pular:focus { top: 1rem; }
.falta { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: inherit; background: repeating-linear-gradient(135deg, #1a1a1c 0 14px, #222225 14px 28px); }

/* as seções claras (o branco do porcelanato) */
.claro { background: var(--branco); color: var(--tinta-clara); }

/* ── tipografia ──────────────────────────────────────────────────────────── */
.rotulo {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.76rem; font-weight: 600; font-stretch: 80%; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ouro); margin-bottom: 1rem;
}
.rotulo::before { content: ''; width: 1.8rem; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.cabeca--centro .rotulo, .triagem-cabeca .rotulo { justify-content: center; }
.claro .rotulo { color: var(--ouro-escuro); }
.titulo {
  font-family: var(--display); font-weight: 500; font-size: clamp(2.1rem, 1.35rem + 3vw, 3.9rem);
  line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; font-optical-sizing: auto;
}
.titulo em, .slide-titulo em, .serv-nome em { font-style: italic; font-weight: 400; color: var(--ouro-claro); }
.claro .titulo em, .claro .slide-titulo em { color: var(--ouro-escuro); }
.titulo--g { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5rem); }
.cabeca { padding: 0 var(--miolo); margin-bottom: clamp(2rem, 4.5vw, 3.5rem); max-width: calc(48rem + 2 * var(--miolo)); }
.cabeca--centro { text-align: center; margin-inline: auto; }
.cabeca--linha { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.2rem 2rem; max-width: none; }

.link {
  display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; text-decoration: none; color: inherit;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding: 0 0 2px; border: 0; background-color: transparent;
  transition: background-size 0.35s var(--mola), opacity 0.3s;
}
.link:hover { background-size: 100% 1px; }
.link--fraco { font-weight: 500; opacity: 0.7; }
.link--fraco:hover { opacity: 1; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.ico--traco { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.link .ico--traco { transition: transform 0.3s var(--mola); }
.link:hover .ico--traco { transform: translateX(3px); }

/* ── vidro líquido: branco translúcido sobre o preto ─────────────────────── */
.vidro {
  position: relative; isolation: isolate;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 55%, rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.11),
    0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.vidro::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 50%);
  opacity: 0.7; transition: opacity 0.4s;
}
.vidro:hover::after { opacity: 1; }

/* ── botões ──────────────────────────────────────────────────────────────── */
.botao {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3rem; padding: 0.75rem 1.35rem; border: 0; border-radius: 999px;
  font-weight: 600; font-size: 0.98rem; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: transform 0.3s var(--mola), box-shadow 0.3s, background-color 0.3s, color 0.3s;
}
.botao:hover { transform: translateY(-1px); }
.botao:active { transform: translateY(0) scale(0.98); }
/* o dourado: um degradê de latão, com um reflexo que atravessa no hover */
.botao--ouro {
  overflow: hidden; isolation: isolate; color: #17110a;
  background: linear-gradient(180deg, #e2c897 0%, #c4a165 52%, #a8854a 100%) #c4a165;
  box-shadow: inset 0 1px 0 rgba(255, 246, 222, 0.8), inset 0 -1px 0 rgba(70, 45, 10, 0.35), 0 0 0 1px rgba(196, 161, 101, 0.55), 0 14px 30px -14px rgba(196, 161, 101, 0.6);
}
.botao--ouro::after {
  content: ''; position: absolute; inset: -2px auto -2px -40%; width: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 250, 235, 0.75), transparent); transform: skewX(-18deg);
  transition: left 0.75s cubic-bezier(0.45, 0, 0.25, 1);
}
.botao--ouro:hover::after { left: 120%; }
.botao--ouro:hover { box-shadow: inset 0 1px 0 rgba(255, 246, 222, 0.9), inset 0 -1px 0 rgba(70, 45, 10, 0.35), 0 0 0 1px var(--ouro-claro), 0 18px 40px -12px rgba(196, 161, 101, 0.75); }
.botao--vidro {
  color: var(--tinta); background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.botao--vidro:hover { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(196, 161, 101, 0.7); }
.claro .botao--vidro { color: var(--tinta-clara); background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 12px 28px -18px rgba(0, 0, 0, 0.35); }
.botao--g { min-height: 3.4rem; padding: 0.9rem 1.6rem; font-size: 1.03rem; }
.botao[disabled] { opacity: 0.6; cursor: progress; }

/* ── a moldura de luz (a fita de LED do consultório) ─────────────────────── */
/* Quatro linhas que se desenham uma depois da outra, no sentido do relógio.
   (Um <rect> em SVG esticado com non-scaling-stroke desenhava o traço pela
   metade: o pathLength não acompanha a escala.) */
.moldura { position: absolute; pointer-events: none; }
.moldura i { position: absolute; display: block; background: #fff5df; box-shadow: 0 0 6px rgba(240, 214, 160, 0.9), 0 0 22px rgba(196, 161, 101, 0.5); }
.moldura i:nth-child(1) { left: 0; top: 0; width: 100%; height: 1.5px; transform-origin: 0 50%; }
.moldura i:nth-child(2) { right: 0; top: 0; width: 1.5px; height: 100%; transform-origin: 50% 0; }
.moldura i:nth-child(3) { right: 0; bottom: 0; width: 100%; height: 1.5px; transform-origin: 100% 50%; }
.moldura i:nth-child(4) { left: 0; bottom: 0; width: 1.5px; height: 100%; transform-origin: 50% 100%; }
.sobre .moldura i, .trajetoria .moldura i { background: var(--ouro); box-shadow: none; }
.sobre .moldura i:nth-child(odd), .trajetoria .moldura i:nth-child(odd) { height: 1px; }
.sobre .moldura i:nth-child(even), .trajetoria .moldura i:nth-child(even) { width: 1px; }

/* ── a logo e a animação dela ────────────────────────────────────────────── */
.logo { display: block; width: 100%; height: auto; overflow: visible; }
.logo .l-dente { stroke: #f1f1f3; stroke-width: 1.1; stroke-opacity: 0; stroke-dasharray: 1 1; }
.logo .l-vp-mascara, .logo .l-brilho { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .js .logo:not(.anima) .l-dente { fill-opacity: 0; stroke-dashoffset: 1; }
  .js .logo:not(.anima) .l-vp-mascara { transform: translateX(-102%); }
  .js .logo:not(.anima) .l-letra { opacity: 0; }

  .logo.anima .l-dente { animation: l-contorno 1.5s cubic-bezier(0.65, 0, 0.35, 1) both, l-enche 0.9s 1.15s ease-out both; }
  .logo.anima .l-vp-mascara { animation: l-escreve 1.5s 0.85s cubic-bezier(0.55, 0.05, 0.3, 1) both; }
  .logo.anima .l-letra { animation: l-letra 0.8s calc(1.5s + var(--i) * 55ms) var(--mola) both; }
  /* depois de pronta, um brilho atravessa a logo em laço: branco quente no
     dente, dourado nas letras (logo atrás) */
  .logo.anima .l-brilho { animation: l-brilho-ciclo 5s calc(2.3s + var(--atraso, 0s)) cubic-bezier(0.45, 0, 0.25, 1) infinite both; }
  .logo-topo.anima .l-brilho { animation-delay: calc(0.6s + var(--atraso, 0s)); }
  /* carregando: o dente se desenha e se apaga em laço, e o vp se reescreve */
  .logo-carregando .l-dente { stroke-opacity: 1; animation: l-laco 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  .logo-carregando .l-vp-mascara { animation: l-laco-vp 2.6s cubic-bezier(0.55, 0.05, 0.3, 1) infinite; }
}
@keyframes l-contorno { from { stroke-dashoffset: 1; stroke-opacity: 1; } to { stroke-dashoffset: 0; stroke-opacity: 1; } }
@keyframes l-enche { from { fill-opacity: 0; stroke-opacity: 1; } to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes l-escreve { from { transform: translateX(-102%); } to { transform: translateX(0); } }
@keyframes l-letra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes l-brilho-ciclo { 0% { transform: translateX(0) skewX(-16deg); } 30%, 100% { transform: translateX(var(--viagem, 460%)) skewX(-16deg); } }
@keyframes l-laco { 0% { stroke-dashoffset: 1; fill-opacity: 0.08; } 50% { stroke-dashoffset: 0; fill-opacity: 1; } 100% { stroke-dashoffset: -1; fill-opacity: 0.08; } }
@keyframes l-laco-vp { 0%, 20% { transform: translateX(-102%); } 60%, 100% { transform: translateX(0); } }

/* ── topo ────────────────────────────────────────────────────────────────── */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem; height: 4rem; padding: 0 var(--miolo);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid transparent; transition: border-color 0.3s, background-color 0.3s, backdrop-filter 0.3s;
}
.topo.rolou {
  background: rgba(8, 8, 9, 0.8); border-bottom-color: var(--linha);
  -webkit-backdrop-filter: saturate(1.4) blur(20px); backdrop-filter: saturate(1.4) blur(20px);
}
.topo-marca { display: block; width: min(10.5rem, 46vw); margin-right: auto; text-decoration: none; }
.js .topo-marca { opacity: 0; transform: translateY(-6px); transition: opacity 0.5s, transform 0.6s var(--mola); pointer-events: none; }
.js .topo.com-marca .topo-marca, .pagina-servicos .topo .topo-marca { opacity: 1; transform: none; pointer-events: auto; }
.topo-nav { display: none; gap: clamp(1rem, 1.6vw, 1.7rem); font-size: 0.9rem; }
.topo-nav a { text-decoration: none; color: var(--tinta-2); transition: color 0.2s; white-space: nowrap; }
.topo-nav a:hover, .topo-nav a[aria-current] { color: var(--ouro-claro); }
.botao--topo { min-height: 2.6rem; padding: 0.5rem 1.05rem; font-size: 0.92rem; }
.topo-menu {
  display: grid; place-content: center; gap: 6px; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.topo-menu i { display: block; width: 1.1rem; height: 1.5px; border-radius: 2px; background: #fff; transition: transform 0.4s var(--mola); }
.topo-menu[aria-expanded="true"] i:first-child { transform: translateY(3.75px) rotate(45deg); }
.topo-menu[aria-expanded="true"] i:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (min-width: 1180px) {
  .topo-nav { display: flex; }
  .topo-menu { display: none; }
  .topo-marca { width: 11.5rem; }
}
@media (max-width: 420px) { .botao--topo span { display: none; } .botao--topo { width: 2.75rem; padding: 0; } }

/* o menu do celular: um painel de vidro com as seções */
.menu { position: fixed; inset: 0; z-index: 45; display: grid; align-items: start; padding: 4.6rem 0.75rem 0.75rem; background: rgba(0, 0, 0, 0.5); }
.menu-painel { border-radius: 30px; padding: 1.4rem 1.4rem 1.2rem; display: grid; gap: 1.4rem; max-height: calc(100svh - 5.5rem); overflow: auto; }
.menu-lista { display: grid; }
.menu-link {
  font-family: var(--display); font-size: clamp(1.7rem, 6.5vw, 2.3rem); line-height: 1.15; text-decoration: none; padding: 0.42rem 0;
  border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; align-items: center;
}
.menu-link::after { content: '→'; font-family: var(--sans); font-size: 1rem; opacity: 0.5; }
.menu-rodape { display: grid; gap: 0.9rem; justify-items: center; }
.menu-rodape .botao { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) { animation: aparece 0.3s ease both; }
  .menu:not([hidden]) .menu-painel { animation: desce 0.55s var(--saida) both; }
  .menu:not([hidden]) .menu-link { animation: entra 0.6s calc(0.08s + var(--k, 0) * 40ms) var(--saida) both; }
}
@keyframes desce { from { opacity: 0; transform: translateY(-14px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── 1 · herói ───────────────────────────────────────────────────────────── */
/* O fundo são as faixas de luz (fundo.js); --fita-* dizem onde elas passam:
   atrás da cabeça e dos ombros dele, mais fracas onde fica o texto. Sem
   WebGL, fica o degradê quente do .heroi.
   A foto sai da moldura: a moldura recorta a foto dos lados (clip-path) e
   a cabeça passa por cima da linha de cima. --mt é a altura dessa linha e
   --ml/--mr os lados, em fração da foto; a moldura e o recorte usam os
   mesmos números, então casam. A foto (jaleco branco) vai do alto da
   cabeça às mãos nos bolsos; os lados da moldura passam pelos cotovelos. */
.heroi {
  --fita-y: 66vw; --fita-esc: 52vw; --fita-incl: -0.3; --fita-texto: 0;
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(80% 42% at 50% 24%, #1f1d1a, transparent 72%), var(--preto);
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
  padding: calc(4.6rem + env(safe-area-inset-top)) var(--miolo) clamp(2.5rem, 7vw, 4rem);
}
.heroi-fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.heroi-fundo::after { content: ''; position: absolute; inset: auto 0 0; height: 26%; background: linear-gradient(180deg, transparent, #000); }
.fitas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s ease 0.2s; pointer-events: none; }
.fitas.pronto { opacity: 1; }

/* no celular o bloco de texto se desfaz (display: contents) e a ordem fica:
   a logo, o doutor, o resto do texto sobre a base da foto */
.heroi-texto { display: contents; }
.heroi-logo { order: -2; width: min(15rem, 66vw); font-size: inherit; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.9)); }
.heroi-logo .logo-heroi:not(.logo-heroi--linha) { display: none; }
.heroi-doutor {
  --mt: 35%; --ml: 3%; --mr: 2%;
  order: -1; position: relative; margin: 1.2rem 0 0; width: min(80vw, 24rem); aspect-ratio: 2420 / 3400;
}
.heroi-halo {
  position: absolute; left: 10%; right: 10%; top: -3%; height: 52%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(196, 161, 101, 0.3), rgba(196, 161, 101, 0.08) 60%, transparent);
  filter: blur(14px);
}
/* a moldura: três lados (o de baixo some no preto), e por dentro um vidro
   que desfoca as faixas: atrás dele fica fora de foco, em volta, nítido */
.heroi-doutor .moldura {
  left: var(--ml); right: var(--mr); top: var(--mt); bottom: 0;
  background: linear-gradient(180deg, rgba(255, 245, 222, 0.07), rgba(255, 255, 255, 0.015) 55%, transparent);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 97%); mask-image: linear-gradient(180deg, #000 50%, transparent 97%);
}
.heroi-doutor .moldura i:nth-child(3) { display: none; }
.heroi-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% var(--mt), calc(100% - var(--mr)) var(--mt), calc(100% - var(--mr)) 100%, var(--ml) 100%, var(--ml) var(--mt), 0 var(--mt));
  /* a luz de recorte: um fio quente em volta dele, para a jaqueta preta não sumir no fundo */
  filter: drop-shadow(0 0 1px rgba(255, 236, 200, 0.6)) drop-shadow(0 0 18px rgba(196, 161, 101, 0.25));
}
.heroi-texto > :not(.heroi-logo) { position: relative; margin-top: 1rem; }
.heroi-quem { margin-top: -1.6rem !important; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 0.6rem; font-size: 0.76rem; font-weight: 600; font-stretch: 80%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-2); }
.heroi-quem i { width: 3px; height: 3px; border-radius: 50%; background: var(--ouro); }
/* no celular o nome fica sozinho na primeira linha (sem o ponto pendurado no fim) */
@media (max-width: 699px) { .quem-nome { flex-basis: 100%; } .heroi-quem i:first-of-type { display: none; } }
.heroi-frase { font-family: var(--display); font-weight: 500; font-size: clamp(2.3rem, 1.4rem + 4vw, 4.6rem); line-height: 1; letter-spacing: -0.025em; text-wrap: balance; }
/* o "planejado no digital" em dourado, com um reflexo que passa devagar */
.heroi-frase em {
  font-style: italic; font-weight: 400; color: var(--ouro-claro);
  background: linear-gradient(100deg, var(--ouro) 0%, var(--ouro-claro) 38%, #fff6e2 50%, var(--ouro-claro) 62%, var(--ouro) 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: 0.08em;
}
@media (prefers-reduced-motion: no-preference) { .heroi-frase em { animation: reflexo 7s 2.2s ease-in-out infinite; } }
@keyframes reflexo { 0% { background-position: 100% 0; } 45%, 100% { background-position: -50% 0; } }
.heroi-acoes { display: grid; gap: 0.65rem; width: min(100%, 23rem); margin-top: 0.6rem; }
.heroi-acoes .botao { width: 100%; }
.mais { font-family: var(--sans); font-weight: 300; font-size: 0.72em; vertical-align: 0.12em; margin-right: 0.04em; }
/* a Bodoni não tem par de kerning para "Vi": o V fica longe do i */
.kv { letter-spacing: -0.09em; }

@media (min-width: 700px) and (max-width: 1079px) {
  .heroi { --fita-y: 44vw; --fita-esc: 34vw; }
  .heroi-doutor { width: min(50vw, 26rem); }
}
@media (min-width: 1080px) {
  /* computador: o texto à esquerda, o doutor à direita, as faixas cruzando
     de baixo à esquerda para cima à direita, atrás dele */
  .heroi {
    --fita-y: 46%; --fita-esc: 40%; --fita-incl: -0.6; --fita-texto: 1;
    background: radial-gradient(42% 62% at 74% 42%, #211e1a, transparent 72%), var(--preto);
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-areas: "texto doutor";
    min-height: max(42rem, min(100svh, 72rem)); align-items: end; padding-bottom: 0; column-gap: 2rem; text-align: left;
  }
  .heroi-fundo::after { height: 18%; }
  .heroi-texto { grid-area: texto; display: grid; align-self: center; justify-items: start; padding: 2rem 0 4rem; gap: 1.15rem; }
  .heroi-texto > :not(.heroi-logo) { margin-top: 0; }
  .heroi-logo { order: 0; width: min(10.5rem, 100%); margin-bottom: 0.4rem; }
  .heroi-logo .logo-heroi:not(.logo-heroi--linha) { display: block; }
  .heroi-logo .logo-heroi--linha { display: none; }
  .heroi-quem { justify-content: flex-start; margin-top: 0 !important; }
  .heroi-acoes { display: flex; width: auto; }
  .heroi-acoes .botao { width: auto; }
  .heroi-doutor { grid-area: doutor; justify-self: end; align-self: end; width: min(100%, calc(min(88svh, 56rem) * 0.712)); margin: 0 clamp(1rem, 5vw, 6rem) 0 0; }
  .heroi-frase { font-size: clamp(3rem, 1.6rem + 2.6vw, 4.4rem); }
}

/* ── a ponte: do herói para a pré-consulta ────────────────────────────── */
/* As duas seções são pretas na emenda (sem corte). Por cima dela, um halo
   dourado desfocado e um fio de luz que desce do herói até o rótulo da
   pré-consulta, com uma gota de luz correndo por ele e um ponto aceso no
   fim. --vao é o espaço até o rótulo (o padding de cima da .triagem). */
.ponte { --vao: clamp(4.5rem, 10vw, 7.5rem); --sobe: 2rem; position: relative; z-index: 2; height: 0; pointer-events: none; }
.ponte::before {
  content: ''; position: absolute; left: 50%; top: -3.5rem; width: min(80vw, 44rem); height: 7rem; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(196, 161, 101, 0.2), rgba(196, 161, 101, 0.05) 60%, transparent); filter: blur(16px);
}
.ponte i {
  position: absolute; left: 50%; top: calc(var(--sobe) * -1); width: 1px; height: calc(var(--sobe) + var(--vao) - 1.6rem); translate: -50% 0; overflow: hidden;
  background: linear-gradient(180deg, transparent, rgba(196, 161, 101, 0.55) 35%, var(--ouro-claro));
}
.ponte i::after {
  content: ''; position: absolute; left: 0; top: -2.4rem; width: 1px; height: 2.4rem;
  background: linear-gradient(180deg, transparent, #fff6e2); box-shadow: 0 0 8px 1px rgba(227, 203, 152, 0.9);
}
.ponte b {
  position: absolute; left: 50%; top: calc(var(--vao) - 1.6rem); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: #fff6e2; box-shadow: 0 0 8px 2px rgba(227, 203, 152, 0.9), 0 0 22px rgba(196, 161, 101, 0.6);
}
@media (min-width: 1080px) { .ponte { --sobe: 4.5rem; } }
@media (prefers-reduced-motion: no-preference) {
  .ponte i::after { animation: gota 3.4s 1.5s cubic-bezier(0.55, 0, 0.35, 1) infinite; }
  .ponte b { animation: acende 3.4s 1.5s ease-out infinite; }
}
@keyframes gota { 0% { top: -2.4rem; opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 88%, 100% { top: 100%; opacity: 0; } }
@keyframes acende { 0%, 80% { transform: scale(1); } 88% { transform: scale(2.2); } 100% { transform: scale(1); } }

/* ── o contador: de 0 a 3 mil, e um BUM no fim ───────────────────────────── */
/* O site.js conta (0 → 3.000), troca para "3 mil" no pico do clarão e põe
   .bum: o número salta, acende, duas ondas de luz saem dele e faíscas
   douradas se espalham. Depois fica um reflexo passando em laço. Sem JS ou
   com movimento reduzido, é só o "+3 mil". */
.contador { position: relative; display: inline-block; white-space: nowrap; }
.contador-n { display: inline-block; min-width: var(--largura, auto); font-variant-numeric: lining-nums tabular-nums; }
.contador .onda {
  position: absolute; left: 50%; top: 52%; width: 1.1em; height: 1.1em; margin: -0.55em 0 0 -0.55em; border-radius: 50%;
  border: 2px solid var(--ouro-claro); box-shadow: 0 0 14px rgba(227, 203, 152, 0.8), inset 0 0 10px rgba(227, 203, 152, 0.5);
  opacity: 0; pointer-events: none;
}
/* as faíscas são riscos curtos que saem na direção em que voam */
.contador .faisca {
  position: absolute; left: 50%; top: 52%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 246, 226, 0), #fff6e2 60%, #fff); box-shadow: 0 0 6px 1px rgba(227, 203, 152, 0.85);
  animation: faisca 0.9s cubic-bezier(0.1, 0.75, 0.25, 1) forwards;
}
.contador.bum { animation: bum 0.95s cubic-bezier(0.3, 1.5, 0.4, 1) both; }
.contador.bum .onda { animation: onda 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.contador.bum .onda + .onda { animation-delay: 0.14s; }
.contador.brilha {
  background: linear-gradient(100deg, currentColor 40%, #fff6e2 50%, currentColor 60%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(196, 161, 101, 0.4));
  animation: reflexo 4.5s 0.4s ease-in-out infinite;
}
/* no branco, o reflexo é um dourado mais claro (o quase branco sumiria) */
.claro .contador.brilha { background-image: linear-gradient(100deg, currentColor 40%, #c9a45e 50%, currentColor 60%); filter: none; }
@keyframes bum {
  0% { transform: scale(1); filter: none; }
  16% { transform: scale(1.3); filter: brightness(1.9) drop-shadow(0 0 16px rgba(255, 236, 196, 0.95)); }
  42% { transform: scale(0.95); }
  68% { transform: scale(1.04); }
  100% { transform: none; filter: drop-shadow(0 0 10px rgba(196, 161, 101, 0.4)); }
}
@keyframes onda { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(5.5); opacity: 0; } }
@keyframes faisca { 0% { transform: rotate(var(--ang)) translateX(0.4em) scaleX(0.4); opacity: 0; } 12% { opacity: 1; } 100% { transform: rotate(var(--ang)) translateX(var(--r)) scaleX(0.25); opacity: 0; } }

/* ── 2 · pré-consulta digital ────────────────────────────────────────────── */
.triagem {
  position: relative; overflow: hidden;
  padding: clamp(4.5rem, 10vw, 7.5rem) var(--margem);
  background:
    radial-gradient(55% 28% at 50% 14%, rgba(196, 161, 101, 0.08), transparent 70%),
    linear-gradient(180deg, #000 0%, #000 14%, var(--grafite));
}
.triagem-cabeca { position: relative; max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.assistente { position: relative; max-width: 60rem; margin: 0 auto; border-radius: 32px; padding: clamp(1.25rem, 4vw, 2.6rem); min-height: 27rem; }

.passos { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.passo { display: flex; align-items: center; gap: 0.5rem; color: var(--tinta-3); font-size: 0.86rem; font-weight: 550; }
.passo:not(:last-child)::after { content: ''; width: clamp(1.2rem, 5vw, 3.5rem); height: 1px; margin-left: 0.4rem; background: var(--linha-forte); }
.passo-n { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-weight: 700; font-size: 0.85rem; box-shadow: inset 0 0 0 1px var(--linha-forte); transition: background-color 0.4s, color 0.4s, box-shadow 0.4s; }
.passo.atual { color: #fff; }
.passo.atual .passo-n { color: #17110a; background: var(--ouro); box-shadow: 0 0 0 4px rgba(196, 161, 101, 0.18), 0 0 18px rgba(196, 161, 101, 0.55); }
.passo.feito .passo-n { color: var(--ouro-claro); background: rgba(196, 161, 101, 0.16); box-shadow: inset 0 0 0 1px var(--ouro); }
.passo.feito::after { background: var(--ouro); }
@media (max-width: 560px) { .passo:not(.atual) .passo-nome { display: none; } }

.etapa { display: grid; gap: 1rem; }
.etapa-tit { font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem); line-height: 1.12; color: #fff; outline: none; text-align: center; text-wrap: balance; }
.etapa-sub { color: var(--tinta-2); max-width: 36rem; margin: -0.3rem auto 0.3rem; text-align: center; text-wrap: pretty; }
.etapa-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem 1.4rem; margin-top: 0.6rem; }
.etapa-acoes--par { justify-content: space-between; }
@media (max-width: 560px) {
  .etapa-acoes { flex-direction: column; align-items: stretch; }
  .etapa-acoes .botao { width: 100%; }
  .etapa-acoes .link { justify-content: center; align-self: center; }
  .etapa-acoes--par { flex-direction: column-reverse; }
}
@media (prefers-reduced-motion: no-preference) {
  .etapa.entra-dir { animation: etapa-dir 0.55s var(--saida) both; }
  .etapa.entra-esq { animation: etapa-esq 0.55s var(--saida) both; }
}
@keyframes etapa-dir { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes etapa-esq { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.campo-rotulo { display: block; font-size: 0.9rem; font-weight: 600; color: var(--tinta); margin-bottom: 0.45rem; }
.campo {
  width: 100%; border: 0; border-radius: 18px; padding: 0.95rem 1.1rem; font-size: 1.02rem; color: #fff;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--linha-forte);
  transition: box-shadow 0.25s, background-color 0.25s;
}
.campo:focus { outline: none; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 24px rgba(255, 255, 255, 0.12); }
.campo::placeholder { color: #7d7d83; }
.campo--relato { resize: vertical; min-height: 9.5rem; line-height: 1.55; }
.campo[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #ff9a7a; }
.campo-erro { color: #ffb39b; font-size: 0.88rem; margin-top: -0.5rem; }
.sugestoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.sugestao {
  border: 0; border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.86rem; color: var(--tinta-2);
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--linha); transition: color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.sugestao:hover { color: #fff; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.triagem-aviso { font-size: 0.8rem; line-height: 1.5; color: var(--tinta-3); text-align: center; max-width: 40rem; margin: 0.4rem auto 0; }

.etapa--carregando { justify-items: center; padding: clamp(2rem, 8vw, 4rem) 0; text-align: center; }
.carregando-logo { width: 6rem; filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.25)); }
.carregando-msg { font-family: var(--display); font-size: 1.45rem; color: #fff; min-height: 1.6em; }
.carregando-trilho { width: min(16rem, 70%); height: 2px; border-radius: 2px; background: var(--linha); overflow: hidden; }
.carregando-trilho i { display: block; height: 100%; width: 40%; border-radius: inherit; background: var(--ouro-claro); box-shadow: 0 0 10px rgba(196, 161, 101, 0.8); animation: trilho 1.4s ease-in-out infinite; }
@keyframes trilho { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

.pressa { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.95rem 1.1rem; border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--cor-pressa, var(--linha-forte)); max-width: 40rem; margin: 0 auto; width: 100%; }
.pressa-ponto { flex: none; width: 0.75rem; height: 0.75rem; margin-top: 0.4rem; border-radius: 50%; background: var(--cor-pressa, #fff); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-pressa, #fff) 20%, transparent); }
.pressa b { display: block; font-size: 1.02rem; color: #fff; }
.pressa span { font-size: 0.92rem; color: var(--tinta-2); }
.pressa--emergencia { --cor-pressa: #ff6b5e; }
.pressa--alta { --cor-pressa: #f3a64b; }
.pressa--media { --cor-pressa: #e9e9ec; }
.pressa--baixa { --cor-pressa: #9fd09a; }

.causas {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 19rem); gap: 0.9rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0.4rem calc(clamp(1.25rem, 4vw, 2.6rem) * -1); padding: 0.4rem clamp(1.25rem, 4vw, 2.6rem) 0.6rem;
  scroll-padding-inline: clamp(1.25rem, 4vw, 2.6rem);
}
.causas::-webkit-scrollbar { display: none; }
.causa { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--linha), 0 20px 40px -26px rgba(0, 0, 0, 0.9); }
.causa-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
.causa-foto img { width: 100%; height: 100%; object-fit: cover; }
.causa-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.8)); }
.causa-area { position: absolute; left: 0.8rem; bottom: 0.7rem; z-index: 1; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 650; color: #17110a; background: var(--ouro); }
.causa-texto { display: grid; align-content: start; gap: 0.45rem; padding: 1rem 1.05rem 1.15rem; }
.causa-rot { font-size: 0.7rem; font-weight: 600; font-stretch: 80%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-3); }
.causa-nome { font-family: var(--display); font-weight: 500; font-size: 1.3rem; line-height: 1.15; color: #fff; }
.causa-porque { font-size: 0.93rem; color: var(--tinta-2); }
.causa-sol { font-size: 0.93rem; color: #dcdce0; padding-top: 0.55rem; border-top: 1px solid var(--linha); }
.causa-sol b { color: #fff; font-weight: 600; }
.causa-ver { justify-self: start; margin-top: 0.2rem; font-size: 0.88rem; }
.causas-pontos { display: flex; justify-content: center; gap: 0.4rem; margin-top: -0.2rem; }
.causas-pontos i { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--linha-forte); transition: width 0.3s var(--mola), background-color 0.3s; }
.causas-pontos i.atual { width: 1.3rem; background: var(--ouro); }
@media (min-width: 760px) {
  .causas { grid-auto-flow: row; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); overflow: visible; margin: 0.4rem 0; padding: 0.4rem 0 0.6rem; }
  .causas-pontos { display: none; }
}
.ate-consulta { display: grid; gap: 0.3rem; padding: 1rem 1.15rem; border-radius: 18px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px var(--linha); }
.ate-consulta h4 { font-size: 0.72rem; font-weight: 600; font-stretch: 80%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-3); }
.ate-consulta p { color: #dcdce0; }
.aviso-etapa { text-align: center; color: #dcdce0; max-width: 34rem; margin: 0 auto; }

#etapa-3 { max-width: 40rem; margin-inline: auto; width: 100%; }
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.escolha legend { margin-bottom: 0.45rem; }
.opcao { position: relative; display: block; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcao-caixa { display: grid; gap: 0.1rem; height: 100%; padding: 0.85rem 1rem; border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--linha-forte); transition: background-color 0.25s, box-shadow 0.25s; }
.opcao-caixa b { font-weight: 600; color: #fff; line-height: 1.25; }
.opcao:hover .opcao-caixa { background: rgba(255, 255, 255, 0.08); }
.opcao input:checked + .opcao-caixa { background: rgba(196, 161, 101, 0.12); box-shadow: inset 0 0 0 1.5px var(--ouro), 0 0 0 4px rgba(196, 161, 101, 0.1), 0 0 20px rgba(196, 161, 101, 0.18); }
.opcao input:focus-visible + .opcao-caixa { outline: 2px solid #fff; outline-offset: 3px; }

.etapa--pronto { justify-items: center; text-align: center; }
.pronto-check { width: 4.2rem; height: 4.2rem; fill: none; stroke: var(--ouro-claro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)); }
@media (prefers-reduced-motion: no-preference) {
  .pronto-check circle, .pronto-check path { stroke-dasharray: 1 1; }
  .etapa--pronto:not([hidden]) .pronto-check circle { animation: traco 0.7s var(--saida) both; }
  .etapa--pronto:not([hidden]) .pronto-check path { animation: traco 0.5s 0.45s var(--saida) both; }
}
@keyframes traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pronto-msg { width: 100%; max-width: 34rem; white-space: pre-wrap; font: inherit; font-size: 0.93rem; text-align: left; margin: 0.2rem 0 0; padding: 1rem 1.15rem; border-radius: 18px; color: #dcdce0; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px var(--linha); max-height: 15rem; overflow: auto; }

/* ── 3 · o que é feito na clínica: carrossel (seção clara) ───────────────── */
.tratamentos { padding: clamp(4.5rem, 10vw, 7.5rem) 0; }
.carrossel { --slide-w: min(86vw, 23rem); position: relative; }
.carrossel-trilho {
  display: flex; gap: clamp(0.8rem, 2vw, 1.6rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0.8rem calc((100% - var(--slide-w)) / 2) 1.8rem; overscroll-behavior-x: contain;
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.slide {
  flex: none; width: var(--slide-w); scroll-snap-align: center; display: grid; border-radius: 30px; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 30px 60px -34px rgba(0, 0, 0, 0.35);
  transition: transform 0.6s var(--saida), opacity 0.6s var(--saida), box-shadow 0.6s;
}
.js .slide:not(.atual) { transform: scale(0.93); opacity: 0.45; }
.js .slide.atual { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 40px 80px -36px rgba(0, 0, 0, 0.45); }
.slide-foto { position: relative; aspect-ratio: 4 / 3.6; overflow: hidden; background: #000; }
.slide-foto img, .slide-foto .falta { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; transition: transform 1.2s var(--saida); }
.slide.atual .slide-foto img { transform: scale(1.03); }
.slide-corpo { display: grid; align-content: start; gap: 0.9rem; padding: 1.2rem 1.25rem 1.4rem; }
.slide-titulo { font-family: var(--display); font-weight: 500; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.04; letter-spacing: -0.02em; }
.slide-titulo em { display: block; font-family: var(--sans); font-style: normal; font-size: 0.42em; font-weight: 600; font-stretch: 85%; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.6rem; color: var(--tinta-clara-3); }
.slide-abas { display: none; }
.js .slide-abas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.slide-aba {
  position: relative; overflow: hidden; border: 0; padding: 0.55rem 0.4rem 0.75rem; border-radius: 12px; background: rgba(0, 0, 0, 0.04);
  font-size: 0.76rem; font-weight: 600; font-stretch: 85%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-clara-3);
  transition: background-color 0.3s, color 0.3s;
}
.slide-aba[aria-selected="true"] { color: var(--tinta-clara); background: rgba(0, 0, 0, 0.08); }
.slide-barra { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.4rem; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, 0.1); overflow: hidden; }
.slide-barra::after { content: ''; position: absolute; inset: 0; background: var(--ouro); transform-origin: left; transform: scaleX(0); }
.slide-aba.lida .slide-barra::after { transform: scaleX(1); }
.carrossel.rodando .slide.atual .slide-aba[aria-selected="true"] .slide-barra::after { animation: barra var(--tempo, 4.5s) linear both; }
.carrossel.pausado .slide-barra::after { animation-play-state: paused !important; }
@keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.slide-blocos { display: grid; gap: 0.8rem; }
.slide-bloco { color: var(--tinta-clara-2); font-size: 1.02rem; line-height: 1.55; }
.slide-bloco::before { content: attr(data-rotulo); display: block; font-size: 0.72rem; font-weight: 600; font-stretch: 80%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-clara-3); margin-bottom: 0.2rem; }
.js .slide-bloco { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--saida), transform 0.6s var(--saida); visibility: hidden; }
.js .slide-bloco::before { display: none; }
.js .slide-bloco.ativo { opacity: 1; transform: none; visibility: visible; }
.slide-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.carrossel-controles { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.2rem; }
.carrossel-seta {
  display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; color: var(--ouro-claro); background: #111;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 22px -12px rgba(0, 0, 0, 0.6); transition: transform 0.3s var(--mola);
}
.carrossel-seta:hover { transform: scale(1.06); }
.carrossel-seta .ico { width: 1.2rem; height: 1.2rem; stroke-width: 2; }
.carrossel-pontos { display: flex; gap: 0.45rem; }
.ponto { width: 0.55rem; height: 0.55rem; padding: 0; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.2); transition: width 0.4s var(--mola), background-color 0.3s; }
.ponto.atual { width: 1.6rem; background: var(--ouro); }
@media (min-width: 900px) {
  .carrossel { --slide-w: min(64rem, 80vw); }
  .slide { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .slide-foto { aspect-ratio: 4 / 4.6; }
  .slide-corpo { align-content: center; gap: 1.2rem; padding: clamp(1.6rem, 3.4vw, 3.4rem); }
  .js .slide-abas { max-width: 24rem; }
  .slide-bloco { font-size: 1.12rem; }
}

/* ── 4 · galeria de serviços ─────────────────────────────────────────────── */
.galeria { padding: clamp(4.5rem, 10vw, 7.5rem) 0; background: radial-gradient(60% 40% at 15% 0%, rgba(196, 161, 101, 0.07), transparent 70%), var(--grafite); }
.mosaico { columns: 2 10rem; column-gap: clamp(0.6rem, 1.4vw, 1.1rem); padding: 0 var(--miolo); }
@media (min-width: 700px) { .mosaico { columns: 3; } }
@media (min-width: 1100px) { .mosaico { columns: 4; } }
.mosaico-item { break-inside: avoid; margin-bottom: clamp(0.6rem, 1.4vw, 1.1rem); }
.mosaico-botao { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #0d0d0e; box-shadow: inset 0 0 0 1px var(--linha); cursor: zoom-in; }
.mosaico-img { width: 100%; height: auto; transition: transform 1.1s var(--saida), filter 0.6s; }
.mosaico-nome {
  position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; padding: 0.55rem 0.8rem; border-radius: 14px; text-align: left;
  font-size: 0.86rem; font-weight: 600; color: #fff; line-height: 1.25;
  background: rgba(0, 0, 0, 0.42); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.5s var(--mola), opacity 0.4s;
}
.mosaico-botao:hover .mosaico-img { transform: scale(1.045); }
@media (hover: hover) {
  .mosaico-nome { opacity: 0; transform: translateY(8px); }
  .mosaico-botao:hover .mosaico-nome, .mosaico-botao:focus-visible .mosaico-nome { opacity: 1; transform: none; }
}

/* a foto ampliada */
.lupa { padding: 0; border: 0; background: transparent; max-width: min(94vw, 60rem); max-height: 92svh; overflow: visible; }
.lupa::backdrop { background: rgba(0, 0, 0, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lupa-quadro { display: grid; gap: 0.9rem; justify-items: center; }
.lupa-img { max-width: 100%; max-height: calc(92svh - 4.5rem); width: auto; height: auto; border-radius: 22px; box-shadow: 0 0 0 1px var(--linha), 0 40px 90px -30px #000; }
.lupa-nome { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem; color: #fff; font-family: var(--display); font-size: 1.3rem; }
.lupa-nome .link { font-family: var(--sans); font-size: 0.92rem; }
.lupa-fechar { position: fixed; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.lupa-fechar .ico { width: 1.2rem; height: 1.2rem; }
@media (prefers-reduced-motion: no-preference) { .lupa[open] .lupa-quadro { animation: desce 0.5s var(--saida) both; } }

/* ── 5 · sobre: o vídeo que vira foto ────────────────────────────────────── */
.sobre { display: grid; gap: clamp(2rem, 5vw, 4rem); padding: clamp(4.5rem, 10vw, 8rem) var(--miolo); align-items: center; }
.sobre-palco { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; aspect-ratio: 3 / 4; }
.sobre-palco > img, .sobre-video, .sobre-transicao { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 26px; }
.sobre-palco > img { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.55); }
.sobre-video { background: #000; transition: opacity 0.4s; }
.sobre-transicao { pointer-events: none; opacity: 0; }
.sobre-palco.tocando .sobre-video { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.55); }
.sobre-palco.foto .sobre-video { opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s; }
.js .sobre-palco:not(.foto) > img { visibility: hidden; }
.sobre-palco .moldura { inset: -0.9rem; }
.sobre-rever {
  position: absolute; left: 50%; bottom: 1rem; translate: -50% 0; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1rem; border: 0; border-radius: 999px; font-size: 0.86rem; font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.sobre-texto { display: grid; gap: 1.05rem; max-width: 36rem; }
/* a biografia justificada, a pedido do doutor (04/11): as linhas terminam
   todas na mesma borda. Os pontos de hífen são &shy; no texto (ver o
   comentário no index.src.html), por isso hyphens: manual, que é igual em
   todo navegador; o auto dependia do dicionário de cada um. */
.sobre-bio { text-align: justify; -webkit-hyphens: manual; hyphens: manual; }
.sobre-cro { font-size: 0.9rem; font-weight: 600; color: var(--tinta-clara-3); margin-top: -0.4rem; letter-spacing: 0.02em; }
.sobre-numero { display: flex; align-items: baseline; gap: 0.8rem; padding: 1rem 0; border-block: 1px solid rgba(0, 0, 0, 0.12); }
.sobre-numero b { font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 2rem + 2.5vw, 3.8rem); line-height: 1; letter-spacing: -0.03em; color: var(--ouro-escuro); }
.sobre-numero > span { color: var(--tinta-clara-2); font-size: 1.02rem; }
.sobre-texto > p:not([class]) { color: var(--tinta-clara-2); }
/* a formação: um cartão claro de borda dourada, um selo com capelo por
   linha, o título na Bodoni e a instituição em versalete dourado. As linhas
   entram uma a uma e um brilho dourado atravessa o cartão em laço lento. */
.formacao {
  position: relative; overflow: hidden; display: grid; margin-top: 0.3rem; padding: 0.35rem 1.15rem; border-radius: 22px;
  background: linear-gradient(150deg, #fff 0%, #fbf8f1 60%, #f6efe0 100%);
  box-shadow: inset 0 0 0 1px rgba(122, 92, 38, 0.28), 0 26px 50px -34px rgba(122, 92, 38, 0.55);
}
.formacao::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 28%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(227, 203, 152, 0.45), transparent); transform: skewX(-18deg);
}
.formacao li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.95rem; row-gap: 0.1rem; align-items: center; padding: 0.85rem 0; }
.formacao li + li { border-top: 1px solid rgba(122, 92, 38, 0.16); }
.formacao-selo {
  grid-row: span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: #17110a;
  background: linear-gradient(180deg, #e2c897, #c4a165 52%, #a8854a); box-shadow: inset 0 1px 0 rgba(255, 246, 222, 0.8), 0 6px 16px -6px rgba(122, 92, 38, 0.6);
}
.formacao-selo svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.formacao b { font-family: var(--display); font-weight: 500; font-size: clamp(1.12rem, 1rem + 0.45vw, 1.3rem); line-height: 1.2; color: var(--tinta-clara); }
.formacao li:not(:has(.formacao-onde)) b { grid-row: span 2; }
.formacao-onde { font-size: 0.72rem; font-weight: 650; font-stretch: 80%; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ouro-escuro); }
@media (prefers-reduced-motion: no-preference) {
  .js .formacao li { opacity: 0; translate: 0 0.7rem; }
  .js .foi-revelado .formacao li { opacity: 1; translate: 0 0; transition: opacity 0.7s calc(0.35s + var(--i) * 0.15s) var(--saida), translate 0.8s calc(0.35s + var(--i) * 0.15s) var(--saida); }
  .js .foi-revelado .formacao::after { animation: formacao-brilho 7s 1.4s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
}
@keyframes formacao-brilho { 0% { left: -40%; } 25%, 100% { left: 130%; } }
.sobre-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin-top: 0.4rem; }
@media (min-width: 900px) { .sobre { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .sobre-palco { margin: 0; justify-self: end; } }

/* ── 5¼ · formação profissional: a linha do tempo ───────────────────────── */
/* Um eixo só, na mesma distância da borda (--x) em todos os blocos: o fio
   sobe para dentro do Sobre (--fio-sobe), passa pelo título (e pela foto, no
   celular) e vira a linha do tempo. A linha acende até onde a página rolou
   (--prog, de site.js) com uma ponta de luz; cada marco acende quando a luz
   chega (.acesa) e o texto entra (.vista). Sem JS, tudo já aceso. */
.trajetoria {
  --recuo: 2.5rem; --x: 0.6rem; --vao: clamp(2rem, 5vw, 2.8rem); --fio-sobe: clamp(2.5rem, 6vw, 5.5rem);
  display: grid; grid-template-areas: "cabeca" "foto" "trajeto"; row-gap: var(--vao);
  padding: clamp(0.5rem, 2vw, 1.5rem) var(--miolo) clamp(4.5rem, 10vw, 8rem);
}
.trajetoria-cabeca { grid-area: cabeca; position: relative; display: grid; gap: 0.5rem; padding-left: var(--recuo); }
.trajetoria-cabeca::before, .trajetoria-foto::before, .trajeto::before { content: ''; position: absolute; width: 2px; translate: -50% 0; }
.trajetoria-cabeca::before { left: var(--x); top: calc(var(--fio-sobe) * -1); bottom: calc(var(--vao) * -1); background: linear-gradient(180deg, transparent, rgba(196, 161, 101, 0.6) 35%, var(--ouro)); }
.trajetoria-cabeca::after {
  content: ''; position: absolute; left: var(--x); top: calc(var(--fio-sobe) * -1); width: 2px; height: 2.6rem; translate: -50% 0; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--ouro-escuro)); box-shadow: 0 0 10px 1px rgba(196, 161, 101, 0.75);
}
.trajetoria-foto { grid-area: foto; position: relative; margin: 0 0 0 var(--recuo); }
.trajetoria-foto::before { left: calc(var(--x) - var(--recuo)); top: calc(var(--vao) * -1); bottom: calc(var(--vao) * -1); background: var(--ouro); }
.trajetoria-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 22%; border-radius: 24px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.55); }
.trajetoria-foto .moldura { inset: -0.7rem; }

.trajeto { grid-area: trajeto; position: relative; display: grid; gap: clamp(2.3rem, 5vw, 3.1rem); padding-left: var(--recuo); }
.trajeto::before {
  left: var(--x); top: 0; bottom: var(--fim, 0px);
  background: linear-gradient(180deg, var(--ouro) calc(var(--prog, 1) * 100%), rgba(122, 92, 38, 0.18) calc(var(--prog, 1) * 100%));
}
.trajeto::after {
  content: ''; position: absolute; left: var(--x); top: calc((100% - var(--fim, 0px)) * var(--prog, 1)); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: #fff3d6; box-shadow: 0 0 0 3px rgba(196, 161, 101, 0.35), 0 0 16px 3px rgba(196, 161, 101, 0.85); opacity: var(--ponta, 0); transition: opacity 0.3s;
}
.marco { position: relative; display: grid; gap: 0.35rem; }
.marco::before, .marco::after {
  content: ''; position: absolute; left: calc(var(--x) - var(--recuo)); top: 0.15rem; width: 1rem; height: 1rem; translate: -50% 0; border-radius: 50%;
}
.marco::before {
  background: radial-gradient(circle at 35% 30%, #fff3d6, var(--ouro) 55%, var(--ouro-escuro));
  box-shadow: 0 0 0 5px rgba(196, 161, 101, 0.16), 0 0 14px rgba(196, 161, 101, 0.65); transition: background 0.4s, box-shadow 0.4s;
}
.marco::after { box-shadow: 0 0 0 2px var(--ouro); opacity: 0; pointer-events: none; }
.js .marco:not(.acesa)::before { background: var(--branco); box-shadow: inset 0 0 0 2px rgba(122, 92, 38, 0.4); }
.marco-etapa { font-size: 0.72rem; font-weight: 650; font-stretch: 80%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ouro-escuro); line-height: 1.3rem; }
.marco-titulo { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.05rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--tinta-clara); text-wrap: balance; }
.marco-onde { font-weight: 600; font-size: 0.98rem; color: var(--tinta-clara-2); }
.marco-texto { max-width: 34rem; margin-top: 0.25rem; color: var(--tinta-clara-2); }
.marco-itens {
  display: grid; gap: 0.6rem; max-width: 34rem; margin-top: 0.55rem; padding: 1.05rem 1.2rem; border-radius: 18px;
  background: linear-gradient(150deg, #fff 0%, #fbf8f1 60%, #f6efe0 100%); box-shadow: inset 0 0 0 1px rgba(122, 92, 38, 0.22), 0 22px 44px -34px rgba(122, 92, 38, 0.55);
}
.marco-itens li { position: relative; padding-left: 1.25rem; font-weight: 600; line-height: 1.4; color: var(--tinta-clara); }
.marco-itens li::before { content: ''; position: absolute; left: 0.12rem; top: 0.5em; width: 0.4rem; height: 0.4rem; rotate: 45deg; background: var(--ouro); }
.marco-itens span { font-weight: 500; font-style: italic; color: var(--ouro-escuro); white-space: nowrap; }
/* o fim da linha: a frase dele, num cartão escuro que já prepara as avaliações */
.marco--fecho::before { width: 1.3rem; height: 1.3rem; top: 1.4rem; }
.marco--fecho::after { width: 1.3rem; height: 1.3rem; top: 1.4rem; }
.trajetoria-fecho {
  position: relative; overflow: hidden; margin: 0; padding: 3.3rem 1.5rem 1.5rem; border-radius: 24px; max-width: 38rem;
  background: radial-gradient(70% 90% at 100% 0%, rgba(196, 161, 101, 0.16), transparent 70%), linear-gradient(160deg, #1c1c1f, #0a0a0b);
  background-color: #111113; /* a cor de baixo: o medidor de contraste não lê degradê */
  box-shadow: 0 0 0 1px rgba(196, 161, 101, 0.3), 0 40px 70px -40px rgba(0, 0, 0, 0.7);
}
.trajetoria-fecho::before { content: '\201C'; position: absolute; top: 0.45rem; left: 1.3rem; font-family: var(--display); font-size: 5.5rem; line-height: 1; color: var(--ouro); opacity: 0.75; }
.trajetoria-fecho p { position: relative; font-family: var(--display); font-style: italic; font-size: clamp(1.28rem, 1.1rem + 0.85vw, 1.75rem); line-height: 1.38; color: #f3eee4; }
.trajetoria-fecho footer { margin-top: 1.1rem; font-size: 0.74rem; font-weight: 650; font-stretch: 80%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ouro-claro); }
@media (prefers-reduced-motion: no-preference) {
  .trajetoria-cabeca::after { animation: fio-gota 3.6s 1s cubic-bezier(0.55, 0, 0.35, 1) infinite; }
  .js .marco.acesa::after { animation: marco-pulso 1.1s var(--saida); }
  .js .marco > *, .js .trajetoria-fecho { transition: opacity 0.7s var(--saida), translate 0.8s var(--saida); }
  .js .marco > :nth-child(2) { transition-delay: 0.06s; } .js .marco > :nth-child(3) { transition-delay: 0.12s; } .js .marco > :nth-child(n + 4) { transition-delay: 0.18s; }
  .js .marco:not(.vista) > * { opacity: 0; translate: 0.9rem 0; }
}
@keyframes fio-gota { 0% { top: calc(var(--fio-sobe) * -1); opacity: 0; } 12%, 80% { opacity: 1; } 92%, 100% { top: calc(100% + var(--vao) - 2.6rem); opacity: 0; } }
@keyframes marco-pulso { from { scale: 1; opacity: 0.85; } to { scale: 2.8; opacity: 0; } }
@media (min-width: 960px) {
  .trajetoria { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "cabeca foto" "trajeto foto"; grid-template-rows: auto 1fr; column-gap: clamp(3rem, 7vw, 7rem); }
  .trajetoria-foto { position: sticky; top: 7rem; align-self: start; justify-self: end; width: min(100%, 27rem); margin: 0; }
  .trajetoria-foto::before { display: none; }
  .trajetoria-img { aspect-ratio: 2 / 3; object-position: 50% 30%; }
  .trajeto { --recuo: 3rem; }
  .trajetoria-cabeca { --recuo: 3rem; }
}

/* ── 5½ · avaliações do Google ──────────────────────────────────────────── */
/* A nota é um .contador com uma casa (0,0 → 5,0) e as estrelas acendem
   conforme ela sobe (site.js). A esteira: a lista vai duas vezes e corre
   meia largura em laço; para no hover; com movimento reduzido vira uma
   rolagem lateral. Com muitas avaliações, duas faixas em sentidos opostos. */
.google {
  padding: clamp(4.5rem, 10vw, 7.5rem) 0; overflow: hidden;
  background: radial-gradient(50% 40% at 50% 0%, rgba(196, 161, 101, 0.11), transparent 70%), var(--preto);
}
.google-cabeca { display: grid; justify-items: center; gap: 0.7rem; text-align: center; padding: 0 var(--miolo); max-width: calc(46rem + 2 * var(--miolo)); margin: 0 auto clamp(2.4rem, 5vw, 3.4rem); }
.google-cabeca .rotulo { justify-content: center; margin-bottom: 0.2rem; }
.google-nota { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.4rem); }
.google-nota .contador { font-family: var(--display); font-weight: 500; font-size: clamp(4.2rem, 3rem + 6vw, 7rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--ouro-claro); }
.estrelas { display: flex; gap: 0.3rem; }
.estrela { width: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); height: auto; fill: rgba(255, 255, 255, 0.13); transition: fill 0.35s, filter 0.35s; }
.estrela.acesa { fill: var(--ouro); filter: drop-shadow(0 0 8px rgba(196, 161, 101, 0.55)); }
@media (prefers-reduced-motion: no-preference) { .js .estrela.acesa { animation: estrela 0.55s var(--mola) both; } }
@keyframes estrela { 0% { transform: scale(0.4) rotate(-30deg); } 60% { transform: scale(1.3) rotate(6deg); } 100% { transform: none; } }
.google-total { font-size: 0.82rem; font-weight: 600; font-stretch: 80%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-2); }
.google-cabeca .titulo { margin-top: 0.6rem; }
.google-link { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 2.8rem); padding: 0 var(--miolo); }
.google-link .ico { color: var(--ouro); }

.esteira {
  --dur: 60s; overflow: hidden; padding: 0.6rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.esteira + .esteira { margin-top: 0.4rem; }
.esteira-faixa { display: flex; gap: 1.1rem; width: max-content; padding: 0 0.55rem; }
.aval { flex: none; width: min(82vw, 23rem); display: grid; align-content: start; gap: 0.75rem; padding: 1.3rem 1.4rem 1.45rem; border-radius: 26px; }
.aval-quem { display: flex; align-items: center; gap: 0.75rem; }
.aval-letra { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-family: var(--display); font-size: 1.2rem; color: #17110a; background: linear-gradient(180deg, #e2c897, #c4a165 52%, #a8854a); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 6px 18px -6px rgba(196, 161, 101, 0.6); }
.aval-nome { display: grid; font-weight: 650; line-height: 1.25; }
.aval-quando { font-size: 0.8rem; font-weight: 500; color: var(--tinta-3); }
.aval-estrelas { display: flex; gap: 0.15rem; }
.aval-estrelas .estrela { width: 1rem; }
.aval-texto { color: #dcdce0; font-size: 0.96rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
/* as de uma palavra ou uma frase curta: em itálico grande, no dourado */
.aval--curta .aval-texto { font-family: var(--display); font-style: italic; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem); line-height: 1.15; color: var(--ouro-claro); padding-top: 0.3rem; }
@media (prefers-reduced-motion: no-preference) {
  .esteira-faixa { animation: esteira var(--dur) linear infinite; }
  .esteira--volta .esteira-faixa { animation-direction: reverse; }
  .esteira:hover .esteira-faixa, .esteira:focus-within .esteira-faixa { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .esteira { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .aval { scroll-snap-align: center; }
  .aval[aria-hidden="true"] { display: none; }
}
@keyframes esteira { to { transform: translateX(-50%); } }

/* ── 6 · planejado no digital ────────────────────────────────────────────── */
/* A foto do escaneamento numa moldura de luz afastada, e uma luz de scanner
   que desce por ela em laço (mistura "screen", então só clareia). */
.digital {
  display: grid; gap: clamp(2.2rem, 5vw, 4rem); align-items: center;
  padding: clamp(4.5rem, 10vw, 8rem) var(--miolo);
  background: radial-gradient(55% 50% at 25% 50%, rgba(196, 161, 101, 0.1), transparent 72%), var(--grafite);
}
.digital-foto { position: relative; width: 100%; max-width: 36rem; margin-inline: auto; }
.digital-foto .moldura { inset: -0.9rem; }
.digital-tela { position: relative; display: block; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 90px -40px #000, 0 0 0 1px var(--linha); }
.digital-img { width: 100%; height: auto; }
.digital-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 34%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(196, 161, 101, 0.16) 70%, rgba(255, 240, 205, 0.55) 97%, rgba(255, 250, 238, 0.95) 99%, transparent);
}
.digital-texto { max-width: 34rem; }
.digital-passos { display: grid; margin-top: 1.8rem; counter-reset: passo; }
.digital-passos li {
  position: relative; display: grid; gap: 0.2rem; padding: 0 0 1.4rem 3.4rem; counter-increment: passo;
}
.digital-passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  font-family: var(--display); font-size: 1.1rem; color: var(--ouro-claro); box-shadow: inset 0 0 0 1px var(--ouro), 0 0 16px rgba(196, 161, 101, 0.25);
}
.digital-passos li:not(:last-child)::after { content: ''; position: absolute; left: 1.15rem; top: 2.6rem; bottom: 0.3rem; width: 1px; background: linear-gradient(180deg, var(--ouro), rgba(196, 161, 101, 0.1)); transform-origin: top; }
.digital-passos b { font-family: var(--display); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.2; padding-top: 0.15rem; }
.digital-passos span { color: var(--tinta-2); }
@media (min-width: 960px) {
  .digital { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .digital-foto { margin: 0; justify-self: end; }
}
@media (prefers-reduced-motion: no-preference) {
  .digital-scan { animation: scan 5.5s 1s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .js .digital-passos li { opacity: 0; translate: 0 0.8rem; }
  .js .foi-revelado .digital-passos li { opacity: 1; translate: 0 0; transition: opacity 0.7s calc(0.25s + var(--i) * 0.18s) var(--saida), translate 0.8s calc(0.25s + var(--i) * 0.18s) var(--saida); }
  .js .digital-passos li::after { scale: 1 0; }
  .js .foi-revelado .digital-passos li::after { scale: 1 1; transition: scale 0.8s calc(0.5s + var(--i) * 0.18s) var(--saida); }
}
@keyframes scan { 0% { transform: translateY(-100%); opacity: 0; } 12% { opacity: 1; } 62% { opacity: 1; } 75%, 100% { transform: translateY(300%); opacity: 0; } }

/* ── 7 · VP Digital Lab ──────────────────────────────────────────────────── */
.lab {
  position: relative; overflow: hidden; display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(4.5rem, 10vw, 8rem) var(--miolo);
  background: radial-gradient(50% 60% at 62% 45%, rgba(196, 161, 101, 0.1), transparent 70%), var(--preto);
}
.lab-lead { color: var(--tinta-2); font-size: 1.1rem; max-width: 30rem; margin-top: 1.2rem; text-wrap: pretty; }
.lab-faz { display: grid; margin-top: 1.8rem; border-top: 1px solid var(--linha); }
.lab-faz li { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linha); font-family: var(--display); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem); line-height: 1.2; }
.lab-faz li::before { content: ''; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ouro-claro); box-shadow: 0 0 8px rgba(227, 203, 152, 0.9), 0 0 20px rgba(196, 161, 101, 0.45); }
.midas { position: relative; margin: 0 auto; width: min(80vw, 24rem); aspect-ratio: 2 / 3; }
.midas-luz { position: absolute; inset: 18% 6% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 178, 112, 0.24), rgba(196, 161, 101, 0.06) 60%, transparent); filter: blur(10px); }
.midas .moldura { inset: 4% 0 5%; }
.midas-img { position: relative; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: radial-gradient(75% 70% at 50% 46%, #000 70%, transparent 100%); mask-image: radial-gradient(75% 70% at 50% 46%, #000 70%, transparent 100%); }
.midas-nome { position: absolute; left: 50%; bottom: -1.2rem; translate: -50% 0; white-space: nowrap; font-family: var(--display); font-size: 1.35rem; letter-spacing: 0.02em; }
.midas-nome span { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; font-stretch: 80%; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta-3); margin-right: 0.4rem; vertical-align: 0.2em; }
.midas-fatos { display: grid; gap: 0.7rem; margin-top: 1rem; }
.midas-fatos li { display: grid; gap: 0.25rem; padding: 1rem 1.15rem; border-radius: 20px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--linha); }
.midas-fatos b { font-family: var(--display); font-weight: 500; font-size: 1.3rem; color: var(--ouro-claro); }
.midas-fatos span { color: var(--tinta-2); font-size: 0.95rem; }
@media (min-width: 1000px) {
  .lab { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.75fr); align-items: center; column-gap: clamp(2rem, 4vw, 4rem); }
  .midas { width: 100%; max-width: 26rem; }
  .midas-fatos { margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .midas-img { animation: flutua 7s ease-in-out infinite; }
  .midas-luz { animation: pulsa 4.5s ease-in-out infinite; }
}
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulsa { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* ── 8 · equipamentos ────────────────────────────────────────────────────── */
.equip { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4.5rem, 10vw, 7.5rem); background: linear-gradient(180deg, var(--preto), var(--grafite)); }
.equip-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(0.9rem, 2vw, 1.4rem); padding: 0 var(--miolo); }
.equip-item { display: grid; gap: 0.6rem; align-content: start; }
.equip-foto { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #111; box-shadow: inset 0 0 0 1px var(--linha); }
.equip-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--saida); }
.equip-item:hover .equip-foto img { transform: scale(1.05); }
.equip-nome { font-family: var(--display); font-weight: 500; font-size: 1.35rem; line-height: 1.15; margin-top: 0.4rem; }
.equip-txt { color: var(--tinta-2); font-size: 0.95rem; }
@media (min-width: 1100px) { .equip-lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } }  /* cinco cartões numa linha só */
/* abaixo de 1100px os cinco não cabem numa linha: a lista vira faixa que desliza */
@media (max-width: 1099px) {
  .equip-lista { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(72vw, 17rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--miolo); }
  .equip-lista::-webkit-scrollbar { display: none; }
  .equip-item { scroll-snap-align: start; }
}

/* ── 8 · o espaço: as fotos na proporção delas, em fileiras ──────────────── */
.espaco { padding: clamp(4.5rem, 10vw, 7.5rem) var(--miolo); }
.espaco-slogan { font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.025em; text-align: center; max-width: 18ch; margin: 0 auto clamp(2rem, 5vw, 3.5rem); text-wrap: balance; }
.espaco-slogan em { font-style: italic; font-weight: 400; color: var(--ouro-escuro); }
.espaco-grade { display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 1.4vw, 1rem); }
.espaco-foto { flex: 1 1 100%; aspect-ratio: var(--ar); border-radius: 22px; overflow: hidden; position: relative; background: var(--branco-2); }
.espaco-foto:nth-of-type(2), .espaco-foto:nth-of-type(3) { flex-basis: calc(50% - 0.5rem); }
.espaco-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--saida); }
.espaco-foto:hover img { transform: scale(1.03); }
.espaco-quebra { display: none; }
@media (min-width: 900px) {
  /* fileiras justificadas: cada foto cresce na proporção dela, então a
     altura de uma fileira é a mesma e nada é cortado */
  .espaco-foto, .espaco-foto:nth-of-type(2), .espaco-foto:nth-of-type(3) { flex: var(--ar) 1 0; }
  .espaco-quebra { display: block; flex-basis: 100%; height: 0; }
}

/* ── 9 · onde estamos ────────────────────────────────────────────────────── */
.onde { display: grid; gap: 2rem; padding: clamp(4.5rem, 10vw, 7.5rem) var(--miolo); background: var(--grafite); align-items: center; }
.onde-end { font-family: var(--display); font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2rem); line-height: 1.3; margin-top: 1.4rem; }
.onde-hora { color: var(--tinta-2); margin-top: 0.8rem; }
.onde-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.2rem; margin-top: 1.6rem; }
.onde-mapa { border-radius: var(--raio); padding: 0.5rem; aspect-ratio: 4 / 3.2; }
.onde-mapa iframe { width: 100%; height: 100%; border: 0; border-radius: 22px; filter: grayscale(1) invert(0.92) contrast(0.92) brightness(0.95); }
@media (min-width: 960px) { .onde { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3.5rem; } }

/* ── 11 · fecho e rodapé ─────────────────────────────────────────────────── */
.fecho {
  position: relative; overflow: hidden; text-align: center; display: grid; justify-items: center;
  padding: clamp(4.5rem, 10vw, 8rem) var(--miolo);
  --fita-y: 84%; --fita-esc: 22%; --fita-incl: -0.25;
  isolation: isolate;
  background: radial-gradient(50% 60% at 50% 0%, rgba(196, 161, 101, 0.1), transparent 70%), var(--preto);
  border-top: 1px solid var(--linha);
}
.fecho .fitas { z-index: -1; }
.fecho .fitas.pronto { opacity: 0.55; }
.fecho-logo { width: clamp(6rem, 14vw, 8.5rem); margin-bottom: 1.8rem; filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.18)); }
.fecho-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 2rem; }

.rodape { display: grid; gap: 1.8rem; padding: clamp(3rem, 6vw, 4.5rem) var(--miolo) calc(6rem + env(safe-area-inset-bottom)); background: var(--preto); border-top: 1px solid var(--linha); font-size: 0.94rem; color: var(--tinta-2); }
.rodape-marca { width: min(9rem, 50vw); }
.rodape-tit { font-size: 0.72rem; font-weight: 600; font-stretch: 80%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 0.35rem; }
.rodape a { color: var(--tinta); text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.rodape-nota { font-size: 0.82rem; color: var(--tinta-3); border-top: 1px solid var(--linha); padding-top: 1.2rem; }
@media (min-width: 900px) {
  .rodape { grid-template-columns: 1fr 1.2fr 1.2fr 1.2fr; align-items: start; padding-bottom: 3rem; }
  .rodape-nota { grid-column: 1 / -1; }
}

.barra-cel {
  position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0.45rem; padding: 0.4rem; border-radius: 999px;
  background: rgba(20, 20, 22, 0.66); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px -16px #000;
  transform: translateY(160%); transition: transform 0.5s var(--mola);
}
.barra-cel.visivel { transform: none; }
.barra-cel a { display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.9rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.93rem; }
.barra-cel .ico { width: 1.1rem; height: 1.1rem; }
.barra-cel-pre { color: #fff; box-shadow: inset 0 0 0 1px var(--linha-forte); }
.barra-cel-whats { color: #17110a; background: linear-gradient(180deg, #e2c897, #c4a165 52%, #a8854a) #c4a165; }
@media (min-width: 900px) { .barra-cel { display: none; } }
.js .barra-cel:not(.visivel) { visibility: hidden; transition: transform 0.5s var(--mola), visibility 0s 0.5s; }

/* ── a página de serviços ────────────────────────────────────────────────── */
.serv-heroi { padding: calc(7rem + env(safe-area-inset-top)) var(--miolo) clamp(3rem, 6vw, 4.5rem); background: radial-gradient(60% 70% at 80% 0%, rgba(255, 255, 255, 0.08), transparent 70%), var(--preto); }
.serv-heroi .titulo { max-width: 16ch; }
.serv-lead { color: var(--tinta-2); font-size: 1.1rem; max-width: 36rem; margin-top: 1.3rem; }
.serv-indice ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.serv-indice a { display: inline-block; padding: 0.5rem 0.95rem; border-radius: 999px; font-size: 0.9rem; text-decoration: none; color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha-forte); transition: color 0.2s, background-color 0.2s; }
.serv-indice a:hover { color: #17110a; background: var(--ouro); }
.serv-lista { display: grid; }
.serv { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(3rem, 7vw, 5.5rem) var(--miolo); border-top: 1px solid var(--linha); scroll-margin-top: 3rem; }
.serv:nth-child(even) { background: var(--marmore); }
.serv-fotos { display: grid; gap: 0.7rem; align-content: start; }
.serv-foto { position: relative; aspect-ratio: 4 / 4.4; border-radius: 24px; overflow: hidden; background: #111; }
.serv-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.serv-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.serv-mini { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #111; }
.serv-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.serv-texto { display: grid; gap: 1.4rem; align-content: center; }
.serv-nome { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.3rem); line-height: 1.03; letter-spacing: -0.02em; }
.serv-nome em { display: block; font-family: var(--sans); font-style: normal; font-size: 0.32em; font-weight: 600; font-stretch: 85%; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.8rem; color: var(--tinta-3); }
.serv-dl { display: grid; gap: 1rem; }
.serv-dl > div { display: grid; gap: 0.2rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
.serv-dl dt { font-size: 0.72rem; font-weight: 600; font-stretch: 80%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-3); }
.serv-dl dd { margin: 0; color: #dcdce0; font-size: 1.04rem; }
.serv-acoes .botao { white-space: normal; text-align: left; line-height: 1.3; }
@media (min-width: 960px) {
  .serv { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
  .serv:nth-child(even) .serv-fotos { order: 2; }
  .serv-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
}

/* ── movimento de entrada ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .heroi-doutor { animation: sobe 1.4s 0.25s var(--saida) both; }
  /* a moldura: cada linha cresce depois da anterior (--n) */
  .js .moldura i:nth-child(odd) { transform: scaleX(0); }
  .js .moldura i:nth-child(even) { transform: scaleY(0); }
  .js .heroi-doutor .moldura i, .js .foi-revelado .moldura i { animation: linha-x 0.6s calc(var(--m0, 0.6s) + var(--n) * 0.55s) cubic-bezier(0.65, 0, 0.35, 1) forwards; }
  .js .heroi-doutor .moldura i:nth-child(even), .js .foi-revelado .moldura i:nth-child(even) { animation-name: linha-y; }
  .moldura i:nth-child(1) { --n: 0; } .moldura i:nth-child(2) { --n: 1; } .moldura i:nth-child(3) { --n: 2; } .moldura i:nth-child(4) { --n: 3; }
  .foi-revelado .moldura { --m0: 0.2s; }
  .js .heroi-quem { animation: entra 1s 0.9s var(--saida) both; }
  .js .heroi-frase { animation: entra 1s 1.02s var(--saida) both; }
  .js .heroi-acoes { animation: entra 1s 1.16s var(--saida) both; }
  .js .revela { opacity: 0; translate: 0 1.6rem; }
  .js .revela.foi-revelado { opacity: 1; translate: 0 0; transition: opacity 0.9s var(--saida), translate 1s var(--saida); }
  .js .mosaico-item { opacity: 0; translate: 0 1.2rem; }
  .js .mosaico.visto .mosaico-item { opacity: 1; translate: 0 0; transition: opacity 0.8s calc(var(--i) * 60ms) var(--saida), translate 0.9s calc(var(--i) * 60ms) var(--saida); }
  .js .lab-faz li { opacity: 0; translate: -0.8rem 0; }
  .js .foi-revelado .lab-faz li { opacity: 1; translate: 0 0; transition: opacity 0.7s calc(0.3s + var(--i) * 0.12s) var(--saida), translate 0.8s calc(0.3s + var(--i) * 0.12s) var(--saida); }
}
@keyframes entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes linha-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes linha-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sobe { from { opacity: 0; transform: translateY(40px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* sem WebGL, a foto entra abrindo de dentro para fora */
@media (prefers-reduced-motion: no-preference) { .sobre-palco.sem-webgl.foto > img { animation: foto-entra 1.3s var(--saida) both; } }
@keyframes foto-entra { from { clip-path: circle(0% at 50% 42%); filter: brightness(1.8); } to { clip-path: circle(80% at 50% 42%); filter: none; } }
.topo.menu-aberto { background: rgba(0, 0, 0, 0.7); border-bottom-color: var(--linha); }