/* ═══════════════════════════════════════════════════════════════════════
   Dra. Aline Záu — Cirurgia Dermatológica
   Marfim, areia e bronze, com o verde do contato nos botões.
   A capa é uma lente de dermatoscópio que a pessoa passeia sobre o retrato.
   Sem framework, sem build.

   Tipografia dimensionada para leitura confortável acima dos 50 anos:
   corpo em 18px, nada de texto de apoio abaixo de 15px.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --marfim: #FAF7F2;
  --areia:  #F1EAE0;
  --nata:   #FFFFFF;
  --linha:  #E0D5C5;
  --tinta:  #2A2320;
  --fumo:   #61564E;    /* mais escuro que antes: contraste para ler sem esforço */
  --bronze: #9C7548;
  --zap:      #17754C;  /* verde do contato — família WhatsApp, sem o néon */
  --zap-forte:#115C3C;

  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --corpo:   'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --margem: clamp(1.4rem, 5vw, 6rem);
  --respiro: clamp(4.5rem, 9vh, 7.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--marfim);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.72;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.pula { position: absolute; left: -9999px; background: var(--tinta); color: var(--marfim); padding: .8rem 1.2rem; z-index: 100; }
.pula:focus { left: 1rem; top: 1rem; }

/* ── tipografia ─────────────────────────────────────────────────────── */

h1, .h1, .display {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -.015em;
  line-height: 1.04;
  margin: 0 0 1.5rem;
}
h1, .h1 { font-size: clamp(3rem, 6.2vw, 5.4rem); }
.display { font-size: clamp(2.35rem, 4.4vw, 3.7rem); }
.display--md { font-size: clamp(2rem, 3.3vw, 2.9rem); }
h1 em, .h1 em, .display em { font-style: italic; color: var(--bronze); }

.etiqueta {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.4rem;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bronze);
}
.etiqueta::before { content: ''; width: 26px; height: 1px; background: currentColor; flex: none; }
.etiqueta--centro { justify-content: center; }
/* 23-09-2026: na capa a etiqueta "Dermatologista em Manaus" é o <h1> (o termo da busca no título da página — índice de
   qualidade) e a frase grande virou <p class="h1">. Visual idêntico: o h1-etiqueta volta à letra e ao corpo da etiqueta. */
h1.etiqueta, .capa h1.etiqueta { font-family: var(--corpo); line-height: normal; }

.lead { font-size: clamp(1.12rem, 1.35vw, 1.26rem); color: var(--fumo); max-width: 46ch; margin: 0 0 1.2rem; }

/* ── botões ─────────────────────────────────────────────────────────── */

.botao {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1.05rem 2rem;
  border: 1px solid var(--zap);
  border-radius: 999px;
  background: var(--zap);
  color: #fff;
  font-family: var(--corpo);
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s, border-color .25s, transform .25s;
}
.botao:hover, .botao:focus-visible { background: var(--zap-forte); border-color: var(--zap-forte); transform: translateY(-1px); }
.botao .ico { width: 1.15em; height: 1.15em; flex: none; }
.botao--peq { padding: .72rem 1.25rem; font-size: .78rem; letter-spacing: .07em; }
.botao--fantasma { background: none; color: var(--zap); border-color: var(--zap); }
.botao--fantasma:hover, .botao--fantasma:focus-visible { background: var(--zap); color: #fff; }

.link-sutil {
  font-size: .88rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fumo);
  padding-bottom: 4px;
  background: linear-gradient(var(--bronze), var(--bronze)) no-repeat 0 100% / 0% 1px;
  transition: background-size .45s cubic-bezier(.2,.7,.2,1), color .3s;
}
.link-sutil:hover, .link-sutil:focus-visible { color: var(--tinta); background-size: 100% 1px; }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.8rem; margin-top: 2.4rem; }
.acoes--centro { justify-content: center; margin-top: 3.2rem; }

/* ── topo ───────────────────────────────────────────────────────────── */

.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem var(--margem);
  border-bottom: 1px solid transparent;
  transition: background .4s, padding .4s, border-color .4s;
}
.topo.compacto {
  padding-block: .75rem;
  background: rgba(250,247,242,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linha);
}
/* na variante de capa escura o cabeçalho fica claro até a página rolar:
   selo e ícone com borda escura sobre foto escura simplesmente somem */
body.fundo .topo:not(.compacto) .selo-particular {
  color: rgba(250,247,242,.9);
  border-color: rgba(250,247,242,.42);
}
body.fundo .topo:not(.compacto) .ico-link {
  color: rgba(250,247,242,.9);
  border-color: rgba(250,247,242,.42);
}
body.fundo .topo:not(.compacto) .ico-link:hover,
body.fundo .topo:not(.compacto) .ico-link:focus-visible {
  color: var(--marfim);
  border-color: var(--marfim);
  background: rgba(250,247,242,.14);
}

.marca { display: flex; align-items: center; text-decoration: none; }
/* a marca dela: assinatura em rosé sobre o marfim. Altura fixa, largura pela
   proporção — nunca esticar um logotipo. */
.marca__logo { display: block; width: auto; height: 46px; }
.topo.compacto .marca__logo { height: 38px; transition: height .3s; }
.topo__dir { display: flex; align-items: center; gap: 1.2rem; }

.selo-particular {
  padding: .45rem 1rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fumo);
  white-space: nowrap;
}

