body {
    /* background-image: url('img/networking.jpg'); */
    background: 
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('img/financiacion.jpg');
    background-size: cover;  /* Hace que la imagen cubra toda la pantalla */
    background-repeat: no-repeat;  /* Evita que la imagen se repita */
    background-position: center;  /* Centra la imagen */
}

@keyframes appear{
    from{
    opacity: 0;
    scale: .5;
    }
    to{
    opacity: 1;
    scale: 1;
    }
}

.grid-container2 {
    display: flex;
    /* flex-direction: column; */
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    padding: 30px;
}

.grid-item2 {
    flex: 1 1 calc(33.33% - 20px);
    max-width: 100%;
    box-sizing: border-box;
    background: linear-gradient(90deg, #bd6ddf, #efcbff);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    /*overflow: hidden; /* Mejor que visible para evitar desbordes inesperados */
    overflow: visible;
    transition: transform 0.2s ease;
    animation: appear 5s linear;
    animation-timeline: view();
    animation-range: entry 0;

    /* Evita que el texto se desborde */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Responsive para pantallas medianas (tablets) */
@media (max-width: 1024px) {
    .grid-item2 {
        flex: 1 1 calc(50% - 20px);
    }
}

/* Responsive para pantallas pequeñas (celulares) */
@media (max-width: 600px) {
    .grid-item2 {
        flex: 1 1 100%;
    }
}

.grid-item2 h2{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    color: #150050;
}

.grid-item2 p{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

button#enlace1,#enlace2,#enlace3,#enlace4,#enlace5,#enlace6,#enlace7,#enlace8{
    /* Color del fondo */
    background-color: #4c20c4;
    /* Color del texto */
    color: white;
    /* Sin borde */
    border: none;
    /* Espacio que hay entre el borde y el contenido. El primer término es lo superior e inferior y el segundo es izquierda y derecha */
    padding: 10px 20px;
    /* Tamaño de la letra */
    font-size: 1rem;
    /* Cambio de forma del cursor a una mano */
    cursor: pointer;
    /* Borde circular */
    border-radius: 4px;
    /* Transición del color del fondo */
    transition: background color 0.3s;
}

button#enlace1:hover,#enlace2:hover,#enlace3:hover,#enlace4:hover,#enlace5:hover,#enlace6:hover,#enlace7:hover,#enlace7:hover,#enlace8:hover{
    /* Color de la transición */
    background-color: #320c9c;
}

.image2 {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}