/* ============================================================
   Templo de Sanación — vela esotérica flotante
   Fuente única compartida por todas las páginas (index.html,
   chat.html, y cualquier página nueva) — se inyecta vía assets/vela.js,
   nunca se copia el HTML/CSS página por página. Usa los tokens de
   color --gold/--gold-bright que cada página ya define en :root.

   z-index:49 — a propósito por ENCIMA de todo lo sticky de este
   proyecto (cta-bar y categoria-footer usan z-index:40, categoria-view
   usa 47, call-fab usa 48) para que la vela nunca quede tapada por el
   botón "LLAMA YA" en ninguna vista. Se queda por debajo del splash
   (z-index:50) solo como respaldo — la vela ya se oculta sola durante
   el splash vía .vela-oculta (ver vela.js), esto es cinturón y tirantes.
============================================================= */
.vela-flotante{
  position:fixed; z-index:49; pointer-events:none;
  left:16px;
  /* Arranca justo en el borde inferior real de la pantalla (respeta
     el safe-area del notch/home-indicator, pero sin los 100px extra
     de antes) — más grande que la versión original (~1.8x). */
  bottom:env(safe-area-inset-bottom, 0px);
  width:62px; height:108px;
}
.vela-flotante.vela-oculta{ display:none; }

.vela-cuerpo{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:40px; height:76px; border-radius:5px 5px 4px 4px;
  background:linear-gradient(180deg,#F3ECDD,#D8CFBB);
}
.vela-llama{
  position:absolute; bottom:72px; left:50%;
  width:25px; height:40px; margin-left:-12.5px;
  background:radial-gradient(ellipse at 50% 70%, var(--gold-bright), var(--gold) 60%, transparent 80%);
  border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
  animation:vela-flicker 2.6s ease-in-out infinite;
  transform-origin:50% 100%;
}
.vela-llama-nucleo{
  position:absolute; inset:7px 9px 4px 9px;
  background:#FFF3D6; border-radius:50%;
  filter:blur(1px);
}
.vela-resplandor{
  position:absolute; bottom:68px; left:50%; transform:translateX(-50%);
  width:90px; height:90px;
  background:radial-gradient(circle, rgba(201,162,75,0.35), transparent 70%);
  filter:blur(6px);
  animation:vela-glow 2.6s ease-in-out infinite;
}

@keyframes vela-flicker{
  0%,100%{ transform:scaleY(1) scaleX(1) rotate(0deg); }
  25%{ transform:scaleY(1.08) scaleX(0.94) rotate(-2deg); }
  50%{ transform:scaleY(0.92) scaleX(1.05) rotate(1.5deg); }
  75%{ transform:scaleY(1.05) scaleX(0.97) rotate(-1deg); }
}
@keyframes vela-glow{
  0%,100%{ opacity:.6; }
  50%{ opacity:.9; }
}

@media (prefers-reduced-motion: reduce){
  .vela-llama, .vela-resplandor{ animation:none; }
}