article footer button {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;

    cursor: pointer;
    transition: color 0.3s ease;
}

/* #fruitsCard footer i:hover { */
article footer button:hover {
    transform: scale(1.35);
}

/* estado active (al pulsar) */
article footer button:active {
    /* transform: scale(3); */
    transform: scale(0.95);
    filter: brightness(0.9);
}

/* estado focus para accesibilidad (teclado) */
article footer button:focus,
article footer button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.18);
    /* transform: scale(3); */
    transform: scale(1.1);
}

article form button:hover {
    transform: scale(.98);
}

article form input:hover {
    box-shadow: 0 0 8px rgba(0, 40, 80, 0.2);
}

aside li {
    cursor: pointer;
    transition: color 0.2s ease;
}

aside li a {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

aside li a:hover {
    font-weight: bold;
}

/* aside li a {
    display: block;
    width: 100%;
    en active no está funcionando, al menos con Bootstrap, no. Así que mejor con li no más en el TS.
    color: inherit;
    text-decoration: none;
} */