/* ==========================================================================
   MÉDICO(A) — página do profissional
   tema-coracao: azul-marinho e vermelho, linhas limpas, linha de ECG
   tema-pele:    verde-sálvia e terracota, serifa Fraunces, formas orgânicas
   ========================================================================== */

body { background: var(--fundo); color: var(--texto); font-size: 16px; }
h1, h2, h3, h4, .marca b { font-family: var(--fonte-titulos); letter-spacing: -.02em; line-height: 1.1; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 14px; }
section { padding: 84px 6vw; }
.eyebrow { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--destaque); margin-bottom: 12px; }
.cabeca { margin-bottom: 36px; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--primaria); color: #fff; font-weight: 700; padding: 14px 24px; border-radius: 12px; border: 2px solid var(--primaria); transition: transform .15s; }
.botao:hover { transform: translateY(-2px); }
.botao.leve { background: transparent; color: var(--primaria); }
.botao.largo { width: 100%; }
.botao.whats { background: #1f9d55; border-color: #1f9d55; }
.botao:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 6vw; background: color-mix(in srgb, var(--fundo) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.marca { display: flex; flex-direction: column; line-height: 1.15; }
.marca b { font-size: 1.2rem; }
.marca small { color: var(--suave); font-size: .8rem; }
.topo-nav { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: .92rem; }
.topo-nav a:hover { color: var(--destaque); }
.topo-nav .pilula { background: var(--primaria); color: #fff; padding: 10px 18px; border-radius: 999px; }
.topo-nav .pilula:hover { color: #fff; }
.topo-menu-btn { display: none; font-size: 1.5rem; }

/* ---------- Hero ---------- */
.hero { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 6vw; align-items: center; padding-top: 60px; padding-bottom: 90px; overflow: hidden; }
.registro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.registro span { font-size: .78rem; font-weight: 700; background: var(--clara); color: var(--primaria); padding: 5px 11px; border-radius: 999px; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); margin-bottom: 16px; }
.frase { font-size: 1.18rem; color: var(--suave); max-width: 540px; margin-bottom: 22px; }
.temas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.temas li { border: 1px solid var(--linha); background: var(--papel); border-radius: 999px; padding: 6px 13px; font-size: .86rem; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-foto { position: relative; z-index: 1; }
.hero-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; }
.hero-foto figcaption { position: absolute; left: -30px; bottom: 30px; background: var(--papel); border-radius: 18px; padding: 14px 18px; box-shadow: 0 18px 40px rgba(20,33,61,.15); display: flex; flex-direction: column; font-size: .86rem; }
.hero-foto figcaption span { color: var(--suave); }
.ecg { position: absolute; left: 0; right: 0; bottom: 18px; width: 100%; height: 70px; fill: none; stroke: var(--destaque); stroke-width: 2.5; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: ecg 2.4s ease-out forwards; opacity: .55; } /* desenha uma vez */
@keyframes ecg { to { stroke-dashoffset: 0; } }

/* ---------- Sobre ---------- */
.sobre { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; background: var(--papel); }
.sobre p { color: var(--suave); font-size: 1.05rem; }
.formacao { border-left: 2px solid var(--linha); padding-left: 26px; display: grid; gap: 22px; }
.formacao li { position: relative; display: flex; flex-direction: column; }
.formacao li::before { content: ''; position: absolute; left: -33px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--destaque); box-shadow: 0 0 0 4px var(--papel); }
.formacao b { font-family: var(--fonte-titulos); color: var(--destaque); }

/* ---------- Ferramenta ---------- */
.ferr-cabeca { max-width: 680px; margin-bottom: 34px; }
.ferr-cabeca p { color: var(--suave); }
.ferr-corpo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.pergunta { background: var(--papel); border: 1px solid var(--linha); border-radius: 20px; padding: 20px; margin-bottom: 14px; }
.pergunta > b { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pergunta > b i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--primaria); color: #fff; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.pergunta .sub { display: block; margin: 16px 0 10px; font-size: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border: 1.5px solid var(--linha); background: var(--fundo); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: .88rem; }
.chips button.ativo { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.resultado { position: sticky; top: 90px; background: var(--papel); border: 1px solid var(--linha); border-radius: 22px; padding: 22px; box-shadow: 0 20px 50px rgba(20,33,61,.08); }
.resultado h4 { font-size: 1rem; margin: 18px 0 8px; }
.resultado h4:first-child { margin-top: 0; }
.alerta { background: #fdecec; border-left: 4px solid #d63b3b; border-radius: 12px; padding: 12px 14px; font-size: .9rem; margin-bottom: 16px; }
.alerta.suave { background: #fff4e5; border-color: #e08a1e; margin: 14px 0 0; }
.medidor { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 10px; }
.medidor div { font-size: .9rem; color: var(--suave); }
.medidor div b { font-family: var(--fonte-titulos); font-size: 2.4rem; color: var(--primaria); }
.medidor span { color: var(--suave); font-size: .86rem; }
.medidor i { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #2bb673, #f2b233, #e0414b); position: relative; }
.medidor i::after { content: ''; position: absolute; top: -5px; left: calc(var(--n) * 100% - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--papel); border: 3px solid var(--primaria); transition: left .3s; }
.medidor-texto { font-size: .9rem; margin-top: 12px; }
.lista { display: grid; gap: 6px; font-size: .92rem; }
.lista li { padding-left: 22px; position: relative; }
.exames li::before { content: '♥'; position: absolute; left: 0; color: var(--destaque); }
.levar li::before { content: '✓'; position: absolute; left: 0; color: #2bb673; font-weight: 800; }
.obs { display: block; color: var(--suave); font-size: .78rem; margin-top: 8px; }
.resultado .botao { margin-top: 18px; }
.resultado dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .92rem; }
.resultado dt { color: var(--suave); }
.resultado dd i { color: var(--suave); }

/* Mapa da pele */
.corpo-box { background: var(--papel); border: 1px solid var(--linha); border-radius: 28px; padding: 22px; display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; }
.vistas { grid-column: 1 / -1; display: inline-flex; justify-self: start; background: var(--fundo); border-radius: 999px; padding: 4px; }
.vistas button { padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: .86rem; }
.vistas .ativo { background: var(--primaria); color: #fff; }
.corpo { width: 100%; max-width: 220px; }
.corpo [data-r] { fill: var(--clara); stroke: var(--destaque); stroke-width: 1.5; cursor: pointer; transition: fill .2s; }
.corpo [data-r]:hover { fill: color-mix(in srgb, var(--destaque) 30%, var(--clara)); }
.corpo [data-r].ativo { fill: var(--destaque); }
.corpo.costas [data-r="rosto"] { fill: color-mix(in srgb, var(--clara) 70%, var(--linha)); }
.regioes-chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.regioes-chips button { border: 1.5px solid var(--linha); border-radius: 999px; padding: 7px 12px; font-size: .86rem; font-weight: 600; }
.regioes-chips .ativo { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.ferr-corpo:has(.corpo-box) { grid-template-columns: 1.1fr 1fr; }
.abcde { display: grid; gap: 6px; }
.abcde button { display: flex; align-items: center; gap: 12px; text-align: left; border: 1.5px solid var(--linha); border-radius: 14px; padding: 9px 12px; font-size: .9rem; }
.abcde i { font-style: normal; font-family: var(--fonte-titulos); font-weight: 700; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--clara); display: flex; align-items: center; justify-content: center; }
.abcde .ativo { border-color: var(--destaque); background: color-mix(in srgb, var(--destaque) 10%, var(--papel)); }
.abcde .ativo i { background: var(--destaque); color: #fff; }
.pele-lado .resultado { position: static; }

/* ---------- Modalidades e locais ---------- */
.modalidades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 0; }
.modalidades div { background: var(--papel); border: 1px solid var(--linha); border-radius: 20px; padding: 22px; }
.modalidades span { font-size: 1.6rem; }
.modalidades b { display: block; font-family: var(--fonte-titulos); font-size: 1.1rem; margin: 8px 0 4px; }
.modalidades p { color: var(--suave); font-size: .9rem; }
.locais { background: var(--papel); }
.locais-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.local { border: 1px solid var(--linha); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 6px; background: var(--fundo); overflow: hidden; }
.local b { font-family: var(--fonte-titulos); font-size: 1.25rem; }
.local p { font-size: .95rem; }
.local small { color: var(--suave); }
.local a { margin-top: auto; padding-top: 10px; color: var(--destaque); font-weight: 700; }
.local.online { padding-top: 0; }
.local.online img { margin: 0 -22px 12px; width: calc(100% + 44px); height: 120px; object-fit: cover; }
.convenios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; }
.convenios span { color: var(--suave); font-weight: 600; margin-right: 6px; }
.convenios b { background: var(--clara); color: var(--primaria); border-radius: 999px; padding: 6px 13px; font-size: .86rem; }

/* ---------- Agendamento ---------- */
.agendar { display: grid; grid-template-columns: .9fr 1.1fr; gap: 5vw; align-items: start; }
.agendar-texto p { color: var(--suave); margin-bottom: 22px; }
.agendar-texto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; }
.agenda { background: var(--papel); border: 1px solid var(--linha); border-radius: 26px; padding: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; box-shadow: 0 24px 60px rgba(20,33,61,.08); }
.agenda > * { min-width: 0; }
.agenda .largo, .agenda .anexo, .agenda .botao { grid-column: 1 / -1; }
.agenda label, .agenda legend { display: flex; flex-direction: column; gap: 5px; font-size: .8rem; font-weight: 700; color: var(--suave); }
.agenda legend { margin-bottom: 6px; }
.agenda fieldset { border: 0; }
.agenda label small { font-weight: 500; }
.agenda input, .agenda select, .agenda textarea { border: 1.5px solid var(--linha); border-radius: 12px; padding: 11px 12px; font-size: .95rem; color: var(--texto); background: var(--papel); width: 100%; resize: vertical; }
.agenda input:focus, .agenda select:focus, .agenda textarea:focus { outline: none; border-color: var(--primaria); }
.anexo { background: color-mix(in srgb, #2bb673 12%, var(--papel)); border: 1px solid color-mix(in srgb, #2bb673 40%, transparent); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; font-size: .88rem; }
.anexo b { color: #17804c; }
.anexo em { color: #c0392b; font-style: normal; font-weight: 700; }
.erro { color: #c0392b; font-weight: 700; font-size: .88rem; min-height: 1em; }

/* ---------- Depoimentos, FAQ, mapa, rodapé ---------- */
.depos { background: var(--papel); }
.depos-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.depos blockquote { border: 1px solid var(--linha); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 12px; background: var(--fundo); }
.depos cite { font-style: normal; font-weight: 700; color: var(--suave); }
.faq { max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-item button { width: 100%; display: flex; justify-content: space-between; gap: 14px; text-align: left; padding: 18px 0; font-weight: 700; font-size: 1.02rem; }
.faq-item button span { color: var(--destaque); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq-item.aberto button span { transform: rotate(45deg); }
.faq-resp { max-height: 0; overflow: hidden; transition: max-height .3s; }
.faq-resp p { color: var(--suave); padding-bottom: 18px; }
.mapa { padding: 0; }
.mapa iframe { width: 100%; height: 340px; border: 0; display: block; }
.rodape { background: var(--primaria); color: #fff; text-align: center; padding: 40px 6vw; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rodape > b { font-family: var(--fonte-titulos); font-size: 1.4rem; }
.rodape small { opacity: .7; }

/* ==========================================================================
   TEMA PELE — mais suave e orgânico
   ========================================================================== */
.tema-pele h1, .tema-pele h2 { font-weight: 500; }
.tema-pele h1 { font-style: italic; }
.tema-pele .botao { border-radius: 999px; }
.tema-pele .hero-foto img { border-radius: 260px 260px 32px 32px; }
.tema-pele .bolha { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; z-index: 0; }
.tema-pele .b1 { width: 380px; height: 380px; background: var(--clara); right: 4vw; top: 30px; }
.tema-pele .b2 { width: 260px; height: 260px; background: color-mix(in srgb, var(--destaque) 35%, transparent); left: 30%; bottom: -40px; }
.tema-pele .hero-texto { position: relative; z-index: 1; }
.tema-pele .registro span { background: var(--papel); border: 1px solid var(--linha); color: var(--texto); }
.tema-pele .pergunta, .tema-pele .resultado, .tema-pele .agenda, .tema-pele .modalidades div, .tema-pele .local { border-radius: 28px; }
.tema-pele .exames li::before { content: '•'; }
.tema-pele .medidor i { background: var(--linha); }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  section { padding: 60px 5vw; }
  .topo-menu-btn { display: block; }
  .topo-nav { position: fixed; inset: 0; z-index: -1; background: var(--fundo); flex-direction: column; justify-content: center; font-size: 1.2rem; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .topo-nav.aberto { opacity: 1; pointer-events: auto; }
  .hero, .sobre, .ferr-corpo, .ferr-corpo:has(.corpo-box), .agendar { grid-template-columns: 1fr; }
  .hero { padding-top: 30px; gap: 34px; }
  .hero-foto { max-width: 440px; }
  .hero-foto figcaption { left: 12px; bottom: 12px; }
  .resultado { position: static; }
  .modalidades { grid-template-columns: 1fr 1fr; }
  .depos-grade { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .corpo-box { grid-template-columns: 1fr; justify-items: center; }
  .regioes-chips { justify-content: center; }
  .agenda { grid-template-columns: 1fr; padding: 20px; }
  .modalidades { grid-template-columns: 1fr; }
}

/* Modalidades dentro de "Onde atendo" (uma seção só) */
.locais .modalidades { margin-bottom: 16px; }
.locais .modalidades div { background: var(--fundo); }
@media (max-width: 760px) {
  .locais .modalidades div { padding: 16px; }
}