/* ===== ESTILOS DE LA VELA CONSUMIÉNDOSE ===== */

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

body {
  background: #000000;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Georgia', serif;
  color: #f5e6c8;
  overflow: hidden;
  padding: 20px;
}

/* CANVAS DE FUEGOS ARTIFICIALES (capa transparente a pantalla completa) */
#fuegosCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none; /* no bloquea clics, solo se ve */
}

/* REVEAL DEL AÑO NUEVO (aparece grande arriba y luego se desliza) */
#yearReveal {
  position: fixed;
  top: 12%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 50;
  font-size: 7rem;
  font-weight: bold;
  letter-spacing: 10px;
  color: #ffffff;
  text-shadow:
    0 0 20px #70ff70,
    0 0 40px #2ecc2e,
    0 0 80px rgba(46, 204, 46, 0.8);
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

#yearReveal.show {
  animation: revealAnio 5s ease forwards;
}

@keyframes revealAnio {
  0%   { opacity: 0; transform: scale(0.5); }
  15%  { opacity: 1; transform: scale(1.1); }
  30%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.8) translateY(40px); }
}

/* BOTÓN DE DONACIÓN (esquina superior derecha, rojo con pulso) */
.donate-btn {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ff4d4d 0%, #d92b2b 100%);
  color: #ffffff;
  text-decoration: none;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 0.95rem;
  padding: 10px 18px;
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(255, 77, 77, 0.5), 0 4px 10px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: pulso-donate 3s infinite ease-in-out;
}

.donate-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 25px rgba(255, 77, 77, 0.8), 0 6px 14px rgba(0,0,0,0.5);
}

.donate-btn svg { width: 20px; height: 20px; fill: #ffffff; }

@keyframes pulso-donate {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 77, 77, 0.5), 0 4px 10px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 0 22px rgba(255, 77, 77, 0.7), 0 4px 10px rgba(0,0,0,0.4); }
}

