@charset "UTF-8";
/* ==================================================================
   NAVES ODONTOLOGIA — folha de estilo única
   ------------------------------------------------------------------
   Ordem:  1 fontes · 2 tokens · 3 reset · 4 tipografia · 5 layout
           6 movimento · 7 componentes · 8 seções · 9 páginas
           10 utilidades · 11 movimento reduzido
   ------------------------------------------------------------------
   Regra de ouro do dourado: dourado só existe sobre preto.
   Em fundo claro o acento é o terroso escuro.
   ================================================================== */


/* ==================================================================
   1. FONTES AUTO-HOSPEDADAS
   Variáveis (eixo wght), servidas de /fonts. Nenhuma chamada externa.
   ================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin.woff2?v=74db058f') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin-ext.woff2?v=a9e49ee5') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/jost-latin.woff2?v=d3fc5b41') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/jost-latin-ext.woff2?v=2b2ae750') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==================================================================
   2. TOKENS
   ================================================================== */

:root {
  /* --- paleta da marca --- */
  --preto:      #000000;
  --bege:       #CFCBC0;
  --bege-claro: #E8E5DF;
  --terroso:    #998C83;
  --ouro:       #C8A76A;
  --ouro-claro: #E3CF9E;
  --branco:     #FAF9F7;

  /* --- derivados legíveis ---
     O terroso puro sobre bege dá 2:1 de contraste e reprova em AA.
     Ele fica para bordas e detalhes; texto usa as duas tintas abaixo. */
  --tinta:         #171310;  /* títulos em fundo claro     — 15.9:1 sobre bege */
  --tinta-suave:   #3A322C;  /* corpo em fundo claro       —  7.7:1 sobre bege */
  --tinta-fraca:   #4E443C;  /* apoio em fundo claro       —  5.8:1 sobre bege */
  --preto-macio:   #0A0908;  /* topo das seções escuras, dá profundidade */

  --grad-ouro: linear-gradient(135deg, #8C6E3F 0%, #E3CF9E 45%, #C8A76A 100%);

  /* --- linhas --- */
  --linha:        rgba(78, 68, 60, .22);
  --linha-forte:  rgba(78, 68, 60, .38);
  --linha-escura: rgba(250, 249, 247, .14);
  --linha-ouro:   rgba(200, 167, 106, .32);

  /* --- foco: redefinido dentro dos blocos escuros --- */
  --foco: #4E443C;

  /* --- tipografia --- */
  --fonte-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --fonte-ui: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --t-corpo:    clamp(1.0625rem, .95rem + .35vw, 1.1875rem); /* 17px → 19px */
  --t-corpo-lg: clamp(1.125rem, 1rem + .5vw, 1.3125rem);
  --t-peq:      clamp(.9375rem, .9rem + .15vw, 1rem);
  --t-rotulo:   .75rem;

  --t-h1:   clamp(2.75rem, 1.6rem + 5.6vw, 5.75rem);
  --t-h2:   clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  --t-h3:   clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --t-h4:   clamp(1.125rem, 1.05rem + .4vw, 1.3125rem);
  --t-frase: clamp(1.75rem, 1.1rem + 3.1vw, 3.25rem); /* frases de encerramento */

  /* --- ritmo --- */
  --gutter:     clamp(1.25rem, 1rem + 3vw, 4rem);
  --largura:    76rem;
  --largura-texto: 40rem;
  --secao-y:    clamp(4.5rem, 3rem + 8vw, 8.5rem);
  --secao-y-min: clamp(3.5rem, 2.5rem + 5vw, 6rem);

  /* --- altura do cabeçalho: constante, nunca animada --- */
  --h-cab: 74px;

  /* --- movimento --- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: 620ms;
  --dur-rapida: 320ms;

  --sombra-card: 0 1px 2px rgba(23,19,16,.05), 0 8px 24px -12px rgba(23,19,16,.18);
  --sombra-card-alta: 0 2px 4px rgba(23,19,16,.06), 0 20px 40px -16px rgba(23,19,16,.28);
}

@media (min-width: 60em) {
  :root { --h-cab: 96px; }
}


/* ==================================================================
   3. RESET
   ================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-cab) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bege);
  color: var(--tinta-suave);
  font-family: var(--fonte-ui);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.menu-aberto { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg, video, iframe {
  display: block;
  max-width: 100%;
}
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--ouro); color: var(--preto); }


/* ==================================================================
   4. TIPOGRAFIA
   ================================================================== */

h1, h2, h3, .display {
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--tinta);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; }

h4 {
  font-family: var(--fonte-ui);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--tinta);
}

p { text-wrap: pretty; }
p + p { margin-top: 1.1em; }

strong, b { font-weight: 600; color: var(--tinta); }

/* Rótulo da marca — o "O D O N T O L O G I A" da logo. Use com parcimônia. */
.rotulo {
  display: block;
  font-family: var(--fonte-ui);
  font-size: var(--t-rotulo);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--tinta-fraca);
  margin-bottom: 1.25rem;
}
.rotulo--ouro { color: var(--ouro); }

.chamada {
  font-size: var(--t-corpo-lg);
  line-height: 1.65;
  color: var(--tinta-suave);
}

/* Frase grande de encerramento de seção */
.frase {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: var(--t-frase);
  line-height: 1.12;
  letter-spacing: -.022em;
  text-wrap: balance;
}


/* ==================================================================
   5. LAYOUT
   ================================================================== */

