/* ── AS FONTES, DO PRÓPRIO DOMÍNIO ────────────────────────────────────────
   A política das páginas públicas da QG barra o Google Fonts. As duas são
   VARIÁVEIS (um arquivo serve todos os pesos) e só com o subconjunto latino.
   Playfair Display é a dos posts de antes e depois deles; Source Sans 3 é a
   parente livre da letra do logo. */
@font-face{font-family:'Playfair Display';src:url(/fontes/playfair.woff2) format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(/fontes/sourcesans.woff2) format('woff2');
  font-weight:200 900;font-style:normal;font-display:swap}

/* A LETRA DE RESERVA COM A MEDIDA DA OFICIAL: enquanto a fonte chega (swap),
   o texto sai em Arial/Georgia ajustadas para ocupar o mesmo espaço, e a troca
   não empurra a página (medido: Source Sans 3 = 92,6% da Arial; Playfair =
   102,5% da Georgia). Sem isso o contato tinha CLS de 0,2 no Lighthouse. */
@font-face{font-family:'SS3 reserva';src:local('Arial'),local('Helvetica'),local('Roboto');
  size-adjust:92.6%;ascent-override:110.6%;descent-override:43.2%;line-gap-override:0%}
@font-face{font-family:'Playfair reserva';src:local('Georgia'),local('Times New Roman'),local('Noto Serif');
  size-adjust:102.5%;ascent-override:105.6%;descent-override:24.5%;line-gap-override:0%}

/* ══ NERO NAVES · REDESENHO (30/09/2026) ═════════════════════════════════════
   Conceito: sala de estar de família, luz de fim de tarde, linho.
   A vida vem das PESSOAS (a família recortada na capa), não de objeto gerado.
   Um acento só: o verde do arco do logo. */
:root{
  /* papel e tinta (medidos na marca, IDENTIDADE.md §2.1) */
  --fundo:#F5F0EB; --papel:#FFFCF9; --linho:#EEE6DA; --linho-2:#E6DCCD;
  --tinta:#1B1919; --texto:#4D4B4A; --mudo:#696665; --linha:#DED7CF;
  /* o verde, em três alturas */
  --ac:#1B6E4D; --ac-esc:#1B4F3A; --ac-claro:#7EBEA5; --veu:#E4ECE5;
  /* a pendência: areia com letra marrom (7:1), SÓ no marcador numerado e no painel */
  --pd-fundo:#F4EAD6; --pd-tx:#6A4B17; --pd-fio:#C9AE78;
  --sombra-foto:0 1px 2px rgba(27,25,25,.08),0 18px 36px -18px rgba(27,25,25,.30);
  --maxw:1200px; --hd-h:102px; --gut:clamp(20px,5vw,48px);
  --gl:max(var(--gut),env(safe-area-inset-left)); --gr:max(var(--gut),env(safe-area-inset-right));
  --sec:clamp(80px,10vw,136px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --arco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='392 56 420 196'%3E%3Cpath fill='%231B6E4D' d='M398,226 C430,228 480,229.5 530,227.5 C580,221 630,207 680,183 C730,148 780,91 808,62 C804,92 780,158 755,190 C730,209 680,233 630,245.5 C580,248.5 530,248.5 480,246.5 C430,239.5 405,231.5 398,226Z'/%3E%3C/svg%3E");
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;min-width:0}
/* O grão (3%) mora no html: rola com a página e faz o creme parecer papel. */
html{-webkit-text-size-adjust:100%;background:var(--fundo) var(--grao);background-size:140px 140px}
body{margin:0;background:transparent;color:var(--texto);overflow-x:hidden;
  font:400 17px/1.62 'Source Sans 3','SS3 reserva',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
@media(min-width:900px){body{font-size:18px}}
img{max-width:100%;display:block}
picture{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:6px}
a,button,summary{-webkit-tap-highlight-color:transparent}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.nw{white-space:nowrap}

/* ── TIPOGRAFIA ──────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:'Playfair Display','Playfair reserva',Georgia,'Times New Roman',serif;font-weight:500;color:var(--tinta);margin:0;text-wrap:balance}
h1{font-size:clamp(38px,3.5vw,50px);line-height:1.08;letter-spacing:-.015em}
h2{font-size:clamp(30px,3.2vw,46px);line-height:1.1;letter-spacing:-.012em;max-width:20ch}
h3{font-size:clamp(22px,1.9vw,26px);line-height:1.2}
p{margin:0 0 16px;max-width:60ch;text-wrap:pretty}
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.55;color:var(--texto);max-width:40ch}
/* Rótulo em caixa alta: o ODONTOLOGIA do logo. Leva o arco pequeno na frente. */
.olho{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:13px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ac-esc)}
.olho svg{width:26px;height:auto;flex:0 0 auto}
.cab{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,56px)}
.cab p{margin:0}

/* o dado que falta: o lugar dele, entre colchetes, em cinza */
.vz{color:var(--mudo)}

/* ── AVISO + CABEÇALHO ───────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:40;background:rgba(238,230,218,0);
  transition:background .25s ease,box-shadow .25s ease}
header.rolou{background:rgba(255,252,249,.92);-webkit-backdrop-filter:saturate(140%) blur(12px);
  backdrop-filter:saturate(140%) blur(12px);box-shadow:0 1px 0 var(--linha)}
.hd{display:flex;align-items:center;gap:28px;max-width:var(--maxw);margin:0 auto;padding:12px var(--gr) 12px var(--gl)}
/* O LOGO DO CABEÇALHO E O LETREIRO DA CAPA (rodada 3). A capa já é o logo, grande,
   na parede atrás da família. Repetir o logo do cabeçalho na mesma dobra fazia
   dois "Nero Naves" um em cima do outro (no celular, a 40 px de distância).
   Decisão: enquanto o letreiro da capa está na tela, o cabeçalho fica
   transparente e sem logo; quando o letreiro passa por baixo do cabeçalho, o
   logo entra (o nn.js mede e põe .com-logo). Sem JavaScript o
   cabeçalho fica sem logo, e o letreiro e o rodapé seguem mostrando a marca.
   E o logo agora é GRANDE: 78 px no computador (era 60), 42 no celular. */
.marca{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;flex:0 0 auto;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s ease,transform .3s var(--ease),visibility 0s linear .3s}
header.com-logo .marca{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s var(--ease),visibility 0s}
.marca svg{display:block;width:auto}
.marca .logo-cheio{height:78px}
.marca .logo-curto{display:none;height:42px}
/* o menu com letra de ler de longe: 17,5 px, cor de tinta */
.hd nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.hd nav a:not(.bt){font-size:17.5px;font-weight:650;color:var(--tinta);text-decoration:none;letter-spacing:.005em;
  display:inline-flex;align-items:center;min-height:44px;position:relative;white-space:nowrap}
.hd nav a:not(.bt)::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;background:var(--ac);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.hd nav .zap{display:none}

/* ── BOTÕES ──────────────────────────────────────────────────────────────── */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;
  border-radius:999px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  font:600 17px/1 'Source Sans 3','SS3 reserva',sans-serif;background:var(--ac);color:#fff;
  box-shadow:0 10px 24px -14px rgba(27,79,58,.8);transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.bt svg{width:20px;height:20px;flex:0 0 auto}
.bt2{background:transparent;color:var(--ac-esc);box-shadow:inset 0 0 0 1.5px var(--ac)}
.bt-claro{background:var(--papel);color:var(--ac-esc);box-shadow:none}
.bt-linha-claro{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,252,249,.55)}
.bts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.bt:active{transform:scale(.97);background:var(--ac-esc)}
.bt2:active{background:var(--veu)}

section{padding:var(--sec) 0}

/* ══ A CAPA: O LETREIRO ══════════════════════════════════════════════════════
   Uma foto só: o logo em letra-caixa na parede e a família inteira do n05
   na frente (rodada 5: o homem de camisa vermelha, à esquerda, É o Dr. Luiz;
   a senhora de cabelo branco na frente é paciente e fica na foto). Pixel da
   foto deles: 1:1 no celular, reduzida a 0,82 no computador (os cinco não
   cabem inteiros antes do título em 1:1). O
   gerador registra o RESPIRO, o retângulo onde estão as pessoas e o letreiro:
   a página pode cortar parede, nunca esse retângulo (a bateria mede).
   Computador (1181+): a foto encosta na esquerda e no pé, com a altura da
   capa; o respiro acaba em 0,795 da altura (0,8 com folga), e o título mora na parede à
   direita. Até 1180: a foto inteira em cima e o texto embaixo. */
