/* Estilos para el spinner */
    .spinner-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        /* Fondo semitransparente */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        /* Asegura que el spinner esté por encima de otros contenidos */
    }

    .spinner {
        border: 4px solid rgba(255, 255, 255, 0.3);
        border-top: 4px solid #007bff;
        /* Color del spinner */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }



    /* cards y posiciones */

      
    /* Aplica el hover al contenedor 'col' */
    .hover-container {
        position: relative;
        overflow: hidden;

    }

    /* Contenedor de la imagen */
    .img-container {
        width: 100%;
        height: 300px;
        position: relative;
        overflow: hidden;
    }

    /* Estilos para la imagen dentro del hover */
    .hover_zoom {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.35s, transform 0.35s;
        opacity: 0.7;
        transform: scale(1.1);
    }


    .hover-container:hover .hover_zoom {
        opacity: 1;
        transform: scale(1);
    }