/* Dra. Sara Michelon — camada do site (home + landing pages)
   Depende de tokens.css e componentes.css. Só tokens semânticos. */

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--nevoa); }
.oe h1, .oe h2, .oe h3, .oe p { margin-top: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ameixa); color: #fff; padding: 10px 16px; border-radius: var(--raio-sm); }
.pular:focus { top: 12px; }

/* ---------- cabeçalho fixo ---------- */
.cab { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; transition: box-shadow .25s ease; }
.cab.is-rolado { box-shadow: var(--sombra-flutuante); }
.cab .oe-cabecalho__nav a { white-space: nowrap; }
.cab__lp-acao { display: inline-flex; min-height: 44px; padding: 8px 16px; font-size: 14px; }
@media (min-width: 1024px) { .cab__lp-acao { min-height: 46px; padding: 10px 22px; } }
.menu-mobile { display: none; background: var(--fundo-elevado); border-bottom: 1px solid var(--linha); }
.menu-mobile.is-aberto { display: block; }
.menu-mobile nav { display: grid; padding: var(--espaco-3) 0 var(--espaco-5); }
.menu-mobile a { font: 500 18px/24px var(--font-sans); color: var(--titulo); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.menu-mobile .oe-btn { margin-top: var(--espaco-5); border-bottom: 0; color: var(--sobre-acao); }
@media (min-width: 1024px) { .menu-mobile { display: none !important; } }

/* ==========================================================
   HERO DA HOME — "o dente é a janela"
   Estado padrão (sem JS ou com movimento reduzido): estático.
   Com .hero--anima o palco fica fixo e o scroll conduz a cena.
   ========================================================== */
/* --alvo: onde o sorriso fica na foto sem zoom (em % do palco) */
.hero { position: relative; background: var(--fundo); color: var(--texto); --cab: 64px; --alvo-x: var(--alvo-x-m, 66); --alvo-y: var(--alvo-y-m, 22); }
@media (min-width: 1024px) { .hero { --cab: 80px; --alvo-x: var(--alvo-x-d, 76); --alvo-y: var(--alvo-y-d, 50); } }
.hero__palco { position: relative; overflow: hidden; min-height: calc(100svh - var(--cab)); }

/* foto que mora atrás de tudo */
.hero__foto { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%;
  transform-origin: var(--fo-x, 64%) var(--fo-y, 24%); transform: scale(var(--zf, 1.55)); will-change: transform; }
@media (min-width: 1024px) { .hero__foto img { object-position: 78% 50%; transform-origin: var(--fo-x, 73%) var(--fo-y, 50%); } }

/* o dente: um véu ameixa com um furo em forma de dente */
.hero__dente { position: absolute; z-index: 1; pointer-events: none;
  width: min(52vw, 24svh); aspect-ratio: 200 / 240; right: var(--espaco-5); top: 16px;
  transform-origin: 50% 39.6%; }
@media (min-width: 1024px) {
  .hero__dente { width: min(34vw, calc((100svh - var(--cab)) * .62)); left: auto; right: max(3vw, calc((100vw - var(--conteudo-max)) / 2 - 2vw)); top: 50%; translate: 0 -48%; }
}
.hero__dente svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero__veu { fill: var(--ameixa); fill-rule: evenodd; }
.hero__contorno { fill: none; stroke: var(--malva); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero__contorno--eco { stroke-width: 1; stroke-opacity: .5; }
.hero__dente .hero__contorno { opacity: var(--op-contorno, 1); }
.hero__selo { fill: var(--ameixa); }

/* texto do hero */
.hero__texto { position: relative; z-index: 2; padding-top: calc(16px + min(52vw, 24svh) * 1.2 + var(--espaco-4)); padding-bottom: var(--espaco-7); }
@media (max-width: 1023px) {
  .hero__texto .oe-manchete__fecho { font-size: 19px; line-height: 26px; }
  .hero__texto .oe-lead { font-size: 17px; line-height: 26px; }
  .hero--anima .hero__texto .oe-hero__prova, .hero--anima .hero__texto .oe-link { display: none; }
}
@media (max-width: 1023px) and (max-height: 740px) { .hero--anima .hero__texto .oe-lead { display: none; } }
.hero__texto .oe-manchete__impacto { font-size: 46px; }
.hero__texto .oe-lead { margin-top: var(--espaco-4); }
.hero__texto .oe-acoes { margin-top: var(--espaco-5); }
.hero__texto .oe-hero__prova { margin-top: var(--espaco-5); padding-top: var(--espaco-4); }
.hero__texto .oe-hero__prova strong { font-size: 20px; line-height: 26px; }
@media (min-width: 1024px) {
  .hero__texto { position: absolute; inset: 0; padding: 0; display: flex; align-items: center; }
  .hero__texto > .oe-container { width: 100%; }
  .hero__texto-col { max-width: 560px; }
  .hero__texto .oe-manchete__impacto { font-size: 80px; line-height: .95; }
  .hero__texto .oe-lead { margin-top: var(--espaco-5); }
  .hero__texto .oe-acoes { margin-top: var(--espaco-6); }
  .hero__texto .oe-hero__prova { margin-top: var(--espaco-6); padding-top: var(--espaco-5); }
  .hero__texto .oe-hero__prova strong { font-size: 24px; line-height: 30px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .hero__texto .oe-manchete__impacto { font-size: 64px; }
  .hero__texto .oe-lead { font-size: 18px; line-height: 27px; }
  .hero__texto .oe-hero__prova { display: none; }
}

.hero__dica { display: none; }

/* painel do método (estático: vira uma seção logo abaixo do palco) */
.hero__metodo { position: relative; z-index: 3; background: var(--fundo); color: var(--texto); padding: var(--espaco-8) 0; border-top: 1px solid var(--linha); }
.hero__metodo .oe-titulo { max-width: 15ch; }
.metodo { list-style: none; margin: var(--espaco-6) 0 var(--espaco-6); padding: 0; display: grid; gap: 0; counter-reset: m; }
.metodo li { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--espaco-4); padding: var(--espaco-3) 0; border-top: 1px solid var(--linha); transition: opacity .35s ease; }
.metodo li:last-child { border-bottom: 1px solid var(--linha); }
.metodo__num { grid-row: span 2; font: 800 32px/1 var(--font-sans); letter-spacing: -.03em; color: var(--curva); transition: color .35s ease; padding-top: 2px; }
.metodo h3 { margin: 0; font: 600 20px/26px var(--font-sans); color: var(--titulo); }
.metodo p { margin: 2px 0 0; font-size: 15px; line-height: 22px; color: var(--texto-suave); }
.metodo li.is-ativa .metodo__num, .metodo li.is-feita .metodo__num, .hero:not(.hero--anima) .metodo__num { color: var(--destaque); }

/* ---------- modo animado ---------- */
.hero--anima { height: 640vh; }
.hero--anima .hero__palco { position: sticky; top: var(--cab); height: calc(100svh - var(--cab)); min-height: 0; }
.hero--anima .hero__texto { opacity: var(--op-texto, 1); transform: translate3d(0, var(--y-texto, 0px), 0); will-change: transform, opacity; }
@media (max-width: 1023px) {
  .hero--anima .hero__texto { position: absolute; inset: 0; padding-bottom: 0; }
}
.hero--anima .hero__dica { display: flex; align-items: center; gap: var(--espaco-2); position: absolute; z-index: 2; left: 50%; bottom: var(--espaco-5); translate: -50% 0; font-size: 14px; line-height: 20px; color: var(--texto-suave); opacity: var(--op-dica, 1); }
.hero--anima .hero__dica .oe-icone { width: 18px; height: 18px; }
@media (max-width: 1023px) { .hero--anima .hero__dica { display: none; } }

.hero--anima .hero__metodo { position: absolute; z-index: 3; border-top: 0; padding: 0; display: flex; align-items: center; will-change: transform; }
/* mobile: sobe por baixo com a borda superior em curva (a linha do sorriso) */
@media (max-width: 1023px) {
  .hero--anima .hero__metodo { left: 0; right: 0; bottom: 0; padding: var(--espaco-5) 0 calc(var(--espaco-5) + 76px); transform: translate3d(0, calc((1 - var(--e-metodo, 0)) * 115%), 0); }
  .hero--anima .hero__metodo::before { content: ""; position: absolute; left: -10%; right: -10%; top: -46px; height: 92px; background: var(--fundo); border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: -1; }
  .hero--anima .hero__metodo .oe-rotulo { margin-bottom: var(--espaco-2); }
  .hero--anima .hero__metodo .oe-titulo { font-size: 26px; line-height: 31px; max-width: 18ch; margin-bottom: 0; }
  .hero--anima .metodo { margin: var(--espaco-4) 0; }
  .hero--anima .metodo li { grid-template-columns: 40px 1fr; padding: 9px 0; }
  .hero--anima .metodo__num { font-size: 22px; grid-row: span 1; }
  .hero--anima .metodo h3 { font-size: 17px; line-height: 22px; }
  .hero--anima .metodo p { display: none; }
  .hero--anima .metodo li.is-ativa p { display: block; grid-column: 2; }
  .hero--anima .hero__metodo .oe-acoes { display: none; }
}
/* desktop: entra pela esquerda com a borda curva do painel da marca */
@media (min-width: 1024px) {
  .hero--anima .hero__metodo { top: 0; bottom: 0; left: 0; width: min(54vw, calc((100vw - var(--conteudo-max)) / 2 + 640px)); transform: translate3d(calc((1 - var(--e-metodo, 0)) * (-100% - 160px)), 0, 0); }
  .hero--anima .hero__metodo::after { content: ""; position: absolute; top: 0; bottom: 0; right: -120px; width: 240px; background: var(--fundo); border-radius: 0 50% 50% 0 / 0 50% 50% 0; z-index: -1; }
  .hero--anima .hero__metodo .oe-container { margin: 0; padding-left: max(var(--espaco-6), calc((100vw - var(--conteudo-max)) / 2 + var(--espaco-6))); padding-right: var(--espaco-6); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero--anima .metodo p { display: none; }
  .hero--anima .metodo li.is-ativa p { display: block; }
  .hero--anima .metodo { margin: var(--espaco-5) 0; }
}
@media (min-width: 1024px) {
  .hero--anima .hero__metodo .oe-container { max-width: none; }
  .hero:not(.hero--anima) .metodo { max-width: 760px; }
  .metodo li { grid-template-columns: 64px 1fr; padding: 14px 0; }
  .metodo__num { font-size: 36px; }
}
.hero--anima .metodo li { opacity: .42; }
.hero--anima .metodo li.is-feita { opacity: .78; }
.hero--anima .metodo li.is-ativa { opacity: 1; }
.hero--anima .metodo li.is-ativa .metodo__num { color: var(--titulo); }
.hero--anima .metodo li { position: relative; }
.hero--anima .metodo li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--destaque); transition: width .45s ease; }
.hero--anima .metodo li.is-ativa::before { width: 100%; }

/* ---------- destaque de cada etapa do método ---------- */
.hero--anima .metodo li { opacity: .34; transition: opacity .45s ease, transform .45s ease; }
.hero--anima .metodo li.is-feita { opacity: .6; }
.hero--anima .metodo li.is-ativa { opacity: 1; transform: translateX(10px); }
.hero--anima .metodo h3 { transition: font-size .4s ease, line-height .4s ease; }
.hero--anima .metodo li.is-ativa h3 { font-size: 27px; line-height: 33px; }
.hero--anima .metodo__num { transition: color .35s ease, font-size .4s ease; }
.hero--anima .metodo li.is-ativa .metodo__num { color: var(--titulo); }
.hero--anima .metodo p { display: block !important; grid-column: 2; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height .45s ease, opacity .35s ease, margin-top .45s ease; }
.hero--anima .metodo li.is-ativa p { max-height: 96px; opacity: 1; margin-top: 6px; font-size: 17px; line-height: 26px; color: var(--texto); }
/* linha de progresso: enche enquanto a pessoa rola dentro da etapa */
.hero--anima .metodo li::before { height: 2px; transition: none; }
.hero--anima .metodo li.is-ativa::before { width: calc(var(--prog, 0) * 100%); }
.hero--anima .metodo li.is-feita::before { width: 100%; opacity: .35; }
@media (max-width: 1023px) {
  .hero--anima .metodo li.is-ativa { transform: translateX(6px); }
  .hero--anima .metodo li.is-ativa h3 { font-size: 21px; line-height: 26px; }
  .hero--anima .metodo li.is-ativa .metodo__num { font-size: 26px; }
  .hero--anima .metodo li.is-ativa p { font-size: 15px; line-height: 22px; max-height: 70px; margin-top: 4px; }
}
.hero__metodo .oe-curva { left: 0; top: 0; width: 100%; height: 100%; }
.hero__metodo > .oe-container { position: relative; z-index: 1; }

/* desenho de entrada do contorno (único momento automático) */
@media (prefers-reduced-motion: no-preference) {
  .hero--entrada .hero__contorno { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traco 1.6s cubic-bezier(.6,0,.2,1) .15s forwards; }
  .hero--entrada .hero__contorno--eco { animation-delay: .45s; }
  .hero--entrada .hero__selo { animation: abre .9s ease 1.05s forwards; }
}
@keyframes traco { to { stroke-dashoffset: 0; } }
@keyframes abre { to { opacity: 0; } }
.hero:not(.hero--entrada) .hero__selo { opacity: 0; }

/* ---------- variações de abertura (data-abertura) ----------
   --revela vai de 0 a 1 nos primeiros movimentos da rolagem (js) */
.hero__dente3d { display: none; }
.hero[data-abertura="branco"] .hero__selo,
.hero[data-abertura="esmaecida"] .hero__selo { animation: none !important; }
/* 1) dente totalmente branco */
.hero[data-abertura="branco"] .hero__selo { fill: #ffffff; opacity: calc(1 - var(--revela, 0)); }
/* 2) dente em 3D */
.hero[data-abertura="3d"] .hero__selo { display: none; }
.hero[data-abertura="3d"] .hero__dente3d { display: inline; opacity: calc(1 - var(--revela, 0)); }
.hero[data-abertura="3d"] .hero__contorno:not(.hero__contorno--eco) { stroke-opacity: .35; }
/* 3) foto esmaecida dentro do dente */
.hero[data-abertura="esmaecida"] .hero__selo { fill: var(--nevoa); opacity: calc(.62 * (1 - var(--revela, 0))); }
.hero[data-abertura="esmaecida"] .hero__foto img { filter: grayscale(calc(.85 * (1 - var(--revela, 0)))) blur(calc(3px * (1 - var(--revela, 0)))) brightness(calc(1 + .12 * (1 - var(--revela, 0)))); }
@media (prefers-reduced-motion: no-preference) {
  .hero--entrada[data-abertura="3d"] .hero__dente3d { animation: surge .9s ease .9s both; }
}
@keyframes surge { from { opacity: 0; } }

/* ==========================================================
   SEÇÕES DA HOME
   ========================================================== */
.cabeca-secao { max-width: 720px; margin-bottom: var(--espaco-7); }
.cabeca-secao .oe-lead { margin-top: calc(-1 * var(--espaco-2)); }

/* áreas */
.area { display: grid; gap: var(--espaco-6); align-items: start; }
.area + .area { margin-top: var(--espaco-8); padding-top: var(--espaco-8); border-top: 1px solid var(--linha); }
.area__foto { margin: 0; border-radius: var(--raio-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--fundo-tinta); }
.area__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 40%; }
.area__nome { margin: 0 0 var(--espaco-3); font: 800 40px/1 var(--font-sans); letter-spacing: -.02em; color: var(--titulo); }
.area__intro { margin: 0 0 var(--espaco-6); max-width: 52ch; color: var(--texto-suave); }
.area__grupos { display: grid; gap: var(--espaco-6) var(--espaco-6); }
.area__grupo h4 { margin: 0 0 var(--espaco-2); font: 600 15px/20px var(--font-sans); color: var(--texto-suave); }
.area__grupo ul { list-style: none; margin: 0; padding: 0; }
.area__grupo a { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-3); padding: 11px 0; border-bottom: 1px solid var(--linha); font: 500 18px/24px var(--font-sans); color: var(--titulo); text-decoration: none; }
.area__grupo a .oe-icone { width: 18px; height: 18px; color: var(--borda-controle); transition: transform .18s ease, color .18s ease; }
.area__grupo a:hover .oe-icone { transform: translateX(4px); color: var(--destaque); }
.area__grupo a:hover { border-bottom-color: var(--malva); }
@media (min-width: 640px) { .area__grupos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .area { grid-template-columns: 5fr 7fr; gap: var(--espaco-8); }
  .area--inversa { grid-template-columns: 7fr 5fr; }
  .area--inversa .area__foto { order: 2; }
  .area__foto { position: sticky; top: 112px; aspect-ratio: 4 / 5; }
  .area__nome { font-size: 60px; }
}

