/* ============================================================
   Márcia Pessoa Odonto — LP Odontologia Estética e Reabilitadora
   Identidade: terracota + areia + off-white + verde folha
   Tipografia: Fraunces (títulos) + Figtree (corpo), auto-hospedadas

   VERSÃO CONSOLIDADA: CSS original + adendo de micro-interações
   (reações ao cursor) já integrado, sem duplicações.
   ============================================================ */

/* ---------- Fontes auto-hospedadas (arquivos em assets/fonts/) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/figtree-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/figtree-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Paleta */
  --cor-primaria: #b86c57;         /* terracota do favicon: decoração e elementos grandes */
  --cor-primaria-escura: #8f4d3b;  /* terracota para texto (contraste ≈6:1 sobre o fundo) */
  --cor-primaria-clara: #f1e7da;   /* areia */
  --cor-folha: #5f7355;            /* verde folha discreto */
  --cor-fundo: #fbf8f3;
  --cor-texto: #2f2622;
  --cor-branco: #ffffff;
  --cor-botao: #2f2622;
  --cor-botao-3d: #1a1411;

  --cor-whatsapp: #25d366;
  --cor-whatsapp-3d: #128c47;

  /* Tipografia */
  --fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto-m: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --titulo-1: clamp(2.5rem, 1.5rem + 4.5vw, 4.75rem);
  --titulo-2: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --titulo-3: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);

  /* Ritmo */
  --espaco: 1rem;
  --espaco-xg: clamp(4rem, 9vw, 8rem);
  --raio: 12px;
  --largura-max: 72rem;
}

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--texto-m);
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: var(--titulo-1); max-width: 18ch; margin: 0 0 .5rem; color: var(--cor-texto); }
h2 { font-size: var(--titulo-2); margin: 0 0 1.5rem; color: var(--cor-primaria-escura); }
h3 { font-size: var(--titulo-3); color: var(--cor-primaria-escura); }

/* Âncoras não ficam escondidas atrás do cabeçalho fixo */
section[id] { scroll-margin-top: 4.5rem; }

/* ---------- Utilitários ---------- */
.container {
  width: min(100% - 2 * var(--espaco), var(--largura-max));
  margin-inline: auto;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: .75rem 1rem;
  background: var(--cor-texto);
  color: var(--cor-branco);
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cor-branco);
  border-bottom: 1px solid var(--cor-primaria-clara);
}
.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .75rem;
}
.cabecalho__logo {
  display: inline-flex;
  gap: .35rem;
  align-items: baseline;
  text-decoration: none;
  transition: opacity .2s ease;
}
.cabecalho__logo:hover { opacity: .8; }
.cabecalho__nome {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--cor-primaria-escura);
  display: inline-block;
}
.cabecalho__nome--destaque { color: var(--cor-folha); }
.cabecalho__menu {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cabecalho__menu a {
  color: var(--cor-texto);
  text-decoration: none;
  position: relative;
  padding-block: .2rem;
}
/* Sublinhado que desliza ao passar o cursor (micro-interação) */
.cabecalho__menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cor-primaria-escura);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.cabecalho__menu a:hover::after,
.cabecalho__menu a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 40rem) {
  .cabecalho__menu { font-size: .9rem; gap: .25rem 1rem; }
  .cabecalho__interno { flex-direction: column; align-items: flex-start; }
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--espaco-xg); }
.hero__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 50rem) {
  .hero__grid { grid-template-columns: 1.15fr 1fr; }
}
.hero__subtitulo { max-width: 48ch; margin: 0 0 2rem; }

/* Foto em arco, com véu terracota suave */
.hero__figura {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 999px 999px 1.5rem 1.5rem;
  max-width: 28rem;
  justify-self: center;
}
.hero__figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
/* Zoom suave ao passar o cursor (micro-interação) */
.hero__figura:hover img { transform: scale(1.04); }
.hero__figura::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgb(184 108 87 / 30%));
  mix-blend-mode: multiply;
}

/* Detalhe de assinatura: o sublinhado que se desenha ao carregar (um só) */
.hero__sorriso {
  display: block;
  width: min(100%, 18rem);
  margin-block: 1rem 1.5rem;
  fill: none;
  stroke: var(--cor-primaria);
  stroke-width: 6;
  stroke-linecap: round;
}
.hero__sorriso path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: desenhar 1.4s .3s ease-out forwards;
}
@keyframes desenhar { to { stroke-dashoffset: 0; } }