/* ── 1. CAPA ────────────────────────────────────────────────────────
   A foto ocupa a coluna direita inteira e sangra até a borda da tela.
   Nada de quadrado flutuando: ela é o fundo daquele lado da dobra.      */

.capa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  grid-template-areas:
    "cabeca palco"
    "resto  palco";
  align-content: center;
  align-items: center;
  min-height: 100svh;
  /* o respiro vertical fica no texto, não na dobra: assim a foto vai de
     ponta a ponta e não sobra faixa de marfim em cima e embaixo dela */
  padding: 0 0 0 var(--margem);
  /* a luz da foto continua para a esquerda, por trás do texto — os dois
     lados passam a ser o mesmo ambiente, e não duas metades coladas */
  background:
    radial-gradient(115% 85% at 82% 46%, #EDE6DC 0%, rgba(237,230,220,0) 58%),
    var(--marfim);
}
/* ⚠️ REGRA: os dois blocos precisam ter a MESMA largura, não o mesmo
   max-width. Com `margin-left: auto`, um item de grade deixa de esticar e
   passa a caber no próprio conteúdo — a etiqueta e o título são mais
   estreitos que o subtítulo, então cada bloco parava num x diferente e o
   título ficava 38 px à direita do texto. Largura fixa nos dois = uma
   única margem à esquerda para etiqueta, título, subtítulo, botão e aviso. */
.capa__cabeca,
.capa__resto {
  width: min(37rem, 100%);
  margin-left: auto;             /* aproxima o texto da foto */
}
.capa__cabeca {
  grid-area: cabeca;
  align-self: end;
  padding: calc(var(--respiro) + 3.5rem) clamp(2.5rem, 5vw, 5.5rem) 0 0;
}
.capa__resto {
  grid-area: resto;
  align-self: start;
  padding: 0 clamp(2.5rem, 5vw, 5.5rem) var(--respiro) 0;
}

.aviso-particular {
  margin: 2.4rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--linha);
  font-size: .98rem;
  color: var(--fumo);
  max-width: 44ch;
}
.aviso-particular strong { color: var(--tinta); font-weight: 500; }

.palco {
  grid-area: palco;
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  align-self: stretch;
  cursor: none;
  touch-action: pan-y;
  --enquadre: 50% 40%;
}
/* a foto não é mais uma lâmina de altura inteira: tem tamanho próprio e
   se dissolve em cima, embaixo e à esquerda — some a borda dura sem
   voltar a parecer um quadrado colado na dobra */
.palco__base {
  width: 100%;
  height: min(80svh, 760px);
  object-fit: cover;
  object-position: var(--enquadre);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 22%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 22%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
/* a foto se dissolve no marfim em vez de terminar numa borda dura */


.palco__dica {
  position: absolute;
  left: clamp(1.4rem, 3vw, 2.5rem);
  bottom: 1.4rem;
  z-index: 6;
  margin: 0;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: rgba(250,247,242,.88);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  transition: opacity .5s;
}
.palco__dica::before { content: '◎ '; }
.palco__dica.some { opacity: 0; }

/* a lente: dois transforms, nada de filtro — anda na GPU */
.lente {
  position: absolute;
  top: 0; left: 0;
  width: 132px; height: 132px;   /* pedido 2x: menor. Celular: 74 px */
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-999px, -999px, 0);
  transition: opacity .35s;
  box-shadow:
    0 0 0 1px rgba(42,35,32,.3),
    0 0 0 8px rgba(250,247,242,.45),
    0 18px 45px -18px rgba(42,35,32,.6);
  z-index: 4;
}
.lente.ativa { opacity: 1; }
.lente__janela { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.lente__janela img {
  position: absolute; top: 0; left: 0;
  max-width: none;
  object-fit: cover;
  object-position: var(--enquadre);
  will-change: transform;
}
.lente__cruz {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(to right, transparent calc(50% - .5px), rgba(42,35,32,.22) calc(50% - .5px), rgba(42,35,32,.22) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(42,35,32,.22) calc(50% - .5px), rgba(42,35,32,.22) calc(50% + .5px), transparent calc(50% + .5px)),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(42,35,32,.1) 100%);
}

/* credenciais sobre a foto */
.marca-ponto {
  position: absolute;
  left: var(--px); top: var(--py);
  /* centraliza por margem, não por transform: um transform aqui vira bloco
     contêiner e faz o 'position: fixed' do cartão se ancorar neste botão
     em vez de na tela — o que jogava o cartão para cima do título */
  margin: -12px 0 0 -12px;
  width: 24px; height: 24px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  z-index: 5;
}
.marca-ponto__anel {
  position: absolute;
  inset: 0;
  border: 1px solid var(--bronze);
  border-radius: 50%;
  background: rgba(250,247,242,.35);
  opacity: .9;
  transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.25,1);
  animation: chamar 3.4s ease-out infinite;
}
.marca-ponto__anel::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--bronze);
}
@keyframes chamar {
  0%   { box-shadow: 0 0 0 0 rgba(156,117,72,.45); }
  60%  { box-shadow: 0 0 0 13px rgba(156,117,72,0); }
  100% { box-shadow: 0 0 0 0 rgba(156,117,72,0); }
}
.marca-ponto.acesa .marca-ponto__anel { opacity: 1; transform: scale(1.2); animation: none; }

