/* =========================================================
   Boilerplate Site Cliente — Vanilla
   Tokens ajustáveis no :root. Resto reaproveita.
   ========================================================= */

:root {
  /* Cores — ID Visual oficial da Dra. Lilian Medina (PDF da marca).
     5 tons da especificação: branco, creme, pêssego, rosa-terracota, marrom.
     Fundo branco/creme dominante; os tons de marca viram botão/ícone/detalhe. */
  --bg-primary:     #FFFFFF;
  --bg-secondary:   #E4E3DD;
  --text-primary:   #7E5F59;
  /* #8C7871 original só dava 4.17:1 contra branco e 3.24:1 contra o creme —
     abaixo do mínimo WCAG AA (4.5:1) pra texto normal. Escurecido mantendo
     matiz/saturação até passar nos dois fundos (5.89:1 branco / 4.58:1
     creme). Lighthouse mobile reclamava disso em vários textos secundários
     do site (bio, depoimentos, nav, rodapé). */
  --text-secondary: #71615B;
  --accent:         #A56B69;
  --accent-dark:    #7E5F59;
  --accent-hover:   #6B5049;
  --accent-soft:    #EFD2C2;
  --divider:        #D2D1CB;
  --surface:        #FFFFFF;
  --shadow:         0 18px 40px -24px rgba(126, 95, 89, .30);

  /* Tipografia — fontes oficiais da marca (Typografix + Gotham) são pagas e
     sem licença web confirmada. Playfair Display (display, com acentos PT-BR
     completos) + Inter Tight (corpo) como substitutas legais até licenciar. */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;

  /* Escala fluida */
  --fs-display: clamp(2.5rem, 6vw, 5rem);
  --fs-h2:      clamp(2rem, 4vw, 3.25rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-lede:    clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;

  /* Layout */
  --maxw: 1180px;
  --pad:  clamp(20px, 5vw, 40px);

  /* Espaçamento vertical entre seções */
  --sec-py: clamp(64px, 10vw, 140px);

  /* Transições — curvas curadas (ver EFEITOS.md) */
  --ease:           cubic-bezier(.4,0,.2,1);      /* padrão UI / hovers */
  --ease-cinematic: cubic-bezier(.76,0,.24,1);    /* easeInOutQuart — reveals, heros */
  --ease-out-expo:  cubic-bezier(.16,1,.3,1);     /* saída suave e decisiva */
  --ease-out-back:  cubic-bezier(.34,1.56,.64,1); /* leve overshoot p/ entradas */
}

/* ===== Reset + base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Lenis: quando a rolagem suave via JS está ativa, o smooth nativo do CSS
   PRECISA ser desligado — os dois juntos brigam e causam engasgo no scroll.
   Sem JS / reduced-motion, o scroll-behavior:smooth acima segue valendo. */
html.lenis, html.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Wrap — container padrão ===== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ===== Tipografia helpers ===== */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
}
.display .accent { color: var(--accent); }
.display em { font-style: italic; font-weight: 600; color: var(--accent); }
.sec-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 .4em;
}
.kicker, .eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.lede {
  font-size: var(--fs-lede);
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0 0 2rem;
}
.sec-sub {
  font-size: var(--fs-lede);
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0 auto;
}
.sec-head {
  text-align: center;
  margin: 0 auto 3rem;
}
/* trava a medida de leitura dos títulos centralizados: sem isso eles
   esticavam até ~1070px em telas largas, virando linha longa demais */
.sec-head .sec-title { max-width: 22ch; margin-inline: auto; }
.sec-head .kicker { max-width: 40ch; margin-inline: auto; }