/* ---------- Seções ---------- */
.secao { padding-block: var(--espaco-xg); }
.secao--alterna { background: var(--cor-primaria-clara); }
.secao p { max-width: 62ch; }

/* ---------- Especialidades ---------- */
.especialidades__lista {
  display: grid;
  gap: var(--espaco);
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .especialidades__lista { grid-template-columns: repeat(3, 1fr); }
}
.cartao {
  background: var(--cor-branco);
  border-radius: var(--raio);
  padding: 1.5rem;
  box-shadow: 0 6px 0 var(--cor-primaria);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cartao h3 {
  margin-top: 0;
  color: var(--cor-primaria-escura);
  transition: color .25s ease;
}
.cartao p { margin-bottom: 0; }
/* Cartão levanta ao hover (micro-interação) */
.cartao:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 var(--cor-primaria);
}
.cartao:active {
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--cor-primaria);
}
.cartao:hover h3 { color: var(--cor-texto); }

/* ---------- Como é a consulta (sequência numerada) ---------- */
.passos {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  counter-reset: passo;
  border-left: 2px solid var(--cor-primaria);
}
.passo {
  counter-increment: passo;
  position: relative;
  padding: 0 0 2rem 2rem;
}
.passo:last-child { padding-bottom: 0; }
.passo::before {
  content: counter(passo);
  position: absolute;
  left: calc(-1rem - 1px);
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cor-primaria-escura);
  color: var(--cor-branco);
  font-weight: 600;
  font-size: .9rem;
  transition: transform .25s ease, background-color .25s ease;
}
/* Círculo numérico reage ao hover (micro-interação) */
.passo:hover::before {
  transform: scale(1.15);
  background-color: var(--cor-primaria);
}
.passo h3 { margin: 0 0 .25rem; }
.passo p { margin: 0; }

/* ---------- Depoimentos (CSS mantido: a seção está comentada no HTML
   e será reativada com os textos autorizados) ---------- */
.depoimentos__lista {
  display: grid;
  gap: var(--espaco);
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .depoimentos__lista { grid-template-columns: repeat(3, 1fr); }
}
.depoimento {
  background: var(--cor-branco);
  border-radius: var(--raio);
  padding: 1.5rem;
  box-shadow: 0 6px 0 var(--cor-primaria);
  transition: transform .25s ease, box-shadow .25s ease;
}
.depoimento:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 var(--cor-primaria);
}
.depoimento:active {
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--cor-primaria);
}
.depoimento blockquote { margin: 0; }
.depoimento__nome { margin: 0; font-weight: 600; }
.depoimento__autor {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
}
.depoimento__autor img,
.depoimento__foto-placeholder {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}
.depoimento__foto-placeholder {
  display: grid;
  place-items: center;
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria-escura);
  font-weight: 600;
}
.depoimentos__nota {
  margin: 1.5rem auto 0;
  font-size: .85rem;
  text-align: center;
  opacity: .8;
}

/* ---------- Dúvidas frequentes (details nativo) ---------- */
.faq { max-width: 48rem; }
.faq__item { border-bottom: 1px solid var(--cor-primaria-clara); }
.faq__item summary {
  cursor: pointer;
  padding: 1.1rem 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  transition: color .2s ease;
}
.faq__item summary:hover { color: var(--cor-primaria-escura); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  color: var(--cor-primaria-escura);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform .25s ease;
}
/* "+" gira ao hover (micro-interação) */
.faq__item summary:hover::after { transform: rotate(180deg); }
.faq__item[open] summary::after { content: "–"; transform: none; }
.faq__item p { margin: 0 0 1.1rem; }

/* ---------- Localização / Mapa ---------- */
.localizacao__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 50rem) {
  .localizacao__grid { grid-template-columns: 1fr 1.4fr; }
}
.localizacao__endereco { font-style: normal; }
.localizacao__mapa { margin: 0; }
.mapa {
  aspect-ratio: 4 / 3;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 6px 0 var(--cor-primaria);
  transition: box-shadow .25s ease, transform .25s ease;
}
/* Moldura cresce ao hover (micro-interação) */
.mapa:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 0 var(--cor-primaria);
}
.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.mapa__legenda {
  margin-top: 1rem;
  padding: 0 1rem;
  font-size: .95rem;
  text-align: center;
  line-height: 1.6;
}
.mapa__rota {
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  text-decoration: none;
}
/* "Como chegar" com sublinhado deslizante (micro-interação) */
.mapa__rota::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--cor-primaria-escura);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.mapa__rota:hover::after,
.mapa__rota:focus-visible::after { transform: scaleX(1); }

