/* Animaciones personalizadas */
.fade-in { 
    animation: fadeIn 0.5s ease-in-out; 
}

@keyframes fadeIn { 
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

/* Gradiente para el banner principal basado en los colores de la marca */
.hero-gradient { 
    background: linear-gradient(135deg, #00bdeb 0%, #004b87 100%); 
}

/* Evitar que el texto del modal se desborde */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* Personalización del Scrollbar para toda la página */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: #00bdeb; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #e6006f; 
}