/* ===== Botões ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  transition: transform .4s var(--ease-out-back), background .25s var(--ease),
              color .25s var(--ease), box-shadow .4s var(--ease-out-expo);
  white-space: nowrap;
}
.btn svg { width: 20px; height: 20px; transition: transform .4s var(--ease-out-back); }
.btn-primary {
  background: var(--accent-dark);
  color: var(--bg-primary);
  box-shadow: 0 0 0 0 transparent;
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px) scale(1.035);
  box-shadow: 0 16px 30px -14px rgba(126, 95, 89, .5);
}
.btn-primary:hover svg { transform: rotate(-10deg) scale(1.1); }
.btn-primary:active { transform: translateY(0) scale(.96); transition-duration: .15s; }
.btn-ghost {
  color: var(--text-primary);
  border: 1px solid var(--divider);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { padding: 18px 32px; font-size: 1.05rem; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== Nav ===== */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--divider);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
}
.brand-logo { height: 32px; width: auto; display: block; }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: .9rem;
  color: var(--text-secondary);
  transition: color .2s;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent-dark);
  color: var(--bg-primary);
  font-size: .85rem;
  font-weight: 600;
}
.nav-cta:hover { background: var(--accent-hover); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span {
  width: 22px; height: 2px; background: var(--text-primary);
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-primary);
    flex-direction: column;
    padding: 24px var(--pad);
    border-bottom: 1px solid var(--divider);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: all .25s var(--ease);
  }
  .nav.is-open .nav-links {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .nav-cta { display: none; }
}

/* =========================================================
   Hero — medidas exatas do frame Figma "CMD - Dra. Lilian Medina"
   (canvas de referência 1400×809). hero-canvas reproduz esse canvas
   via aspect-ratio; todo elemento interno é posicionado em % —
   guarda a mesma proporção do arquivo em qualquer largura de tela.
   ========================================================= */
.hero { position: relative; }
/* Especialidades sobe por cima da hero travada (pin do GSAP ScrollTrigger em
   main.js) — precisa de fundo opaco e z-index acima da hero pra cobrir de
   verdade, senão a hero pinada aparece por trás durante a transição. */
#especialidades { position: relative; z-index: 2; background: var(--bg-primary); }
.hero-canvas {
  position: relative;
  width: 100%;
  max-width: 1400px;   /* limite do canvas original do Figma — não estica em ultrawide */
  margin-inline: auto;
  aspect-ratio: 1400 / 809;
  overflow: hidden;
  background: var(--bg-primary);   /* cor sólida por baixo — aparece onde a textura esmaece */
}
/* textura real de seda (foto do cliente) + tingimento sutil na paleta —
   esmaece nas bordas esquerda/direita pra não expor a parte lisa da foto
   original nem criar emenda visível em telas largas */
.hero-canvas::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-soft) 32%, transparent),
      color-mix(in srgb, var(--bg-secondary) 55%, transparent) 55%,
      color-mix(in srgb, var(--accent) 14%, transparent)
    ),
    url("../img/textura-hero.webp?v=1");
  background-size: cover, cover;
  background-position: center, center;
  background-blend-mode: soft-light, normal;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
  pointer-events: none;
}
.hero-canvas .fx-grid { opacity: .12; }
#biografia .fx-grid { opacity: .15; }   /* mais suave — atrapalhava a leitura do texto */
#contato .fx-grid { opacity: .15; }     /* mesma correção — endereço mais legível */

/* Visual único (faixa + foto), exportado já pronto do Figma — 694×809.
   O PNG tem margem transparente (38px à esquerda, 124px à direita — medido
   via sharp .trim()); o conteúdo opaco real é 532×809, batendo exatamente
   com o "Group 1" do arquivo (x:685, largura:532.5). Ancorado por left
   pra o conteúdo (não a tela do PNG) cair exatamente onde o Figma marca. */
.hero-visual {
  position: absolute; z-index: 1;
  top: 0; left: 46.214%;
  height: 100%; width: auto;
}
/* dissolve o corte reto da hero no fundo da próxima seção, em vez de cortar seco */
.hero-canvas::after {
  content: "";
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  height: 14%;
  background: linear-gradient(to bottom, transparent, var(--bg-primary));
  pointer-events: none;
}

/* Copy — posição exata: eyebrow 110,224 · headline 110,270×590 · lede 110,517×537 · cta 110,628 */
.hero-copy {
  position: absolute; z-index: 3;
  left: 7.857%; top: 27.688%;
  width: 42.143%;
  min-width: 300px;
}
/* clamp() em tudo — cresce fluido só ATÉ o valor exato do Figma (1400px);
   depois disso trava (não estica em ultrawide); abaixo de 1400px, encolhe normal.
   Headline ficou bem mais longo (frase completa de especialidades) — no
   tamanho antigo (3.25rem) virava 7 linhas e o CTA saía do hero-canvas
   (que tem overflow:hidden), cortando o botão. Reduzido pra caber sempre. */