.env {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.env--estreito { max-width: 54rem; }

.texto { max-width: var(--largura-texto); }
.texto--centro { margin-inline: auto; text-align: center; }

/* --- bloco: a unidade de ritmo claro/escuro da página --- */
.bloco {
  position: relative;
  padding-block: var(--secao-y);
  isolation: isolate;
}
.bloco--curto { padding-block: var(--secao-y-min); }

.bloco--claro     { background: var(--bege); }
.bloco--claro-alt { background: var(--bege-claro); }

.bloco--escuro {
  /* gradiente curtíssimo no topo: a passagem de claro para escuro
     ganha profundidade sem custo de renderização */
  background: linear-gradient(180deg, var(--preto-macio) 0%, var(--preto) 22%);
  color: rgba(250, 249, 247, .78);
  --foco: var(--ouro-claro);
}
.bloco--escuro h1,
.bloco--escuro h2,
.bloco--escuro h3,
.bloco--escuro h4,
.bloco--escuro strong { color: var(--branco); }
.bloco--escuro .rotulo { color: var(--ouro); }
.bloco--escuro .chamada { color: rgba(250, 249, 247, .78); }

/* Fio dourado marcando a emenda entre um bloco claro e um escuro */
.bloco--costura::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--grad-ouro);
  opacity: .5;
}

/* --- cabeçalho de seção --- */
.cabeca {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.cabeca--centro { margin-inline: auto; text-align: center; }
.cabeca > p { margin-top: 1.25rem; }


/* ==================================================================
   6. SISTEMA DE MOVIMENTO
   Elementos com [data-reveal] ganham .is-visible ao entrar na tela.
   Só transform e opacity. Nada aqui provoca reflow.
   ================================================================== */

/* Sem will-change: numa página com ~40 elementos revelados ele criaria 40
   camadas de composição de uma vez, e é justamente o aparelho intermediário
   que paga essa conta. A própria transição promove a camada na hora certa. */
[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
[data-reveal="fade-up"]  { transform: translate3d(0, 28px, 0); }
[data-reveal="fade-in"]  { transform: none; }
[data-reveal="scale-in"] { transform: scale(.98); }
[data-reveal="stagger"]  { opacity: 1; transform: none; }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* stagger: os filhos entram em cascata; o passo vem do CSS, não do JS */
[data-reveal="stagger"] > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
[data-reveal="stagger"].is-visible > * { opacity: 1; transform: none; }
[data-reveal="stagger"] > *:nth-child(1)  { transition-delay: 0ms; }
[data-reveal="stagger"] > *:nth-child(2)  { transition-delay: 60ms; }
[data-reveal="stagger"] > *:nth-child(3)  { transition-delay: 120ms; }
[data-reveal="stagger"] > *:nth-child(4)  { transition-delay: 180ms; }
[data-reveal="stagger"] > *:nth-child(5)  { transition-delay: 240ms; }
[data-reveal="stagger"] > *:nth-child(6)  { transition-delay: 300ms; }
[data-reveal="stagger"] > *:nth-child(7)  { transition-delay: 360ms; }
[data-reveal="stagger"] > *:nth-child(8)  { transition-delay: 420ms; }
[data-reveal="stagger"] > *:nth-child(9)  { transition-delay: 480ms; }
[data-reveal="stagger"] > *:nth-child(10) { transition-delay: 540ms; }
[data-reveal="stagger"] > *:nth-child(11) { transition-delay: 600ms; }
[data-reveal="stagger"] > *:nth-child(12) { transition-delay: 660ms; }

/* draw-line: o traço se desenha. --comprimento vem do getTotalLength() */
[data-reveal="draw-line"] { opacity: 1; transform: none; }
[data-reveal="draw-line"] path:not(.mono-cheio),
[data-reveal="draw-line"] line {
  stroke-dasharray: var(--comprimento, 1400);
  stroke-dashoffset: var(--comprimento, 1400);
  transition: stroke-dashoffset 1200ms var(--ease);
}
[data-reveal="draw-line"] path:nth-child(2):not(.mono-cheio) { transition-delay: 260ms; }
[data-reveal="draw-line"].is-visible path:not(.mono-cheio),
[data-reveal="draw-line"].is-visible line { stroke-dashoffset: 0; }

/* Monograma vetorizado: o contorno se desenha e o preenchimento entra
   atrás dele, com atraso, como tinta assentando no traço. */
[data-reveal="draw-line"] .mono-cheio {
  opacity: 0;
  transition: opacity 700ms var(--ease) 780ms;
}
[data-reveal="draw-line"].is-visible .mono-cheio { opacity: 1; }

/* Sem JavaScript, tudo nasce visível. Nada depende de animação. */
.sem-js [data-reveal],
.sem-js [data-reveal="stagger"] > * { opacity: 1; transform: none; }


/* ==================================================================
   7. COMPONENTES
   ================================================================== */

/* ---------- 7.1 Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.0625rem 1.875rem;
  border-radius: 2px;
  border: 1px solid transparent;
  font-family: var(--fonte-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  transition:
    transform var(--dur-rapida) var(--ease),
    box-shadow var(--dur-rapida) var(--ease),
    background-color var(--dur-rapida) var(--ease),
    border-color var(--dur-rapida) var(--ease),
    opacity var(--dur-rapida) var(--ease);
}
.btn svg { flex: none; width: 1.25em; height: 1.25em; }

/* dourado — só sobre preto */
.btn--ouro {
  background-image: var(--grad-ouro);
  color: #14100A;
  font-weight: 600;
  box-shadow: 0 8px 28px -14px rgba(200, 167, 106, .9);
}
.btn--ouro:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(200, 167, 106, .95); }
.btn--ouro:active { transform: translateY(0); }

/* contorno claro — sobre preto */
.btn--contorno {
  border-color: rgba(250, 249, 247, .45);
  color: var(--branco);
}
.btn--contorno:hover {
  background-color: rgba(250, 249, 247, .1);
  border-color: rgba(250, 249, 247, .8);
  transform: translateY(-2px);
}

/* sólido escuro — o primário das seções claras */
.btn--tinta {
  background-color: var(--preto);
  color: var(--branco);
}
.btn--tinta:hover { transform: translateY(-2px); box-shadow: var(--sombra-card-alta); }

/* contorno escuro — sobre bege */
.btn--contorno-tinta {
  border-color: var(--linha-forte);
  color: var(--tinta);
}
.btn--contorno-tinta:hover {
  background-color: rgba(23, 19, 16, .06);
  border-color: var(--tinta);
  transform: translateY(-2px);
}

.btn--grande { padding: 1.25rem 2.5rem; font-size: 1.0625rem; }
.btn--bloco { width: 100%; }

/* link com seta */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-peq);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta);
  border-bottom: 1px solid var(--linha-forte);
  padding-bottom: .3rem;
  transition: color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}