/* Dra. Sara */
.sara { display: grid; gap: var(--espaco-7); align-items: center; }
.sara__foto { margin: 0; border-radius: var(--raio-lg); overflow: hidden; aspect-ratio: 4 / 5; position: relative; }
.sara__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.sara__legenda { position: absolute; left: var(--espaco-4); bottom: var(--espaco-4); background: var(--fundo-elevado); border-radius: var(--raio-md); padding: var(--espaco-3) var(--espaco-4); font-size: 14px; line-height: 20px; color: var(--texto-suave); box-shadow: var(--sombra-cartao); }
.sara__legenda strong { display: block; font: 600 16px/22px var(--font-sans); color: var(--titulo); }
.sara__bio p { max-width: var(--texto-max); }
.formacao { list-style: none; margin: var(--espaco-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espaco-5) var(--espaco-5); }
.formacao li { border-top: 2px solid var(--curva); padding-top: var(--espaco-3); }
.formacao strong { display: block; font: 800 32px/1 var(--font-sans); letter-spacing: -.03em; color: var(--malva); margin-bottom: 6px; }
.formacao span { display: block; font-size: 15px; line-height: 22px; color: var(--texto-suave); }
@media (min-width: 720px) { .formacao { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sara { grid-template-columns: 5fr 7fr; gap: var(--espaco-9); } }

/* clínica */
.mosaico { display: grid; gap: var(--espaco-3); grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
.mosaico figure { margin: 0; border-radius: var(--raio-md); overflow: hidden; position: relative; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; }
.mosaico figcaption { position: absolute; left: 10px; bottom: 10px; background: var(--fundo-elevado); color: var(--titulo); font: 500 13px/18px var(--font-sans); padding: 5px 10px; border-radius: var(--raio-sm); }
.mosaico .m-alto { grid-row: span 2; }
.mosaico .m-largo { grid-column: span 2; }
@media (min-width: 900px) {
  .mosaico { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: var(--espaco-4); }
  .mosaico .m-grande { grid-column: span 2; grid-row: span 2; }
}
.diferenciais { display: grid; gap: var(--espaco-6); margin-top: var(--espaco-7); }
.diferenciais h3 { display: flex; align-items: center; gap: var(--espaco-2); margin: 0 0 var(--espaco-2); font: 600 19px/26px var(--font-sans); color: var(--titulo); }
.diferenciais h3 .oe-icone { color: var(--destaque); }
.diferenciais p { margin: 0; font-size: 15px; line-height: 24px; color: var(--texto-suave); }
@media (min-width: 720px) { .diferenciais { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .diferenciais { grid-template-columns: repeat(4, 1fr); } }

/* equipe */
.equipe { display: grid; gap: var(--espaco-6) var(--espaco-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .equipe { grid-template-columns: repeat(4, 1fr); } }
.equipe .oe-card-prof h3 { font-size: 18px; line-height: 24px; }
@media (min-width: 768px) { .equipe .oe-card-prof h3 { font-size: 20px; } }
.equipe__cro { font-size: 13px !important; letter-spacing: .02em; }
.equipe__apoio { margin: var(--espaco-6) 0 0; font-size: 15px; color: var(--texto-suave); }

/* FAQ em duas colunas no desktop */
.faq-bloco { display: grid; gap: var(--espaco-6); }
@media (min-width: 1024px) { .faq-bloco { grid-template-columns: 4fr 8fr; gap: var(--espaco-8); align-items: start; } .faq-bloco > div:first-child { position: sticky; top: 112px; } }

/* agendamento + rodapé */
.agendar-wrap { padding: var(--espaco-8) 0; }
@media (min-width: 1024px) { .agendar-wrap { padding: var(--espaco-9) 0; } }
.oe-agendar .oe-assinatura { font-size: 64px; }
.oe-rodape { padding-bottom: calc(var(--espaco-6) + 84px); }
@media (min-width: 1024px) { .oe-rodape { padding-bottom: var(--espaco-6); } }
.oe-rodape__mapa { color: var(--texto) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* ==========================================================
   LANDING PAGES
   ========================================================== */
.lp .oe-hero__foto { margin: 0; }
.lp .oe-hero__painel { padding-top: var(--espaco-6); }
@media (min-width: 1024px) { .lp .oe-hero { min-height: calc(100svh - 80px); max-height: 860px; } .lp .oe-hero__painel { display: flex; flex-direction: column; justify-content: center; } }
.lp .oe-hero .oe-manchete__impacto { overflow-wrap: break-word; }
@media (max-width: 767px) { .lp .oe-hero .oe-manchete__impacto { font-size: clamp(32px, 10vw, 44px); } }
@media (min-width: 1024px) and (max-width: 1240px) { .lp .oe-hero .oe-manchete__impacto { font-size: 52px; } }

.explica { display: grid; gap: var(--espaco-5); }
.explica .oe-corpo p { max-width: var(--texto-max); margin-bottom: var(--espaco-5); }
.explica .oe-corpo p:last-child { margin-bottom: 0; }
@media (min-width: 1024px) { .explica { grid-template-columns: 5fr 7fr; gap: var(--espaco-8); align-items: start; } .explica > div:first-child { position: sticky; top: 112px; } }
.explica-wrap .oe-fantasma { right: -2vw; bottom: -40px; font-size: clamp(110px, 16vw, 220px); }
.explica-wrap > .oe-container { position: relative; z-index: 1; }

.criterios { display: grid; gap: var(--espaco-4); }
.criterio { background: var(--fundo-elevado); border-radius: var(--raio-md); padding: var(--espaco-6) var(--espaco-5); }
.criterio .oe-icone { width: 26px; height: 26px; color: var(--destaque); stroke-width: 2.25; margin-bottom: var(--espaco-4); }
.criterio h3 { margin: 0 0 var(--espaco-2); font: 600 21px/27px var(--font-sans); color: var(--titulo); }
.criterio p { margin: 0; font-size: 16px; line-height: 25px; color: var(--texto-suave); }
@media (min-width: 900px) { .criterios { grid-template-columns: repeat(var(--n, 3), 1fr); gap: var(--espaco-5); } }

.cuidados { margin-top: var(--espaco-8); display: grid; gap: var(--espaco-3); padding: var(--espaco-6); border: 1.5px solid var(--linha); border-radius: var(--raio-md); }
.cuidados h3 { display: flex; align-items: center; gap: var(--espaco-2); margin: 0; font: 600 20px/26px var(--font-sans); color: var(--titulo); }
.cuidados h3 .oe-icone { color: var(--destaque); }
.cuidados p { margin: 0; max-width: var(--texto-max); color: var(--texto-suave); }
@media (min-width: 1024px) { .cuidados { grid-template-columns: 4fr 8fr; align-items: start; gap: var(--espaco-7); } }

.lp-sara { display: grid; gap: var(--espaco-6); align-items: center; }
.lp-sara__foto { margin: 0; border-radius: var(--raio-lg); overflow: hidden; aspect-ratio: 1 / 1; }
.lp-sara__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.lp-sara__dados { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin-top: var(--espaco-5); }
@media (min-width: 900px) { .lp-sara { grid-template-columns: 4fr 8fr; gap: var(--espaco-8); } .lp-sara__foto { aspect-ratio: 4 / 5; } }

.outros .oe-grade { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (min-width: 900px) { .outros .oe-grade { grid-template-columns: repeat(3, 1fr); } }
.trilha { font-size: 14px; color: var(--texto-suave); margin-bottom: var(--espaco-4); }
.trilha a { color: var(--texto-suave); }

/* ==========================================================
   ÁRVORE DE ESPECIALIDADES — dente em corte no centro
   ========================================================== */
.arvore { position: relative; display: grid; gap: var(--espaco-6); }
.arvore__ramos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; display: none; }
.arvore__ramo { fill: none; stroke: var(--malva); stroke-width: 1.5; stroke-linecap: round; opacity: .55; transition: opacity .3s ease, stroke-width .3s ease, stroke .3s ease; }
.arvore__ramo.is-foco { stroke: var(--ameixa); stroke-width: 2.5; opacity: 1; }
.arvore__ponto { fill: var(--fundo); stroke: var(--malva); stroke-width: 1.5; transition: fill .3s ease; }
.arvore__ponto.is-foco { fill: var(--ameixa); stroke: var(--ameixa); }
.arvore__col { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-5); }
.arvore__centro { display: grid; justify-items: center; gap: var(--espaco-3); order: -1; }
.arvore__dente { width: min(62vw, 250px); height: auto; overflow: visible; }
.arvore__legenda { margin: 0; display: grid; justify-items: center; text-align: center; color: var(--texto-suave); font-size: 14px; line-height: 20px; }
.arvore__legenda .oe-assinatura { font-size: 46px; color: var(--malva); line-height: 1; margin-bottom: 2px; }

.arvore__no { position: relative; padding: var(--espaco-5); border-radius: var(--raio-md); background: var(--fundo-elevado); border: 1px solid var(--linha); transition: border-color .25s ease, box-shadow .25s ease; }
.arvore__no:hover, .arvore__no:focus-within { border-color: var(--malva); box-shadow: var(--sombra-cartao); }
.arvore__area { display: block; font: 600 12px/16px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; }
.arvore__no h3 { margin: 0 0 4px; font: 700 22px/28px var(--font-sans); letter-spacing: -.01em; color: var(--titulo); }
.arvore__no > p { margin: 0; font-size: 15px; line-height: 22px; color: var(--texto-suave); }
.arvore__links { list-style: none; margin: var(--espaco-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.arvore__links a { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border: 1.5px solid var(--borda-controle); border-radius: var(--raio-pill); font: 500 14px/18px var(--font-sans); color: var(--titulo); text-decoration: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.arvore__links a:hover { background: var(--acao); border-color: var(--acao); color: var(--sobre-acao); }
.arvore__links a:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.arvore__quem { margin-top: var(--espaco-3) !important; font-size: 13px !important; line-height: 18px !important; }
/* a segunda área ganha o tom ameixa claro */
.arvore__no--estetica { background: var(--fundo-tinta); border-color: transparent; }
.arvore__no--estetica .arvore__area { color: var(--destaque); }

/* mobile: tronco vertical à esquerda ligando o dente a cada especialidade */
@media (max-width: 1023px) {
  .arvore__col { padding-left: 22px; border-left: 2px solid var(--curva); margin-left: 6px; }
  .arvore__col--esq { margin-top: var(--espaco-2); }
  .arvore__col--dir { margin-top: calc(-1 * var(--espaco-6) + var(--espaco-5)); }
  .arvore__no::before { content: ""; position: absolute; left: -23px; top: 34px; width: 22px; height: 2px; background: var(--curva); }
  .arvore__no::after { content: ""; position: absolute; left: -30px; top: 29px; width: 12px; height: 12px; border-radius: 50%; background: var(--fundo); border: 2px solid var(--malva); }
}
/* desktop: dente no centro, três especialidades de cada lado, ramos desenhados */
@media (min-width: 1024px) {
  .arvore { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) minmax(0, 1fr); align-items: center; column-gap: var(--espaco-6); }
  .arvore__ramos { display: block; }
  .arvore__centro { order: 0; }
  .arvore__dente { width: 100%; }
  .arvore__col { gap: var(--espaco-6); }
  .arvore__col--esq .arvore__no { text-align: right; }
  .arvore__col--esq .arvore__links { justify-content: flex-end; }
}

/* entrada: os ramos nascem do dente (um único momento; o conteúdo já está visível sem JS) */
@media (prefers-reduced-motion: no-preference) {
  .arvore--pronta:not(.arvore--viva) .arvore__dente { opacity: 0; transform: scale(.92); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .arvore--pronta:not(.arvore--viva) .arvore__no { opacity: 0; }
  .arvore--pronta:not(.arvore--viva) .arvore__col--esq .arvore__no { transform: translateX(24px); }
  .arvore--pronta:not(.arvore--viva) .arvore__col--dir .arvore__no { transform: translateX(-24px); }
  .arvore--pronta:not(.arvore--viva) .arvore__legenda { opacity: 0; }
  .arvore--pronta .arvore__dente { transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
  .arvore--pronta .arvore__legenda { transition: opacity .6s ease .5s; }
  .arvore--pronta .arvore__no { transition: opacity .6s ease calc(.55s + var(--k, 0) * .12s), transform .7s cubic-bezier(.2,.7,.2,1) calc(.55s + var(--k, 0) * .12s), border-color .25s ease, box-shadow .25s ease; }
  .arvore--pronta .arvore__ramo { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .arvore--viva .arvore__ramo { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.6,0,.2,1) calc(.3s + var(--k, 0) * .12s), opacity .3s ease, stroke-width .3s ease; }
  .arvore--pronta .arvore__ponto { opacity: 0; }
  .arvore--viva .arvore__ponto { opacity: 1; transition: opacity .3s ease calc(1.1s + var(--k, 0) * .12s), fill .3s ease; }
}
@media (min-width: 1024px) { .arvore__legenda { order: -1; margin-bottom: var(--espaco-2); max-width: 190px; } }

/* ---------- ícones odontológicos ---------- */
.arvore__icone { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--fundo-tinta); color: var(--destaque); margin-bottom: var(--espaco-3); }
.arvore__icone .oe-icone { width: 26px; height: 26px; stroke-width: 1.6; }
.arvore__no--estetica .arvore__icone { background: var(--fundo-elevado); }
@media (min-width: 1024px) { .arvore__col--esq .arvore__icone { margin-left: auto; } .arvore__col--esq .arvore__no { display: flex; flex-direction: column; align-items: flex-end; } }
.metodo h3 { display: flex; align-items: center; gap: 10px; }
.metodo__ic { width: 22px !important; height: 22px !important; flex: none; color: var(--destaque); stroke-width: 1.6; transition: width .4s ease, height .4s ease; }
.hero--anima .metodo li.is-ativa .metodo__ic { width: 28px !important; height: 28px !important; color: var(--titulo); }
.lp-rotulo { display: inline-flex; align-items: center; gap: 8px; }
.lp-rotulo .oe-icone { width: 22px; height: 22px; stroke-width: 1.6; }
.criterio .oe-icone { width: 34px; height: 34px; stroke-width: 1.5; }
.cuidados h3 .oe-icone { width: 26px; height: 26px; }
.diferenciais h3 .oe-icone { width: 26px; height: 26px; stroke-width: 1.6; }
.oe-agendar__itens .oe-icone { width: 24px; height: 24px; }

/* ---------- especialista responsável na landing page ---------- */
.lp-prof__area { margin: calc(-1 * var(--espaco-3)) 0 var(--espaco-4); font: 600 15px/22px var(--font-sans); color: var(--destaque); }
.lp-prof__rt { display: flex; align-items: center; gap: var(--espaco-3); margin-top: var(--espaco-6); padding-top: var(--espaco-4); border-top: 1px solid var(--linha); }
.lp-prof__rt img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; }
.lp-prof__rt p { margin: 0; font-size: 14px; line-height: 21px; color: var(--texto-suave); }
.lp-prof__rt strong { color: var(--titulo); font-weight: 600; }

/* ==========================================================
   BOTÕES "FLOW" — porte em CSS do FlowButton, nas cores da marca
   repouso: pílula com seta à direita · hover: um círculo cresce do centro,
   o canto vira 12px, a seta da direita sai e uma nova entra pela esquerda
   ========================================================== */
.oe-btn.fb { position: relative; overflow: hidden; isolation: isolate; gap: 0;
  padding-left: 40px; padding-right: 44px;
  transition: border-radius .6s cubic-bezier(.23,1,.32,1), border-color .6s cubic-bezier(.23,1,.32,1), color .6s cubic-bezier(.23,1,.32,1), transform .2s ease; }
.oe-btn.fb:active { transform: scale(.95); }
.fb__txt { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--espaco-2); transform: translateX(-10px); transition: transform .8s ease-out; white-space: nowrap; }
.fb__circulo { position: absolute; z-index: 0; top: 50%; left: 50%; width: 24px; height: 24px; border-radius: 50%; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(1); transition: transform .8s cubic-bezier(.19,1,.22,1), opacity .8s cubic-bezier(.19,1,.22,1); }
.fb__seta { position: absolute; z-index: 2; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: left .8s cubic-bezier(.34,1.56,.64,1), right .8s cubic-bezier(.34,1.56,.64,1); }
.fb__seta--e { left: -25%; }
.fb__seta--d { right: 18px; }
.oe-btn.fb:hover, .oe-btn.fb:focus-visible { border-radius: 12px; }
.oe-btn.fb:hover .fb__circulo, .oe-btn.fb:focus-visible .fb__circulo { opacity: 1; transform: translate(-50%, -50%) scale(28); }
.oe-btn.fb:hover .fb__txt, .oe-btn.fb:focus-visible .fb__txt { transform: translateX(12px); }
.oe-btn.fb:hover .fb__seta--e, .oe-btn.fb:focus-visible .fb__seta--e { left: 16px; }
.oe-btn.fb:hover .fb__seta--d, .oe-btn.fb:focus-visible .fb__seta--d { right: -25%; }

/* primário: cheio na cor de ação; o círculo traz o tom de pressionado (ameixa profunda no claro, névoa na seção ameixa) */
.oe-btn--primario.fb { background: var(--acao); color: var(--sobre-acao); border-color: var(--acao); }
.oe-btn--primario.fb:hover { background: var(--acao); }
.oe-btn--primario.fb .fb__circulo { background: var(--acao-hover); }
/* secundário: contornado, como o original; o círculo preenche com a cor de ação */
.oe-btn--secundario.fb { background: transparent; color: var(--titulo); border-color: var(--borda-controle); }
.oe-btn--secundario.fb .fb__circulo { background: var(--acao); }
.oe-btn--secundario.fb:hover { color: var(--sobre-acao); border-color: transparent; background: transparent; }
/* botões largos (bloco) e do cabeçalho */
.oe-btn--bloco.fb .fb__circulo { width: 40px; height: 40px; }
.cab .oe-btn.fb { padding-left: 30px; padding-right: 38px; }
.cab .oe-btn.fb .fb__seta--d { right: 14px; }
.cab .oe-btn.fb:hover .fb__seta--e { left: 12px; }
.oe-barra-whats .oe-btn.fb { padding-left: 24px; padding-right: 40px; }
@media (prefers-reduced-motion: reduce) {
  .oe-btn.fb, .fb__txt, .fb__circulo, .fb__seta { transition: none !important; }
}
.cab .oe-btn.fb:hover .fb__seta--d, .cab .oe-btn.fb:focus-visible .fb__seta--d { right: -25%; }
/* contraste do hover: no claro o círculo é ameixa profunda; na seção ameixa é a malva (5205 C) com texto branco */
.oe-btn--primario.fb:hover, .oe-btn--primario.fb:focus-visible { border-color: var(--ameixa-profunda); }
[data-theme="ameixa"] .oe-btn--primario.fb .fb__circulo, .oe-btn--primario.fb[data-theme="ameixa"] .fb__circulo { background: var(--malva); }
[data-theme="ameixa"] .oe-btn--primario.fb:hover, [data-theme="ameixa"] .oe-btn--primario.fb:focus-visible { color: #ffffff; border-color: var(--malva); }
.lp-sara__dados .oe-etiqueta--cheia { background: var(--fundo-elevado); }

/* ---------- bloco de agendamento enxuto ---------- */
.agendar--limpo { gap: var(--espaco-6); padding: var(--espaco-8) var(--espaco-5); }
.agendar--limpo .agendar__texto { display: grid; gap: var(--espaco-3); }
.agendar--limpo .oe-assinatura { font-size: 56px; line-height: .9; color: var(--destaque); }
.agendar--limpo .oe-titulo { margin: 0; max-width: 16ch; }
.agendar--limpo .oe-lead { margin: 0; max-width: 44ch; color: var(--texto-suave); }
.agendar__acao { display: grid; gap: var(--espaco-4); justify-items: start; }
.agendar__info { margin: 0; font-size: 14px; line-height: 22px; color: var(--texto-suave); }
@media (min-width: 960px) {
  .agendar--limpo { grid-template-columns: 1.4fr 1fr; padding: var(--espaco-9) var(--espaco-8); align-items: end; }
  .agendar__acao { justify-items: end; text-align: right; }
}

/* ---------- seções editoriais extras das landing pages (conteúdo revisado) ---------- */
.secoes { padding-top: 0; }
.secao { display: grid; gap: var(--espaco-4); padding: var(--espaco-7) 0; border-top: 1px solid var(--linha); }
.secao:first-child { border-top: 0; padding-top: var(--espaco-2); }
.secao__titulo { margin: 0; font: 700 26px/32px var(--font-sans); letter-spacing: -.01em; color: var(--titulo); max-width: 22ch; }
.secao__corpo { display: grid; gap: var(--espaco-4); max-width: var(--texto-max); }
.secao__corpo p { margin: 0; }
.secao__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-3); }
.secao__lista li { display: flex; gap: var(--espaco-3); align-items: flex-start; }
.secao__lista .oe-icone { width: 24px; height: 24px; color: var(--destaque); flex: none; margin-top: 1px; stroke-width: 1.6; }
.secao__destaque { font: 600 19px/28px var(--font-sans); color: var(--titulo); border-left: 3px solid var(--malva); padding-left: var(--espaco-4); }
.secao__link { margin-top: var(--espaco-1); }
@media (min-width: 1024px) {
  .secao { grid-template-columns: 5fr 7fr; gap: var(--espaco-8); }
  .secao__titulo { font-size: 30px; line-height: 36px; }
}
.oe-secao > .oe-container > .cuidados:first-child { margin-top: 0; }

@media (max-width: 1023px) { .oe-fantasma { display: none; } }

/* ---------- instrumentais sobre a divisa Clínica / Equipe ---------- */
.secao-equipe { overflow: visible; isolation: isolate; }
.secao-equipe > .oe-container { position: relative; z-index: 1; }
.instrumentais { position: absolute; z-index: 6; pointer-events: none; top: -118px;
  right: max(var(--espaco-5), calc((100vw - var(--conteudo-max)) / 2 + 40px)); width: clamp(88px, 12vw, 170px);
  transform: translate3d(0, var(--ref-y, 0px), 0) rotate(calc(-16deg + var(--ref-r, 0deg))); transform-origin: 50% 60%; will-change: transform; }
.instrumentais img { display: block; width: 100%; height: auto; filter: drop-shadow(14px 22px 18px rgba(46, 28, 40, .26)) drop-shadow(3px 5px 4px rgba(46, 28, 40, .2)); }
@media (max-width: 1023px) {
  .instrumentais { top: -70px; right: var(--espaco-4); width: clamp(64px, 18vw, 96px); }
  .secao-equipe .cabeca-secao { padding-right: clamp(70px, 20vw, 110px); }
}


/* ---------- dente com espelho saindo do canto do card de agendamento ---------- */
.agendar__ancora { position: relative; }
.agendar__objeto { position: absolute; z-index: 3; pointer-events: none; top: -138px;
  right: calc(var(--espaco-6) + clamp(8px, 3vw, 56px)); width: clamp(150px, 15vw, 210px); height: auto;
  transform: translate3d(0, var(--ref-y, 0px), 0) rotate(calc(8deg + var(--ref-r, 0deg))); transform-origin: 50% 80%; will-change: transform;
  filter: drop-shadow(-14px 22px 22px rgba(30, 14, 25, .38)) drop-shadow(-3px 6px 6px rgba(30, 14, 25, .22)); }
.agendar--limpo { position: relative; z-index: 1; }
@media (max-width: 959px) {
  .agendar__objeto { top: -64px; right: var(--espaco-6); width: clamp(84px, 24vw, 120px); }
  .agendar--limpo .oe-assinatura, .agendar--limpo .oe-titulo { padding-right: clamp(70px, 22vw, 110px); }
}

/* ---------- painel do método: cabe em telas baixas (notebooks) ---------- */
@media (min-width: 1024px) {
  .hero--anima .hero__metodo .oe-titulo { font-size: clamp(28px, 4.8vh, 44px); line-height: 1.12; margin-bottom: 0; }
  .hero--anima .hero__metodo .oe-rotulo { margin-bottom: clamp(6px, 1.2vh, 12px); }
  .hero--anima .metodo { margin: clamp(12px, 2.6vh, 32px) 0; }
  .hero--anima .metodo li { padding: clamp(6px, 1.5vh, 14px) 0; }
  .hero--anima .metodo__num { font-size: clamp(24px, 4vh, 36px); }
  .hero--anima .metodo h3 { font-size: clamp(16px, 2.4vh, 20px); line-height: 1.3; }
  .hero--anima .metodo li.is-ativa h3 { font-size: clamp(19px, 3vh, 27px); line-height: 1.25; }
  .hero--anima .metodo li.is-ativa p { font-size: clamp(14px, 2vh, 17px); line-height: 1.5; }
}
.hero--anima .hero__metodo > .oe-container { transform-origin: 0 50%; }

/* ---------- localização (mapa) antes do rodapé ---------- */
.mapa-secao { padding-top: 0; }
.mapa { display: grid; gap: var(--espaco-6); align-items: center; }
.mapa__info .oe-titulo { max-width: 16ch; }
.mapa__endereco { font-style: normal; font-size: 17px; line-height: 27px; color: var(--texto); margin: calc(-1 * var(--espaco-2)) 0 var(--espaco-5); }
.mapa__itens { list-style: none; margin: 0 0 var(--espaco-6); padding: 0; display: grid; gap: var(--espaco-3); }
.mapa__itens li { display: flex; gap: var(--espaco-3); align-items: flex-start; font-size: 15px; line-height: 23px; color: var(--texto-suave); }
.mapa__itens .oe-icone { width: 22px; height: 22px; color: var(--destaque); flex: none; stroke-width: 1.6; }
.mapa__quadro { position: relative; border-radius: var(--raio-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--fundo-tinta); box-shadow: var(--sombra-cartao); }
.mapa__quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .5s ease; }
.mapa__quadro.is-carregado iframe { opacity: 1; }
.mapa__fallback { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.mapa__ilustra { width: 100%; height: 100%; display: block; }
.mapa__pin { position: absolute; left: 53%; top: 49%; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 10px;
  background: var(--fundo-elevado); border-radius: var(--raio-pill); padding: 8px 16px 8px 8px; box-shadow: var(--sombra-flutuante); white-space: nowrap; }
.mapa__pin::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: var(--fundo-elevado); transform: translateX(-50%) rotate(45deg); }
.mapa__pin-icone { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ameixa); color: #fff; }
.mapa__pin-icone .oe-icone { width: 22px; height: 22px; stroke-width: 1.6; }
.mapa__pin-txt { display: grid; font-size: 12px; line-height: 16px; color: var(--texto-suave); }
.mapa__pin-txt strong { font: 600 14px/18px var(--font-sans); color: var(--titulo); }
.mapa__aviso { position: absolute; left: 12px; bottom: 10px; margin: 0; font-size: 12px; line-height: 16px; color: var(--texto-suave); background: rgba(255,255,255,.8); padding: 4px 8px; border-radius: var(--raio-sm); }
.mapa__fallback:hover .mapa__pin { box-shadow: var(--sombra-cartao); }
.mapa__fallback:focus-visible { outline: 2px solid var(--foco); outline-offset: -4px; }
@media (min-width: 1024px) { .mapa { grid-template-columns: 5fr 7fr; gap: var(--espaco-8); } .mapa__quadro { aspect-ratio: 16 / 11; } }