.capa{position:relative;overflow:hidden;padding:0;margin-top:calc(-1 * var(--hd-h));background:var(--fundo)}
.capa-foto{margin:0;position:relative}
.capa-foto img{width:100%;height:auto}
.capa .in{max-width:var(--maxw);margin:0 auto;padding:28px var(--gr) 64px var(--gl);position:relative;z-index:2}
.capa h1{max-width:none;letter-spacing:-.02em;line-height:1.02}
.arco-titulo{display:block;width:clamp(96px,8vw,128px);height:auto;margin:20px 0 0 2px;overflow:visible}
.capa .lead{margin-top:22px}
.capa .bts{margin-top:32px}
.capa .fatos{display:flex;flex-wrap:wrap;gap:6px 22px;margin:26px 0 0;padding:0;list-style:none;font-size:16px;color:var(--texto)}
.capa .fatos li{display:flex;align-items:center;gap:8px}
.capa .fatos li::before{content:"";width:17px;height:8px;background:no-repeat center/contain var(--arco);flex:0 0 auto;opacity:.85}
.atalhos{display:none}
@media(min-width:900px) and (max-width:1180px){
  /* a foto inteira (16:9) em cima; o título mora na parede vazia à direita do
     letreiro (o respiro acaba em 45% da largura), e o resto vem embaixo */
  .capa .titulo{position:absolute;left:50vw;right:var(--gr);top:calc(-56.25vw + var(--hd-h));height:calc(56.25vw - var(--hd-h));
    display:flex;flex-direction:column;justify-content:center}
  .capa h1{font-size:min(56px,calc((50vw - var(--gr)) / 6.9))}
  .capa .in{padding-top:36px}
  .cartao-capa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start}
  .cartao-capa .lead{margin-top:0;grid-column:1}
  .cartao-capa .bts{margin-top:0;grid-column:2;grid-row:1}
  .cartao-capa .fatos{grid-column:1}
  .cartao-capa .atalhos{grid-column:2;grid-row:2}
}
@media(min-width:1181px){
  /* a altura da capa: a tela, até 860, e nunca tão alta que o respiro coma a
     coluna do título (sobram pelo menos 600 px de parede à direita) */
  /* --capa-t: quando a capa fica baixa (tela de 1181 a ~1300), o alto das
     letras (2,7% da foto) chegaria na linha do menu; a foto desce o que
     faltar para ficar 70 px abaixo do topo, e a faixa de cima é a mesma
     parede, em degradê */
  .capa{--capa-h:max(600px,min(calc(100svh - 34px),860px,calc((100vw - 600px) / 0.8)));
    --capa-t:max(0px,calc(70px - var(--capa-h) * 0.027));
    min-height:calc(var(--capa-h) + var(--capa-t));
    background:linear-gradient(to right,#DAD4CC 0,#E9E3DD 22%,#F5F0EB 48%,#FAF5F0 70%)}
  .capa-foto{position:absolute;left:0;bottom:0;height:var(--capa-h);z-index:1}
  .capa-foto picture{height:100%}
  /* a parede some no creme à direita da foto e no alto (só parede nesses trechos) */
  .capa-foto img{height:100%;width:auto;max-width:none;
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 9%),linear-gradient(to bottom,transparent 0,#000 22px);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to left,transparent 0,#000 9%),linear-gradient(to bottom,transparent 0,#000 22px);
    mask-composite:intersect}
  .capa .in{min-height:calc(var(--capa-h) + var(--capa-t));max-width:none;display:flex;align-items:center;
    padding:calc(var(--hd-h) + 20px) var(--gr) 56px calc(var(--capa-h) * 0.8 + 56px)}
  .capa .texto{max-width:600px}
  /* "para família." tem 6,3 em e não quebra: a letra cresce até 72 px e cabe na coluna */
  .capa h1{font-size:min(72px,calc((100vw - var(--capa-h) * 0.8 - 56px - var(--gr)) / 6.9))}
}
.cartao-capa{display:block}

/* ══ MARCAR ══════════════════════════════════════════════════════════════════ */
.marcar-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.urgencia{margin-top:34px;background:var(--ac-esc);color:#EEF3EF;border-radius:22px;padding:26px 28px 28px;
  position:relative;overflow:hidden}
.urgencia::before{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(126,190,165,.28),rgba(126,190,165,0) 70%)}
.urgencia::after{content:"";position:absolute;right:20px;top:24px;width:70px;height:33px;opacity:.3;pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='392 56 420 196'%3E%3Cpath fill='%237EBEA5' d='M398,226 C430,228 480,229.5 530,227.5 C580,221 630,207 680,183 C730,148 780,91 808,62 C804,92 780,158 755,190 C730,209 680,233 630,245.5 C580,248.5 530,248.5 480,246.5 C430,239.5 405,231.5 398,226Z'/%3E%3C/svg%3E")}
.urgencia>*{position:relative;z-index:1}
.urgencia strong{display:block;font:500 26px/1.15 'Playfair Display','Playfair reserva',Georgia,serif;color:#fff;margin-bottom:8px}
.urgencia p{margin:0 0 20px;color:#E4ECE6;font-size:17px}
.portas{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.portas li{border-bottom:1px solid var(--linha)}
.portas a{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:6px 20px;align-items:center;
  padding:24px 4px;text-decoration:none;color:inherit}
.portas h3{grid-column:1}
.portas p{grid-column:1;margin:0;font-size:16.5px;color:var(--mudo)}
.portas .acao{grid-column:1;font-size:16px;font-weight:600;color:var(--ac-esc);margin-top:4px}
.portas .seta{grid-column:2;grid-row:1/span 3;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--linha);color:var(--ac-esc);transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s var(--ease)}
.portas .seta svg{width:18px;height:18px}
.trat{margin-top:44px}
.trat>p{margin:0 0 14px;font-size:16px;color:var(--mudo)}
.pilulas{display:flex;flex-wrap:wrap;gap:10px}
.pilula{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 22px;border-radius:999px;text-decoration:none;
  background:var(--papel);box-shadow:inset 0 0 0 1px var(--linha);color:var(--ac-esc);
  font:500 18px/1 'Playfair Display','Playfair reserva',Georgia,serif;transition:box-shadow .2s ease,background .2s ease}
.pilula:active{background:var(--veu)}

/* ══ OS DENTISTAS: DUAS GERAÇÕES, EM FAIXAS ═════════════════════════════════
   Rodada 4: cada par ganha a foto dos dois. Os pais (a n11, que estava por
   engano na galeria de pacientes) com a foto à esquerda; o filho e a noiva
   (o retângulo dos dois no n05, sem as placas) com a foto à direita. A foto é
   uma cópia impressa, como as da galeria, e não é link (mostra duas pessoas).
   Sem rótulo que classifique: o par já conta. O CARTÃO INTEIRO é um link só
   (a moldura redonda com a inicial e o nome), que abre a folha com a
   mensagem daquele dentista; o CRO e o parentesco ficam fora do link, para o
   marcador de pendência não virar link dentro de link. Tetos do laboratório:
   casal até 640 px, filho e noiva até 400 (320 em tela de alta densidade). */
.dentistas{background:var(--papel)}
.geracoes{display:grid;gap:clamp(24px,3.4vw,44px)}
.par{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.6vw,72px);align-items:center;
  padding:clamp(22px,3.6vw,52px);border-radius:30px;background:var(--fundo);box-shadow:inset 0 0 0 1px var(--linha);overflow:hidden}
.par-filhos{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.par-filhos .foto-par{grid-column:2;grid-row:1}
.par-filhos .dupla{grid-column:1;grid-row:1}
/* o arco do logo, grande e claro, no canto do lado do texto */
.par::after{content:"";position:absolute;right:-34px;bottom:-30px;width:240px;height:112px;pointer-events:none;opacity:.12;
  background:no-repeat center/contain var(--arco)}
.foto-par{position:relative;z-index:1;margin:0;justify-self:center;width:100%;background:var(--papel);padding:10px;border-radius:8px;
  box-shadow:var(--sombra-foto);transform:rotate(var(--giro,0deg));transition:translate .45s var(--ease),box-shadow .45s ease}
.foto-par img{width:100%;height:auto;border-radius:3px}
.foto-pais{max-width:580px;--giro:-1deg}
.foto-filhos{max-width:420px;--giro:1.2deg}
@media(min-resolution:1.5dppx){.foto-filhos{max-width:340px}}
.dupla{position:relative;z-index:1;display:grid;gap:clamp(24px,2.8vw,34px)}
.dentista{margin:0;position:relative}
/* O CARTÃO (rodada 5, "me dá até tontura"): o cartão inteiro é o link. Três
   degraus e nada mais: o nome; uma linha de função com o CRO; o parentesco.
   Tudo em 16 px na cor do texto (o cinza fica só no "a preencher", curto,
   sem colchete). O "Marcar horário" desce para uma linha própria, com ar em
   cima. Mesmo ritmo nos quatro e no celular. */
.cartao{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;align-items:start;
  text-decoration:none;color:inherit;border-radius:18px;padding:6px;margin:-6px}
.cartao .txt{display:block;min-width:0}
.retrato{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(90% 80% at 50% 30%,#FFFCF9 0%,var(--linho) 100%);box-shadow:inset 0 0 0 1px var(--linha);
  transition:transform .3s var(--ease),box-shadow .3s ease,background .3s ease}
.retrato .ini{font:500 27px/1 'Playfair Display','Playfair reserva',Georgia,serif;color:var(--ac-esc);margin-top:-2px;transition:color .3s ease}
.dentista h3{margin:3px 0 0;font-size:clamp(19px,1.6vw,22px);line-height:1.25;color:var(--tinta);text-wrap:balance}
.dentista h3 span{background:linear-gradient(var(--ac),var(--ac)) 0 100%/0 1.5px no-repeat;transition:background-size .3s var(--ease)}
.dentista .func,.dentista .rel{display:block;font-size:16px;line-height:1.45;color:var(--texto)}
.dentista .func{margin-top:6px}
.dentista .rel{margin-top:2px}
.dentista .pp{color:var(--mudo);font-style:italic}
.dentista .quer{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:16px;font-weight:600;color:var(--ac-esc)}
.dentista .quer svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.cartao:active .retrato{transform:scale(.95)}
.dentistas .fecho{margin:36px 0 0;color:var(--mudo);font-size:16px}

/* ══ CRIANÇA ════════════════════════════════════════════════════════════════
   A dentista de jaleco de bichinhos abraçada ao menino, INTEIRA e grande (até
   720 px, o teto do laboratório). Sem moldura que corte: o quadro é a própria
   foto. */
.crianca{position:relative;overflow:clip}
.crianca::before{content:"";position:absolute;right:-12vw;top:10%;width:56vw;max-width:760px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--veu) 0%,rgba(228,236,229,0) 68%);pointer-events:none}
.lado{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(40px,6vw,88px);align-items:center}
/* no computador a foto fica à esquerda, nas duas linhas; no celular o título vem antes dela */
.lado>.cab{grid-column:2;grid-row:1;align-self:end;margin-bottom:24px}
.lado>.foto-crianca{grid-column:1;grid-row:1/span 2}
.lado>.resto{grid-column:2;grid-row:2;align-self:start}
.foto-crianca{position:relative;margin:0;max-width:720px;width:100%;justify-self:center}
.foto-crianca img{width:100%;height:auto;border-radius:28px;box-shadow:var(--sombra-foto);position:relative;z-index:1}
/* ══ A GALERIA ══════════════════════════════════════════════════════════════
   Cópias impressas sobre a parede com luz lateral, em álbum: tamanhos
   diferentes, alturas desencontradas, giro leve. Nenhuma foto é cortada (a
   imagem inteira, com a proporção dela) e nenhuma passa do teto de tamanho do
   laboratório (n09 340 px, n08 420, n06 480, n10 560, n04 600). Sem
   legenda. A n11 saiu daqui
   (é o casal de dentistas, não paciente) e foi para a seção deles. */
.galeria-sec{position:relative;background:linear-gradient(160deg,#EEE9E3 0%,#F0EBE5 45%,#F3EEEA 100%)}
.galeria{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,26px);row-gap:clamp(26px,3.4vw,44px);align-items:start}
.copia{margin:0;background:var(--papel);padding:9px;border-radius:6px;box-shadow:var(--sombra-foto)}
.copia img{width:100%;height:auto;border-radius:2px}
.g{transform:rotate(var(--giro,0deg))}
.g1{grid-column:1/span 5;--giro:-1.4deg;max-width:600px}
.g2{grid-column:6/span 4;--giro:1.1deg;margin-top:84px;max-width:480px}
.g3{grid-column:10/span 3;--giro:-.8deg;margin-top:22px;max-width:420px}
.g4{grid-column:3/span 5;--giro:.9deg;margin-top:8px;max-width:560px}
.g5{grid-column:9/span 3;--giro:1.6deg;margin-top:64px;max-width:340px}
.copia{transition:translate .45s var(--ease),box-shadow .45s ease}

/* ══ PERGUNTAS: ACORDEÃO ════════════════════════════════════════════════════ */
.faq{max-width:860px;margin:0;padding:0;list-style:none;border-top:1px solid var(--linha)}
.faq li{border-bottom:1px solid var(--linha)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:72px;padding:18px 4px;font:500 clamp(19px,1.6vw,22px)/1.3 'Playfair Display','Playfair reserva',Georgia,serif;color:var(--tinta);text-wrap:balance}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--linha);
  background:linear-gradient(var(--ac-esc),var(--ac-esc)) center/12px 1.5px no-repeat,
             linear-gradient(var(--ac-esc),var(--ac-esc)) center/1.5px 12px no-repeat;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .resp{padding:0 4px 24px;font-size:17px;max-width:62ch}
.faq .resp p{margin:0}

/* ══ ONDE FICA: A SEÇÃO ESCURA (uma só na página) ══════════════════════════ */
.onde-sec{background:var(--tinta);color:#E9E4DF}
.onde-sec h2{color:var(--papel)}
.onde-sec .olho{color:var(--ac-claro)}
.onde-sec .vz{color:#BDB6AF}
.onde-sec p a:not(.m){color:#fff;text-underline-offset:4px;padding:10px 0;position:relative;z-index:1}
.onde{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.onde p{color:#DAD4CE;font-size:17.5px}
.placa{position:relative;border-radius:22px;padding:34px 34px 30px;background:#242222;box-shadow:inset 0 0 0 1px #34312F}
.placa::after{content:"";position:absolute;right:30px;top:34px;width:84px;height:40px;opacity:.55;pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='392 56 420 196'%3E%3Cpath fill='%237EBEA5' d='M398,226 C430,228 480,229.5 530,227.5 C580,221 630,207 680,183 C730,148 780,91 808,62 C804,92 780,158 755,190 C730,209 680,233 630,245.5 C580,248.5 530,248.5 480,246.5 C430,239.5 405,231.5 398,226Z'/%3E%3C/svg%3E")}
.placa .num{font:500 clamp(96px,11vw,156px)/.9 'Playfair Display','Playfair reserva',Georgia,serif;color:var(--ac-claro);margin:0 0 22px;letter-spacing:-.02em}
.placa .num+p{margin:0}
.placa .num+p b{color:#fff;font-weight:600}
.placa .sub{color:#BDB6AF}
.placa .fachada{margin:24px 0 0;padding-top:18px;border-top:1px solid #3A3634;font-size:16px;color:#BDB6AF}

/* ══ RODAPÉ ═══════════════════════════════════════════════════════════════ */
footer{background:var(--papel);padding:64px 0 40px;font-size:16px}
footer .topo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;
  padding-bottom:32px;border-bottom:1px solid var(--linha);margin-bottom:32px}
footer .logo-pe{height:84px;width:auto;display:block}
footer .lema{margin:0;color:var(--mudo);max-width:40ch}
footer .cols{display:grid;gap:28px 48px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0 0 10px;line-height:1.55;text-wrap:pretty}
footer a{color:var(--ac-esc);text-underline-offset:4px}
footer .lk{display:inline-flex;align-items:center;min-height:44px}
footer .etica{margin:28px 0 0;font-size:16px;color:var(--mudo);max-width:80ch}
footer .qg{margin:10px 0 0;font-size:16px;color:var(--mudo)}
footer details{margin-top:18px;border-top:1px solid var(--linha);scroll-margin-top:90px}
footer details summary{cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;color:var(--tinta);list-style:none}
footer details summary::-webkit-details-marker{display:none}
/* o mesmo sinal das perguntas: sem ele, "Privacidade" parecia um título solto */
footer details summary::after{content:"";flex:0 0 auto;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--linha);
  background:linear-gradient(var(--ac-esc),var(--ac-esc)) center/11px 1.5px no-repeat,
             linear-gradient(var(--ac-esc),var(--ac-esc)) center/1.5px 11px no-repeat;transition:transform .25s var(--ease)}
footer details[open] summary::after{transform:rotate(45deg)}
footer details p{font-size:16px;max-width:74ch}

/* ── BARRA FIXA (celular) E BOTÃO FIXO (computador) ─────────────────────── */
.fixa{position:fixed;z-index:30;transition:transform .3s var(--ease),opacity .3s ease}
.fixa:not(.visivel){transform:translateY(140%);opacity:0;pointer-events:none}
.fixa .ligar{display:none}
@media(min-width:900px){
  .fixa{right:28px;bottom:28px}
  .fixa .bt{box-shadow:0 18px 36px -16px rgba(27,25,25,.5)}
}

/* ── A FOLHA DO WHATSAPP ────────────────────────────────────────────────────
   Sobe de baixo no celular, cartão no centro a partir de 640. Três passos: o
   assunto, para quem, e a mensagem pronta. A linha de privacidade fica logo
   acima do botão verde, em TODA folha que tem botão. */
.veu{position:fixed;inset:0;z-index:90;display:none;background:rgba(27,25,25,.46);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.veu.on{display:flex;align-items:flex-end;justify-content:center}
.folha{position:relative;display:flex;flex-direction:column;width:100%;height:min(88%,680px);background:var(--papel);
  color:var(--texto);border-radius:26px 26px 0 0;overflow:hidden;box-shadow:0 -12px 40px -16px rgba(27,25,25,.35)}
.folha::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--ac-esc),var(--ac))}
.folha-topo{flex:0 0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:12px 12px 0;position:relative}
.alca{position:absolute;top:10px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:9px;background:var(--linha)}
.folha .ic{min-width:44px;height:44px;padding:0 12px;border:0;background:transparent;border-radius:999px;cursor:pointer;
  font:600 15.5px/1 'Source Sans 3','SS3 reserva',sans-serif;color:var(--ac-esc)}
.folha .ic.oculto{visibility:hidden}
.passo-n{text-align:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mudo)}
.folha-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 22px 18px}
.folha h2{font-size:28px;line-height:1.15;max-width:none;margin:6px 0 18px}
.folha h2:focus{outline:none}
.folha .sub{font-size:16px;color:var(--mudo);margin:-8px 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.coluna{flex-direction:column}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:10px 18px;border-radius:999px;border:0;cursor:pointer;
  background:var(--papel);box-shadow:inset 0 0 0 1px var(--linha);color:var(--tinta);text-align:left;font:500 16.5px/1.25 'Source Sans 3','SS3 reserva',sans-serif}
.chips.coluna .chip{border-radius:16px;width:100%}
.chip.ativo{box-shadow:inset 0 0 0 2px var(--ac);background:var(--veu);color:var(--ac-esc);font-weight:600}
.chip-urg{box-shadow:inset 0 0 0 1.5px var(--ac-esc);font-weight:600;color:var(--ac-esc)}
.link{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  font:600 16px/1.2 'Source Sans 3','SS3 reserva',sans-serif;color:var(--ac-esc);text-decoration:underline;text-underline-offset:4px;margin-top:8px;margin-right:18px}
.link.rapido{color:var(--mudo)}
.grupo{border:0;margin:0 0 14px;padding:0}
.grupo legend{padding:0;margin:0 0 8px;font-weight:600;font-size:15.5px;color:var(--tinta)}
.folha-pe{flex:0 0 auto;padding:14px 22px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--linha);background:var(--papel)}
.previa{background:var(--veu);border-radius:16px 16px 16px 4px;padding:12px 14px}
.previa span{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ac-esc);margin-bottom:4px}
.previa p{white-space:pre-line;margin:0;font-size:16px;line-height:1.45;color:var(--tinta);max-width:none;max-height:7.3em;overflow-y:auto}
.privac{font-size:14px;line-height:1.45;color:var(--mudo);margin:10px 0;max-width:none}
.enviar{display:flex;width:100%;min-height:54px}
@media(min-width:640px){
  .veu.on{align-items:center;padding:24px}
  .folha{width:min(560px,100%);height:min(660px,100%);border-radius:26px;box-shadow:0 30px 80px -30px rgba(27,25,25,.5)}
  .alca{display:none}
  .folha-corpo{padding:10px 34px 20px}.folha-pe{padding:14px 34px 22px}
}
body.folha-aberta{overflow:hidden}
/* Tela baixa (320x568, deitado): a folha ocupa a tela e o pé encolhe, para as
   escolhas do passo 3 não sumirem atrás da mensagem. */
@media(max-height:640px){
  .folha{height:calc(100% - 10px)}.folha h2{font-size:22px;margin-bottom:10px}
  .folha .sub{margin-bottom:10px}.previa{padding:8px 12px}
  .previa p{font-size:14.5px;max-height:4.4em}.privac{font-size:13px;margin:6px 0}.enviar{min-height:48px}
  .folha-pe{padding-top:10px}
}
/* Em pé e bem baixo (tela dividida, 390x440): a mensagem e o botão comiam a
   folha e a primeira escolha do passo 3 ficava cortada. A prévia mostra
   duas linhas (rola por dentro) e o topo encolhe. */
@media(max-height:480px) and (orientation:portrait){
  .folha-topo{padding-top:4px}.alca{display:none}
  .folha h2{font-size:20px;margin:2px 0 6px}.folha .sub{margin:0 0 8px}
  .grupo legend{margin-bottom:6px}
  .previa{padding:6px 12px}.previa span{margin-bottom:2px}
  .previa p{max-height:2.9em}.privac{margin:6px 0}
}
/* Deitado: a folha vira duas colunas, as escolhas à esquerda e a mensagem com
   o botão à direita. */
@media(orientation:landscape) and (max-height:500px){
  .veu.on{align-items:flex-end;padding:0}
  .folha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    width:min(820px,100%);height:calc(100% - 8px);border-radius:22px 22px 0 0}
  .folha-topo{grid-column:1/-1;padding-top:4px}.alca{display:none}
  .folha:has(.folha-pe[hidden]) .folha-corpo{grid-column:1/-1}
  .folha-pe{border-top:0;border-left:1px solid var(--linha);overflow-y:auto;padding:4px 20px 12px}
  .folha-corpo{padding:0 20px 12px}
}

/* ══ TABLET E CELULAR ═════════════════════════════════════════════════════ */
/* Até 1100 o menu não cabe inteiro no cabeçalho: fica o botão, e os atalhos
   descem para a capa. */
@media(max-width:1100px){
  .hd nav a:not(.bt){display:none}
  .atalhos{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
  .atalhos a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
    background:rgba(255,252,249,.75);box-shadow:inset 0 0 0 1px var(--linha);font-size:16px;color:var(--tinta);text-decoration:none;white-space:nowrap}
}
@media(max-width:899px){
  /* A capa vira coluna: a foto do letreiro (a de celular, 4:5) em cima, e o
     título e o cartão de papel embaixo, SEM subir por cima da foto (cobrir a
     barriga da família era cortar gente). */
  .capa{padding-bottom:28px}
  .capa .in{padding:24px 0 0}
  .capa h1,.capa .arco-titulo{margin-left:var(--gl);margin-right:var(--gr)}
  /* a linha "para família." tem 6,3 em de largura: a letra se ajusta à
     tela para ela caber inteira */
  .capa h1{font-size:min(56px,calc((100vw - 40px) / 6.9))}
  .arco-titulo{width:88px;margin-top:14px}
  .cartao-capa{position:relative;z-index:3;margin:22px 16px 0;padding:24px 20px 22px;background:var(--papel);
    border-radius:24px;box-shadow:0 1px 0 rgba(27,25,25,.04),0 24px 40px -28px rgba(27,25,25,.35)}
  .cartao-capa .lead{margin-top:0;font-size:17.5px}
  .cartao-capa .bts{margin-top:20px}
  .cartao-capa .bts .bt{flex:1 1 100%}
  .atalhos{margin:22px -20px 0;padding:0 20px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .atalhos::-webkit-scrollbar{display:none}
  .atalhos a{flex:0 0 auto;background:var(--fundo)}
  .marcar-grade,.lado,.onde{grid-template-columns:1fr}
  .lado>.cab,.lado>.foto-crianca,.lado>.resto{grid-column:1;grid-row:auto}
  .lado>.foto-crianca{margin-bottom:36px}
  .par,.par-filhos{grid-template-columns:1fr}
  .par-filhos .foto-par,.par-filhos .dupla{grid-column:auto;grid-row:auto}
  .fixa{left:0;right:0;bottom:0;display:flex;gap:10px;padding:10px var(--gr) calc(10px + env(safe-area-inset-bottom)) var(--gl);
    background:rgba(255,252,249,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--linha)}
  .fixa .bt{flex:1 1 auto;padding:0 16px}
  .fixa .ligar{display:inline-flex;flex:0 0 auto;width:52px;padding:0}
  .fixa .ligar span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  /* o fim da página sobe o tamanho da barra (e da área segura do iPhone); a
     faixa que sobra é do papel do rodapé, não do creme */
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom));background:linear-gradient(var(--papel),var(--papel)) bottom/100% calc(78px + env(safe-area-inset-bottom)) no-repeat}
}
@media(min-width:600px) and (max-width:899px){
  /* tablet de pé: os dois cartões de cada par lado a lado, embaixo da foto */
  .dupla{grid-template-columns:1fr 1fr}
  /* tablet de pé: a foto 4:5 inteira não caberia na largura toda (ficaria com
     960 px de altura); vira um quadro de 560 */
  .capa{margin-top:0}
  .capa-foto{max-width:560px;margin:12px auto 0}
  .capa-foto img{border-radius:28px}
}
@media(max-width:760px){
  :root{--hd-h:64px}
  .hd nav .bt:not(.zap){display:none}
  .hd nav .zap{display:inline-flex;padding:0 18px;min-height:44px;font-size:16px;background:rgba(255,252,249,.7)}
  .marca .logo-cheio{display:none}.marca .logo-curto{display:block}
  .hd{padding-top:10px;padding-bottom:10px}
  .portas a{padding:22px 0}
}
@media(max-width:599px){
  /* celular: a foto sangra nas laterais e passa POR BAIXO do cabeçalho; a
     faixa de cima (onde fica o botão do WhatsApp) é parede lisa, da cor do
     alto da foto, e a foto funde nela. O letreiro nunca fica sob o botão. */
  /* O TÍTULO NA PRIMEIRA TELA (revisão de celular, 30/09). Com a foto na
     largura toda, no iPhone de 390x664 (a tela do Safari com as barras) o
     "para família." ficava 66 px abaixo da dobra. A foto agora tem a
     largura que deixa caber, embaixo dela, o título inteiro: --fw é o menor
     entre a tela e o que sobra da altura (100svh menos aviso de 44, o
     cabeçalho, 44 de respiro e as duas linhas do título), dividido por
     1,156 (a foto tem 1,25 da largura; o alto dela, 9,4% da largura, é
     parede e passa por baixo do cabeçalho). As letras do letreiro começam
     em 12,5% da largura: ficam 3% abaixo do cabeçalho. Nas laterais a
     foto funde na parede (a gente começa em 7,5% da largura). */
  .capa-foto{--fw:min(100vw,max(72vw,calc((100vh - 44px - var(--hd-h) - 44px - 2.04 * min(56px,(100vw - 40px) / 6.9)) / 1.15625)));
    --fw:min(100vw,max(72vw,calc((100svh - 44px - var(--hd-h) - 44px - 2.04 * min(56px,(100vw - 40px) / 6.9)) / 1.15625)));
    padding-top:calc(var(--hd-h) - var(--fw) * 0.09375);background:linear-gradient(to right,#F6F1ED,#F0EBE5)}
  .capa-foto img{width:var(--fw);margin:0 auto;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px),linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,transparent 0,#000 34px),linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
    mask-composite:intersect}
  .capa .in{padding-top:20px}
  .par::after{width:170px;height:80px}
  .foto-par{padding:7px}
  .foto-filhos{max-width:334px}
  /* no celular o nome fica ao lado da moldura e o resto desce para a
     largura toda do cartão: a função com o CRO cabe numa linha */
  .cartao{grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:center}
  .cartao .txt{display:contents}
  .dentista h3{margin:0}
  .dentista .func,.dentista .rel,.dentista .quer{grid-column:1/-1}
  .dentista .func{margin-top:10px}
  .retrato{width:48px;height:48px}.retrato .ini{font-size:23px}
  /* a galeria em duas colunas, com a primeira de largura toda */
  .galeria{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:22px}
  .copia{padding:6px}
  .g{margin-top:0;max-width:none}
  .g1{grid-column:1/-1}
  .g2,.g4{grid-column:1}
  .g3,.g5{grid-column:2;margin-top:34px}
  .g3{max-width:360px}.g5{max-width:300px}
}
@media(max-width:899px){
  /* A parede gerada da galeria (1600x900) cobrindo uma seção alta e estreita
     era ampliada mais de 5 vezes e mostrava os quadrados do JPEG. A faixa
     que aparecia no celular é quase lisa: vira o degradê das cores dela. */
  .galeria-sec{background:linear-gradient(160deg,#EEE9E3 0%,#F0EBE5 45%,#F3EEEA 100%)}
}
@media(max-width:380px){
  /* 13 px (era 11, ilegível): o aviso é o "não é a página oficial". Para
     aviso e cabeçalho seguirem abaixo de 18% da tela em 320x568, o
     cabeçalho perde 4 px de respiro (60 px, com o botão de 44). */
  :root{--hd-h:60px}
  .hd{padding-top:8px;padding-bottom:8px}
  .par{gap:22px;padding:16px}
  .dentista h3{font-size:18px}
  .faq summary{gap:12px}.faq summary::after{width:34px;height:34px}
}
/* ZOOM DE 200% (390 vira 195): o botão "Pedir horário de urgência" não
   cabia numa linha e fazia a página rolar para o lado; o do cabeçalho era
   espremido pelo lugar do logo; o "Passo 1 de 3" da folha virava uma coluna
   de palavras. Aqui o botão pode quebrar, o logo encolhe e o passo desce
   para uma linha dele. */
@media(max-width:300px){
  .bt{white-space:normal;text-align:center;line-height:1.2;padding:10px 16px}
  .hd{gap:10px}.hd nav{flex:none}.hd nav .zap{white-space:nowrap}
  .marca{flex:1 1 auto;min-width:0}.marca .logo-curto{height:auto;width:100%;max-width:92px}
  .folha-topo{grid-template-rows:auto auto}
  .passo-n{grid-column:1/-1;grid-row:2;white-space:nowrap}
  .bt svg{display:none}.cartao-capa{margin-left:8px;margin-right:8px;padding-left:14px;padding-right:14px}
  /* a barra fixa: sem o ícone, com menos respiro e o Ligar de 44 */
  .fixa{gap:8px;padding-left:8px;padding-right:8px}
  .fixa .bt{padding:8px;font-size:16px}.fixa .bt svg{display:none}
  .fixa .ligar{width:44px}.fixa .ligar svg{display:block}
}
@media(orientation:landscape) and (max-height:500px){
  header{position:relative}.fixa{display:none}body{padding-bottom:0}
  /* deitado a foto do par inteira na largura passaria da altura da tela:
     foto e cartões lado a lado, como no computador */
  .par{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .par-filhos .foto-par{grid-column:2;grid-row:1}.par-filhos .dupla{grid-column:1;grid-row:1}
  .dupla{grid-template-columns:1fr}
  /* A foto da criança inteira na largura tinha o dobro da altura da tela:
     foto à esquerda, na altura da tela, e o texto à direita. */
  .lado{grid-template-columns:auto minmax(0,1fr)}
  .lado>.cab{grid-column:2;grid-row:1;align-self:end;margin-bottom:24px}
  .lado>.foto-crianca{grid-column:1;grid-row:1/span 2;margin-bottom:0;width:calc((100svh - 40px) * 1440 / 1520);max-width:calc((100vw - 120px) / 2)}
  .lado>.resto{grid-column:2;grid-row:2;align-self:start}
}
/* O CELULAR DEITADO (844x390). A foto 4:5 do letreiro na largura de 560 tinha
   700 px de altura numa tela de 390: a primeira tela era só a parede e o alto
   das letras. Deitado, a foto vai à esquerda, na altura da tela, e o título
   ao lado dela, embaixo do botão do WhatsApp; o cartão vem depois. */
@media(orientation:landscape) and (max-height:500px) and (max-width:899px){
  .capa{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px;align-items:end;
    margin-top:calc(-1 * var(--hd-h));padding:0 var(--gr) 28px var(--gl)}
  .capa .in,.capa .texto{display:contents}
  .capa-foto{grid-column:1;grid-row:1;max-width:none;margin:12px 0 0;padding:0;background:none}
  .capa-foto img{width:auto;height:calc(100svh - 48px);border-radius:24px}
  .capa .titulo{grid-column:2;grid-row:1;padding-bottom:8px}
  .capa h1,.capa .arco-titulo{margin-left:0;margin-right:0}
  .capa h1{font-size:min(56px,calc((100vw - (100svh - 48px) * 0.8 - 28px - var(--gl) - var(--gr)) / 6.9))}
  .cartao-capa{grid-column:1/-1;grid-row:2;margin:24px 0 0}
}

/* ── HOVER SÓ ONDE HÁ MOUSE ─────────────────────────────────────────────── */
@media(hover:hover){
  .bt:hover{background:var(--ac-esc);transform:translateY(-1px)}
  .bt2:hover{background:var(--veu)}
  .bt-claro:hover{background:#fff;color:var(--ac-esc)}
  .bt-linha-claro:hover{background:rgba(255,252,249,.1)}
  .hd nav a:not(.bt):hover::after{transform:scaleX(1)}
  .portas a:hover .seta{background:var(--ac);color:#fff;box-shadow:none;transform:translateX(4px)}
  .portas a:hover h3{color:var(--ac-esc)}
  .pilula:hover,.chip:hover{box-shadow:inset 0 0 0 1.5px var(--ac)}
  .pilula:hover{background:var(--veu)}
  .cartao:hover .retrato{transform:translateY(-3px);background:var(--ac);box-shadow:0 14px 24px -14px rgba(27,79,58,.7)}
  .cartao:hover .ini{color:#fff}
  .foto-par:hover,.copia:hover{translate:0 -6px;box-shadow:0 2px 4px rgba(27,25,25,.08),0 30px 44px -22px rgba(27,25,25,.38)}
  .cartao:hover h3 span{background-size:100% 1.5px}
  .cartao:hover .quer svg{transform:translateX(4px)}
  .faq summary:hover::after{box-shadow:inset 0 0 0 1.5px var(--ac)}
  .folha .ic:hover{background:var(--veu)}
}

/* ── AS ÂNCORAS: o título para abaixo do cabeçalho fixo ──────────────────── */
main section[id]{scroll-margin-top:72px}
@media(min-width:761px){main section[id]{scroll-margin-top:116px}}
/* deitado o cabeçalho não é fixo: o título para quase no topo */
@media(orientation:landscape) and (max-height:500px){main section[id]{scroll-margin-top:24px}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ══ O MOVIMENTO ══════════════════════════════════════════════════════════
   Regra: o primeiro quadro já é a página pronta. Nada esconde o título, o
   telefone ou o botão: só as fotos e os arcos se mexem na entrada. */
@media(prefers-reduced-motion:no-preference){
  /* Entrada da capa (uma vez, ao abrir): a foto sobe 12 px e acende; o arco sob
     o título se traça do fino para o grosso, como no logo. */
  .capa-foto img{animation:nn-sobe-foto .9s var(--ease) .05s both}
  .capa .arco-titulo{animation:nn-traco 1.1s var(--ease) .5s both}
  @keyframes nn-traco{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes nn-sobe-foto{from{opacity:.55;transform:translateY(12px)}}
  @keyframes nn-entra{from{opacity:0;transform:translateY(10px)}}
  .veu.on .folha{animation:nn-sobe .34s var(--ease) both}
  @keyframes nn-sobe{from{transform:translateY(100%)}}
  @media(min-width:640px){.veu.on .folha{animation:nn-surge .26s ease both}
    @keyframes nn-surge{from{opacity:0;transform:translateY(12px) scale(.985)}}}
  .folha-corpo>*{animation:nn-entra .24s var(--ease) both}
  /* a resposta do acordeão chega de leve ao abrir */
  .faq details[open] .resp{animation:nn-entra .32s var(--ease) both}

  @supports (animation-timeline:view()){
    /* SÓ IMAGEM SE MEXE AO ROLAR (10/10/2026). Bloco de TEXTO com animação ligada
       à rolagem vira camada de composição e, no Windows, a letra perde a nitidez
       (o Gabriel sentiu "embaçado, dá vertigem"). Texto fica parado. */
    .foto-crianca{animation:nn-surge2 linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes nn-surge2{from{opacity:.001;transform:translateY(18px)}to{opacity:1;transform:none}}
    /* A galeria: cada cópia chega de baixo, mais girada, e assenta no giro dela. */
    .g{animation:nn-assenta linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
    @keyframes nn-assenta{from{opacity:.001;transform:translateY(56px) rotate(calc(var(--giro,0deg) * 4))}to{opacity:1;transform:rotate(var(--giro,0deg))}}
    /* O olho de cada seção: o arco pequeno se desenha ao entrar. */
    .olho svg{animation:nn-traco linear both;animation-timeline:view();animation-range:entry 20% cover 35%}
  }
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ══ O SITE DE VERDADE (10/2026) ════════════════════════════════════════════
   Tudo daqui para cima é a demo aprovada. Daqui para baixo, o que o site real
   precisa a mais: menu entre páginas, topo das páginas internas, blocos de
   tratamento, cartões com retrato, rodapé com NAP e o aviso do WhatsApp. */
figure{margin:0}
.pular{position:absolute;left:12px;top:-60px;z-index:100;background:var(--tinta);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none}
.pular:focus{top:12px}

/* ── MENU ─────────────────────────────────────────────────────────────── */
.hd .nav-larga{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav-curta{display:none;margin-left:auto;align-items:center;gap:10px}
.drop,.menu{position:relative}
.drop summary,.menu summary{list-style:none;cursor:pointer}
.drop summary::-webkit-details-marker,.menu summary::-webkit-details-marker{display:none}
.drop summary{font-size:17.5px;font-weight:650;color:var(--tinta);display:inline-flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap}
.drop summary::after,.menu summary::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:translateY(-3px) rotate(45deg);transition:transform .2s ease}
.drop[open] summary::after,.menu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.drop-lista,.menu-lista{position:absolute;right:0;top:calc(100% + 8px);z-index:50;display:grid;min-width:250px;padding:10px;
  background:var(--papel);border-radius:18px;box-shadow:0 0 0 1px var(--linha),0 24px 44px -20px rgba(27,25,25,.35)}
.drop-lista{left:-16px;right:auto}
.hd .drop-lista a,.menu-lista a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;font-size:17px;font-weight:500;color:var(--tinta);text-decoration:none}
.hd .drop-lista a::after{display:none}
.drop-lista a[aria-current],.menu-lista a[aria-current]{color:var(--ac-esc);font-weight:650}
.menu summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:16px;
  color:var(--tinta);background:rgba(255,252,249,.75);box-shadow:inset 0 0 0 1.5px var(--linha)}
.menu-lista{width:min(300px,calc(100vw - 32px));max-height:calc(100svh - 90px);overflow-y:auto}
.nav-curta .zap{display:inline-flex;padding:0 18px;min-height:44px;font-size:16px;background:rgba(255,252,249,.7)}
.hd nav a[aria-current]:not(.bt)::after{transform:scaleX(1)}
@media(max-width:1180px){.hd .nav-larga{gap:20px}}
@media(max-width:1100px){.hd .nav-larga{display:none}.nav-curta{display:flex}}
@media(max-width:340px){.nav-curta .zap{padding:0 12px}.menu summary{padding:0 12px}}
@media(hover:hover){.drop-lista a:hover,.menu-lista a:hover{background:var(--veu);color:var(--ac-esc)}}

/* ── O AVISO DO WHATSAPP (embaixo de todo botão com mensagem pronta) ───── */
.aviso-zap{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--mudo);max-width:48ch}
.urgencia .aviso-zap{color:#CFE0D6;margin-top:14px}
.onde-sec .aviso-zap{color:#BDB6AF}
.marcar-grade .portas+.aviso-zap{margin-top:14px}

/* ── A FAIXA DO MEDO (home) e o lado invertido ──────────────────────────── */
.medo-sec{background:var(--veu);position:relative;overflow:clip}
.medo-sec .foto-crianca{max-width:480px}
.lado-inv{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.lado-inv>.cab{grid-column:1}.lado-inv>.resto{grid-column:1}.lado-inv>.foto-crianca{grid-column:2;max-width:520px}
.crianca .foto-crianca{max-width:520px}

/* ── O CARTÃO DO DENTISTA: retrato redondo e nome levam à página ────────── */
.dent{position:relative;padding-left:90px;min-height:72px}
.dent-link{display:block;text-decoration:none;color:inherit}
.dent-foto{position:absolute;left:0;top:0;width:72px;height:72px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 3px var(--papel),0 0 0 4px var(--linha);transition:transform .3s var(--ease),box-shadow .3s ease}
.dent-foto img{width:100%;height:100%;object-fit:cover}
.dent-nome{margin:4px 0 0;font-size:clamp(19px,1.6vw,22px);line-height:1.25;color:var(--tinta)}
.dent-nome span{background:linear-gradient(var(--ac),var(--ac)) 0 100%/0 1.5px no-repeat;transition:background-size .3s var(--ease)}
.dent-func,.dent-linha,.dent-rel{margin:0;font-size:16px;line-height:1.45;color:var(--texto);max-width:none}
.dent-func{margin-top:6px}
.dent-linha,.dent-rel{margin-top:2px}
.dent-quer{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;font-size:16px;font-weight:600;color:var(--ac-esc);text-decoration:none}
.dent-quer svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.par-equipe{grid-template-columns:1fr}
.par-equipe .dupla{grid-template-columns:1fr 1fr;column-gap:clamp(28px,4.6vw,72px)}
@media(hover:hover){
  .dent-link:hover .dent-foto{transform:translateY(-3px);box-shadow:0 0 0 3px var(--papel),0 0 0 4.5px var(--ac)}
  .dent-link:hover .dent-nome span{background-size:100% 1.5px}
  .dent-quer:hover svg,.lk-seta:hover svg{transform:translateX(4px)}
}

/* ── O TOPO DAS PÁGINAS INTERNAS ─────────────────────────────────────────── */
.topo-pag{padding:clamp(28px,4vw,56px) 0 clamp(56px,7vw,96px)}
.topo-grade{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,88px);align-items:center}
.topo-pag h1{font-size:clamp(34px,3.6vw,52px);max-width:22ch}
.topo-pag .lead{margin-top:22px;max-width:52ch}
.foto-topo{justify-self:center;width:100%;max-width:440px}
.foto-topo img{width:100%;height:auto;border-radius:28px;box-shadow:var(--sombra-foto)}
.migalhas{font-size:15px;color:var(--mudo);margin:0 0 22px}
.migalhas a{color:var(--ac-esc);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:32px}
.h-peq{font-size:22px;margin:28px 0 6px}

/* ── OS BLOCOS DE TRATAMENTO: título à esquerda, texto à direita ────────── */
.blocos-sec{padding-top:0}
.bloco{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:16px clamp(32px,5vw,80px);padding:clamp(28px,3.4vw,44px) 0;border-top:1px solid var(--linha)}
.bloco h2{font-size:clamp(26px,2.4vw,34px);max-width:16ch}
.bloco-txt>*:last-child{margin-bottom:0}
.bloco-txt ul{margin:0 0 16px;padding-left:22px;max-width:60ch}
.bloco-txt li{margin:0 0 6px}
.bloco-txt .bts{margin-top:18px}
.bloco-txt .pilulas{margin:18px 0 0;max-width:none}
.bloco-txt .quem{margin-top:22px}

/* ── QUEM FAZ ────────────────────────────────────────────────────────────── */
.quem-sec{background:var(--papel)}
.quem-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:28px}
.quem{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;align-items:center;padding:22px;border-radius:24px;
  background:var(--fundo);box-shadow:inset 0 0 0 1px var(--linha)}
.quem-foto img{width:160px;height:auto;border-radius:16px;box-shadow:var(--sombra-foto)}
.quem-txt h3{font-size:clamp(21px,1.8vw,24px)}
.quem-txt h3 a{color:var(--tinta);text-decoration:none}
.quem-txt p{margin:0;font-size:16px}
.quem-txt .dent-func{margin:6px 0 4px}
.quem-acoes{margin-top:8px!important}
.lk-seta{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--ac-esc);text-decoration:none}
.lk-seta svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.quem-sec .quem{background:var(--fundo)}
.blocos-sec .quem{background:var(--papel)}

/* ── PERGUNTAS NAS PÁGINAS, FAIXA CURTA ─────────────────────────────────── */
.faq .resp a{color:var(--ac-esc);text-underline-offset:3px}
.faixa-curta{padding:clamp(40px,5vw,64px) 0;background:var(--ac-esc);color:#E4ECE6}
.faixa-curta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.faixa-curta p{margin:0;font-size:clamp(18px,1.6vw,21px);max-width:56ch}
.faixa-curta b{font:500 clamp(22px,2vw,28px)/1.2 'Playfair Display','Playfair reserva',Georgia,serif;color:#fff;display:block;margin-bottom:4px}
.faixa-curta .bt2{background:var(--papel);color:var(--ac-esc);box-shadow:none}

/* ── A GALERIA DA PÁGINA DA CRIANÇA E AS FOTOS DE EQUIPE E CONTATO ──────── */
.galeria-3 .g1{grid-column:1/span 5;max-width:440px}
.galeria-3 .g2{grid-column:6/span 3;margin-top:70px;max-width:340px}
.galeria-3 .g3{grid-column:9/span 4;margin-top:16px;max-width:400px}
.equipe-fotos,.contato-fotos{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);align-items:start;margin-top:clamp(48px,6vw,80px)}
.equipe-fotos .g1{--giro:-1deg;max-width:600px}.equipe-fotos .g2{--giro:1.2deg;max-width:420px;margin-top:60px}
.contato-fotos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:820px}
.contato-fotos .g1{--giro:-1deg;max-width:400px}.contato-fotos .g2{--giro:1.2deg;max-width:320px;margin-top:50px}
.copia img{width:100%;height:auto}

/* ── EQUIPE ──────────────────────────────────────────────────────────────── */
.topo-equipe .lead{max-width:56ch}
.foto-equipe{margin-top:clamp(28px,4vw,48px);max-width:1000px}
@media(max-width:699px){.foto-equipe{max-width:420px}}
.foto-equipe img{width:100%;height:auto;border-radius:28px}
.equipe-sec{padding-top:0}
.equipe-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(36px,4vw,56px) clamp(24px,3vw,40px)}
.pessoa-foto{display:block;width:100%;max-width:200px}
.pessoa-foto img{width:100%;height:auto;border-radius:18px;box-shadow:var(--sombra-foto)}
.pessoa h2{font-size:clamp(22px,1.9vw,26px);margin-top:18px;max-width:none}
.pessoa h2 a{color:var(--tinta);text-decoration:none}
.equipe-sec .fecho{margin:40px 0 0;color:var(--mudo);font-size:16px}

/* ── PÁGINA DO DENTISTA: retrato de até 240 px ──────────────────────────── */
.dent-grade{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.retrato-grande{width:100%;max-width:240px}
.retrato-grande img{width:100%;height:auto;border-radius:22px;box-shadow:var(--sombra-foto)}
.dent-func-g{font-size:18px;margin:14px 0 6px;color:var(--tinta);font-weight:600}
.dent-qual{margin:0 0 4px;font-size:17px}
.dent-grade .topo-txt>p:not(.dent-qual):not(.dent-func):not(.atende-tit):not(.aviso-zap){margin-top:18px}
.atende-tit{margin:22px 0 10px;font-weight:600;color:var(--tinta)}
.dent-foto2{padding:0 0 clamp(56px,7vw,96px)}
.dent-foto2 .foto-par{max-width:560px;--giro:-.8deg;margin:0 auto}

/* ── ONDE FICA: a foto da entrada na placa ──────────────────────────────── */
.placa-foto{margin-top:24px}
.placa-foto img{width:100%;height:auto;border-radius:14px}
.onde-sec p a:not(.bt){color:#fff}

/* ── RODAPÉ ──────────────────────────────────────────────────────────────── */
footer .cols{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
footer .lista-links li{margin:0}
footer .lista-links a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;color:var(--texto)}
footer .lista-links a:hover{color:var(--ac-esc);text-decoration:underline}
footer .legal{margin-top:36px;padding-top:24px;border-top:1px solid var(--linha);font-size:15px;color:var(--mudo)}
footer .legal p{max-width:100ch;margin:0 0 10px}
footer .legal .legal-rt{font-size:13px;margin-bottom:4px}
footer .legal .credito{font-size:12px;margin:14px 0 0}
footer .legal .credito a{color:inherit;text-decoration:none}
footer .legal .credito a:hover{text-decoration:underline}

/* ── TEXTO LONGO E 404 ───────────────────────────────────────────────────── */
.texto-longo p{max-width:64ch}
.texto-longo h1{margin-bottom:28px}
.pag-404{min-height:60vh}
.pag-404 .pilulas{margin-top:28px}

/* ── ?revisar=1: tudo que depende da clínica acende ─────────────────────── */
body.revisar [data-confirmar]{background:var(--pd-fundo);box-shadow:0 0 0 2px var(--pd-fio);border-radius:4px}

/* ── TABLET E CELULAR ────────────────────────────────────────────────────── */
@media(max-width:899px){
  .topo-grade,.dent-grade,.bloco{grid-template-columns:1fr}
  .foto-topo{max-width:420px;justify-self:start}
  .lado-inv{grid-template-columns:1fr}
  .lado-inv>.cab,.lado-inv>.foto-crianca,.lado-inv>.resto{grid-column:1;grid-row:auto}
  .par-equipe .dupla{grid-template-columns:1fr}
  .equipe-fotos{grid-template-columns:1fr}
  .equipe-fotos .g2{margin-top:0}
  .retrato-grande{max-width:200px}
}
@media(min-width:600px) and (max-width:899px){.par-equipe .dupla{grid-template-columns:1fr 1fr}}
@media(max-width:599px){
  .dent{padding-left:74px;min-height:58px}
  .dent-foto{width:58px;height:58px}
  .quem{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px}
  .quem-foto img{width:96px}
  .galeria-3 .g1{grid-column:1/-1}.galeria-3 .g2{grid-column:1;margin-top:0}.galeria-3 .g3{grid-column:2;margin-top:34px}
  .contato-fotos .g2{margin-top:34px}
  .retrato-grande{max-width:180px}
  .faixa-curta .bt{width:100%}
  /* um botão por linha: a quebra não muda quando a fonte chega (era o CLS de 0,2 do contato) */
  .topo-pag .bts .bt,.onde .bts .bt{flex:1 1 100%}
}

/* ══ MAIS VIDA, SEM SUJAR (09/10/2026) ══════════════════════════════════════
   Retorno do dono: "pode ter mais vida, ainda está simples". O que entrou:
   fundo alternado (creme, papel, véu verde), números da casa, tratamentos em
   cartões com a imagem do assunto, os três passos da primeira consulta com
   ícone de traço, o arco do logo como desenho de fundo, a foto do topo em
   moldura com giro leve, os rostos de quem faz, ícone em cada pergunta e o
   mapa no contato. Movimento só na rolagem e só com prefers-reduced-motion
   liberado; o primeiro quadro já é a página inteira. */

/* ── FUNDOS ALTERNADOS ───────────────────────────────────────────────── */
.home-perguntas,.perguntas-sec{background:var(--papel)}
.blocos-sec{background:var(--papel);padding-top:clamp(40px,5vw,72px)}
.blocos-sec .bloco:first-child{border-top:0}
.quem-sec{background:transparent}
.quem-sec .quem{background:var(--papel)}
.blocos-sec .quem{background:var(--fundo)}

/* ── OS NÚMEROS DA CASA ──────────────────────────────────────────────── */
.numeros{padding:clamp(36px,4.6vw,60px) 0;background:var(--papel);border-bottom:1px solid var(--linha)}
.numeros-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(24px,4vw,64px)}
.num-item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;padding-left:clamp(0px,2vw,28px);border-left:1px solid var(--linha)}
.num-item:first-child{border-left:0;padding-left:0}
.num-n{margin:0;font:500 clamp(48px,5vw,68px)/1 'Playfair Display','Playfair reserva',Georgia,serif;color:var(--ac);letter-spacing:-.02em}
.num-n span{font-size:.55em;vertical-align:.55em;margin-left:2px}
.num-t{margin:0;font-size:16.5px;line-height:1.4;color:var(--texto);max-width:22ch}
.num-t a{color:var(--ac-esc);text-underline-offset:3px;display:inline-block;min-height:24px}

/* ── A IMAGEM DE OBJETO (gerada) NA SEÇÃO DO MEDO ────────────────────── */
.medo-sec .foto-objeto{max-width:440px;background:var(--papel);padding:10px;border-radius:10px;box-shadow:var(--sombra-foto);rotate:-1.2deg}
.medo-sec .foto-objeto img{border-radius:4px;box-shadow:none}

/* ── TRATAMENTOS EM CARTÕES ──────────────────────────────────────────── */
.trat-sec{position:relative}
.trat-grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,28px)}
.trat-cartao{position:relative;display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;background:var(--papel);
  border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--linha),0 18px 30px -26px rgba(27,25,25,.4);
  transition:transform .35s var(--ease),box-shadow .35s ease}
.trat-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--linho)}
.trat-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.trat-txt{display:grid;gap:4px;padding:18px 70px 22px 22px}
.trat-nome{font:500 clamp(21px,1.8vw,24px)/1.2 'Playfair Display','Playfair reserva',Georgia,serif;color:var(--tinta)}
.trat-linha{font-size:16px;line-height:1.4;color:var(--mudo)}
.trat-seta{position:absolute;right:18px;bottom:20px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--ac-esc);box-shadow:inset 0 0 0 1.5px var(--linha);transition:background .25s ease,color .25s ease,transform .25s var(--ease)}
.trat-seta svg{width:16px;height:16px}
@media(hover:hover){
  .trat-cartao:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--linha),0 26px 40px -24px rgba(27,25,25,.45)}
  .trat-cartao:hover .trat-img img{transform:scale(1.04)}
  .trat-cartao:hover .trat-seta{background:var(--ac);color:#fff;box-shadow:none;transform:translateX(3px)}
}

/* ── A PRIMEIRA CONSULTA, EM TRÊS PASSOS ─────────────────────────────── */
.passos-sec{background:var(--papel);position:relative;overflow:clip}
.passos-sec::after{content:"";position:absolute;pointer-events:none;width:min(520px,70vw);aspect-ratio:420/196;
  right:-4vw;bottom:-30px;background:no-repeat center/contain var(--arco);opacity:.07}
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);counter-reset:passo;position:relative}
/* o fio que liga os três ícones (no computador) */
.passos::before{content:"";position:absolute;left:36px;right:calc(33% - 36px);top:36px;border-top:1.5px dashed var(--ac-claro);opacity:.7}
.passos li{position:relative;counter-increment:passo}
.passo-ic{position:relative;z-index:1;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--veu);color:var(--ac-esc);
  box-shadow:0 0 0 8px var(--papel)}
