:root {
    --colorBgOpTrip: #008cff2a;
    --colorTextOpTrip: #008cff;
}

.contentLinksOpTrip {
    /*contenedor de todos los links*/
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.linkOpTrip {
    /*contenedor del icono y del texto*/
    color: var(--colorTextOpTrip);
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.32);
    gap: 8px;
    position: relative;
    overflow: hidden;
}
.linkOpTrip:hover span {
    z-index: 2;
}

.linkOpTrip::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    background-image: linear-gradient(
        90deg,
        rgba(128, 128, 128, 0.4) 0%,
        rgba(128, 128, 128, 0.12) 25%,
        rgba(128, 128, 128, 0.12) 75%,
        rgba(128, 128, 128, 0.4) 100%
    );

    transition-duration: 0.2s;
}
.linkOpTrip:hover::before {
    content: "";
    width: 100%;
    height: 100%;
    transition-duration: 0.2s;
}
.iconsOpTrip {
    color: var(--colorTextOpTrip);
    font-size: 1.28em;
    width: 1.28em;
    height: 1.28em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}