:root {
    --bg-center: #F4EDE1;
    --bg-edge:   #E4D9C7;
    --bg-edge2:  #D4C6AC;   /* canto do vignette: creme um pouco mais profundo -> dá dimensão (evita o "lavado") */
    --wine:      #7A1E34;
    --wine-deep: #5B1526;
    --ink-soft:  rgba(91, 21, 38, 0.55);
    --ease:      cubic-bezier(0.16, 1, 0.3, 1);
    --font:      "General Sans", "Neue Montreal", "Helvetica Neue", "Inter", system-ui, -apple-system, Arial, sans-serif;
    /* Fonte de statement (estilo Druk Wide Super) p/ os textos institucionais:
       Archivo Expanded pesada é a alternativa livre mais próxima. */
    --font-display: "Archivo", "Archivo Expanded", "Arial Narrow", var(--font);
    /* Vignette de ambiente reutilizado por body e #env-cream: 3 paradas em vez
       de 2 -> luz central quente decaindo para um canto mais profundo. Custo
       zero de render (é pintado uma vez), mas some com a sensação "lavada". */
    --amb-cream: radial-gradient(122% 122% at 50% 34%,
                   var(--bg-center) 0%, var(--bg-edge) 58%, var(--bg-edge2) 100%);
    /* Extensão da mistura suave (soft edge) do vídeo (Sobre) com o ambiente, SÓ
       nas bordas superior e inferior. Fade mais longo = costura menos perceptível
       com o vinho sólido, PORÉM revela mais o vinho (#7A1418) por baixo -> "bandas
       vermelhas" no topo/base. Reduzido de 34vh -> 8vh: feather mínimo, mantém a
       borda suave (sem corte reto duro) e elimina quase toda a faixa vermelha. */
    --video-blend-edge: 8vh;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  /* overflow-x: CLIP (não "hidden"): corta o transbordo horizontal SEM criar um
     scroll container no html/body — o que quebraria o position:sticky da seção
     Localização (o stage precisa fixar relativo à viewport). */
  html, body { width: 100%; overflow-x: clip; }
  html.locked { overflow: hidden; }

  /* ---------- Lenis (smooth scroll) — CSS base recomendado ---------- */
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }
  .lenis.lenis-smooth iframe { pointer-events: none; }
  body {
    font-family: var(--font); color: var(--wine);
    background: var(--amb-cream);
    /* Renderização tipográfica premium (nitidez "4K"): suavização de subpixel,
       kerning/ligaturas ativados e sem inflar fonte no mobile. Custo zero. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  /* Distância TOTAL do scroll = relação scroll->progresso da timeline. É a ÚNICA
     alavanca de "sensibilidade": como tudo é dirigido por um único ScrollTrigger
     com scrub (end = bottom do #scroller) e as animações são funções puras do
     progresso, encurtar esta altura NÃO altera nenhuma animação (formas, easings,
     timing relativo idênticos) — apenas faz cada gesto/segundo de auto-scroll
     percorrer mais da experiência. Em vh -> escala proporcional a cada dispositivo.
     Agora SOBRE_SPAN=1 (heroScroll.js): TODO o #scroller é Hero+Sobre. A antiga
     cauda de saída foi removida (o Sobre congela e a Clínica entra por fade), por
     isso a altura caiu de 900vh -> 676vh na MESMA proporção da cauda removida —
     assim o mapeamento ph=scroll/576vh continua idêntico e o Hero não muda. */
  #scroller { height: 676vh; width: 100%; }

  /* ---------- ambiente (fundo cinematográfico) ---------- */
  /* Vinho profundo, sempre opaco, no fundo de tudo. É o destino exato (#7A1418). */
  #env-wine {
    position: fixed; inset: 0; z-index: 0;
    background: #7A1418;
  }
  /* Creme (estado inicial da Hero) por cima do vinho. A opacidade cai de 1 -> 0
     durante o scroll; como o vinho por baixo é 100% opaco, o resultado por pixel
     é exatamente creme*(1-t) + vinho*t (lerp sRGB por canal), composto na GPU. */
  #env-cream {
    position: fixed; inset: 0; z-index: 1; opacity: 1;
    will-change: opacity; backface-visibility: hidden;
    background: var(--amb-cream);
  }
  /* Camada preta reservada AO RODAPÉ (vidro fumê). Fica em opacity 0 durante toda
     a experiência — a transição de saída do Sobre agora termina em VINHO, sem
     faixa preta, e a seção "Conheça a Clínica" continua esse vinho num gradiente
     (ver .clinic). O #env-dark só é reativado (0 -> 1) enquanto o rodapé está em
     cena, por js/ui/footerDark.js: como é fixo e as seções acima do rodapé são
     opacas, esse preto só aparece atrás do próprio rodapé. */
  #env-dark {
    position: fixed; inset: 0; z-index: 1; opacity: 0;
    will-change: opacity; backface-visibility: hidden;
    background: #000000;
    transition: opacity 0.6s ease;
  }

  /* ---------- vídeo de fundo (etapa AMOR E VIDA -> Sobre) ---------- */
  /* Painel do vídeo: acima do ambiente (env, z0/1), abaixo dos textos (#sobre z2,
     depois no DOM) e do título (#reveal z4). pointer-events:none -> nunca bloqueia
     scroll/arraste. #video-stage desliza no X (saída); .video-background sobe no
     Y (entrada). O filtro leve fica SÓ no <video>; o overlay é camada à parte. */
  #video-stage {
    position: fixed; inset: 0; z-index: 2; overflow: hidden;
    pointer-events: none;
    will-change: transform; backface-visibility: hidden;
    /* SEM máscara lateral: o vídeo nunca esmaece nas laterais. Todo o soft edge
       (topo e base) fica na .video-background. */
  }
  .video-background {
    position: absolute; inset: 0; overflow: hidden; z-index: 0;
    /* Estado inicial da ENTRADA: invisível + leve recuo de escala (0.98), SEM
       deslocamento (fade-in puro, não mais slide-up). setRise() dirige opacity
       e scale em função do scroll, com a mesma curva easeOut do título. */
    opacity: 0; transform: translate3d(0, 0, 0) scale(0.98);
    will-change: opacity, transform; backface-visibility: hidden;
    /* SEM máscara de topo/base: a máscara tornava as bordas do vídeo
       TRANSPARENTES, revelando o ambiente vinho (#7A1418) por baixo -> era uma
       das origens das "faixas vermelhas". Com a entrada/saída por FADE, o
       soft-edge não é mais necessário: o vídeo cobre a tela inteira, sem vinho
       vazando. O overflow:hidden (acima) recorta a franja do blur do <video>
       (que é escalado > 100% — ver abaixo), matando o vermelho nos 4 lados. */
  }
  /* Proporção SEMPRE preservada: cover + center, sem dimensões que estiquem. */
  .video-background video {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    background: transparent; pointer-events: none;
    border: 0; outline: 0;                            /* garantia: nenhuma borda/realce no <video> */
    /* scale(1.06): empurra a franja semitransparente criada pelo blur(3px) para
       FORA do container; o overflow:hidden da .video-background recorta essa
       franja -> nenhuma borda de vinho aparece em nenhum dos 4 lados. 6% garante
       folga suficiente até em telas pequenas (~320px), onde a margem relativa
       encolhe. O leve zoom é imperceptível num vídeo de fundo. */
    transform: translateZ(0) scale(1.06); will-change: filter;   /* blur fixo aplicado via JS */
  }
  /* Overlay discreto p/ legibilidade (nunca caixa sólida): gradiente só no eixo
     VERTICAL (mais escuro no topo e na base, claro no meio) — NUNCA lateral;
     opacidade 0 -> sobe só quando os textos institucionais surgem. */
  .video-overlay {
    position: absolute; inset: 0; pointer-events: none;
    opacity: 0; will-change: opacity;
    /* Tom NEUTRO (preto) em vez de vinho: o gradiente de vinho antigo pintava
       faixas vermelhas no topo/base quando a opacidade subia (leitura do texto).
       Preto suave escurece o suficiente para a legibilidade SEM introduzir
       vermelho. */
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.22),
      rgba(0, 0, 0, 0.05) 50%,
      rgba(0, 0, 0, 0.22)
    );
  }

  /* ==== [PLACEHOLDER] Nova seção (substituta dos equipamentos) entra aqui. ==== */

  /* ---------- seção institucional (sobre o ambiente vinho #7A1418) ---------- */
  /* Overlay fixo, sem fundo próprio (deixa o ambiente aparecer). O fade do
     overlay é a transição Hero->Seção; as linhas entram individualmente. */
  #sobre {
    position: fixed; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; padding: clamp(40px, 9vh, 110px) clamp(24px, 7vw, 130px);
    background: transparent;
  }
  /* Duas colunas equilibradas, muito espaço negativo, largura de leitura confortável. */
  .inst-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 9vw, 160px);
    width: 100%; max-width: 1240px; align-items: start;
    /* O JS translada o grid inteiro no eixo X (deslize coordenado dos dois
       blocos) na transição de saída — só transform/opacity, composto na GPU. */
    will-change: transform, opacity; backface-visibility: hidden;
  }
  .inst-text {
    /* Estilo Druk Wide / Dembélé: larga (font-stretch expanded), pesada e em
       caixa-alta. Entrelinha um pouco mais arejada (1.72) e leve tracking p/
       respiro editorial premium em blocos de várias linhas. */
    font-family: var(--font-display);
    font-stretch: 125%;
    font-size: clamp(13px, 1.15vw, 19px);
    line-height: 1.72; font-weight: 600; letter-spacing: 0.012em;
    text-transform: uppercase;
    color: rgba(244, 237, 225, 0.90);
    /* Sombra difusa e sutil (não é caixa): garante leitura sobre o vídeo. */
    text-shadow: 0 1px 22px rgba(0, 0, 0, 0.42);
    max-width: 26ch;
  }
  .inst-right .inst-text { margin-left: auto; }   /* leve deslocamento p/ equilíbrio da composição */
  /* Cada linha: estado inicial já "abaixo e invisível"; o JS assume no scroll. */
  .ln {
    display: block;
    opacity: 0; transform: translate3d(0, 28px, 0);
    will-change: opacity, transform; backface-visibility: hidden;
  }

  #scene {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;            /* largura/altura explícitas: canvas é replaced element,
                                             sem isto o Chrome usa o tamanho intrínseco e não preenche */
    display: block; z-index: 3;
    touch-action: pan-y; cursor: grab;   /* pan-y: swipe vertical rola a página */
  }

  /* ---------- título cinematográfico AMOR · E · VIDA ---------- */
  #reveal {
    position: fixed; inset: 0; z-index: 4;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; opacity: 1;
    will-change: opacity;
  }
  .rv-line {
    display: flex; align-items: baseline; justify-content: center;
    /* Linha mais larga que antes: dá espaço real para os vãos ao redor do "E"
       crescerem sem que AMOR/VIDA transbordem — sem mexer no tamanho da fonte. */
    width: min(1500px, 96vw);
    /* estado inicial: totalmente fora da viewport (abaixo). O JS assume o
       controle já no primeiro applyScroll(0), com deslocamento vertical linear
       (velocidade uniforme do início ao fim). */
    transform: translate3d(0, 106vh, 0);
    will-change: transform; backface-visibility: hidden;
  }
  .rv-side, .rv-e {
    /* MESMA família dos textos laterais (.inst-text): Archivo no eixo Expanded
       (font-stretch 125%), peso 600 e caixa-alta -> linguagem tipográfica única
       em toda a seção. Cor creme preservada (var(--bg-center)).
       Tamanho reduzido levemente vs. antes: a fonte Expanded é bem mais larga
       que a General Sans, então este ajuste mínimo garante que AMOR/VIDA ainda
       tenham espaço para deslizar até as margens sem colar no "E". */
    font-family: var(--font-display);
    font-stretch: 125%;
    font-size: clamp(34px, 7.2vw, 128px);
    font-weight: 600; line-height: 1;
    letter-spacing: 0.02em; text-transform: uppercase;
    color: var(--bg-center);
    /* Halo suave p/ leitura do título sobre o vídeo nítido (fase de subida). */
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.38);
    white-space: nowrap; will-change: transform; backface-visibility: hidden;
  }
  /* AMOR e VIDA ocupam colunas simétricas ao redor do "E" (âncora central):
     flex:1 iguais mantêm o "E" perfeitamente centralizado em qualquer largura.
     O deslize lateral é aplicado na coluna (.rv-side); .rv-word é a caixa de
     texto real, medida em JS para alinhar AMOR/VIDA às margens da viewport. */
  .rv-side { flex: 1 1 0; min-width: 0; }
  .rv-amor { text-align: right; }
  .rv-vida { text-align: left; }
  /* A folga entre AMOR · E · VIDA vem de UMA ÚNICA fonte simétrica: o padding
     lateral do próprio "E". Assim os dois vãos (AMOR→E e E→VIDA) são SEMPRE
     idênticos por construção. Em em -> proporcional ao tamanho da fonte.
     Valor PEQUENO de propósito: o conjunto nasce compacto ("AMOR E VIDA" lido
     de imediato, sem parecer já separado). A abertura dramática NÃO vem daqui —
     vem do split, concentrado no centro da tela (ver heroScroll.js). Quanto
     menor este repouso, mais impacto tem a separação. O letter-spacing é zerado
     AQUI (o "E" é uma letra só) para não sobrar respiro extra à direita ->
     simetria perfeita entre os dois vãos. */
  .rv-e    { flex: 0 0 auto; padding: 0 0.5em; letter-spacing: 0; }
  .rv-word { display: inline-block; will-change: transform; backface-visibility: hidden; }
  #scene.grabbing { cursor: grabbing; }

  /* ---------- CTAs de texto dourado (conectar / continuar) ---------- */
  /* Botões sem cara de botão: reset total, só a frase dourada. Compartilham
     posição e estilo. No DESKTOP ficam junto à borda inferior, com respiro
     seguro; no MOBILE voltam a top:70% (posição de referência, inalterada —
     ver media query). A opacidade do #connect é dirigida pelo scroll (some com
     o símbolo); a do #connect-again é um fade in/out via classe .show. A
     pulsação vive no filho .connect-txt, então não briga com as opacidades dos
     contêineres. Tons dourados iguais aos das partículas (#BE9440 / #F6E7B0). */
  #connect, #connect-again {
    position: fixed; left: 50%; top: auto;
    bottom: max(clamp(34px, 7vh, 68px), env(safe-area-inset-bottom));
    transform: translate3d(-50%, 0, 0);
    z-index: 6; margin: 0; padding: 6px 10px; border: 0; background: none;
    font-family: var(--font); cursor: pointer; -webkit-appearance: none; appearance: none;
    max-width: 92vw; text-align: center;    /* frase longa: centraliza e nunca estoura a tela */
    will-change: opacity; backface-visibility: hidden;
  }
  /* Botão de continuação: oculto por padrão; surge com fade in fluido ao pausar. */
  #connect-again {
    z-index: 7; opacity: 0; pointer-events: none;
    transition: opacity 0.7s var(--ease);
  }
  #connect-again.show { opacity: 1; pointer-events: auto; }
  .connect-txt {
    display: inline-block; line-height: 1.7;
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase;
    color: #BE9440;                 /* dourado profundo do símbolo (bom contraste no creme) */
    transition: color 0.5s var(--ease), letter-spacing 0.5s var(--ease);
    /* Ciclo contínuo e suave de fade out/in, sem cortes nem exageros. */
    animation: connectPulse 3.6s ease-in-out infinite;
  }
  #connect:hover .connect-txt, #connect:focus-visible .connect-txt,
  #connect-again:hover .connect-txt, #connect-again:focus-visible .connect-txt {
    color: #A67C2E; letter-spacing: 0.32em;   /* hover suave: dourado um pouco mais rico + respiro */
  }
  #connect:focus, #connect-again:focus { outline: none; }
  @keyframes connectPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.38; }
  }
  @media (prefers-reduced-motion: reduce) {
    .connect-txt { animation: none; opacity: 1; }
  }

  /* ---------- header desktop / tablet ---------- */
  #nav {
    position: fixed; top: 0; left: 0; width: 100%;
    display: flex; justify-content: center; align-items: center;
    gap: clamp(16px, 4.2vw, 68px);
    padding: clamp(20px, 3.2vh, 46px) clamp(18px, 5vw, 80px);
    z-index: 100; pointer-events: none;
    border-bottom: 1px solid transparent;
    background: rgba(244, 237, 225, 0);
    box-shadow: 0 12px 34px rgba(91, 21, 38, 0);
    -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition:
      transform 0.6s cubic-bezier(.22, 1, .36, 1),
      padding 0.6s cubic-bezier(.22, 1, .36, 1),
      gap 0.6s cubic-bezier(.22, 1, .36, 1),
      background-color 0.55s cubic-bezier(.22, 1, .36, 1),
      border-color 0.55s cubic-bezier(.22, 1, .36, 1),
      box-shadow 0.55s cubic-bezier(.22, 1, .36, 1),
      backdrop-filter 0.55s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }
  body.header-scrolled #nav {
    gap: clamp(14px, 3.4vw, 54px);
    padding-top: 13px; padding-bottom: 13px;
    background: rgba(244, 237, 225, 0.78);
    border-bottom-color: rgba(122, 30, 52, 0.12);
    box-shadow: 0 12px 34px -24px rgba(91, 21, 38, 0.42);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
  }
  body.header-hidden:not(.menu-open) #nav {
    transform: translate3d(0, calc(-100% - 12px), 0);
  }
  .nav-item {
    position: relative; pointer-events: auto;
    font-size: clamp(10px, 0.85vw, 13px); font-weight: 500;
    letter-spacing: clamp(0.12em, 0.4vw, 0.22em);
    text-transform: uppercase; text-decoration: none;
    color: var(--ink-soft); padding-bottom: 8px;
    transition: color 0.55s var(--ease), letter-spacing 0.6s cubic-bezier(.22, 1, .36, 1); white-space: nowrap;
  }
  body.header-scrolled .nav-item { letter-spacing: clamp(0.1em, 0.32vw, 0.18em); }
  .nav-item::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: var(--wine); transform: scaleX(0); transform-origin: center;
    transition: transform 0.6s var(--ease);
  }
  .nav-item:hover, .nav-item.active { color: var(--wine-deep); }
  .nav-item:hover::after, .nav-item.active::after { transform: scaleX(1); }
  .nav-item:focus-visible {
    outline: 2px solid var(--wine); outline-offset: 5px; border-radius: 2px;
  }

  /* ---------- tela de transição inicial (branca) ---------- */
  /* Cobre 100% do viewport acima de tudo por um instante e desaparece num
     fade extremamente suave. Sem logo, spinner, texto ou qualquer elemento —
     apenas uma transição visual antes da formação das partículas. */
  /* Cor do véu inicial = creme central (não branco puro): funde de forma
     perfeitamente contínua com a Hero creme, sem o "estalo" branco->creme. As
     partículas parecem materializar-se do próprio ambiente. */
  #loader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg-center); opacity: 1;
    pointer-events: none; will-change: opacity;
    transition: opacity 3000ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  #loader.hide { opacity: 0; }

  /* ---------- grão ---------- */
  /* Grão de filme: frequência mais alta = grão MAIS FINO (leitura "4K"/película),
     3 oitavas p/ textura mais rica, opacidade levemente maior. Continua estático
     (pintado uma vez) e em multiply -> custo de render nulo. */
  #grain {
    position: fixed; inset: 0; z-index: 20; pointer-events: none;
    opacity: 0.055; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- hambúrguer + menu fullscreen (mobile) ---------- */
  #burger {
    display: none; position: fixed; top: clamp(18px, 3vh, 30px); right: clamp(18px, 5vw, 30px);
    z-index: 121; width: 48px; height: 44px; padding: 0 9px;
    background: rgba(244, 237, 225, 0); border: 1px solid transparent; border-radius: 14px;
    box-shadow: 0 12px 28px rgba(91, 21, 38, 0);
    -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
    cursor: pointer; pointer-events: auto; flex-direction: column; justify-content: center; gap: 7px;
    transform: translate3d(0, 0, 0);
    transition: transform 0.6s cubic-bezier(.22, 1, .36, 1),
                top 0.6s cubic-bezier(.22, 1, .36, 1),
                background-color 0.55s cubic-bezier(.22, 1, .36, 1),
                border-color 0.55s cubic-bezier(.22, 1, .36, 1),
                box-shadow 0.55s cubic-bezier(.22, 1, .36, 1),
                backdrop-filter 0.55s cubic-bezier(.22, 1, .36, 1);
  }
  #burger span {
    display: block; height: 1.5px; width: 100%; background: var(--wine);
    transition: transform 0.5s var(--ease), opacity 0.35s var(--ease);
  }
  #burger.open span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
  #burger.open span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }
  #burger:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
  body.header-scrolled #burger {
    top: 10px;
    background: rgba(244, 237, 225, 0.82);
    border-color: rgba(122, 30, 52, 0.14);
    box-shadow: 0 14px 30px -20px rgba(91, 21, 38, 0.48);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
  }
  body.header-hidden:not(.menu-open) #burger { transform: translate3d(0, -80px, 0); }
  body.menu-open #burger { transform: none; }

  #menu {
    position: fixed; inset: 0; z-index: 120;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(22px, 4.5vh, 40px);
    background: rgba(244, 237, 225, 0.72);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.55s var(--ease), visibility 0s linear 0.55s;
  }
  #menu.open { opacity: 1; visibility: visible; transition: opacity 0.55s var(--ease); }
  .m-item {
    font-size: clamp(20px, 6vw, 34px); font-weight: 500; letter-spacing: 0.2em;
    text-transform: uppercase; text-decoration: none; color: var(--wine);
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), color 0.4s var(--ease);
  }
  .m-item.active { color: var(--wine-deep); }
  .m-item:focus-visible { outline: 2px solid var(--wine); outline-offset: 8px; border-radius: 2px; }
  #menu.open .m-item { opacity: 1; transform: none; }
  #menu.open .m-item:nth-child(1) { transition-delay: 0.10s; }
  #menu.open .m-item:nth-child(2) { transition-delay: 0.16s; }
  #menu.open .m-item:nth-child(3) { transition-delay: 0.22s; }
  #menu.open .m-item:nth-child(4) { transition-delay: 0.28s; }
  #menu.open .m-item:nth-child(5) { transition-delay: 0.34s; }
  #menu.open .m-item:nth-child(6) { transition-delay: 0.40s; }

  @media (max-width: 720px) {
    #nav { display: none; }
    #burger { display: flex; }

    /* CTAs voltam à posição de referência do mobile (top:70%, inalterada). */
    #connect, #connect-again { top: 70%; bottom: auto; }

    /* Seção institucional empilha em uma coluna (esquerda acima, direita abaixo). */
    .inst-grid {
      grid-template-columns: 1fr;
      gap: clamp(28px, 6vh, 48px);
      max-width: 560px; align-items: center;
    }
    .inst-text { max-width: 100%; }   /* fonte wide/uppercase: usa a largura da coluna */
    .inst-right .inst-text { margin-left: 0; }
  }

  /* ======================================================================
     SEÇÃO: LOCALIZAÇÃO — capítulo scrollado (mesma linguagem do hero)
     Seção ALTA com um .loc-stage FIXADO (position: sticky) enquanto ela passa.
     Um ScrollTrigger próprio (localizacao.js) dirige, por scroll:
       • fundo (foto desfocada + overlay) -> fade PURO (opacity) enquanto o palco
         já está fixado, sem deslocamento (como o vídeo do hero);
       • título "VENHA NOS VISITAR" -> sobe da base, separa em 3 (VENHA<- NOS
         ->VISITAR) no centro e sai por cima (EXATA lógica do AMOR E VIDA, via
         js/ui/heroReveal.js);
       • parágrafo + endereço -> cascata de linhas (revealLines, idêntico ao
         texto institucional da clínica), surgindo DEPOIS do título sair.
     z-index 8: acima das camadas fixas, abaixo da nav (z10) e do grão (z20).
     ====================================================================== */
  .loc {
    position: relative; z-index: 8;
    /* Trilho de scroll ALTO p/ o scrub do capítulo: quanto maior, mais LENTA e
       cinematográfica a animação (mais distância de scroll por fase). 420vh dá
       ao título ~180vh de percurso — ritmo próximo ao do AMOR E VIDA. */
    height: 420vh;
    background: #140a0c;                 /* base escura: cobre as camadas fixas por baixo */
    color: var(--bg-center);
    isolation: isolate;
  }
  /* Palco FIXADO (100vh) enquanto a seção passa. overflow:hidden aqui (não na
     .loc alta) p/ recortar a franja do blur SEM quebrar o position:sticky. */
  .loc-stage {
    position: sticky; top: 0;
    height: 100vh; width: 100%; overflow: hidden;
  }

  /* ---- fundo full-bleed (vídeo + overlay) ---- */
  .loc-bg {
    position: absolute; inset: 0; z-index: 0;
    /* Vídeo SEMPRE visível (opacity 1, SEM fade): como está no topo do palco
       (sticky) da seção alta, ele entra SUBINDO de baixo p/ cima junto com o
       scroll e cobre 100% da área desde o 1º pixel visível -> nenhuma região
       escura antes/atrás dele. A posição/enquadramento final é idêntico. */
    opacity: 1;
  }
  .loc-bg-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    filter: blur(10px); transform: scale(1.12);          /* scale: franja do blur sai do quadro */
    will-change: transform;
  }
  .loc-bg-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.5) 100%);
  }

  /* ---- título voador (espelha o #reveal: laterais deslizam ao redor do centro) ---- */
  .loc-reveal {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
  }
  .loc-rv-line {
    margin: 0; display: flex; align-items: baseline; justify-content: center;
    width: min(1500px, 96vw);
    /* estado inicial: fora da viewport (abaixo). O JS assume no 1º render. */
    transform: translate3d(0, 106vh, 0);
    will-change: transform; backface-visibility: hidden;
  }
  .loc-rv-side, .loc-rv-mid {
    font-family: var(--font-display); font-stretch: 125%;
    /* MENOR que o AMOR E VIDA (frase mais longa): a frase nasce compacta no
       centro com margem sobrando dos dois lados -> as palavras têm espaço real
       para deslizar até as bordas (split claro). Fonte grande = sem espaço. */
    font-size: clamp(28px, 4.6vw, 76px); font-weight: 600; line-height: 1;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--bg-center);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
    white-space: nowrap; will-change: transform; backface-visibility: hidden;
  }
  .loc-rv-side { flex: 1 1 0; min-width: 0; }
  .loc-rv-left { text-align: right; }
  .loc-rv-right { text-align: left; }
  .loc-rv-mid { flex: 0 0 auto; padding: 0 0.42em; letter-spacing: 0; }
  .loc-rv-word { display: inline-block; will-change: transform; backface-visibility: hidden; }

  /* ---- conteúdo em cascata (parágrafo + endereço) sobre o palco ---- */
  .loc-content {
    position: absolute; inset: 0; z-index: 2;
    display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 460px);
    justify-content: center; align-content: center; align-items: center;
    gap: clamp(40px, 6vw, 100px);
    padding: clamp(72px, 12vh, 150px) clamp(24px, 6vw, 120px);
    pointer-events: none;
  }
  .loc-support {
    font-family: var(--font);
    font-size: clamp(15px, 1.2vw, 19px); font-weight: 400; line-height: 1.75;
    color: rgba(244, 237, 225, 0.9); max-width: 46ch; margin: 0;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
  }
  .loc-col-right { display: flex; justify-content: flex-end; }
  .loc-address {
    font-style: normal; display: flex; flex-direction: column;
    align-items: flex-start; gap: clamp(14px, 2vh, 20px); max-width: 34ch;
  }
  .loc-pin-icon { display: inline-flex; color: var(--bg-center); opacity: 0.95; }
  .loc-pin-icon svg {
    width: clamp(30px, 3vw, 40px); height: clamp(30px, 3vw, 40px);
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
  }
  .loc-addr-text {
    font-family: var(--font);
    font-size: clamp(16px, 1.35vw, 21px); font-weight: 500; line-height: 1.65;
    letter-spacing: 0.01em; color: var(--bg-center);
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
  }
  /* Cada linha nasce "abaixo e invisível"; revealLines (JS) assume no scroll —
     IDÊNTICO ao .ln do texto institucional. */
  .loc-ln {
    display: block; opacity: 0; transform: translate3d(0, 28px, 0);
    will-change: opacity, transform; backface-visibility: hidden;
  }

  /* ---- responsivo: empilha o conteúdo em telas médias/pequenas ---- */
  @media (max-width: 860px) {
    .loc-content {
      grid-template-columns: 1fr; gap: clamp(28px, 5vh, 44px);
      align-content: center; align-items: start;
      padding: clamp(56px, 10vh, 100px) clamp(24px, 7vw, 56px);
    }
    .loc-col-right { justify-content: flex-start; }
    .loc-support { max-width: 100%; }
    /* "VENHA NOS VISITAR" é longo: no mobile a fonte cai o suficiente para o
       conjunto caber na largura (senão as palavras transbordam/cortam), mantendo
       o mesmo mecanismo de subida + separação horizontal. */
    .loc-rv-side, .loc-rv-mid { font-size: clamp(18px, 5.2vw, 42px); letter-spacing: 0.01em; }
    .loc-rv-mid { padding: 0 0.32em; }
    .loc-bg-overlay { background: rgba(0, 0, 0, 0.56); }
  }

  /* Acessibilidade: sem o "voo" scrubado. Vira um hero ESTÁTICO empilhado
     (título em cima, parágrafo/endereço abaixo) — nada absoluto sobreposto. */
  @media (prefers-reduced-motion: reduce) {
    .loc { height: auto; min-height: 100vh; }
    .loc-stage {
      position: relative; height: auto; min-height: 100vh;
      display: flex; flex-direction: column; justify-content: center;
      gap: clamp(28px, 5vh, 56px);
      padding: clamp(64px, 10vh, 120px) clamp(24px, 6vw, 90px);
    }
    .loc-bg { opacity: 1; transition: none; }
    .loc-reveal { position: relative; inset: auto; justify-content: flex-start; }
    .loc-rv-line { transform: none; width: auto; }
    .loc-content {
      position: relative; inset: auto; padding: 0;
      grid-template-columns: 1fr; justify-content: start; gap: clamp(24px, 4vh, 40px);
    }
    .loc-ln { opacity: 1; transform: none; }
  }

  /* ======================================================================
     SEÇÃO: DÚVIDAS (FAQ) — premium, fluxo normal, tema creme.
     Header centralizado (subtítulo + título + descrição + CTA), inspirado no
     exemplo shadcn, e as perguntas em DUAS COLUNAS de cards (disclosure; um
     aberto por vez EM CADA coluna). Altura animada por grid-template-rows
     (0fr->1fr); conteúdo com fade + leve slide; ícone +/×.
     z-index 8: acima das camadas fixas, abaixo da nav/grão.
     ====================================================================== */
  .faq {
    position: relative; z-index: 8;
    background: var(--amb-cream);            /* volta à identidade creme do hero */
    color: var(--wine-deep);
  }
  /* Backdrop 3D (infinito dourado): STICKY -> fica fixo na viewport enquanto a
     seção passa (padrão "sticky background": margin-bottom negativo cancela o
     espaço de fluxo, então não empurra o conteúdo). overflow:hidden aqui é no
     PRÓPRIO backdrop (não quebra o sticky). Não interativo (pointer-events:none). */
  .faq-bg {
    position: sticky; top: 0; z-index: 0;
    height: 100vh; margin-bottom: -100vh;
    overflow: hidden; pointer-events: none;
  }
  /* Canvas do infinito: grande, mas discreto — opacidade reduzida + blur leve
     (o modelo/partículas/material continuam os mesmos; só suavizamos a presença
     para nunca competir com os cards). blur baixo p/ não pesar o FPS. */
  .faq-canvas {
    display: block; width: 100%; height: 100%;
    opacity: 0.5;
    filter: blur(2px);
  }
  /* Veil creme: mantém o texto legível sobre o infinito dourado — mais forte no
     topo (atrás do título) e na base; deixa o infinito respirar no miolo. */
  .faq-bg-veil {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom,
      rgba(244, 237, 225, 0.86) 0%,
      rgba(244, 237, 225, 0.42) 32%,
      rgba(244, 237, 225, 0.42) 66%,
      rgba(244, 237, 225, 0.82) 100%);
  }
  .faq-inner {
    position: relative; z-index: 1;
    width: 100%; max-width: 1160px; margin: 0 auto;
    padding: clamp(84px, 14vh, 180px) clamp(24px, 6vw, 120px);
  }

  /* ---------- header centralizado ---------- */
  .faq-head {
    text-align: center; max-width: 720px;
    margin: 0 auto clamp(48px, 7vh, 84px);
    display: flex; flex-direction: column; align-items: center;
  }
  .faq-eyebrow {
    font-family: var(--font-display); font-stretch: 125%;
    font-size: clamp(10px, 0.8vw, 12px); font-weight: 600;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--wine); opacity: 0.8; margin-bottom: clamp(16px, 2vh, 22px);
  }
  .faq-title {
    font-family: var(--font);
    font-size: clamp(30px, 3.4vw, 52px); font-weight: 500; line-height: 1.08;
    letter-spacing: -0.02em; color: var(--wine-deep); margin: 0;
    text-wrap: balance;
  }
  .faq-lead {
    font-family: var(--font);
    font-size: clamp(15px, 1.1vw, 17px); font-weight: 400; line-height: 1.7;
    color: var(--ink-soft); max-width: 52ch; margin: clamp(16px, 2.2vh, 24px) auto 0;
    text-wrap: pretty;
  }
  /* CTA em pílula (mesma linguagem do botão "Como chegar" da Localização). */
  .faq-cta {
    margin-top: clamp(24px, 3.4vh, 38px);
    display: inline-flex; align-items: center; gap: 0.5em;
    font-family: var(--font); font-size: clamp(13px, 1vw, 15px);
    font-weight: 500; letter-spacing: 0.02em;
    color: var(--bg-center); background: var(--wine);
    border: 0; cursor: pointer; padding: 13px 26px; border-radius: 999px;
    transition: background 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    box-shadow: 0 10px 24px -12px rgba(122, 30, 52, 0.6);
  }
  .faq-cta:hover { background: var(--wine-deep); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(122, 30, 52, 0.7); }
  .faq-cta:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
  .faq-cta-arrow { transition: transform 0.4s var(--ease); }
  .faq-cta:hover .faq-cta-arrow { transform: translateX(3px); }

  /* ---------- duas colunas de perguntas ---------- */
  .faq-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2.4vw, 34px); align-items: start;
  }
  .faq-col { display: flex; flex-direction: column; gap: clamp(12px, 1.5vh, 18px); }
  /* GLASS CARD: vidro fosco sutil (o fundo é claro -> discreto). Branco ~10%
     + backdrop blur/saturate; borda branca suave; sombra macia difusa +
     highlight superior interno (profundidade). Transição consolidada aqui
     (transform curto p/ hover; opacity mais longo p/ a entrada) — evita que o
     bloco de entrada sobrescreva o timing do hover. */
  .faq-item {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.20);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),          /* highlight superior */
      0 1px 2px rgba(91, 21, 38, 0.04),
      0 18px 42px -26px rgba(91, 21, 38, 0.22);        /* sombra macia difusa */
    transition:
      transform 0.32s var(--ease),
      border-color 0.32s var(--ease),
      box-shadow 0.32s var(--ease),
      background 0.32s var(--ease),
      opacity 0.7s var(--ease);
  }
  /* Sem suporte a backdrop-filter: cai para um creme quase opaco (legível). */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .faq-item { background: rgba(255, 253, 249, 0.92); }
  }
  /* HOVER premium: leve elevação + sombra/borda mais presentes (250–350ms). */
  .faq-item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 2px 6px rgba(91, 21, 38, 0.06),
      0 26px 56px -28px rgba(91, 21, 38, 0.32);
  }
  .faq-item.is-open {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(122, 30, 52, 0.26);
    /* sombra elegante + GLOW vinho muito discreto + highlight superior */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.66),
      0 2px 10px -4px rgba(122, 30, 52, 0.1),
      0 30px 66px -32px rgba(122, 30, 52, 0.4);
  }

  /* gatilho (pergunta) */
  .faq-q { margin: 0; }
  .faq-trigger {
    width: 100%; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 28px);
    padding: clamp(20px, 2.3vw, 27px) clamp(20px, 2.5vw, 32px);
    /* Altura mínima = padding + 2 linhas da pergunta (mesmas unidades) -> cards
       fechados de 1 e 2 linhas ficam com a MESMA altura, então as duas colunas
       (4 itens cada, mesmo gap) alinham perfeitamente. */
    min-height: calc(2 * clamp(20px, 2.3vw, 27px) + 2.8 * clamp(16px, 1.3vw, 20px));
    background: none; border: 0; margin: 0; cursor: pointer; text-align: left;
    font-family: var(--font); color: var(--wine-deep);
    border-radius: 20px;
    -webkit-tap-highlight-color: transparent;
  }
  .faq-q-text {
    font-size: clamp(16px, 1.3vw, 20px); font-weight: 500; line-height: 1.4;
    letter-spacing: -0.01em;
    transition: color 0.4s var(--ease);
  }
  .faq-item.is-open .faq-q-text { color: var(--wine); }
  .faq-trigger:focus-visible {
    outline: 2px solid var(--wine); outline-offset: 3px;
  }

  /* ícone + -> × (rotação suave) */
  .faq-icon {
    position: relative; flex: 0 0 auto; width: 24px; height: 24px;
    color: rgba(122, 30, 52, 0.55);
    transition: transform 0.5s var(--ease), color 0.4s var(--ease);
  }
  .faq-item.is-open .faq-icon { transform: rotate(135deg); color: var(--wine); }
  .faq-bar {
    position: absolute; top: 50%; left: 50%; display: block;
    width: 15px; height: 1.6px; border-radius: 2px; background: currentColor;
    transform: translate(-50%, -50%);
  }
  .faq-bar:last-child { transform: translate(-50%, -50%) rotate(90deg); }

  /* resposta: altura animada (grid 0fr->1fr) + fade/slide do conteúdo */
  .faq-a {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s var(--ease);
  }
  .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
  .faq-a-inner {
    overflow: hidden; min-height: 0;
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }
  .faq-item.is-open .faq-a-inner { opacity: 1; transform: none; transition-delay: 0.08s; }
  .faq-a-inner p, .faq-a-inner ul {
    font-family: var(--font);
    font-size: clamp(14.5px, 1.05vw, 16.5px); font-weight: 400; line-height: 1.72;
    color: var(--ink-soft); margin: 0;
    /* padding lateral = o do gatilho (fica FORA do container que colapsa). */
    padding: 0 clamp(20px, 2.5vw, 32px);
  }
  .faq-a-inner > :first-child { padding-top: clamp(2px, 0.6vh, 6px); }
  .faq-a-inner > :last-child { padding-bottom: clamp(22px, 2.6vw, 30px); }
  .faq-a-inner > * + * { margin-top: 0.9em; }
  /* Negrito, lista e link dentro das respostas. */
  .faq-a-inner strong { font-weight: 600; color: var(--wine-deep); }
  .faq-ul { list-style: none; }
  .faq-ul li { position: relative; padding-left: 1.2em; }
  .faq-ul li + li { margin-top: 0.45em; }
  .faq-ul li::before {
    content: ""; position: absolute; left: 0.15em; top: 0.62em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--wine); opacity: 0.7;
  }
  .faq-a-inner a {
    color: var(--wine); font-weight: 500;
    border-bottom: 1px solid rgba(122, 30, 52, 0.4); padding-bottom: 1px;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
  }
  .faq-a-inner a:hover { color: var(--wine-deep); border-bottom-color: var(--wine); }
  .faq-a-inner a:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; border-radius: 2px; }
  /* "Veja a lista completa" — realce (span, sem destino ainda). */
  .faq-more { margin-top: 1.1em; }
  .faq-link {
    display: inline-block; font-weight: 500; color: var(--wine);
    letter-spacing: 0.01em; cursor: default;
    border-bottom: 1px solid rgba(122, 30, 52, 0.35); padding-bottom: 1px;
  }

  /* ---------- entrada (reveal on scroll, single-fire via IO) ---------- */
  .faq-head > * {
    opacity: 0; transform: translateY(22px);
    transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  }
  /* .faq-item: só o ESTADO inicial aqui; a transição é a do próprio card (base)
     -> entrada usa opacity longo + transform curto, e o hover mantém 0.32s. */
  .faq-item { opacity: 0; transform: translateY(22px); }
  .faq.is-in .faq-head > *, .faq.is-in .faq-item { opacity: 1; transform: none; }
  .faq.is-in .faq-head > *:nth-child(1) { transition-delay: 0ms; }
  .faq.is-in .faq-head > *:nth-child(2) { transition-delay: 60ms; }
  .faq.is-in .faq-head > *:nth-child(3) { transition-delay: 120ms; }
  .faq.is-in .faq-head > *:nth-child(4) { transition-delay: 180ms; }
  /* itens escalonados por LINHA (as duas colunas entram em paralelo). */
  .faq.is-in .faq-col .faq-item:nth-child(1) { transition-delay: 220ms; }
  .faq.is-in .faq-col .faq-item:nth-child(2) { transition-delay: 300ms; }
  .faq.is-in .faq-col .faq-item:nth-child(3) { transition-delay: 380ms; }
  .faq.is-in .faq-col .faq-item:nth-child(4) { transition-delay: 460ms; }

  /* ---------- responsivo: uma coluna ---------- */
  @media (max-width: 820px) {
    .faq-grid { grid-template-columns: 1fr; gap: clamp(12px, 1.5vh, 18px); }
    .faq-col + .faq-col { margin-top: clamp(12px, 1.5vh, 18px); }
    /* Perf no mobile: remove o blur do canvas (custo por-frame em tela cheia) e
       alivia o backdrop dos cards. Visual mantido (veil + glass suavizam). */
    .faq-canvas { filter: none; }
    .faq-item {
      -webkit-backdrop-filter: blur(8px) saturate(1.2);
      backdrop-filter: blur(8px) saturate(1.2);
    }
  }

  /* Acessibilidade: sem animações de entrada/altura com reduced-motion. */
  @media (prefers-reduced-motion: reduce) {
    .faq-head > *, .faq-item { opacity: 1; transform: none; transition: none; }
    .faq-a { transition: none; }
    .faq-a-inner { transition: none; }
    .faq-icon { transition: color 0.2s linear; }
  }

  /* ======================================================================
     RODAPÉ (FOOTER) — vidro fumê VINHO translúcido, fecha a página.
     Fluxo normal após o FAQ; z-index 8 (acima das camadas fixas — o backdrop
     amostra o preto do #env-dark fixo -> vidro fumê). Texto creme; títulos em
     Archivo Expanded (eyebrow); links em General Sans com micro-hover
     (translateY + underline). 4 colunas -> empilham no mobile (centralizado).
     ====================================================================== */
  .ft {
    position: relative; z-index: 8;
    color: var(--bg-center);
    /* Vinho translúcido (~28% transparente) + blur: vidro fumê, sem cor chapada. */
    background: rgba(122, 20, 24, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    border-top: 1px solid rgba(244, 237, 225, 0.12);
    padding: clamp(56px, 8vh, 96px) clamp(24px, 6vw, 120px) clamp(28px, 4vh, 40px);
  }
  .ft-inner { width: 100%; max-width: 1240px; margin: 0 auto; }
  .ft-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: clamp(32px, 4vw, 72px); align-items: start;
  }

  /* ---- coluna 1: marca ---- */
  .ft-brand { display: flex; flex-direction: column; gap: 16px; max-width: 36ch; }
  .ft-logo { display: inline-flex; align-items: center; gap: 12px; }
  .ft-logo svg { width: 42px; height: 26px; display: block; }
  .ft-logo-name {
    font-family: var(--font-display); font-stretch: 125%;
    font-size: clamp(15px, 1.2vw, 18px); font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--bg-center);
  }
  .ft-desc {
    font-family: var(--font); font-size: clamp(13px, 0.95vw, 14.5px);
    line-height: 1.7; color: rgba(244, 237, 225, 0.72); margin: 0;
  }
  .ft-site {
    font-family: var(--font); font-size: clamp(13px, 0.95vw, 14.5px); font-weight: 500;
    color: rgba(244, 237, 225, 0.9); text-decoration: none; width: fit-content;
    border-bottom: 1px solid rgba(244, 237, 225, 0.28); padding-bottom: 2px;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .ft-site:hover { color: #F6E7B0; border-color: rgba(246, 231, 176, 0.65); transform: translateY(-1px); }
  .ft-site:focus-visible { outline: 2px solid rgba(246, 231, 176, 0.7); outline-offset: 3px; border-radius: 2px; }

  /* ---- colunas de links ---- */
  .ft-col-title {
    font-family: var(--font-display); font-stretch: 125%;
    font-size: clamp(10px, 0.8vw, 12px); font-weight: 600; letter-spacing: 0.24em;
    text-transform: uppercase; color: rgba(246, 231, 176, 0.85);
    margin: 0 0 clamp(16px, 2vh, 24px);
  }
  .ft-list { list-style: none; display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; }
  .ft-link {
    display: inline-flex; align-items: center; gap: 10px; width: fit-content;
    font-family: var(--font); font-size: clamp(13.5px, 1vw, 15px); font-weight: 400;
    color: rgba(244, 237, 225, 0.78); text-decoration: none; cursor: pointer;
    transition: color 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .ft-link:hover { color: #F6E7B0; transform: translateY(-1px); }
  .ft-link:focus-visible { outline: 2px solid rgba(246, 231, 176, 0.7); outline-offset: 3px; border-radius: 3px; }
  /* underline elegante (escala do centro) — só no rótulo, não no ícone */
  .ft-link-label { position: relative; }
  .ft-link-label::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: center;
    transition: transform 0.28s var(--ease);
  }
  .ft-link:hover .ft-link-label::after { transform: scaleX(1); }
  /* ícones de contato: tamanho/alinhamento consistentes + hover suave */
  .ft-ic {
    flex: 0 0 auto; width: 18px; height: 18px;
    color: rgba(246, 231, 176, 0.82);
    transition: color 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .ft-link:hover .ft-ic { color: #F6E7B0; transform: scale(1.08); }

  /* ---- separador discreto ---- */
  .ft-sep {
    height: 0; border: 0; border-top: 1px solid rgba(244, 237, 225, 0.12);
    margin: clamp(40px, 6vh, 72px) 0 clamp(20px, 3vh, 28px);
  }

  /* ---- copyright + nota institucional ---- */
  .ft-copy { display: flex; flex-direction: column; gap: 6px; }
  .ft-copy-main {
    font-family: var(--font); font-size: clamp(12px, 0.9vw, 13.5px);
    color: rgba(244, 237, 225, 0.62); letter-spacing: 0.01em; margin: 0;
  }
  .ft-copy-note {
    font-family: var(--font); font-size: clamp(11px, 0.8vw, 12px);
    color: rgba(244, 237, 225, 0.4); line-height: 1.65; max-width: 66ch; margin: 0;
  }

  /* ---- responsivo ---- */
  @media (max-width: 900px) {
    .ft-grid { grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 48px); }
    .ft-brand { grid-column: 1 / -1; max-width: 46ch; }
  }
  @media (max-width: 560px) {
    .ft { text-align: center; padding-left: clamp(20px, 8vw, 40px); padding-right: clamp(20px, 8vw, 40px); }
    .ft-grid { grid-template-columns: 1fr; gap: clamp(30px, 6vh, 44px); }
    .ft-brand { grid-column: auto; align-items: center; max-width: 90%; margin: 0 auto; }
    .ft-list { align-items: center; }
    .ft-copy { align-items: center; }
    .ft-copy-note { max-width: 100%; }
  }

  /* ======================================================================
     WIPE reveal — primitiva reutilizável (Conheça a Clínica + Equipamentos).
     Estado inicial: o elemento fica recortado por clip-path (invisível numa
     borda); ao ganhar .is-in o clip anima até inset(0), "varrendo" a imagem/
     vídeo para dentro. As direções seguem o nome do gesto:
       wipe-left  -> revela da direita p/ a esquerda
       wipe-right -> revela da esquerda p/ a direita
       wipe-up    -> revela de baixo p/ cima
       wipe-down  -> revela de cima p/ baixo
     ====================================================================== */
  .wipe { transition: clip-path 0.9s var(--ease); will-change: clip-path; }
  .wipe.wipe-left  { clip-path: inset(0 0 0 100%); }
  .wipe.wipe-right { clip-path: inset(0 100% 0 0); }
  .wipe.wipe-up    { clip-path: inset(100% 0 0 0); }
  .wipe.wipe-down  { clip-path: inset(0 0 100% 0); }
  .wipe.is-in      { clip-path: inset(0 0 0 0); }

  /* ======================================================================
     SEÇÃO: CONHEÇA A CLÍNICA — hero FULL-BLEED em slideshow.
     As imagens cobrem 100% da tela (object-fit: cover); título + legenda BRANCOS
     no terço esquerdo, sobre a imagem, com scrim suave (esq -> dir) só p/ leitura.
     O palco é FIXADO (sticky) enquanto a seção passa; a SAÍDA é um cross-fade
     dirigido pelo scroll (js/clinic/clinic.js): o palco some em fade e a seção
     Equipamentos — puxada por baixo (.equip margin-top negativo) — surge por trás,
     sem preto/vazio/bege. z-index 9 p/ ficar acima da .equip (z8) nessa passagem.
     ====================================================================== */
  .clinic {
    position: relative; z-index: 9;
    /* 100vh de palco fixado (sticky) + 100vh de "trilho" de saída (o cross-fade).
       Sem fundo próprio: durante a saída, a .equip aparece POR TRÁS do palco. */
    height: 200vh;
    /* SEM margem negativa: a seção entra pelo FLUXO NORMAL, subindo pela base da
       viewport (não sobrepõe o Hero por cima). Quando seu topo alcança o topo da
       viewport, o .clinic-stage (sticky) enquadra 100% a tela — e só então o
       slideshow começa (ver js/clinic/clinic.js). O .equip abaixo mantém sua
       margem negativa relativa (geometria preservada, apenas deslocada +100vh). */
    color: var(--bg-center);
  }
  .clinic-stage {
    position: sticky; top: 0;
    height: 100vh; width: 100%;
    overflow: hidden;                    /* recorta a franja do wipe */
    isolation: isolate;
    /* VISÍVEL desde a subida (SEM fade de entrada): a 1ª imagem, o título e a
       legenda aparecem prontos enquanto a seção sobe pelo fluxo. O clinic.js
       controla apenas o FADE-OUT de saída (cross-fade p/ Equipamentos). */
    opacity: 1;
    /* Continua o vinho da cena anterior (#7A1418) -> some p/ o areia: aparece no
       fade-in da 1ª imagem e por trás de bordas. Sem preto, sem linha visível. */
    background:
      linear-gradient(180deg, #7A1418 0px, rgba(122, 20, 24, 0) 240px) no-repeat,
      linear-gradient(180deg, #EEE1CB 0%, #E6D5B8 100%);
    will-change: opacity;
  }
  /* Contexto de empilhamento PRÓPRIO (isolation): os z-index dos slides (definidos
     no JS para viabilizar o loop) ficam CONTIDOS aqui dentro e não sobem acima do
     scrim/legenda/título, que vêm depois no DOM. */
  .clinic-slides { position: absolute; inset: 0; isolation: isolate; }
  /* Cada imagem cobre 100% (cover). Invisível até ser ativada; a anterior fica
     por baixo até ser coberta -> "apenas uma visível" sem flash entre trocas. */
  .clinic-slide {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: 0;
  }
  .clinic-slide.is-active { opacity: 1; }
  .clinic-slide.fade { transition: opacity 1s var(--ease); }   /* 1ª imagem: fade in */

  /* Scrim de legibilidade: escurece SÓ a faixa esquerda (onde fica o texto),
     esmaecendo para transparente à direita — não escurece a imagem inteira. */
  .clinic-scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.34) 30%,
      rgba(0, 0, 0, 0.10) 52%, rgba(0, 0, 0, 0) 66%);
  }

  /* Bloco de texto: terço esquerdo, alinhado à esquerda, branco, centrado no Y. */
  .clinic-content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    align-items: flex-start; text-align: left;
    gap: clamp(14px, 2.4vh, 26px);
    width: min(52%, 680px);
    padding: clamp(28px, 6vw, 104px);
    color: #fff; pointer-events: none;
  }
  .clinic-title {
    font-family: var(--font-display); font-stretch: 125%;
    font-size: clamp(30px, 4.6vw, 66px); font-weight: 700; line-height: 1.03;
    letter-spacing: 0.01em; text-transform: uppercase; color: #fff;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
  .clinic-title.is-in { opacity: 1; transform: none; }
  .clinic-caption {
    margin: 0; max-width: 40ch;
    font-family: var(--font); font-size: clamp(15px, 1.55vw, 22px); line-height: 1.5;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column; gap: 0.12em;
  }
  /* Cada linha da legenda entra em fade/slide, em cascata (transition-delay no JS). */
  .clinic-cap-line {
    display: block; opacity: 0; transform: translateY(14px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .clinic-cap-line.is-in { opacity: 1; transform: none; }

  /* ======================================================================
     SEÇÃO: EQUIPAMENTOS DE IMAGEM — grid alternado, reveals cinematográficos,
     parallax leve e o mesmo backdrop 3D de partículas usado na FAQ.
     ====================================================================== */
  .equip {
    position: relative; z-index: 8;
    /* Puxada 100vh para cima: durante a SAÍDA da seção Conheça a Clínica (palco
       fixado em fade), a .equip fica POR TRÁS do palco e é revelada pelo cross-
       fade — a passagem entre as seções fica contínua (sem preto/vazio/bege). O
       fundo areia opaco garante que nada da cena fixa apareça atrás. */
    margin-top: -100vh;
    background: var(--amb-cream);
    color: var(--wine-deep);
    padding: 0;
    overflow: hidden;
    overflow: clip; /* recorta o backdrop sem criar um scroll-container que quebraria o sticky */
    isolation: isolate;
  }

  #conheca-clinica, #localizacao, #duvidas { scroll-margin-top: 88px; }

  @media (prefers-reduced-motion: reduce) {
    #nav, #burger, .nav-item { transition: none !important; }
    body.header-hidden #nav, body.header-hidden #burger { transform: none !important; }
  }
  .equip-bg {
    position: sticky; top: 0; z-index: 0;
    height: 100vh; margin-bottom: -100vh;
    overflow: hidden; pointer-events: none !important;
  }
  .equip-canvas {
    display: block; width: 100%; height: 100%;
    opacity: 0.5; filter: blur(2px);
    pointer-events: none !important;
  }
  .equip-bg-veil {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(244, 237, 225, 0.86) 0%,
      rgba(244, 237, 225, 0.42) 32%,
      rgba(244, 237, 225, 0.42) 66%,
      rgba(244, 237, 225, 0.82) 100%);
  }
  .equip-inner {
    position: relative; z-index: 2; width: min(1420px, 100%); margin: 0 auto;
    padding: clamp(76px, 11vh, 132px) clamp(24px, 6vw, 90px);
  }
  .equip-head { text-align: center; margin-bottom: clamp(48px, 7vh, 82px); }
  .equip-title {
    font-family: var(--font-display); font-stretch: 125%;
    font-size: clamp(26px, 4.4vw, 60px); font-weight: 700; line-height: 1.05;
    letter-spacing: 0.01em; text-transform: uppercase; color: #6E5A34;
  }
  .equip-title-mask { display: block; overflow: hidden; padding-bottom: 0.05em; }
  .equip-title-line {
    display: block; opacity: 0; transform: translateY(112%);
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1),
                opacity 0.9s cubic-bezier(.22, 1, .36, 1);
    will-change: transform, opacity;
  }
  .equip-head.is-in .equip-title-line { opacity: 1; transform: none; }
  .equip-head.is-in .equip-title-mask:nth-child(2) .equip-title-line { transition-delay: 110ms; }

  .equip-list { display: flex; flex-direction: column; gap: clamp(42px, 6.5vh, 76px); }
  .equip-item {
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center;
    gap: clamp(30px, 5.5vw, 78px);
  }
  .equip-item:nth-child(even) .equip-media { order: 2; }
  .equip-media {
    --parallax-y: 0px; --media-scale: 1.05;
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: clamp(14px, 1.5vw, 22px); overflow: hidden;
    background: rgba(78, 63, 39, 0.10);
    box-shadow: 0 18px 48px -28px rgba(50, 38, 18, 0.38);
    opacity: 0;
    transition: clip-path 1.05s cubic-bezier(.22, 1, .36, 1),
                opacity 0.8s cubic-bezier(.22, 1, .36, 1);
    will-change: clip-path, opacity;
  }
  .equip-item[data-side="left"] .equip-media { clip-path: inset(0 100% 0 0); }
  .equip-item[data-side="right"] .equip-media { clip-path: inset(0 0 0 100%); }
  .equip-item.is-in .equip-media { clip-path: inset(0); opacity: 1; --media-scale: 1; }
  .equip-video {
    position: absolute; left: 0; top: -24px; width: 100%; height: calc(100% + 48px);
    object-fit: cover; object-position: center; display: block;
    transform: translate3d(0, var(--parallax-y), 0) scale(var(--media-scale));
    filter: blur(4px);
    transition: transform 1.05s cubic-bezier(.22, 1, .36, 1),
                filter 1s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }
  .equip-item.is-in .equip-video { filter: none; }
  .equip-caption { position: relative; padding-top: 22px; }
  .equip-caption::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: clamp(42px, 4vw, 58px); height: 2px; border-radius: 2px;
    background: #9B7740; transform: scaleX(0); transform-origin: left center;
    transition: transform 0.8s cubic-bezier(.22, 1, .36, 1) 380ms;
  }
  .equip-item.is-in .equip-caption::before { transform: scaleX(1); }
  .equip-name {
    font-family: var(--font-display); font-stretch: 125%;
    font-size: clamp(20px, 2.4vw, 34px); font-weight: 600; line-height: 1.1;
    letter-spacing: 0.01em; text-transform: uppercase; color: #6E5A34;
    margin: 0 0 0.5em;
  }
  .equip-desc {
    font-family: var(--font); font-size: clamp(15px, 1.4vw, 19px); line-height: 1.65;
    color: #4E3F27; max-width: 46ch; margin: 0;
  }
  .equip-name, .equip-desc {
    opacity: 0; transform: translateY(38px);
    transition: opacity 0.9s cubic-bezier(.22, 1, .36, 1),
                transform 0.9s cubic-bezier(.22, 1, .36, 1);
  }
  .equip-name { transition-delay: 470ms; }
  .equip-desc { transition-delay: 570ms; }
  .equip-item.is-in .equip-name,
  .equip-item.is-in .equip-desc { opacity: 1; transform: none; }

  @media (hover: hover) and (pointer: fine) {
    .equip-item.is-in .equip-media:hover { --media-scale: 1.035; }
  }

  /* ---- responsivo (Clínica + Equipamentos) ---- */
  @media (max-width: 767px) {
    /* Clínica full-bleed no mobile: texto à esquerda, largura quase total, com
       padding seguro; o scrim cobre um pouco mais para manter a leitura. */
    .clinic-content { width: min(88%, 560px); padding: clamp(24px, 7vw, 40px); }
    .clinic-scrim {
      background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 42%,
        rgba(0, 0, 0, 0.16) 72%, rgba(0, 0, 0, 0) 100%);
    }
    .equip-item { grid-template-columns: 1fr; gap: clamp(18px, 4vh, 28px); }
    .equip-item:nth-child(even) .equip-media { order: 0; }   /* mídia sempre no topo */
    .equip-media { aspect-ratio: 4 / 5; }                     /* versão -mob (vertical) */
  }

  /* ---- acessibilidade: sem wipe/slide; tudo aparece com fade suave ---- */
  @media (prefers-reduced-motion: reduce) {
    .wipe, .wipe.wipe-left, .wipe.wipe-right, .wipe.wipe-up, .wipe.wipe-down,
    .wipe.is-in { clip-path: inset(0 0 0 0) !important; transition: opacity 0.5s ease; }
    .equip-title-line, .equip-media, .equip-item[data-side] .equip-media,
    .equip-name, .equip-desc {
      opacity: 1 !important; transform: none !important; filter: none !important;
      clip-path: none !important; transition: none !important;
    }
    .equip-caption::before { transform: scaleX(1); transition: none; }
    .equip-video { --parallax-y: 0px !important; --media-scale: 1 !important; filter: none !important; transition: none !important; }
    /* Clínica vira um hero ESTÁTICO de 100vh (sem palco fixado nem cross-fade):
       as imagens fazem crossfade por opacity; o texto some/aparece sem slide. */
    .clinic { height: 100vh; margin-top: 0; }
    .clinic-stage { position: relative; opacity: 1; }   /* sem scrub -> palco visível */
    .clinic-slide { transition: opacity 0.6s ease !important; }
    .clinic-title, .clinic-cap-line { transform: none !important; transition: opacity 0.5s ease; }
    .equip { margin-top: 0; }
  }