/* Uma gravura da própria clínica por seção, ampliada até cobrir o fundo, bem transparente,
   com vidro fosco por cima e deslocamento suave acompanhando o mouse. */
.has-art { position: relative; isolation: isolate; overflow: hidden; }
.art {
  position: absolute; inset: -48px; z-index: -1; pointer-events: none;
  background-repeat: no-repeat; background-size: cover; background-position: center;
  opacity: var(--o, .045); filter: grayscale(1);
  transform: translate3d(calc(var(--mx, 0) * 24px), calc(var(--my, 0) * 24px), 0);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}
/* leve escurecimento nas bordas para o texto respirar */
.has-art::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(14, 15, 17, .55) 100%);
}
/* uma gravura por seção, ampliada até cobrir o fundo */
.art--hero { background-image: url("../img/quadros/folhas.webp?v=2"); --o: .045; background-position: 70% 40%; }
.art--reviews { background-image: url("../img/quadros/ondas.webp?v=2"); --o: .05; background-position: 50% 45%; }
.art--final { background-image: url("../img/quadros/pincelada.webp?v=2"); --o: .055; background-position: 40% 50%; }

/* vidro fosco */
.glass {
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, .12);
}
.hero .hero__in { position: relative; z-index: 1; }
.final__card { max-width: 760px; margin-inline: auto; padding: clamp(2rem, 5vw, 3.5rem); border-radius: 28px; }

@media (max-width: 720px) {
  .art { inset: 0; }
  .final__card { padding: 1.75rem 1.25rem; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .art { transition: none; transform: none; }
}