/* ------------------- BOTÓN VOLVER ------------------- */
.fuego .volver {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
}

.fuego .volver a {
    background-color: #2b1b0f;
    color: #ffcc99;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
    transition: background-color 0.3s, transform 0.3s;
}

.fuego .volver a:hover {
    background-color: #4a2e17;
    transform: scale(1.05);
}

/* ------------------- TÍTULO PRINCIPAL ------------------- */
.fuego .titulo1 h2 {
    text-align: center;
    font-size: 2rem;
    color: #ffddc1;
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.8);
    cursor: pointer;
    margin-top: 50px;
}

/* ------------------- CAJA DE CARTA ------------------- */
.fuego .cajon1 p {
    background: linear-gradient(45deg, #f9e8c3, #d9b68d);
    border: 2px solid #5c3d2e;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.6);
    display: none;
    transform-origin: top;
    margin: auto;
    position: relative;
    overflow: hidden;
    max-width: 650px;
    
}

/* ------------------- LLAMAS AL ABRIR ------------------- */
@keyframes llamasAparecen {
    0% {
        opacity: 0;
        transform: scaleY(0.1) translateY(-50px);
        filter: brightness(0.3) hue-rotate(-20deg);
    }
    50% {
        filter: brightness(1.5) hue-rotate(20deg);
    }
    100% {
        opacity: 1;
        transform: scaleY(1) translateY(0);
        filter: none;
    }
}

/* ------------------- LLAMAS AL CERRAR ------------------- */
@keyframes consumirseFuego {
    0% {
        opacity: 1;
        transform: scaleY(1);
        filter: none;
    }
    60% {
        transform: scaleY(0.9) rotate(-1deg);
        filter: brightness(2) saturate(2) blur(1px);
    }
    100% {
        opacity: 0;
        transform: scaleY(0) translateY(-50px) rotate(5deg);
        filter: blur(4px);
    }
}

/* CLASES DINÁMICAS */
.fuego .desplegado {
    animation: llamasAparecen 1s forwards;
}

.fuego .cerrado {
    animation: consumirseFuego 1.2s forwards;
}

/* El body tendrá el fondo animado con fuego */
.fuego {
    margin: 0;
    padding: 0;

    height: 100vh;
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.7) 0%, rgba(255, 165, 0, 0.7) 50%, rgba(255, 69, 0, 0.7) 100%);
    background-size: 400% 400%;
    animation: flameAnimation 5s ease infinite;
    display: flex;
    justify-content: center;
    font-size: 20px;
}

/* Animación de la llamarada que oscila */
@keyframes flameAnimation {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 0% 100%;
    }
    75% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* Estilo de las chispas */
.chispa {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 165, 0, 0.9);
    box-shadow: 0 0 5px rgba(255, 69, 0, 0.8), 0 0 10px rgba(255, 69, 0, 0.7);
    opacity: 0;
    animation: chispasAnimation 1s ease-out forwards;
}

/* Animación de las chispas */
@keyframes chispasAnimation {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
    50% {
        transform: scale(1.5) translate(50px, -100px);
        opacity: 0.8;
    }
    100% {
        transform: scale(0) translate(100px, -200px);
        opacity: 0;
    }
}




.fuego {

position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 0;
}