/* Estilos básicos del div */
.interactivo {
    background-color: #f1f8fb;
    /* Fondo claro */
    border-radius: 15px 15px;
    /* Bordes superiores redondeados, inferiores en punta */
    padding: 0px;
    /* Espaciado interno */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra suave */
}

/* Estilo cuando el mouse pasa sobre el div */
.interactivo:hover {
    background-color: #ffffff;
    /* Fondo ligeramente más oscuro */
    transform: scale(1.05);
    /* Efecto de escala al pasar el mouse */
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
    /* Sombra más pronunciada */
    cursor: pointer;
    /* Cambia el cursor cuando pasas el mouse sobre el div */
}

.interactivo2 {
    background: linear-gradient(135deg, #ffffff, #dfe9f3);
    /* Gradiente de fondo */
    border-radius: 20px 20px 0 0;
    /* Bordes superiores redondeados, inferiores en punta */
    padding: 20px;
    /* Espaciado interno */
    margin: 15px 0;
    /* Margen externo */
    transition: background-color 0.9s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra suave */
}

/* Estilo cuando el mouse pasa sobre el div */
.interactivo2:hover {
    background: linear-gradient(135deg, #75c2e6, #dfe9f3);
    /* Gradiente con color al pasar el mouse */
    transform: scale(1.05);
    /* Efecto de escala al pasar el mouse */
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
    /* Sombra más pronunciada */
    cursor: pointer;
    /* Cambia el cursor cuando pasas el mouse sobre el div */
}

/* Estilos para las imágenes dentro de los divs interactivos */
.interactivo img,
.interactivo2 img {
    width: 100%;
    /* Asegura que las imágenes se ajusten al ancho del div */
    height: auto;
    /* Mantiene la proporción de las imágenes */
    border-radius: 15px 15px 0 0;
    /* Bordes superiores redondeados, inferiores en punta */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra suave para las imágenes */
}

/* Estilos básicos del div interactivo3 */
.interactivo3 {
    border-radius: 15px 15px 0 0;
    /* Bordes superiores redondeados, inferiores en punta */
    padding: 20px;
    /* Espaciado interno */
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* Solo transiciones de fondo y transformación */
}

/* Estilo cuando el mouse pasa sobre el div interactivo3 */
.interactivo3:hover {
    transform: scale(1.05);
    /* Efecto de escala al pasar el mouse */
    cursor: pointer;
    /* Cambia el cursor cuando pasas el mouse sobre el div */
}

/* Estilos para las imágenes dentro del div interactivo3 */
.interactivo3 img {
    height: auto;
    /* Mantiene la proporción de las imágenes */
    border-radius: 15px 15px 0 0;
    /* Bordes superiores redondeados, inferiores en punta */
}

/* Estilos básicos del botón */
.boton-dinamico {
    background-color: #0087cb;
    /* Color de fondo */
    color: #ffffff;
    /* Color del texto */
    border: none;
    /* Sin borde */
    border-radius: 20px;
    /* Bordes redondos */
    padding: 10px 20px;
    /* Espaciado interno */
    margin-top: 10px;
    font-size: 16px;
    /* Tamaño de fuente */
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* Transiciones suaves */
    cursor: pointer;
    /* Cambia el cursor al pasar sobre el botón */
}

/* Estilo cuando el mouse pasa sobre el botón */
.boton-dinamico:hover {
    background-color: #76bce0;
    /* Color de fondo al pasar el mouse */
    transform: scale(1.05);
    /* Efecto de escala al pasar el mouse */
}