/* Identidade: rosa-antigo e cinza do cartão da marca, grafite do jaleco.
   Elemento-assinatura: a linha da gengiva (contorno festonado sobre os dentes). */
:root {
  --esmalte: #FBFAFA;
  --nevoa: #ECEAEB;
  --rosa-palido: #F3DDE3;
  --rosa: #C98FA1;
  --rosa-fundo: #8A4A5E;
  /* tons de gengiva: clara (fundos), saudável (faixa e arco), funda (seções e botões) */
  --gengiva: #D9A2B0;
  --gengiva-noite: #6E3547;
  --texto-claro: #F7DCE3;
  /* pontilhado da gengiva saudável ("casca de laranja") */
  --pontilhado:
    radial-gradient(circle at 2px 2px, rgba(110, 53, 71, .12) 1.1px, transparent 1.6px),
    radial-gradient(circle at 6.5px 6.5px, rgba(255, 255, 255, .18) .9px, transparent 1.4px);
  --grafite: #2F2B31;
  --grafite-suave: #5E5860;
  --linha: #DCD6D8;

  --fonte-titulo: "Lexend Exa", "Segoe UI", sans-serif;
  --fonte-texto: "Figtree", "Segoe UI", sans-serif;
  --fonte-assinatura: "Mrs Saint Delafield", cursive;

  --largura: 1180px;
  --gutter: clamp(16px, 5vw, 56px);
  --secao: clamp(72px, 11vw, 140px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--esmalte);
  color: var(--grafite);
  font: 400 1.0625rem/1.6 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 300; font-family: var(--fonte-titulo); letter-spacing: -0.01em; }
p { margin: 0; }

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

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--grafite); color: var(--esmalte); padding: 10px 16px; border-radius: 6px;
}
.pular:focus { top: 12px; }

