/* =========================================================
   VERA GUINTHER — Odontologia de Excelência
   Design tokens
========================================================= */
:root {
  --ivory: #F7F2EA;
  --warm-white: #FCF9F4;
  --champagne: #C49A5A;
  --champagne-soft: #B08A5E;
  --deep-brown: #33271F;
  --graphite: #252321;
  --secondary: #5C534B;

  --font-display: "Bodoni Moda", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --header-h: 104px;
  --header-top: 20px;

  --ease-out-3: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-4: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (max-width: 768px) {
  :root {
    --header-h: 76px;
    --header-top: 14px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--graphite);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  margin: 0;
}
p { margin: 0; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  z-index: 1000;
  background: var(--warm-white);
  color: var(--deep-brown);
  padding: 12px 20px;
  border-radius: 4px;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* =========================================================
   BUTTONS
========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: transform 300ms var(--ease-out-3), box-shadow 300ms var(--ease-out-3), background-color 300ms var(--ease-out-3), color 300ms var(--ease-out-3), border-color 300ms var(--ease-out-3);
  white-space: nowrap;
}

.btn-primary {
  background: var(--champagne);
  color: var(--deep-brown);
  border: 1px solid var(--champagne);
}
.btn-primary:hover {
  background: #d1ab6c;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(196, 154, 90, 0.28);
}

.btn-secondary {
  background: transparent;
  color: var(--warm-white);
  border: 1px solid rgba(247, 242, 234, 0.55);
}
.btn-secondary:hover {
  border-color: var(--warm-white);
  transform: translateY(-2px);
  background: rgba(247, 242, 234, 0.08);
}

/* =========================================================
   HEADER
========================================================= */
.site-header {
  position: fixed;
  top: var(--header-top);
  left: 5%;
  width: 90%;
  height: var(--header-h);
  z-index: 100;
  background: rgba(250, 247, 241, 0.96);
  border-radius: 16px;
  box-shadow: 0 8px 35px rgba(50, 35, 20, 0.05);
}

/* Indirect champagne LED, as if a light strip were mounted behind the
   ivory bar, glowing out around its full perimeter. A pseudo-element
   (not the header itself) carries the effect, purely via box-shadow —
   no filter:blur, no layout box grows, nothing here can shift the header
   or its children. z-index:-1 pins it behind the header's own opaque
   background within the header's own stacking context. */
.site-header::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(193, 154, 104, 0.16),
    0 0 22px 2px rgba(185, 145, 94, 0.22),
    0 0 48px 10px rgba(216, 184, 130, 0.16),
    0 0 80px 18px rgba(193, 154, 104, 0.08);
  pointer-events: none;
}

.header-inner {
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  max-height: 65px;
  flex-shrink: 0;
}

/* Hidden decode-only source — never rendered, only read into the canvas via
   drawImage(). Kept in normal flow (not display:none) so some browsers don't
   pause frame decoding for an off-screen video. */
.logo-source-video {
  position: absolute;
  width: 2px;
  height: 2px;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.logo-canvas,
.logo-img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 220px;
  display: block;
}
.logo-canvas {
  height: 100%;
  width: auto;
  opacity: 0;
}
.logo-img {
  height: 100%;
  max-height: 65px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  /* Visible by default: if js/logo-animation.js never runs (blocked/fails to
     load), the static logo must still show up immediately, per the "never
     leave the space empty" fallback rule. The script hides it only once it
     has successfully taken over with the video, and restores it afterward. */
  opacity: 1;
}
.logo-img.is-hidden { opacity: 0; }
.logo-canvas.is-visible { opacity: 1; }

.main-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4.2vw, 64px);
}
.main-nav a {
  position: relative;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep-brown);
  padding-bottom: 6px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--ease-out-3);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform: scaleX(1);
}

.header-cta {
  flex-shrink: 0;
  /* Starts from .header-inner's flex align-items:center (perfect vertical
     center), then nudged up cumulatively: -5% -6% -8% = -19% of the header's
     own height from center. Margin (not transform) so it doesn't fight
     .btn-primary:hover's own translateY. Purely vertical — no horizontal
     change. */
  margin-top: calc(var(--header-h) * -0.19);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
}
.menu-toggle span {
  width: 24px;
  height: 1px;
  background: var(--deep-brown);
  transition: transform 300ms var(--ease-out-3), opacity 300ms var(--ease-out-3);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 82vw);
  height: 100svh;
  background: var(--deep-brown);
  padding: calc(var(--header-top) + var(--header-h) + 24px) 32px 40px;
  transform: translateX(100%);
  transition: transform 420ms var(--ease-out-4);
  z-index: 99;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-bottom: 40px;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--warm-white);
}
.mobile-cta { width: 100%; }

