.svg-lines-desktop {
    display: block;
}

.svg-lines-mobile {
    display: none;
}

.curved-line {
    position: absolute;
    z-index: -1;
    top: 15px;
    pointer-events: none; /* Para que la línea no interfiera con los clics */
    height: 40px; /* Altura fija para la línea */
}

.curved-line-top-left,
.curved-line-top-right {
    position: absolute;
    z-index: -1;
    top: 0;
    pointer-events: none; /* Para que la línea no interfiera con los clics */
}

.curved-line svg,
.curved-line-top-left svg,
.curved-line-top-right svg {
    display: block;
    width: 100%;
    height: 100%;
}

.curved-line svg path,
.curved-line-top-left svg path,
.curved-line-top-right svg path {
    stroke: #F36AA2;
    stroke-width: 2;
    fill: none;
}

.circle {
    position: absolute;
    width: 20px; /* Diámetro del círculo */
    height: 20px; /* Diámetro del círculo */
    background-color: blue; /* Color del círculo */
    border-radius: 50%;
}

@media screen and (max-width: 640px) {
    .svg-lines-desktop {
        display: none;
    }

    .svg-lines-mobile {
        display: block;
    }
}