.link-seta svg { width: 1em; height: 1em; transition: transform var(--dur-rapida) var(--ease); }
.link-seta:hover { border-color: var(--tinta); }
.link-seta:hover svg { transform: translateX(4px); }
.bloco--escuro .link-seta { color: var(--ouro); border-color: var(--linha-ouro); }
.bloco--escuro .link-seta:hover { color: var(--ouro-claro); border-color: var(--ouro); }

.btn-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
}
.btn-grupo--centro { justify-content: center; }


/* ---------- 7.2 Cabeçalho fixo ---------- */

.cabecalho {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 90;
  height: var(--h-cab);
  pointer-events: none;
}

/* O fundo é uma camada própria: encolher = escalar esta camada.
   Nada de animar height, que causaria reflow. */
.cabecalho__fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  transform-origin: top center;
  transition:
    transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.cabecalho__fundo::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--grad-ouro);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.cabecalho__barra {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--h-cab);
  pointer-events: auto;
  transition: transform var(--dur) var(--ease);
}

/* estado rolado: o fundo encolhe, a barra sobe, a logo diminui */
.cabecalho.is-rolado .cabecalho__fundo {
  background: rgba(0, 0, 0, .9);
  transform: scaleY(.72);
}
.cabecalho.is-rolado .cabecalho__fundo::after { opacity: .55; }
.cabecalho.is-rolado .cabecalho__barra { transform: translateY(-13px); }
.cabecalho.is-rolado .cabecalho__logo { transform: scale(.86); }

@media (max-width: 59.99em) {
  .cabecalho.is-rolado .cabecalho__fundo { transform: scaleY(.86); }
  .cabecalho.is-rolado .cabecalho__barra { transform: translateY(-5px); }
}

.cabecalho__logo {
  flex: none;
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
/* A marca é uma didone de traço capilar: abaixo de ~55px as hastes finas
   desaparecem na renderização. Por isso ela é maior aqui do que uma logo
   de traço grosso pediria. */
.cabecalho__logo img {
  width: auto;
  height: clamp(40px, 5.2vw, 62px);
}

.cabecalho__dir {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 2rem);
}

.nav-principal ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.125rem);
}
.nav-principal a {
  position: relative;
  display: block;
  padding-block: .5rem;
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: rgba(250, 249, 247, .82);
  transition: color var(--dur-rapida) var(--ease);
}
.nav-principal a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .125rem;
  width: 100%;
  height: 1px;
  background: var(--ouro);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-rapida) var(--ease);
}
.nav-principal a:hover { color: var(--branco); }
.nav-principal a:hover::after,
.nav-principal a[aria-current="page"]::after { transform: scaleX(1); }
.nav-principal a[aria-current="page"] { color: var(--ouro); }

.cabecalho .btn { padding: .8125rem 1.375rem; font-size: .9375rem; }

/* botão hambúrguer */
.hamburguer {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-right: -10px;
  color: var(--branco);
}
.hamburguer__traco {
  display: block;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-rapida) var(--ease), opacity var(--dur-rapida) var(--ease);
}
.hamburguer__traco + .hamburguer__traco { margin-top: 6px; }

.hamburguer[aria-expanded="true"] .hamburguer__traco:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburguer[aria-expanded="true"] .hamburguer__traco:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] .hamburguer__traco:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 59.99em) {
  .nav-principal { display: none; }
  .hamburguer { display: grid; }
  /* no mobile o botão vira só o ícone, mas o texto para leitor de tela fica */
  .cabecalho .btn > span:not(.so-leitor) { display: none; }
  .cabecalho .btn { padding: .75rem; }
  .cabecalho .btn svg { width: 1.375rem; height: 1.375rem; }
}


/* ---------- 7.3 Menu mobile em painel de tela cheia ---------- */

.menu-movel {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  background: var(--preto);
  color: var(--branco);
  --foco: var(--ouro-claro);
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-movel.is-aberto {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition: transform var(--dur) var(--ease), visibility 0s;
}

.menu-movel__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--h-cab);
  flex: none;
}
.menu-movel__topo img { width: auto; height: 44px; }
.menu-movel__fechar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-right: -10px;
  color: var(--branco);
}
.menu-movel__fechar svg { width: 22px; height: 22px; }

.menu-movel__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-block: clamp(.75rem, 3vh, 2rem) 1.5rem;
}

.menu-movel__nav li + li { border-top: 1px solid var(--linha-escura); }
.menu-movel__nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(.75rem, 1.9vh, 1.125rem);
  font-family: var(--fonte-display);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--branco);
}
.menu-movel__nav a[aria-current="page"] { color: var(--ouro); }
.menu-movel__nav .indice {
  font-family: var(--fonte-ui);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--ouro);
}

.menu-movel__pe {
  margin-top: auto;
  padding-top: 1.5rem;
}
.menu-movel__pe .btn { width: 100%; }
.menu-movel__contato {
  margin-top: 1rem;
  font-size: .875rem;
  line-height: 1.7;
  color: rgba(250, 249, 247, .68);
}
.menu-movel__contato a { border-bottom: 1px solid var(--linha-ouro); }


/* ---------- 7.4 Botão flutuante de WhatsApp ---------- */

.zap-flutua {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-image: var(--grad-ouro);
  color: #14100A;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.9);
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}
.zap-flutua.is-visivel {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s;
}
.zap-flutua svg { width: 30px; height: 30px; }
.zap-flutua:hover { transform: scale(1.06); }

