/* Estilos para el fondo dinámico del cielo - Versión Simplificada */
.vdv-sky-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

/* 🌅 Amanecer */
.sky-dawn {
    background: radial-gradient(150% 90% at bottom,
        #ffb7b1 0%,   /* Rosa pastel */
        #F8E2B6 50%,  /* Amarillo claro */
        #D5E7DA 100%  /* Verde grisáceo */
    );
}

/* 🌤 Mañana */
.sky-morning {
    background: radial-gradient(150% 90% at bottom,
        #85b3c4 0%,   /* Celeste pastel */
        #a0e0d4 50%,  /* Verde agua claro */
        #cae5f1 100%  /* Blanco azulado */
    );
}

/* ☀️ Mediodía */
.sky-midday {
    background: radial-gradient(150% 90% at bottom,
        #7c9dcf 0%,   /* Azul grisáceo */
        #A5C5E5 50%,  /* Azul medio pastel */
        #D8EBF6 100%  /* Azul claro pastel */
    );
}

/* 🌇 Tarde */
.sky-afternoon {
    background: radial-gradient(150% 90% at bottom,
        #A5D7F5 0%,   /* Celeste grisáceo */
        #FBE6B0 50%,  /* Amarillo pastel */
        #FFF8E1 100%  /* Blanco cálido */
    );
}

/* 🌆 Atardecer */
.sky-sunset {
    background: radial-gradient(150% 90% at bottom,
        #F6B1A1 0%,   /* Coral pastel */
        #F8C982 50%,  /* Naranja claro */
        #E3B5D1 100%  /* Lila rosado grisáceo */
    );
}

/* 🌌 Anochecer */
.sky-dusk {
    background: radial-gradient(150% 90% at bottom,
        #B4A7E2 0%,   /* Lavanda */
        #C9B3E5 50%,  /* Lila pastel */
        #E2CFE8 100%  /* Rosa lavanda grisáceo */
    );
}

/* 🌙 Noche */
.sky-night {
    background: radial-gradient(150% 90% at bottom,
        #4E5570 0%,   /* Azul gris */
        #5F6783 50%,  /* Azul lavanda oscuro */
        #8992A9 100%  /* Gris azulado */
    );
}

/* 🌑 Medianoche */
.sky-midnight {
    background: radial-gradient(150% 90% at bottom,
        #2E2E3A 0%,   /* Gris azulado profundo */
        #3A3F54 50%,  /* Azul grafito */
        #5A647A 100%  /* Azul grisáceo suave */
    );
}

/* Efectos adicionales para el cielo */
.vdv-sky-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    background-image: 
        radial-gradient(150% 90% at bottom, rgba(255,255,255,0.18) 0%, transparent 55%),
        radial-gradient(150% 90% at bottom, rgba(255,255,255,0.1) 0%, transparent 55%),
        radial-gradient(150% 90% at bottom, rgba(255,255,255,0.1) 0%, transparent 55%);
    animation: cloudFloat 60s ease-in-out infinite;
}

@keyframes cloudFloat {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-10px) translateY(-5px); }
    50% { transform: translateX(10px) translateY(5px); }
    75% { transform: translateX(-5px) translateY(-10px); }
}

/* Ajustes para el contenido sobre el fondo */
body {
    position: relative;
    z-index: 1;
}

/* Asegurar que el contenido tenga suficiente contraste */
.wp-site-blocks {
    position: relative;
    z-index: 2;
}

/* Efecto sutil para las transiciones */
.vdv-sky-background.transitioning {
    transition: background 60s ease-in-out;
}