/* The scroll scene enhances a complete static hero and never captures input. */
.hero-scene { position: relative; }
.hero { isolation: isolate; display: block; min-height: min(860px, 100svh); }
.hero-left { width: min(58%, 820px); min-height: inherit; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 6rem 2rem 7rem 9%; }
.hero h1 { font-size: clamp(4rem, 7.4vw, 7rem); }
.hero-art { --progress: 0; position: absolute; z-index: -1; inset: 0; min-height: 0; background: #153c33; pointer-events: none; overflow: hidden; }
.hero-art::before, .hero-art::after { content: none; }
.hero-media { position: absolute; inset: 0; background: linear-gradient(90deg, #10362d 5%, rgba(16,54,45,.9) 38%, rgba(16,54,45,.12) 85%), url('assets/hero.webp') center / cover no-repeat; transform: scale(calc(1 + var(--progress) * .16)); transform-origin: 72% 50%; }
.liquid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.liquid-active .liquid-canvas { opacity: 1; }
.liquid-active .hero-media { background-image: linear-gradient(90deg, #10362d, #20483e); }
.reveal-word { display: inline-block; opacity: calc(.35 + var(--word-progress, 1) * .65); transform: translateY(calc((1 - var(--word-progress, 1)) * .16em)); }
.about-mark { overflow: hidden; }
.about-mark::before { display: none; }
.about-mark img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center 12%; transform: scale(1.18); }
.hero-art::after { content: ''; display: block; position: absolute; inset: 0; width: auto; height: auto; left: 0; top: 0; border: 0; border-radius: 0; background: linear-gradient(90deg, #10362d 0%, rgba(16,54,45,.65) 44%, transparent 78%); }
.scroll-hint { z-index: 2; min-height: 44px; display: inline-flex; align-items: center; }
.header-cta, .text-link { min-height: 44px; display: inline-flex; align-items: center; }
.header nav a { min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) {
  .button { transition: transform .22s cubic-bezier(.16,1,.3,1), background-color .22s ease; }
  .button:hover { transform: translateY(-3px); }
  .button:active { transform: scale(.98); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .statement-inner { animation: statement-enter linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; }
    .service-list article { animation: service-enter linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    @keyframes statement-enter { from { opacity: .45; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
    @keyframes service-enter { from { opacity: .55; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  }
}
@media (min-width: 801px) and (min-height: 651px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-scene { height: 175svh; }
  .motion-ready .hero { position: sticky; top: 0; height: 100svh; min-height: 0; }
  .motion-ready .hero-art { clip-path: inset(3% calc((1 - var(--progress)) * 3%) 3% calc((1 - var(--progress)) * 48%) round calc((1 - var(--progress)) * 20px)); }
}
@media (max-width: 800px) {
  .header { flex-wrap: wrap; row-gap: .25rem; padding-top: .75rem; padding-bottom: .6rem; }
  .header nav { order: 3; width: 100%; display: flex; justify-content: space-between; gap: .4rem; margin: 0; font-size: .78rem; }
  .hero { min-height: min(690px, 82svh); }
  .hero-left { width: 100%; min-height: inherit; padding: 5rem 7% 6rem; justify-content: flex-end; }
  .hero h1 { font-size: clamp(3.3rem, 13vw, 5.8rem); }
  .hero-copy { max-width: 29ch; margin: 1.4rem 0 1.7rem; }
  .hero-media { background-position: 65% center; }
  .hero-art::after { background: linear-gradient(0deg, #10362d 4%, rgba(16,54,45,.92) 30%, rgba(16,54,45,.25) 100%); }
  .scroll-hint { display: inline-flex; left: 7%; bottom: .75rem; }
  .intro, .services, .contact { padding-top: 5rem; padding-bottom: 5rem; }
  .intro-title, .services-heading h2, .about h2, .contact h2 { font-size: clamp(2.8rem, 10vw, 4.5rem); }
}
@media (max-width: 360px) { .hero h1 { font-size: 3.15rem; } .hero-left { padding-top: 3rem; } }
@media (max-width: 800px) and (min-height: 701px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-scene { height: 145svh; }
  .motion-ready .hero { position: sticky; top: 0; min-height: 0; height: 100svh; }
  .motion-ready .hero-art { clip-path: inset(calc((1 - var(--progress)) * 3%) 0 0 0 round calc((1 - var(--progress)) * 16px)); }
}
@media (prefers-reduced-motion: reduce) { .hero-media { transform: none; } .reveal-word { opacity: 1; transform: none; } }

/* Scrollcraft editorial chapters: each responds differently to the same gesture. */
@media (prefers-reduced-motion: no-preference) {
  .services .service-sign { transform: rotate(calc((var(--sc-p, .5) - .5) * 120deg)); }
  .services .service-list article:first-child { transform: translateX(calc((.5 - var(--sc-p, .5)) * 24px)); }
  .services .service-list article:last-child { transform: translateX(calc((var(--sc-p, .5) - .5) * 24px)); }
  .contact > div:first-child { transform: translateY(calc((.5 - var(--sc-p, .5)) * 28px)); }
  .statement { overflow: hidden; }
}
@media (max-width: 800px) {
  .services { overflow: clip; }
  .services .service-list article { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-sc-reveal] { clip-path: none !important; }
  [data-sc-parallax] { transform: none !important; }
}
/* Word wrappers inherit the statement typography instead of the caption style. */
.statement-inner p .reveal-word { display: inline-block; margin: 0; font-size: inherit; color: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .service-list article { animation: none; }
}

/* Refinamento responsivo: leitura imediata e alvos confortáveis ao toque. */
.reveal-word { opacity: calc(.78 + var(--word-progress, 1) * .22); }
.hero .reveal-word { opacity: calc(.9 + var(--word-progress, 1) * .1); }
.brand, .contact-side a, footer a { min-height: 44px; display: inline-flex; align-items: center; }
.hero h1, .intro-title, .services-heading h2, .about h2, .contact h2 { text-wrap: balance; }
@media (max-width: 800px) {
  .header { column-gap: .5rem; }
  .brand-mark { font-size: 2.6rem; }
  .header-cta { padding-inline: .65rem; }
  .hero-left { padding-bottom: 5rem; }
  .hero-copy { line-height: 1.55; }
  footer { padding-bottom: max(2.5rem, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .brand { gap: .45rem; }
  .header-cta { font-size: .65rem; }
}
@media (max-width: 800px) and (max-height: 500px) {
  .hero-left { padding-block: 2.5rem 5rem; }
  .hero h1 { font-size: clamp(3rem, 8vw, 4.5rem); }
  .hero-copy { margin-block: 1rem; }
}
@media (max-width: 360px) { .header-cta { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .hero .reveal-word { opacity: 1; } }

/* Serviços e comparação ilustrativa, em linguagem visual editorial. */
.service-showcase { display: block; background: #f5f8f5; padding: clamp(5rem, 9vw, 9rem) 7%; }
.service-showcase .services-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.service-showcase .services-heading h2, .smile-intro h2 { font: 400 clamp(2.7rem, 5.2vw, 5rem)/1.03 var(--serif); letter-spacing: -.035em; margin: 0; max-width: 13ch; }
.service-showcase .services-heading p { max-width: 31ch; margin: 0; color: #3c5a4b; }
.treatment-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.treatment-card { overflow: hidden; background: white; border: 1px solid #d9e3d9; }
.treatment-image { height: clamp(190px, 23vw, 310px); background-image: url('assets/sorriso-ilustrativo-otimizado.webp'); background-size: 200% 100%; }
.treatment-one { background-position: right center; }
.treatment-two { background-position: left center; }
.treatment-three { background-image: url('assets/sarah-instagram.png'); background-size: cover; background-position: center 18%; }
.treatment-copy { padding: 1.6rem; }
.treatment-copy h3 { margin: 0 0 .5rem; font: 500 clamp(1.4rem,2vw,1.8rem)/1.15 var(--sans); letter-spacing: -.03em; }
.treatment-copy p { color: #405d50; margin: 0; }
.service-showcase .service-note { margin-top: 1.5rem; color: #486054; }
.smile-section { background: #e3eee6; padding: clamp(5rem,8vw,8rem) 7%; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); column-gap: 5%; align-items: center; }
.smile-intro p { max-width: 35ch; color: #3d5c4d; }
.smile-intro .smile-disclaimer { font-size: .8rem; line-height: 1.5; }
.smile-demo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #bd9b87; }
.smile-photo { position: absolute; inset: 0; background-image: url('assets/sorriso-ilustrativo-otimizado.webp'); background-size: 200% 100%; background-repeat: no-repeat; }
.smile-photo-first { background-position: left center; }
.smile-photo-second { background-position: right center; clip-path: inset(0 0 0 var(--split)); }
.smile-divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; background: white; transform: translateX(-50%); pointer-events: none; display: grid; place-items: center; }
.smile-divider span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: white; color: #163b34; box-shadow: 0 2px 14px #0004; font-size: 1.4rem; }
.smile-tags { position: absolute; inset: auto 1rem 1rem; display: flex; justify-content: space-between; gap: .5rem; pointer-events: none; }
.smile-tags span { background: #123c32e8; color: white; padding: .4rem .7rem; font-size: .75rem; }
.smile-controls { grid-column: 2; margin-top: 1rem; }
.smile-controls[hidden] { display: none; }
.smile-controls label { display: block; font-size: .85rem; margin-bottom: .4rem; }
.smile-controls input { width: 100%; min-height: 44px; accent-color: #1d5142; cursor: pointer; }
.smile-controls input:focus-visible { outline: 3px solid #926c25; outline-offset: 3px; }
@media (max-width: 800px) {
 .service-showcase .services-heading { display: block; }
 .service-showcase .services-heading p { margin-top: 1rem; }
 .treatment-grid { grid-template-columns: 1fr; gap: .75rem; }
 .treatment-card { display: grid; grid-template-columns: minmax(110px,38%) 1fr; }
 .treatment-image { height: auto; min-height: 165px; }
 .treatment-copy { padding: 1.2rem; align-self: center; }
 .treatment-copy h3 { font-size: 1.25rem; }
 .treatment-copy p { font-size: .9rem; line-height: 1.45; }
 .smile-section { grid-template-columns: 1fr; gap: 1.5rem; }
 .smile-controls { grid-column: 1; margin-top: 0; }
}
.smile-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .001; cursor: ew-resize; z-index: 2; }
.smile-range[hidden] { display: none; }
.smile-demo:focus-within { outline: 3px solid #926c25; outline-offset: 4px; }
.smile-divider { display: none; }
.smile-ready .smile-divider { display: grid; }
.treatment-image { position: relative; }
.treatment-image > span { position: absolute; bottom: .5rem; left: .5rem; padding: .2rem .4rem; background: #123c32ed; color: #fff; font-size: .68rem; }
.smile-photo-second { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.smile-scale { display: flex; justify-content: space-between; font-size: .8rem; color: #355648; }