@import url(../fonts/Saiba/saiba-45.regular.ttf);

@font-face {
  font-family: 'Saiba-45';
  src: url('../fonts/Saiba/saiba-45.regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.barra{
    font-family: 'Saiba-45';
    padding: 16px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #833597, #66338A, #4D2673, #00ff88);
}

.barra-contenido{
    width: 1300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 20px;
    line-height: 24px;
}

.cyber-btn{
    font-family: 'Saiba-45';
    padding: 12px 16px;
    border-radius: 8px;
    background: linear-gradient(to right, #833597, #331946);
    border: 1px solid #833597;
    color: #fff;
}

.cyber-btn:hover{
    color: #02FB87;
    background: #fff;
    border: 1px solid #833597;
}

.barra-contenido .ray-green{
    color: #02FB87;
}
.barra-contenido .ray-other{
    color: #FF3399;
}

.barra-contenido .ray-first{
    color: #210095;
}

@media(max-width: 1300px){
    .barra-contenido{
        width: 95%;
    }
}

@media(max-width: 600px){
    .barra-contenido{
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}