/* ==========================================================================
   Dr. Carlos Magalhães — Lentes de Contato Dental · Cruzeiro do Sul
   International luxury cosmetic-dentistry editorial register.
   ========================================================================== */

:root{
  --c-ink: #1c1a17;
  --c-ink-soft: #5c5042;
  --c-ground: #faf6ee;
  --c-ground-alt: #f0e6d4;
  --c-surface: #fffdf8;
  --c-gold: #9c7a3c;
  --c-gold-deep: #7c5f2a;
  --c-gold-pale: #cdae76;
  --c-line: rgba(28,26,23,0.14);
  --c-line-on-dark: rgba(250,246,238,0.18);
  --c-cream: #f6efe2;

  --f-display: 'Bodoni Moda', 'Times New Roman', serif;
  --f-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;

  --measure: 62ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --radius: 2px;
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video{ max-width: 100%; display: block; }

h1, h2, h3{
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: var(--c-ink);
}

p{ margin: 0 0 1em; max-width: var(--measure); color: var(--c-ink-soft); }
p:last-child{ margin-bottom: 0; }

a{ color: inherit; }

ul, ol{ padding: 0; margin: 0; list-style: none; }

svg{ fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Browser surfaces — themed, never left to defaults */
::selection{ background: var(--c-ink); color: var(--c-cream); }
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: var(--c-ground); }
::-webkit-scrollbar-thumb{ background: var(--c-gold-pale); border-radius: 8px; border: 3px solid var(--c-ground); }
:focus-visible{ outline: 2px solid var(--c-gold-deep); outline-offset: 3px; }
::placeholder{ color: var(--c-ink-soft); opacity: 0.6; }

.skip-link{
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--c-ink); color: var(--c-cream); padding: 12px 20px;
}
.skip-link:focus{ left: 12px; top: 12px; }

/* ---- layout helpers ---- */
.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- reveal-on-scroll ---- */
[data-reveal]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal-delay="1"]{ transition-delay: 0.12s; }
[data-reveal].is-visible{ opacity: 1; transform: none; }

/* ==========================================================================
   Topbar
   ========================================================================== */
.topbar{
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,246,238,0.88);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--c-line);
}
.topbar__inner{
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  height: 76px; display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
}
.topbar__mark{ text-decoration: none; margin-right: auto; }
.topbar__mark-name{
  font-family: var(--f-display); font-size: 1.28rem; letter-spacing: -0.01em; color: var(--c-ink);
}
.topbar__nav{ display: flex; gap: clamp(14px, 2.4vw, 30px); }
.topbar__nav a{
  font-size: 0.86rem; text-decoration: none; color: var(--c-ink-soft);
  position: relative; padding-bottom: 2px;
}
.topbar__nav a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--c-gold-deep); transition: right 0.3s var(--ease-out);
}
.topbar__nav a:hover::after{ right: 0; }
.topbar__meta{ display: flex; align-items: center; gap: 16px; }
.topbar__cro, .topbar__city{ font-size: 0.72rem; color: var(--c-ink-soft); letter-spacing: 0.02em; white-space: nowrap; }
.topbar__cro{ border-right: 1px solid var(--c-line); padding-right: 16px; }
.topbar__wa{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-ink); color: var(--c-cream);
  padding: 9px 16px; border-radius: var(--radius); text-decoration: none;
  font-size: 0.82rem; font-weight: 600; white-space: nowrap;
  transition: background 0.25s var(--ease-out);
}
.topbar__wa:hover{ background: var(--c-gold-deep); }
.topbar__wa svg{ width: 15px; height: 15px; stroke: none; fill: currentColor; }

