/* ========== DECORACIONES ========== */

.decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

/* Nubes */
.cloud {
    position: absolute;
    background: var(--blanco);
    border-radius: 9999px;
    opacity: 0.7;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: var(--blanco);
    border-radius: 50%;
}

.cloud-1 {
    width: 150px;
    height: 50px;
    top: 10%;
    left: 5%;
    animation: flotar 6s ease-in-out infinite;
}

.cloud-1::before {
    width: 60px;
    height: 60px;
    top: -30px;
    left: 20px;
}

.cloud-1::after {
    width: 80px;
    height: 80px;
    top: -40px;
    right: 20px;
}

.cloud-2 {
    width: 120px;
    height: 40px;
    top: 15%;
    right: 10%;
    animation: flotar 8s ease-in-out infinite 1s;
}

.cloud-2::before {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 15px;
}

.cloud-2::after {
    width: 60px;
    height: 60px;
    top: -30px;
    right: 15px;
}

.cloud-3 {
    width: 100px;
    height: 35px;
    top: 70%;
    left: 3%;
    animation: flotar 7s ease-in-out infinite 0.5s;
}

.cloud-3::before {
    width: 40px;
    height: 40px;
    top: -20px;
    left: 10px;
}

.cloud-3::after {
    width: 50px;
    height: 50px;
    top: -25px;
    right: 10px;
}

/* Notas musicales */
.note {
    position: absolute;
    font-size: 2rem;
    opacity: 0.6;
    animation: nota-flotar 4s ease-in-out infinite;
}

.note-1 {
    top: 15%;
    left: 10%;
    color: var(--rosa);
}

.note-2 {
    top: 25%;
    right: 15%;
    color: var(--turquesa);
    animation-delay: 1s;
}

.note-3 {
    top: 70%;
    left: 5%;
    color: var(--verde);
    animation-delay: 2s;
}

.note-4 {
    top: 80%;
    right: 8%;
    color: var(--azul);
    animation-delay: 0.5s;
}

/* Notas con color según sección - !important para sobrescribir .note-1, .note-2, etc. */
/* Morado para sección empatía original */
.notas-morado .note,
.notas-morado .note-1,
.notas-morado .note-2,
.notas-morado .note-3,
.notas-morado .note-4 {
    color: #7C5D7C !important;
}

/* Azul para sección Cocó */
.notas-azul .note,
.notas-azul .note-1,
.notas-azul .note-2,
.notas-azul .note-3,
.notas-azul .note-4 {
    color: #556fa0 !important;
}

/* Turquesa */
.notas-turquesa .note,
.notas-turquesa .note-1,
.notas-turquesa .note-2,
.notas-turquesa .note-3,
.notas-turquesa .note-4 {
    color: #88d4f2 !important;
}

/* Naranja */
.notas-naranja .note,
.notas-naranja .note-1,
.notas-naranja .note-2,
.notas-naranja .note-3,
.notas-naranja .note-4 {
    color: #e1985c !important;
}