.passo-ic svg{width:38px;height:38px}
.passos li::after{content:counter(passo);position:absolute;left:52px;top:-6px;z-index:2;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--ac);color:#fff;font:600 14px/1 'Source Sans 3','SS3 reserva',sans-serif}
.passos h3{margin:22px 0 8px;font-size:clamp(21px,1.8vw,24px)}
.passos p{margin:0;font-size:17px;color:var(--texto);max-width:34ch}

/* ── A GALERIA DO CONSULTÓRIO (home) ─────────────────────────────────── */
.galeria-casa .g1{grid-column:1/span 5;max-width:440px}
.galeria-casa .g2{grid-column:6/span 3;margin-top:80px;max-width:300px}
.galeria-casa .g3{grid-column:9/span 4;margin-top:24px;max-width:360px}

/* ── O TOPO DAS PÁGINAS INTERNAS: a imagem do assunto em moldura ─────── */
.topo-pag{position:relative;overflow:clip}
.topo-grade .foto-topo{position:relative;z-index:0;max-width:460px;background:var(--papel);padding:10px;border-radius:10px;
  box-shadow:var(--sombra-foto);rotate:1.2deg}
.topo-grade .foto-topo img{border-radius:4px;box-shadow:none}
.topo-grade .foto-topo::before{content:"";position:absolute;z-index:-1;left:-22%;bottom:-16%;width:120%;aspect-ratio:420/196;
  background:no-repeat center/contain var(--arco);opacity:.1;rotate:-1.2deg;pointer-events:none}

