.test-laPorosidad-barra-info-textos {
        width: 82%;
        transform: translate(11%, -25%);
        display: flex;
        justify-content: space-between;
    }

    .barra-progress-line {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 1em;
    }

    .barra-progress-line::before {
        content: "";
        position: absolute;
        height: 4px;
        width: 66%;
        background-color: var(--color-1);
        top: 5%;
        z-index: -1;
    }

    .laPorosidad-circle-number {
        background-color: var(--color-5);
        color: var(--color-3);
        width: 2em;
        height: 2em;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5em;
        font-weight: 600;
        transform: translate(272%, -15%);
        transition: all .3s ease-in-out;
        cursor: pointer;
    }

    .barra-progress-item {
        transition: all .3s ease-in-out;
    }

    .laPorosidad-opcion {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        background-color: var(--color-4);
        color: #fff;
        height: 210px;
        max-width: 300px;
        font-size: .8em;
        border-radius: 10px;
        padding: 1em 2em;
        margin: 5px;
        text-align: center;
        transition: all .3s ease-in-out;
        cursor: pointer;
    }

    .laPorosidad-opcion:hover {
        background-color: var(--color-3);
    }

    .laPorosidad-circle-number:hover {
        background-color: var(--color-3);
        color: #fff;
    }

    .poro-active {
        transform: scale(1.05);
        background-color: var(--color-3);
        color: #fff;
    }

    .poroNumber-active {
        background-color: var(--color-1);
        color: white;
    }

    hr {
        border: none;
        border-top: 1px solid var(--cColorTextos);
        margin: 10px 0;
    }


    @media (max-width: 1024px) {
        .barra-progress-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .barra-progress-line {
            flex-direction: column;
        }

        .barra-progress-line::before {
            opacity: 0;
        }

        .laPorosidad-opcion {
            font-size: 0.7em;
            padding: 0.5em 2em;
            height: 130px;
        }

        .laPorosidad-opcion hr {
            margin: 0;
        }

        .laPorosidad-circle-number {
            font-size: 1em;
            transform: translate(0%, 0%);
        }
    }

    @media (max-width: 1024px) {
        .barra-progress-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .barra-progress-line {
            flex-direction: column;
        }

        .barra-progress-line::before {
            opacity: 0;
        }

        .laPorosidad-opcion hr {
            margin: 0;
        }

        .laPorosidad-opcion {
            font-size: 0.6em;
            padding: 0.5em 2em;
            height: 91px;
        }

        .laPorosidad-circle-number {
            font-size: .8em;
        }
    }
    @media (max-width: 768px) {
        .barra-progress-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .barra-progress-line {
            flex-direction: column;
        }

        .barra-progress-line::before {
            opacity: 0;
        }

        .laPorosidad-opcion hr {
            margin: 0;
        }

        .laPorosidad-opcion {
            font-size: 0.58em;
            padding: 0.5em 2em;
            height: 85px;
        }

        .laPorosidad-circle-number {
            font-size: .8em;
        }
    }

    @media (max-width: 425px) {
        .laPorosidad-opcion hr {
            margin: 0;
        }

        .laPorosidad-opcion {
            height: 85px;
        }
    }

    @media (max-width: 375px) {
        .laPorosidad-opcion {
            height: 80px;
        }
    }