/* =========================================================
   HERO
========================================================= */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .hero { min-height: 700px; }
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
  display: block;
  opacity: 0;
  z-index: 0;
}
.hero-video.is-active {
  opacity: 1;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* This is the ONLY thing that suppresses the video behind the text —
     the text/buttons themselves carry no filter/blur/low-opacity of their
     own (see .hero-headline / .hero-desc / .hero-ctas / .btn). The stops
     were widened (previously fully transparent by 70%) because at common
     desktop widths (~1366-1440px) .hero-desc's 46ch measure and .hero-ctas
     extend well past the old 38-55% falloff, landing on a near-transparent
     video background and reading as low-contrast/"hazy" even though no
     blur was ever applied to the content itself. */
  background:
    linear-gradient(90deg,
      rgba(248, 244, 236, 0.97) 0%,
      rgba(248, 244, 236, 0.94) 25%,
      rgba(248, 244, 236, 0.85) 42%,
      rgba(248, 244, 236, 0.55) 58%,
      rgba(248, 244, 236, 0.15) 72%,
      rgba(248, 244, 236, 0.00) 85%
    ),
    radial-gradient(120% 120% at 50% 100%, rgba(37, 35, 33, 0.14) 0%, rgba(37, 35, 33, 0) 55%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  padding: 0 clamp(20px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-top) + var(--header-h) + clamp(32px, 5vh, 56px));
}

/* Editorial block (eyebrow → headline → paragraph → CTAs), moved as one unit.
   Kept desktop/large-tablet only — the block wasn't asked to move on mobile,
   and there isn't enough spare width there to shift into safely.

   Horizontal: real layout (padding-left on the shared container), not a
   transform hack — every child moves together automatically, and the gaps
   between eyebrow/headline/paragraph/CTAs (each their own margin-top, set
   elsewhere) are completely untouched by changing this one offset. Was
   clamp(180px, 18vw, 300px) (a ~20% rightward move from hugging the edge);
   moved 13% back left from that same baseline by subtracting ~12vw,
   proportionally scaling the clamp bounds the same way, landing here.
   Vertical: unchanged throughout — still translateY only. */
@media (min-width: 1024px) {
  .hero-content {
    max-width: none;
    margin: 0;
    padding-left: clamp(60px, 6vw, 100px);
    transform: translateY(clamp(-56px, -4vh, -20px));
  }
}

.hero-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

.precision-mark {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--champagne);
  transform-origin: left center;
  flex-shrink: 0;
}

.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne-soft);
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.625rem, 5.2vw, 5.125rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: #29231F;
  max-width: 14ch;
}

.line-mask {
  display: block;
  overflow: hidden;
}
.line-inner {
  display: block;
}
.line-accent { color: #9c7b4f; }

.hero-desc {
  margin-top: clamp(22px, 2.6vw, 32px);
  max-width: 46ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--graphite);
}

.hero-ctas {
  margin-top: clamp(32px, 3.4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.hero-ctas .btn-secondary {
  color: var(--deep-brown);
  border-color: rgba(51, 39, 31, 0.35);
}
.hero-ctas .btn-secondary:hover {
  border-color: var(--deep-brown);
  background: rgba(51, 39, 31, 0.05);
}

/* =========================================================
   QUEM SOU EU
========================================================= */
.about {
  display: block;
}

/* Full-bleed, edge-to-edge — no side padding, no radius, no shadow. The
   video's own baked-in composition (portrait + name + credentials) is the
   entire top block; aspect-ratio reserves its real space immediately so
   there's no layout jump while metadata loads. */
.about-video-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
  background: var(--ivory);
}
.about-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 848 / 480;
}

/* =========================================================
   ABOUT VIDEO — TEXT OVERLAY
   Reinforces (never invents) the text already baked into the video's
   pixels: same words, same approximate position, redrawn as crisp,
   real HTML/CSS typography in the site's own editorial language.
   Percentages below were measured directly against extracted frames of
   public/videos/video-quem-sou-eu.mp4 (native 848x480, text occupies the
   right ~49% of the frame) — not guessed — so they track the video's
   real composition at any rendered size, since the video is shown at
   its native aspect-ratio with no crop.
========================================================= */
/* CRITICAL: this box does NOT span the full video (no `inset: 0`). A
   backdrop-filter blurs everything behind its own box regardless of how
   transparent its background-color is at any given pixel — so a
   full-width scrim would have blurred Vera (she occupies roughly the left
   45% of the frame) even where the gradient's alpha was 0 there. Starting
   the box at 49% keeps it entirely clear of her (measured up to ~46.6% at
   her furthest gesture) while still starting comfortably before the text
   column (51%), so nothing about her — face, skin, motion — is ever
   touched by the blur. */