/* ---------- Monograma ---------- */
.monograma {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--rosa);
  font: 400 1.9rem/1 var(--fonte-assinatura);
  color: var(--rosa-fundo);
  padding-top: 6px;
}
.monograma--grande { width: 46%; height: 46%; font-size: clamp(4rem, 12vw, 7rem); border-color: rgba(255,255,255,.7); color: #fff; }

/* ---------- Botões e links ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--rosa-fundo); color: #fff;
  font: 500 1rem/1 var(--fonte-texto); text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.botao:hover { background: var(--gengiva-noite); }
.botao:active { transform: scale(.98); }
.botao--pequeno { min-height: 44px; padding: 0 20px; gap: 0; font-size: .9375rem; }

.link-sublinhado {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; text-decoration: underline; text-decoration-color: var(--rosa);
  text-decoration-thickness: 1px; text-underline-offset: 6px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.link-sublinhado:hover { color: var(--rosa-fundo); text-decoration-color: var(--rosa-fundo); }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 250, .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.topo.rolou { border-bottom-color: var(--linha); }
.topo__in {
  max-width: var(--largura); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 32px;
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.marca__nome {
  display: flex; flex-direction: column;
  font: 400 .9375rem/1.2 var(--fonte-titulo); text-transform: uppercase; letter-spacing: .22em;
}
.marca__nome small { font: 400 .75rem/1.4 var(--fonte-texto); letter-spacing: .04em; text-transform: none; color: var(--grafite-suave); }
.menu { display: flex; gap: 28px; }
.menu a { text-decoration: none; font-size: .9375rem; color: var(--grafite-suave); padding: 10px 0; transition: color .2s; }
.menu a:hover { color: var(--rosa-fundo); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 27vw, 360px); align-items: stretch; gap: 0 clamp(32px, 5vw, 72px);
}
.hero__texto { align-self: end; padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 8vw, 104px); }
.hero h1 {
  font-size: clamp(2.4rem, 6.4vw, 5.25rem);
  line-height: 1.04; letter-spacing: -0.035em; max-width: 13ch;
  text-wrap: balance;
}
.hero__sub { margin-top: 28px; max-width: 46ch; font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); color: var(--grafite-suave); }
.hero__acoes { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* arco: a gengiva sobe da faixa do sorriso e emoldura a nota */
.arco {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 32px;
  min-height: 440px;
  /* 35px no topo deixa o círculo do logo concêntrico com a curva do arco */
  padding: 35px 24px clamp(36px, 4vw, 52px);
  container-type: inline-size;
  border-radius: 999px 999px 0 0;
  background: var(--pontilhado), var(--gengiva);
  background-size: 9px 9px, auto;
  text-align: center;
}
/* curvas côncavas onde o arco encontra a faixa */
.arco::before, .arco::after {
  content: ""; position: absolute; bottom: 0; width: 36px; height: 36px; pointer-events: none;
}
.arco::before { right: 100%; background: radial-gradient(circle at 0 0, transparent 35.5px, var(--gengiva) 36px); }
.arco::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent 35.5px, var(--gengiva) 36px); }
.monograma--arco {
  flex: none;
  width: calc(100cqi - 22px); height: calc(100cqi - 22px);
  font-size: calc((100cqi - 22px) * .56); padding-top: 9%;
  color: #fff; border: 1.5px solid rgba(255, 255, 255, .85);
}
.arco__nota { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--grafite); }
.arco__num { font: 300 clamp(3rem, 5vw, 4.25rem)/1 var(--fonte-titulo); letter-spacing: -0.04em; color: var(--gengiva-noite); }
.arco .estrelas { color: var(--rosa-fundo); }
.arco__txt { font-size: .9375rem; line-height: 1.4; max-width: 18ch; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.arco__nota:hover .arco__txt { text-decoration-color: var(--grafite); }
.estrelas { display: block; letter-spacing: 3px; font-size: .95rem; }
.js .arco { animation: subir 1.1s cubic-bezier(.2, .7, .2, 1) .1s both; }
@keyframes subir { from { clip-path: inset(100% -40px 0 -40px); } to { clip-path: inset(0 -40px 0 -40px); } }

.sorriso {
  grid-column: 1 / -1;
  margin: 0;
  /* sangra até as bordas da janela */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.sorriso svg { display: block; width: 100%; height: clamp(170px, 28.34vw, 420px); }
.sorriso__gengiva { fill: var(--gengiva); }
.sorriso__dentes path { fill: #fff; stroke: var(--linha); stroke-width: 1.5; }
.sorriso__linha {
  fill: none; stroke: var(--rosa-fundo); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}
.js .sorriso__linha { stroke-dashoffset: 1; animation: desenhar 2.4s cubic-bezier(.55,.1,.25,1) .8s forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }

/* ---------- Cabeçalho de seção ---------- */
.secao__cabeca { max-width: 640px; }
.secao__cabeca h2, .consulta h2, .sobre h2, .contato h2 {
  font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance;
}
.secao__cabeca p { margin-top: 18px; color: var(--grafite-suave); max-width: 52ch; }

/* ---------- Tratamentos ---------- */
.tratamentos, .avaliacoes, .consulta {
  max-width: var(--largura); margin: 0 auto; padding: var(--secao) var(--gutter) 0;
}
.consulta {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 100px); align-items: center;
}
.consulta__foto { margin: 0; }
.consulta__foto img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 999px 999px 12px 12px;
}
.sinais { margin: 56px -24px 0; }
.sinal { padding: 0 24px; border-bottom: 1px solid var(--linha); transition: background-color .3s ease, border-color .3s ease; }
.sinal:first-child { border-top: 1px solid var(--linha); }
.sinal[open] { border-radius: 20px; background: var(--pontilhado), var(--rosa-palido); background-size: 9px 9px, auto; border-color: transparent; }
.sinal:has(+ .sinal[open]) { border-bottom-color: transparent; }
.sinal summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 12px 32px;
  padding: 30px 0; min-height: 44px;
}
.sinal summary::-webkit-details-marker { display: none; }
.sinal summary::after {
  content: ""; width: 14px; height: 14px; justify-self: end;
  border-right: 1.5px solid var(--grafite); border-bottom: 1.5px solid var(--grafite);
  transform: translateY(-4px) rotate(45deg); transition: transform .3s ease;
}
.sinal[open] summary::after { transform: translateY(2px) rotate(225deg); }
.sinal__queixa { font: 300 clamp(1.25rem, 2.4vw, 1.75rem)/1.3 var(--fonte-titulo); letter-spacing: -0.02em; transition: color .2s; }
.sinal summary:hover .sinal__queixa { color: var(--rosa-fundo); }
.sinal__trat {
  justify-self: end; padding: 7px 14px; border-radius: 999px;
  background: var(--rosa-palido); color: var(--gengiva-noite);
  font-weight: 500; font-size: .875rem; line-height: 1.3; text-align: center;
}
.sinal[open] .sinal__trat { background: var(--rosa-fundo); color: #fff; }
.sinal__corpo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px 56px; align-items: start;
  padding: 0 60px 40px 0; color: var(--grafite);
}
.sinal__corpo--texto { grid-template-columns: 1fr 1fr; gap: 20px 48px; }
.sinal__texto p + p { margin-top: 16px; }