@media (max-width: 920px){
  .topbar__nav, .topbar__city{ display: none; }
  .topbar__cro{ border-right: none; padding-right: 0; }
}
@media (max-width: 560px){
  .topbar__wa span{ display: none; }
  .topbar__wa{ padding: 10px; }
  .topbar__wa svg{ width: 17px; height: 17px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-body); font-weight: 700; font-size: 0.95rem;
  padding: 16px 26px; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.btn svg{ width: 17px; height: 17px; transition: transform 0.3s var(--ease-out); }
.btn:hover svg{ transform: translateX(3px); }
.btn--primary{ background: var(--c-ink); color: var(--c-cream); }
.btn--primary:hover{ background: var(--c-gold-deep); }
.btn--ghost-dark{ background: transparent; color: var(--c-cream); border-color: var(--c-line-on-dark); }
.btn--ghost-dark:hover{ border-color: var(--c-gold-pale); color: var(--c-gold-pale); }
.btn--ghost-light{ background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost-light:hover{ border-color: var(--c-gold-deep); color: var(--c-gold-deep); background: rgba(28,26,23,0.04); }
.btn--lg{ padding: 19px 34px; font-size: 1.02rem; }

/* Floating WhatsApp button */
.wa-float{
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff;
  padding: 15px 22px; border-radius: 999px; text-decoration: none;
  font-family: var(--f-body); font-weight: 700; font-size: 0.88rem;
  box-shadow: 0 14px 30px -10px rgba(28,22,10,0.5);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.wa-float:hover{ transform: translateY(-2px); box-shadow: 0 18px 38px -10px rgba(28,22,10,0.6); }
.wa-float svg{ width: 21px; height: 21px; stroke: none; fill: currentColor; }
@media (max-width: 560px){
  .wa-float span{ display: none; }
  .wa-float{ padding: 14px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  max-width: var(--container); margin-inline: auto;
  padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(56px, 8vw, 104px);
  min-height: clamp(560px, 92vh, 820px);
}
.hero__bg-video{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.hero__bg-overlay{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(20,17,12,0.68) 0%, rgba(20,17,12,0.42) 42%, rgba(20,17,12,0.22) 62%, rgba(20,17,12,0.46) 100%),
    linear-gradient(to top, rgba(10,8,5,0.5) 0%, rgba(10,8,5,0) 38%);
}
.hero__copy{ position: relative; z-index: 2; max-width: 640px; }
.hero__copy--glass{
  background: linear-gradient(150deg, rgba(15,13,10,0.82), rgba(15,13,10,0.66));
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: clamp(28px, 4vw, 46px);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
.hero__headline{
  font-size: clamp(2.3rem, 4.1vw, 3.6rem);
  line-height: 1.08;
  max-width: 13ch;
  color: var(--c-cream);
}
.hero__sub{ font-size: 1.07rem; margin-top: 20px; max-width: 46ch; color: rgba(246,239,226,0.82); }
.hero__sub strong{ color: var(--c-gold-pale); font-weight: 700; }
.hero__actions{ margin-top: 34px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero__note{ font-size: 0.82rem; color: rgba(246,239,226,0.72); }
.hero__anchor{ font-size: 0.86rem; margin-top: 16px; max-width: 46ch; color: rgba(246,239,226,0.78); }
.hero__anchor strong{ color: var(--c-gold-pale); font-weight: 700; }

/* ==========================================================================
   Before/After slider component
   ========================================================================== */
.ba-slider{
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 3.6; background: var(--c-ground-alt);
  box-shadow: 0 30px 60px -28px rgba(28,22,10,0.38);
  touch-action: pan-y; cursor: ew-resize;
}
.ba-slider__img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none;
}
.ba-slider__before-wrap{
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden;
  clip-path: inset(0 50% 0 0);
}
.ba-slider__before-wrap .ba-slider__img{ position: absolute; inset: 0; }
.ba-slider__handle{
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--c-cream);
  transform: translateX(-50%); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}
.ba-slider__handle-grip{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 42px; height: 42px; border-radius: 50%; background: var(--c-cream);
  display: flex; align-items: center; justify-content: center; color: var(--c-ink);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.4);
}
.ba-slider__handle-grip svg{ width: 20px; height: 20px; }
.ba-slider__tag{
  position: absolute; bottom: 16px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-cream);
  background: rgba(28,26,23,0.55); padding: 6px 11px; border-radius: 3px;
  pointer-events: none; backdrop-filter: blur(4px);
}
.ba-slider__tag--before{ left: 16px; }
.ba-slider__tag--after{ right: 16px; }
/* Kept for keyboard accessibility only (Tab + Arrow keys): pointer-events is
   off so mouse/touch never reaches the native thumb — the container's own
   pointer handlers (main.js) own all pointer-driven dragging. A native thumb
   stretched to track width, dragged at the same time as that custom logic,
   fights it and the handle snaps to the extremes instead of tracking the
   cursor. */
.ba-slider__range{
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; appearance: none; background: transparent;
  pointer-events: none;
}
.ba-slider__range::-webkit-slider-thumb{ appearance: none; width: 2px; height: 100%; }
.ba-slider__range::-moz-range-thumb{ width: 2px; height: 100%; border: none; background: transparent; }
.ba-slider:focus-within .ba-slider__handle-grip{
  outline: 2px solid var(--c-gold-deep); outline-offset: 2px;
}

/* ==========================================================================
   Technique section
   ========================================================================== */
.technique{
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px);
  align-items: center;
  max-width: var(--container); margin-inline: auto;
  padding: clamp(64px, 9vw, 128px) var(--gutter);
  border-top: 1px solid var(--c-line);
}
.technique__text h2{ font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.14; }
.technique__text p + p{ margin-top: 1.1em; }
.technique__text .btn{ margin-top: 26px; }
.technique__figure{ margin: 0; }
.technique__figure img{ border-radius: var(--radius); width: 100%; aspect-ratio: 4/3.2; object-fit: cover; }
.technique__figure figcaption{ margin-top: 14px; font-size: 0.8rem; color: var(--c-ink-soft); }

/* ==========================================================================
   Chooser (queixa selector)
   ========================================================================== */
.chooser{ padding: clamp(64px, 9vw, 128px) var(--gutter); }
.chooser__inner{ max-width: 760px; margin-inline: auto; text-align: center; }
.chooser__inner h2{ font-size: clamp(1.9rem, 3.1vw, 2.5rem); max-width: 22ch; margin-inline: auto; }
.chooser__inner > p{ max-width: 48ch; margin-inline: auto; margin-top: 12px; }
.chooser__options{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: clamp(28px, 4vw, 40px);
}
.chooser__pill{
  font-size: 0.88rem; font-weight: 600; color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: 30px;
  padding: 13px 22px; text-decoration: none;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.chooser__pill:hover{ border-color: var(--c-gold-deep); color: var(--c-gold-deep); background: rgba(28,26,23,0.04); }

/* ==========================================================================
   Results gallery
   ========================================================================== */
.results{ padding: clamp(64px, 9vw, 128px) var(--gutter); background: var(--c-ground-alt); }
.results__head{ max-width: var(--container); margin-inline: auto; margin-bottom: clamp(36px, 5vw, 56px); }
.results__head h2{ font-size: clamp(2rem, 3.4vw, 2.7rem); }
.results__grid{
  max-width: var(--container); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 40px);
}
.ba-card{ margin: 0; position: relative; }
.ba-card__tag{
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--f-display); font-style: italic; font-size: 0.95rem;
  color: var(--c-cream); background: rgba(28,26,23,0.5); backdrop-filter: blur(4px);
  padding: 4px 12px; border-radius: 3px;
}
.ba-card .ba-slider{ aspect-ratio: 4/3.1; }
.results__cta{
  max-width: var(--container); margin: clamp(40px, 5vw, 56px) auto 0;
  text-align: center;
}

