.tabs {
    position: relative;
    display: flex;
    width: 100%;
    background: #c2c2c2ff;;
    padding: 0;
    margin: 0;
    height: 60px;
}

.tab {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    text-decoration: none;
    height: 100%;
    cursor: pointer;
    transition: filter 0.2s ease;
}

/* Cores */
.blue { background: #203CE2; }  /* PESO Manual de Boas Praticas para Identidade Visual: 700 */
.red { background: #D70000; } /* PESO Manual de Boas Praticas para Identidade Visual: 700 */
.green { background: #028907; } /* PESO Manual de Boas Praticas para Identidade Visual: 700 */

/* CURVAS ENTRE AS ABAS */
.tab.blue {
    border-radius: 0 0 0 0;
}

.tab.red {
    border-radius: 40px 0 0 0;
    margin-left: -40px;
}

.tab.green {
    border-radius: 40px 0 0 0;
    margin-left: -40px;
}

/* HOVER */
.tab:hover {
    filter: brightness(0.9);
}

/* INDICADOR ANIMADO (TRIÂNGULO) */
.indicator {
    position: absolute;
    bottom: -12px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 14px solid #203CE2;
    left: calc(0% + 16.66%);
    transform: translateX(-50%);
    transition: all 0.35s ease;
	z-index: 2;
}

/* COR DO TRIÂNGULO AO MUDAR ABA */
.tabs .tab.red.active ~ .indicator {
    border-top-color: #D70000;
    left: calc(50% + 0%);
}

.tabs .tab.green.active ~ .indicator {
    border-top-color: #028907;
    left: calc(83.33%);
}