.efecto-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .efecto-hover:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

        .efecto-hover:hover .icono-modulo {
            filter: brightness(1.3);
        }

        .efecto-hover:hover .card-title {
            opacity: 0.8;
        }

a:focus, a:active {
    outline: none;
    box-shadow: none;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#principal {
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.95);
}

@media (max-width: 768px) {
    h3.card-title {
        font-size: 1.3rem;
    }

    h5.card-subtitle {
        font-size: 1rem;
    }
}