@media (max-width: 760px){
  .results__grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Video reveals
   ========================================================================== */
.reveals{ padding: clamp(64px, 9vw, 128px) 0; }
.reveals__head{ max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); margin-bottom: clamp(32px, 5vw, 48px); }
.reveals__head h2{ font-size: clamp(2rem, 3.4vw, 2.7rem); }
.reveals__track{
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-inline: var(--gutter); padding-bottom: 8px;
  scrollbar-width: thin;
}
.reveal-card{
  position: relative; flex: 0 0 auto; width: min(66vw, 300px);
  aspect-ratio: 9/15.5; border-radius: var(--radius); overflow: hidden;
  scroll-snap-align: start; background: var(--c-ink);
  box-shadow: 0 24px 50px -24px rgba(28,22,10,0.4);
}
.reveal-card__video{ width: 100%; height: 100%; object-fit: cover; }
.reveal-card__sound{
  position: absolute; bottom: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(250,246,238,0.92); color: var(--c-ink);
  border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.reveal-card__sound svg{ width: 17px; height: 17px; }
.reveal-card__sound .wave{ opacity: 0.35; }
.reveal-card.is-unmuted .reveal-card__sound .wave{ opacity: 1; stroke: var(--c-gold-deep); }
.reveals__cta{
  max-width: var(--container); margin: clamp(32px, 4vw, 48px) auto 0;
  padding-inline: var(--gutter); text-align: center;
}

/* ==========================================================================
   About (dark band)
   ========================================================================== */
.about{
  background: var(--c-ink); color: var(--c-cream);
  display: grid; grid-template-columns: 0.62fr 1fr; gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding: clamp(64px, 9vw, 120px) var(--gutter);
}
.about__portrait{ margin: 0; }
.about__portrait img{ border-radius: var(--radius); width: 100%; aspect-ratio: 3/3.55; object-fit: cover; }
.about__text h2{ color: var(--c-cream); font-size: clamp(2rem, 3.2vw, 2.6rem); }
.about__cro{
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-gold-pale); margin-bottom: 1.3em; padding-top: 2px;
  border-top: 1px solid var(--c-line-on-dark); display: inline-block; padding-top: 10px;
}
.about__text p{ color: rgba(250,246,238,0.78); }
.about__text p + p{ margin-top: 1.1em; }
.about__text .btn{ margin-top: 28px; }

@media (max-width: 760px){
  .about{ grid-template-columns: 1fr; }
  .about__portrait{ max-width: 280px; }
}

/* ==========================================================================
   Process
   ========================================================================== */
