/* FICHA LEYENDAS */

/* Aplicamos sombra y cambiamos color del borde cuando pasamos el cursor por la ficha */
.hover-shadow-xl:hover {
    box-shadow: var(--bs-box-shadow-lg);
    border-color: var(--bs-warning) !important;
}
/* ---------------------------------------------------------------------------------- */

/* Aumentamos escala cuando pasamos el cursor sobre el elemento que contiene la clase */
.hover-scale { transition: transform 0.3s ease; }

.hover-scale:hover { transform: scale(1.05); }
/* ---------------------------------------------------------------------------------- */

/* Aumentamos escala y brillo cuando pasamos el cursor sobre el elemento que contiene la clase */
.hover-effect { transition: transform 0.3s ease, filter 0.3s ease; }

.hover-effect:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
}
/* ------------------------------------------------------------------------------------------- */

/* Aumentamos escala, aplicamos rotación y cambiamos color cuando pasamos el cursor sobre el elemento que contiene la clase */
.hover-ko { transition: transform 0.3s ease, color 0.3s ease; }

.hover-ko:hover {
    transform: scale(1.15) rotate(-3deg);
    color: #FFD700 !important;
}
/* ------------------------------------------------------------------------------------------------------------------------ */

/* Aplicamos efecto aparición cuando bajamos por la página web */
/* Se complementa con JavaScript (ficha-leyendas.js) */
.fade-in {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
/* ----------------------------------------------------------- */