.hero-copy .display {
  font-size: clamp(1.6rem, 2.971vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: clamp(10px, 1.2vw, 18px);
}
.hero-copy .lede {
  max-width: 91%;
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  line-height: 1.5;
  margin-bottom: clamp(20px, 3vw, 40px);
}

@media (max-width: 900px) {
  /* padding-top abre o "palco" de 420px pro visual (absoluto);
     hero-copy (fluxo normal) começa a partir daí, empurrado pelo padding */
  .hero-canvas {
    aspect-ratio: auto;
    height: auto;
    padding-top: 420px;
    overflow: visible;
  }
  /* confina a textura só na zona da imagem (420px do topo) — sem isso ela
     esticava pela altura toda do card e cobria o texto por cima */
  .hero-canvas::before {
    inset: auto;
    top: 0; left: 0; right: 0;
    height: 420px;
    /* textura em resolução própria pro mobile: a original (1800×1199,
       197 KB) é overkill numa faixa de 420px de altura — 900×600 já cobre
       com folga em telas retina e cai pra ~10 KB. Mesmo gradiente por cima
       (Lighthouse mobile apontava isso em "melhorar entrega de imagens"). */
    background-image:
      linear-gradient(135deg,
        color-mix(in srgb, var(--accent-soft) 32%, transparent),
        color-mix(in srgb, var(--bg-secondary) 55%, transparent) 55%,
        color-mix(in srgb, var(--accent) 14%, transparent)
      ),
      url("../img/textura-hero-mob.webp?v=1");
  }
  /* centraliza o CONTEÚDO opaco (não a tela do PNG, que tem margem
     assimétrica: 38px à esquerda / 124px à direita a 694px de largura) */
  .hero-visual {
    left: 50%; right: auto; top: 0; height: 420px; width: auto;
    transform: translateX(calc(-50% + 22px));
  }
  .hero-copy {
    position: static;
    width: auto; min-width: 0;
    margin-top: 24px;
    padding-inline: var(--pad);
    padding-bottom: 40px;
    text-align: center;
    /* pedido do gestor de tráfego (20/08): CTA visível na 1ª dobra sem
       rolar — título > botão > texto de apoio, em vez da ordem do HTML
       (título > texto > botão). order muda só a exibição, o DOM/leitor
       de tela continua na ordem semântica original. */
    display: flex;
    flex-direction: column;
  }
  /* headline ficou bem mais longo (frase completa de especialidades) — o
     --fs-display global (mín. 2.5rem) foi calibrado pro título curto antigo;
     nesse texto viraria 7-8 linhas gigantes no mobile. Clamp próprio, menor. */
  .hero-copy .display {
    order: 1;
    font-size: clamp(1.55rem, 6.2vw, 2.35rem);
    line-height: 1.16;
    margin-bottom: .7em;
    text-wrap: balance;
  }
  .hero .cta-row { order: 2; justify-content: center; }
  .hero-copy .lede {
    order: 3;
    /* menor que o desktop e mais pra baixo, como pedido — some do topo da
       dobra pra dar lugar ao botão sem ficar apertado ao lado dele */
    font-size: calc(var(--fs-lede) - .05rem);
    max-width: none;
    margin-inline: auto;
    margin-top: 1.4em;
    margin-bottom: 0;
    text-wrap: balance;
  }
}

/* ===== Seções genéricas ===== */
section {
  position: relative;
  padding-block: var(--sec-py);
}
section + section { border-top: 1px solid var(--divider); }
#biografia { border-top: 0; }   /* sem linha entre Procedimentos e a seção Sobre */

/* ===== fx-grid (luz seguindo o cursor) ===== */
.fx-grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 40%),
    linear-gradient(var(--divider) 1px, transparent 1px),
    linear-gradient(90deg, var(--divider) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
/* sem mouse a luz não reage (o JS só liga o pointermove com hover:hover) —
   parada no centro ela só criava um halo/degradê estranho por cima do
   conteúdo (ex.: o botão da hero, quando .hero-canvas vira height:auto
   no mobile e o fx-grid com inset:0 se estica por cima de tudo) */
@media (hover: none) {
  .fx-grid { display: none; }
}
section > .wrap, .hero > .wrap { position: relative; z-index: 1; }

/* ===== Seção com tom pêssego — quebra o branco entre seções ===== */
.section-tint { background: var(--bg-secondary); }

/* Áreas de Atuação em banda terracota — diferencial visual do Prata sobre
   o Bronze (que mantém a seção clara). Cards continuam brancos por cima.
   Fundo "aurora": manchas radiais suaves nos tons da paleta se misturando,
   em vez da cor sólida chapada — mesmo espírito do .fx-rays do CTA final,
   só que com várias cores fundidas ao invés de uma só. */
#areas {
  background:
    radial-gradient(ellipse 60% 55% at 12% 15%, #7B5A53, transparent 65%),
    radial-gradient(ellipse 55% 50% at 88% 10%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 65%),
    radial-gradient(ellipse 65% 60% at 90% 95%, #7B5A53, transparent 65%),
    radial-gradient(ellipse 70% 65% at 10% 100%, color-mix(in srgb, var(--accent-hover) 45%, transparent), transparent 65%),
    var(--accent-dark);
  color: var(--bg-primary);
}
#areas .kicker { color: var(--accent-soft); }
#areas .sec-title { color: var(--bg-primary); }
#areas .fx-grid {
  background-image:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent-soft) 18%, transparent) 0%, transparent 40%),
    linear-gradient(color-mix(in srgb, var(--bg-primary) 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--bg-primary) 22%, transparent) 1px, transparent 1px);
}