/* os cartões ficam presos ao palco (não ao botão de 24 px), um por vez */
.cartoes-lente { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.cartao-lente {
  position: absolute;
  left: var(--px); top: var(--py);
  /* uma linha por linha: quebrar deixava o retângulo alto e pesado sobre a
     foto. O texto é curto de propósito — se crescer, encurta o texto, não
     volta a quebrar. */
  width: max-content;
  max-width: none;
  white-space: nowrap;
  padding: .45rem .7rem;
  border: 1px solid rgba(42,35,32,.16);
  border-radius: 4px;
  /* a foto real é clara: sobre a camisa branca o cartão translúcido sumia */
  background: #fff;
  opacity: 0;
  transform: translate(1.4rem, -50%) scale(.98);
  transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.25,1);
  box-shadow: 0 14px 30px -14px rgba(42,35,32,.55), 0 1px 3px rgba(42,35,32,.12);
}
.cartao-lente.aberto { opacity: 1; transform: translate(1.4rem, -50%) scale(1); }
/* pontos na metade direita abrem o cartão para a esquerda */
.cartao-lente--esquerda { transform: translate(calc(-100% - 1.4rem), -50%) scale(.98); }
.cartao-lente--esquerda.aberto { transform: translate(calc(-100% - 1.4rem), -50%) scale(1); }
.cartao-lente b { display: block; font-size: .78rem; font-weight: 500; line-height: 1.3; color: var(--tinta); }
.cartao-lente i { display: block; margin-top: .1rem; font-style: normal; font-size: .68rem; color: var(--fumo); }

/* ── 1b. CAPA — VARIANTE "foto de fundo" (capa-fundo.html) ───────────
   A foto ocupa a dobra inteira e o texto vive sobre ela. Tudo escopado em
   `.capa--fundo`, então o index.html não vê nada disto.
   ⚠️ Empilhamento SEMPRE positivo: com `isolation:isolate` no pai, um filho
   com z-index negativo vai parar atrás do fundo do próprio pai e a foto some
   sem nenhum aviso no DevTools. Foto 1 · véu 2 · lupa 4 · pontos 5 ·
   cartões 6 · texto 7.                                                    */