.about-overlay-scrim {
  position: absolute;
  left: 49%;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(251, 247, 246, 0) 0%,
    rgba(251, 247, 246, 0.55) 4%,
    rgba(251, 247, 246, 0.88) 10%,
    rgba(251, 247, 246, 0.95) 20%,
    rgba(251, 247, 246, 0.97) 100%
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.about-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-overlay-eyebrow-row {
  position: absolute;
  left: 51%;
  right: 4%;
  top: 8.5%;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.1vw, 16px);
}
.about-overlay-mark {
  display: block;
  width: clamp(16px, 5.6vw, 44px);
  height: 1px;
  background: var(--champagne);
  flex-shrink: 0;
  transform-origin: left center;
}
.about-overlay-eyebrow {
  font-size: clamp(0.6rem, 1.35vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--champagne-soft);
  white-space: nowrap;
}

/* Sized as a fraction of the video's own native width (measured directly
   against extracted frames: this headline's glyphs are ~46px tall in the
   848px-wide source) rather than the site's usual hero type scale — the
   video is full-bleed 100vw, so matching its real on-screen scale means
   scaling with vw the same way the video itself does, not a modest
   independent clamp ceiling. */
.about-overlay-name {
  position: absolute;
  left: 51%;
  right: 4%;
  top: 19%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 7.2vw, 6.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--deep-brown);
}
.about-overlay-name span { display: block; }

.about-overlay-divider {
  position: absolute;
  left: 51%;
  top: 51.5%;
  width: clamp(16px, 5.6vw, 44px);
  height: 1px;
  background: var(--champagne);
  transform-origin: left center;
}

.about-overlay-desc {
  position: absolute;
  left: 51%;
  right: 5%;
  top: 57.5%;
  font-size: clamp(0.7rem, 1.42vw, 1.15rem);
  line-height: 1.55;
  color: var(--graphite);
}

.about-overlay-badges {
  position: absolute;
  left: 51%;
  right: 3%;
  top: 76.5%;
  display: flex;
  justify-content: space-between;
  gap: clamp(6px, 1vw, 14px);
}
.about-overlay-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 1vw, 12px);
}
.about-overlay-badge svg {
  width: clamp(20px, 4.5vw, 42px);
  height: clamp(20px, 4.5vw, 42px);
  color: var(--champagne);
}
.about-overlay-badge span {
  font-size: clamp(0.52rem, 1.1vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: var(--deep-brown);
}

/* Small sparkle ornament between badges 3 and 4, matching the same
   decorative glyph baked into the video at that spot. */
.about-overlay-spark {
  position: absolute;
  left: 87.5%;
  top: 74.5%;
  width: clamp(12px, 1.6vw, 20px);
  height: clamp(12px, 1.6vw, 20px);
  color: var(--champagne);
}

/* Static institutional block — no parallax, no animation, no background
   video. Sits flush against the video above (zero gap, zero border). */
.about-expertise {
  background: #102844;
  padding: clamp(64px, 9vh, 120px) clamp(20px, 4vw, 56px);
}
.about-expertise-inner {
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
}
.about-expertise-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  color: var(--warm-white);
}
.about-expertise-sub {
  margin: 16px auto 0;
  max-width: 58ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(252, 249, 244, 0.75);
}

.expertise-grid {
  margin-top: clamp(56px, 7vh, 88px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.expertise-col {
  position: relative;
  padding: 0 clamp(16px, 2vw, 32px);
}
.expertise-col:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(193, 154, 104, 0.30);
}
.expertise-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  color: var(--champagne);
}
.expertise-icon svg {
  width: 100%;
  height: 100%;
}
.expertise-col h4 {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--warm-white);
}
.expertise-col p {
  margin-top: 14px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(252, 249, 244, 0.68);
}

/* =========================================================
   SHARED SECTION EYEBROW (Tratamentos / Especializações / Como Me Achar)
========================================================= */
.section-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.section-mark {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--champagne);
  flex-shrink: 0;
}
.section-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne-soft);
}