/* ===== Ícones de linha (Áreas de Atuação / Procedimentos) ===== */
.icon {
  width: 30px; height: 30px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== Especialidades (bentogrid 3×2) =====
   Diferencial do Prata sobre o Bronze (que mantém os chips). Layout: linha 1
   = menopausa (2 col) + rejuvenescimento (1 col); linha 2 = implantes +
   contracepção + colo do útero, 1 col cada — posições nomeadas, não por
   ordem no DOM, pra ficar claro qual card vai onde no grid. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(320px, 3fr) minmax(210px, 2fr);
  gap: 16px;
  max-width: 980px;
  margin-inline: auto;
}
.bento-menopausa { grid-column: 1 / 3; grid-row: 1; }
.bento-rejuvenescimento { grid-column: 3; grid-row: 1; }
.bento-implantes { grid-column: 1; grid-row: 2; }
.bento-contracepcao { grid-column: 2; grid-row: 2; }
.bento-hpv { grid-column: 3; grid-row: 2; }
.bento-tile {
  --mx: 50%; --my: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  min-height: 180px;
  border: 1px solid var(--divider);
  transition: transform .4s var(--ease-out-back);
}
.bento-tile:hover { transform: translateY(-4px) scale(1.015); }
/* spotlight na borda — anel de 1.5px que só existe onde o gradiente radial
   (centrado no cursor, via --mx/--my setado no main.js) o alcança. Técnica
   de máscara: dois retângulos, um deles content-box, XOR sobra só a borda. */
.bento-tile::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(220px circle at var(--mx) var(--my), var(--accent), transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.bento-tile:hover::before { opacity: 1; }
.bento-menopausa, .bento-rejuvenescimento { padding: 24px; }
.bento-media {
  position: absolute; inset: 0; z-index: -1;
  display: flex; align-items: center; justify-content: center;
}
.bento-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out-back); }
/* card bem mais largo (2:1) que a foto original (1.25:1) — corte central
   cortava o rosto dela fora; desloca o enquadramento pra mostrar o rosto
   com boa margem acima da cabeça */
.bento-menopausa .bento-media img { object-position: 50% 8%; }
.bento-tile:hover .bento-media img { transform: scale(1.06); }
/* degradê escuro embaixo — sustenta o nome em branco direto na foto, sem pill */
.bento-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--text-primary) 65%, transparent), transparent 60%);
}
.bento-label {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}
.bento-menopausa .bento-label, .bento-rejuvenescimento .bento-label { font-size: 1.3rem; }

@media (max-width: 720px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .bento-menopausa { grid-column: 1 / 3; grid-row: auto; min-height: 260px; }
  .bento-rejuvenescimento, .bento-implantes, .bento-contracepcao, .bento-hpv { grid-column: span 1; grid-row: auto; min-height: 200px; }
}

