/* 
  ========================================
  TEMAS DE COLOR DEL MEMORIAL (CSS Variables)
  ========================================
*/

/* TEMA: Eternidad (Oscuros/Dorados) - Por defecto */
.theme-eternidad {
    --mem-bg-color: #0e0e0e;
    --mem-text-color: #cba35c;
    --mem-accent-color: #e3d7b6;
    --mem-accent-hover: #c8bc9c;
    --mem-card-bg: #1a1a1a;
    --mem-border-color: #2b2b2b;
}

/* TEMA: Cielo Sereno (Celestes/Platas) */
.theme-cielo_sereno {
    --mem-bg-color: linear-gradient(to bottom, #f0f8ff, #e0efff);
    --mem-text-color: #1a3c5a;
    --mem-accent-color: #a8abb0;
    --mem-accent-hover: #8e9196;
    --mem-card-bg: #ffffff;
    --mem-border-color: #dbeafe;
}

/* TEMA: Naturaleza (Verdes/Tierras) */
.theme-naturaleza {
    --mem-bg-color: #f4f6f3;
    --mem-text-color: #2b4b3c;
    --mem-accent-color: #a67c52;
    --mem-accent-hover: #8f6a46;
    --mem-card-bg: #ffffff;
    --mem-border-color: #e2e8f0;
}

/* 
  ========================================
  TIPOGRAFÍAS
  ========================================
*/
.typography-sans-moderna {
    --mem-font-family: 'Montserrat', system-ui, sans-serif;
}

.typography-serif-clasica {
    --mem-font-family: 'Prata', serif;
}

.typography-script-elegante {
    --mem-font-family: 'Pinyon Script', cursive;
}

/* Aplicación global al contenedor principal del memorial */
.memorial-container {
    background: var(--mem-bg-color);
    color: var(--mem-text-color);
    font-family: var(--mem-font-family, sans-serif);
    min-height: 100vh;
    transition: background-color 0.5s ease, color 0.5s ease;
    position: relative;
    overflow-x: hidden;
}

.memorial-card {
    background-color: var(--mem-card-bg);
    border: 1px solid var(--mem-border-color);
}

.memorial-accent-text {
    color: var(--mem-accent-color);
}

.memorial-btn {
    background-color: var(--mem-accent-color);
    color: #fff;
}
.memorial-btn:hover {
    background-color: var(--mem-accent-hover);
}

/* 
  ========================================
  ANIMACIONES DE FONDO (PREMIUM)
  ========================================
*/

/* Contenedor absoluto para no afectar el flujo */
.memorial-bg-animation {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Partículas de luz sutiles */
.anim-particulas-luz {
    background-image: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 8%);
    background-size: 100px 100px;
    animation: floatingParticles 15s infinite linear;
    opacity: 0.6;
}

@keyframes floatingParticles {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100px); }
}

/* Llama de vela sutil (Resplandor animado abajo) */
.anim-llama-vela {
    background: radial-gradient(circle at 50% 100%, rgba(212, 175, 55, 0.15) 0%, transparent 40%);
    animation: candleFlicker 4s infinite alternate ease-in-out;
}

@keyframes candleFlicker {
    0% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0.7; transform: scale(0.95); }
}