/* Páginas de avaliação (laser e ultrassom microfocado), Dra. Dani Goe. Foco em celular.
   Movimento: revelação ao rolar, título palavra a palavra, faixas correndo, animações de camadas da pele. */
:root {
  --creme: #faf7f2; --creme2: #f3ede4; --tinta: #1f1b17; --tinta2: #5d554c; --ouro: #c9971c; --ouro2: #a87a10; --ouro3: #f1d27a;
  --verde-wa: #25d366; --verde-wa2: #128c7e; --raio: 22px; --sombra: 0 18px 50px rgba(60, 40, 10, .14);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--tinta); background: var(--creme);
  line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
/* nada passa da largura da tela (a faixa inclinada é mais larga que o celular; o Safari do iPhone ignora overflow só no body) */
html, body { overflow-x: hidden; max-width: 100%; }
main { overflow-x: hidden; overflow-x: clip; }
a { color: inherit; }
.serif { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; }
.wrap { max-width: 560px; margin: 0 auto; padding: 0 20px; }

/* cabeçalho */
.topo { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px;
  background: rgba(250, 247, 242, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(201, 151, 28, .15); }
.topo img { height: 36px; width: auto; }
.topo .mini { font-size: .82rem; font-weight: 700; color: #fff; background: var(--tinta); padding: 9px 16px; border-radius: 99px; border: 0; cursor: pointer; }

/* herói */
.heroi { position: relative; padding: 88px 0 34px; overflow: hidden; }
.heroi::before { content: ''; position: absolute; inset: -30%; z-index: -2;
  background: radial-gradient(40% 35% at 20% 20%, rgba(241, 210, 122, .55), transparent 70%), radial-gradient(35% 30% at 85% 30%, rgba(233, 196, 170, .55), transparent 70%),
    radial-gradient(45% 40% at 60% 90%, rgba(255, 255, 255, .9), transparent 70%);
  animation: nevoa 16s ease-in-out infinite alternate; }
@keyframes nevoa { to { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.05); } }
.selo-topo { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ouro2); background: rgba(201, 151, 28, .1); border: 1px solid rgba(201, 151, 28, .3); padding: 7px 13px; border-radius: 99px; }
.selo-topo i { width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 0 rgba(201, 151, 28, .6); animation: pulso 1.8s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 9px rgba(201, 151, 28, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 151, 28, 0); } }
h1 { font-size: clamp(2.1rem, 9.4vw, 3rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; margin: 16px 0 14px; }
h1 .serif { font-size: 1.12em; color: var(--ouro2); letter-spacing: -.01em; }
h1 .w { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg); animation: sobe .7s cubic-bezier(.2, .9, .2, 1) forwards; }
@keyframes sobe { to { opacity: 1; transform: none; } }
.lead { font-size: 1.04rem; color: var(--tinta2); margin-bottom: 22px; }
.lead b { color: var(--tinta); }

.foto-heroi { position: relative; margin: 8px auto 0; width: 100%; aspect-ratio: 4 / 4.6; border-radius: 28px; overflow: hidden; box-shadow: var(--sombra); }
.foto-heroi img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.08); animation: aproxima 9s ease-out forwards; }
@keyframes aproxima { to { transform: scale(1); } }
.foto-heroi::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(31, 27, 23, .55)); }
.foto-heroi .assina { position: absolute; left: 18px; bottom: 16px; z-index: 2; color: #fff; }
.foto-heroi .assina strong { display: block; font-size: 1.15rem; }
.foto-heroi .assina span { font-size: .78rem; opacity: .9; letter-spacing: .06em; }
.flutua { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  padding: 9px 14px; border-radius: 16px; font-size: .8rem; font-weight: 700; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); animation: boia 5s ease-in-out infinite; }
.flutua svg { width: 20px; height: 20px; color: var(--ouro2); flex: none; }
.flutua.a { top: 16px; right: 14px; } .flutua.b { bottom: 78px; right: 14px; animation-delay: -2.5s; }
@keyframes boia { 50% { transform: translateY(-8px); } }