/* ===== Áreas de Atuação — mesmo padrão do Bronze (conteúdo pronto do
   cliente, sem inventar estrutura nova). Diferenciação do Prata fica só
   na animação, quando pedida — não no conteúdo/layout. ===== */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 40px);
}
.area-card {
  padding: 32px 28px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* .area-card.reveal (composto) — mesma razão do .proc-card.reveal: uma
   lista só de transição pra entrada (opacity/transform) e hover
   (border-color/transform) não perderem uma pra outra na especificidade */
.area-card.reveal {
  transition: opacity .6s var(--ease-out-back), transform .4s var(--ease-out-back),
              border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.area-card:hover {
  border-color: var(--accent-soft);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -20px rgba(126, 95, 89, .35);
}
.area-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}
.area-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out-back); }
.area-card:hover .area-photo img { transform: scale(1.06); }
.area-pill {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent-dark);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.area-card li {
  color: var(--text-secondary);
  font-size: .9rem;
  padding: 6px 0;
}

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

/* ===== Procedimentos (cards com resumo + "Saiba mais" → modal) ===== */
.proc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 28px);
}
.proc-card {
  --mx: 50%; --my: 50%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* .proc-card.reveal (composto) — mesma razão do .chip.reveal acima:
   uma lista só de transição pra entrada (opacity/transform) e hover
   (border-color/transform) não perderem uma pra outra na especificidade */
.proc-card.reveal {
  transition: opacity .6s var(--ease-out-back), transform .4s var(--ease-out-back),
              border-color .25s var(--ease);
}
.proc-card:hover { border-color: var(--accent-soft); transform: translateY(-3px); }
/* spotlight na borda — mesma técnica do bentogrid (anel de 1.5px via
   máscara, radial-gradient centrado no cursor por --mx/--my do main.js) */
.proc-card::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(220px circle at var(--mx) var(--my), var(--accent), transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.proc-card:hover::before { opacity: 1; }
.proc-card .icon { margin-bottom: 18px; }
.proc-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0 0 12px;
}
.proc-teaser {
  color: var(--text-secondary);
  font-size: .95rem;
  margin: 0 0 22px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "Saiba mais" como botão de verdade (pill), seta desloca no hover */
.proc-more {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  font-weight: 600;
  font-size: .85rem;
  color: var(--accent-dark);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.proc-more:hover { background: var(--accent); color: var(--bg-primary); }
.proc-more-arrow { display: inline-block; transition: transform .3s var(--ease-out-back); }
.proc-more:hover .proc-more-arrow { transform: translateX(4px); }

/* ===== Modal (copy completa do procedimento) =====
   display:grid sempre presente (não display:none) — permite transição
   suave nos dois sentidos (abrir E fechar), coisa que display:none nunca
   deixa fazer (não é uma propriedade animável). visibility com delay só
   no fechar tira o modal da árvore de foco/clique depois do fade acabar. */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease-out-expo), visibility 0s linear .35s;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s var(--ease-out-expo), visibility 0s linear 0s;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--accent-dark) 55%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-panel {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: 16px;
  padding: 44px clamp(24px, 4vw, 48px) 40px;
  box-shadow: 0 40px 90px -30px rgba(46, 32, 25, .5);
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transition: opacity .35s var(--ease-out-expo), transform .45s var(--ease-out-back);
}
.modal.is-open .modal-panel { opacity: 1; transform: none; }
.modal-close {
  position: absolute; top: 14px; right: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1.7rem; line-height: 1;
  color: var(--text-secondary);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.modal-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
.modal-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0 0 20px;
  padding-right: 44px;
}
.modal-body p { color: var(--text-secondary); margin: 0 0 14px; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-list { margin: 6px 0 14px; }
.modal-list li {
  position: relative;
  padding: 5px 0 5px 20px;
  color: var(--text-secondary);
}
.modal-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 13px;
  width: 6px; height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
}
@media (max-width: 900px) { .proc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .proc-grid { grid-template-columns: 1fr; } }

/* ===== Biografia ===== */
/* stretch: a foto acompanha a altura da coluna de texto (não fica curta) */
.bio-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: stretch;
}
.bio-photo {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 100%;
}
.bio-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}
.bio-copy p { color: var(--text-secondary); max-width: 72ch; }
/* "Quem é a Dra." — foto à DIREITA, texto à esquerda: inverte o padrão da
   Biografia logo abaixo (foto à esquerda), criando um zigue-zague entre as
   duas seções vizinhas. */
.quem-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(32px, 5vw, 56px);
  align-items: stretch;
}
.sec-head-left { text-align: left; margin-bottom: 1.5rem; }
.sec-head-left .sec-title { max-width: none; margin-inline: 0; }
.quem-photo {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 100%;
}
.quem-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.quem-copy { max-width: 68ch; text-align: left; }
.quem-copy p { color: var(--text-secondary); margin: 0 0 1.1em; }
.quem-copy p:first-child {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-primary);
  font-size: var(--fs-h3);
  line-height: 1.3;
}