.capa--fundo {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  padding: 0;
  background: #1E1611;
  color: var(--marfim);
}
.capa--fundo .palco {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  margin: 0;
  --enquadre: 62% 34%;
}
.capa--fundo .palco__base {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: var(--enquadre);
  /* ⚠️ A foto se DISSOLVE no fundo escuro à esquerda, num degradê longo.
     Antes ela ia até a borda e o alargamento inventado do arquivo aparecia
     como uma faixa borrada com emenda vertical visível — a dona chamou de
     "linha feia". Com a máscara, o trecho inventado fica inteiro dentro da
     parte transparente: o que se vê à esquerda é a cor de fundo da dobra,
     não um borrão. Nada de pixel falso na tela. */
  /* ⚠️ A parte transparente tem de cobrir TODA a faixa inventada do arquivo
     (que vai até 48% da largura da imagem) — senão a emenda reaparece como
     linha vertical. Por isso o degradê só começa a mostrar a foto em 46%. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, transparent 44%, rgba(0,0,0,.28) 54%,
    rgba(0,0,0,.72) 63%, #000 72%);
  mask-image: linear-gradient(to right,
    transparent 0%, transparent 44%, rgba(0,0,0,.28) 54%,
    rgba(0,0,0,.72) 63%, #000 72%);
}
/* véu quente: forte à esquerda, onde o texto mora; quase nulo à direita.
   O segundo degradê escurece topo e base, onde ficam o menu e a barra. */
.capa--fundo .capa__veu {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(96deg,
      rgba(30,22,17,.55) 0%,  rgba(30,22,17,.52) 30%, rgba(30,22,17,.44) 48%,
      rgba(30,22,17,.30) 62%, rgba(30,22,17,.12) 78%, rgba(30,22,17,.02) 90%,
      rgba(30,22,17,0) 100%),
    linear-gradient(to bottom,
      rgba(30,22,17,.55) 0%, rgba(30,22,17,0) 20%,
      rgba(30,22,17,0) 74%,  rgba(30,22,17,.48) 100%);
}
.capa--fundo .lente        { z-index: 4; }
.capa--fundo .marca-ponto  { z-index: 5; }
.capa--fundo .cartoes-lente{ z-index: 6; }

.capa--fundo .capa__env {
  position: relative;
  z-index: 7;
  width: min(1200px, 92vw);
  max-width: none;
  margin-inline: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(5.5rem, 9svh, 7rem) 0 clamp(3rem, 7svh, 5rem);
  pointer-events: none;                 /* a lupa continua respondendo embaixo */
}
.capa--fundo .capa__env > * { pointer-events: auto; }
.capa--fundo .capa__env > * { max-width: min(37rem, 100%); }

/* o texto claro sobre o véu escuro */
.capa--fundo h1, .capa--fundo .h1 { color: var(--marfim); }
.capa--fundo h1 em, .capa--fundo .h1 em { color: #E0BC94; }
.capa--fundo .etiqueta { color: #E0BC94; }
.capa--fundo .lead { color: rgba(250,247,242,.88); }
.capa--fundo .aviso-particular {
  color: rgba(250,247,242,.88);
  border-top-color: rgba(250,247,242,.24);
}
/* o filtro em bronze claro: sobre o escuro ele some se ficar só em branco */
.capa--fundo .aviso-particular strong { color: #E7C69F; font-weight: 500; }
.capa--fundo .palco__dica {
  color: rgba(250,247,242,.7);
  background: rgba(30,22,17,.42);
  border-color: rgba(250,247,242,.2);
}
.capa--fundo .marca-ponto__anel {
  border-color: rgba(250,247,242,.85);
  background: rgba(250,247,242,.2);
}
.capa--fundo .marca-ponto__anel::after { background: var(--marfim); }

@media (max-width: 980px) {
  /* no celular o texto ancora na base e o véu vira vertical: a Dra. fica
     inteira em cima e a leitura limpa embaixo */
  .capa--fundo { min-height: 100svh; }
  .capa--fundo .palco { margin: 0; --enquadre: 72% 50%; }
  /* ⚠️ o `.palco::after` do celular é o véu de MARFIM da capa principal. Na
     variante ele lavava o pé da dobra de branco e o texto claro sumia. */
  .capa--fundo .palco::after { content: none; }
  .capa--fundo .palco__base {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .capa--fundo .capa__env {
    justify-content: flex-end;
    padding: clamp(5rem, 12svh, 7rem) var(--margem) clamp(2rem, 5svh, 3.5rem);
    width: 100%;
  }
  .capa--fundo .capa__env > * { max-width: none; }
  /* o véu do celular só escurece DEPOIS da metade: antes disso ele começava
     em 38% e a foto parecia terminar no queixo dela */
  .capa--fundo .capa__veu {
    background: linear-gradient(to bottom,
      rgba(30,22,17,.55) 0%,  rgba(30,22,17,.10) 15%, rgba(30,22,17,.12) 40%,
      rgba(30,22,17,.52) 57%, rgba(30,22,17,.88) 76%, rgba(30,22,17,.96) 100%);
  }
  /* a lupa CONTINUA no celular — ela é o evento dinâmico da página e sem ela
     a dobra fica parada. O que muda é o território: ela passeia na metade de
     cima, onde não há texto, e o cartão sobe junto. */
  .capa--fundo .palco__dica { display: none; }
  .capa--fundo .cartao-lente,
  .capa--fundo .cartao-lente--esquerda {
    top: 13%; bottom: auto;
    left: var(--margem); right: auto;
  }
  /* ⚠️ nada de `transform` na foto aqui: a lupa calcula o aumento a partir do
     getBoundingClientRect() dela, e um scale quebraria a conta. */
}

/* ── 2. NÚMEROS ─────────────────────────────────────────────────────── */

.numeros {
  padding: clamp(2.4rem, 4vw, 3.2rem) 0;
  background: var(--areia);
  border-block: 1px solid var(--linha);
}
/* a faixa recorta o trilho e dissolve as duas pontas: o número entra e sai
   em vez de aparecer e sumir numa borda dura */
.numeros__faixa {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
/* ⚠️ Não é grade: é um trilho que anda. Em grade os quatro cabiam na tela,
   `scrollWidth === clientWidth`, e a rolagem automática do JS antigo nunca
   tinha para onde ir — a faixa ficava parada em qualquer tamanho de tela. */
.numeros__lista {
  display: flex;
  width: max-content;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.numeros__lista.desfilando {
  animation: desfilar var(--desfile, 40s) linear infinite;
  will-change: transform;
}
.numeros__lista.pausada { animation-play-state: paused; }
.numeros__faixa:hover .numeros__lista.desfilando { animation-play-state: paused; }
@keyframes desfilar { to { transform: translateX(-50%); } }

.numeros__lista li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  flex: 0 0 auto;
  width: clamp(12rem, 21vw, 16rem);
  padding: .4rem 1.6rem;
  border-left: 1px solid var(--linha);
}
.numeros__lista b {
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  transition: color .5s;
}
/* só o rótulo, filho direto do <li>: o span de dentro do <b> é o contador
   e precisa herdar o tamanho do número, não o do rótulo */
.numeros__lista li > span { font-size: .92rem; color: var(--fumo); line-height: 1.45; }
.numeros__lista b span { font: inherit; color: inherit; }
/* quem entra no meio da faixa ganha o bronze — sem saltar, que o trilho já
   está em movimento */
.numeros__lista li.aceso b { color: var(--bronze); }

/* ── 3. A MÉDICA ────────────────────────────────────────────────────── */

.medica { padding: var(--respiro) var(--margem); }
.medica__grade {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
}
/* a foto se apoia numa faixa de areia — não flutua isolada no branco */
.medica__foto { position: relative; margin: 0; }
.medica__foto::before {
  content: '';
  position: absolute;
  inset: -2.2rem auto -2.2rem -2.2rem;
  width: 62%;
  background: var(--areia);
  border-radius: 3px;
}
.medica__foto img { position: relative; width: 100%; border-radius: 3px; }
.medica__foto figcaption {
  position: absolute;
  right: -1.2rem;
  bottom: 1.6rem;
  z-index: 2;
  padding: .85rem 1.15rem;
  background: var(--nata);
  border: 1px solid var(--linha);
  border-radius: 4px;
  box-shadow: 0 16px 38px -24px rgba(42,35,32,.6);
}
.medica__foto figcaption b { display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 400; }
.medica__foto figcaption span { display: block; font-size: .8rem; color: var(--fumo); max-width: 14ch; line-height: 1.35; }

.medica__texto p { color: var(--fumo); max-width: 52ch; }

.checagem { list-style: none; margin: 2rem 0 0; padding: 0; }
.checagem li {
  position: relative;
  padding: .65rem 0 .65rem 2rem;
  border-bottom: 1px solid var(--linha);
  font-size: 1rem;
  color: var(--tinta);
}
.checagem li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.1rem;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--zap);
  border-bottom: 1.5px solid var(--zap);
  transform: rotate(-45deg);
}

/* ── 4. TRATAMENTOS ─────────────────────────────────────────────────── */

.tratamentos { padding: var(--respiro) var(--margem); background: var(--areia); border-block: 1px solid var(--linha); }
.tratamentos__topo { text-align: center; margin-bottom: 3.2rem; }

.grupo-titulo {
  max-width: 1180px;
  margin: 0 auto 1.2rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--linha);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta);
}
.grupo-titulo + .cartoes { margin-bottom: 3.2rem; }

.cartoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.cartao {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--nata);
  border: 1px solid var(--linha);
  border-radius: 4px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.cartao:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -32px rgba(42,35,32,.65); }
.cartao img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cartao div { padding: 1.4rem 1.4rem 1.6rem; }
.cartao h3 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.6rem; font-weight: 400; }
.cartao p { margin: 0; font-size: .98rem; color: var(--fumo); line-height: 1.6; }