/* botão principal */
.cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 0; cursor: pointer; overflow: hidden;
  font: 800 1.08rem 'Poppins', sans-serif; color: #fff; padding: 19px 22px; border-radius: 18px; text-decoration: none;
  background: linear-gradient(135deg, #1f1b17 0%, #3a2f22 100%); box-shadow: 0 14px 34px rgba(31, 27, 23, .3); transition: transform .15s; }
.cta:active { transform: scale(.98); }
.cta svg { width: 24px; height: 24px; color: var(--verde-wa); flex: none; }
.cta::after { content: ''; position: absolute; top: -40%; bottom: -40%; width: 60px; left: -80px; background: rgba(255, 255, 255, .28); transform: rotate(20deg);
  animation: brilho 3.2s ease-in-out infinite; }
@keyframes brilho { 0%, 55% { left: -80px; } 100% { left: 120%; } }
.cta-nota { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: .76rem; color: var(--tinta2); }
.cta-nota span { display: inline-flex; align-items: center; gap: 5px; }
.cta-nota svg { width: 14px; height: 14px; color: var(--ouro2); }

/* faixa corrida */
.faixa { background: var(--tinta); color: var(--ouro3); overflow: hidden; white-space: nowrap; padding: 14px 0; transform: rotate(-2deg); margin: 20px -10px; }
.faixa div { display: inline-block; animation: corre 22s linear infinite; font-weight: 700; font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; }
.faixa div span { margin: 0 18px; } .faixa div span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); margin-right: 18px; vertical-align: middle; }
@keyframes corre { to { transform: translateX(-50%); } }

/* seções */
section { padding: 46px 0; }
.rotulo { font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ouro2); margin-bottom: 10px; }
h2 { font-size: clamp(1.65rem, 7vw, 2.2rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; margin-bottom: 14px; }
h2 .serif { color: var(--ouro2); font-size: 1.1em; }
.capsula { color: var(--tinta2); font-size: 1rem; margin-bottom: 22px; }

.revela { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .9, .2, 1); }
.revela.visivel { opacity: 1; transform: none; }
.revela.d1 { transition-delay: .1s; } .revela.d2 { transition-delay: .2s; } .revela.d3 { transition-delay: .3s; }