@media (max-width: 768px) {
  .quem-grid { grid-template-columns: 1fr; }
  .quem-photo { width: 100%; max-width: 380px; aspect-ratio: 3/4; min-height: 0; margin-inline: auto; order: -1; }
  .sec-head-left { text-align: center; }
}
/* citação de fecho da biografia — a voz da doutora, em destaque editorial */
.bio-quote {
  margin: 28px 0 0;
  padding-left: 24px;
  border-left: 2px solid var(--accent-soft);
  max-width: 64ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.45;
  color: var(--accent);
}
.bio-quote::before { content: "\201C"; }
.bio-quote::after  { content: "\201D"; }
.bio-credential {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--text-secondary);
}

/* ===== Depoimentos ===== */
.google-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; color: var(--text-secondary);
  margin: 0; justify-content: center; width: 100%;
}
.google-badge strong { color: var(--text-primary); }
/* Carrossel linear — vários depoimentos lado a lado (sem escala/blur de
   profundidade), deslizando na horizontal e esmaecendo nas bordas do
   viewport. Visual "cara do Google": avatar + nome + selo + estrelas.
   Tier Bronze: mecânica simples. Prata/Ouro sobem o nível depois. */
.testi-viewport {
  position: relative;
  margin-top: clamp(32px, 5vw, 48px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.testi-track {
  display: flex;
  gap: 22px;
  /* ease-in-out (aceleração E desaceleração suaves) fica mais fluido pro
     slide horizontal do que o ease-out-expo (começava já na velocidade
     máxima, dava uma sensação de solavanco no início do movimento) */
  transition: transform .85s var(--ease-cinematic);
}
.testi-card {
  flex: 0 0 auto;
  width: clamp(280px, 30vw, 340px);
  box-sizing: border-box;
  padding: 26px 26px 24px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.testi-top { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c, var(--accent));
  color: #fff; font-weight: 600; font-size: 1.05rem;
  font-family: var(--font-body);
}
.testi-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.testi-name { font-weight: 600; font-size: .95rem; color: var(--text-primary); }
.testi-meta { font-size: .78rem; color: var(--text-secondary); }
.testi-g { flex: none; line-height: 0; }
.testi-g svg { width: 20px; height: 20px; }
.testi-stars { display: inline-flex; gap: 2px; }
.testi-stars svg { width: 15px; height: 15px; fill: #F5B301; }
.testi-quote { margin: 0; color: var(--text-secondary); font-size: .96rem; line-height: 1.6; }

.testi-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; }
.testi-arrow {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--divider); border-radius: 50%;
  color: var(--text-primary); background: var(--surface);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.testi-arrow:hover { border-color: var(--accent); background: var(--bg-secondary); }
.testi-arrow svg { width: 20px; height: 20px; }
.testi-dots { display: flex; align-items: center; gap: 8px; }
.testi-dots button {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--divider); padding: 0;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.testi-dots button.is-ativo { background: var(--accent); transform: scale(1.3); }

/* ===== CTA Final — única seção 100% escura, de propósito (a "quebra") ===== */
.cta-final {
  background: var(--accent-dark);
  color: var(--bg-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final .kicker { color: color-mix(in srgb, var(--bg-primary) 65%, var(--accent-soft)); }
.cta-final .display { max-width: 18ch; margin-inline: auto; margin-bottom: 16px; }
.cta-final .display em { color: var(--accent-soft); }
.cta-final p {
  color: color-mix(in srgb, var(--bg-primary) 65%, var(--accent-soft));
  max-width: 50ch;
  margin: 0 auto 32px;
}
.cta-final .btn-primary { background: var(--bg-primary); color: var(--accent-dark); }
.cta-final .btn-primary:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .4);
}
.fx-rays {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent-soft) 25%, transparent) 0%, transparent 60%);
  pointer-events: none;
}

/* ===== Localização ===== */
/* Contato — mapa de fundo em tela cheia + card flutuando por cima (padrão
   Bernard Barbearia). #contato zera o padding-block genérico de <section>
   pra o mapa preencher a seção inteira; o overlay recupera o respiro
   vertical por cima do mapa. */
