@property --porcentaje {
            syntax: '<percentage>';
            inherits: false;
            initial-value: 0%;
        }

        :root {
            --color-progreso: #324350;
            --color-pista: #ffffff;
        }

     
        /* Espaciador para forzar el scroll y probar el efecto */
    
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
            max-width: 1400px;
            width: 90%;
            margin: 100px auto;
            justify-items: center;
        }

        /* Tarjeta con estado inicial oculto */
        .card-estadistica {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

        /* Clase que activará JavaScript al hacer scroll */
        .card-estadistica.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .grafico-circular {
            width: 260px;
            height: 260px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            margin-bottom: 25px;
            background: conic-gradient(var(--color-progreso) var(--porcentaje), var(--color-pista) 0);
        }

        /* La animación del círculo solo ocurre cuando se añade .visible */
        .visible .grafico-circular {
            animation: animarCirculo 2.2s cubic-bezier(0.2, 0, 0.2, 1) forwards;
        }

        .grafico-circular::before {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            background-color: #eaeced;
            border-radius: 50%;
        }

        .contenido-interno {
            position: relative;
            z-index: 2;
            text-align: center;
        }

        .contenido-interno i {
            font-size: 9rem;
    color: #324350;
    opacity: 0.;
    margin-bottom: 30px;

        }

        .numero-display {
            display: block;
            font-size: 3rem;
            font-weight: 900;
            color: #324350;
        }

        .titulo-dato {
              /*  font-size: 1rem;
     font-weight: 800; */
    color: #324350;
    text-transform: uppercase;
    text-align: center;
        }

        @keyframes animarCirculo {
            from { --porcentaje: 0%; }
            to { --porcentaje: 100%; }
        }

        /* Ajustes de Grid (3 columnas, 2 columnas, etc) */
        @media (max-width: 1200px) {
            .dashboard-grid { grid-template-columns: repeat(3, 1fr); }
            .card-estadistica:nth-child(4) { grid-column: 2; }
        }
        @media (max-width: 900px) {
            .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
            .card-estadistica:nth-child(4) { grid-column: auto; }
        }
        @media (max-width: 600px) {
            .dashboard-grid { grid-template-columns: 1fr; }
        }