/**
 * MIGRATION EXAMPLE — `.home-numero-card`
 *
 * Demuestra el patrón de migración de un componente legacy al DS v2 SIN tocar
 * el CSS original (home.css sigue intacto). Cuando se valide visualmente, se
 * pueden eliminar las reglas legacy de home.css y dejar solo este archivo.
 *
 * Carga DESPUÉS de home.css y de compat.css para que ganen estos overrides:
 *   <link rel="stylesheet" href="home.css">
 *   <link rel="stylesheet" href="assets/design/compat.css">
 *   <link rel="stylesheet" href="assets/design/migrated/home-numero-card.css">
 *
 * Cambios respecto al legacy:
 *   - Tokens v2 (--color-*, --sp-*, --r-*, --shadow-*) en lugar de aliases.
 *   - Hover lift + shadow accent (tactile premium).
 *   - Border-color accent en hover (más feedback).
 *   - Light mode pasa AA gracias a los tokens semánticos.
 *   - Contención layout/paint para performance.
 */

.home-academia .home-numero-card {
    text-align: center;
    padding: var(--sp-6);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--r-md);
    transition: transform var(--d-base) var(--ease-spring),
                border-color var(--d-fast) var(--ease-smooth),
                box-shadow var(--d-base) var(--ease-out-cubic);
    contain: layout paint;
}

.home-academia .home-numero-card:hover,
.home-academia .home-numero-card:focus-within {
    transform: translate3d(0, -4px, 0);
    border-color: var(--color-border-accent);
    box-shadow: var(--shadow-3),
                0 0 0 1px var(--color-accent-soft);
}

.home-academia .home-numero-card:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-shadow), var(--shadow-3), 0 0 0 1px var(--color-accent-soft);
}

.home-academia .home-numero-card:active {
    transform: translate3d(0, -1px, 0);
    transition-duration: var(--d-instant);
}

.home-academia .home-numero-value {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: clamp(1.75rem, 4vw, var(--fs-3xl));
    line-height: var(--lh-3xl);
    letter-spacing: var(--ls-tight);
    color: var(--color-accent);
    margin-bottom: var(--sp-2);
}

.home-academia .home-numero-label {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-text-muted);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .home-academia .home-numero-card,
    .home-academia .home-numero-card:hover,
    .home-academia .home-numero-card:focus-visible {
        transform: none;
        transition: border-color var(--d-fast) linear;
    }
}