/* 1. CONFIGURACIÓN GENERAL DEL CARRUSEL ROTATIVO */
#carousel-container {
    display: flex;
    width: 100%;
    transition: transform 0.7s ease-in-out; 
    will-change: transform;
}

/* 2. LÍNEAS DIVISORIAS BLANCAS RESPONSIVAS */
@media (min-width: 1024px) {
    .divider-x-white > div:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.15); 
    }
}

/* 3. ANIMACIÓN DE ENTRADA SUAVE (Fade In Up) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 1s ease-out forwards;
}

/* 4. OPTIMIZACIÓN DE RENDERIZADO DE IMÁGENES */
img {
    content-visibility: auto;
    object-fit: cover; 
}

/* 5. DISEÑO DE TARJETAS DE IGUAL ALTURA (FLEXBOX) */
#psicoboletin .grid > div {
    display: flex;
    flex-direction: column;
}

#psicoboletin .grid > div > div:last-child {
    flex-grow: 1;
}

/* 6. ANIMACIÓN SUAVE PARA EL BADGE UBÍCANOS */
@keyframes bounceGentle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.animate-bounce-gentle {
    animation: bounceGentle 3s ease-in-out infinite;
}