/* ── QUEM FAZ, OS ROSTOS NO TOPO ─────────────────────────────────────── */
.rostos{margin-top:28px}
.rostos-tit{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ac-esc)}
.rostos ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 14px}
.rostos a{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:4px 18px 4px 4px;border-radius:999px;background:var(--papel);
  box-shadow:inset 0 0 0 1px var(--linha);text-decoration:none;color:var(--tinta);font-weight:600;font-size:16px;transition:box-shadow .2s ease}
.rosto{display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;flex:0 0 auto}
.rosto img{width:100%;height:100%;object-fit:cover}
@media(hover:hover){.rostos a:hover{box-shadow:inset 0 0 0 1.5px var(--ac)}}

/* ── UM ÍCONE EM CADA PERGUNTA ───────────────────────────────────────── */
.faq summary{justify-content:flex-start}
.faq-ic{flex:0 0 auto;width:28px;height:28px;color:var(--ac);opacity:.9}
.faq-q{flex:1 1 auto}

/* ── A IMAGEM DE OBJETO NA PÁGINA DA DENTISTA SEM FOTO ───────────────── */
.dent-foto2 .foto-par-objeto{max-width:400px;--giro:1deg}

/* ── O MAPA (contato) ────────────────────────────────────────────────── */
.mapa{margin-top:clamp(40px,5vw,64px);max-width:1000px}
.mapa>a{display:block;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--linha),var(--sombra-foto)}
.mapa img{width:100%;height:auto}
.mapa figcaption{margin-top:10px;font-size:13px;color:var(--mudo)}
.mapa figcaption a{color:var(--mudo);display:inline-block;min-height:24px}