/* cartões de sinais (dor) */
.sinais { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sinal { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4; box-shadow: 0 10px 26px rgba(0, 0, 0, .1); }
.sinal img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
.sinal.visivel img { transform: scale(1.12); }
.sinal::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .7)); }
.sinal b { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; color: #fff; font-size: .95rem; line-height: 1.2; }
.sinal.largo { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.sinal-txt { display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; background: linear-gradient(160deg, #2a241d, #4a3b28); color: #fff; aspect-ratio: 3 / 4; border-radius: 20px; }
.sinal-txt svg { width: 34px; height: 34px; color: var(--ouro3); margin-bottom: auto; }
.sinal-txt b { font-size: 1rem; line-height: 1.2; } .sinal-txt small { opacity: .75; font-size: .78rem; margin-top: 4px; }

/* animação das camadas da pele */
.pele { position: relative; height: 280px; border-radius: 24px; overflow: hidden; background: #1b1712; box-shadow: var(--sombra); }
.pele .cam { position: absolute; left: 0; right: 0; }
.pele .c1 { top: 90px; height: 42px; background: #f6d8c6; } .pele .c2 { top: 132px; height: 62px; background: #ecb99f; }
.pele .c3 { top: 194px; height: 86px; background: #d7967b; }
.pele .nome { position: absolute; right: 12px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(60, 25, 10, .55); }
.pele .legenda { position: absolute; left: 14px; top: 14px; right: 14px; display: flex; justify-content: space-between; font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ouro3); }
.feixe { position: absolute; top: 44px; width: 4px; margin-left: -2px; border-radius: 4px; background: linear-gradient(var(--ouro3), var(--ouro)); box-shadow: 0 0 14px var(--ouro3);
  height: 0; animation: desce 3.2s ease-in-out infinite; }
@keyframes desce { 0% { height: 0; opacity: 1; } 35% { height: var(--h); opacity: 1; } 70% { height: var(--h); opacity: .2; } 100% { height: var(--h); opacity: 0; } }
.ponto { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle, #fff6d5, var(--ouro) 60%, transparent 70%);
  opacity: 0; animation: acende 3.2s ease-in-out infinite; }
@keyframes acende { 0%, 30% { opacity: 0; transform: scale(.3); } 45% { opacity: 1; transform: scale(1.4); } 80% { opacity: .9; transform: scale(1); } 100% { opacity: 0; } }
.pigmento { position: absolute; width: 30px; height: 16px; margin-left: -15px; border-radius: 10px; background: #6b3a24; animation: clareia 3.2s ease-in-out infinite; }
@keyframes clareia { 0%, 35% { opacity: 1; } 75%, 100% { opacity: .15; } }

/* tecnologias e passos */
.cartoes { display: grid; gap: 12px; }
.cartao { background: #fff; border-radius: var(--raio); padding: 20px; box-shadow: 0 8px 24px rgba(60, 40, 10, .07); border: 1px solid rgba(201, 151, 28, .12); }
.cartao h3 { font-size: 1.1rem; margin-bottom: 4px; letter-spacing: -.01em; }
.cartao p { color: var(--tinta2); font-size: .93rem; }
.cartao .tag { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro2); margin-bottom: 8px; }
.passos { counter-reset: p; display: grid; gap: 14px; }
.passo { position: relative; padding: 16px 16px 16px 64px; background: #fff; border-radius: 18px; box-shadow: 0 6px 18px rgba(60, 40, 10, .06); }
.passo::before { counter-increment: p; content: counter(p); position: absolute; left: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--ouro), var(--ouro2)); }
.passo b { display: block; } .passo span { color: var(--tinta2); font-size: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { background: #fff; border: 1px solid rgba(201, 151, 28, .3); color: var(--tinta); font-weight: 600; font-size: .88rem; padding: 9px 14px; border-radius: 99px; }

.video-card { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 480 / 520; background: #111; }
.video-card img, .video-card video { width: 100%; height: 100%; object-fit: cover; }
.video-card span { position: absolute; left: 12px; top: 12px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: rgba(0, 0, 0, .45); padding: 6px 10px; border-radius: 99px; }

/* sobre a médica */
.medica { display: grid; gap: 18px; }
.medica img { border-radius: 26px; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 15%; box-shadow: var(--sombra); }
.medica .crm { display: inline-block; margin-top: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--ouro2); }

/* perguntas */
details { background: #fff; border-radius: 16px; margin-bottom: 10px; box-shadow: 0 4px 14px rgba(60, 40, 10, .05); }
summary { list-style: none; cursor: pointer; padding: 16px 44px 16px 16px; font-weight: 700; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 16px; top: 12px; font-size: 1.4rem; color: var(--ouro2); transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 16px 16px; color: var(--tinta2); font-size: .93rem; }

.final { text-align: center; background: linear-gradient(160deg, #1f1b17, #3b2f20); color: #fff; border-radius: 30px; padding: 34px 22px; margin: 0 0 30px; overflow: hidden; position: relative; }
.final h2 { color: #fff; } .final p { opacity: .8; margin-bottom: 20px; }
.final .cta { background: linear-gradient(135deg, var(--ouro3), var(--ouro)); color: var(--tinta); }
.final .cta svg { color: var(--tinta); }

/* barra fixa */
.barra { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; transform: translateY(140%); transition: transform .45s cubic-bezier(.2, .9, .2, 1); }
.barra.on { transform: none; }
.barra .cta { padding: 16px; font-size: 1rem; }

footer { background: #1a1714; color: #cfc8bc; padding: 36px 0 90px; font-size: .88rem; }
footer h3 { color: #fff; font-size: 1rem; margin: 14px 0 6px; }
footer a { color: #cfc8bc; } footer .base { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 20px; padding-top: 16px; font-size: .8rem; opacity: .8; }
footer .base a { color: var(--ouro3); }

@media (min-width: 900px) {
  .wrap { max-width: 1040px; }
  .heroi .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
  .sinais { grid-template-columns: repeat(4, 1fr); } .sinal.largo { grid-column: span 2; aspect-ratio: auto; }
  .cartoes { grid-template-columns: repeat(3, 1fr); } .medica { grid-template-columns: .8fr 1.2fr; align-items: center; }
  .barra { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .revela, h1 .w { opacity: 1; transform: none; } }

/* ============ CONVERSA NO ESTILO WHATSAPP ============ */
.chat { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; background: #efe7dd; }
.chat.aberto { display: flex; animation: entraChat .35s cubic-bezier(.2, .9, .2, 1); }
@keyframes entraChat { from { transform: translateY(100%); } }
@media (min-width: 700px) { .chat { inset: auto 24px 24px auto; width: 400px; height: min(720px, calc(100vh - 48px)); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); } }
.chat-topo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--verde-wa2); color: #fff; }
.chat-topo button { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat-topo img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 2px solid rgba(255, 255, 255, .6); }
.chat-topo b { display: block; font-size: 1rem; } .chat-topo small { font-size: .78rem; opacity: .9; }
.chat-corpo { flex: 1; overflow-y: auto; padding: 16px 12px 10px; display: flex; flex-direction: column; gap: 8px;
  background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: 16px 16px; }
.msg { max-width: 84%; padding: 9px 12px 18px; border-radius: 12px; font-size: .96rem; line-height: 1.4; position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  animation: bolha .25s ease-out; word-wrap: break-word; }
@keyframes bolha { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.msg time { position: absolute; right: 8px; bottom: 3px; font-size: .66rem; opacity: .55; }
.msg.ela { background: #fff; align-self: flex-start; border-top-left-radius: 2px; }
.msg.eu { background: #d9fdd3; align-self: flex-end; border-top-right-radius: 2px; }
.digitando { align-self: flex-start; background: #fff; padding: 12px 14px; border-radius: 12px; display: flex; gap: 4px; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: #9aa0a6; animation: pula 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 50% { transform: translateY(-4px); opacity: .5; } }
.opcoes { display: flex; flex-direction: column; gap: 7px; align-self: stretch; animation: bolha .3s ease-out; }
.opcoes button { background: #fff; border: 1.5px solid var(--verde-wa2); color: var(--verde-wa2); font: 700 .93rem 'Poppins', sans-serif; padding: 12px; border-radius: 12px; cursor: pointer; text-align: left; }
.opcoes button:active { background: #e7f6f2; }
.chat-base { display: flex; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #f0f2f5; align-items: center; }
.chat-base input { flex: 1; border: 0; border-radius: 22px; padding: 13px 16px; font: 500 16px 'Poppins', sans-serif; outline: none; background: #fff; }
.chat-base button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--verde-wa2); color: #fff; cursor: pointer; flex: none; display: grid; place-items: center; }
.chat-base button svg { width: 22px; height: 22px; }
.chat-base.oculto { visibility: hidden; }
.chat-erro { color: #c0392b; font-size: .8rem; padding: 0 16px 4px; min-height: 1em; background: #f0f2f5; }
.chat-lgpd { font-size: .7rem; color: #667; text-align: center; padding: 4px 12px 0; background: #f0f2f5; }
.chat .ir-wa { align-self: center; margin-top: 6px; display: inline-flex; gap: 8px; align-items: center; background: var(--verde-wa); color: #fff; text-decoration: none;
  font-weight: 800; padding: 13px 20px; border-radius: 99px; }