/* =========================================================
   Sorriso Leve - folha de estilo
   Paleta: papel mentolado, tinta verde, marca petroleo,
   menta de acento e amarelo-sol (infantil).
   Tipo: Fraunces (titulos) + Karla (texto).
   ========================================================= */

@font-face{
  font-family:"Fraunces";
  src:url("fontes/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("fontes/fraunces-latin-wght-italic.woff2") format("woff2");
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Karla";
  src:url("fontes/karla-latin-wght-normal.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Karla";
  src:url("fontes/karla-latin-wght-italic.woff2") format("woff2");
  font-weight:200 800;font-style:italic;font-display:swap;
}

:root{
  --papel:#F3F7F3;
  --papel-2:#FFFFFF;
  --menta-clara:#DCEFE4;
  --menta:#5FC9AF;
  --mar:#1F5F4A;
  --mar-esc:#184A3A;
  --tinta:#17332D;
  --tinta-suave:#4A615B;
  --sol:#F2B457;
  --sol-clara:#FBEAD0;
  --linha:#CDDDD5;

  --f-titulo:"Fraunces",Georgia,"Times New Roman",serif;
  --f-texto:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-detalhe:0.875rem;
  --t-texto:clamp(1rem,0.94rem + 0.3vw,1.125rem);
  --t-sub:clamp(1.35rem,1.2rem + 0.6vw,1.6rem);
  --t-secao:clamp(1.9rem,1.35rem + 2.2vw,2.9rem);
  --t-topo:clamp(2.5rem,1.55rem + 5.2vw,4.5rem);

  --largura:1140px;
  --curva:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:var(--t-texto);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%}

h1,h2,h3{
  font-family:var(--f-titulo);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.018em;
  text-wrap:balance;
  margin:0;
  color:var(--tinta);
}

h1{font-size:var(--t-topo);line-height:1.02}
h2{font-size:var(--t-secao)}
h3{font-size:var(--t-sub);line-height:1.2}

p{margin:0;text-wrap:pretty}

a{color:var(--mar)}

:focus-visible{
  outline:3px solid var(--mar);
  outline-offset:3px;
  border-radius:8px;
}

.pular{
  position:absolute;left:-999px;top:0;z-index:60;
  background:var(--mar);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 12px 0;
  font-weight:600;text-decoration:none;
}
.pular:focus{left:0}

/* ---------- botoes ---------- */
.botao{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--mar);color:#fff;
  font-family:var(--f-texto);font-weight:600;font-size:var(--t-texto);line-height:1.1;
  padding:.9rem 1.4rem;border-radius:999px;
  text-decoration:none;border:2px solid var(--mar);
  box-shadow:0 10px 22px -14px rgba(14,91,78,.9);
  transition:transform .15s var(--curva),background .2s ease,box-shadow .2s ease;
}
.botao:hover{background:var(--mar-esc);border-color:var(--mar-esc)}
.botao:active{transform:translateY(1px) scale(.99)}
.botao-grande{padding:1.05rem 1.7rem}
.botao-contorno{
  background:transparent;color:var(--mar);
  box-shadow:none;
}
.botao-contorno:hover{background:var(--mar);color:#fff;border-color:var(--mar)}

.botao-zap{
  width:1.15em;height:1.15em;flex:0 0 auto;display:inline-block;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.22 3.08.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.12-.27-.2-.57-.35m-5.42 7.4h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.89 9.89-9.89 2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.44 9.89-9.89 9.89m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.69 1.45h.01c6.55 0 11.89-5.33 11.89-11.89 0-3.18-1.24-6.17-3.49-8.42'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.22 3.08.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.12-.27-.2-.57-.35m-5.42 7.4h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.89 9.89-9.89 2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.44 9.89-9.89 9.89m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.69 1.45h.01c6.55 0 11.89-5.33 11.89-11.89 0-3.18-1.24-6.17-3.49-8.42'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- cabecalho ---------- */
.topo{
  position:sticky;top:0;z-index:40;
  background:rgba(243,247,243,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.topo-linha{
  max-width:var(--largura);margin:0 auto;
  padding:.7rem clamp(16px,3vw,24px);
  display:flex;align-items:center;gap:1.2rem;
}
.marca{
  display:inline-flex;align-items:center;gap:.6rem;
  color:var(--mar);text-decoration:none;font-family:var(--f-titulo);
  font-weight:600;font-size:var(--t-sub);letter-spacing:-0.01em;
  margin-right:auto;
}
.marca-simbolo{width:34px;height:34px;flex:0 0 auto}
.menu{display:flex;gap:1.4rem}
.menu a{
  color:var(--tinta);text-decoration:none;font-weight:600;font-size:var(--t-texto);
  padding:.3rem 0;border-bottom:2px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.menu a:hover{border-color:var(--menta);color:var(--mar)}
.botao-topo{padding:.65rem 1.1rem}

/* ---------- estruturas de secao ---------- */
.heroi,.servicos,.como,.clinica,.duvidas,.onde,.perguntas,.chamada{
  padding-block:clamp(56px,7vw,104px);
}
.servicos,.como,.clinica,.duvidas,.onde,.perguntas{position:relative}

section > .secao-cabeca h2 + p{margin-top:1rem}

.secao-cabeca{max-width:var(--largura);margin:0 auto;padding:0 clamp(16px,3vw,24px)}
.secao-cabeca p{color:var(--tinta-suave);max-width:60ch}

/* ---------- topo (hero) ---------- */
.heroi{
  position:relative;overflow:hidden;
  padding-block:clamp(40px,6vw,84px) clamp(56px,7vw,96px);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  align-items:center;
  gap:clamp(1rem,4vw,3rem);
  max-width:var(--largura);margin:0 auto;
  padding-inline:clamp(16px,3vw,24px);
}
.heroi::before{
  content:"";position:absolute;inset:-10% -10% auto -10%;height:90%;
  background:radial-gradient(60% 70% at 82% 0%,rgba(95,201,175,.34),transparent 68%);
  pointer-events:none;
}
.heroi-texto,.heroi-arte{position:relative}
.heroi-texto{
  max-width:none;
}
.heroi-arte{
  width:100%;max-width:520px;justify-self:end;
  pointer-events:none;
}
.selo{
  display:inline-block;
  color:var(--mar);font-weight:600;font-size:var(--t-detalhe);
  letter-spacing:.02em;
  background:var(--menta-clara);
  border-radius:999px;padding:.35rem .85rem;margin-bottom:1.4rem;
}
.heroi h1{max-width:14ch}
.heroi-sub{margin-top:1.4rem;max-width:46ch;color:var(--tinta-suave);font-size:var(--t-texto)}
.heroi-acao{margin-top:2.1rem;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.heroi-prova{color:var(--mar);font-weight:600;font-size:var(--t-detalhe)}

/* ilustracao */
.heroi-arte svg{width:100%;height:auto;display:block}
.blob{fill:var(--menta-clara)}
.dente-corpo{fill:#fff;stroke:var(--mar);stroke-width:2.6;stroke-linejoin:round}
.dente-luz{fill:none;stroke:var(--menta);stroke-width:2.6;stroke-linecap:round}
.sorriso{fill:none;stroke:var(--mar);stroke-width:9;stroke-linecap:round}
.brilho path{fill:var(--menta)}
.brilho.b2 path{fill:var(--sol)}

/* ---------- servicos ---------- */
.servicos{background:var(--papel-2);border-block:1px solid var(--linha)}
.servicos .secao-cabeca{margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.lista-servicos{
  max-width:var(--largura);margin:0 auto;padding:0 clamp(16px,3vw,24px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
}
.servico{
  padding:2rem 1.7rem 2.2rem 0;
  border-top:1px solid var(--linha);
}
.servico:nth-child(3n+2){padding-left:1.7rem;padding-right:1.7rem}
.servico:nth-child(3n){padding-left:1.7rem;padding-right:0}
.servico-icone{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:16px;margin-bottom:1.1rem;
  background:var(--menta-clara);color:var(--mar);
}
.servico-icone svg{
  width:26px;height:26px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.servico h3{margin-bottom:.5rem}
.servico p{color:var(--tinta-suave);font-size:var(--t-texto)}

.servico-cta{
  padding:2rem 0 2.2rem 1.7rem;border-top:1px solid var(--linha);
  display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;
  justify-content:center;
  background:linear-gradient(180deg,var(--menta-clara),rgba(220,239,228,.35));
  border-radius:0 0 22px 0;
}
.servico-cta p{font-family:var(--f-titulo);font-weight:600;font-size:var(--t-sub);color:var(--mar);line-height:1.2}

/* ---------- como funciona ---------- */
.como{background:var(--menta-clara)}
.como .secao-cabeca{margin-bottom:clamp(2rem,4vw,3rem)}
.passos{
  max-width:var(--largura);margin:0 auto;padding:0 clamp(16px,3vw,24px);
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,3vw,2.2rem);counter-reset:none;
}
.passos li{
  background:var(--papel-2);border-radius:22px;padding:2rem 1.7rem;
  border:1px solid rgba(14,91,78,.10);
}
.passo-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;margin-bottom:1.1rem;
  background:var(--mar);color:#fff;
  font-family:var(--f-titulo);font-weight:600;font-size:var(--t-sub);
}
.passos h3{margin-bottom:.5rem}
.passos p{color:var(--tinta-suave);font-size:var(--t-texto)}

/* ---------- clinica ---------- */
.clinica{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;
  max-width:var(--largura);margin:0 auto;
  padding-inline:clamp(16px,3vw,24px);
}
.clinica-arte{position:relative}
.clinica-arte svg{width:100%;height:auto;display:block;border-radius:26px}
.cena-fundo{fill:var(--menta-clara)}
.cena-disco{fill:#fff;opacity:.55}
.cena-chao{stroke:var(--linha);stroke-width:4;stroke-linecap:round}
.cena-cadeira path{
  fill:none;stroke:var(--mar);stroke-width:14;stroke-linecap:round;stroke-linejoin:round;
}
.cena-apoio{fill:var(--mar)}
.cena-faisca path{fill:var(--menta)}
.cena-faisca.sol path{fill:var(--sol)}
.clinica-legenda{
  margin-top:.8rem;font-size:var(--t-detalhe);font-style:italic;
  color:var(--tinta-suave);text-align:center;
}
.clinica-texto h2{margin-bottom:1.2rem}
.clinica-texto p{color:var(--tinta-suave);margin-bottom:1rem;max-width:52ch}
.clinica-lista{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.7rem}
.clinica-lista li{position:relative;padding-left:1.9rem;font-weight:600}
.clinica-lista li::before{
  content:"";position:absolute;left:.1rem;top:.55em;
  width:.85rem;height:.85rem;border-radius:50%;
  background:var(--menta);box-shadow:inset 0 0 0 4px var(--papel);
  border:2px solid var(--mar);
}

/* ---------- duvidas ---------- */
.duvidas,.perguntas{background:var(--papel)}
.duvidas .secao-cabeca,.perguntas .secao-cabeca{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.faq{max-width:820px;margin:0 auto;padding:0 clamp(16px,3vw,24px)}
.faq details{
  background:var(--papel-2);border:1px solid var(--linha);border-radius:16px;
  padding:.2rem 1.3rem;margin-bottom:.9rem;
}
.faq details[open]{border-color:var(--menta);box-shadow:0 18px 30px -26px rgba(14,91,78,.8)}
.faq summary{
  cursor:pointer;list-style:none;
  font-family:var(--f-titulo);font-weight:600;font-size:var(--t-sub);
  padding:1.15rem 2.2rem 1.15rem 0;position:relative;color:var(--tinta);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.2rem;top:50%;
  width:14px;height:14px;margin-top:-7px;
  border-right:2.5px solid var(--mar);border-bottom:2.5px solid var(--mar);
  transform:rotate(45deg);transition:transform .25s var(--curva);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq p{padding:0 0 1.3rem;color:var(--tinta-suave);max-width:62ch}

/* ---------- onde ---------- */
.onde{
  background:var(--papel-2);border-top:1px solid var(--linha);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;
  max-width:var(--largura);margin:0 auto;
  padding-inline:clamp(16px,3vw,24px);
}
.onde-texto h2{margin-bottom:1.3rem}
.onde-endereco{font-size:var(--t-sub);line-height:1.35;margin-bottom:1.4rem}
.onde-horario{
  margin:0 0 1.6rem;padding:0;display:grid;gap:.35rem;
  border-left:3px solid var(--menta);padding-left:1rem;
}
.onde-horario div{display:flex;gap:.6rem;font-variant-numeric:tabular-nums}
.onde-horario dt{font-weight:600;min-width:11.5rem}
.onde-horario dd{margin:0;color:var(--tinta-suave)}
.onde-contatos{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.5rem}
.onde-contatos a{color:var(--mar);font-weight:600;text-decoration:none;border-bottom:2px solid rgba(95,201,175,.5)}
.onde-contatos a:hover{border-color:var(--mar)}
.onde-mapa{position:relative}
.onde-mapa svg{width:100%;height:auto;display:block}
.mapa-fundo{fill:var(--papel)}
.mapa-ruas{stroke:var(--linha);stroke-width:14;fill:none;stroke-linecap:round}
.mapa-quadra rect{fill:var(--menta-clara);stroke:rgba(14,91,78,.16);stroke-width:2}
.mapa-pino path{fill:var(--mar)}
.mapa-pino circle{fill:var(--sol)}
.mapa-legenda{
  margin-top:.8rem;font-size:var(--t-detalhe);color:var(--tinta-suave);
  text-align:center;font-weight:600;
}

/* ---------- chamada final ---------- */
.chamada{
  background:var(--mar);color:#fff;text-align:center;
  padding-block:clamp(60px,7vw,104px);
}
.chamada h2{color:#fff;max-width:20ch;margin:0 auto 1rem}
.chamada p{color:#D8EDE4;margin:0 auto 2rem;max-width:44ch;font-size:var(--t-texto)}
.chamada .botao{background:#fff;color:var(--mar-esc);border-color:#fff}
.chamada .botao:hover{background:var(--sol-clara);border-color:var(--sol-clara)}
.chamada :focus-visible{outline-color:#fff}

/* ---------- rodape ---------- */
.rodape{background:var(--mar-esc);color:#CFE3DA;padding-block:clamp(2.4rem,5vw,3.4rem)}
.rodape-linha{
  max-width:var(--largura);margin:0 auto;padding:0 clamp(16px,3vw,24px);
  display:flex;flex-wrap:wrap;gap:1.6rem 3rem;align-items:flex-start;justify-content:space-between;
}
.rodape-nome{font-family:var(--f-titulo);font-weight:600;font-size:var(--t-sub);color:#fff}
.rodape-marca p{color:#A9C7BC;font-size:var(--t-detalhe);max-width:30ch;margin-top:.3rem}
.rodape-dados{font-style:normal;line-height:1.7;font-size:var(--t-texto)}
.rodape a{color:#BEE3D6}
.rodape-cro{font-size:var(--t-detalhe);color:#A9C7BC;align-self:flex-end}

/* ---------- botao fixo do WhatsApp ---------- */
.zap-fixo{
  position:fixed;left:50%;bottom:14px;transform:translate(-50%,140%);
  z-index:50;display:inline-flex;align-items:center;gap:.55rem;
  background:var(--mar);color:#fff;text-decoration:none;font-weight:600;
  font-size:var(--t-texto);
  width:max-content;max-width:calc(100vw - 28px);white-space:nowrap;
  padding:.9rem 1.5rem;border-radius:999px;min-height:48px;
  box-shadow:0 18px 34px -14px rgba(10,69,59,.9);
  transition:transform .35s var(--curva),opacity .35s ease;
  opacity:0;
}
.zap-fixo.visivel{transform:translate(-50%,0);opacity:1}
.zap-fixo :focus-visible{outline-color:#fff}

/* ---------- movimento ---------- */
@keyframes desenha{
  from{stroke-dashoffset:1}
  to{stroke-dashoffset:0}
}
@keyframes entra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes flutua{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-6px) scale(1.04)}
}

.sorriso{
  stroke-dasharray:1;stroke-dashoffset:0;
  animation:desenha .95s var(--curva) .35s both;
}
.heroi-texto > *{animation:entra .6s var(--curva) both}
.heroi-texto > :nth-child(1){animation-delay:.05s}
.heroi-texto > :nth-child(2){animation-delay:.12s}
.heroi-texto > :nth-child(3){animation-delay:.2s}
.heroi-texto > :nth-child(4){animation-delay:.28s}
.brilho.b1{transform-box:fill-box;transform-origin:center;animation:flutua 4.4s ease-in-out infinite}
.brilho.b3{transform-box:fill-box;transform-origin:center;animation:flutua 5.2s ease-in-out .6s infinite}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sorriso{animation:none;stroke-dashoffset:0}
  .heroi-texto > *{animation:none}
  .brilho{animation:none}
  .botao,.zap-fixo{transition:none}
}

/* ---------- responsivo ---------- */
@media (max-width:1000px){
  .lista-servicos{grid-template-columns:repeat(2,1fr)}
  .servico:nth-child(3n+2),.servico:nth-child(3n){padding-left:1.7rem;padding-right:1.7rem}
  .servico{padding:1.7rem 1.7rem 1.9rem}
  .servico:nth-child(odd){padding-left:0}
  .servico-cta{border-radius:0 0 20px 0;padding-left:1.7rem}
}

@media (max-width:860px){
  .menu{display:none}
  .heroi{display:block}
  .heroi-texto{max-width:none;text-align:left}
  .heroi h1{max-width:16ch}
  .heroi-arte{
    width:min(78%,380px);margin:1.6rem auto 0;justify-self:center;
    pointer-events:auto;
  }
  .clinica,.onde{grid-template-columns:1fr}
  .clinica-arte{order:2}
  .passos{grid-template-columns:1fr}
}

@media (min-width:861px){
  .zap-fixo{display:none}
}

@media (max-width:560px){
  .lista-servicos{grid-template-columns:1fr}
  .servico,.servico:nth-child(odd),.servico:nth-child(3n+2),.servico:nth-child(3n){padding:1.6rem 0}
  .servico-cta{padding:1.6rem 0;border-radius:0;background:none;border-top:1px solid var(--linha)}
  .botao-topo{display:none}
  .heroi h1{max-width:none}
  .onde-horario dt{min-width:0}
  .onde-horario div{flex-direction:column;gap:0}
  .rodape a{display:inline-flex;align-items:center;min-height:44px}
  .marca{padding:.35rem 0}
}

@media (max-width:860px){
  body{padding-bottom:76px}
}