/* =========================================================
   TRATAMENTOS
========================================================= */
.treatments {
  background: var(--ivory);
  padding: clamp(96px, 12vh, 160px) clamp(20px, 4vw, 56px);
}
.treatments-inner {
  max-width: 1440px;
  margin: 0 auto;
}
.treatments-header {
  max-width: 620px;
}
.treatments-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.15;
  color: var(--deep-brown);
}
.treatments-sub {
  margin-top: 18px;
  max-width: 52ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--graphite);
}

/* Tabs (65-70% of visual weight) + small editorial video (30-35%) */
.treatments-body {
  margin-top: clamp(56px, 7vh, 88px);
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.treatments-tabs {
  display: flex;
  flex-direction: column;
}
.treatment-tab {
  display: flex;
  align-items: baseline;
  gap: 24px;
  width: 100%;
  text-align: left;
  padding: clamp(20px, 2.4vw, 26px) 0 clamp(20px, 2.4vw, 26px) 16px;
  border-top: 1px solid rgba(51, 39, 31, 0.12);
  border-left: 3px solid transparent;
  background: none;
  cursor: pointer;
  transition: background-color 300ms ease, border-color 300ms ease;
}
.treatments-tabs .treatment-tab:last-child {
  border-bottom: 1px solid rgba(51, 39, 31, 0.12);
}
.treatment-tab.is-active {
  border-left-color: var(--champagne);
  background: rgba(196, 154, 90, 0.06);
}
.treatment-tab:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: -2px;
}
.treatment-tab-num {
  flex-shrink: 0;
  width: 2.4ch;
  font-family: var(--font-display);
  font-size: 1rem;
  color: rgba(51, 39, 31, 0.35);
  transition: color 300ms ease;
}
.treatment-tab.is-active .treatment-tab-num {
  color: var(--champagne);
}
.treatment-tab-body {
  display: flex;
  flex-direction: column;
}
.treatment-tab-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  color: var(--deep-brown);
}
.treatment-tab-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--secondary);
  max-width: 52ch;
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: opacity 350ms ease, max-height 350ms ease, margin-top 350ms ease;
}
.treatment-tab.is-active .treatment-tab-desc {
  opacity: 1;
  max-height: 60px;
  margin-top: 6px;
}

.treatments-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(50, 35, 20, 0.10);
  align-self: end;
  margin-top: clamp(32px, 7vh, 80px);
}
.treatments-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 30%;
}

.treatments-panels {
  margin-top: clamp(48px, 6vh, 72px);
  max-width: 720px;
}
.treatment-panel p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--graphite);
}
.treatment-panel ul {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.treatment-panel li {
  position: relative;
  padding-left: 18px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--champagne-soft);
}
.treatment-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--champagne);
  transform: translateY(-50%);
}

/* =========================================================
   ESPECIALIZAÇÕES
========================================================= */
.specialties {
  background: var(--warm-white);
  padding: clamp(96px, 12vh, 160px) clamp(20px, 4vw, 56px);
}
.specialties-inner {
  max-width: 1160px;
  margin: 0 auto;
}
.specialties-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  line-height: 1.2;
  color: var(--deep-brown);
  max-width: 20ch;
}

.specialties-body {
  margin-top: clamp(56px, 7vh, 80px);
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.specialties-list {
  display: flex;
  flex-direction: column;
}
.specialty-tab {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(18px, 2vw, 24px) 0 clamp(18px, 2vw, 24px) 16px;
  border-top: 1px solid rgba(51, 39, 31, 0.12);
  border-left: 3px solid transparent;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: border-color 300ms ease, background-color 300ms ease;
}
.specialties-list .specialty-tab:last-child {
  border-bottom: 1px solid rgba(51, 39, 31, 0.12);
}
.specialty-tab.is-active {
  border-left-color: var(--champagne);
  background: rgba(196, 154, 90, 0.06);
}
.specialty-tab:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: -2px;
}
.specialty-tab-num {
  flex-shrink: 0;
  width: 2.4ch;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: rgba(51, 39, 31, 0.35);
  transition: color 300ms ease;
}
.specialty-tab.is-active .specialty-tab-num {
  color: var(--champagne);
}
.specialty-tab-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  color: var(--deep-brown);
}

.specialties-panels {
  padding-top: 6px;
}
.specialty-panel-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  color: var(--champagne);
}
.specialty-panel-icon svg {
  width: 100%;
  height: 100%;
}
.specialty-panel p {
  margin-top: 22px;
  max-width: 56ch;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--graphite);
}