/* anel de pulso a cada 8s — só transform e opacity */
.zap-flutua::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ouro);
  opacity: 0;
  pointer-events: none;
}
.zap-flutua.is-visivel::before {
  animation: pulso-zap 8s var(--ease) infinite;
}
@keyframes pulso-zap {
  0%   { opacity: .75; transform: scale(1); }
  14%  { opacity: 0;   transform: scale(1.75); }
  100% { opacity: 0;   transform: scale(1.75); }
}

/* o flutuante some quando o menu mobile está aberto */
body.menu-aberto .zap-flutua { opacity: 0; visibility: hidden; }


/* ---------- 7.5 Pular para o conteúdo ---------- */

.pular {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 200;
  padding: .875rem 1.25rem;
  background: var(--preto);
  color: var(--branco);
  border-radius: 2px;
  font-size: .9375rem;
  font-weight: 500;
  transform: translateY(-150%);
  transition: transform var(--dur-rapida) var(--ease);
}
.pular:focus { transform: translateY(0); }


/* ---------- 7.6 Monograma como marca d'água ---------- */

.marca-dagua {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  color: var(--ouro);
  opacity: .05;
}
/* altura automática: o SVG se dimensiona pela própria viewBox, então
   trocar o monograma por outro de proporção diferente não quebra nada */
.marca-dagua svg { width: 100%; height: auto; }

.marca-dagua--direita {
  top: 50%;
  right: -4%;
  width: clamp(260px, 36vw, 520px);
  transform: translateY(-50%);
}
.marca-dagua--centro {
  top: 50%;
  left: 50%;
  width: clamp(280px, 34vw, 460px);
  transform: translate(-50%, -50%);
}

/* separador discreto entre blocos */
.separador-monograma {
  display: grid;
  place-items: center;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  color: var(--terroso);
}
.separador-monograma svg { width: 30px; height: auto; opacity: .6; }


/* ---------- 7.7 Ícones em linha fina ---------- */

.icone {
  width: 2rem;
  height: 2rem;
  flex: none;
  stroke-width: 1.1;
  color: var(--tinta-fraca);
}
.bloco--escuro .icone { color: var(--ouro); }
.icone--g { width: 2.5rem; height: 2.5rem; }
.icone--inline {
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  vertical-align: -.14em;
  margin-right: .15rem;
}


/* ---------- 7.8 Imagem com proporção fixa (zero layout shift) ---------- */

.moldura {
  position: relative;
  overflow: hidden;
  background: var(--bege-claro);
  border-radius: 2px;
}
.moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moldura--paisagem { aspect-ratio: 16 / 9; }
.moldura--retrato  { aspect-ratio: 3 / 4; }
.moldura--quadrado { aspect-ratio: 1 / 1; }


/* ==================================================================
   8. SEÇÕES DA HOME
   ================================================================== */

/* ---------- 8.1 Herói ---------- */

.heroi {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--h-cab) + 2rem);
  padding-bottom: clamp(4.5rem, 12vh, 8rem);
  background: var(--preto);
  color: var(--branco);
  overflow: hidden;
  isolation: isolate;
  --foco: var(--ouro-claro);
}

.heroi__midia {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.heroi__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.heroi__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.58) 45%, rgba(0,0,0,.45) 100%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 62%);
}

/* Sem transform aqui: a regra .is-visible do sistema de movimento
   zera qualquer transform do elemento revelado. O posicionamento usa
   só top/right para não brigar com ela. */
.heroi__monograma {
  position: absolute;
  z-index: -1;
  top: 10%;
  right: 6%;
  width: clamp(170px, 26vw, 380px);
  color: var(--ouro);
  opacity: .10;
  pointer-events: none;
}
.heroi__monograma svg { width: 100%; height: auto; }

.heroi__conteudo { position: relative; max-width: 46rem; }

.heroi h1 {
  color: var(--branco);
  font-weight: 600;
  letter-spacing: -.028em;
  max-width: 15ch;
}
.heroi__sub {
  max-width: 34rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: var(--t-corpo-lg);
  line-height: 1.6;
  color: rgba(250, 249, 247, .82);
}
.heroi .btn-grupo { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* indicador de rolagem */
.heroi__rolar {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3vh, 2rem);
  display: grid;
  place-items: center;
  gap: .625rem;
  transform: translateX(-50%);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(250, 249, 247, .5);
}
.heroi__rolar-linha {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, var(--ouro), transparent);
  transform-origin: top center;
  animation: rolar 2.6s var(--ease) infinite;
}
@keyframes rolar {
  0%, 100% { transform: scaleY(.35); opacity: .45; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* Herói sem fotografia: em vez de um retângulo vazio esperando imagem, um
   fundo desenhado. Também deixa a página mais leve, porque não há imagem
   nenhuma para baixar — o LCP passa a ser o próprio título. */
.heroi--sem-foto {
  background:
    radial-gradient(110% 80% at 76% 28%, rgba(200, 167, 106, .13) 0%, transparent 58%),
    radial-gradient(85% 65% at 8% 92%, rgba(153, 140, 131, .10) 0%, transparent 62%),
    linear-gradient(180deg, #0C0B09 0%, #000 62%);
}
.heroi--sem-foto .heroi__monograma { opacity: .16; }

/* Cartão da Dra. Luciana enquanto o retrato não chega: o texto ocupa tudo,
   sem deixar meia coluna vazia. */
@media (min-width: 56em) {
  .equipe__destaque--so-texto { grid-template-columns: 1fr; }
}
.equipe__destaque--so-texto { max-width: 52rem; }

/* Blocos de tecnologia sem foto: uma coluna, texto mais largo. */
@media (min-width: 60em) {
  .tec--so-texto { grid-template-columns: 1fr; }
}
.tec--so-texto .tec__texto { max-width: 46rem; }
.tec--so-texto + .tec--so-texto { padding-top: clamp(1rem, 2vw, 2rem); }

@media (max-width: 47.99em) {
  .heroi { align-items: center; }
  .heroi__rolar { display: none; }
  /* alvo de toque cheio: o botão é o único destino de conversão */
  .heroi .btn-grupo { flex-direction: column; align-items: stretch; }
  .heroi .btn-grupo .btn { width: 100%; }
}


/* ---------- 8.2 Faixa de confiança ---------- */

.confianca { background: var(--bege-claro); }
/* A grade fica num filho do .env: se o fundo de linha ficasse no .env,
   ele pintaria também o gutter lateral. */
.confianca__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}
.confianca__item {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(.875rem, 1.4vw, 1.25rem);
  background: var(--bege-claro);
}
.confianca__item .icone { width: 1.75rem; height: 1.75rem; margin-top: .1rem; }
.confianca__item strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}
.confianca__item span {
  display: block;
  margin-top: .25rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--tinta-fraca);
}