/* ── TABLET E CELULAR ────────────────────────────────────────────────── */
@media(max-width:1099px){.trat-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:899px){
  .numeros-in{grid-template-columns:1fr;gap:18px}
  .num-item{border-left:0;padding-left:0;grid-template-columns:76px minmax(0,1fr)}
  .num-item+.num-item{border-top:1px solid var(--linha);padding-top:18px}
  .num-t{max-width:none}
  .passos{grid-template-columns:1fr;gap:34px}
  .passos::before{left:36px;right:auto;top:36px;bottom:36px;border-top:0;border-left:1.5px dashed var(--ac-claro)}
  .passos li{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:20px}
  .passos li .passo-ic{grid-row:1/span 2}
  .passos h3{margin:8px 0 6px}
  .topo-grade .foto-topo{max-width:360px;justify-self:center;margin-top:8px}
  .medo-sec .foto-objeto{max-width:340px;justify-self:center}
}
@media(max-width:599px){
  .trat-grade{grid-template-columns:1fr;gap:12px}
  .trat-cartao{flex-direction:row;align-items:center;border-radius:16px}
  .trat-img{flex:0 0 96px;width:96px;height:96px;aspect-ratio:auto}
  .trat-txt{padding:12px 56px 12px 16px;gap:2px}
  .trat-nome{font-size:20px}
  .trat-linha{font-size:15px}
  .trat-seta{right:12px;top:50%;bottom:auto;margin-top:-18px;width:36px;height:36px}
  .galeria-casa .g1{grid-column:1/-1;max-width:300px}
  .galeria-casa .g2{grid-column:1;margin-top:0}
  .galeria-casa .g3{grid-column:2;margin-top:34px}
  .topo-grade .foto-topo{max-width:300px}
  .faq-ic{width:24px;height:24px}
  .rostos a{font-size:15px}
}