/* ── 5. COMO FUNCIONA ───────────────────────────────────────────────── */

.consulta { padding: var(--respiro) var(--margem); text-align: center; }
.consulta .display { margin-bottom: 3.2rem; }

.regras { list-style: none; max-width: 820px; margin: 0 auto; padding: 0; text-align: left; }
.regras li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  align-items: start;
  gap: 0 .4rem;
  /* o mesmo respiro em cima, embaixo e nos lados: antes o texto encostava
     nas bordas da caixa destacada */
  padding: 1.7rem 1.9rem;
  border-top: 1px solid var(--linha);
  border-radius: 5px;
  transition: background .5s, box-shadow .5s, transform .5s cubic-bezier(.2,.8,.25,1);
}
.regras li:last-child { border-bottom: 1px solid var(--linha); }
.regras__n {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--bronze);
  opacity: .55;
  transition: opacity .5s;
}
.regras h3 { margin: 0 0 .45rem; font-size: 1.18rem; font-weight: 500; line-height: 1.35; }
.regras p { margin: 0; font-size: 1rem; color: var(--fumo); max-width: 62ch; }

/* o passo em foco acompanha a rolagem */
.regras li.aceso {
  background: var(--areia);
  border-top-color: transparent;
  box-shadow: inset 0 0 0 1px var(--linha);
  transform: translateX(4px);
}
.regras li.aceso .regras__n { opacity: 1; }
.regras li.aceso + li { border-top-color: var(--linha); }

/* ── 6. CONSULTÓRIO ─────────────────────────────────────────────────── */

.sala { padding: var(--respiro) 0 var(--respiro) var(--margem); overflow: hidden; }
.sala__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-right: var(--margem);
  margin-bottom: 2.2rem;
}
.sala__topo .display { margin-bottom: 0; }
.sala__setas { display: flex; gap: .6rem; flex: none; }
.seta {
  width: 48px; height: 48px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: none;
  color: var(--tinta);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}
.seta:hover { background: var(--tinta); border-color: var(--tinta); color: var(--marfim); }

.carrossel {
  display: flex;
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel figure { flex: 0 0 min(62%, 620px); margin: 0; scroll-snap-align: start; }
.carrossel figure:last-child { padding-right: var(--margem); box-sizing: content-box; }
.carrossel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.carrossel figcaption {
  margin-top: .8rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fumo);
}

.carrossel__pontos { display: flex; gap: .5rem; margin: 1.4rem 0 0; }
.carrossel__pontos i { width: 26px; height: 2px; background: var(--linha); transition: background .3s; }
.carrossel__pontos i.aqui { background: var(--bronze); }

/* ── 7. ONDE E QUANDO ───────────────────────────────────────────────── */

.visita { padding: var(--respiro) var(--margem); background: var(--areia); border-top: 1px solid var(--linha); }
.visita__grade {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
}
.visita address { font-style: normal; color: var(--fumo); line-height: 1.9; max-width: 34ch; font-size: 1.02rem; }

.horarios { margin: 2rem 0 0; }
.horarios > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: .95rem 0;
  border-top: 1px solid var(--linha);
}
.horarios dt { font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; }
.horarios dd { margin: 0; color: var(--fumo); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1rem; }
.horarios__nota { margin: 1rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--fumo); max-width: 40ch; }

.mapa { position: relative; border: 1px solid var(--linha); border-radius: 4px; overflow: hidden; background: var(--nata); }
.mapa iframe { display: block; width: 100%; height: clamp(340px, 46vh, 460px); border: 0; filter: saturate(.85); }
.mapa__abrir {
  display: block;
  padding: 1rem 1.3rem;
  border-top: 1px solid var(--linha);
  background: var(--nata);
  font-size: .92rem;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--tinta);
  transition: background .25s;
}
.mapa__abrir:hover { background: var(--areia); }

/* ── rodapé ─────────────────────────────────────────────────────────── */

.rodape__logo { display: block; width: auto; height: 88px; margin: 0 auto 1.6rem; }