#contato.localizacao { padding-block: 0; min-height: 620px; overflow: hidden; border-top: 0; }
.loc-map-bg { position: absolute; inset: 0; }
.loc-map-bg iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* grayscale parcial (não 100%) + saturate compensando: mapa continua
     discreto/dessaturado, mas o pin (vermelho nativo do Google) sobra
     saturado o bastante pra não virar cinza junto com o resto. scale
     leve deixa o pin (e o mapa) um pouco maior — não dá pra escalar só
     o pin num iframe de embed simples (sem Maps JS API não há acesso
     ao marker isoladamente). */
  filter: grayscale(45%) contrast(1.1) brightness(.9) saturate(1.9);
  transform: scale(1.12);
  transform-origin: center;
}
.loc-overlay {
  position: relative;
  z-index: 1;
  min-height: 620px;
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 8vw, 88px);
  pointer-events: none;
}
.loc-card {
  pointer-events: auto;
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: clamp(32px, 4vw, 44px);
  max-width: 420px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .4);
}
.loc-list li {
  padding: 12px 0;
  border-top: 1px solid var(--divider);
  color: var(--text-secondary);
}
.loc-list li:first-child { border-top: 0; }
.loc-list strong { color: var(--text-primary); font-weight: 600; }
.loc-list a { color: var(--accent); }
@media (max-width: 640px) {
  .loc-card { max-width: 100%; }
}

/* ===== Footer ===== */
.footer {
  border-top: 1px solid var(--divider);
  padding: 48px 0 32px;
}
.footer .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.footer-nav { display: flex; gap: 20px; }
.footer-nav a {
  /* padding vertical calibrado pra bater ~44px de altura de toque
     (Instagram/WhatsApp do rodapé — Lighthouse mobile reclamava do
     tamanho anterior, 6px 14px) */
  padding: 12px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: .85rem;
  transition: background .2s;
}
.footer-nav a:hover { background: var(--accent-dark); color: var(--bg-primary); }
.footer-logo .brand-logo { height: 40px; }
.footer-copy {
  font-size: .8rem;
  color: var(--text-secondary);
  text-align: right;
}
.footer-copy a { color: var(--accent); }
/* Credito padrao DM: logo horizontal via mask + currentColor
   (herda a cor do texto ao redor - funciona em tema dark e claro) */
.dm-credit { display: inline-flex; align-items: center; gap: 9px; padding: 12px 4px; color: var(--text-secondary); transition: color .2s; }
.dm-credit:hover { color: var(--accent); }
.dm-credit-logo {
  width: 100px; height: 13px; background: currentColor;
  -webkit-mask: url('../img/logo-dionizio.svg') no-repeat left center / contain;
  mask: url('../img/logo-dionizio.svg') no-repeat left center / contain;
}
@media (max-width: 768px) {
  .footer .wrap { grid-template-columns: 1fr; text-align: center; }
  .footer-nav { justify-content: center; }
  .footer-copy { text-align: center; }
}

/* ===== Reveal on scroll — leve "pop" com assentamento suave ===== */
/* O conteúdo NASCE VISÍVEL. Só é escondido quando o main.js confirma que vai
   animar (classe js-anim no <html>). Sem JS, com o CDN do GSAP bloqueado, ou
   se a animação falhar no meio, o texto aparece — em vez de a página ficar em
   branco, que foi o que aconteceu no celular em 20/08/2026. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out-back), transform .7s var(--ease-out-back);
}
.js-anim .reveal {
  opacity: 0;
  transform: translateY(26px) scale(.97);
}
.js-anim .reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ===== View Transitions (multipágina — institucional) =====
   Progressive enhancement: navegadores compatíveis fazem crossfade
   entre páginas. Zero JS. Em site one-page (só âncoras) não tem efeito. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ---------- Ajustes de tamanho de texto — feedback do cliente (2026-08-07) ---------- */