/* casos reais do Instagram: recorte em arco, como a gengiva sobre o dente */
.caso { margin: 0; display: grid; gap: 12px; }
.caso--2 { grid-template-columns: 1fr 1fr; }
.caso img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 999px 999px 10px 10px; background: var(--gengiva);
}
.caso--1 img { max-width: 360px; }
.caso figcaption { grid-column: 1 / -1; font-size: .875rem; color: var(--gengiva-noite); }
.sinal::details-content { transition: height .35s ease, content-visibility .35s allow-discrete; height: 0; overflow: clip; }
.sinal[open]::details-content { height: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* ---------- Sobre ---------- */
.sobre {
  position: relative; z-index: 1;
  margin-top: var(--secao);
  background: var(--pontilhado), var(--rosa-palido);
  background-size: 9px 9px, auto;
  padding: var(--secao) var(--gutter) calc(var(--secao) * .6);
}
/* borda inferior em festão, como a margem da gengiva */
.sobre::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: clamp(36px, 6vw, 72px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath fill='%23F3DDE3' d='M0 0 H1200 V70 Q1150 -10 1100 70 Q1035 -20 970 70 Q910 -5 850 70 Q770 -25 690 70 Q600 -25 510 70 Q430 -25 350 70 Q290 -5 230 70 Q165 -20 100 70 Q50 -10 0 70 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}
.sobre__in {
  max-width: var(--largura); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 100px); align-items: center;
}
.retrato { position: relative; margin: 0; aspect-ratio: 1; max-width: 460px; width: 100%; }
.retrato__fundo { position: absolute; inset: 0 auto 0 -20%; width: 55%; background: var(--pontilhado), var(--gengiva); background-size: 9px 9px, auto; }
.retrato__foto {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: linear-gradient(160deg, var(--rosa) 0%, var(--rosa-fundo) 100%);
  display: grid; place-items: center;
}
.retrato__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sobre__texto p { margin-top: 20px; max-width: 54ch; color: var(--grafite); }
.sobre__texto p:first-of-type { margin-top: 28px; }

/* ---------- Avaliações ---------- */
.avaliacoes {
  padding-top: calc(var(--secao) + 48px); padding-bottom: var(--secao);
  background: var(--rosa-fundo); color: var(--texto-claro);
  box-shadow: 0 0 0 100vmax var(--rosa-fundo); clip-path: inset(0 -100vmax);
}
.avaliacoes .secao__cabeca p { color: var(--texto-claro); }
.avaliacoes h2 { color: #fff; }
.avaliacoes :focus-visible { outline-color: #fff; }
.depoimentos {
  margin-top: 56px;
  display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: 0 64px;
}
.depoimento { margin: 0; padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.depoimento p { font-size: 1.0625rem; }
.depoimento footer { margin-top: 16px; font-size: .875rem; font-weight: 600; color: #fff; }
.depoimento--destaque { grid-row: 1 / span 2; border-top-color: var(--gengiva); }
.depoimento--destaque p {
  font: 300 clamp(1.35rem, 2.5vw, 1.9rem)/1.4 var(--fonte-titulo); letter-spacing: -0.02em; color: #fff;
}
.depoimento--destaque p::before { content: "“"; } .depoimento--destaque p::after { content: "”"; }
.avaliacoes__mais { margin-top: 24px; color: #fff; text-decoration-color: var(--gengiva); }
.avaliacoes__mais:hover { color: var(--texto-claro); text-decoration-color: #fff; }

/* ---------- Primeira consulta ---------- */
.passos {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; gap: 36px;
  counter-reset: passo;
}
.passos li { counter-increment: passo; position: relative; padding-left: 68px; min-height: 44px; }
.passos li::before {
  content: counter(passo);
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pontilhado), var(--gengiva); background-size: 9px 9px, auto;
  display: grid; place-items: center;
  font: 400 1.1rem/1 var(--fonte-titulo); color: var(--gengiva-noite);
}
.passos li:not(:last-child)::after {
  content: ""; position: absolute; top: 52px; bottom: -28px; left: 22px; width: 1px; background: var(--gengiva);
}
.passos h3 { font-size: 1.2rem; font-weight: 400; letter-spacing: -0.01em; }
.passos h3 { padding-top: 8px; }
.passos p { margin-top: 8px; color: var(--grafite-suave); max-width: 40ch; }

/* ---------- Contato ---------- */
.contato {
  max-width: var(--largura); margin: var(--secao) auto 0; padding: var(--secao) var(--gutter) calc(var(--secao) + 24px);
  background: var(--rosa-palido);
  box-shadow: 0 0 0 100vmax var(--rosa-palido); clip-path: inset(0 -100vmax);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: stretch;
}
.contato__texto > p { margin: 18px 0 32px; color: var(--grafite-suave); max-width: 44ch; }
.locais { margin-top: 48px; display: grid; gap: 28px; }
.local h3 { font: 600 1rem/1.4 var(--fonte-texto); letter-spacing: 0; }
.local p { margin-top: 6px; color: var(--grafite-suave); }
.local p a { text-decoration: none; display: inline-block; padding: 4px 0; }
.local p a:hover { color: var(--rosa-fundo); }
.local .link-sublinhado { margin-top: 2px; }
.mapa { min-height: 420px; border-radius: 240px 240px 12px 12px; overflow: hidden; background: var(--gengiva); }
.mapa iframe { width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(.85) contrast(.95); }

/* ---------- Rodapé ---------- */
.rodape {
  position: relative;
  padding: 40px var(--gutter) 56px;
  background: var(--rosa-fundo); color: var(--texto-claro);
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  font-size: .9375rem;
}
.rodape::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: clamp(32px, 5vw, 64px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath fill='%238A4A5E' d='M0 100 V30 Q50 110 100 30 Q165 120 230 30 Q290 105 350 30 Q430 125 510 30 Q600 125 690 30 Q770 125 850 30 Q910 105 970 30 Q1035 120 1100 30 Q1150 110 1200 30 V100 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.rodape .monograma { color: #fff; border-color: rgba(255, 255, 255, .7); }
.rodape__peq { font-size: .8125rem; }

/* ---------- WhatsApp fixo ---------- */
.whats-fixo {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rosa-fundo); color: #fff;
  box-shadow: 0 6px 20px rgba(110, 53, 71, .3);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
}
.whats-fixo.visivel { opacity: 1; transform: none; pointer-events: auto; }
.whats-fixo:hover { background: var(--gengiva-noite); }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .menu { display: none; }
  .sobre__in, .contato, .consulta { grid-template-columns: 1fr; }
  .consulta__foto { max-width: 420px; }
  .retrato { max-width: 340px; margin: 0 auto; }
  .depoimentos { grid-template-columns: 1fr; }
  .depoimento--destaque { grid-row: auto; }
}
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero__texto { padding-bottom: 40px; }
  .arco { min-height: 0; padding: 56px 24px 32px; justify-content: flex-end; }
  /* curvas côncavas onde o arco encontra a faixa */
.arco::before, .arco::after {
  content: ""; position: absolute; bottom: 0; width: 36px; height: 36px; pointer-events: none;
}
.arco::before { right: 100%; background: radial-gradient(circle at 0 0, transparent 35.5px, var(--gengiva) 36px); }
.arco::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent 35.5px, var(--gengiva) 36px); }
.monograma--arco { display: none; }
  .sinais { margin-inline: -12px; }
  .sinal { padding: 0 12px; }
  .sinal summary { grid-template-columns: minmax(0, 1fr) 20px; padding: 24px 0; }
  .sinal__trat { grid-column: 1; grid-row: 2; justify-self: start; }
  .sinal summary::after { grid-column: 2; grid-row: 1 / span 2; }
  .sinal__corpo, .sinal__corpo--texto { grid-template-columns: 1fr; padding-right: 0; }
  .mapa { border-radius: 160px 160px 12px 12px; }
}
@media (max-width: 480px) {
  .topo .botao--pequeno { padding: 0 16px; font-size: .875rem; }
  .marca__nome { font-size: .8125rem; letter-spacing: .16em; }
  .monograma:not(.monograma--grande) { width: 40px; height: 40px; font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .sorriso__linha { stroke-dashoffset: 0; }
}

@media (max-width: 480px) { .so-desktop { display: none; } }