@media (min-width: 60em) {
  .confianca__grade { grid-template-columns: repeat(4, 1fr); }
}


/* ---------- 8.3 Diferenciais ---------- */

.diferenciais__lista { display: grid; gap: 1px; background: var(--linha-escura); }

.diferencial {
  display: grid;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  background: var(--preto);
}
.diferencial__num {
  font-family: var(--fonte-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  background-image: var(--grad-ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.diferencial h3 { margin-bottom: .875rem; }
.diferencial p { max-width: 46rem; }

@media (min-width: 48em) {
  .diferencial { grid-template-columns: 8rem 1fr; align-items: start; }
}


/* ---------- 8.4 Tratamentos ---------- */

.tratamentos__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1.6vw, 1.5rem);
}
@media (min-width: 40em) { .tratamentos__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .tratamentos__grade { grid-template-columns: repeat(3, 1fr); } }

.trat {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.5vw, 2.125rem);
  background: var(--bege-claro);
  border: 1px solid var(--linha);
  border-radius: 2px;
  transition:
    transform var(--dur-rapida) var(--ease),
    box-shadow var(--dur-rapida) var(--ease),
    border-color var(--dur-rapida) var(--ease);
}
.trat:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-card-alta);
  border-color: var(--linha-forte);
}
.trat h3 { font-size: var(--t-h3); }
.trat p { font-size: var(--t-peq); line-height: 1.65; }
.trat .link-seta { margin-top: auto; align-self: flex-start; }

/* o carro-chefe: largura dupla, fundo preto, borda em gradiente dourado */
.trat--destaque {
  position: relative;
  background: var(--preto);
  color: rgba(250, 249, 247, .78);
  border-color: transparent;
  --foco: var(--ouro-claro);
}
.trat--destaque::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 2px;
  background-image: var(--grad-ouro);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.trat--destaque h3 { color: var(--branco); }
.trat--destaque .icone { color: var(--ouro); }
.trat--destaque:hover { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7); }

@media (min-width: 40em) { .trat--destaque { grid-column: span 2; } }

/* cartão final de conversão, fecha a última linha da grade */
.trat--convite {
  justify-content: center;
  gap: 1.25rem;
  background: var(--preto);
  border-color: transparent;
  color: rgba(250, 249, 247, .78);
  --foco: var(--ouro-claro);
}
.trat--convite:hover { transform: none; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55); }
.trat--convite h3 { color: var(--branco); }
.trat--convite .btn { align-self: flex-start; }
@media (min-width: 40em) { .trat--convite { grid-column: span 2; } }


/* ---------- 8.5 Resultados: antes e depois ---------- */

.aviso-legal {
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem);
  border-left: 2px solid var(--terroso);
  background: rgba(255, 255, 255, .38);
  font-size: var(--t-peq);
  line-height: 1.65;
  color: var(--tinta-suave);
}
.bloco--escuro .aviso-legal {
  background: rgba(250, 249, 247, .05);
  border-left-color: var(--ouro);
  color: rgba(250, 249, 247, .78);
}

.casos {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 56em) { .casos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80em) { .casos--tres { grid-template-columns: repeat(3, 1fr); } }

.caso {
  display: flex;
  flex-direction: column;
  background: var(--bege-claro);
  border: 1px solid var(--linha);
  border-radius: 2px;
  overflow: hidden;
}
.caso__corpo { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.caso__titulo {
  font-family: var(--fonte-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tinta);
}
.caso__texto {
  margin-top: .75rem;
  font-size: var(--t-peq);
  line-height: 1.65;
}
.caso__variacao {
  margin-top: .75rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--tinta-fraca);
}
/* A linha de crédito é exigência do CFO: legível, nunca em letra miúda. */
.caso__credito {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linha);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tinta);
}
.caso__credito span { display: block; font-weight: 400; color: var(--tinta-fraca); }

/* --- comparador antes/depois --- */

/* Estado base, sem JavaScript: as duas fotos lado a lado. */
.ba {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--linha);
  touch-action: pan-y;
}
.ba__painel { position: relative; margin: 0; }
.ba__painel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #9A9A9A;
}
.ba__etiqueta {
  position: absolute;
  left: .75rem;
  top: .75rem;
  padding: .3125rem .625rem;
  border-radius: 2px;
  background: rgba(0, 0, 0, .78);
  color: #FFFFFF;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ba__barra, .ba__punho { display: none; }

/* Estado com JavaScript: sobreposição arrastável. */
.ba.is-pronto {
  display: block;
  gap: 0;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.ba.is-pronto .ba__painel { position: absolute; inset: 0; }
.ba.is-pronto .ba__painel--antes { position: relative; }
.ba.is-pronto .ba__painel img { height: 100%; aspect-ratio: auto; }

/* o painel "depois" é recortado — clip-path não provoca reflow */
.ba.is-pronto .ba__painel--depois {
  clip-path: inset(0 0 0 calc(var(--pos, 50) * 1%));
}
.ba.is-pronto .ba__etiqueta--depois { left: auto; right: .75rem; }

/* A barra tem a largura do comparador e mostra o fio na borda esquerda;
   assim o translateX em % desloca pela largura do comparador. */
.ba.is-pronto .ba__barra {
  display: block;
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 100%;
  border-left: 2px solid var(--branco);
  transform: translate3d(calc(var(--pos, 50) * 1%), 0, 0);
  pointer-events: none;
}
.ba.is-pronto .ba__punho {
  display: grid;
  place-items: center;
  position: absolute;
  left: -23px;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 2px solid var(--branco);
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--branco);
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}
.ba.is-pronto .ba__punho svg { width: 18px; height: 18px; }
.ba.is-pronto .ba__punho:focus-visible { outline: 3px solid var(--ouro-claro); outline-offset: 3px; }

.ba__ajuda {
  margin: 0;
  padding: .625rem clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--bege);
  border-top: 1px solid var(--linha);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--tinta-fraca);
}


