/* Hacer que el body llene toda la pantalla */
html,
body {
    height: 100%;
}

/* Usar flexbox para que el footer esté al fondo */
body {
    display: flex;
    flex-direction: column;
}

/* El contenido se estira para llenar el espacio disponible */
.content {
    flex: 1;
    /*overflow-y: auto;*/
    /* Habilitar el scroll si es necesario */
}

footer {
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 10px 0;
}

/* Efecto hover de zoom en las tarjetas */
.card {
    transition: transform 0.3s ease;
    /* Suavizar la transición */
}