/* =========================================================
   COMO ME ACHAR
========================================================= */
.location {
  background: var(--ivory);
  padding: clamp(96px, 12vh, 160px) clamp(20px, 4vw, 56px);
}
.location-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr clamp(340px, 32vw, 480px);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.location-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  color: var(--deep-brown);
}
.location-sub {
  margin-top: 12px;
  font-size: 1.05rem;
  color: var(--graphite);
}
.location-address {
  margin-top: clamp(28px, 3.4vw, 40px);
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--graphite);
}
.location-contacts {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 24px;
  row-gap: 10px;
}
.location-phone {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--deep-brown);
  border-bottom: 1px solid rgba(51, 39, 31, 0.25);
  padding-bottom: 2px;
  transition: color 250ms ease, border-color 250ms ease;
}
.location-phone:hover {
  color: var(--champagne-soft);
  border-color: var(--champagne);
}
/* Discreet by design — sans-serif, muted, no card/box of its own; sits
   inline with the phone numbers instead of competing for attention. */
.location-email {
  display: inline-block;
  font-size: 0.92rem;
  color: var(--secondary);
  border-bottom: 1px solid rgba(51, 39, 31, 0.18);
  padding-bottom: 2px;
  transition: color 250ms ease, border-color 250ms ease;
}
.location-email:hover {
  color: var(--champagne-soft);
  border-color: var(--champagne);
}
.location-rating {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.location-rating-stars {
  color: var(--champagne);
  font-size: 0.95rem;
  letter-spacing: 2px;
}
.location-rating-text {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--secondary);
}
.location-cta {
  margin-top: clamp(32px, 4vw, 44px);
}

.location-map-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(50, 35, 20, 0.08);
  justify-self: end;
}
.location-map {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   RESPONSIVE
========================================================= */
/* Header floats over content on scroll — offset the anchor target so each
   section's top edge lands below the pill instead of hiding behind it. */
#quem-sou-eu,
#tratamentos,
#especializacoes,
#como-me-achar {
  scroll-margin-top: calc(var(--header-top) + var(--header-h) + 20px);
}

@media (max-width: 1023px) {
  .main-nav { display: none; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .mobile-nav { display: block; }

  .hero-video { object-position: 68% center; }

  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(40px, 6vh, 56px);
  }
  /* 2x2 grid: keep the divider between col1|col2 and col3|col4 (each row's
     midpoint), drop the one after col2 that would otherwise float at the
     row's right edge. col4 already has none via :last-child. */
  .expertise-col:nth-child(2)::after { display: none; }

  .treatments-body { grid-template-columns: 1fr; }
  .treatments-video-wrap {
    align-self: auto;
    margin-top: clamp(32px, 5vh, 48px);
    max-width: 420px;
  }

  .specialties-body { grid-template-columns: 1fr; }
  .specialty-panel p { max-width: none; }

  .location-inner { grid-template-columns: 1fr; }
  .location-map-wrap { justify-self: stretch; max-width: 420px; margin: 0 auto; }
}

@media (max-width: 767px) {
  .hero-content { padding-top: calc(var(--header-h) + 8px); }
  .hero-headline { max-width: 12ch; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .hero-video { object-position: 72% center; }

  .expertise-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .expertise-col::after { display: none; }

  .treatments-video-wrap { max-width: none; }
  .specialty-tab-name { font-size: 1.05rem; }
  .location-map-wrap { border-radius: 22px; max-width: none; }
}

/* Below ~600px the video shrinks (still full-width, unmodified, uncropped)
   to well under 250px tall — too short to hold five stacked overlay blocks
   at any legible size without overlap. Below this width the same text
   moves off the video into a normal-flow ivory caption block directly
   underneath it instead: video stays completely untouched, every word
   stays fully legible, nothing overlaps or gets cut off. */
@media (max-width: 600px) {
  .about-overlay-scrim { display: none; }

  .about-overlay {
    position: static;
    background: var(--ivory);
    padding: 32px 20px 36px;
  }

  .about-overlay-eyebrow-row {
    position: static;
    margin-bottom: 14px;
  }

  .about-overlay-name {
    position: static;
    font-size: clamp(1.9rem, 8vw, 2.4rem);
  }

  .about-overlay-divider {
    position: static;
    display: block;
    margin: 18px 0;
  }

  .about-overlay-desc {
    position: static;
    font-size: clamp(0.85rem, 3.6vw, 0.95rem);
    line-height: 1.6;
  }

  .about-overlay-badges {
    position: static;
    margin-top: 26px;
    flex-wrap: wrap;
    row-gap: 22px;
  }
  .about-overlay-badge { width: 42%; }

  .about-overlay-spark { display: none; }
}

@media (max-width: 430px) {
  .hero-video { object-position: 74% center; }
  .logo { max-height: 48px; }
  .logo-img { max-height: 48px; }
}