/* ==========================================================================
   Dra. Inara Contin Rassi — folha de estilo única
   Off-white quente, tinta sépia e um só acento em ouro velho.
   Sem ilustração, sem gradiente decorativo, sem card genérico.
   ========================================================================== */

:root{
  /* --- cor --- */
  --pergaminho:  #F6F2EA;  /* fundo dominante — quente, mas quase branco */
  --papel:       #FDFBF7;  /* superfícies claras */
  --papel-2:     #EBE4D8;  /* faixas de respiro e molduras vazias */
  --tinta:       #2B241C;  /* texto principal   — 13.3:1 sobre o fundo */
  --tinta-fraca: #5A5045;  /* texto secundário  —  6.8:1 sobre o fundo */
  --ouro:        #A9813C;  /* filetes e molduras — decorativo */
  --ouro-texto:  #7E5F26;  /* ouro legível      —  5.6:1 sobre o fundo */
  --escuro:      #241F18;  /* seções escuras */
  --escuro-2:    #191510;

  /* --- tipografia --- */
  --serifa: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:   'Karla', -apple-system, 'Segoe UI', sans-serif;

  --t-h1:    clamp(2.75rem, 6.4vw, 5rem);
  --t-h2:    clamp(2rem, 4.2vw, 3.4rem);
  --t-h3:    clamp(1.3rem, 2.1vw, 1.75rem);
  --t-lead:  clamp(1.05rem, 1.25vw, 1.2rem);
  --t-body:  1.0313rem;
  --t-mini:  .8125rem;

  /* --- ritmo --- */
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --sec:     clamp(4.5rem, 9vw, 8.5rem);
  --medida:  64ch;

  --filete: 1px solid color-mix(in srgb, var(--ouro) 38%, transparent);

  /* --- movimento --- */
  /* uma curva só para o site inteiro: é o que faz parecer sistema, e não
     um efeito colado em cada lugar */
  --ease: cubic-bezier(.22,.75,.3,1);
  --transicao: .5s var(--ease);
}

/* ---------- reset enxuto ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; -webkit-text-size-adjust:100% }
body{
  background:var(--pergaminho);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit }
ul,ol{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:color-mix(in srgb, var(--ouro) 32%, transparent) }

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

.skip{
  position:absolute; left:.75rem; top:-4rem; z-index:100;
  background:var(--papel); color:var(--tinta);
  padding:.7rem 1.1rem; border:var(--filete);
  transition:top .2s;
}
.skip:focus{ top:.75rem }

/* ---------- tipografia ---------- */
h1,h2,h3,h4{
  font-family:var(--serifa);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.005em;
  text-wrap:balance;
}
h1{ font-size:var(--t-h1); letter-spacing:-.02em }
h2{ font-size:var(--t-h2); letter-spacing:-.012em }
h3{ font-size:var(--t-h3); font-weight:400; line-height:1.2 }

.lead{
  font-size:var(--t-lead);
  line-height:1.7;
  color:var(--tinta-fraca);
  max-width:var(--medida);
  text-wrap:pretty;
}
p{ max-width:var(--medida); text-wrap:pretty }
h2 + p, h2 + .lead{ margin-top:1.1rem }

/* Sobrelinha: caixa alta, tracking largo, um filete curto só à esquerda.
   (na arte, os subtítulos são assim — não é enfeite gratuito) */
.kicker{
  font-size:var(--t-mini);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ouro-texto);
  display:flex; align-items:center; gap:.85rem;
  margin-bottom:1.4rem;
}
.kicker::before{
  content:''; width:1.75rem; height:1px; flex:none;
  background:var(--ouro);
}

/* ---------- layout ---------- */
.wrap{ max-width:1340px; margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding-block:var(--sec) }
.sec-head{ margin-bottom:clamp(2.5rem,5vw,4rem) }
.sec-head--narrow{ max-width:52ch }
.sec-head h2{ margin-bottom:1.1rem }

