.barra-personalizada {
    display : none;
}
@media (max-width: 1025px) {
    /* Contenedor de la barra personalizada */
    .barra-personalizada {
        position: relative;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Contenedor de puntos */
    .puntos-barra {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    /* Puntos individuales */
    .punto {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #f3cae0;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        /* Punto activo */
        .punto.activo {
            background-color: #9e1c64;
            width: 25px;
            border-radius: 8px;
        }
}