/* ---------- 8.6 A história: linha do tempo ---------- */

.historia .env { max-width: 52rem; }

.linha-tempo {
  position: relative;
  padding-left: clamp(2rem, 6vw, 3.5rem);
}
/* trilho */
.linha-tempo::before {
  content: '';
  position: absolute;
  left: 0;
  top: .75rem;
  bottom: 4rem;
  width: 1px;
  background: rgba(250, 249, 247, .13);
}
/* fio dourado que cresce com a rolagem */
.linha-tempo__fio {
  position: absolute;
  left: 0;
  top: .75rem;
  bottom: 4rem;
  width: 1px;
  background: var(--grad-ouro);
  transform: scaleY(var(--progresso, 0));
  transform-origin: top center;
}
.linha-tempo__fio::after {
  content: '';
  position: absolute;
  left: -2.5px;
  bottom: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ouro-claro);
  box-shadow: 0 0 12px 2px rgba(227, 207, 158, .6);
}

.marco { position: relative; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.marco::before {
  content: '';
  position: absolute;
  left: calc(clamp(2rem, 6vw, 3.5rem) * -1);
  top: .6rem;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border: 1px solid var(--ouro);
  border-radius: 50%;
  background: var(--preto);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.marco.is-visible::before { background: var(--ouro); transform: scale(1.15); }

.marco__ano {
  display: block;
  font-family: var(--fonte-ui);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: .625rem;
}
.marco h3 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); margin-bottom: 1rem; }
.marco p { font-size: var(--t-corpo-lg); line-height: 1.62; }
.marco em { font-style: italic; color: var(--branco); }

.historia__fecho {
  margin-top: clamp(1rem, 3vw, 2rem);
  text-align: center;
}
.historia__fecho .frase {
  background-image: var(--grad-ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  max-width: 18ch;
  margin-inline: auto;
}


/* ---------- 8.7 Equipe ---------- */

.equipe__destaque {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bege-claro);
  border: 1px solid var(--linha);
  border-radius: 2px;
}
@media (min-width: 56em) {
  .equipe__destaque { grid-template-columns: minmax(0, 22rem) 1fr; align-items: stretch; }
  .equipe__destaque .moldura { height: 100%; }
}

.equipe__nome { margin-bottom: .375rem; }
.equipe__cargo {
  font-size: var(--t-peq);
  letter-spacing: .04em;
  color: var(--tinta-fraca);
  margin-bottom: 1.5rem;
}
.equipe__fala {
  position: relative;
  font-family: var(--fonte-display);
  font-size: clamp(1.3125rem, 1rem + 1.3vw, 1.75rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinta);
  border-left: 2px solid var(--terroso);
  padding-left: clamp(1rem, 2vw, 1.5rem);
}

.equipe__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.equipe__card { text-align: left; }
.equipe__card .moldura { margin-bottom: 1rem; }
.equipe__card h4 { margin-bottom: .25rem; }
.equipe__card p { font-size: .9375rem; color: var(--tinta-fraca); }


/* ---------- 8.8 Acolhimento ---------- */

.acolhimento__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.depo {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: rgba(250, 249, 247, .04);
  border: 1px solid var(--linha-escura);
  border-radius: 2px;
}
.depo__aspas {
  font-family: var(--fonte-display);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: .6;
  color: var(--ouro);
  opacity: .55;
}
.depo blockquote {
  font-size: var(--t-corpo);
  line-height: 1.62;
  color: rgba(250, 249, 247, .84);
}
.depo figcaption {
  margin-top: auto;
  padding-top: .5rem;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ouro);
}


/* ---------- 8.9 Localização ---------- */

.local__grade {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 56em) {
  .local__grade { grid-template-columns: minmax(0, 24rem) 1fr; }
}

.local__dados { display: grid; gap: 1.75rem; }
.local__bloco h3 {
  font-family: var(--fonte-ui);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--tinta);
  margin-bottom: .5rem;
}
.local__bloco p { font-size: var(--t-peq); line-height: 1.7; }
.local__bloco a { border-bottom: 1px solid var(--linha-forte); transition: border-color var(--dur-rapida) var(--ease); }
.local__bloco a:hover { border-color: var(--tinta); }

/* --- mapa sob demanda ---
   A prévia é uma imagem de verdade do bairro, com o pino da clínica. O
   iframe do Google só entra depois do clique: ele pesa mais de 1 MB,
   roda script de terceiro e grava cookie em quem só passou pela página. */

.local__mapa { display: grid; gap: 1rem; }

.mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 2px;
  background: var(--bege-claro);
}
@media (min-width: 56em) { .mapa { aspect-ratio: 16 / 10; } }

.mapa img, .mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

/* o gatilho cobre o mapa inteiro: alvo grande, um toque só no celular */
.mapa__gatilho {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;      /* embaixo, para não tapar o pino do mapa */
  justify-items: center;
  gap: .625rem;
  padding: 1rem 1rem 1.25rem;
  text-align: center;
  cursor: pointer;
  background: rgba(250, 249, 247, 0);
  transition: background-color var(--dur-rapida) var(--ease);
  --foco: var(--tinta);
}
.mapa__gatilho:hover { background: rgba(250, 249, 247, .22); }
.mapa__gatilho:focus-visible { outline-offset: -4px; }

