/* ====== Animación de entrada (fade-in) separada del hover ====== */
        .card-egresado {
            position: relative;
            border: 1px solid #e5e5e5;
            border-radius: 10px;
            background-color: #ffffff;
            padding: 0.75rem 0.75rem 0.6rem;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;

            opacity: 0;
            transform: translateY(15px);
            transition:
                box-shadow 0.15s ease,
                transform 0.15s ease;
        }

        /* Cuando la página está cargada, lanzamos el fade */
        body.page-loaded .card-egresado {
            animation: cardFadeIn 0.8s ease-out forwards;
        }

        @keyframes cardFadeIn {
            0% {
                opacity: 0;
                transform: translateY(15px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Cascada sólo afectando la animación (no el hover) */
        .listado-egresados .col-xl-6:nth-child(1) .card-egresado { animation-delay: 0.05s; }
        .listado-egresados .col-xl-6:nth-child(2) .card-egresado { animation-delay: 0.10s; }
        .listado-egresados .col-xl-6:nth-child(3) .card-egresado { animation-delay: 0.15s; }
        .listado-egresados .col-xl-6:nth-child(4) .card-egresado { animation-delay: 0.20s; }
        .listado-egresados .col-xl-6:nth-child(5) .card-egresado { animation-delay: 0.25s; }
        .listado-egresados .col-xl-6:nth-child(6) .card-egresado { animation-delay: 0.30s; }
        .listado-egresados .col-xl-6:nth-child(7) .card-egresado { animation-delay: 0.35s; }
        .listado-egresados .col-xl-6:nth-child(8) .card-egresado { animation-delay: 0.40s; }

        .card-egresado:hover {
            transform: translateY(-3px);
        }

        /* barra lateral de color por unidad */
        .card-egresado::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 6px;
            height: 100%;
            background: #333333; /* por defecto */
        }

        .card-egresado-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: -0.75rem -0.75rem 0.75rem;
            padding: 0.75rem 0.9rem;
            border-radius: 8px 8px 0 0;
            background-color: #f7f7f7;
        }

        .card-egresado-body {
            padding: 0 0.25rem 0.15rem;
            flex: 1 1 auto;
        }

        .card-egresado h5 {
            font-size: 1.05rem;
            font-weight: 600;
            letter-spacing: 0.01em;
        }

        .card-egresado p {
            font-size: 0.95rem;
            margin-bottom: 0.25rem;
            color: #444444;
        }

        .card-egresado p strong {
            color: #222222;
        }

        .badge-anio {
            background-color: #333333;
            color: #fff;
            padding: 0.25rem 0.6rem;
            font-size: 0.8rem;
            border-radius: 999px;
            white-space: nowrap;
        }

        /* Pastilla para unidad */
        .unidad-pill {
            display: inline-block;
            font-size: 0.95rem;
            font-weight: 600;
            padding: 0.25rem 0.9rem;
            border-radius: 999px;
            color: #ffffff;
            background-color: #333333;
            margin-bottom: 0.45rem;
            letter-spacing: 0.01em;
        }

        /* ====== Colores distintivos por Unidad + sombra en hover ====== */
        .card-unidad-azcapotzalco::before { background:#CD032E; }
        .card-unidad-azcapotzalco .unidad-pill { background:#CD032E; }
        .card-unidad-azcapotzalco:hover {
            box-shadow: 0 0.75rem 1.5rem rgba(205, 3, 46, 0.35);
        }

        .card-unidad-cuajimalpa::before { background:#F08200; }
        .card-unidad-cuajimalpa .unidad-pill { background:#F08200; }
        .card-unidad-cuajimalpa:hover {
            box-shadow: 0 0.75rem 1.5rem rgba(240, 130, 0, 0.35);
        }

        .card-unidad-iztapalapa::before { background:#57A519; }
        .card-unidad-iztapalapa .unidad-pill { background:#57A519; }
        .card-unidad-iztapalapa:hover {
            box-shadow: 0 0.75rem 1.5rem rgba(87, 165, 25, 0.35);
        }

        .card-unidad-lerma::before { background:#AD25A8; }
        .card-unidad-lerma .unidad-pill { background:#AD25A8; }
        .card-unidad-lerma:hover {
            box-shadow: 0 0.75rem 1.5rem rgba(173, 37, 168, 0.35);
        }

        .card-unidad-xochimilco::before { background:#0072CE; }
        .card-unidad-xochimilco .unidad-pill { background:#0072CE; }
        .card-unidad-xochimilco:hover {
            box-shadow: 0 0.75rem 1.5rem rgba(0, 114, 206, 0.35);
        }

        /* ====== Imagen principal (Galardonados/Anuario) ====== */
        .img-hover-zoom {
            overflow: hidden;
            border-radius: 8px;
        }

        .img-hover-zoom img {
            transition: transform 0.4s ease;
        }

        .img-hover-zoom:hover img {
            transform: scale(1.05);
        }

        /* ====== Botón de semblanza ====== */
        .btn-semblanza {
            border-radius: 999px;
            font-size: 0.8rem;
            padding: 0.25rem 0.9rem;
            border-color: #333333;
        }
        .btn-semblanza:hover {
            background:#333333;
            color:#ffffff;
        }

        /* ====== Bloque de filtros (tarjeta institucional) ====== */
        .filtros-wrapper {
            background-color: #f8f9fa;
            border-radius: 16px;
            padding: 1.75rem 1.75rem 1.75rem;
            border-left: 4px solid #333333;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.03);
        }

        .filtros-wrapper .form-control,
        .filtros-wrapper .form-select {
            border-radius: 10px;
            border-color: #d0d0d0;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        .filtros-wrapper .form-control:focus,
        .filtros-wrapper .form-select:focus {
            border-color: #333333;
            box-shadow: 0 0 0 0.15rem rgba(51, 51, 51, 0.15);
            transform: translateY(-1px);
        }

        .filtros-wrapper label {
            font-weight: 500;
        }

        .btn-filtros {
            border-radius: 999px;
            padding-inline: 2.5rem;
            padding-block: 0.6rem;
            background: #333333;
            border-color: #333333;
            transition: background-color 0.2s ease, border-color 0.2s ease,
                        transform 0.2s ease, box-shadow 0.2s ease;
        }

        .btn-filtros:hover {
            background-color: #4d4d4d;
            border-color: #4d4d4d;
            transform: translateY(-1px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        /* Listado para separarlo visualmente de los filtros */
        .listado-egresados {
            border-top: 1px solid #e5e5e5;
            margin-top: 2rem;
            padding-top: 1.5rem;
        }

        /* ====== Avatar de persona egresada (MÁS GRANDE) ====== */
        .egresado-avatar {
            width: 170px;
            height: 170px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e5e5e5;
        }

        @media (max-width: 576px) {
            .egresado-avatar {
                width: 110px;
                height: 110px;
            }
        }