.section--dark{
  background:var(--escuro);
  color:#EFE7D8;
  border-block:1px solid color-mix(in srgb, var(--ouro) 30%, transparent);
}
.section--dark .lead{ color:#C7BCA9 }
.section--dark .kicker{ color:#DCBB7C }
.section--dark .kicker::before{ background:#DCBB7C }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.9375rem; font-weight:600;
  letter-spacing:.02em;
  padding:.95rem 1.9rem;
  background:var(--tinta); color:var(--pergaminho);
  border:1px solid var(--tinta);
  text-decoration:none;
  transition:background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.btn:hover{ background:var(--ouro-texto); border-color:var(--ouro-texto) }
.btn--ghost{
  background:none; color:var(--tinta);
  border-color:color-mix(in srgb, var(--tinta) 35%, transparent);
}
.btn--ghost:hover{ background:none; color:var(--ouro-texto); border-color:var(--ouro-texto) }
.btn--sm{ padding:.6rem 1.25rem; font-size:.875rem }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem }

/* ==========================================================================
   LACUNAS — tudo que ainda falta de conteúdo real
   ========================================================================== */
.gap{
  display:inline-block; max-width:100%;
  font-family:var(--sans);
  font-size:.75rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:#8A4B2A;
  background:color-mix(in srgb, #C96A3C 12%, transparent);
  border:1px dashed color-mix(in srgb, #C96A3C 55%, transparent);
  padding:.2rem .55rem;
  white-space:nowrap;
  cursor:help;
}
.gap::after{
  content:'\00a0·\00a0' attr(data-gap);
  font-weight:500; letter-spacing:.04em; text-transform:none;
}
.gap--lg{ font-size:.8125rem; padding:.5rem .8rem; white-space:normal }
.section--dark .gap{
  color:#F0A87C;
  background:color-mix(in srgb, #C96A3C 20%, transparent);
  border-color:color-mix(in srgb, #F0A87C 45%, transparent);
}

/* Moldura de imagem: quando o arquivo não existe, vira lacuna marcada. */
.frame{
  position:relative;
  overflow:hidden;
  background:var(--papel-2);
  border:var(--filete);
  aspect-ratio:var(--ar, 4/5);
}
.frame img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--foco, 50% 50%);
}
.frame.is-missing{
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 11px,
      color-mix(in srgb, var(--ouro) 12%, transparent) 11px 12px),
    var(--papel-2);
  border-style:dashed;
  border-color:color-mix(in srgb, #C96A3C 50%, transparent);
  display:grid; place-items:center;
}
.is-missing img{ display:none }
.is-missing::after{
  content:'◇ FALTA · ' attr(data-missing);
  font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:#8A4B2A;
  background:var(--pergaminho);
  border:1px dashed color-mix(in srgb, #C96A3C 55%, transparent);
  padding:.55rem .8rem;
  margin:1rem;
  max-width:22ch; text-align:center; line-height:1.5;
}

.plate figcaption{
  font-size:var(--t-mini);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-fraca);
  margin-top:.85rem;
}
.section--dark .plate figcaption{ color:#B3A791 }

/* ==========================================================================
   CAPA — foto do consultório em tela cheia, texto por cima
   ========================================================================== */
.hero{
  position:relative;
  isolation:isolate;
  display:flex; align-items:center;
  /* tela cheia de verdade: sem teto, a dobra cai exatamente no fim da capa.
     svh usa a altura estável do viewport, então o endereço do navegador
     entrando e saindo no celular não faz a capa pular. */
  min-height:100vh;
  min-height:100svh;
  /* o topo precisa limpar a barra fixa, senão o texto passa por baixo dela */
  padding-block:calc(5rem + clamp(1.5rem,5vw,3rem)) clamp(3rem,7vw,5.5rem);
  background:var(--escuro-2);
  color:#F6F2EA;
}
.hero__foto{ position:absolute; inset:0; z-index:-2; overflow:hidden }
.hero__foto picture{ display:block; width:100%; height:100% }
.hero__foto img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 52%;
}
/* Véu escuro: mais forte do lado do texto e no rodapé, para o contraste
   não depender do que estiver na foto. No trecho onde o texto cai, a
   opacidade nunca desce de .72 — o suficiente para AA com folga. */
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--escuro-2) 84%, transparent) 0%,
      color-mix(in srgb, var(--escuro-2) 72%, transparent) 48%,
      color-mix(in srgb, var(--escuro-2) 38%, transparent) 100%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--escuro-2) 50%, transparent) 0%,
      transparent 45%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--escuro-2) 78%, transparent) 0%,
      transparent 24%);
}
/* Janela em pé: entra a foto vertical (ver o <picture> no index.html) e o
   véu muda de lado. Na tela larga ele fecha à esquerda, onde o texto cai,
   e afina à direita; aqui o texto ocupa a largura inteira, então quem
   precisa ser abafado é a TV da sala — um retângulo aceso que fica à
   direita neste enquadramento. O foco em 10% empurra a TV para fora do
   título e traz a poltrona e o corredor da entrada para trás dele. */