.mapa__rotulo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9375rem 1.5rem;
  border-radius: 2px;
  background: var(--preto);
  color: var(--branco);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
  transition: transform var(--dur-rapida) var(--ease),
              box-shadow var(--dur-rapida) var(--ease);
}
.mapa__rotulo svg { width: 1.2em; height: 1.2em; color: var(--ouro); flex: none; }
.mapa__gatilho:hover .mapa__rotulo {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .6);
}

.mapa__nota {
  padding: .3125rem .625rem;
  border-radius: 2px;
  background: rgba(250, 249, 247, .9);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* depois do clique o gatilho some e o iframe fica com a área toda */
.mapa.is-carregado .mapa__gatilho,
.mapa.is-carregado .mapa__capa { display: none; }

.mapa__rotas { display: flex; flex-wrap: wrap; gap: .75rem; }
.mapa__rotas .btn { flex: 1 1 12rem; }


/* ---------- 8.10 Chamada final ---------- */

.final { text-align: center; }
.final .frase { max-width: 20ch; margin-inline: auto; color: var(--branco); }
.final p { max-width: 34rem; margin: 1.5rem auto 0; font-size: var(--t-corpo-lg); }
.final .btn { margin-top: clamp(2rem, 4vw, 2.75rem); }


/* ---------- 8.11 Rodapé ---------- */

.rodape {
  background: var(--preto);
  color: rgba(250, 249, 247, .68);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem;
  font-size: var(--t-peq);
  --foco: var(--ouro-claro);
}
.rodape__topo {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 40em) { .rodape__topo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .rodape__topo { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.rodape__marca img { width: auto; height: 72px; margin-bottom: 1.5rem; }
.rodape__marca p { max-width: 24rem; line-height: 1.7; }

.rodape h2 {
  font-family: var(--fonte-ui);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 1.125rem;
}
.rodape li + li { margin-top: .625rem; }
.rodape a { transition: color var(--dur-rapida) var(--ease); }
.rodape a:hover { color: var(--branco); }

.rodape__redes { display: flex; gap: .75rem; margin-top: 1.25rem; }
.rodape__redes a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--linha-escura);
  border-radius: 50%;
  transition: border-color var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.rodape__redes a:hover { border-color: var(--ouro); color: var(--ouro); }
.rodape__redes svg { width: 19px; height: 19px; }

/* bloco legal — exigência do Código de Ética Odontológica, toda página */
.rodape__legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--linha-escura);
  display: grid;
  gap: 1.25rem;
  font-size: .8125rem;
  line-height: 1.75;
  color: rgba(250, 249, 247, .58);
}
@media (min-width: 64em) {
  .rodape__legal { grid-template-columns: 2fr 1fr; align-items: start; }
}
.rodape__legal strong { color: rgba(250, 249, 247, .82); font-weight: 500; }
.rodape__rt { color: rgba(250, 249, 247, .82); }
.rodape__creditos { font-size: .75rem; color: rgba(250, 249, 247, .58); }
@media (min-width: 64em) { .rodape__creditos { text-align: right; } }


/* ==================================================================
   9. PÁGINAS INTERNAS
   ================================================================== */

/* ---------- 9.1 Topo de página interna ---------- */

.topo-pagina {
  position: relative;
  padding-top: calc(var(--h-cab) + clamp(3.5rem, 8vw, 6.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, #0A0908 0%, #000 60%);
  color: rgba(250, 249, 247, .78);
  overflow: hidden;
  isolation: isolate;
  --foco: var(--ouro-claro);
}
.topo-pagina h1 { color: var(--branco); max-width: 18ch; }
.topo-pagina p { max-width: 40rem; margin-top: 1.5rem; font-size: var(--t-corpo-lg); }

.migalhas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.75rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 249, 247, .5);
}
.migalhas a { transition: color var(--dur-rapida) var(--ease); }
.migalhas a:hover { color: var(--ouro); }
.migalhas li[aria-current] { color: var(--ouro); }
.migalhas li + li::before { content: '·'; margin-right: .5rem; }
.migalhas ol { display: contents; }

.tela-erro {
  display: flex;
  align-items: center;
  min-height: 72vh;
  min-height: 72svh;
}
.tela-erro h1 { max-width: 14ch; }


/* ---------- 9.2 Índice âncora da página de tratamentos ---------- */