/* ---------- Contato ---------- */
.contato__grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 50rem) {
  .contato__grid { grid-template-columns: 1fr auto; }
}
.horario { font-weight: 600; }
.horario::before { content: "● "; color: var(--cor-primaria-escura); }
.horario[data-aberto="true"]::before { color: var(--cor-folha); }

/* ---------- Botões ---------- */
.botao {
  display: inline-block;
  padding: .9rem 1.75rem;
  border-radius: var(--raio);
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 5px 0 var(--cor-botao-3d);
}
.botao--primario { background: var(--cor-botao); color: var(--cor-branco); }
.botao:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--cor-botao-3d);
}
.botao:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--cor-botao-3d);
}

/* ---------- Botão flutuante WhatsApp (3D) ---------- */
.whatsapp-button {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #2fe070 0%, var(--cor-whatsapp) 45%, #1fb857 100%);
  color: var(--cor-branco);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #128c47;
  z-index: 50;
  box-shadow:
    0 5px 0 var(--cor-whatsapp-3d),
    0 8px 16px rgb(0 0 0 / 25%),
    inset 0 1px 0 rgb(255 255 255 / 45%);
  transition: transform .15s ease, box-shadow .15s ease;
  /* Micro-jitter sutil (assinatura), pausa ao hover, some no :active */
  animation: microJitter 3.2s ease-in-out infinite;
}
.whatsapp-button::before {
  content: "";
  position: absolute;
  inset: 2px 3px auto 3px;
  height: 45%;
  border-radius: 999px 999px 100px 100px / 999px 999px 40px 40px;
  background: linear-gradient(180deg, rgb(255 255 255 / 35%), transparent);
  pointer-events: none;
}
.whatsapp-button__icone { filter: drop-shadow(0 1px 0 rgb(0 0 0 / 15%)); }
.whatsapp-button:hover,
.whatsapp-button:focus-visible {
  animation-play-state: paused;
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 var(--cor-whatsapp-3d),
    0 12px 20px rgb(0 0 0 / 30%),
    inset 0 1px 0 rgb(255 255 255 / 45%);
}
.whatsapp-button:active {
  animation: none;
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--cor-whatsapp-3d),
    0 3px 6px rgb(0 0 0 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 45%);
}

/* Micro-jitter: oscilação sutil de ~0.5px e ~0.2° */
@keyframes microJitter {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  12% { transform: translate(.5px, -.3px) rotate(.2deg); }
  24% { transform: translate(-.4px, .3px) rotate(-.2deg); }
  36% { transform: translate(.3px, .4px) rotate(.12deg); }
  48% { transform: translate(0, 0) rotate(0deg); }
}

/* ---------- Foco visível ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--cor-primaria-escura);
  outline-offset: 3px;
}

/* Transição de cor padrão para links e resumos */
a, summary { transition: color .2s ease; }

/* ---------- Reveal on scroll (a classe .reveal é aplicada pelo JS) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--cor-texto);
  color: var(--cor-primaria-clara);
  padding-block: 1.5rem;
  text-align: center;
  font-size: .9rem;
}
.rodape p { margin: 0 0 .25rem; }
.rodape__cro { opacity: .8; margin-bottom: 0; }

/* ---------- Movimento reduzido (tudo num lugar só) ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__sorriso path { animation: none; stroke-dashoffset: 0; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .botao, .whatsapp-button,
  .cabecalho__logo, .cabecalho__menu a::after,
  .hero__figura img, .cartao, .depoimento, .cartao h3,
  .passo::before, .faq__item summary, .faq__item summary::after,
  .mapa, .mapa__rota::after,
  a, summary { transition: none; animation: none; }
  .botao:hover, .whatsapp-button:hover,
  .whatsapp-button:focus-visible { transform: none; }
  .hero__figura:hover img { transform: none; }
  .cartao:hover, .depoimento:hover, .mapa:hover { transform: none; }
}