/* ESCENA PRINCIPAL */
.escena {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Contenedor de la vela con la sombra fantasma */
.vela-wrapper {
  position: relative;
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vela-contenedor {
  position: relative;
  width: 100%;
  height: 400px; /* Altura fija: la vela real se encoge dentro de ella */
}

/* Sombra fantasma: muestra la vela completa original (el "hueco" consumido) */
.vela-fantasma {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to right,
    rgba(30, 120, 30, 0.15) 0%,
    rgba(50, 180, 50, 0.2) 20%,
    rgba(70, 220, 70, 0.25) 50%,
    rgba(50, 180, 50, 0.2) 80%,
    rgba(30, 120, 30, 0.15) 100%);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 0 30px rgba(50, 220, 50, 0.15);
}

/* Línea punteada que marca el tope original de la vela */
.vela-fantasma::after {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  right: -10px;
  height: 2px;
  background: repeating-linear-gradient(to right,
    rgba(100, 255, 100, 0.4) 0px,
    rgba(100, 255, 100, 0.4) 6px,
    transparent 6px,
    transparent 12px);
}

/* Vela real (la que se consume). Anclada abajo, se encoge hacia arriba */
.vela {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: linear-gradient(to right,
    #0a4a0a 0%,
    #1a8a1a 20%,
    #2ecc2e 50%,
    #1a8a1a 80%,
    #0a4a0a 100%);
  border-radius: 8px 8px 4px 4px;
  box-shadow:
    inset -8px 0 15px rgba(0,0,0,0.4),
    inset 8px 0 15px rgba(255,255,255,0.15),
    0 0 25px rgba(46, 204, 46, 0.4);
  transition: height 1s linear;
}

/* Parte superior de la vela (cera derretida) */
.vela::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 10px;
  background: radial-gradient(ellipse at center, #50ff50 0%, #2ecc2e 50%, #1a8a1a 100%);
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
  z-index: 2;
}

/* MECHA (dentro de la vela para que baje con ella) */
.mecha {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 16px;
  background: linear-gradient(to top, #1a0a00, #000);
  border-radius: 2px;
  z-index: 3;
}

/* LLAMA (dentro de la vela para que baje con ella) */
.llama-container {
  position: absolute;
  top: -94px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 80px;
  z-index: 4;
}

.llama {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 65px;
  background: radial-gradient(ellipse at 50% 90%, #e0ffe0 0%, #50ff50 25%, #20cc20 55%, #0a8a0a 85%, transparent 100%);
  border-radius: 50% 50% 35% 35% / 70% 70% 30% 30%;
  animation: parpadeo 0.15s infinite alternate, bamboleo 2s infinite ease-in-out;
  transform-origin: 50% 100%;
  filter: blur(0.5px);
  box-shadow: 0 0 25px #30ff30, 0 0 50px #20cc20, 0 0 80px rgba(32, 204, 32, 0.5);
}

.llama::before {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 30px;
  background: radial-gradient(ellipse at 50% 80%, #ffffff 0%, #d0ffd0 40%, #50ff50 80%, transparent 100%);
  border-radius: 50% 50% 35% 35% / 70% 70% 30% 30%;
  animation: parpadeo-interno 0.2s infinite alternate;
}

@keyframes parpadeo {
  0%   { transform: translateX(-50%) scale(1, 1); opacity: 0.95; }
  100% { transform: translateX(-50%) scale(1.05, 0.95); opacity: 1; }
}

@keyframes parpadeo-interno {
  0%   { transform: translateX(-50%) scale(1, 1); }
  100% { transform: translateX(-50%) scale(0.9, 1.1); }
}

@keyframes bamboleo {
  0%, 100% { transform: translateX(-50%) rotate(-2deg); }
  50%      { transform: translateX(-50%) rotate(2deg); }
}

/* Gotas de cera en los laterales */
.gota {
  position: absolute;
  top: -2px;
  background: linear-gradient(to bottom, #50ff50 0%, #2ecc2e 60%, #1a8a1a 100%);
  border-radius: 50% 50% 45% 45% / 30% 30% 70% 70%;
  box-shadow: inset -2px 0 3px rgba(0,0,0,0.3), 0 2px 3px rgba(0,0,0,0.4);
  animation: gotear 4s infinite ease-in;
  z-index: 1;
}

.gota-1 { left: 8px; width: 14px; height: 30px; animation-delay: 0s; }
.gota-2 { right: 12px; width: 11px; height: 45px; animation-delay: 1.5s; }
.gota-3 { left: 25px; width: 9px; height: 22px; animation-delay: 2.8s; }
.gota-4 { right: 30px; width: 12px; height: 35px; animation-delay: 0.7s; }

@keyframes gotear {
  0%   { transform: translateY(0) scaleY(1); opacity: 1; }
  70%  { transform: translateY(60px) scaleY(1.2); opacity: 1; }
  100% { transform: translateY(120px) scaleY(0.8); opacity: 0.7; }
}

/* Candelabro dorado */
.base {
  width: 130px;
  height: 22px;
  background: linear-gradient(to bottom, #d4a843 0%, #b8862d 30%, #8b6914 70%, #6b4f10 100%);
  border-radius: 50%;
  margin-top: -4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.7), inset 0 2px 4px rgba(255,220,100,0.3);
  position: relative;
  z-index: 5;
}

.base::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 12px;
  background: linear-gradient(to bottom, #e8c060, #b8862d);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Texto del año */
.anio {
  margin-top: 30px;
  font-size: 2.5rem;
  font-weight: bold;
  letter-spacing: 8px;
  color: #ffd88a;
  text-shadow:
    0 0 10px #ff9a2a,
    0 0 20px #ff6a00,
    0 0 30px rgba(255, 120, 0, 0.6);
  animation: brillo-texto 3s infinite alternate;
}

@keyframes brillo-texto {
  0%   { text-shadow: 0 0 10px #ff9a2a, 0 0 20px #ff6a00; }
  100% { text-shadow: 0 0 15px #ffbb4a, 0 0 30px #ff8a1f, 0 0 45px rgba(255, 120, 0, 0.7); }
}

/* Contador */
.contador {
  margin-top: 25px;
  text-align: center;
  font-size: 1.1rem;
  color: #e8d4a8;
  line-height: 1.8;
  letter-spacing: 1px;
}

.contador .numero {
  display: inline-block;
  font-weight: bold;
  color: #ffd88a;
  min-width: 30px;
  text-align: center;
  font-family: 'Courier New', monospace;
}

.contador .etiqueta {
  font-size: 0.75rem;
  color: #a89070;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-top: -5px;
}

.contador-grupo {
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
}

/* Chispas mágicas de la llama */
.chispa {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
}

@keyframes chispa-subir {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* Ajustes para pantallas pequeñas (tableta / celular) */
@media (max-width: 500px) {
  .vela-contenedor { height: 300px; }
  .vela { height: 300px; }
  .vela-wrapper { width: 70px; }
  .base { width: 100px; }
  .anio { font-size: 1.8rem; }
  .contador { font-size: 0.95rem; }
  .donate-btn { top: 12px; right: 12px; font-size: 0.8rem; padding: 8px 14px; }
  .donate-btn svg { width: 16px; height: 16px; }
  #yearReveal { font-size: 4rem; }
  }