.indice-trat {
  position: sticky;
  top: calc(var(--h-cab) + .5rem);
  z-index: 20;
  padding-block: .875rem;
  background: rgba(232, 229, 223, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.indice-trat ul {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.indice-trat a {
  display: block;
  white-space: nowrap;
  padding: .5rem .875rem;
  border: 1px solid var(--linha);
  border-radius: 2px;
  font-size: .875rem;
  color: var(--tinta-suave);
  transition: background-color var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.indice-trat a:hover { background: var(--preto); color: var(--branco); border-color: var(--preto); }


/* ---------- 9.2b Página A Clínica ---------- */

.texto-largo {
  max-width: 44rem;
  font-size: var(--t-corpo-lg);
  line-height: 1.68;
}

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.pilar {
  display: grid;
  gap: .875rem;
  align-content: start;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha-forte);
}
.bloco--escuro .pilar { border-top-color: var(--linha-ouro); }
.pilar h3 { font-size: var(--t-h3); }
.pilar p { font-size: var(--t-peq); line-height: 1.65; }

/* grade de fotos do espaço */
.galeria-espacos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 60em) {
  .galeria-espacos { grid-template-columns: repeat(4, 1fr); }
  .espaco--largo { grid-column: span 2; grid-row: span 2; }
  .espaco--largo .moldura { height: 100%; aspect-ratio: auto; min-height: 20rem; }
}
.espaco figcaption {
  margin-top: .75rem;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.bloco--escuro .espaco figcaption { color: var(--ouro); }

/* blocos de tecnologia, alternando o lado da foto */
.tec-lista { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.tec { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 60em) {
  .tec { grid-template-columns: repeat(2, 1fr); }
  .tec:nth-child(even) .tec__midia { order: 2; }
}
.tec__texto { display: grid; gap: 1rem; align-content: start; }
.tec__texto h3 { font-size: var(--t-h3); }
.tec__texto p { font-size: var(--t-peq); line-height: 1.68; }
.tec__texto p + p { margin-top: 0; }


/* ---------- 9.3 Seção de tratamento ---------- */

.trat-secao { scroll-margin-top: calc(var(--h-cab) + 4.5rem); }
.trat-secao + .trat-secao { border-top: 1px solid var(--linha); }
.bloco--escuro .trat-secao + .trat-secao { border-top-color: var(--linha-escura); }

.trat-secao__grade {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 60em) {
  .trat-secao__grade { grid-template-columns: minmax(0, 26rem) 1fr; }
}
.trat-secao__def { display: grid; gap: 1.5rem; }
.trat-secao__def h3 {
  font-family: var(--fonte-ui);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-bottom: .5rem;
}
.bloco--escuro .trat-secao__def h3 { color: var(--ouro); }
.trat-secao__def p { font-size: var(--t-peq); line-height: 1.7; }
.trat-secao .btn { margin-top: .5rem; align-self: flex-start; }


/* ---------- 9.4 Filtro da galeria de resultados (CSS puro) ---------- */

.filtro__opcoes { margin-bottom: clamp(2rem, 4vw, 3rem); }
.filtro__radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.filtro__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.filtro__opcoes label {
  display: block;
  padding: .625rem 1.125rem;
  border: 1px solid var(--linha);
  border-radius: 2px;
  font-size: .875rem;
  letter-spacing: .03em;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}
.filtro__opcoes label:hover { border-color: var(--tinta); }

/* marcado = pílula preenchida; foco no rádio escondido desenha o anel na etiqueta */
#f-todos:checked        ~ .filtro__opcoes label[for="f-todos"],
#f-implantes:checked    ~ .filtro__opcoes label[for="f-implantes"],
#f-proteses:checked     ~ .filtro__opcoes label[for="f-proteses"],
#f-estetica:checked     ~ .filtro__opcoes label[for="f-estetica"],
#f-ortodontia:checked   ~ .filtro__opcoes label[for="f-ortodontia"] {
  background: var(--preto);
  border-color: var(--preto);
  color: var(--branco);
}
/* o rádio está escondido: o anel de foco precisa aparecer na etiqueta */
#f-todos:focus-visible      ~ .filtro__opcoes label[for="f-todos"],
#f-implantes:focus-visible  ~ .filtro__opcoes label[for="f-implantes"],
#f-proteses:focus-visible   ~ .filtro__opcoes label[for="f-proteses"],
#f-estetica:focus-visible   ~ .filtro__opcoes label[for="f-estetica"],
#f-ortodontia:focus-visible ~ .filtro__opcoes label[for="f-ortodontia"] {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

#f-implantes:checked  ~ .casos .caso:not([data-especialidade~="implantes"]),
#f-proteses:checked   ~ .casos .caso:not([data-especialidade~="proteses"]),
#f-estetica:checked   ~ .casos .caso:not([data-especialidade~="estetica"]),
#f-ortodontia:checked ~ .casos .caso:not([data-especialidade~="ortodontia"]) {
  display: none;
}

.filtro__vazio { display: none; }


/* foto de arquivo dentro de um marco da linha do tempo */
.marco__foto { margin-top: 1.75rem; max-width: 34rem; }
.marco__foto figcaption {
  margin-top: .625rem;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250, 249, 247, .6);
}


/* ---------- 9.5 Blog ---------- */

.posts {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.post-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--bege-claro);
  border: 1px solid var(--linha);
  border-radius: 2px;
  transition: transform var(--dur-rapida) var(--ease), box-shadow var(--dur-rapida) var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-card-alta); }
.post-card time { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); }
.post-card p { font-size: var(--t-peq); }
.post-card .link-seta { margin-top: auto; align-self: flex-start; }

.artigo { max-width: 42rem; margin-inline: auto; }
.artigo h2 { margin-top: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: 1rem; }
.artigo h3 { margin-top: 2rem; margin-bottom: .75rem; }
.artigo p { margin-top: 1.1em; }
.artigo ul { margin-top: 1.1em; display: grid; gap: .625rem; }
.artigo ul li { position: relative; padding-left: 1.25rem; }
.artigo ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .7em;
  width: 5px; height: 1px;
  background: var(--terroso);
}
.artigo a:not(.btn):not(.link-seta) { border-bottom: 1px solid var(--linha-forte); }


/* ==================================================================
   10. UTILIDADES
   ================================================================== */

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pilha { display: grid; }
.pilha--g  { gap: clamp(1.5rem, 3vw, 2.5rem); }
.pilha--m  { gap: 1.25rem; }

.centro { text-align: center; }
.mt-g { margin-top: clamp(2.5rem, 5vw, 4rem); }
.mt-m { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* bloco de aviso para o gestor do site, visível só em desenvolvimento */
.nota-interna {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border: 1px dashed var(--linha-forte);
  border-radius: 2px;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--tinta-fraca);
  background: rgba(255, 255, 255, .3);
}
.bloco--escuro .nota-interna {
  border-color: var(--linha-escura);
  background: rgba(250, 249, 247, .04);
  color: rgba(250, 249, 247, .6);
}


/* ==================================================================
   11. MOVIMENTO REDUZIDO
   Desliga todo movimento. Obrigatório: parte do público navega
   com o sistema configurado assim.
   ================================================================== */

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

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal="stagger"] > * { opacity: 1 !important; transform: none !important; }

  [data-reveal="draw-line"] path,
  [data-reveal="draw-line"] line { stroke-dashoffset: 0 !important; }
  [data-reveal="draw-line"] .mono-cheio { opacity: 1 !important; }

  .linha-tempo__fio { transform: scaleY(1) !important; }
  .heroi__rolar-linha { animation: none; transform: scaleY(1); }
  .zap-flutua, .zap-flutua.is-visivel { opacity: 1; visibility: visible; transform: none; }
  .zap-flutua.is-visivel::before { animation: none; }
}