/* ============================================================
   Projeto Facial — Dra. Karine Miranda
   Tema: Clinical Soft Luxury (Ouro + Bege + Deep Black)
   ============================================================ */

:root {
  --preto:        #0F0E0D;
  --grafite:      #1A1817;
  --grafite-alt:  #242120;
  --ouro:         #C5A059;   /* ouro suave */
  --ouro-claro:   #E8D5B5;
  --ouro-escuro:  #8E7343;
  --ouro-bf:      #AF9460;
  --texto:        #FDFBF9;
  --texto-sec:    #C8C2BC;
  --texto-fraco:  #8C847E;
  --borda:        1px solid rgba(197,160,89,0.25);
  --glow:         0 0 24px rgba(197,160,89,0.18);
  --fonte-titulo: 'Playfair Display', Georgia, serif;
  --fonte-texto:  'Inter', system-ui, -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body { overflow-x:hidden; }

body {
  background: var(--preto);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
}

/* ===================== PARALLAX BACKGROUND ===================== */
.parallax-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: -1;
  background-image: 
    linear-gradient(135deg, rgba(15,14,13,0.95) 0%, rgba(197,160,89,0.03) 50%, rgba(15,14,13,0.95) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1; 
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}

.parallax-bg::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(197,160,89,0.02) 45%,
    rgba(232,213,181,0.05) 50%,
    rgba(197,160,89,0.02) 55%,
    transparent 100%
  );
  animation: shine-sweep 12s infinite linear;
  pointer-events: none;
}

@keyframes shine-sweep {
  0% { transform: translateX(-20%) translateY(-20%); }
  100% { transform: translateX(20%) translateY(20%); }
}

@supports (attachment: fixed) {
  .parallax-bg { background-attachment: fixed; }
}

/* ===================== HEADER ===================== */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15,14,13,0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: var(--borda);
  padding: 20px 16px 18px;
  text-align: center;
  transition: padding .3s ease;
}
.topo.compacto { padding: 10px 16px; }

.topo-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
.topo-logo {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ouro);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.topo-logo img { width:100%; height:100%; object-fit:cover; }
.topo-logo .monograma {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ouro);
}
.topo-escritorio {
  font-size: .7rem;
  letter-spacing: 3px;
  color: var(--ouro-claro);
  font-weight: 600;
  text-transform: uppercase;
}
.topo-headline {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: .2px;
}
.topo-headline .ouro { color: var(--ouro); font-style: italic; }
.topo.compacto .topo-headline { font-size: 1.15rem; }
.topo.compacto .topo-marca,
.topo.compacto .topo-subtitulo { display: none; }
.topo-subtitulo {
  margin-top: 8px;
  font-size: .65rem;
  letter-spacing: 2px;
  color: var(--texto-fraco);
  font-weight: 600;
  text-transform: uppercase;
}

/* ===================== BARRA DO CHAT ===================== */
.chat-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  width: 100%;
  margin: 15px auto 0;
  padding: 12px 16px;
}
.chat-bar-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ouro);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--grafite);
}
.chat-bar-avatar img { width:100%; height:100%; object-fit:cover; }
.chat-bar-info { display:flex; flex-direction:column; justify-content:center; line-height:1.25; gap:1px; }
.chat-bar-info strong { font-size:1rem; }
.chat-bar-status { font-size:.78rem; color: var(--texto-sec); }
.chat-bar-status .online { color:#4ad96b; font-weight: 600; }
.chat-bar-cadeado { margin-left:auto; font-size:.9rem; opacity:.5; color: var(--ouro); }

.iniciais {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--ouro);
  background: var(--grafite);
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
}

/* ===================== ÁREA DE CONVERSA ===================== */
.chat {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 14px 150px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.msg {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 80%;
  opacity: 0;
  transform: translateY(12px);
  animation: surge .4s ease-out forwards;
}
@keyframes surge { to { opacity:1; transform:translateY(0); } }

.msg-recebida { align-self: flex-start; }
.msg-enviada  { align-self: flex-end; flex-direction: row-reverse; max-width: 76%; }
/* mensagens seguidas da mesma pessoa ficam coladas (estilo WhatsApp) */
.msg.agrupada { margin-top: -4px; }

.msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--ouro);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--grafite);
}
.msg-avatar img { width:100%; height:100%; object-fit:cover; }
/* espaço no lugar do avatar quando a mensagem é continuação */
.msg-espaco { width: 28px; flex-shrink: 0; }