@media (max-aspect-ratio: 1/1){
  .hero__foto img{ object-position:10% 50% }
  .hero::before{
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--escuro-2) 80%, transparent) 0%,
        color-mix(in srgb, var(--escuro-2) 78%, transparent) 45%,
        color-mix(in srgb, var(--escuro-2) 88%, transparent) 100%),
      linear-gradient(0deg,
        color-mix(in srgb, var(--escuro-2) 50%, transparent) 0%,
        transparent 45%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--escuro-2) 78%, transparent) 0%,
        transparent 24%);
  }
}
.hero__in{ width:100%; max-width:1340px }
.hero .kicker{ color:#DCBB7C; margin-bottom:1.6rem }
.hero .kicker::before{ background:#DCBB7C }
.hero h1{
  max-width:14ch;
  letter-spacing:-.025em;
  text-shadow:0 1px 30px color-mix(in srgb, var(--escuro-2) 60%, transparent);
}
.hero .lead{
  color:#DED5C6;
  max-width:46ch;
  margin-top:1.5rem;
}
.hero .actions{ margin-top:2.5rem }
.hero__crm{
  margin-top:2.75rem;
  padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb, #DCBB7C 30%, transparent);
  font-size:var(--t-mini);
  letter-spacing:.14em; text-transform:uppercase;
  color:#C7BCA9;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  max-width:none;
}
.hero__ponto{ color:#8A7E6C }
.hero .gap{
  color:#F0A87C;
  background:color-mix(in srgb, #C96A3C 22%, transparent);
  border-color:color-mix(in srgb, #F0A87C 45%, transparent);
}
@media (max-width:640px){
  .hero h1{ max-width:none }
}

/* Marca de rolagem: um fio com um brilho que desce, no canto oposto ao
   CRM. Numa capa de tela cheia é o que avisa que a página continua. */
.hero__rolar{
  position:absolute; z-index:1;
  right:var(--gutter); bottom:clamp(2rem,5vw,3.5rem);
  width:1px; height:clamp(40px,7vh,64px);
  background:color-mix(in srgb, #DCBB7C 28%, transparent);
  overflow:hidden;
}
.hero__rolar::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, #DCBB7C);
  transform:translateY(-100%);
  animation:desce 2.6s var(--ease) infinite;
}
@keyframes desce{
  0%{ transform:translateY(-100%) }
  55%,100%{ transform:translateY(100%) }
}
@media (max-width:640px){ .hero__rolar{ display:none } }

/* Botões sobre a foto */
.btn--claro{
  background:#F6F2EA; color:var(--escuro-2);
  border-color:#F6F2EA;
}
.btn--claro::before{ background:#DCBB7C }
.btn--claro:hover,.btn--claro:focus-visible{
  background:#F6F2EA; color:var(--escuro-2); border-color:#DCBB7C;
}
.btn--contorno{
  background:none; color:#F6F2EA;
  border-color:color-mix(in srgb, #F6F2EA 55%, transparent);
}
.btn--contorno::before{ background:#F6F2EA }
.btn--contorno:hover,.btn--contorno:focus-visible{
  background:none; color:var(--escuro-2); border-color:#F6F2EA;
}

/* ==========================================================================
   ABERTURA DE SEÇÃO COM FOTO
   ========================================================================== */
.abre{ display:grid; gap:clamp(2.5rem,5vw,4rem); margin-bottom:clamp(3rem,6vw,4.5rem) }
.sec-head--flush{ margin-bottom:0 }
@media (min-width:900px){
  .abre{ grid-template-columns:1.25fr .75fr; align-items:center }
  .abre__foto{ width:min(400px,100%); margin-left:auto }
}
.frame--retrato{ --ar:4/5; --foco:50% 20% }

/* ==========================================================================
   AS DUAS FRENTES — sem imagem: hierarquia de tipo e filete fazem o trabalho
   ========================================================================== */
.frentes{
  display:grid;
  max-width:1120px;
  border-top:var(--filete);
  margin-bottom:clamp(4rem,8vw,6.5rem);
}
.frente{
  padding-block:clamp(2.25rem,4vw,3.25rem);
  border-bottom:var(--filete);
}
/* Uma frente por linha, com o título numa coluna estreita à esquerda.
   Em duas colunas lado a lado, a blefaroplastia (quatro parágrafos) deixava
   meia tela vazia ao lado da oftalmologia (um). Empilhado, cada texto ocupa
   o que precisa e o filete horizontal separa os dois. */
@media (min-width:900px){
  .frente{
    display:grid;
    grid-template-columns:19rem 1fr;
    column-gap:clamp(2.5rem,5vw,5rem);
    align-items:start;
  }
  .frente__cab h3{ margin-bottom:.4rem }
  .frente__tag{ margin-bottom:0 }
}

.frente h3{
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:300;
  margin-bottom:.45rem;
}
.frente__tag{
  font-size:var(--t-mini);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ouro-texto);
  margin-bottom:1.35rem;
}
.frente__texto{ color:var(--tinta-fraca); max-width:60ch }
.frente__texto + .frente__texto{ margin-top:1rem }
.frente__itens{
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px dotted color-mix(in srgb, var(--ouro) 45%, transparent);
  font-size:.9063rem;
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--tinta);
  max-width:60ch;
}

/* ---------- lista de procedimentos ---------- */
.proc{ border-top:var(--filete); padding-top:clamp(2.5rem,5vw,3.5rem) }
.proc__title{ margin-bottom:.75rem }
.proc__note{
  color:var(--tinta-fraca);
  font-size:.9375rem;
  max-width:60ch;
  margin-bottom:2.5rem;
}
.proc__note .gap{ margin-right:.5rem }
.proc__cols{ display:grid; gap:2.5rem }
@media (min-width:760px){
  .proc__cols{ grid-template-columns:repeat(2,1fr); gap:clamp(3rem,6vw,6rem); max-width:1000px }
}
.proc__cols h4{
  font-family:var(--sans);
  font-size:var(--t-mini); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ouro-texto);
  padding-bottom:.7rem;
  border-bottom:var(--filete);
  margin-bottom:1.1rem;
}
.listing li{
  padding:.65rem 0 .65rem 1.15rem;
  position:relative;
  color:var(--tinta);
  font-size:.9688rem;
  line-height:1.5;
}
.listing li + li{ border-top:1px solid color-mix(in srgb, var(--ouro) 15%, transparent) }
.listing li::before{
  content:'';
  position:absolute; left:0; top:1.25em;
  width:5px; height:1px;
  background:var(--ouro);
}
/* Explicação curta do que é cada procedimento, em linguagem de paciente. */
.listing li span{
  display:block;
  margin-top:.15rem;
  font-size:.8438rem;
  line-height:1.5;
  color:var(--tinta-fraca);
}

/* ==========================================================================
   SOBRE
   ========================================================================== */
.sobre{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:start }
@media (min-width:900px){
  .sobre{ grid-template-columns:.8fr 1.2fr }
  .plate--sobre{ position:sticky; top:6rem }
}
.sobre__text p{ color:#C7BCA9 }
.sobre__text .lead{ color:#DED5C6 }
.sobre__text p + p{ margin-top:1.15rem }
.plate--sobre .frame{ --ar:3/4; --foco:50% 50%; border-color:color-mix(in srgb, #DCBB7C 35%, transparent) }
.section--dark .frame{ background:#332C22 }
.section--dark .frame.is-missing{
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 11px,
      color-mix(in srgb, #DCBB7C 14%, transparent) 11px 12px),
    #332C22;
}
.section--dark .frame.is-missing::after{
  background:var(--escuro-2);
  color:#F0A87C;
}

.formacao{ margin-top:2.75rem; border-top:1px solid color-mix(in srgb, #DCBB7C 25%, transparent) }
.formacao > div{
  display:grid; gap:.35rem;
  padding:1.15rem 0;
  border-bottom:1px solid color-mix(in srgb, #DCBB7C 25%, transparent);
}
@media (min-width:640px){
  .formacao > div{ grid-template-columns:15rem 1fr; gap:1.5rem; align-items:baseline }
}
.formacao dt{
  font-size:var(--t-mini); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:#DCBB7C;
}
.formacao dd{ color:#C7BCA9 }

/* Listas dentro da ficha de formação (experiência, hospitais) */
.rol{ margin-top:.55rem }
.rol li{
  position:relative;
  padding:.3rem 0 .3rem 1.1rem;
  line-height:1.55;
}
.rol li::before{
  content:'';
  position:absolute; left:0; top:1em;
  width:5px; height:1px;
  background:#DCBB7C;
}

/* ==========================================================================
   GALERIA DO CONSULTÓRIO
   ========================================================================== */
.galeria{
  display:grid; gap:clamp(1.25rem,2.5vw,2rem);
  max-width:1120px;
  margin-bottom:clamp(3.5rem,7vw,5.5rem);
}
@media (min-width:760px){
  .galeria{ grid-template-columns:repeat(3,1fr); align-items:start }
}
@media (max-width:759px){ .galeria{ grid-template-columns:1fr } }

/* Recortes das fotos da clínica.
   "--ar" é a proporção da janela e "--foco" diz que pedaço da foto original
   aparece dentro dela.

   recepcao.jpg → mostra x≈134..693. A placa "Lavezzo & Takigami" começa em
     x≈715 e fica fora do quadro; por isso a legenda é "Entrada". Passar o
     --foco de 28% traz a placa de volta. */
.frame--exames{ --ar:4/5; --foco:50% 55% }
.frame--aparelhos{ --ar:4/5; --foco:50% 45% }
.frame--lounge{ --ar:4/5; --foco:50% 50% }

.mapa{
  aspect-ratio:16/7;
  border:var(--filete);
  background:var(--papel-2);
  overflow:hidden;
}
.mapa iframe{
  width:100%; height:100%; border:0; display:block;
  filter:grayscale(1) contrast(.92) sepia(.12);
  transition:filter .6s var(--ease);
}
.mapa:hover iframe,
.mapa:focus-within iframe{ filter:none }
@media (max-width:640px){ .mapa{ aspect-ratio:4/3 } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width:68rem; border-top:var(--filete) }
.faq details{ border-bottom:var(--filete) }
.faq summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:baseline; gap:1.25rem;
  padding:1.4rem 0;
  font-family:var(--serifa);
  font-size:clamp(1.15rem,1.7vw,1.4rem);
  font-weight:400;
  line-height:1.3;
  transition:color var(--transicao);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::before{
  content:'+';
  font-family:var(--sans); font-size:1.15rem; font-weight:400;
  color:var(--ouro-texto);
  flex:none; width:1rem;
  transition:transform var(--transicao);
}
.faq summary:hover{ color:var(--ouro-texto) }
.faq__body{ padding:0 0 1.6rem 2.25rem }
.faq__body p{ color:var(--tinta-fraca); max-width:62ch }

/* ==========================================================================
   CONTATO
   ========================================================================== */
.contato{ display:grid; gap:clamp(2.5rem,5vw,4rem) }
@media (min-width:900px){ .contato{ grid-template-columns:1fr 1fr; align-items:start } }
.canais{ border-top:1px solid color-mix(in srgb, #DCBB7C 25%, transparent) }
.canais li{
  display:grid; gap:.6rem;
  padding:1.35rem 0;
  border-bottom:1px solid color-mix(in srgb, #DCBB7C 25%, transparent);
}
@media (min-width:520px){
  .canais li{ grid-template-columns:9rem 1fr; gap:1.5rem; align-items:center }
}
.canais__label{
  font-size:var(--t-mini); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:#DCBB7C;
}

/* ==========================================================================
   TOPO
   ========================================================================== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--pergaminho) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color var(--transicao), background var(--transicao);
}
.topbar.is-stuck{
  border-bottom-color:color-mix(in srgb, var(--ouro) 30%, transparent);
  background:color-mix(in srgb, var(--pergaminho) 95%, transparent);
}
.topbar__in{
  display:flex; align-items:center; gap:1.5rem;
  min-height:4.5rem;
}
.brand{ text-decoration:none; margin-right:auto; display:block }
.brand__name{
  display:block;
  font-family:var(--serifa);
  font-size:1.4rem; font-weight:400;
  letter-spacing:.06em;
  line-height:1.1;
}
.brand__role{
  display:block;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ouro-texto);
  margin-top:.15rem;
}
.nav{ display:none; gap:1.75rem }
.nav a{
  font-size:.9063rem;
  text-decoration:none;
  color:var(--tinta-fraca);
  padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition:color var(--transicao), border-color var(--transicao);
}
.nav a:hover,.nav a.is-active{ color:var(--tinta); border-bottom-color:var(--ouro) }

.burger{ width:2.5rem; height:2.5rem; display:grid; place-content:center; gap:6px }
.burger span{
  display:block; width:22px; height:1px; background:var(--tinta);
  transition:transform var(--transicao), opacity var(--transicao);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg) }

.nav-mobile[hidden]{ display:none }
.nav-mobile{
  display:grid;
  border-top:var(--filete);
  padding:.5rem var(--gutter) 1.25rem;
  background:var(--pergaminho);
}
.nav-mobile a{
  padding:.85rem 0;
  text-decoration:none;
  font-size:1.0625rem;
  border-bottom:var(--filete);
}
.nav-mobile a:last-child{ border-bottom:0 }

@media (min-width:960px){
  .nav{ display:flex }
  .burger,.nav-mobile{ display:none !important }
}
@media (max-width:959px){ .topbar .btn--sm{ display:none } }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape{
  background:var(--escuro-2);
  color:#C7BCA9;
  padding-block:clamp(3rem,6vw,4.5rem);
  font-size:.9375rem;
}
.rodape__in{ display:grid; gap:2rem }
.rodape .brand__name{ color:#EFE7D8; font-size:1.6rem; margin-bottom:.5rem }
.rodape__crm{ font-size:.875rem; line-height:1.7 }
.rodape__nav{ display:flex; flex-wrap:wrap; gap:.35rem 1.5rem }
.rodape__nav a{
  text-decoration:none; color:#C7BCA9;
  border-bottom:1px solid transparent;
  transition:color var(--transicao), border-color var(--transicao);
}
.rodape__nav a:hover{ color:#DCBB7C; border-bottom-color:#DCBB7C }
.rodape__legal{
  font-size:.8125rem; line-height:1.7; color:#9C907C;
  max-width:80ch;
  padding-top:1.75rem;
  border-top:1px solid color-mix(in srgb, #DCBB7C 20%, transparent);
}
.rodape__mini{ font-size:.8125rem; color:#8C8070 }
@media (min-width:820px){
  .rodape__in{ grid-template-columns:1fr 1fr; column-gap:4rem }
  .rodape__legal,.rodape__mini{ grid-column:1 / -1 }
}

/* ==========================================================================
   MOVIMENTO
   Regras da casa: uma curva só (--ease), durações longas e poucas, e nada
   que se mexa sem motivo. Cada bloco abaixo tem uma razão anotada.
   ========================================================================== */

/* --- 1. Entrada da capa -------------------------------------------------
   Acontece no load, não no scroll: a primeira tela nunca deve chegar vazia
   esperando o usuário rolar. Escalonamento curto, de cima para baixo. */
@keyframes sobe{
  from{ opacity:0; transform:translateY(18px) }
  to  { opacity:1; transform:none }
}
.hero__text > *,
.hero__portrait{
  animation:sobe .85s var(--ease) both;
}
.hero__text > *:nth-child(1){ animation-delay:.04s }
.hero__text > *:nth-child(2){ animation-delay:.10s }
.hero__text > *:nth-child(3){ animation-delay:.16s }
.hero__text > *:nth-child(4){ animation-delay:.22s }
.hero__text > *:nth-child(5){ animation-delay:.28s }
.hero__text > *:nth-child(6){ animation-delay:.34s }
.hero__portrait{ animation-delay:.20s; animation-duration:1.1s }

/* --- 2. Fio de progresso da leitura -------------------------------------
   Substitui a barra de rolagem como referência de "quanto falta". CSS puro,
   sem JS. Onde animation-timeline não existe, o fio simplesmente não
   aparece — nada quebra. */
.progresso{
  position:absolute; left:0; bottom:-1px;
  height:2px; width:100%;
  background:linear-gradient(90deg, var(--ouro), color-mix(in srgb, var(--ouro) 45%, transparent));
  transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}
@supports (animation-timeline: scroll()){
  .progresso{
    animation:preenche linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes preenche{ to{ transform:scaleX(1) } }

/* --- 3. Entrada por seção ------------------------------------------------
   Deslocamento pequeno (14px) e lento. O suficiente para o olho perceber
   que o bloco chegou; pouco para não virar carrossel. */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--atraso, 0s);
}
[data-reveal].is-in{ opacity:1; transform:none }

/* --- 4. Foto que assenta -------------------------------------------------
   A imagem entra levemente ampliada e volta ao lugar. Dá peso de fotografia
   impressa em vez de "elemento que apareceu". */
.plate[data-reveal] .frame img{
  transform:scale(1.06);
  transition:transform 1.6s var(--ease);
}
.plate[data-reveal].is-in .frame img{ transform:none }

@media (hover:hover){
  .plate[data-reveal].is-in:hover .frame img,
  .plate:not([data-reveal]):hover .frame img{
    transform:scale(1.03);
    transition-duration:1.2s;
  }
}

/* --- 5. O fio dos passos da consulta -------------------------------------
   Cresce conforme a lista passa pela tela: a linha do tempo da consulta
   desenhada pelo próprio scroll. Sem suporte, fica desenhada e parada. */
.passos{ position:relative }
.passos::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:1px;
  background:linear-gradient(180deg, var(--ouro), color-mix(in srgb, var(--ouro) 20%, transparent));
  transform-origin:50% 0;
  animation:risca linear both;
}
@keyframes risca{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
@supports (animation-timeline: view()){
  .passos::before{
    animation-timeline:view();
    animation-range:cover 8% cover 65%;
  }
}
@media (max-width:759px){ .passos::before{ display:none } }

/* --- 6. Sublinhado do menu ----------------------------------------------
   Cresce a partir da esquerda, na direção da leitura. */
.nav a{ position:relative; border-bottom:0 }
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--ouro);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease);
}
.nav a:hover::after,
.nav a:focus-visible::after,
.nav a.is-active::after{ transform:scaleX(1) }

/* --- 7. Botão que se preenche -------------------------------------------
   A cor entra varrendo, em vez de piscar. */
.btn{ position:relative; overflow:hidden; isolation:isolate }
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--ouro-texto);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before{ transform:scaleX(1) }
.btn:hover,.btn:focus-visible{ background:var(--tinta); border-color:var(--ouro-texto); color:var(--pergaminho) }
.btn--ghost:hover,.btn--ghost:focus-visible{ background:none; color:var(--pergaminho) }

/* --- 8. Cabeçalho que encolhe -------------------------------------------
   Depois do primeiro scroll a barra cede altura para o conteúdo. */
.topbar__in{ transition:min-height var(--transicao) }
.brand__name{ transition:font-size var(--transicao) }
.brand__role{
  transition:opacity var(--transicao), max-height var(--transicao);
  max-height:2rem; overflow:hidden;
}
@media (min-width:960px){
  .topbar.is-stuck .topbar__in{ min-height:3.9rem }
  .topbar.is-stuck .brand__name{ font-size:1.2rem }
  .topbar.is-stuck .brand__role{ opacity:0; max-height:0 }
}

/* --- 9. Sanfona das dúvidas ---------------------------------------------
   Abre com altura animada onde o navegador já sabe interpolar 'auto'.
   Nos outros, abre na hora — que é o comportamento nativo. */
.faq summary::before{ transition:transform .35s var(--ease), color var(--transicao) }
.faq details[open] summary::before{ transform:rotate(45deg) }  /* o + vira × */
@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size:allow-keywords }
  .faq details::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size .5s var(--ease), content-visibility .5s allow-discrete;
  }
  .faq details[open]::details-content{ block-size:auto }
}

/* --- 10. Links de contato ------------------------------------------------ */
.canais__valor{
  font-family:var(--serifa);
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  color:#EFE7D8; text-decoration:none;
  display:inline-block;
  position:relative;
}
.canais__valor::after{
  content:''; position:absolute; left:0; right:0; bottom:-.15em;
  height:1px; background:#DCBB7C;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease);
}
.canais__valor:hover::after,
.canais__valor:focus-visible::after{ transform:scaleX(1) }
.canais__valor:hover{ color:#DCBB7C }

.rodape__mini{
  max-width:none;
  display:flex; flex-wrap:wrap; gap:.35rem 2rem;
  justify-content:space-between;
}
.rodape__autor{
  color:#C7BCA9; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, #DCBB7C 40%, transparent);
  transition:color var(--transicao), border-color var(--transicao);
}
.rodape__autor:hover{ color:#DCBB7C; border-color:#DCBB7C }

/* --- Quem pediu menos movimento recebe menos movimento ------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{ opacity:1; transform:none }
  .plate[data-reveal] .frame img{ transform:none }
  .progresso{ display:none }
}


/* ---------- Nota sob o mapa: link para o perfil do Google ---------- */
.mapa__nota{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.1rem;
  max-width:none;
  margin-top:1.1rem;
  font-size:.9375rem;
  color:var(--tinta-fraca);
}
.mapa__link{
  font-family:var(--sans);
  font-size:var(--t-mini); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro-texto);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:.55rem;
  padding-bottom:.15rem;
  border-bottom:1px solid color-mix(in srgb, var(--ouro) 45%, transparent);
  transition:color var(--transicao), border-color var(--transicao);
}
.mapa__link::after{
  content:'→';
  font-size:1rem; letter-spacing:0;
  transition:transform var(--transicao);
}
.mapa__link:hover{ color:var(--tinta); border-color:var(--tinta) }
.mapa__link:hover::after{ transform:translateX(3px) }

/* ---------- Endereço clicável ---------- */
.endereco{
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--ouro) 45%, transparent);
  transition:color var(--transicao), border-color var(--transicao);
}
.endereco:hover{ color:var(--ouro-texto); border-color:var(--ouro-texto) }
.pratico dd .gap{ margin-top:.5rem }

/* Linhas de contato secundárias: menores que o telefone principal */
.canais__valor--sec{
  font-size:clamp(1rem,1.5vw,1.15rem);
  line-height:1.5;
}


/* ==========================================================================
   CABEÇALHO SOBRE A CAPA
   Fica transparente enquanto a foto está atrás e vira barra sólida quando
   a capa sai de cena. O véu de topo da .hero garante o contraste no claro.
   ========================================================================== */
.topbar{
  position:fixed; top:0; left:0; right:0;
  background:transparent;
  backdrop-filter:none;
}
.topbar .brand__name{ color:#F6F2EA }
.topbar .brand__role{ color:#DCBB7C }
.topbar .nav a{ color:#E4DCCD }
.topbar .nav a:hover,
.topbar .nav a:focus-visible{ color:#fff }
.topbar .nav a::after{ background:#DCBB7C }
.topbar .burger span{ background:#F6F2EA }
.topbar .btn--sm{
  background:#F6F2EA; color:var(--escuro-2); border-color:#F6F2EA;
}
.topbar .btn--sm::before{ background:#DCBB7C }
.topbar .btn--sm:hover,
.topbar .btn--sm:focus-visible{ color:var(--escuro-2); background:#F6F2EA }

.topbar.is-stuck,
.topbar.is-aberto{
  background:color-mix(in srgb, var(--pergaminho) 96%, transparent);
  backdrop-filter:blur(10px);
  border-bottom-color:color-mix(in srgb, var(--ouro) 30%, transparent);
}
.topbar.is-stuck .brand__name,
.topbar.is-aberto .brand__name{ color:var(--tinta) }
.topbar.is-stuck .brand__role,
.topbar.is-aberto .brand__role{ color:var(--ouro-texto) }
.topbar.is-stuck .nav a,
.topbar.is-aberto .nav a{ color:var(--tinta-fraca) }
.topbar.is-stuck .nav a:hover,
.topbar.is-stuck .nav a:focus-visible{ color:var(--tinta) }
.topbar.is-stuck .nav a::after,
.topbar.is-aberto .nav a::after{ background:var(--ouro) }
.topbar.is-stuck .burger span,
.topbar.is-aberto .burger span{ background:var(--tinta) }
.topbar.is-stuck .btn--sm,
.topbar.is-aberto .btn--sm{
  background:var(--tinta); color:var(--pergaminho); border-color:var(--tinta);
}
.topbar.is-stuck .btn--sm::before,
.topbar.is-aberto .btn--sm::before{ background:var(--ouro-texto) }
.topbar.is-stuck .btn--sm:hover,
.topbar.is-stuck .btn--sm:focus-visible{ color:var(--pergaminho); background:var(--tinta) }