.hero-copy .btn-primary { font-size: calc(.95rem + 2px); }   /* botão "Agendar Consulta" do hero: 15,2px → 17,2px */
.nav-links a { font-size: calc(.9rem + 2px); }                /* links do menu: 14,4px → 16,4px */
.nav-cta { font-size: calc(.85rem + 2px); }                   /* botão "Agendar" do menu: 13,6px → 15,6px */
.hero-copy .lede { font-size: calc(var(--fs-lede) + 2px); }   /* "Há mais de 27 anos..." */
.bento-label { font-size: calc(.95rem + 4px); }                /* nomes no bentogrid: 15,2px → 19,2px */
.bento-menopausa .bento-label, .bento-rejuvenescimento .bento-label { font-size: calc(1.3rem + 4px); } /* Menopausa/Rejuvenescimento: 20,8px → 24,8px */
.area-card li { font-size: calc(.9rem + 2px); }               /* lista dos cards de Áreas de Atuação: 14,4px → 16,4px */
.proc-teaser { font-size: 1.125rem; }                          /* texto dos cards de Procedimentos: → 18px */
.modal-body p,
.modal-list li { font-size: 1.125rem; }                        /* texto do modal "Saiba mais": → 18px */
.quem-copy p { font-size: calc(1rem + 2px); }                  /* corpo de "Quem é a Dra.": 16px → 18px */
.bio-copy .kicker { font-size: calc(.75rem + 2px); }           /* "Quem vai te acompanhar": 12px → 14px */
.bio-credential { font-size: calc(.8rem + 2px); }              /* selo CRM/RQE: 12,8px → 14,8px */

/* ---------- BOTÃO WHATSAPP FLUTUANTE (fixo bottom-right, cor oficial do WhatsApp) ---------- */
.floating-whatsapp {
  position: fixed;
  bottom: clamp(16px, 3vw, 24px);
  right: clamp(16px, 3vw, 24px);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 10px 30px -10px rgba(37, 211, 102, .55), 0 4px 12px rgba(0, 0, 0, .30);
  transition: transform .22s ease, background-color .22s ease;
}
.floating-whatsapp::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: .6;
  animation: wa-pulse 2.4s ease-out infinite;
}
.floating-whatsapp:hover,
.floating-whatsapp:focus-visible {
  background: #128C7E;
  transform: translateY(-2px);
}
.floating-whatsapp:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .floating-whatsapp::before { display: none; } }

/* ---------- BARRA DE SCROLL CUSTOMIZADA (degradê na paleta, exclusivo Prata) ---------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dark) var(--bg-secondary);
}
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 45%, var(--accent-dark) 100%);
  border-radius: 999px;
  border: 2px solid var(--bg-secondary);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 55%, var(--accent-hover) 100%);
}

/* =========================================================
   Responsivo — Dra. Lilian Medina (overrides no fim do arquivo
   de propósito: especificidade igual, quem vem depois vence)
   ========================================================= */
@media (max-width: 900px) {
  .areas-grid { grid-template-columns: 1fr; }
  /* mobile: 1 depoimento por vez (o cliente curtiu esse formato) */
  .testi-card { width: 100%; }
  /* sobrescreve o ajuste de tamanho do cliente (linha ~1079, sem media
     query) — aqui embaixo pra vencer a cascata, senão o lede do hero
     mobile voltava a crescer e brigava com o layout pedido pelo gestor
     de tráfego (20/08): título > botão > texto de apoio, menor. */
  .hero-copy .lede { font-size: calc(var(--fs-lede) - .05rem); }
  /* pedido do gestor: menos vão entre o hero e "Especialidades" no
     mobile — só essa transição, não mexe no --sec-py das outras seções. */
  #especialidades { padding-top: clamp(28px, 6vw, 48px); }
}
@media (max-width: 768px) {
  .bio-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .bio-copy p { margin-inline: auto; }
  /* em coluna única o "stretch" (foto = altura do texto) não existe —
     a foto empilhada precisa da própria proporção, senão fica 0px */
  .bio-photo { width: 100%; max-width: 380px; aspect-ratio: 3 / 4; min-height: 0; }
  .bio-quote { text-align: left; margin-inline: auto; }

  /* Menu mobile: pedido do gestor de tráfego (20/08) — antes ocupava a
     largura inteira da tela (left:0; right:0), então clicar no espaço vazio
     à direita dos links não fechava nada (não tinha "fora" pra clicar).
     Vira um painel ancorado à direita, do tamanho do conteúdo; o espaço
     que sobra à esquerda já é "fora do menu" — o clique aí fecha (JS). */
  .nav-links {
    left: auto;
    right: 0;
    width: min(62vw, 280px);
    border-left: 1px solid var(--divider);
    border-bottom: none;
    box-shadow: -12px 0 32px -16px rgba(0, 0, 0, .18);
  }
}