.process{ max-width: var(--container); margin-inline: auto; padding: clamp(64px, 9vw, 128px) var(--gutter); }
.process > h2{ font-size: clamp(2rem, 3.4vw, 2.7rem); margin-bottom: clamp(32px, 5vw, 56px); max-width: 16ch; }
.process__list{ border-top: 1px solid var(--c-line); }
.process__list li{
  display: grid; grid-template-columns: 70px 1fr; gap: clamp(20px, 4vw, 48px);
  padding: clamp(24px, 3.4vw, 36px) 0; border-bottom: 1px solid var(--c-line);
  align-items: baseline;
}
.process__num{ font-family: var(--f-display); font-size: 1.5rem; color: var(--c-gold-deep); font-style: italic; }
.process__list h3{ font-size: 1.22rem; margin-bottom: 0.4em; }
.process__list p{ margin: 0; }
.process__cta{ margin-top: clamp(32px, 4vw, 48px); text-align: center; }

/* ==========================================================================
   Coverage / local SEO
   ========================================================================== */
.coverage{
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center;
  max-width: var(--container); margin-inline: auto; padding: clamp(64px, 9vw, 128px) var(--gutter);
  border-top: 1px solid var(--c-line);
}
.coverage__text h2{ font-size: clamp(1.9rem, 3.1vw, 2.5rem); max-width: 15ch; }
.coverage__cities{
  display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 22px;
}
.coverage__cities li{
  font-size: 0.82rem; color: var(--c-ink-soft); border: 1px solid var(--c-line);
  padding: 7px 14px; border-radius: 30px;
}
.coverage__text .btn{ margin-top: 26px; }
.coverage__map{ width: 100%; height: auto; color: var(--c-ink-soft); }
.coverage__river{ fill: none; stroke: var(--c-gold-pale); stroke-width: 2; opacity: 0.8; }
.coverage__node circle{ fill: var(--c-gold-deep); stroke: none; }
.coverage__node text{
  font-family: var(--f-body); font-size: 12px; fill: var(--c-ink-soft); stroke: none;
}
.coverage__node--main circle{ fill: var(--c-ink); r: 7; }
.coverage__node--main text{ font-weight: 700; fill: var(--c-ink); font-size: 14px; }

@media (max-width: 760px){
  .coverage{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{
  padding: clamp(64px, 9vw, 128px) var(--gutter);
  border-top: 1px solid var(--c-line);
}
.faq__inner{ max-width: 820px; margin-inline: auto; }
.faq__inner > h2{ text-align: center; font-size: clamp(1.9rem, 3.1vw, 2.5rem); }
.faq__list{ border-top: 1px solid var(--c-line); margin-top: clamp(28px, 4vw, 40px); }
.faq__item{ padding: clamp(22px, 3vw, 30px) 0; border-bottom: 1px solid var(--c-line); }
.faq__item h3{ font-size: 1.12rem; margin-bottom: 0.45em; }
.faq__item p{ margin: 0; max-width: none; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.finalcta{
  text-align: center; padding: clamp(80px, 11vw, 150px) var(--gutter);
  background: var(--c-ground-alt);
}
.finalcta h2{ font-size: clamp(2.2rem, 4.4vw, 3.3rem); max-width: 16ch; margin-inline: auto; }
.finalcta p{ max-width: 48ch; margin-inline: auto; margin-top: 16px; font-size: 1.05rem; }
.finalcta .btn{ margin-top: 34px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background: var(--c-ink); color: rgba(250,246,238,0.7); }
.footer__inner{ max-width: var(--container); margin-inline: auto; padding: 56px var(--gutter) 40px; }
.footer__brand{ display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; }
.footer__name{ font-family: var(--f-display); font-size: 1.3rem; color: var(--c-cream); }
.footer__cro{ font-size: 0.78rem; letter-spacing: 0.03em; color: var(--c-gold-pale); }
.footer__contact{
  display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 0.86rem;
  padding-bottom: 28px; border-bottom: 1px solid var(--c-line-on-dark);
}
.footer__contact a{ text-decoration: none; color: rgba(250,246,238,0.85); }
.footer__contact a:hover{ color: var(--c-gold-pale); }
.footer__legal{ font-size: 0.74rem; max-width: 70ch; margin-top: 22px; color: rgba(250,246,238,0.55); }
.footer__copy{ font-size: 0.74rem; margin-top: 12px; color: rgba(250,246,238,0.62); }

/* ==========================================================================
   Responsive — large tablets / small desktop
   ========================================================================== */
@media (max-width: 980px){
  .hero__headline{ max-width: none; }
  .technique{ grid-template-columns: 1fr; }
  .technique__figure{ order: -1; }
}

@media (max-width: 560px){
  .topbar__inner{ height: 64px; }
  .hero{ padding-top: 32px; min-height: clamp(480px, 78vh, 640px); }
  .hero__headline{ font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero__bg-video{ object-position: center top; }
  .process__list li{ grid-template-columns: 44px 1fr; }
}