.balao {
  padding: 7px 11px;
  border-radius: 9px;
  font-size: .9rem;
  line-height: 1.4;
  overflow-wrap: break-word;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.msg-recebida .balao {
  background: var(--grafite);
  border: var(--borda);
  border-bottom-left-radius: 3px;
  color: var(--texto);
}
.msg-enviada .balao {
  background: linear-gradient(135deg, var(--ouro-bf) 0%, var(--ouro-claro) 50%, var(--ouro-escuro) 100%);
  color: #1a1400;
  font-weight: 600;
  border-bottom-right-radius: 3px;
  box-shadow: var(--glow);
}

.balao-midia {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.balao-midia .text { border-radius: 14px; overflow: hidden; border: var(--borda); }

.balao-nome {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--ouro);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.balao-hora {
  display: block;
  text-align: right;
  font-size: .6rem;
  color: var(--texto-fraco);
  margin-top: 2px;
}
.msg-enviada .balao-hora { color: rgba(26,20,0,.6); }

.digitando {
  align-self: flex-start;
  display: flex; gap: 6px;
  padding: 14px 18px;
  background: var(--grafite);
  border: var(--borda);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
}
.digitando span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ouro);
  animation: pulsa 1.4s infinite ease-in-out;
}
.digitando span:nth-child(2){ animation-delay:.2s; }
.digitando span:nth-child(3){ animation-delay:.4s; }
@keyframes pulsa { 0%,100%{transform:scale(.6);opacity:.4;} 50%{transform:scale(1.1);opacity:1;} }