/* ── MOVIMENTO AO ROLAR (só com movimento liberado; nada fica escondido) ─ */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .mapa{animation:nn-surge2 linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .passo-ic{animation:nn-pulso linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    @keyframes nn-pulso{from{transform:scale(.82)}to{transform:none}}
  }
}

/* sem a seção "quem faz", as perguntas voltam ao creme (alterna com os blocos) */
.blocos-sec+.perguntas-sec{background:transparent}
@media(max-width:599px){.medo-sec .foto-objeto{max-width:290px}}

/* o foco de cada imagem gerada no corte do cartão (4:3 no computador, quadrado no celular) */
.trat-cartao[href*="sedacao"] img{object-position:50% 40%;transform-origin:50% 40%}
.trat-cartao[href*="infantil"] img{object-position:50% 38%;transform-origin:50% 38%}
.trat-cartao[href*="implante"] img{object-position:50% 64%;transform-origin:50% 64%}
.trat-cartao[href*="alinhador"] img{object-position:40% 58%;transform-origin:40% 58%}
.trat-cartao[href*="aparelho"] img{object-position:45% 50%;transform-origin:45% 50%}
.trat-cartao[href*="canal"] img{object-position:55% 60%;transform-origin:55% 60%}
.trat-cartao[href*="clareamento"] img{object-position:40% 52%;transform-origin:40% 52%}
.trat-cartao[href*="clinica-geral"] img{object-position:50% 50%;transform-origin:50% 50%}
.trat-cartao[href*="cirurgia"] img{object-position:45% 72%;transform-origin:45% 72%}
@media(max-width:599px){.trat-img img{transform:scale(1.5)}}
@media(max-width:599px) and (hover:hover){.trat-cartao:hover .trat-img img{transform:scale(1.55)}}
@media(max-width:599px){.contato-fotos .g1,.contato-fotos .g2{grid-column:auto}.contato-fotos{column-gap:14px}}