/* Subrayado 1 difuminado*/
.subrayado1 {
    position: relative;
    display: inline-block;
    --distancia-texto: -4px; 
}
.subrayado1::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%; /* Fijamos el borde superior en la base del texto */
    width: 100%;
    height: 2px; /* Grosor que crece hacia abajo */
    background: linear-gradient(
        90deg,
        transparent 0%,
        #3498db 20%,
        #3498db 50%,
        #3498db 80%,
        transparent 100%
    );
    border-radius: 1px;
    opacity: 0.9;
    margin-top: var(--distancia-texto); /* Usamos la variable */
}


/* Subrayado 1 difuminado*/
.subrayado2 {
    position: relative;
    display: inline-block;
    --distancia-texto: -4px; 
}
.subrayado2::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%; /* Fijamos el borde superior en la base del texto */
    width: 100%;
    height: 1px; /* Grosor que crece hacia abajo */
    background: linear-gradient(
        90deg,
        transparent 0%,
        #3498db 20%,
        #3498db 50%,
        #3498db 80%,
        transparent 100%
    );
    border-radius: 1px;
    opacity: 0.9;
    margin-top: var(--distancia-texto); /* Usamos la variable */
}