.rodape { padding: 3.8rem var(--margem) 4rem; border-top: 1px solid var(--linha); text-align: center; }
.rodape__nome { font-family: var(--display); font-size: 1.75rem; margin: 0 0 .4rem; }
.rodape__crm { margin: 0 0 1.4rem; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.rodape__linha { margin: .35rem 0; font-size: .94rem; color: var(--fumo); }
.rodape__linha a { text-decoration: none; border-bottom: 1px solid var(--linha); }
.rodape__linha a:hover { border-bottom-color: var(--bronze); }
.rodape__aviso { margin: 2.2rem auto 0; max-width: 54ch; font-size: .84rem; color: var(--fumo); }

/* ── barra do celular ───────────────────────────────────────────────── */

.barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(250,247,242,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--linha);
  transform: translateY(115%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.barra span { font-size: .74rem; line-height: 1.35; color: var(--fumo); }
.barra span b { display: block; font-weight: 500; color: var(--tinta); }
.barra--visivel { transform: none; }

/* ── revelação ao rolar ─────────────────────────────────────────────── */

.surge { opacity: 0; transform: translateY(16px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.surge.visivel { opacity: 1; transform: none; }

/* ── telas menores ──────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .cartoes { grid-template-columns: repeat(2, 1fr); }
  .numeros__lista li { width: clamp(11rem, 30vw, 14rem); padding: .4rem 1.3rem; }
}

@media (max-width: 980px) {
  /* no celular a foto entra logo depois do título: a lente é a alma da
     página e não pode ficar abaixo do que a pessoa vê de primeira */
  /* No celular: o menu é uma barra isolada no topo, a foto começa abaixo dela
     e desce por trás do título. Onde o texto passa, um borrão + véu de marfim
     deixam a leitura limpa; o resto da foto continua nítido. */
  .topo {
    background: rgba(250,247,242,.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--linha);
    padding-block: .85rem;
  }

  .capa {
    grid-template-columns: 1fr;
    grid-template-areas: "palco" "cabeca" "resto";
    gap: 0;
    min-height: 0;
    padding: 0 var(--margem);
    background: var(--marfim);
  }
  .capa__cabeca, .capa__resto { width: auto; max-width: none; margin-left: 0; padding: 0; }
  .capa__cabeca {
    /* encosta só na faixa já dissolvida da foto. Antes eram -13svh: o título
       entrava em cima da imagem nítida e exigia um borrão para se ler —
       borrão que aparecia como uma faixa suja na borda. */
    margin-top: -3.5svh;
    position: relative;
    z-index: 3;
    padding-top: .6rem;
  }
  .capa__resto { position: relative; z-index: 3; padding-bottom: var(--respiro); }

  .palco {
    margin-inline: calc(-1 * var(--margem));
    margin-top: 3.9rem;        /* encosta na barra do menu: sobe a Dra. */
    display: block;
    cursor: default;
    /* a foto do celular é outra: uma banda larga com a Dra. do busto para
       cima. O retrato fechado do desktop não cabe aqui sem cortá-la. */
    --enquadre: 50% 42%;
  }
  /* a foto é dimensionada em svh para que ela, o título, o subtítulo e o
     botão caibam juntos na primeira tela do celular */
  .palco__base {
    height: 41svh;
    min-height: 245px;
    max-height: 370px;
    aspect-ratio: auto;
    /* dissolve longo e só na base: a foto vira fundo e entrega o marfim sem
       linha de corte. Nada de borrão — o degradê faz sozinho. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.55) 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.55) 78%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  /* o véu de marfim continua, mas SEM borrar: só o degradê da cor de fundo
     subindo por trás do título, para a leitura não depender da foto */
  .palco::after {
    content: '';
    position: absolute;
    inset: 46% 0 0 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(250,247,242,0) 0%,
      rgba(250,247,242,.45) 46%,
      rgba(250,247,242,.88) 78%,
      var(--marfim) 100%);
  }

  .palco__dica {
    left: auto;
    right: var(--margem);
    top: 1.1rem;
    bottom: auto;
    background: rgba(250,247,242,.92);
  }

  .medica__grade, .visita__grade { grid-template-columns: 1fr; }
  .medica__foto { max-width: 420px; }
  .medica__foto::before { inset: -1.6rem auto -1.6rem -1.6rem; }
  .carrossel figure { flex: 0 0 min(78%, 520px); }
}

@media (max-width: 700px) {
  body { font-size: 17px; }

  /* A capa inteira escala com a ALTURA da tela, não só com a largura.
     Antes só a foto usava svh e o texto era fixo: num aparelho de 640 px o
     texto sozinho comia a dobra e o aviso ficava cortado. O `min(vw, svh)`
     faz o título encolher tanto em tela estreita quanto em tela baixa. */
  .capa h1, .capa .h1 {
    font-size: clamp(2.1rem, min(11.6vw, 6.2svh), 3.4rem);
    line-height: 1.02;
    margin-bottom: min(.75rem, 1.4svh);
  }
  .capa .etiqueta {
    font-size: clamp(.7rem, min(3.4vw, 1.55svh), .82rem);
    letter-spacing: .18em;
    margin-bottom: min(.9rem, 1.7svh);
    white-space: nowrap;
  }
  .capa .lead {
    font-size: clamp(.9rem, min(4vw, 2.05svh), 1rem);
    line-height: 1.44;
    margin-bottom: 0;
  }
  .capa .acoes { margin-top: min(1.05rem, 2.2svh); }
  .capa .botao { padding: min(.95rem, 1.9svh) 1.6rem; }
  .aviso-particular {
    margin-top: min(.8rem, 1.7svh);
    padding-top: min(.65rem, 1.4svh);
    font-size: clamp(.8rem, min(3.6vw, 1.8svh), .88rem);
  }
  .selo-particular { display: none; }
  .so-largo { display: none; }
  .marca__logo { height: 38px; }
  .topo.compacto .marca__logo { height: 33px; }
  .rodape__logo { height: 72px; }
  .topo { gap: .6rem; }
  .topo__dir { gap: .55rem; }
  .botao--peq { padding: .68rem 1.05rem; font-size: .74rem; }
  .barra { display: flex; }
  .rodape { padding-bottom: 7.5rem; }

  .lente { width: 74px; height: 74px; }   /* tela pequena: a lupa não pode comer a foto */
  /* o cartão fica DENTRO da foto, um por vez, centrado na parte nítida */
  .cartao-lente,
  .cartao-lente--esquerda {
    left: var(--margem); right: auto;
    top: auto; bottom: 34%;
    max-width: none;
    padding: .36rem .55rem;
    transform: translate(0, 8px) scale(.98);
  }
  .cartao-lente.aberto,
  .cartao-lente--esquerda.aberto { transform: translate(0, 0) scale(1); }
  .cartao-lente b { font-size: .68rem; line-height: 1.25; }
  .cartao-lente i { font-size: .6rem; margin-top: .1rem; }

  /* a dica some no celular: a lente já anda sozinha, o convite é ela mesma —
     e o balão batia em cima do cartão da credencial */
  .palco__dica { display: none; }
  .cartoes { grid-template-columns: 1fr; }
  .numeros__lista li { width: clamp(10.5rem, 46vw, 13rem); padding: .3rem 1.1rem; }
  .numeros__lista b { font-size: 1.9rem; }
  .numeros__lista li > span { font-size: .86rem; }
  .regras li { grid-template-columns: 1fr; gap: .5rem; }
  .horarios > div { flex-direction: column; gap: .15rem; }
  .sala__topo { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .medica__foto figcaption { right: auto; left: 1rem; bottom: -1rem; }
  .acoes .botao { width: 100%; justify-content: center; }
  .barra .botao { width: auto; }
}

/* Telas baixas (SE, Androids com muita barra de navegador): mesmo com tudo
   escalando, o texto tem um piso de legibilidade e a foto precisa ceder um
   pouco para o aviso do particular não ficar cortado. */
@media (max-width: 700px) and (max-height: 690px) {
  .palco { margin-top: 3.4rem; }
  .palco__base { height: 35svh; min-height: 0; }
  .capa__cabeca { margin-top: -3svh; }
  .capa .lead { font-size: .88rem; line-height: 1.4; }
  .aviso-particular { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carrossel { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .surge { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AVALIAÇÕES DO GOOGLE
   O resumo é fato (nota e contagem) e fica sempre; os cartões só existem
   quando a API responde. Nada aqui pode parecer quebrado sem eles.
   ═══════════════════════════════════════════════════════════════════════ */

.prova {
  padding: var(--respiro) var(--margem);
  background: var(--areia);
}
.prova__resumo { max-width: 1200px; margin-inline: auto; }
.prova__resumo .display { margin-bottom: 1.6rem; }

.prova__media {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin: 0 0 1.8rem;
}
.prova__media b {
  font-family: var(--serifa);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.prova__estrelas { display: inline-flex; gap: .18rem; align-self: center; }
.prova__estrelas svg { width: 17px; height: 17px; color: var(--bronze); }
.prova__estrelas svg.vazia { color: var(--linha); }
.prova__conta { font-size: 1rem; color: var(--fumo); }

/* o trilho sangra até a borda direita da tela: o cartão cortado é o que
   avisa que tem mais coisa para o lado */
.prova__trilho {
  max-width: 1200px;
  margin: 2.4rem auto 0;
}
.prova__lista {
  display: flex;
  gap: clamp(.9rem, 1.6vw, 1.4rem);
  margin: 0;
  padding: 0 0 .5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;   /* mandatory cancela o scrollTo suave no iOS */
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.prova__lista::-webkit-scrollbar { display: none; }
.prova__lista { align-items: stretch; }   /* cartões da mesma altura */
.prova__lista > li { flex: 0 0 min(88%, 21rem); scroll-snap-align: start; }

/* com 28 avaliações, 28 tracinhos viram ruído: a posição vira uma barra
   fina cujo pedaço aceso é a fatia visível do trilho */
.prova__pontos {
  position: relative;
  max-width: 1200px;
  height: 2px;
  margin: 1.4rem auto 0;
  background: var(--linha);
}
.prova__pontos i {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  background: var(--bronze);
  transition: transform .35s cubic-bezier(.2,.8,.25,1);
  transform-origin: left center;
}

.prova__cartao {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.3rem 1.4rem;
  background: var(--marfim);
  border: 1px solid var(--linha);
  border-radius: 3px;
}
.prova__quem { display: flex; align-items: center; gap: .7rem; }
.prova__avatar {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--areia);
}
/* sem foto no perfil do Google: a inicial no lugar do avatar cinza padrão */
.prova__inicial {
  display: grid;
  place-items: center;
  font-family: var(--serifa);
  font-size: 1.1rem;
  color: var(--bronze);
  border: 1px solid var(--linha);
}
.prova__nome { display: block; font-size: .95rem; color: var(--tinta); }
.prova__quando { display: block; margin-top: .1rem; font-size: .78rem; color: var(--fumo); }
.prova__cartao .prova__estrelas svg { width: 13px; height: 13px; }
.prova__texto {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--fumo);
  white-space: pre-line;           /* a pessoa quebrou linha: respeitar */
  /* avaliação longa não pode esticar um cartão e deixar os outros ocos */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.prova__cartao a {
  margin-top: auto;
  font-size: .8rem;
  color: var(--bronze);
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
  align-self: flex-start;
  padding-bottom: 2px;
}
.prova__cartao a:hover { border-bottom-color: var(--bronze); }

/* o link para o Google é secundário: tira gente da página, então não pode
   competir com o botão de agendar */
.prova__vertodas {
  align-self: center;
  font-size: .92rem;
  color: var(--fumo);
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
  padding-bottom: 3px;
  transition: color .25s, border-color .25s;
}
.prova__vertodas:hover { color: var(--tinta); border-bottom-color: var(--bronze); }

.prova__fonte {
  max-width: 1200px;
  margin: 1.6rem auto 0;
  font-size: .8rem;
  color: var(--fumo);
}
.prova__fonte[hidden] { display: none; }

@media (max-width: 700px) {
  .prova__media b { font-size: clamp(2.2rem, 12vw, 2.8rem); }
  .prova__lista > li { flex: 0 0 min(84%, 19rem); }
  .prova__texto { -webkit-line-clamp: 6; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PERGUNTAS FREQUENTES
   ═══════════════════════════════════════════════════════════════════════ */

.duvidas { padding: var(--respiro) var(--margem); }
.duvidas__grade {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  max-width: 1200px;
  margin-inline: auto;
}
.duvidas__intro { position: sticky; top: 7rem; }
.duvidas__intro p { color: var(--fumo); max-width: 34ch; }

.duvidas__lista { border-top: 1px solid var(--linha); }

.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary h3 {
  margin: 0;
  font-family: var(--corpo);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--tinta);
  transition: color .25s;
}
.pergunta summary:hover h3 { color: var(--bronze); }

.pergunta__sinal {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
  margin-top: .35rem;
}
.pergunta__sinal::before,
.pergunta__sinal::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--bronze);
  transition: transform .35s cubic-bezier(.2,.8,.25,1);
}
.pergunta__sinal::before { width: 16px; height: 1.5px; transform: translate(-50%, -50%); }
.pergunta__sinal::after  { width: 1.5px; height: 16px; transform: translate(-50%, -50%); }
.pergunta[open] .pergunta__sinal::after { transform: translate(-50%, -50%) scaleY(0); }

.pergunta__resposta { padding: 0 0 1.6rem; }
.pergunta__resposta p { margin: 0; max-width: 62ch; font-size: 1rem; color: var(--fumo); }

@media (max-width: 980px) {
  .duvidas__grade { grid-template-columns: 1fr; }
  .duvidas__intro { position: static; }
}

/* ═══════════════════════════════════════════════════════════════════════
   INSTAGRAM NO MENU · BOTÃO FLUTUANTE · MAPA SEM TELA BRANCA
   ═══════════════════════════════════════════════════════════════════════ */

.ico-link {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  color: var(--tinta);
  text-decoration: none;
  transition: border-color .25s, color .25s, background .25s;
}
.ico-link .ico { width: 19px; height: 19px; }
.ico-link:hover, .ico-link:focus-visible { border-color: var(--bronze); color: var(--bronze); background: rgba(156,117,72,.07); }

/* acompanha a página inteira, fora da primeira dobra */
.flutuante {
  position: fixed;
  right: clamp(1.2rem, 2.5vw, 2.2rem);
  bottom: clamp(1.2rem, 2.5vw, 2.2rem);
  z-index: 46;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: var(--zap);
  color: #fff;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 18px 40px -18px rgba(23,117,76,.9);
  opacity: 0;
  transform: translateY(16px) scale(.96);
  pointer-events: none;
  transition: opacity .4s, transform .4s cubic-bezier(.2,.8,.25,1), background .25s;
}
.flutuante .ico { width: 1.25em; height: 1.25em; flex: none; }
.flutuante.aparece { opacity: 1; transform: none; pointer-events: auto; }
.flutuante:hover { background: var(--zap-forte); }

/* o mapa mostra um cartão enquanto o iframe não chega — nada de área branca */
.mapa { position: relative; min-height: clamp(340px, 46vh, 460px); }
.mapa__vazio {
  position: absolute;
  /* cobre só a área do mapa, não o link da rota que fica abaixo */
  inset: 0 0 auto 0;
  height: clamp(340px, 46vh, 460px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(90deg, rgba(224,213,197,.35) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(224,213,197,.35) 0 1px, transparent 1px 46px),
    var(--areia);
  transition: opacity .6s;
}
.mapa__vazio.saiu { opacity: 0; pointer-events: none; }
.mapa__vazio b { font-size: 1rem; font-weight: 500; }
.mapa__vazio span:last-child { font-size: .88rem; color: var(--fumo); max-width: 26ch; }
.mapa__pino {
  width: 26px; height: 26px;
  border: 2px solid var(--bronze);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  margin-bottom: .5rem;
}
.mapa iframe { position: relative; z-index: 1; }

@media (max-width: 700px) {
  /* no celular a barra de baixo já é o contato permanente */
  .flutuante { display: none; }
  .ico-link { width: 38px; height: 38px; }
  .ico-link .ico { width: 17px; height: 17px; }
}