/* ===================== PLAYER DE ÁUDIO (retangular, estilo WhatsApp) ===================== */
.audio {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 230px;
}
.audio-play {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--ouro-claro), var(--ouro), var(--ouro-escuro));
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.audio-play.pausado { animation: audio-glow 2s infinite; }
@keyframes audio-glow { 0%,100%{box-shadow:0 0 0 transparent;} 50%{box-shadow:0 0 10px var(--ouro);} }
.audio-play svg { width:15px; height:15px; fill:#000; }

.audio-corpo { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.audio-onda { display:flex; align-items:center; gap:2px; height:13px; }
.audio-onda i {
  display:block; flex:1; min-width:2px; max-width:3px; height:4px;
  background: var(--ouro-bf);
  border-radius:2px;
  animation: onda 1s infinite ease-in-out;
  animation-play-state: paused;
}
.audio.tocando .audio-onda i { animation-play-state: running; }
@keyframes onda { 0%,100%{height:4px;} 50%{height:13px;} }

.audio-barra { height: 3px; background: #333; border-radius: 2px; cursor: pointer; }
.audio-preenchido { height: 100%; width: 0%; background: var(--ouro); border-radius: 2px; }
.audio-tempo { display: flex; justify-content: space-between; font-size: .58rem; color: var(--texto-sec); }
.audio-veloc { flex-shrink:0; background: transparent; border: 1px solid var(--ouro); color: var(--ouro); border-radius: 5px; padding: 2px 5px; font-size: .62rem; cursor: pointer; align-self:center; }

/* ===================== IMAGEM E VÍDEO ===================== */
.midia { border-radius: 14px; overflow: hidden; border: var(--borda); background: #000; }
.midia video, .midia img { width: 100%; display: block; }
.midia-legenda { font-size: .8rem; color: var(--ouro-claro); padding: 10px 15px; background: var(--grafite); text-align: center; font-style: italic; }

/* ===================== INPUTS E OPÇÕES ===================== */
.entrada { display: flex; gap: 10px; align-self: stretch; margin-top: 10px; }
.entrada input { flex: 1; background: var(--grafite-alt); border: 1px solid #333; border-radius: 28px; padding: 14px 20px; color: #fff; font-size: 1rem; outline: none; transition: border .3s; }
.entrada input:focus { border-color: var(--ouro); }
.entrada-enviar { width: 52px; height: 52px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--ouro-bf), var(--ouro-escuro)); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.entrada-enviar:active { transform: scale(.9); }

.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-self: stretch; }
.opcao { background: var(--grafite); border: 1px solid var(--ouro); color: #fff; padding: 15px 10px; border-radius: 30px; font-size: .95rem; cursor: pointer; transition: all .2s; }
.opcao:hover { background: var(--ouro); color: #000; }

/* ===================== CARD DO CTA ===================== */
.cta {
  align-self: stretch;
  background: linear-gradient(to bottom, #111, #000);
  border: 1px solid var(--ouro);
  border-radius: 28px;
  padding: 35px 25px;
  text-align: center;
  box-shadow: var(--glow);
  position: relative;
}
.cta-selo-topo { font-size: .7rem; letter-spacing: 3px; color: var(--ouro); font-weight: 700; margin-bottom: 12px; }
.cta h2 { font-family: var(--fonte-titulo); font-size: 1.8rem; color: #fff; line-height: 1.2; }
.cta-sub { color: var(--ouro-claro); font-size: 1rem; margin: 10px 0 20px; }
.cta-resumo { font-size: .9rem; color: var(--texto-sec); text-align: left; line-height: 1.6; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
.cta-resumo b { color: var(--ouro); }
.cta-botao {
  width: 100%;
  margin-top: 25px;
  padding: 20px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--ouro-bf), var(--ouro-claro), var(--ouro-escuro));
  color: #000;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.cta-botao:hover { transform: scale(1.03); box-shadow: 0 10px 30px rgba(197,160,89,0.4); }
.cta-garantia { margin-top: 15px; font-size: .8rem; color: var(--texto-sec); }

/* ===================== BOTÃO PULAR ===================== */
.pular {
  position: fixed; right: 20px; bottom: 30px; z-index: 100;
  background: rgba(15,14,13,0.9); border: 1px solid var(--ouro); color: var(--ouro);
  padding: 12px 20px; border-radius: 25px; font-weight: 700; font-size: .85rem;
  backdrop-filter: blur(8px); opacity: 0; transform: translateY(20px); transition: all .4s;
  pointer-events: none;
}
.pular.visivel { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ===================== WHATSAPP ===================== */
.whats-flutuante {
  position: fixed; left: 18px; bottom: 24px; z-index: 100;
  width: 58px; height: 58px; border-radius: 50%;
  display: block; line-height: 0;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45));
  transition: transform .2s;
  animation: whats-flutua 3s ease-in-out infinite;
}
.whats-flutuante:active { transform: scale(.92); }
.whats-icone { width: 100%; height: 100%; display: block; }
@keyframes whats-flutua { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-5px); } }

.whats-popup {
  position: absolute; bottom: 70px; left: 0; background: #fff; color: #111;
  padding: 11px 16px; border-radius: 14px; font-size: .82rem; font-weight: 600; line-height: 1.35;
  width: 210px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); opacity: 0; transform: translateY(6px);
  transition: opacity .4s, transform .4s; pointer-events: none;
}
.whats-popup::after {
  content: ""; position: absolute; bottom: -7px; left: 22px;
  border: 7px solid transparent; border-top-color: #fff; border-bottom: 0;
}
.whats-flutuante.show-popup .whats-popup { opacity: 1; transform: translateY(0); }

/* ===================== RODAPÉ ===================== */
.rodape { text-align: center; padding: 40px 20px 60px; opacity: .6; }
.rodape p { font-size: .75rem; color: var(--texto-fraco); }

/* ===================== TELA DE ABERTURA ===================== */
.abertura {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #1a1817 0%, #0F0E0D 70%);
  text-align: center; padding: 24px;
  transition: opacity .5s ease, transform .5s ease;
}
.abertura.saindo { opacity: 0; transform: scale(1.04); pointer-events: none; }
.abertura-conteudo { max-width: 360px; animation: surge .6s ease-out; }
.abertura-logo {
  width: 96px; height: 96px; margin: 0 auto 18px;
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--ouro); box-shadow: var(--glow);
  display: flex; align-items: center; justify-content: center; background: var(--grafite);
}
.abertura-logo img { width: 100%; height: 100%; object-fit: cover; }
.abertura-logo .monograma { font-family: var(--fonte-titulo); font-weight: 700; color: var(--ouro); font-size: 1.8rem; }
.abertura-marca { font-size: .7rem; letter-spacing: 3px; color: var(--ouro-claro); font-weight: 600; text-transform: uppercase; }
.abertura-titulo { font-family: var(--fonte-titulo); font-size: 2.4rem; font-weight: 700; margin: 8px 0 4px; }
.abertura-titulo .ouro { color: var(--ouro); font-style: italic; }
.abertura-sub { color: var(--texto-sec); font-size: .95rem; margin-bottom: 32px; line-height: 1.5; }
.abertura-botao {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--ouro-bf), var(--ouro-claro), var(--ouro-escuro));
  color: #000; border: none; border-radius: 40px;
  padding: 18px 32px; font-size: 1.05rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 30px rgba(197,160,89,0.35); transition: transform .2s;
  animation: pulse-cta 2.2s infinite;
}
.abertura-botao svg { width: 22px; height: 22px; }
.abertura-botao:active { transform: scale(.96); }
@keyframes pulse-cta { 0%,100%{ box-shadow:0 10px 30px rgba(197,160,89,0.35);} 50%{ box-shadow:0 10px 45px rgba(197,160,89,0.6);} }
.abertura-aviso { margin-top: 18px; font-size: .8rem; color: var(--texto-fraco); }

