/* Template SAÚDE — mobile-first, sóbrio e acolhedor. Cores/tipografia vêm das CSS vars injetadas no build (tokens.json + cores do cliente). */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fonte-corpo);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cor-primaria) 12%, var(--cor-fundo)) 0%, var(--cor-fundo) 300px);
  color: var(--cor-texto);
  line-height: 1.6;
}

.pagina {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--esp-md) var(--esp-xl);
}

@keyframes subir { from { transform: translateY(14px); } to { transform: none; } }
.hero, .cta-whatsapp { animation: subir 0.55s ease-out both; }
.cta-whatsapp { animation-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) { .hero, .cta-whatsapp { animation: none; } }

/* 1. HERO — foto circular acolhedora com anel, registro sempre visível */
.hero { padding-top: var(--esp-xl); text-align: center; }

.hero-foto {
  width: 176px;
  height: 176px;
  object-fit: cover;
  border-radius: var(--raio-foto);
  display: block;
  margin: 0 auto var(--esp-md);
  border: 4px solid var(--cor-superficie);
  outline: 2px solid var(--cor-primaria);
  outline-offset: 3px;
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--cor-primaria) 55%, transparent);
}

.hero-nome {
  font-family: var(--fonte-display);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hero-profissao {
  color: var(--cor-primaria);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: var(--esp-xs);
}

.hero-registro {
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  margin-top: 0.25rem;
}

.hero-frase {
  color: var(--cor-texto-suave);
  font-size: 1.05rem;
  margin-top: var(--esp-sm);
}

/* 2. CTA WHATSAPP */
.cta-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: var(--esp-lg);
  padding: 1.1rem var(--esp-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor-primaria) 88%, #fff), var(--cor-primaria));
  color: var(--cor-primaria-texto);
  border-radius: var(--raio-botao);
  font-size: 1.06rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow:
    0 10px 26px -8px color-mix(in srgb, var(--cor-primaria) 55%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
  transition: transform 0.15s ease;
}

.cta-whatsapp:hover { transform: translateY(-1px); }
.cta-whatsapp:active { transform: scale(0.985); }

.badge-online {
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  margin-top: var(--esp-sm);
}

/* SEÇÕES — mais respiro que os outros templates (tom de consultório) */
.secao { margin-top: var(--esp-xl); }

/* contraste de fundo por tópico (bandas alternadas) */
.secao:nth-of-type(even) {
  background: color-mix(in srgb, var(--cor-primaria) 7%, var(--cor-fundo));
  margin-inline: calc(-1 * var(--esp-md));
  padding: var(--esp-lg) var(--esp-md);
  border-radius: var(--raio-card);
}

.secao-titulo {
  font-family: var(--fonte-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: var(--esp-md);
  text-align: center;
}

/* 3. ESPECIALIDADES (sem foto, sóbrias) */
.especialidades { display: grid; gap: var(--esp-sm); }

.especialidade-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-primaria);
  border-radius: var(--raio-card);
  padding: var(--esp-md);
}

.especialidade-nome { font-family: var(--fonte-display); font-size: 1.08rem; }

.especialidade-resultado {
  color: var(--cor-texto-suave);
  font-size: 0.92rem;
  margin-top: var(--esp-xs);
}

/* 4. SOBRE */
.sobre-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  padding: var(--esp-md);
  text-align: center;
}

.sobre-foto {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: var(--esp-sm);
}

.sobre-texto { font-size: 0.98rem; text-align: left; }

/* 5. DEPOIMENTOS */
.depoimentos { display: grid; gap: var(--esp-md); }

.depoimento {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  padding: var(--esp-md);
}

.depoimento-texto { font-size: 0.98rem; }

.depoimento-nome {
  display: block;
  margin-top: var(--esp-sm);
  color: var(--cor-primaria);
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
}

/* 6. CONVÊNIOS */
.convenios {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-xs);
}

.convenio {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-botao);
  padding: 0.4rem 0.9rem;
  font-size: 0.88rem;
  color: var(--cor-texto-suave);
}

/* 7. LOCALIZAÇÃO / HORÁRIOS */
.local-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  padding: var(--esp-md);
  text-align: center;
}

.local-endereco { font-weight: 600; }

.local-horarios {
  list-style: none;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
  margin: var(--esp-sm) 0 var(--esp-md);
}

/* 8. FECHO */
.fecho { margin-top: var(--esp-xl); text-align: center; }

.fecho-frase {
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

/* BOTÕES SECUNDÁRIOS */
.botao-secundario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem var(--esp-md);
  border: 1.5px solid var(--cor-primaria);
  border-radius: var(--raio-botao);
  color: var(--cor-primaria);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  background: transparent;
}

.botao-instagram { margin-top: var(--esp-xl); }

/* 9. RODAPÉ */
.rodape {
  margin-top: var(--esp-xl);
  text-align: center;
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

.rodape a { color: var(--cor-texto-suave); }

/* DESKTOP (adaptação) */
@media (min-width: 720px) {
  .pagina { max-width: 560px; }
  .hero-nome { font-size: 2.2rem; }
  .especialidades { grid-template-columns: 1fr 1fr; }
}