/* Landing page da Dra. Fernanda Labre Martins — identidade dourada da Odonthus.
   Cores da marca: #9A7330 #C99F54 #CCA253 #E7BA63 #F2DA81. Texto em tinta marrom, fundo branco. */
:root {
  --ouro-1: #9A7330;
  --ouro-2: #C99F54;
  --ouro-3: #CCA253;
  --ouro-4: #E7BA63;
  --ouro-5: #F2DA81;
  --ouro-texto: #7C5B22;   /* dourado escuro com contraste para texto pequeno */
  --tinta: #2E2210;
  --tinta-suave: #5E4E36;
  --papel: #FFFFFF;
  --papel-ouro: #FCF8EE;
  --linha: #EADCB8;
  --folha: linear-gradient(120deg, #9A7330 0%, #C99F54 22%, #F2DA81 46%, #CCA253 64%, #E7BA63 80%, #9A7330 100%);
  --serifa: "Bellefair", "Cormorant Garamond", Georgia, serif;
  --sem: "Jost", "Segoe UI", system-ui, sans-serif;
  --largura: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--sem);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ouro-texto); }
:focus-visible { outline: 3px solid var(--ouro-1); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--serifa); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: .005em; }
h2 { font-size: clamp(2rem, 5vw, 2.9rem); }
h3 { font-size: 1.7rem; }
p { margin: 0; max-width: 62ch; }

.miolo { width: min(100% - 32px, var(--largura)); margin-inline: auto; }
section { padding-block: clamp(64px, 10vw, 112px); }

/* Botões */
.botao {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.6em;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font: 500 1.02rem/1.2 var(--sem);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.botao:hover { background: var(--ouro-texto); }
.botao:active { transform: scale(.98); }
.botao svg { width: 1.25em; height: 1.25em; flex: none; }

/* Topo: a folha de ouro da marca, com o símbolo grande */
.topo {
  position: relative;
  overflow: hidden;
  background: var(--folha);
  background-size: 180% 180%;
  color: var(--tinta);
  padding-block: 28px clamp(56px, 9vw, 104px);
}
.topo::after { /* brilho lento, uma vez, ao abrir */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: brilho 2.4s .3s ease-out 1 forwards;
  pointer-events: none;
}
@keyframes brilho { to { transform: translateX(100%); } }
.topo-marca { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topo-marca img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.topo-marca a { color: var(--tinta); font-size: .95rem; text-decoration: none; border-bottom: 1px solid currentColor; }
.topo-grade {
  display: grid; gap: 32px; align-items: center;
  grid-template-columns: 1fr;
  margin-top: clamp(28px, 7vw, 72px);
}
.simbolo-grande { width: min(34vw, 150px); justify-self: start; filter: brightness(0) invert(1); opacity: .95; }
.topo h1 { font-size: clamp(2.6rem, 8.5vw, 4.6rem); max-width: 14ch; }
.topo .sub { margin-top: 18px; font-size: 1.12rem; color: #3F2F14; }
.topo .assinatura { margin-top: 26px; font-size: .98rem; color: #3F2F14; }
.topo .assinatura strong { font-weight: 500; color: var(--tinta); }
.topo .botao { margin-top: 30px; }
@media (min-width: 860px) {
  .topo-grade { grid-template-columns: 1.25fr .75fr; }
  .simbolo-grande { order: 2; width: 340px; justify-self: center; }
}

/* Tratamentos: três faixas grandes, não cartões */
.tratamentos h2 { margin-bottom: 40px; }
.trat-lista { border-top: 1px solid var(--linha); }
.trat {
  display: grid; gap: 8px 40px;
  grid-template-columns: 1fr;
  padding-block: 28px;
  border-bottom: 1px solid var(--linha);
}
.trat h3 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); color: var(--ouro-texto); }
.trat p { color: var(--tinta-suave); }
@media (min-width: 760px) { .trat { grid-template-columns: 1fr 1.3fr; align-items: baseline; } }
.outros { margin-top: 32px; color: var(--tinta-suave); }
.outros strong { color: var(--tinta); font-weight: 500; }

/* Sobre */
.sobre { background: var(--papel-ouro); }
.sobre-grade { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .sobre-grade { grid-template-columns: .85fr 1.15fr; } }
.foto {
  aspect-ratio: 4 / 5;
  border-radius: 200px 200px 6px 6px; /* arco, como os espelhos redondos do consultório */
  overflow: hidden;
  background: linear-gradient(160deg, var(--ouro-5), var(--ouro-2));
  display: grid; place-items: center;
  color: var(--tinta); font-size: .95rem; text-align: center; padding: 24px;
}
.foto picture, .foto img { width: 100%; height: 100%; object-fit: cover; }
.sobre .foto { padding: 0; }
.sobre .foto img { object-position: 50% 20%; }
.sobre h2 { margin-bottom: 20px; }
.sobre p + p { margin-top: 14px; }
.cro { margin-top: 22px; font-size: .95rem; color: var(--ouro-texto); }

/* Consultório */
.fotos { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-top: 32px; max-width: 760px; }
.fotos .foto { aspect-ratio: 3 / 5; border-radius: 6px; padding: 0; }
.consultorio .legenda { margin-top: 16px; color: var(--tinta-suave); }

/* Avaliações */
.avaliacoes { text-align: center; padding-block: clamp(56px, 8vw, 88px); border-block: 1px solid var(--linha); }
.avaliacoes p { margin: 14px auto 24px; }
.avaliacoes .convite { margin: 26px auto 0; font-size: .95rem; color: var(--tinta-suave); }
.link-simples { font-weight: 500; }

/* Como funciona: é uma sequência de verdade, por isso os números */
.passos { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 28px; counter-reset: passo; }
@media (min-width: 860px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.passos li { counter-increment: passo; }
.passos li::before {
  content: counter(passo);
  display: block;
  font-family: var(--serifa); font-size: 3.4rem; line-height: 1;
  background: var(--folha); background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
}
.passos h3 { font-size: 1.5rem; margin-bottom: 6px; }
.passos p { color: var(--tinta-suave); }
.urgencia { margin-top: 36px; padding: 20px 22px; border-left: 3px solid var(--ouro-3); background: var(--papel-ouro); }

/* Onde fica */
.onde { background: var(--papel-ouro); }
.onde-grade { display: grid; gap: 32px; }
@media (min-width: 860px) { .onde-grade { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.onde h2 { margin-bottom: 18px; }
.horarios { margin: 22px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; }
.horarios dt { font-weight: 500; }
.horarios dd { margin: 0; color: var(--tinta-suave); }
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 6px; background: var(--linha); }

/* Rodapé */
.rodape { background: var(--tinta); color: #E9DFC8; padding-block: 48px 120px; font-size: .95rem; }
.rodape img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .9; margin-bottom: 20px; }
.rodape a { color: var(--ouro-5); }
.rodape p + p { margin-top: 6px; }

/* Botão fixo do WhatsApp */
.zap-fixo {
  position: fixed; right: 16px; bottom: 16px; z-index: 10;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.2em; border-radius: 999px;
  background: #1F8F4E; color: #fff; text-decoration: none;
  font: 500 1rem/1 var(--sem);
  box-shadow: 0 6px 20px rgba(46, 34, 16, .28);
}
.zap-fixo svg { width: 1.4em; height: 1.4em; }
.zap-fixo:hover { background: #18773F; }
/* Some enquanto o botão do topo está na tela, para não aparecerem dois iguais */
.zap-fixo { transition: opacity .2s ease, transform .2s ease; }
.zap-fixo.escondido { opacity: 0; transform: translateY(12px); pointer-events: none; }