/* ===================== BOTÃO DE SOM (cantinho) ===================== */
.som-toggle {
  position: fixed; top: 14px; right: 14px; z-index: 200;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(15,14,13,0.85); border: 1px solid var(--ouro);
  color: var(--ouro); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .2s, opacity .3s;
}
.som-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.som-toggle:active { transform: scale(.9); }
.som-toggle:not(.ativo) { color: var(--texto-fraco); border-color: var(--texto-fraco); opacity: .8; }

/* ===================== FOTO DO MÉTODO ===================== */
.balao-midia .midia img { width: 100%; display: block; }
.midia img { width: 100%; display: block; }

/* ===================== BOTÃO FINAL (imagem) ===================== */
.botao-final { align-self: stretch; text-align: center; margin-top: 8px; animation: surge .5s ease-out; }
.botao-imagem {
  width: 100%; border: 1px solid var(--ouro); border-radius: 18px; overflow: hidden;
  padding: 0; cursor: pointer; background: #000; display: block;
  box-shadow: var(--glow); transition: transform .2s, box-shadow .2s;
  animation: pulse-cta 2.4s infinite;
}
.botao-imagem img { width: 100%; display: block; }
.botao-imagem:hover { transform: scale(1.02); box-shadow: 0 12px 36px rgba(197,160,89,0.5); }
.botao-imagem:active { transform: scale(.98); }
.botao-seguro { margin-top: 12px; font-size: .82rem; color: var(--texto-sec); }

/* ===================== ÁUDIO: contorno fino e rente ===================== */
.balao-audio {
  padding: 7px 9px;
  border-radius: 14px;
  border: 1px solid rgba(197,160,89,0.18);
  background: rgba(26,24,23,0.55);
}
.balao-audio .audio { min-width: 230px; }
.balao-audio .balao-hora { margin-top: 2px; }

/* ===================== PASSO A PASSO (método) ===================== */
.passos-titulo { font-size: .9rem; color: var(--ouro-claro); font-weight: 600; margin-bottom: 10px; }
.passos-lista { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.passo-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .92rem; line-height: 1.4;
  opacity: 0; transform: translateY(8px);
  animation: passo-surge .45s ease-out forwards;
}
@keyframes passo-surge { to { opacity: 1; transform: translateY(0); } }
.passo-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ouro-bf), var(--ouro-escuro));
  color: #000; font-size: .78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.passo-texto { flex: 1; }

/* ===================== WHATSAPP OCULTO (só no final) ===================== */
.whats-flutuante { transition: opacity .5s ease; }
.whats-flutuante.oculto { opacity: 0; pointer-events: none; animation: none; }

/* ===================== INPUT ERRO ===================== */
.entrada input.erro { border-color: #e05a5a; }
.entrada input.erro::placeholder { color: #e05a5a; }

@media (max-width: 480px) {
  .topo-headline { font-size: 1.3rem; }
  .chat { padding-bottom: 120px; }
  .abertura-titulo { font-size: 2rem; }
}